/* =================================== MUTTERTAG THEME Warm, emotional, lifestyle — nicht kitschig. Palette: Cream / Dusty Rose / Terracotta / Soft Gold Serif-Display (Fraunces) + Inter Body. Alles scoped auf .product-muttertag damit Schlager unberuehrt bleibt. =================================== */ .product-muttertag { /* Palette */ --mt-cream: #FBF5EE; --mt-cream-soft: #F4EADD; --mt-cream-deep: #ECDFCE; --mt-rose: #D4837E; --mt-rose-soft: #E9A8A3; --mt-rose-deep: #B85F5A; --mt-terracotta: #8A4B3F; --mt-gold: #C9A876; --mt-gold-soft: #E5D0A8; --mt-text: #2B2520; --mt-text-soft: #5A4F47; --mt-text-muted: #8A7F76; --mt-line: rgba(138, 75, 63, 0.15); --mt-shadow: 0 8px 30px rgba(138, 75, 63, 0.10); --mt-shadow-lg: 0 20px 50px rgba(138, 75, 63, 0.18); /* Font-Overrides */ --font-display: "DM Serif Display", "Playfair Display", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; background: var(--mt-cream) !important; background-image: none !important; color: var(--mt-text) !important; } /* Promo Banner — oben ueber der Kopfzeile, mit Countdown */ .product-muttertag .promo-banner { background: linear-gradient(90deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); color: #FFFFFF; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.06); } .product-muttertag .promo-banner-inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 3px 14px; font-size: 13.5px; text-align: center; flex-wrap: wrap; line-height: 1.25; } .product-muttertag .promo-banner strong { font-weight: 700; } .product-muttertag .mt-countdown { display: inline-flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; background: rgba(255, 255, 255, 0.18); color: #FFF7F0; padding: 2px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20); } .product-muttertag .mt-countdown-num { font-weight: 800; font-size: 14px; } .product-muttertag .mt-countdown-sep { opacity: 0.5; margin: 0 2px; } /* Header */ .product-muttertag .header { background: var(--mt-cream); border-bottom: 1px solid var(--mt-line); box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .product-muttertag .logo-text { color: var(--mt-text); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } .product-muttertag .logo-img { filter: brightness(0); } .product-muttertag .header-nav a { color: var(--mt-text-soft); font-weight: 500; } .product-muttertag .header-nav a:hover { color: var(--mt-rose-deep); } .product-muttertag .mobile-hamburger span { background: var(--mt-text); } .product-muttertag .mobile-menu { background: var(--mt-cream); border-left: 1px solid var(--mt-line); } .product-muttertag .mobile-menu a { color: var(--mt-text); } /* Buttons */ .product-muttertag .btn { font-family: var(--font-body); font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: 999px; /* Nur transform animieren (Hover-Lift). Shadow/Background sofort umschalten, damit disabled↔enabled-Wechsel beim Step-Wechsel keine 200ms-Interpolation zeigt („pale-looking“ Button). */ transition: transform .2s ease; } .product-muttertag .btn-primary, .product-muttertag .btn-header { background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); color: #FFFFFF; font-weight: 700; box-shadow: 0 8px 22px rgba(184, 95, 90, 0.42), 0 2px 4px rgba(184, 95, 90, 0.25); } .product-muttertag .btn-primary:hover, .product-muttertag .btn-header:hover { background: var(--mt-rose-deep); color: #FFFFFF; box-shadow: 0 12px 28px rgba(184, 95, 90, 0.5), 0 3px 6px rgba(184, 95, 90, 0.3); transform: translateY(-1px); } /* Disabled-State: deutlich runter damit der Kontrast zum freigeschalteten Button eindeutig ist. */ .product-muttertag .btn-primary:disabled, .product-muttertag #nextBtn:disabled, .product-muttertag #checkoutBtn:disabled { background: var(--mt-rose-soft) !important; box-shadow: none !important; opacity: 0.55 !important; transform: none !important; cursor: not-allowed; } .product-muttertag .btn-secondary { background: transparent; color: var(--mt-terracotta); border: 1.5px solid var(--mt-terracotta); } .product-muttertag .btn-secondary:hover { background: var(--mt-terracotta); color: #FFFFFF; } /* Fragebogen-Zurueck-Button: dezent, ohne Box (Box war zu dominant fuer eine Sekundaer-Aktion — Primaer-Button "Weiter" soll der visuelle Anker bleiben). */ .product-muttertag #prevBtn, .product-muttertag #prevBtn.btn-secondary { background: transparent; border: none; color: var(--mt-text-soft); box-shadow: none; padding: 0.5rem 0.4rem; font-weight: 500; } .product-muttertag #prevBtn, .product-muttertag #prevBtn.btn-secondary, .product-muttertag #prevBtn:hover, .product-muttertag #prevBtn.btn-secondary:hover, .product-muttertag #prevBtn:focus, .product-muttertag #prevBtn:active { text-decoration: none; } .product-muttertag #prevBtn:hover, .product-muttertag #prevBtn.btn-secondary:hover { background: transparent; color: var(--mt-text); transform: none; box-shadow: none; } /* Pfeil-Glyph hat unterschiedliche Baseline je nach Font — kleiner Y-Lift fuer optisches Center. */ .product-muttertag #prevBtn .prev-arrow { display: inline-block; transform: translateY(-1px); margin-right: 0.18rem; font-weight: 500; } .product-muttertag .btn-lg { font-size: 17px; padding: 14px 28px; } /* Headlines: Serif, warm */ .product-muttertag h1, .product-muttertag h2, .product-muttertag h3, .product-muttertag .hero-headline, .product-muttertag .section-title, .product-muttertag .form-step-title { font-family: var(--font-display); color: var(--mt-text); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; } .product-muttertag .hero-headline { font-weight: 500; } .product-muttertag .form-step-title { font-size: 26px; font-weight: 600; } .product-muttertag .form-step-sub { color: var(--mt-text-muted); font-family: var(--font-body); } /* HERO */ .product-muttertag .hero { background: linear-gradient(180deg, var(--mt-cream) 0%, var(--mt-cream-soft) 100%); } .product-muttertag .hero-bg { display: none; } .product-muttertag .hero-notes { display: none; } .product-muttertag .hero-badge { background: rgba(212, 131, 126, 0.12); color: var(--mt-rose-deep); border: 1px solid rgba(212, 131, 126, 0.25); font-weight: 600; } .product-muttertag .hero-video-wrap { box-shadow: var(--mt-shadow-lg); border-radius: 20px; overflow: hidden; border: 1px solid var(--mt-line); } .product-muttertag .hero-play-overlay { background: rgba(43, 37, 32, 0.55); } .product-muttertag .hero-play-overlay:hover { background: rgba(184, 95, 90, 0.7); } /* Hero-Pricing-Anker (Strikethrough Aktion) */ .product-muttertag .mt-price-strike { color: var(--mt-text-muted); text-decoration: line-through; text-decoration-color: var(--mt-rose); font-weight: 500; margin-right: 8px; } .product-muttertag .mt-price-now { color: var(--mt-rose-deep); font-weight: 700; } .product-muttertag .mt-discount-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; background: var(--mt-rose); color: #FFFFFF; padding: 3px 10px; border-radius: 999px; margin-left: 6px; vertical-align: middle; } /* Sections */ .product-muttertag section { background: transparent; } .product-muttertag .section-title { color: var(--mt-text); } .product-muttertag .section-sub { color: var(--mt-text-soft); } /* Cards & Surfaces */ .product-muttertag .card, .product-muttertag .review-card, .product-muttertag .bundle-card, .product-muttertag .voice-preview, .product-muttertag .tip-box, .product-muttertag .email-capture-block, .product-muttertag .summary-card, .product-muttertag .form-step, .product-muttertag .questionnaire { background: #FFFFFF; color: var(--mt-text); border: 1px solid var(--mt-line); border-radius: 16px; box-shadow: var(--mt-shadow); } .product-muttertag .questionnaire { background: linear-gradient(180deg, var(--mt-cream) 0%, var(--mt-cream-soft) 100%); border: none; box-shadow: none; } .product-muttertag .form-step { padding: 28px 24px; max-width: 720px; margin-left: auto; margin-right: auto; } /* Questionnaire-Wrap auf gleiche Maximalbreite begrenzen damit Navigation-Buttons, Social-Proof und Progress-Bar zentriert und kompakt sitzen (auf PC wirkt's sonst aufgebläht) */ .product-muttertag .questionnaire-wrap { max-width: 760px; margin-left: auto; margin-right: auto; } .product-muttertag .form-nav { max-width: 720px; margin-left: auto; margin-right: auto; } .product-muttertag .form-social-proof { max-width: 720px; margin-left: auto; margin-right: auto; transition: opacity 0.25s ease; } /* Toggle-Tiles (Anlass/Stimmung/Stil Grid) */ .product-muttertag .toggle-btn, .product-muttertag .toggle-btn-tile { background: #FFFFFF; color: var(--mt-text); border: 1.5px solid var(--mt-line); border-radius: 14px; transition: all .18s ease; } .product-muttertag .toggle-btn:hover, .product-muttertag .toggle-btn-tile:hover { border-color: var(--mt-rose); background: #FFFDFA; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212, 131, 126, 0.15); } .product-muttertag .toggle-btn.active, .product-muttertag .toggle-btn-tile.active { background: linear-gradient(180deg, #FFF5F3 0%, #FBE7E3 100%); border-color: var(--mt-rose); color: var(--mt-rose-deep); box-shadow: 0 8px 20px rgba(212, 131, 126, 0.25); } /* Active-State: Schrift kraeftiger damit auf Rose-Hintergrund klar lesbar bleibt. tile-desc bekommt dunklere Farbe (mt-text statt mt-rose-deep), font-weight 600 + no opacity-Reduction → klar lesbar auch im aktiven Zustand. */ .product-muttertag .toggle-btn-tile.active .tile-label { font-weight: 700 !important; color: var(--mt-rose-deep) !important; } .product-muttertag .toggle-btn-tile.active .tile-desc { font-weight: 600 !important; opacity: 1 !important; color: #6b3a3a !important; } .product-muttertag .toggle-btn-tile.active .tile-emoji { filter: drop-shadow(0 2px 4px rgba(184, 95, 90, 0.25)); } .product-muttertag .tile-emoji { font-size: 32px; } .product-muttertag .tile-label { color: inherit; font-weight: 600; } /* Form-Elemente */ .product-muttertag .form-input, .product-muttertag textarea, .product-muttertag input[type="text"], .product-muttertag input[type="email"], .product-muttertag input[type="number"], .product-muttertag input[type="tel"], .product-muttertag select { background: #FFFFFF !important; color: var(--mt-text) !important; border: 1.5px solid var(--mt-line) !important; border-radius: 12px !important; font-family: var(--font-body) !important; } .product-muttertag .form-input::placeholder, .product-muttertag textarea::placeholder { color: var(--mt-text-muted); } .product-muttertag .form-input:focus, .product-muttertag textarea:focus { border-color: var(--mt-rose) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(212, 131, 126, 0.18) !important; } .product-muttertag .form-label { color: var(--mt-text); font-weight: 600; } .product-muttertag .field-error { color: var(--mt-rose-deep); } .product-muttertag .char-counter { color: var(--mt-text-muted); } /* ============================================ Songpage-Info Step (Phase 4: "Eigene Song-Webseite") Phone-Mockup + 4 Feature-Bullets, 2-spaltig desktop, stacked mobile. ============================================ */ .product-muttertag .form-step[data-step="info"] .form-step-title { text-align: center; line-height: 1.25; } .product-muttertag .form-step[data-step="info"] .form-step-sub { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } .product-muttertag .songpage-info-layout { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 2.5rem; align-items: center; margin-top: 0; } .product-muttertag .songpage-phone-mock { display: flex; justify-content: center; } .product-muttertag .songpage-phone-frame { width: 100%; max-width: 240px; background: #fff; border: 8px solid #1a1a1a; border-radius: 32px; padding: 1.25rem 1rem 1.5rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); text-align: center; color: var(--mt-text); } .product-muttertag .songpage-phone-header { font-size: 0.78rem; font-weight: 600; color: var(--mt-text); margin-bottom: 0.4rem; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.08); padding-bottom: 0.5rem; } .product-muttertag .songpage-phone-occasion { font-style: italic; font-size: 0.78rem; color: var(--mt-text-muted); margin-bottom: 0.85rem; } .product-muttertag .songpage-phone-cover { width: 70%; aspect-ratio: 1 / 1; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; background: #1a1a1a; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 14px rgba(0, 0, 0, 0.85), 0 4px 10px rgba(0, 0, 0, 0.2); position: relative; } .product-muttertag .songpage-phone-cover::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle at center, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px); pointer-events: none; } .product-muttertag .songpage-phone-cover img { width: 56%; height: 56%; object-fit: cover; border-radius: 50%; z-index: 1; } .product-muttertag .songpage-phone-progress { display: grid; grid-template-columns: auto 1fr auto; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; } .product-muttertag .songpage-phone-time { font-size: 0.65rem; color: var(--mt-text-muted); font-variant-numeric: tabular-nums; } .product-muttertag .songpage-phone-bar { height: 3px; background: rgba(0, 0, 0, 0.08); border-radius: 3px; overflow: hidden; } .product-muttertag .songpage-phone-bar-fill { height: 100%; width: 25%; background: var(--mt-rose-deep); border-radius: 3px; } .product-muttertag .songpage-phone-controls { display: flex; justify-content: center; align-items: center; gap: 0.85rem; margin-bottom: 0.7rem; } .product-muttertag .songpage-phone-ctrl { color: var(--mt-text-muted); font-size: 0.85rem; } .product-muttertag .songpage-phone-ctrl-play { background: var(--mt-rose-deep); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; } .product-muttertag .songpage-phone-lyrics-hint { font-size: 0.75rem; text-align: left; color: var(--mt-text); border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 0.6rem; margin-top: 0.4rem; font-weight: 600; } .product-muttertag .songpage-info-intro { font-size: 0.95rem; color: var(--mt-text); line-height: 1.55; margin: 0 0 1.35rem; } .product-muttertag .songpage-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; } .product-muttertag .songpage-feature-list li { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: start; } .product-muttertag .songpage-feature-icon { font-size: 1.4rem; line-height: 1.2; } .product-muttertag .songpage-feature-text { display: flex; flex-direction: column; gap: 0.2rem; } .product-muttertag .songpage-feature-text strong { font-size: 1rem; color: var(--mt-text); font-weight: 700; } .product-muttertag .songpage-feature-text span { font-size: 0.88rem; color: var(--mt-text-muted); line-height: 1.5; } @media (max-width: 720px) { .product-muttertag .songpage-info-layout { grid-template-columns: 1fr; gap: 1.25rem; } .product-muttertag .songpage-phone-frame { max-width: 200px; } .product-muttertag .songpage-info-intro { text-align: center; } .product-muttertag .form-step[data-step="info"] .phone-mockup { width: 200px; height: 400px; } .product-muttertag .songpage-feature-list { gap: 0.7rem; } .product-muttertag .songpage-feature-text strong { font-size: 0.95rem; } .product-muttertag .songpage-feature-text span { font-size: 0.82rem; } } /* ============================================ Songseite-Step (Phase 4): Phone-Mockup-Override fuer Funnel-Kontext Re-uses .song-page-phone / .phone-mockup / .phone-screen / .phone-video von Landing aber mit kompakterer Skalierung damit es in den Funnel-Step passt. ============================================ */ .product-muttertag .form-step[data-step="info"] .song-page-phone { display: flex; justify-content: center; } .product-muttertag .form-step[data-step="info"] .phone-mockup { /* Landing-Proportionen 1:2 (280×560 → 240×480), kompakter fuer Funnel-Layout. Box-Shadow override: Default ist dunkler 60px-Drop + Orange-Glow — passt nicht zum Cream-Theme. */ width: 240px; height: 480px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10); } @media (max-width: 720px) { .product-muttertag .form-step[data-step="info"] .phone-mockup { width: 200px; height: 400px; } } /* ============================================ Plakette-Step (Phase 5): Upsell-Layout + Want-Toggle + Carousel + pkTrigger ============================================ */ .product-muttertag .form-step[data-step="plakette"] .form-step-title { text-align: center; line-height: 1.25; } .product-muttertag .form-step[data-step="plakette"] .form-step-sub { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } .product-muttertag .plakette-upsell-layout { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 2rem; align-items: center; margin: 1.5rem 0 1rem; } .product-muttertag .plakette-upsell-mockup img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.12); } .product-muttertag .plakette-upsell-size { display: block; margin-top: 0.1rem; font-size: 0.76rem; color: var(--mt-text-muted); text-align: right; padding-right: 0.5rem; align-self: stretch; } .product-muttertag .plakette-upsell-tag { display: inline-block; background: var(--mt-rose-pale, #f3d7d2); color: var(--mt-rose-deep); padding: 0.35rem 0.85rem; border-radius: 999px; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.85rem; } .product-muttertag .plakette-upsell-intro { font-size: 0.95rem; color: var(--mt-text); line-height: 1.55; margin: 0 0 1rem; } .product-muttertag .plakette-upsell-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; } .product-muttertag .plakette-upsell-bullets li { font-size: 0.92rem; color: var(--mt-text); } .product-muttertag .plakette-want-heading { font-family: 'DM Serif Display', serif; font-size: 1.25rem; text-align: center; margin: 0.4rem 0 1rem; color: var(--mt-text); } /* Frageseiten-Inhalt vertikal zentriert IM verfügbaren Raum, USP klebt am unteren Rand. USP ist IN-FLOW (kein position:absolute mehr): margin-top:auto pusht ihn an den Container-Boden, justify-content:center zentriert die restlichen Children dazwischen. Vorteil: USP kann nie mehr im Content-Text kleben — selbst bei extra langem form-group waechst der Container und USP bleibt sauber unter der form-group. Min-Gap zur form-group via margin-top des USP (1.5rem) garantiert. */ .product-muttertag .form-step.active { display: flex !important; flex-direction: column; min-height: 420px; position: relative; } .product-muttertag .form-step.active > * { flex-shrink: 0; } /* 2 Auto-Margins teilen den Free-Space gleichmaessig: erstes Kind kriegt margin-top:auto (Space ueber Content), USP kriegt margin-top:auto (Space ueber USP). Resultat: Content-Block (Title/Sub/Form-Group) zentriert vertikal IM Card, USP klebt am Boden. Bei vollem Container (Content > min-height) gehen beide Autos auf 0 -> Layout packt natuerlich. */ .product-muttertag .form-step.active > *:first-child { margin-top: auto; } .product-muttertag .form-step .form-step-usp { margin-top: auto; padding-top: 0.85rem; padding-bottom: 0; border-top: 1px solid rgba(0, 0, 0, 0.06); text-align: center; font-size: 0.78rem; color: var(--mt-text-muted); font-weight: 500; } /* Min-Atemraum zwischen letztem Content und USP-Trennlinie, greift wenn margin-top:auto = 0 (Container voll mit Content) — sonst wuerde Trennlinie direkt am Content kleben. */ .product-muttertag .form-step.active > .form-group, .product-muttertag .form-step.active > .songpage-info-layout { margin-bottom: 1.5rem; } /* Plakette-Step: zusaetzlicher Abstand zwischen Anzahl-Dropdown und USP-Trennstrich */ .product-muttertag .form-step[data-step="plakette"] .plakette-design-section { margin-bottom: 1.25rem; } /* "Ja, mit Plakette"-Tile: 39 EUR durchgestrichen + 30 EUR aktiv (konsistent mit plakette-upsell-tag) */ .product-muttertag .tile-desc.tile-desc-pricing s { color: var(--mt-text-muted); font-weight: 400; margin-right: 0.25rem; text-decoration: line-through; } .product-muttertag .tile-desc.tile-desc-pricing strong { color: var(--mt-rose-deep); font-weight: 700; } /* Mobile: kompaktere Box, USP-Schrift kleiner. Kein padding-bottom mehr noetig (USP ist in-flow). */ @media (max-width: 720px) { .product-muttertag .form-step.active { min-height: 380px; } .product-muttertag .form-step .form-step-usp { font-size: 0.74rem; padding-top: 0.85rem; } } @media (max-width: 480px) { .product-muttertag .form-step.active { min-height: 320px; } .product-muttertag .form-step .form-step-usp { font-size: 0.72rem; line-height: 1.35; padding: 0.75rem 0.5rem 0; } /* USP mit zwei Zeilen-Wrapping bei AGB-Disclaimer auf express-Step */ .product-muttertag .form-step[data-step="express"] .form-step-usp { font-size: 0.7rem; } } /* Plakette-Vorschau Click-to-Lightbox */ .product-muttertag .pk-funnel-zoom-trigger { background: none; border: none; padding: 0; width: 100%; cursor: zoom-in; border-radius: 16px; overflow: hidden; display: block; } .product-muttertag .pk-funnel-zoom-trigger:hover .pk-funnel-main-img { transform: scale(1.02); } .product-muttertag .pk-funnel-main-img { transition: transform 0.25s ease; } /* 4-fach wasserdicht gegen den "Lupen-Cursor blockiert Funnel"-Bug: 1. display:none default 2. [hidden] erzwingt display:none mit !important 3. pointer-events:none default — selbst bei display-Bug gehen Klicks durch 4. visibility:hidden default — unsichtbar UND nicht klickbar Cursor zoom-out wird AUSSCHLIESSLICH im is-open State gesetzt. */ .pk-funnel-lightbox { position: fixed; inset: 0; background: rgba(20, 10, 5, 0.88); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 2rem; pointer-events: none; visibility: hidden; } .pk-funnel-lightbox.is-open { display: flex; pointer-events: auto; visibility: visible; cursor: zoom-out; } .pk-funnel-lightbox[hidden] { display: none !important; pointer-events: none !important; visibility: hidden !important; } .pk-funnel-lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); } /* "AM BELIEBTESTEN" Badge auf der Ja-Tile (Phase 5) */ .product-muttertag .plakette-tile-popular { position: relative; overflow: visible; } .product-muttertag .plakette-tile-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #d4af37, #f4d56e); color: #4a3000; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.25rem 0.7rem; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35); pointer-events: none; z-index: 2; } .product-muttertag .plakette-upsell-tag s { color: var(--mt-text-muted); margin-right: 0.4rem; font-weight: 400; } .product-muttertag .plakette-upsell-tag strong { color: var(--mt-rose-deep); font-weight: 700; } .product-muttertag .plakette-design-section { margin-top: 1.5rem; } /* Funnel-Plakette-Carousel (analog Landing, aber kompakter) */ .product-muttertag .pk-funnel-gallery { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .product-muttertag .pk-funnel-main { position: relative; width: 100%; aspect-ratio: 1 / 1; background: rgba(0,0,0,0.02); border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-muttertag .pk-funnel-main-img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity 0.2s ease; } .product-muttertag .pk-funnel-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; width: 100%; } .product-muttertag .pk-funnel-thumb { background: #fff; border: 2px solid var(--mt-line); border-radius: 10px; padding: 0.4rem 0.25rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; transition: border-color 0.15s ease, transform 0.15s ease; } .product-muttertag .pk-funnel-thumb:hover { border-color: var(--mt-rose); transform: translateY(-1px); } .product-muttertag .pk-funnel-thumb.active { border-color: var(--mt-rose-deep); box-shadow: 0 0 0 2px rgba(184, 90, 90, 0.15); } .product-muttertag .pk-funnel-thumb img { width: 100%; height: 42px; object-fit: contain; } .product-muttertag .pk-funnel-thumb span { font-size: 0.7rem; color: var(--mt-text-muted); font-weight: 500; } .product-muttertag .pk-funnel-thumb.active span { color: var(--mt-rose-deep); font-weight: 600; } .product-muttertag .pk-funnel-gallery .plakette-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.92); border: 1px solid var(--mt-line); color: var(--mt-text); font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .product-muttertag .pk-funnel-gallery .plakette-arrow-left { left: 8px; } .product-muttertag .pk-funnel-gallery .plakette-arrow-right { right: 8px; } .product-muttertag .pk-funnel-gallery .plakette-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); } /* Day/Night-Switch Funnel-Override: Cream-Hintergrund braucht dunkle Label-Farben. !important weil das Default-Style aus style.css (rgba(255,255,255,0.35) → weiss-auf-weiss) sonst durchschlagen kann. */ .product-muttertag .form-step[data-step="plakette"] .pk-scene-switch { margin: 0.4rem 0 0.2rem; } .product-muttertag .form-step[data-step="plakette"] .pk-scene-label { color: var(--mt-text-muted) !important; font-weight: 600 !important; min-width: 3.6rem !important; } .product-muttertag .form-step[data-step="plakette"] .pk-scene-label-active { color: var(--mt-text) !important; } .product-muttertag .form-step[data-step="plakette"] .pk-scene-label-active[data-mode="night"] { text-shadow: 0 0 6px rgba(120, 80, 200, 0.3) !important; } @media (max-width: 720px) { .product-muttertag .plakette-upsell-layout { grid-template-columns: 1fr; gap: 1.25rem; margin: 1rem 0 0.5rem; } .product-muttertag .plakette-upsell-tag { display: inline-block; text-align: center; } .product-muttertag .plakette-upsell-mockup { max-width: 280px; margin: 0 auto; } .product-muttertag .plakette-want-heading { font-size: 1.15rem; margin: 0.6rem 0 0.8rem; } .product-muttertag .plakette-tile-badge { font-size: 0.6rem; padding: 0.2rem 0.55rem; } .product-muttertag .plakette-upsell-bullets li { font-size: 0.86rem; } .product-muttertag .plakette-upsell-intro { font-size: 0.88rem; } } /* ============================================ Express-Step (Phase 6): Knappheit-UI mit FOMO-Slots ============================================ */ .product-muttertag .form-step[data-step="express"] .form-step-title { text-align: center; line-height: 1.25; } .product-muttertag .form-step[data-step="express"] .form-step-sub { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; } .product-muttertag .scarcity-card { background: linear-gradient(180deg, #fff5e6 0%, #ffe5cc 100%); border: 1px solid rgba(184, 90, 90, 0.2); border-radius: 16px; padding: 1.25rem; margin-top: 1.5rem; } .product-muttertag .scarcity-heading { font-family: 'DM Serif Display', serif; font-size: 1rem; color: var(--mt-rose-deep); margin: 0 0 0.85rem; font-weight: 700; } .product-muttertag .scarcity-slots { display: grid; gap: 0.7rem; } .product-muttertag .scarcity-slot { background: #fff; border-radius: 12px; padding: 0.85rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 0.85rem; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .product-muttertag .scarcity-slot-info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .product-muttertag .scarcity-slot-title { font-weight: 700; font-size: 0.95rem; color: var(--mt-text); text-transform: capitalize; } .product-muttertag .scarcity-slot-meta { font-size: 0.78rem; color: var(--mt-text-muted); text-transform: capitalize; } .product-muttertag .scarcity-slot-free { font-weight: 700; font-size: 0.85rem; padding: 0.4rem 0.85rem; border-radius: 999px; flex-shrink: 0; white-space: nowrap; } .product-muttertag .scarcity-slot-high .scarcity-slot-free { background: #fee2e2; color: #b91c1c; } .product-muttertag .scarcity-slot-medium .scarcity-slot-free { background: #fef3c7; color: #b45309; } /* Pulsierender roter Live-Dot signalisiert Echtzeit-Daten (Trust + FOMO). 3s = ruhiger Puls. */ .scarcity-pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; margin-right: 6px; vertical-align: middle; animation: scarcity-pulse 3s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } @keyframes scarcity-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); } 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); } } .scarcity-slot-free strong { font-weight: 800; font-size: 1.05em; } /* USP-Flag-Image (Plakette-Step "Made in Germany") */ .usp-flag-img { display: inline-block; width: 1em; height: auto; vertical-align: -0.15em; margin: 0 0.15em 0 0.25em; } /* Step 7: kein "Du bist gleich fertig"-Zwischenscreen — direkt Stripe-Embed. Title + Sub ausblenden, Layout auf flex-start fuer Embed-Mount-Position. */ .product-muttertag .form-step[data-step="7"].active { padding-bottom: 0 !important; justify-content: flex-start !important; min-height: 480px; } .product-muttertag .form-step[data-step="7"] .form-step-title, .product-muttertag .form-step[data-step="7"] .form-step-sub, .product-muttertag .form-step[data-step="7"] #priceBreakdown, .product-muttertag .form-step[data-step="7"] .price-breakdown { display: none !important; } /* Express-Step: Disclaimer (im USP-Slot) lesbar mit AGB-Links. */ .product-muttertag .form-step[data-step="express"] .form-step-usp { font-size: 0.72rem; color: var(--mt-text-muted); line-height: 1.5; } .product-muttertag .form-step[data-step="express"] .form-step-usp a { color: var(--mt-rose-deep); text-decoration: underline; } @media (max-width: 480px) { .product-muttertag .scarcity-slot { flex-direction: column; align-items: stretch; gap: 0.5rem; } .product-muttertag .scarcity-slot-free { text-align: center; } } /* Prompt-Chips (Step 4) */ .product-muttertag .mt-prompt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .product-muttertag .mt-chip { background: #FFFFFF; color: var(--mt-terracotta); border: 1px solid var(--mt-line); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s ease; } .product-muttertag .mt-chip:hover { background: var(--mt-rose); color: #FFFFFF; border-color: var(--mt-rose); transform: translateY(-1px); } /* Progress Bar */ .product-muttertag .progress-header { background: transparent; max-width: 720px; margin: 0 auto 14px; padding-top: 8px; } .product-muttertag .progress-bar { background: rgba(138, 75, 63, 0.14); border-radius: 999px; overflow: hidden; height: 8px; box-shadow: inset 0 1px 2px rgba(138, 75, 63, 0.12); margin-bottom: 8px; } .product-muttertag .progress-fill { background: linear-gradient(90deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); box-shadow: 0 0 10px rgba(184, 95, 90, 0.45); transition: width 0.45s cubic-bezier(.25,.8,.25,1); } .product-muttertag .progress-text { color: var(--mt-text-soft); font-weight: 600; font-size: 13.5px; } /* Bundle-Cards (Step 7 + Landing) */ .product-muttertag .bundle-card { background: #FFFFFF; border: 1.5px solid var(--mt-line); } .product-muttertag .bundle-card.selected, .product-muttertag .bundle-card:has(input:checked) { border-color: var(--mt-rose); background: linear-gradient(180deg, #FFFDFA 0%, #FFF5F3 100%); box-shadow: var(--mt-shadow-lg); } .product-muttertag .bundle-title { color: var(--mt-text); font-family: var(--font-display); } .product-muttertag .bundle-price { color: var(--mt-rose-deep); font-weight: 700; } .product-muttertag .bundle-price-old { text-decoration: line-through; color: var(--mt-text-muted); margin-right: 8px; font-weight: 500; } .product-muttertag .bundle-discount-tag { display: inline-block; font-size: 11px; font-weight: 700; background: var(--mt-rose); color: #FFFFFF; padding: 2px 8px; border-radius: 999px; margin-left: 4px; vertical-align: middle; } /* Footer */ .product-muttertag .footer { background: var(--mt-cream-deep); color: var(--mt-text-soft); border-top: 1px solid var(--mt-line); } .product-muttertag .footer a { color: var(--mt-terracotta); } .product-muttertag .footer a:hover { color: var(--mt-rose-deep); } /* Reviews */ .product-muttertag .review-card { background: #FFFFFF; border: 1px solid var(--mt-line); } .product-muttertag .review-stars { color: var(--mt-gold); } .product-muttertag .review-name { color: var(--mt-text); } .product-muttertag .review-text { color: var(--mt-text-soft); } /* Value-Props */ .product-muttertag .value-prop-item { color: var(--mt-terracotta); font-weight: 500; } .product-muttertag .value-props-inline { background: transparent; } /* Tip-Box */ .product-muttertag .tip-box { background: var(--mt-cream-soft); border: 1px solid var(--mt-line); color: var(--mt-text-soft); } /* Voice-Preview */ .product-muttertag .voice-column { background: transparent; } .product-muttertag .voice-play-btn { background: var(--mt-rose); color: #FFFFFF; } .product-muttertag .voice-play-btn:hover { background: var(--mt-rose-deep); } .product-muttertag .voice-progress-bar { background: var(--mt-cream-deep); } .product-muttertag .voice-progress-fill { background: var(--mt-rose); } .product-muttertag .voice-preview-credit { color: var(--mt-text-muted); } /* Summary Card */ .product-muttertag .summary-card, .product-muttertag .summary-row { color: var(--mt-text); } .product-muttertag .summary-label { color: var(--mt-text-muted); } .product-muttertag .summary-value { color: var(--mt-text); } .product-muttertag .summary-section-title { color: var(--mt-terracotta); font-family: var(--font-display); } /* Links & Highlights */ .product-muttertag a { color: var(--mt-terracotta); } .product-muttertag a:hover { color: var(--mt-rose-deep); } /* Step 1 Muttertag — Name-Inputs-Layout */ .product-muttertag .mt-names-grid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 640px) { .product-muttertag .mt-names-grid { grid-template-columns: 1fr 1fr; } .product-muttertag .mt-names-grid .mt-full { grid-column: 1 / -1; } } /* Section-Variants */ .product-muttertag .section-alt { background: var(--mt-cream-soft); } .product-muttertag .hero-play-label { color: #FFFFFF; } /* =========================== MUTTERTAG THEME · ADD-ONS Zusätzliche Overrides für Theme-Leaks die beim Live-Check auffallen: - Orange-Variable global überschreiben (inline-styles mit var(--orange) werden dadurch auch rose) - Hero-Highlight / Text-Gradient ohne Schlager-Orange - Step-Cards auf Light-Theme - Testimonial-Cards / Review-Cards Light - Section-Divider / FAQ / Pricing-Card Warm =========================== */ .product-muttertag { /* Kritisch: viele Components nutzen inline style="background:var(--orange)" → indem wir die Schlager-Variablen hier im Scope umdefinieren werden sie automatisch rose/cream */ --orange: #D4837E; --orange-light: #E9A8A3; --orange-glow: rgba(212, 131, 126, 0.28); --yellow: #C9A876; --yellow-soft: #F1E6C6; --sand: #ECDFCE; --sand-dark: #DCCEB6; --dark: #FBF5EE; --dark-card: #FFFFFF; --dark-surface: #FBF5EE; --gray: #8A7F76; --gray-light: #2B2520; --white: #2B2520; /* Text-Nutzungen auf dunkel für Light-Theme */ --shadow: 0 8px 30px rgba(138, 75, 63, 0.10); --shadow-glow: 0 0 40px rgba(212, 131, 126, 0.25); } /* Hero-Highlight + Text-Gradient — in Schlager Orange-Gradient, in Muttertag Rose */ .product-muttertag .hero-highlight, .product-muttertag .text-gradient { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--mt-rose-deep) !important; color: var(--mt-rose-deep) !important; font-family: var(--font-display); } /* Hero-Musiknoten (Schlager-Deko) komplett verstecken */ .product-muttertag .hero-notes, .product-muttertag .hero-bg { display: none !important; } /* Hero-Trust-Icons */ .product-muttertag .hero-trust .trust-item { color: var(--mt-terracotta); } .product-muttertag .hero-trust .trust-icon { color: var(--mt-rose); } /* Proof-Marquee */ .product-muttertag .proof-bar { background: var(--mt-cream-soft); border-top: 1px solid var(--mt-line); border-bottom: 1px solid var(--mt-line); } .product-muttertag .proof-notification { color: var(--mt-text-soft); background: transparent; } .product-muttertag .proof-dot { background: var(--mt-rose); } .product-muttertag .proof-dot--green { background: #7FB58A; } .product-muttertag .proof-dot--blue { background: #7FA5BD; } .product-muttertag .proof-dot--yellow { background: var(--mt-gold); } .product-muttertag .proof-dot--orange { background: var(--mt-rose); } /* How-it-works Step-Cards — Light-Theme */ .product-muttertag .how-it-works { background: var(--mt-cream); } .product-muttertag .step-card { background: #FFFFFF !important; border: 1px solid var(--mt-line) !important; color: var(--mt-text) !important; box-shadow: var(--mt-shadow); } .product-muttertag .step-number { background: var(--mt-rose) !important; color: #FFFFFF !important; } .product-muttertag .step-icon { color: var(--mt-terracotta); } .product-muttertag .step-title { color: var(--mt-text) !important; font-family: var(--font-display); } .product-muttertag .step-desc { color: var(--mt-text-soft) !important; } .product-muttertag .step-connector, .product-muttertag .step-connector svg, .product-muttertag .step-connector path { stroke: var(--mt-rose) !important; fill: var(--mt-rose) !important; color: var(--mt-rose) !important; } /* Testimonials — Light */ .product-muttertag .testimonials { background: var(--mt-cream-soft); } .product-muttertag .testimonial-card-h, .product-muttertag .testimonial-video-card, .product-muttertag .testimonial-review-card, .product-muttertag .testimonial-video-placeholder { background: #FFFFFF !important; border: 1px solid var(--mt-line) !important; color: var(--mt-text) !important; box-shadow: var(--mt-shadow); } .product-muttertag .testimonial-video-placeholder-content, .product-muttertag .testimonial-video-placeholder-text, .product-muttertag .testimonial-video-placeholder-icon { color: var(--mt-text-muted) !important; } .product-muttertag .testimonial-video-placeholder-wrap { background: var(--mt-cream-soft) !important; } .product-muttertag .testimonial-text, .product-muttertag .author-name { color: var(--mt-text) !important; } .product-muttertag .author-detail { color: var(--mt-text-muted) !important; } .product-muttertag .author-avatar { background: var(--mt-rose) !important; color: #FFFFFF !important; } .product-muttertag .carousel-arrow { background: var(--mt-rose) !important; color: #FFFFFF !important; border: none !important; } .product-muttertag .idx-play-row { background: var(--mt-cream-soft) !important; border: 1px solid var(--mt-line) !important; } .product-muttertag .idx-play-row > div > div:first-child { color: var(--mt-text-muted) !important; } .product-muttertag .idx-play-row > div > div:last-child { color: var(--mt-text) !important; font-family: var(--font-body); } .product-muttertag .review-play-btn, .product-muttertag .video-play-btn { background: var(--mt-rose) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(212, 131, 126, 0.35) !important; } /* Reviews: Hörprobe-Boxen und Avatar auf einheitlicher Y-Höhe über alle Karten */ .product-muttertag .testimonial-review-card { display: flex !important; flex-direction: column; } .product-muttertag .testimonial-review-card .idx-play-row { margin-top: auto; } /* Bebas-Neue Testimonial-Titel → Fraunces */ .product-muttertag .testimonial-review-card [style*="Bebas Neue"] { font-family: var(--font-display) !important; color: var(--mt-text) !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: 1.15rem !important; } /* Review-Bild-Panel: Platzhalter oben in der Card (full-bleed). - Nutzt Rose-Gradient + Initial als Fallback - Sobald ein eingesetzt wird, blendet :has(img) den Initial aus */ .product-muttertag .testimonial-review-card .review-hero-img { width: calc(100% + 3rem); height: 160px; margin: -1.5rem -1.5rem 0.8rem -1.5rem; background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.88); font-family: var(--font-display); font-size: 3rem; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; } .product-muttertag .testimonial-review-card .review-hero-img::after { content: attr(data-author-initial); } .product-muttertag .testimonial-review-card .review-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-muttertag .testimonial-review-card .review-hero-img:has(img)::after { content: none; } /* Emotional Section */ .product-muttertag .emotional { background: var(--mt-cream); } .product-muttertag .emotional-desc { color: var(--mt-text-soft); } .product-muttertag .emotional-occasions { gap: 10px; } .product-muttertag .occasion-tag { background: rgba(212, 131, 126, 0.10); border: 1px solid rgba(212, 131, 126, 0.25); color: var(--mt-terracotta); font-weight: 500; } /* Section-Divider: Cocktail-Glas raus (Schlager) — einfach komplett verstecken */ .product-muttertag .section-divider { display: none !important; } /* Song-Page Section */ .product-muttertag .song-page-section { background: var(--mt-cream-soft); } /* Pricing Section */ .product-muttertag .pricing-section { background: var(--mt-cream); } .product-muttertag .pricing-card { background: #FFFFFF !important; border: 1.5px solid var(--mt-line) !important; color: var(--mt-text) !important; box-shadow: var(--mt-shadow-lg); } .product-muttertag .pricing-price { color: var(--mt-rose-deep) !important; font-family: var(--font-display); } .product-muttertag .pricing-price-old { text-decoration: line-through; color: var(--mt-text-muted); font-size: 0.7em; margin-right: 10px; font-weight: 500; } .product-muttertag .pricing-features li { color: var(--mt-text-soft) !important; } .product-muttertag .pricing-check { color: var(--mt-rose) !important; stroke: var(--mt-rose) !important; } .product-muttertag .pricing-trust { color: var(--mt-text-muted) !important; } /* Plakette Section */ .product-muttertag .plakette-section { background: var(--mt-cream-soft); } /* FAQ — Redesign: abgesetzte Cards mit Schatten, grosszuegiger Abstand */ .product-muttertag .faq { background: var(--mt-cream); } .product-muttertag .faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .product-muttertag .faq-item { background: #FFFFFF !important; border: 1px solid var(--mt-line) !important; border-bottom: 1px solid var(--mt-line) !important; border-radius: 14px !important; padding: 4px 24px !important; color: var(--mt-text) !important; box-shadow: 0 1px 3px rgba(74, 33, 21, 0.04); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .product-muttertag .faq-item:hover { border-color: var(--mt-rose) !important; box-shadow: 0 4px 14px rgba(184, 86, 106, 0.08); } .product-muttertag .faq-item[open] { border-color: var(--mt-rose) !important; box-shadow: 0 4px 18px rgba(184, 86, 106, 0.10); } .product-muttertag .faq-question { color: var(--mt-text) !important; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; padding: 18px 0 !important; letter-spacing: 0.005em; } .product-muttertag .faq-question::after { content: '+'; color: var(--mt-rose-deep); font-weight: 300; transition: transform 0.25s ease, color 0.25s ease; } .product-muttertag .faq-item[open] .faq-question::after { transform: rotate(45deg); color: var(--mt-rose-deep); } .product-muttertag .faq-answer { color: var(--mt-text-soft) !important; font-size: 0.97rem; line-height: 1.65; padding: 0 0 18px !important; border-top: 1px solid var(--mt-line); padding-top: 16px !important; margin-top: 2px; } .product-muttertag .faq-answer strong { color: var(--mt-rose-deep); font-weight: 600; } /* Responsive: etwas engere Padding auf Mobile */ @media (max-width: 500px) { .product-muttertag .faq-list { gap: 10px; } .product-muttertag .faq-item { padding: 2px 18px !important; border-radius: 12px !important; } .product-muttertag .faq-question { font-size: 1rem; padding: 15px 0 !important; } .product-muttertag .faq-answer { font-size: 0.93rem; padding-top: 14px !important; padding-bottom: 15px !important; } } /* Guarantee Section */ .product-muttertag .guarantee-section { background: var(--mt-cream-soft); } /* Final CTA */ .product-muttertag .final-cta { background: linear-gradient(180deg, var(--mt-cream) 0%, var(--mt-cream-deep) 100%); } /* Trust-Badges unter Hero */ .product-muttertag .hero-cta { background: var(--mt-rose) !important; color: #FFFFFF !important; } .product-muttertag .hero-cta:hover { background: var(--mt-rose-deep) !important; } /* Song-Page / Gallery / Bundle-Savings */ .product-muttertag .bundle-savings { color: var(--mt-rose-deep) !important; font-weight: 600; } .product-muttertag .bundle-savings-highlight { background: var(--mt-rose); color: #FFFFFF !important; border-radius: 999px; padding: 2px 8px; } /* Logo-Filter nochmal expliziter (logo-img muss dunkel sein auf Cream) */ .product-muttertag .logo-img { filter: brightness(0); opacity: 0.85; } .product-muttertag .footer .logo-img { filter: brightness(0.3); } /* Logo optisch mittig zum Schriftzug — leicht nach unten in Header und Footer */ .product-muttertag .header .logo-img, .product-muttertag .footer .logo-img { position: relative; top: 2px; } /* Tile-Beschreibung (neu) */ .product-muttertag .tile-desc { display: block; font-size: 12px; font-weight: 400; color: var(--mt-text-muted); margin-top: 4px; line-height: 1.3; } .product-muttertag .toggle-btn-tile.active .tile-desc { color: var(--mt-rose-deep); opacity: 0.85; } /* Form-Label "(optional)" Badge */ .product-muttertag .form-label-opt { color: var(--mt-text-muted); font-weight: 400; font-size: 0.85em; margin-left: 4px; } /* Summary section title Abstand */ .product-muttertag .summary-section { margin-bottom: 14px; } .product-muttertag .summary-section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .product-muttertag .summary-detail { background: var(--mt-cream-soft); border-radius: 10px; padding: 10px 12px; color: var(--mt-text); font-size: 14px; line-height: 1.5; } /* --- Final Polish: Review-Video-Placeholder light theme --- */ .product-muttertag .review-video-card, .product-muttertag .review-video-placeholder, .product-muttertag .review-video-thumb, .product-muttertag .review-video-thumb-placeholder { background: var(--mt-cream-soft) !important; border: 1px solid var(--mt-line) !important; color: var(--mt-text-muted) !important; } .product-muttertag .review-video-placeholder-icon, .product-muttertag .review-video-placeholder-text { color: var(--mt-text-muted) !important; } /* Reviews-Stats-Icons */ .product-muttertag .reviews-stars { color: var(--mt-gold); } .product-muttertag .reviews-stat { color: var(--mt-text-soft); } .product-muttertag .reviews-stat-icon { color: var(--mt-rose); } /* Filter-Pills */ .product-muttertag .filter-pill { background: #FFFFFF !important; color: var(--mt-text) !important; border: 1.5px solid var(--mt-line) !important; border-radius: 999px !important; } .product-muttertag .filter-pill.active, .product-muttertag .filter-pill:hover { background: var(--mt-rose) !important; color: #FFFFFF !important; border-color: var(--mt-rose) !important; } /* Review-Cards auf bewertungen.html */ .product-muttertag .review-card { background: #FFFFFF !important; border: 1px solid var(--mt-line) !important; color: var(--mt-text) !important; box-shadow: var(--mt-shadow); } .product-muttertag .review-badge { background: rgba(212, 131, 126, 0.12) !important; color: var(--mt-terracotta) !important; border: 1px solid rgba(212, 131, 126, 0.25) !important; font-weight: 600; } .product-muttertag .review-stars { color: var(--mt-gold) !important; } .product-muttertag .review-title { font-family: var(--font-display); color: var(--mt-text) !important; font-weight: 600; letter-spacing: -0.01em; } .product-muttertag .review-text { color: var(--mt-text-soft) !important; } .product-muttertag .review-author-name { color: var(--mt-text) !important; } .product-muttertag .review-author-badge { color: var(--mt-text-muted) !important; } .product-muttertag .review-author-avatar { background: var(--mt-rose) !important; color: #FFFFFF !important; } .product-muttertag .reviews-final-cta { background: var(--mt-cream-soft) !important; } /* ======================================================== FRAGEBOGEN-EXTRAS (Muttertag CRO-Reihenfolge): Tile-with-Audio, Erinnerung-Highlight, Feinschliff, Tile-Audio-Toast — alles scoped auf .product-muttertag ======================================================== */ /* Kachel + kleiner Audio-Play-Button darunter */ .product-muttertag .tile-with-audio { display: flex; flex-direction: column; gap: 6px; } .product-muttertag .tile-with-audio .toggle-btn-tile { width: 100%; } .product-muttertag .tile-audio-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 15px; background: #FFFFFF; color: var(--mt-terracotta); border: 1.5px solid rgba(138, 75, 63, 0.35); border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: transform 0.18s ease, background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s; line-height: 1; min-height: 42px; width: 100%; box-shadow: 0 1px 2px rgba(138, 75, 63, 0.06); } .product-muttertag .tile-audio-btn:hover { background: rgba(138, 75, 63, 0.06); border-color: var(--mt-terracotta); color: var(--mt-terracotta-deep, var(--mt-terracotta)); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(138, 75, 63, 0.14); } .product-muttertag .tile-audio-btn .voice-play-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--mt-terracotta); color: #FFFFFF; font-size: 11px; line-height: 1; padding-left: 1px; /* optischer Ausgleich Play-Dreieck */ transition: background 0.18s, color 0.18s; } .product-muttertag .tile-audio-btn:hover .voice-play-icon { background: var(--mt-terracotta-deep, var(--mt-terracotta)); } .product-muttertag .tile-audio-btn.playing { background: var(--mt-terracotta); color: #FFFFFF; border-color: var(--mt-terracotta); box-shadow: 0 3px 12px rgba(138, 75, 63, 0.25); } .product-muttertag .tile-audio-btn.playing:hover { background: var(--mt-terracotta-deep, var(--mt-terracotta)); color: #FFFFFF; border-color: var(--mt-terracotta-deep, var(--mt-terracotta)); } .product-muttertag .tile-audio-btn.playing .voice-play-icon { background: #FFFFFF; color: var(--mt-terracotta); padding-left: 0; } .product-muttertag .tile-audio-btn[data-placeholder="true"] { opacity: 0.55; cursor: help; background: transparent; box-shadow: none; } .product-muttertag .tile-audio-btn[data-placeholder="true"]:hover { background: var(--mt-cream-soft); color: var(--mt-text-soft); border-color: var(--mt-line); transform: none; box-shadow: none; } .product-muttertag .tile-audio-btn[data-placeholder="true"] .voice-play-icon { opacity: 0.6; background: var(--mt-line); color: var(--mt-text-soft); } .product-muttertag .tile-audio-label { font-size: 13px; } /* Gleich-hohe Tiles auf Stil-/Tempo-/Voice-Step */ .product-muttertag .toggle-grid-stil, .product-muttertag .toggle-grid-2 { align-items: stretch; } .product-muttertag .tile-with-audio { height: 100%; } .product-muttertag .tile-with-audio .toggle-btn-tile { flex: 1 1 auto; min-height: 128px; justify-content: center; } .product-muttertag .toggle-grid-stil .tile-label { min-height: 2.6em; } /* Erinnerung-Feld visuell dezent hervorheben (nicht aufdringlich) */ .product-muttertag .erinnerung-highlight { background: rgba(201, 168, 118, 0.08); border: 1px solid rgba(201, 168, 118, 0.25); border-radius: 10px; padding: 14px 14px 10px; margin-top: 12px; } .product-muttertag .erinnerung-hint { font-size: 12px; color: var(--mt-text-muted); line-height: 1.4; } /* Feinschliff-Hinweise (Step 9) */ .product-muttertag .feinschliff-hint { font-size: 12px; color: var(--mt-text-muted); line-height: 1.4; } /* Tile-Audio-Toast (Placeholder-Feedback) */ .tile-audio-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px); background: rgba(43, 37, 32, 0.96); color: #FFF7F0; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 500; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; } .tile-audio-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* Mobile-Anpassungen */ @media (max-width: 640px) { .product-muttertag .tile-audio-btn { padding: 6px 8px; font-size: 12px; } .product-muttertag .tile-audio-label { font-size: 11.5px; } } /* ======================================================== UI/UX-POLISH (Gruppe B — Letter-Spacing, Zentrierung, Voice-Preview-Padding, Nudge-Modal, Success-Seite) ======================================================== */ /* Dicke Display-Headlines: mehr Buchstaben-Abstand */ .product-muttertag .hero-headline, .product-muttertag .section-title, .product-muttertag .form-step-title, .product-muttertag .summary-section-title, .product-muttertag .guarantee-title, .product-muttertag .faq h2, .product-muttertag .final-cta h2, .product-muttertag .emotional h2, .product-muttertag .how-it-works h2, .product-muttertag .testimonials h2, .product-muttertag .pricing-section h2, .product-muttertag .plakette-section h2, .product-muttertag .song-page-section h2 { letter-spacing: 0.015em; } .product-muttertag .hero-headline { letter-spacing: 0.01em; } /* Anker-Sprünge (#faq, #beispiele): 1) overflow-x von body nach html/clip umbiegen — body { overflow-x: hidden } zwingt Chrome body zum Scroll-Root, wodurch hash-Anchors nicht korrekt scrollen. clip verhält sich wie hidden, erzwingt aber keinen Scroll-Ancestor. 2) scroll-margin-top, damit der Section-Title nicht unter dem fixed Promo-Banner + Header (~100px) verschwindet. */ body.product-muttertag { overflow-x: clip; } html:has(body.product-muttertag) { overflow-x: clip; /* Dynamisch: Banner+Header Höhe (gesetzt von banner.js) + 28px Atemraum */ scroll-padding-top: calc(var(--chrome-offset, 170px) + 28px); } .product-muttertag section[id] { scroll-margin-top: calc(var(--chrome-offset, 170px) + 28px); } @media (max-width: 640px) { html:has(body.product-muttertag) { scroll-padding-top: calc(var(--chrome-offset, 130px) + 20px); } .product-muttertag section[id] { scroll-margin-top: calc(var(--chrome-offset, 130px) + 20px); } } /* Stil- + Tempo-Grid (3 Tiles) zentriert + symmetrisch */ .product-muttertag .toggle-grid-stil { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; justify-content: center; justify-items: stretch; max-width: 900px; margin-left: auto; margin-right: auto; } @media (max-width: 720px) { .product-muttertag .toggle-grid-stil { grid-template-columns: 1fr; max-width: 420px; } } /* Stimmung-Grid (4 Tiles) symmetrisch zentriert */ .product-muttertag .toggle-grid-2[data-group="stimmung"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 780px; margin-left: auto; margin-right: auto; } /* Stimme-Grid (Tobi/Marie): groesser und praesenter, weil das die "Stimme deines Songs" ist — wichtige Auswahl, soll nicht winzig wirken neben den Audio-Pillen darunter. */ .product-muttertag .toggle-grid-2[data-group="stimme"] .toggle-btn-tile { min-height: 96px; padding: 1.1rem 0.9rem; } .product-muttertag .toggle-grid-2[data-group="stimme"] .tile-emoji { font-size: 1.7rem; margin-bottom: 0.25rem; } .product-muttertag .toggle-grid-2[data-group="stimme"] .tile-label { font-size: 1.05rem; font-weight: 700; } /* Voice-Preview: Play-Button nicht ueberragen lassen — Card braucht inneren Padding damit der runde Button nicht auf dem Kartenrand sitzt */ .product-muttertag .voice-preview { padding: 14px 16px 12px; min-height: 84px; justify-content: center; } .product-muttertag .voice-column { display: flex; flex-direction: column; gap: 10px; } /* Play-Button-Schatten etwas sanfter (passt zum warmen Theme) */ .product-muttertag .voice-play-btn { box-shadow: 0 3px 10px rgba(184, 95, 90, 0.28); } .product-muttertag .voice-play-btn:hover { box-shadow: 0 5px 14px rgba(184, 95, 90, 0.40); } /* Nudge-Modal "Dein Song kann noch persönlicher werden" — Schrift heller auf dem dunklen Overlay */ .product-muttertag .nudge-modal-title { color: #FFF7F0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .product-muttertag .nudge-modal-text { color: rgba(255, 247, 240, 0.92); } /* Success-Seite: Text-Farbe an Muttertag-Theme anpassen (ursprünglich #ccc auf dunkel — jetzt dunkel auf cream) */ body.product-muttertag .success-text { color: var(--mt-text-soft) !important; } body.product-muttertag .success-text strong { color: var(--mt-text) !important; } body.product-muttertag .success-status { color: var(--mt-text-muted) !important; } body.product-muttertag .success-card { background: #FFFFFF !important; border: 1px solid var(--mt-line) !important; box-shadow: var(--mt-shadow) !important; } body.product-muttertag .success-title { color: var(--mt-terracotta) !important; } /* Muttertag-Summary: Zeilen mit laengerem Freitext (Beschreibung/Erinnerung). Value steht rechts neben Label wie die anderen Zeilen; pre-wrap fuer Zeilenumbrueche. */ .product-muttertag .summary-row-block { align-items: flex-start; } .product-muttertag .summary-row-block .summary-value-multiline { white-space: pre-wrap; line-height: 1.5; } /* Prompt-Chip Click-Feedback */ .product-muttertag .mt-chip-clicked { background: var(--mt-terracotta) !important; color: #FFFFFF !important; transform: scale(0.96); } /* ============================================================ Plakette-Konfigurator (Checkout, Step 7) — warmes Theme statt dunkler Schlager-Look. Komplette UI-Umfärbung. ============================================================ */ .product-muttertag .plakette-config-section { background: var(--mt-cream-soft) !important; border: 1px solid var(--mt-line) !important; border-radius: 14px !important; padding: 16px 16px 14px !important; } .product-muttertag .plakette-config-heading { color: var(--mt-terracotta) !important; font-family: var(--font-display); letter-spacing: 0.015em; font-size: 1.05rem !important; } .product-muttertag .pk-trigger-inner { background: #FFFFFF !important; border: 1.5px solid var(--mt-line) !important; } .product-muttertag .pk-trigger-btn:hover .pk-trigger-inner { border-color: var(--mt-rose) !important; background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F3 100%) !important; box-shadow: 0 4px 14px rgba(184, 95, 90, 0.18) !important; } .product-muttertag .pk-trigger-icon-wrap { background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%) !important; box-shadow: 0 3px 10px rgba(184, 95, 90, 0.30) !important; } .product-muttertag .pk-trigger-text { color: var(--mt-text) !important; } .product-muttertag .pk-trigger-sub { color: var(--mt-text-muted) !important; } .product-muttertag .pk-trigger-sub.is-configured { color: var(--mt-terracotta) !important; } .product-muttertag .pk-trigger-arrow { color: var(--mt-terracotta) !important; } .product-muttertag .pk-trigger-arrow svg, .product-muttertag .pk-trigger-arrow svg path { stroke: var(--mt-terracotta) !important; } /* Label "Anzahl Plaketten" */ .product-muttertag .plakette-config-section label { color: var(--mt-text-soft) !important; } .product-muttertag .plakette-config-section select { color: var(--mt-text) !important; background: #FFFFFF !important; border: 1px solid var(--mt-line) !important; } /* Lieferdatum-Countdown — war weiss auf weiss */ .product-muttertag .price-countdown { background: var(--mt-cream-soft) !important; border: 1px solid rgba(201, 168, 118, 0.35) !important; border-radius: 10px !important; padding: 10px 12px !important; } .product-muttertag .price-countdown-text, .product-muttertag .price-countdown-text span { color: var(--mt-text-soft) !important; } .product-muttertag .price-countdown-timer { color: var(--mt-terracotta) !important; font-weight: 700 !important; } .product-muttertag #deliveryDate { color: var(--mt-terracotta) !important; font-weight: 600 !important; } /* Plakette-Editor: Tag/Nacht-Labels werden unten im Modal-Block gesetzt */ /* ======================================================== Checkout: Popular-Bundle staerker hervorheben (Muttertag) + gleiche Hoehe fuer beide Karten mit Foto (keine Skalierung) ======================================================== */ .product-muttertag .bundle-card.bundle-card-popular { transform: none !important; border: 2.5px solid var(--mt-gold) !important; box-shadow: 0 0 0 3px rgba(201, 168, 118, 0.18), 0 12px 32px rgba(201, 168, 118, 0.22) !important; } .product-muttertag .bundle-card.bundle-card-popular:hover { transform: translateY(-3px) !important; box-shadow: 0 0 0 3px rgba(201, 168, 118, 0.28), 0 16px 40px rgba(201, 168, 118, 0.32) !important; } .product-muttertag .bundle-card.bundle-card-popular:has(input:checked) { border-color: var(--mt-gold) !important; background: linear-gradient(180deg, #FFFBF1 0%, #FFF2E6 100%) !important; box-shadow: 0 0 0 3px rgba(201, 168, 118, 0.35), 0 12px 36px rgba(201, 168, 118, 0.3) !important; } .product-muttertag .bundle-card.bundle-card-popular .bundle-popular-badge { background: linear-gradient(135deg, #E5D0A8, var(--mt-gold)) !important; color: var(--mt-text) !important; box-shadow: 0 3px 10px rgba(138, 75, 63, 0.25) !important; } .product-muttertag .bundle-card.bundle-card-popular .bundle-name { color: var(--mt-terracotta) !important; } .product-muttertag .bundle-card.bundle-card-popular .bundle-price-value { color: var(--mt-terracotta) !important; } /* Hoehen-Ausgleich untere Reihe */ .product-muttertag .bundle-card.bundle-card-with-photo { height: 100%; } /* Bewertungen-Seite: Karten gleich breit halten (Grid-1fr respektiert sonst min-content der nowrap-Songtitel und gibt Spalten unterschiedliche Breiten) */ .product-muttertag .reviews-grid > .review-card { min-width: 0 !important; } /* Bewertungen-Seite: .review-play-row als Pille — alles in einer Box, Klick → Mediaplayer */ .product-muttertag .review-play-row { background: var(--mt-cream-soft) !important; border: 1px solid var(--mt-line) !important; border-radius: 999px !important; padding: 0.45rem 0.7rem 0.45rem 0.5rem !important; gap: 0.7rem !important; align-items: center !important; cursor: pointer; min-width: 0 !important; max-width: 100% !important; } .product-muttertag .review-play-label { color: var(--mt-text) !important; font-size: 0.85rem !important; font-weight: 600; letter-spacing: 0.01em; } .product-muttertag .review-card .review-play-btn { width: 36px !important; height: 36px !important; font-size: 0.85rem !important; background: var(--mt-rose) !important; color: #FFFFFF !important; box-shadow: 0 3px 10px rgba(184, 95, 90, 0.25) !important; flex-shrink: 0; } /* Playing-State: Pille bleibt, Inhalt = scrub-player */ .product-muttertag .review-card.playing .review-play-row { padding: 0.4rem 0.55rem !important; background: var(--mt-cream-soft) !important; cursor: default; } /* Fragebogen Toggle-Tiles: grüner Punkt mit Häkchen wenn ausgewählt */ .product-muttertag .toggle-btn-tile { position: relative; } .product-muttertag .toggle-btn-tile.active::after { content: ''; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background-color: #22c55e; background-image: url("data:image/svg+xml;utf8,"); background-size: 18px; background-position: center; background-repeat: no-repeat; box-shadow: 0 3px 10px rgba(34, 197, 94, 0.35); pointer-events: none; z-index: 2; } /* Fragebogen Tile-Audio-Button als 2-zeilige Patriotmusik-Pille (wie Landing-Page) */ .product-muttertag .tile-audio-btn { background: var(--mt-cream-soft) !important; color: var(--mt-text) !important; border: 1px solid var(--mt-line) !important; border-radius: 999px !important; padding: 0.5rem 0.85rem 0.5rem 0.45rem !important; gap: 0.7rem !important; align-items: center !important; display: flex !important; width: 100% !important; box-shadow: none !important; min-height: auto !important; justify-content: flex-start !important; } .product-muttertag .tile-audio-btn:hover { background: var(--mt-cream-soft) !important; border-color: var(--mt-line) !important; color: var(--mt-text) !important; transform: none !important; box-shadow: none !important; } .product-muttertag .tile-audio-btn .voice-play-icon { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--mt-rose) !important; color: #FFFFFF !important; font-size: 0.85rem !important; box-shadow: 0 3px 10px rgba(184, 95, 90, 0.30) !important; flex-shrink: 0 !important; padding-left: 2px !important; } .product-muttertag .tile-audio-btn:hover .voice-play-icon { background: var(--mt-rose) !important; } .product-muttertag .tile-audio-btn .idx-play-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1 1 auto; overflow: hidden; text-align: left; } .product-muttertag .tile-audio-btn .idx-play-title { font-size: 0.92rem !important; font-weight: 700 !important; color: var(--mt-text) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-muttertag .tile-audio-btn .idx-play-sub { font-size: 0.74rem !important; color: var(--mt-text-muted) !important; margin-top: 0.15rem; font-weight: 500 !important; } /* Player im Tile-Kontext (Fragebogen): vertikales Layout wie auf Landing-Pille */ .product-muttertag .tile-with-audio .scrub-player { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-rows: 1fr auto !important; column-gap: 0.7rem !important; row-gap: 0.45rem !important; align-items: center !important; background: var(--mt-cream-soft) !important; border: 1px solid var(--mt-line) !important; padding: 0.55rem 0.85rem 0.55rem 0.45rem !important; border-radius: 999px !important; width: 100% !important; box-shadow: none !important; margin-top: 0 !important; } .product-muttertag .tile-with-audio .scrub-player-btn { grid-row: 1 / 3 !important; grid-column: 1 !important; align-self: center !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .product-muttertag .tile-with-audio .scrub-player-track { grid-row: 1 !important; grid-column: 2 !important; align-self: end !important; margin-bottom: 4px; } .product-muttertag .tile-with-audio .scrub-player-time { grid-row: 2 !important; grid-column: 2 !important; display: flex !important; justify-content: space-between !important; width: 100% !important; min-width: 0 !important; text-align: left !important; padding: 0 !important; font-size: 0.74rem !important; line-height: 1 !important; } .product-muttertag .tile-with-audio .scrub-player-sep { display: none !important; } .product-muttertag .tile-with-audio .scrub-player-cur { color: var(--mt-rose-deep) !important; font-weight: 600 !important; } .product-muttertag .tile-with-audio .scrub-player-dur { color: var(--mt-text-muted) !important; font-weight: 500 !important; } /* Landing-Page Testimonial: Author-Block (nach Reorder) bekommt mehr Abstand zur Heading */ .product-muttertag .testimonial-review-card .testimonial-author[data-moved="1"] { margin-bottom: 0.9rem !important; } /* ====================================================== Landing-Page Hörprobe-Pille (.idx-play-row) — 2-zeilig Default: Btn + "Hörprobe: ‚Songname'" Playing: Btn + Bar oben + Zeiten unten ====================================================== */ .product-muttertag .idx-play-row { background: var(--mt-cream-soft) !important; border: 1px solid var(--mt-line) !important; border-radius: 999px !important; padding: 0.5rem 0.85rem 0.5rem 0.45rem !important; gap: 0.7rem !important; align-items: center !important; display: flex !important; cursor: pointer !important; margin-bottom: 0.5rem !important; box-shadow: none !important; } .product-muttertag .idx-play-row .review-play-btn { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--mt-rose) !important; color: #FFFFFF !important; border: none !important; font-size: 0.85rem !important; box-shadow: 0 3px 10px rgba(184, 95, 90, 0.30) !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding-left: 2px !important; } .product-muttertag .idx-play-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1 1 auto; overflow: hidden; } .product-muttertag .idx-play-title { font-size: 0.92rem; font-weight: 700; color: var(--mt-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.005em; } .product-muttertag .idx-play-sub { font-size: 0.74rem; color: var(--mt-text-muted); margin-top: 0.15rem; font-weight: 500; } /* Playing-State: alle Default-Kinder verstecken, Player nimmt den Platz */ .product-muttertag .testimonial-review-card.playing .idx-play-row > *:not(.scrub-player) { display: none !important; } .product-muttertag .testimonial-review-card.playing .idx-play-row { cursor: default !important; padding: 0.5rem 0.7rem 0.5rem 0.45rem !important; } /* Vertical Layout des scrub-players im Landing-Kontext: Btn vertikal-zentriert links, Bar oben, Zeiten unten */ .product-muttertag .idx-play-row .scrub-player { display: grid !important; grid-template-columns: auto 1fr !important; grid-template-rows: 1fr auto !important; column-gap: 0.7rem !important; row-gap: 0.45rem !important; align-items: center !important; padding: 0 !important; background: transparent !important; border: none !important; width: 100% !important; box-shadow: none !important; } .product-muttertag .idx-play-row .scrub-player-btn { grid-row: 1 / 3 !important; grid-column: 1 !important; align-self: center !important; width: 40px !important; height: 40px !important; } .product-muttertag .idx-play-row .scrub-player-track { grid-row: 1 !important; grid-column: 2 !important; align-self: end !important; margin-bottom: 2px; } .product-muttertag .idx-play-row .scrub-player-time { grid-row: 2 !important; grid-column: 2 !important; display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; min-width: 0 !important; text-align: left !important; padding: 0 !important; font-size: 0.74rem !important; line-height: 1 !important; } .product-muttertag .idx-play-row .scrub-player-sep { display: none !important; } .product-muttertag .idx-play-row .scrub-player-cur { color: var(--mt-rose-deep) !important; font-weight: 600 !important; } .product-muttertag .idx-play-row .scrub-player-dur { color: var(--mt-text-muted) !important; font-weight: 500 !important; } /* ======================================================== PLAKETTE-MODAL: Kontrast-Overrides (Modal hat dunklen BG, Muttertag-Theme mappt --white auf dunkelbraun → wäre unlesbar) ======================================================== */ .product-muttertag .pk-modal-header h3 { color: #FFFFFF; } .product-muttertag .pk-modal-close { color: rgba(255,255,255,0.65); } .product-muttertag .pk-modal-close:hover { color: #FFFFFF; } .product-muttertag .pk-templates-label { color: rgba(255,255,255,0.85); } .product-muttertag .pk-crop-modal h4 { color: #FFFFFF; } .product-muttertag .pk-crop-hint { color: rgba(255,255,255,0.7); } /* Plakette-Preview: beide Texte garantiert weiß (auch im Input-Mode) */ .product-muttertag .pk-text-display, .product-muttertag .pk-text-small, .product-muttertag .pk-text-input, .product-muttertag .pk-text-input-small { color: #FFFFFF; } /* Tipp im Konfigurator */ .product-muttertag .pk-tip { margin: 0 0 0.75rem; padding: 0.6rem 0.85rem; background: rgba(255, 200, 90, 0.12); border: 1px solid rgba(255, 200, 90, 0.35); border-radius: 8px; font-size: 0.82rem; line-height: 1.4; color: rgba(255,255,255,0.92); } .product-muttertag .pk-tip strong { color: #FFD97A; font-weight: 700; } /* ======================================================== PLAKETTE-MODAL: Desktop-Fit (kein Scrollen auf 1080p) + bessere Lesbarkeit der Tag/Nacht-Labels ======================================================== */ .product-muttertag .pk-scene-label { color: rgba(255, 255, 255, 0.7); font-weight: 500; } .product-muttertag .pk-scene-label-active { color: #FFFFFF; font-weight: 600; } /* Auf Desktop: Modal kompakter machen + Preview proportional verkleinern, damit Tag/Nacht-Switch und Übernehmen-Button ohne Scrollen sichtbar sind. */ @media (min-width: 641px) { .product-muttertag .pk-modal-container { max-height: min(92vh, 860px); } .product-muttertag .pk-modal-body { padding: 0.85rem 1.25rem; } .product-muttertag .pk-preview { margin-bottom: 0.6rem; } .product-muttertag .pk-preview-wrap { max-width: 440px; margin: 0 auto; } .product-muttertag .pk-tip { margin-bottom: 0.5rem; padding: 0.4rem 0.75rem; font-size: 0.78rem; white-space: nowrap; text-align: center; overflow: hidden; text-overflow: ellipsis; } .product-muttertag .pk-templates { margin-bottom: 0.25rem; } .product-muttertag .pk-scene-switch-editor { margin-bottom: 0.25rem; padding: 0.35rem 0; } } /* ======================================================== COOKIE-BANNER: Text-Kontrast fix Banner-BG ist fast schwarz (rgba(10,5,2,0.95)), aber --gray-light ist im MT-Theme #2B2520 → praktisch unsichtbar. Hier explizit auf hellen Cream-Ton setzen. ======================================================== */ .product-muttertag .cookie-banner-text { color: rgba(255, 245, 235, 0.92); } .product-muttertag .cookie-banner-text a { color: #FFB199; } /* ======================================================== RESPONSIVE FRAGEBOGEN — Viewport-Höhen-Optimierung Ziel: Jeder Step soll ohne Scrollen sichtbar sein. Desktop >1440w & >900h bleibt UNVERÄNDERT (Referenz: 1920x1080). Tier 1: Kompakte Laptops (1440x900, 1366x768, 1280x720) Tier 2: Tablets / 1024er Laptops / kurze Screens Tier 3: Mobile Smartphones ======================================================== */ /* ─── TIER 1: Kompakt-Laptops (<=1440w oder <=900h) ─── */ @media (max-width: 1440px), (max-height: 900px) { .product-muttertag .questionnaire { padding-top: 6rem; padding-bottom: 1rem; min-height: 100vh; } .product-muttertag .form-step { padding: 22px 24px; } .product-muttertag .form-step-title { font-size: 1.4rem; margin-bottom: 0.55rem; } .product-muttertag .form-step-sub { margin-bottom: 0.85rem; font-size: 1rem; } .product-muttertag .form-group { margin-bottom: 1rem; } .product-muttertag .tip-box { padding: 0.65rem 0.95rem; margin-top: 12px !important; } .product-muttertag .form-nav { margin-top: 1rem; padding-top: 0.75rem; } .product-muttertag .progress-header { margin-bottom: 0.85rem; } } /* ─── TIER 2: Tablet / 1024 Laptops (<=1024w oder <=780h) ─── */ @media (max-width: 1024px), (max-height: 780px) { .product-muttertag .questionnaire { padding-top: 5.25rem; padding-bottom: 0.85rem; } .product-muttertag .form-step { padding: 18px 20px; } .product-muttertag .form-step-title { font-size: 1.28rem; margin-bottom: 0.45rem; } .product-muttertag .form-step-sub { font-size: 0.88rem; margin-bottom: 0.75rem; } .product-muttertag .form-group { margin-bottom: 0.85rem; } .product-muttertag .tip-box { padding: 0.55rem 0.85rem !important; margin-top: 10px !important; } .product-muttertag .tip-box-text { font-size: 0.82rem; } .product-muttertag .form-nav { margin-top: 0.85rem; padding-top: 0.6rem; } .product-muttertag .form-social-proof { padding-top: 0.5rem; font-size: 0.78rem; } .product-muttertag .progress-header { margin-bottom: 0.6rem; } /* Bundle-Cards auf Tablet etwas kompakter */ .product-muttertag .bundle-card { padding: 0.85rem 1rem; } } /* ─── TIER 3: Mobile Smartphones (<=640w oder <=640h) ─── */ @media (max-width: 640px), (max-height: 640px) { .product-muttertag .questionnaire { padding-top: 4.5rem; padding-bottom: 0.6rem; } .product-muttertag .form-step { padding: 14px 14px; } .product-muttertag .form-step-title { font-size: 1.18rem; line-height: 1.32; margin-bottom: 1.5rem; letter-spacing: 0.3px; } .product-muttertag .form-step-sub { font-size: 0.86rem; line-height: 1.42; margin-bottom: 0.7rem; } .product-muttertag .form-group { margin-bottom: 0.5rem; } .product-muttertag .tip-box { padding: 0.5rem 0.75rem !important; margin-top: 8px !important; } .product-muttertag .tip-box-text { font-size: 0.78rem; } .product-muttertag .form-nav { margin-top: 0.6rem; padding-top: 0.4rem; } .product-muttertag .form-social-proof { padding-top: 0.4rem; font-size: 0.74rem; } .product-muttertag .progress-header { margin-bottom: 0.3rem; } /* Eingabefelder kompakter */ .product-muttertag .form-input, .product-muttertag .form-textarea { padding: 0.6rem 0.75rem; font-size: 1rem; } .product-muttertag .form-label { font-size: 0.82rem; margin-bottom: 0.3rem; } /* Names-Grid auf Mobile 1-spaltig kompakt */ .product-muttertag .mt-names-grid { gap: 0.55rem; } /* Step 2 (Stil) + Step 8 (Tempo): Grid schmäler + zentriert, Tiles flach, Label/Desc dicht. Stimmung (Step 3) bleibt unberührt. */ .product-muttertag .toggle-grid-stil { gap: 22px !important; max-width: 240px !important; margin-left: auto !important; margin-right: auto !important; } .product-muttertag .toggle-grid-2[data-group="stimmung"] { gap: 12px; } /* Stimmung-Tiles: ALLE 4 gleiche Hoehe. min-height 145 ist mehr als die laengste Kombi (Lustig + Insider augenzwinkernd ~135px @ 360px-Breite) — somit erreicht jede Tile dieses Minimum und alle 4 sind exakt gleich gross statt 2 oben groesser als 2 unten. */ .product-muttertag .toggle-grid-2[data-group="stimmung"] .toggle-btn-tile { min-height: 145px; } .product-muttertag .tile-with-audio { gap: 4px; } /* Generisch (Stimmung etc.) bleibt das bisherige kompakte Column-Layout */ .product-muttertag .toggle-btn-tile { padding: 0.6rem 0.5rem; min-height: 54px; } .product-muttertag .tile-emoji { font-size: 1.15rem; } .product-muttertag .tile-label { font-size: 0.8rem; } .product-muttertag .tile-desc { font-size: 0.72rem; line-height: 1.25; } /* Stimme (Tobi/Marie) mobile auch praesent — bleibt deutlich groesser als generic 54/0.8/1.15. */ .product-muttertag .toggle-grid-2[data-group="stimme"] .toggle-btn-tile { min-height: 80px; padding: 0.85rem 0.6rem; } .product-muttertag .toggle-grid-2[data-group="stimme"] .tile-emoji { font-size: 1.5rem; } .product-muttertag .toggle-grid-2[data-group="stimme"] .tile-label { font-size: 0.95rem; font-weight: 700; } /* Aktiv-Haken auf Mobile etwas kleiner + tiefer in den Eck-Bereich gezogen. */ .product-muttertag .toggle-btn-tile.active::after { width: 22px; height: 22px; top: 6px; right: 6px; background-size: 14px; } /* Stil/Tempo-Tiles sind 1-spaltig schmal mit langen Labels ("Akustik / Singer-Songwriter") — hier den Haken nochmal eine Spur kleiner damit er den Text nicht ueberdeckt. */ .product-muttertag .toggle-grid-stil .toggle-btn-tile.active::after { width: 18px; height: 18px; top: 5px; right: 5px; background-size: 11px; } /* Stil + Tempo: explicit flex-column, fast keine Luft zwischen Emoji/Label/Desc */ .product-muttertag .toggle-grid-stil .toggle-btn-tile { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 0.35rem 0.5rem !important; min-height: 46px !important; gap: 0 !important; } .product-muttertag .toggle-grid-stil .toggle-btn-tile > * { margin: 0 !important; } .product-muttertag .toggle-grid-stil .tile-emoji { font-size: 1.05rem !important; line-height: 1 !important; margin-bottom: 1px !important; display: block !important; } .product-muttertag .toggle-grid-stil .tile-label { font-size: 0.86rem !important; line-height: 1 !important; font-weight: 600 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; padding: 0 !important; min-height: 0 !important; } .product-muttertag .toggle-grid-stil .tile-desc { font-size: 0.68rem !important; line-height: 1 !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; padding: 0 !important; margin-top: 5px !important; } /* Hörprobe-Button unter Tile kompakter */ .product-muttertag .tile-audio-btn { padding: 3px 8px; min-height: 26px; font-size: 11.5px; } .product-muttertag .tile-audio-label { font-size: 11px; } } /* ─── Sehr kleine Mobile (iPhone SE: 375x667) ─── */ @media (max-width: 400px) and (max-height: 700px) { .product-muttertag .questionnaire { padding-top: 4rem; } .product-muttertag .form-step { padding: 12px 12px; } .product-muttertag .form-step-title { font-size: 1.08rem; margin-bottom: 0.35rem; } .product-muttertag .form-step-sub { font-size: 0.78rem; margin-bottom: 0.55rem; } } /* ─── Step-spezifische Shrinks (Textareas, Erinnerung-Highlight) ─── */ /* Tier 1: Laptops — Textareas und Erinnerung-Wrapper kompakter */ @media (max-width: 1440px), (max-height: 900px) { .product-muttertag textarea.form-input[rows="6"] { height: 108px; min-height: 0; } .product-muttertag textarea.form-input[rows="2"] { height: 42px; min-height: 0; } .product-muttertag .erinnerung-highlight { padding: 10px 12px 7px; margin-top: 10px; } .product-muttertag .erinnerung-hint, .product-muttertag .feinschliff-hint { font-size: 11px; } .product-muttertag .char-counter { font-size: 11px; } } /* Tier 2: Tablets / kurze Screens — noch kompakter */ @media (max-width: 1024px), (max-height: 780px) { .product-muttertag textarea.form-input[rows="6"] { height: 92px; } .product-muttertag textarea.form-input[rows="2"] { height: 40px; } .product-muttertag .erinnerung-highlight { padding: 8px 10px 6px; margin-top: 8px; } } /* Tier 3: Mobile */ @media (max-width: 640px), (max-height: 640px) { .product-muttertag textarea.form-input[rows="6"] { height: 82px; } .product-muttertag textarea.form-input[rows="2"] { height: 38px; } .product-muttertag .erinnerung-highlight { padding: 7px 9px 5px; margin-top: 6px; } } /* ─── Extra-Kompression f\u00fcr kurze Viewport-H\u00f6hen (laptop 768h) ─── */ @media (max-height: 780px) { .product-muttertag .form-group { margin-bottom: 0.7rem; } .product-muttertag .form-nav { margin-top: 0.7rem; padding-top: 0.45rem; } .product-muttertag .form-step-sub { margin-bottom: 0.6rem; } /* Step 6: Songtitel-Chips kompakter */ .product-muttertag .songtitel-chip { padding: 0.4rem 0.7rem; font-size: 0.8rem; } .product-muttertag .songtitel-suggestions { gap: 5px; } } /* ======================================================== HERO AUF MOBILE: Kein Header-Overlap mehr. Problem: .hero hat align-items:center + min-height:100svh, bei zu hohem Content überlappt Top-Bereich den fixed Header. Plus: Promo-Banner kann auf schmalen Phones 2-3-zeilig wrappen. Fix: Dynamic padding-top = chrome-offset (banner+header, via JS gesetzt) + flex-start statt center + min-height auto auf Mobile/Tablet. ======================================================== */ @media (max-width: 768px) { .product-muttertag .hero { align-items: flex-start; min-height: auto; padding-top: calc(var(--chrome-offset, 100px) + 1.25rem); } .product-muttertag .hero-content { padding-top: 0.5rem; } } /* Safety-Net für noch kleinere Screens: noch etwas mehr Luft */ @media (max-width: 480px) { .product-muttertag .hero { padding-top: calc(var(--chrome-offset, 95px) + 1rem); padding-bottom: 2.5rem; } } /* Fix: Profilbilder/Avatar rund halten, nicht vom Flex quetschen lassen. Auf Mobile wurde .author-avatar horizontal gestaucht → eierf\u00f6rmig. flex-shrink:0 verhindert Squeeze, aspect-ratio:1 als Safety-Net. */ .product-muttertag .author-avatar, .product-muttertag .review-author-avatar { flex-shrink: 0; aspect-ratio: 1; } /* ======================================================== FRAGEBOGEN: Header-Overlap fix via dynamischem --chrome-offset (gleicher Mechanismus wie Hero-Fix). max() sorgt daf\u00fcr dass die bisherigen Tier-Minima erhalten bleiben, aber bei gewrapptem Banner (schmale Phones) wird das Padding dynamisch gr\u00f6\u00dfer, damit der Header die Frageseite nie \u00fcberdeckt. Desktop (>1440w & >900h) bleibt unber\u00fchrt \u2014 kein Tier matcht. ======================================================== */ @media (max-width: 1440px), (max-height: 900px) { .product-muttertag .questionnaire { padding-top: max(6rem, calc(var(--chrome-offset, 130px) + 0.5rem)); } } @media (max-width: 1024px), (max-height: 780px) { .product-muttertag .questionnaire { padding-top: max(5.25rem, calc(var(--chrome-offset, 130px) + 0.5rem)); } } @media (max-width: 640px), (max-height: 640px) { .product-muttertag .questionnaire { padding-top: max(4.5rem, calc(var(--chrome-offset, 130px) + 0.5rem)); } } @media (max-width: 400px) and (max-height: 700px) { .product-muttertag .questionnaire { padding-top: max(4rem, calc(var(--chrome-offset, 130px) + 0.25rem)); } } /* ======================================================== MOBILE BANNER: d\u00fcnner (einzeilig) durch JS-seitige Kurzform + nowrap + kleineres Padding/Font. ======================================================== */ @media (max-width: 640px) { .product-muttertag .promo-banner-inner { padding: 2px 10px; font-size: 12px; gap: 6px; flex-wrap: nowrap; line-height: 1.2; white-space: nowrap; overflow: hidden; } .product-muttertag .mt-countdown { padding: 1px 7px; gap: 3px; } .product-muttertag .mt-countdown-num { font-size: 12.5px; } .product-muttertag .mt-banner-sep { opacity: 0.55; } } /* ======================================================== MOBILE FOOTER: Kompakter (weniger Padding, kleinere Fonts) ======================================================== */ @media (max-width: 640px) { .product-muttertag .footer { padding: 1.5rem 0 0.75rem; } .product-muttertag .footer-inner { margin-bottom: 0.9rem; gap: 0.65rem; } .product-muttertag .footer-brand { gap: 0.35rem; } .product-muttertag .footer .logo-img { height: 1.4rem; } .product-muttertag .footer .logo-text { font-size: 1.1rem; } .product-muttertag .footer-tagline { font-size: 0.78rem; margin-top: 0.25rem; line-height: 1.35; } .product-muttertag .footer-links { gap: 0.85rem; flex-wrap: wrap; justify-content: center; } .product-muttertag .footer-links a { font-size: 0.78rem; } .product-muttertag .footer-bottom { padding-top: 0.75rem; font-size: 0.72rem; } } /* ======================================================== MOBILE MENU: Redesign (Muttertag-Theme) Ziel: Kompaktes, on-brand Slide-In-Men\u00fc mit Logo-Header, Close-X, Trust-Proof-Footer und rose Akzenten. Struktur wird von banner.js injiziert (mt-mobile-menu-*). ======================================================== */ .product-muttertag .mobile-menu { background: var(--mt-cream) !important; border-left: 1px solid var(--mt-line); box-shadow: -16px 0 40px rgba(138, 75, 63, 0.12); width: min(85vw, 340px); right: calc(-1 * min(85vw, 340px)); /* Dynamischer Top-Offset damit Men\u00fc unter Banner+Header startet */ padding: calc(var(--chrome-offset, 110px) + 0.75rem) 1.25rem 1.25rem; display: flex; flex-direction: column; } /* Active-State: slide-in (hoehere Specificity als Base-Regel) */ .product-muttertag .mobile-menu.active { right: 0; } /* Overlay: weicher Braun-Ton statt hartes Schwarz */ .product-muttertag .mobile-menu-overlay { background: rgba(43, 37, 32, 0.45) !important; backdrop-filter: blur(2px); } /* Header im Men\u00fc: Logo + Close */ .product-muttertag .mt-mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--mt-line); } .product-muttertag .mt-mobile-menu-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--mt-text); font-weight: 500; letter-spacing: -0.01em; } .product-muttertag .mt-mobile-menu-logo { height: 22px; width: auto; filter: brightness(0); } .product-muttertag .mt-mobile-menu-close { background: transparent; border: 1px solid var(--mt-line); color: var(--mt-text-soft); width: 34px; height: 34px; border-radius: 999px; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: all .15s ease; } .product-muttertag .mt-mobile-menu-close:hover, .product-muttertag .mt-mobile-menu-close:active { background: var(--mt-rose); color: #FFFFFF; border-color: var(--mt-rose); } /* Links: Gr\u00f6\u00dfer, mit rose Akzent */ .product-muttertag .mobile-menu a { color: var(--mt-text) !important; font-size: 1.05rem; font-weight: 500; padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--mt-line); transition: color .15s ease, padding-left .15s ease; } .product-muttertag .mobile-menu a:hover, .product-muttertag .mobile-menu a:active { color: var(--mt-rose-deep) !important; padding-left: 0.5rem; } .product-muttertag .mobile-menu-icon { font-size: 1.15rem; width: 1.75rem; } /* Letzter Link (Song erstellen) als CTA-Button gestylt */ .product-muttertag .mobile-menu a[href*=erstellen] { margin-top: 1rem; background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); color: #FFFFFF !important; border: none; border-radius: 999px; padding: 0.85rem 1.25rem; justify-content: center; font-weight: 700; box-shadow: 0 6px 18px rgba(184, 95, 90, 0.35); } .product-muttertag .mobile-menu a[href*=erstellen]:hover, .product-muttertag .mobile-menu a[href*=erstellen]:active { color: #FFFFFF !important; padding-left: 1.25rem; background: linear-gradient(135deg, var(--mt-rose-deep) 0%, #9C4E49 100%); box-shadow: 0 10px 24px rgba(184, 95, 90, 0.45); } /* Footer: Trust-Proof + Kontakt */ .product-muttertag .mt-mobile-menu-footer { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--mt-line); display: flex; flex-direction: column; gap: 0.5rem; } .product-muttertag .mt-mobile-menu-trust { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--mt-text-muted); } .product-muttertag .mt-mobile-trust-stars { color: var(--mt-gold, #C9A876); font-size: 0.8rem; letter-spacing: 1px; } .product-muttertag .mt-mobile-menu-contact { font-size: 0.8rem; color: var(--mt-terracotta); text-decoration: none; padding: 0 !important; border: none !important; } .product-muttertag .mt-mobile-menu-contact:hover { color: var(--mt-rose-deep) !important; padding: 0 !important; } /* ======================================================== BEWERTUNGEN-PAGE: Mehr Abstand Kopfzeile / Titel auf Mobile. ======================================================== */ @media (max-width: 640px) { .product-muttertag .reviews-page { padding-top: calc(var(--chrome-offset, 110px) + 2rem) !important; } } /* ============================================================ MUTTERTAG UI-FIXES 2026-04-20 (1) Step 6 „Songtitel/Widmung": Chips als sichtbare Tiles, konsistent mit Stil/Stimmung/Stimme (toggle-btn-tile) (2) Step 6 Höhen-Kompression: Weiter-Button ohne Scroll auf iPhone 14 (844px) + Desktop 1080p sichtbar (3) Plakette-Editor: Overlay-Text kleiner, Tag/Nacht-Labels lesbar auf dunklem Modal-Hintergrund ============================================================ */ /* --- (1) Chips als Tiles --- */ .product-muttertag .songtitel-suggestions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 0.5rem; } .product-muttertag #widmungSuggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 640px) { .product-muttertag .songtitel-suggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .product-muttertag #widmungSuggestions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .product-muttertag .songtitel-chip { display: block; width: 100%; padding: 10px 12px; background: #FFFFFF; border: 1.5px solid var(--mt-line); border-radius: 14px; color: var(--mt-text); font-size: 0.85rem; font-weight: 600; font-family: var(--font-body); text-align: center; line-height: 1.25; cursor: pointer; transition: all .18s ease; box-shadow: none; } .product-muttertag .songtitel-chip:hover { border-color: var(--mt-rose); background: #FFFDFA; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(212, 131, 126, 0.15); } .product-muttertag .songtitel-chip.active { background: linear-gradient(180deg, #FFF5F3 0%, #FBE7E3 100%); border-color: var(--mt-rose); color: var(--mt-rose-deep); box-shadow: 0 8px 20px rgba(212, 131, 126, 0.25); } /* --- (2) Step 6 Höhen-Kompression (immer aktiv, nicht nur max-height) --- */ .product-muttertag .form-step[data-step="6"] .form-step-title { font-size: 1.35rem; margin-bottom: 0.55rem; } .product-muttertag .form-step[data-step="6"] .form-group { margin-bottom: 0.55rem; } .product-muttertag .form-step[data-step="6"] .form-label { margin-bottom: 0.3rem; font-size: 0.9rem; } .product-muttertag .form-step[data-step="6"] .form-input { padding: 0.55rem 0.75rem; font-size: 0.9rem; } .product-muttertag .form-step[data-step="6"] .field-char-info { margin-top: 0.18rem; font-size: 0.72rem; } .product-muttertag .form-step[data-step="6"] .tip-box { padding: 0.55rem 0.75rem; font-size: 0.78rem; margin-top: 0.25rem; line-height: 1.35; } @media (max-width: 640px) { .product-muttertag .form-step[data-step="6"] .form-step-title { font-size: 1.15rem; margin-bottom: 0.45rem; } .product-muttertag .form-step[data-step="6"] .form-group { margin-bottom: 0.45rem; } .product-muttertag .form-step[data-step="6"] .songtitel-chip { padding: 8px 10px; font-size: 0.78rem; border-radius: 12px; } .product-muttertag .form-step[data-step="6"] .tip-box { padding: 0.5rem 0.65rem; font-size: 0.73rem; margin-top: 0.2rem; } .product-muttertag .form-step[data-step="6"] .form-input { padding: 0.5rem 0.7rem; font-size: 0.85rem; } } /* --- (3a) Plakette-Editor: Text-Overlays kleiner --- */ .product-muttertag .pk-text-display { font-size: clamp(0.5rem, 2vw, 0.72rem); letter-spacing: -0.3px; } .product-muttertag .pk-text-small { font-size: clamp(0.38rem, 1.5vw, 0.56rem); letter-spacing: -0.2px; } .product-muttertag .pk-text-input { font-size: clamp(0.51rem, 2vw, 0.74rem); } .product-muttertag .pk-text-input-small { font-size: clamp(0.34rem, 1.32vw, 0.51rem); padding: 1px 4px; } /* --- (3a-2) Plakette-Editor: Untouched-Hinweis & Validation-Shake --- */ /* Nudge: Felder die noch nie angeklickt wurden italic + leicht pulsierend. Pflicht beim Plakette-Bundle (sonst landet "Dein Songtitel" auf gedruckter Plakette). */ .product-muttertag .pk-text-overlay.pk-text-untouched .pk-text-display { font-style: italic; opacity: 0.78; animation: pkTextNudge 2.4s ease-in-out infinite; } @keyframes pkTextNudge { 0%, 100% { text-shadow: 0 0 0 rgba(255, 107, 53, 0); } 50% { text-shadow: 0 0 6px rgba(255, 107, 53, 0.55); } } .product-muttertag .pk-text-overlay.pk-text-shake { animation: pkTextShake 0.6s cubic-bezier(.36,.07,.19,.97) both; outline: 2px solid #ff6b35; outline-offset: 2px; border-radius: 4px; } @keyframes pkTextShake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } /* --- (3b) Tag/Nacht-Labels: klar lesbar auf dunklem Modal-BG --- */ .product-muttertag .pk-scene-switch .pk-scene-label { color: rgba(255, 255, 255, 0.72) !important; font-weight: 500 !important; text-shadow: none !important; } .product-muttertag .pk-scene-switch .pk-scene-label-active { color: #FFFFFF !important; font-weight: 600 !important; text-shadow: 0 0 6px rgba(255, 255, 255, 0.18) !important; } .product-muttertag .pk-scene-switch .pk-scene-label-active[data-mode="night"] { text-shadow: 0 0 8px rgba(255, 210, 120, 0.35) !important; } /* ============================================================ Einheitliche Höhe aller Frageseiten-Karten (Muttertag) → Weiter/Zurück-Button steht auf jeder Seite an identischer Y-Position. Content vertikal zentriert: keine hässliche leere Hälfte auf kurzen Steps. Checkout (Step 7) ausgenommen. ============================================================ */ .product-muttertag .form-step:not([data-step="7"]) { min-height: 580px; display: flex; flex-direction: column; justify-content: center; } /* Wichtig: aktive Step-Sichtbarkeit bleibt über .active gesteuert. Nicht-aktive Steps müssen display:none bleiben (überschreibt flex). */ .product-muttertag .form-step:not(.active) { display: none !important; } @media (max-width: 640px) { /* Mobile: einheitliche Box-Höhe UND komplett sichtbare Buttons → Content aggressiv komprimiert, damit alles in Viewport passt. */ .product-muttertag .form-step:not([data-step="7"]) { min-height: 420px; } /* Kompakteres Padding der Box → spart oben/unten ~24 px */ .product-muttertag .form-step { padding: 14px 14px !important; } .product-muttertag .form-step-title { margin-bottom: 0.35rem !important; font-size: 1.1rem !important; } .product-muttertag .form-step-sub { margin-bottom: 0.5rem !important; font-size: 0.78rem !important; line-height: 1.3 !important; } /* Tiles (Stil/Stimmung/Stimme/Tempo) kompakt */ .product-muttertag .form-step .toggle-btn-tile { padding: 0.45rem 0.5rem !important; min-height: 40px !important; } .product-muttertag .form-step .tile-emoji { font-size: 1.05rem !important; margin-bottom: 0 !important; } .product-muttertag .form-step .tile-label { font-size: 0.8rem !important; line-height: 1.15 !important; } .product-muttertag .form-step .tile-desc { font-size: 0.68rem !important; line-height: 1.2 !important; margin-top: 1px !important; } .product-muttertag .form-step .tile-with-audio { gap: 3px !important; } .product-muttertag .form-step .tile-audio-btn { padding: 4px 10px !important; min-height: 30px !important; font-size: 0.75rem !important; } .product-muttertag .form-step .tile-audio-btn .voice-play-icon { width: 20px !important; height: 20px !important; font-size: 0.62rem !important; } /* Step 4 (Erzählung): Textareas schlanker, damit Box ≤ 440 px bleibt */ .product-muttertag .form-step[data-step="4"] textarea.form-input[rows="6"] { height: 100px !important; min-height: 100px !important; } .product-muttertag .form-step[data-step="4"] textarea.form-input[rows="2"] { height: 36px !important; min-height: 36px !important; } .product-muttertag .form-step[data-step="4"] .erinnerung-highlight { padding: 6px 8px !important; margin-top: 4px !important; } /* Step 1 (Namen) kompakt */ .product-muttertag .form-step[data-step="1"] .mt-names-grid { gap: 8px !important; } /* Step 6 (Titel+Widmung): Tile-Chips kleiner + Tip schmaler */ .product-muttertag .form-step[data-step="6"] .songtitel-chip { padding: 6px 8px !important; font-size: 0.74rem !important; border-radius: 10px !important; } .product-muttertag .form-step[data-step="6"] .tip-box { padding: 6px 8px !important; font-size: 0.7rem !important; } /* Form-Inputs insgesamt etwas kompakter */ .product-muttertag .form-step .form-input, .product-muttertag .form-step textarea { padding: 0.5rem 0.65rem !important; font-size: 16px !important; } .product-muttertag .form-step .form-label { margin-bottom: 0.25rem !important; font-size: 1rem !important; } .product-muttertag .form-step .field-char-info { font-size: 0.68rem !important; margin-top: 2px !important; } } /* ============================================================ Weiter-Button direkt unter der weißen Box (kein Schweben) Tight gap zwischen Step-Box und Navigation. Social-Proof bleibt klein dazwischen, ohne Luftpolster. ============================================================ */ .product-muttertag .form-nav { margin-top: 6px !important; padding-top: 0 !important; border-top: none !important; } .product-muttertag .form-social-proof { margin-top: 6px; margin-bottom: 0; padding-top: 0 !important; padding-bottom: 0; font-size: 0.78rem; line-height: 1.3; } @media (max-width: 640px) { .product-muttertag .form-nav { margin-top: 4px !important; padding-top: 0 !important; } .product-muttertag .form-social-proof { margin-top: 4px; font-size: 0.72rem; } } /* Mobile Step 6 (Titel/Widmung): maximal kompakt, damit Weiter/Zurück sichtbar bleiben */ @media (max-width: 640px) { .product-muttertag .form-step[data-step="6"] .form-group { margin-bottom: 0.4rem !important; } .product-muttertag .form-step[data-step="6"] .songtitel-chip { padding: 5px 6px !important; font-size: 0.72rem !important; border-radius: 9px !important; } .product-muttertag .form-step[data-step="6"] .songtitel-suggestions { gap: 5px !important; margin-bottom: 0.35rem !important; } .product-muttertag .form-step[data-step="6"] .form-label { font-size: 0.78rem !important; margin-bottom: 0.2rem !important; } .product-muttertag .form-step[data-step="6"] .form-input { padding: 0.45rem 0.6rem !important; font-size: 1rem !important; } .product-muttertag .form-step[data-step="6"] .tip-box { padding: 5px 7px !important; font-size: 0.68rem !important; margin-top: 0.15rem !important; line-height: 1.3 !important; } .product-muttertag .form-step[data-step="6"] .field-char-info { margin-top: 1px !important; font-size: 0.65rem !important; } } /* --- Tag/Nacht-Labels auf Index-Plakette-Section: dunkle Schrift auf cremefarbenem BG --- */ .product-muttertag .plakette-section .pk-scene-switch .pk-scene-label { color: rgba(58, 38, 32, 0.55) !important; text-shadow: none !important; } .product-muttertag .plakette-section .pk-scene-switch .pk-scene-label-active { color: var(--mt-text) !important; text-shadow: none !important; } /* Checkout-Step (data-step="7"): mehr Abstand zwischen Titel und Subtitel */ .product-muttertag .form-step[data-step="7"] .form-step-sub { margin-top: 0.25rem; } /* Bundle-Features: Extra-Items (innerhalb ) deutlich hervorheben */ .product-muttertag .bundle-features li:has(strong) { background: rgba(212, 131, 126, 0.08); border-left: 3px solid var(--mt-terracotta); padding: 0.35rem 0.55rem !important; border-radius: 6px; margin: 3px 0; } .product-muttertag .bundle-features li strong { color: var(--mt-terracotta) !important; font-weight: 800 !important; font-size: 1.02em; letter-spacing: 0.01em; } /* ======================================================== LAPTOP + TABLET — konstante Card-Höhe, Weiter/Zurück IMMER sichtbar. Card-Höhe = Max aller Step-Contents (Step 4 ist der größte mit Textareas). Margins knapp, damit Viewport 675h (1440x675 Laptop) reicht. 1920x1080 bleibt UNBERÜHRT (media: max-w 1440 OR max-h 900). ======================================================== */ @media (min-width: 641px) and (min-height: 641px) and (max-width: 1440px), (min-width: 641px) and (min-height: 641px) and (max-width: 1900px) and (max-height: 900px) { /* Konstante Card-Höhe — passt für alle Steps inkl. Step 4 */ .product-muttertag .form-step:not([data-step="7"]) { min-height: 400px; } /* Tile-Höhe shrinken (Step 2/3/5/8) */ .product-muttertag .tile-with-audio .toggle-btn-tile { min-height: 96px; padding: 12px 14px; } .product-muttertag .toggle-grid-stil .tile-label { min-height: 1.6em; } .product-muttertag .toggle-grid-stil .tile-emoji, .product-muttertag .toggle-grid-2 .tile-emoji { font-size: 1.55rem; line-height: 1; } .product-muttertag .toggle-grid-stil .tile-desc, .product-muttertag .toggle-grid-2 .tile-desc { font-size: 0.78rem; line-height: 1.25; } /* Hörprobe-Buttons kompakter */ .product-muttertag .tile-audio-btn { padding: 5px 10px; min-height: 30px; } .product-muttertag .tile-audio-label { font-size: 12px; } /* Form-Step padding + Typo */ .product-muttertag .form-step { padding: 14px 22px; } .product-muttertag .form-step-title { font-size: 1.25rem; margin-bottom: 0.35rem; } .product-muttertag .form-step-sub { margin-bottom: 0.55rem; } .product-muttertag .form-group { margin-bottom: 0.7rem; } /* Progress + Nav + Social-Proof: margins knapp */ .product-muttertag .progress-header { margin-bottom: 0.45rem; } .product-muttertag .form-nav { margin-top: 0.5rem; padding-top: 0.35rem; } .product-muttertag .form-social-proof { padding-top: 0.3rem; font-size: 0.75rem; } /* Questionnaire padding-bottom knapp */ .product-muttertag .questionnaire { padding-bottom: 0.5rem; } /* Step 4: Textareas noch etwas kleiner (sonst sprengt es die 400px) */ .product-muttertag textarea.form-input[rows="6"] { height: 86px; min-height: 0; } .product-muttertag textarea.form-input[rows="2"] { height: 38px; min-height: 0; } .product-muttertag .erinnerung-highlight { padding: 8px 10px 6px; margin-top: 8px; } .product-muttertag .form-step[data-step="4"] .form-group { margin-bottom: 0.5rem; } } /* ======================================================== Step 4 Feintuning: encouragement-Div auf empty verstecken, damit Counter/Error direkt unter Textarea sitzt. Erinnerung-Box etwas großzügiger gepolstert. Greift auf ALLEN Viewports (Bug ist universal). ======================================================== */ .product-muttertag .mt-beschreibung-encouragement:empty { display: none !important; } /* Erinnerung-Box: atmungsaktivere Polsterung */ .product-muttertag .erinnerung-highlight { padding: 12px 14px 10px; margin-top: 10px; } /* Laptop/Tablet: Erinnerung-Textarea etwas höher, Box nicht gequetscht */ @media (min-width: 641px) and (min-height: 641px) and (max-width: 1440px), (min-width: 641px) and (min-height: 641px) and (max-width: 1900px) and (max-height: 900px) { .product-muttertag textarea.form-input[rows="2"] { height: 44px; min-height: 0; } .product-muttertag .erinnerung-highlight { padding: 10px 12px 8px; margin-top: 10px; } } /* =========================================================== RESUME BANNER (Landing): Sticky bottom mit Shimmer-Glow, sichtbar wenn User unfertigen Konfigurator-State hat =========================================================== */ .cys-resume-banner { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100; background: linear-gradient(90deg, #C44569 0%, #E68DA3 50%, #C44569 100%); background-size: 230% 100%; color: #FFFFFF; box-shadow: 0 -3px 16px rgba(196, 69, 105, 0.35); animation: cysBannerSlideUp 360ms cubic-bezier(0.2, 0.9, 0.3, 1.1), cysBannerShimmer 6s ease-in-out infinite 360ms, cysBannerAttentionPulse 4.5s ease-in-out infinite 4s; padding-bottom: env(safe-area-inset-bottom); } .cys-resume-banner.is-visible { display: block; } @keyframes cysBannerSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes cysBannerShimmer { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 0%; } } /* Subtiler "Hupser" alle 4.5s — wirkt sobald der Samsung "Tab-Rueckgaengig"-Toast verschwindet (~4s nach Page-Load), zieht Aufmerksamkeit ohne aggressive zu sein. */ @keyframes cysBannerAttentionPulse { 0%, 88%, 100% { transform: translateY(0); box-shadow: 0 -3px 16px rgba(196, 69, 105, 0.35); } 92% { transform: translateY(-3px); box-shadow: 0 -6px 22px rgba(196, 69, 105, 0.5); } 96% { transform: translateY(0); box-shadow: 0 -3px 16px rgba(196, 69, 105, 0.35); } } .cys-resume-banner-inner { max-width: 1200px; margin: 0 auto; padding: 14px 18px; display: flex; align-items: center; gap: 14px; } .cys-resume-banner-icon { font-size: 1.35rem; line-height: 1; } .cys-resume-banner-text { flex: 1; font-weight: 600; font-size: 0.98rem; line-height: 1.3; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .cys-resume-banner-text [data-resume-banner-step] { opacity: 0.92; font-weight: 500; font-size: 0.9rem; margin-left: 6px; } .cys-resume-banner-text [data-resume-banner-step]::before { content: "· "; opacity: 0.6; } .cys-resume-banner-cta { background: #FFFFFF; color: #C44569; border: none; padding: 10px 22px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; cursor: pointer; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); transition: transform 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .cys-resume-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.25); } .cys-resume-banner-close { background: transparent; color: #FFFFFF; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 4px 10px; opacity: 0.75; transition: opacity 0.15s; } .cys-resume-banner-close:hover { opacity: 1; } @media (max-width: 560px) { .cys-resume-banner-inner { padding: 12px 14px; gap: 10px; flex-wrap: wrap; } .cys-resume-banner-text { font-size: 0.92rem; flex-basis: calc(100% - 40px); order: 1; line-height: 1.35; } /* Mobile: Step-Info auf eigene Zeile (Bullet weg, display block) */ .cys-resume-banner-text [data-resume-banner-step] { display: block; margin-left: 0; margin-top: 1px; font-size: 0.85rem; opacity: 0.85; } .cys-resume-banner-text [data-resume-banner-step]::before { content: ""; } .cys-resume-banner-icon { order: 0; } .cys-resume-banner-close { order: 2; } .cys-resume-banner-cta { order: 3; flex: 1; padding: 11px 14px; font-size: 0.92rem; } } /* Wenn Resume-Banner aktiv ist, Sticky-Mobile-CTA verstecken (Doppelung vermeiden) */ body.cys-resume-banner-active .sticky-cta-mobile { display: none !important; } /* Plakette-Restore-Hinweis: wird angezeigt wenn User Eigenbild hochgeladen hatte aber das Blob beim Resume verloren ging (zu gross fuer localStorage). */ .pk-restore-notice { background: #FFF3CD; color: #856404; border: 1px solid #FFE69C; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.92rem; line-height: 1.4; } .pk-restore-notice[hidden] { display: none !important; } /* =========================================================== RESUME MODAL ("Da weitermachen wo du aufgehoert hast?") =========================================================== */ .cys-resume-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; } .cys-resume-modal.is-open { display: flex; } .cys-resume-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .cys-resume-card { position: relative; z-index: 1; background: #FFFFFF; color: #1a1a2e; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); max-width: 460px; width: 100%; padding: 32px 28px 26px; text-align: center; animation: cysResumeIn 220ms cubic-bezier(0.2, 0.9, 0.3, 1.2); } @keyframes cysResumeIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .cys-resume-title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: 0 0 12px; color: #1a1a2e; } .cys-resume-subtext { font-size: 0.98rem; line-height: 1.45; color: #5a5d72; margin: 0 0 24px; } .cys-resume-actions { display: flex; flex-direction: column; gap: 10px; } .cys-resume-actions .btn { width: 100%; } .cys-resume-startover { background: transparent; color: #6b6f85; border: none; padding: 8px 12px; font-size: 0.92rem; text-decoration: underline; cursor: pointer; } .cys-resume-startover:hover { color: #1a1a2e; } body.cys-modal-open { overflow: hidden; } @media (max-width: 480px) { .cys-resume-card { padding: 26px 22px 22px; border-radius: 16px; } .cys-resume-title { font-size: 1.18rem; } .cys-resume-subtext { font-size: 0.92rem; margin-bottom: 20px; } } /* Review-Foto: cursor + Popup (kein Backdrop, kein Blur) */ .review-hero-img--photo { cursor: zoom-in; } .review-photo-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); max-width: min(80vw, 720px); max-height: 85vh; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; background: #fff; padding: 8px; border-radius: 14px; box-shadow: 0 24px 60px rgba(40, 20, 10, 0.4), 0 4px 12px rgba(0,0,0,0.2); } .review-photo-popup.is-open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); cursor: zoom-out; } .review-photo-popup img { display: block; max-width: 100%; max-height: calc(85vh - 16px); border-radius: 8px; } /* Carousel-Cards: Bild ragt ÜBER die Card hinaus (Polaroid-Stil), Cards selbst alle gleich hoch */ .product-muttertag .testimonial-scroll { padding-top: 220px !important; } .product-muttertag .testimonial-review-card { position: relative; overflow: visible !important; } .product-muttertag .testimonial-review-card .review-hero-img { position: absolute !important; bottom: 100% !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 200px !important; margin: 0 !important; border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; overflow: hidden; } .product-muttertag .testimonial-review-card:has(.review-hero-img) { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .product-muttertag .testimonial-review-card .review-hero-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; } /* ========================================================= v2: Recommended-First Bundle Layout (Mobile-First) Hero (Erinnerung) preselected, Komplett als Upgrade-Card, Basis & Express als kompakte Sekundär-Pills ========================================================= */ /* Container layout (kein .bundle-grid mehr) */ .product-muttertag .bundle-section-v2 .bundle-heading { text-align: center; margin-bottom: 1rem; font-size: 1.05rem; } .product-muttertag .bundle-tagline { color: var(--mt-text-soft); font-size: 0.85rem; line-height: 1.4; margin: 0 0 0.85rem 0; text-align: center; } /* HERO: Erinnerung — full prominence, photo on top */ .product-muttertag .bundle-card-hero { display: block !important; margin: 14px auto 0.75rem auto !important; padding: 0.8rem 0.85rem 0.9rem !important; position: relative; cursor: pointer; overflow: visible !important; } .product-muttertag .bundle-card-hero .bundle-card-photo { margin: 0 auto 0.7rem !important; border-radius: 12px !important; overflow: hidden !important; width: 100% !important; max-width: 240px !important; height: auto !important; aspect-ratio: 1 / 1 !important; background: transparent !important; line-height: 0; -webkit-mask-image: -webkit-radial-gradient(white, black); } .product-muttertag .bundle-card-hero .bundle-name { font-size: 1.25rem !important; margin: 0.3rem 0 0.7rem !important; } .product-muttertag .bundle-card-hero .bundle-features { margin: 0 0 0.7rem !important; } .product-muttertag .bundle-card-hero .bundle-features li { font-size: 0.86rem !important; padding: 0.18rem 0 !important; } .product-muttertag .bundle-card-hero .bundle-price { padding-top: 0.55rem !important; } .product-muttertag .bundle-card-hero .bundle-price-value { font-size: 1.45rem !important; } .product-muttertag .bundle-card-hero .bundle-price-old { font-size: 0.92rem !important; } .product-muttertag .bundle-card-hero .bundle-card-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 12px !important; } .product-muttertag .bundle-card-hero .bundle-name { font-size: 1.5rem !important; font-weight: 700; text-align: center; margin: 0.4rem 0 0.85rem !important; font-family: var(--font-display); line-height: 1.1; } .product-muttertag .bundle-card-hero .bundle-features { list-style: none; padding: 0; margin: 0 0 0.85rem; } .product-muttertag .bundle-card-hero .bundle-features li { font-size: 0.92rem; line-height: 1.45; color: var(--mt-text); padding: 0.22rem 0; } .product-muttertag .bundle-card-hero .bundle-features li.bundle-feature-muted { color: var(--mt-text-muted); font-size: 0.82rem; } .product-muttertag .bundle-card-hero .bundle-price { text-align: center; margin: 0; padding-top: 0.7rem; border-top: 1px dashed var(--mt-line); display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex-wrap: wrap; } .product-muttertag .bundle-card-hero .bundle-price-value { font-size: 1.7rem !important; font-weight: 700; line-height: 1; } .product-muttertag .bundle-card-hero .bundle-price-old { font-size: 1rem; margin-right: 0; } /* Popular badge re-position für Hero */ .product-muttertag .bundle-card-hero .bundle-popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #E5D0A8, var(--mt-gold)) !important; color: var(--mt-text) !important; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 5px 14px; border-radius: 999px; box-shadow: 0 3px 10px rgba(138, 75, 63, 0.25) !important; z-index: 2; white-space: nowrap; } /* UPGRADE: Komplett — kleiner als Hero, photo+text horizontal-ish */ .product-muttertag .bundle-card-upgrade { display: block !important; margin: 12px auto 0.75rem auto !important; padding: 0.9rem 0.95rem 0.95rem !important; position: relative; border: 1.5px solid var(--mt-line) !important; cursor: pointer; transition: all 0.18s ease; overflow: visible !important; } .product-muttertag .bundle-card-upgrade:has(input:checked) { border-color: var(--mt-rose-deep) !important; background: linear-gradient(180deg, #FFFAF7 0%, #FBE7E3 100%) !important; box-shadow: 0 0 0 3px rgba(184, 95, 90, 0.2), 0 10px 28px rgba(184, 95, 90, 0.18) !important; } .product-muttertag .bundle-card-upgrade .bundle-card-photo { float: left; width: 90px; height: 90px; margin: 0 0.85rem 0 0; border-radius: 10px; overflow: hidden; background: transparent; flex-shrink: 0; } .product-muttertag .bundle-card-upgrade .bundle-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-muttertag .bundle-card-upgrade .bundle-card-inner { overflow: hidden; } .product-muttertag .bundle-card-upgrade .bundle-name { font-size: 1.18rem !important; font-weight: 700; margin: 0 0 0.15rem !important; color: var(--mt-rose-deep); font-family: var(--font-display); line-height: 1.15; } .product-muttertag .bundle-card-upgrade .bundle-tagline { text-align: left; margin: 0 0 0.35rem; font-size: 0.78rem; } .product-muttertag .bundle-card-upgrade .bundle-features { list-style: none; padding: 0; margin: 0 0 0.4rem; display: none; } .product-muttertag .bundle-card-upgrade .bundle-price { margin: 0; padding: 0; display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; border-top: none; } .product-muttertag .bundle-card-upgrade .bundle-price-value { font-size: 1.25rem !important; font-weight: 700; color: var(--mt-rose-deep); } .product-muttertag .bundle-card-upgrade .bundle-price-old { font-size: 0.85rem; margin: 0; } /* UPGRADE Badge */ .product-muttertag .bundle-upgrade-badge { position: absolute; top: -9px; right: 14px; background: linear-gradient(135deg, var(--mt-rose), var(--mt-rose-deep)); color: #FFFFFF; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(184, 95, 90, 0.3); z-index: 2; white-space: nowrap; } /* SEKUNDÄR Heading */ .product-muttertag .bundle-alts-heading { margin: 1.25rem 0 0.55rem; font-size: 0.72rem; font-weight: 600; color: var(--mt-text-muted); text-align: center; letter-spacing: 0.06em; text-transform: uppercase; } /* SEKUNDÄR Pills (Basis + Express) — 2-spaltig */ .product-muttertag .bundle-alts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; margin-bottom: 1rem; } .product-muttertag .bundle-card-pill { margin: 0 !important; padding: 0 !important; border-radius: 12px !important; cursor: pointer; transition: all 0.15s ease; box-shadow: none !important; border: 1.5px solid var(--mt-line) !important; } .product-muttertag .bundle-card-pill .bundle-card-inner { display: flex !important; flex-direction: column !important; align-items: center; gap: 0.2rem; padding: 0.7rem 0.5rem 0.75rem; text-align: center; } .product-muttertag .bundle-card-pill .bundle-pill-icon { font-size: 1.35rem; line-height: 1; } .product-muttertag .bundle-card-pill .bundle-pill-text { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; } .product-muttertag .bundle-card-pill .bundle-pill-name { font-size: 0.92rem; font-weight: 600; color: var(--mt-text); } .product-muttertag .bundle-card-pill .bundle-pill-meta { font-size: 0.68rem; color: var(--mt-text-muted); } .product-muttertag .bundle-card-pill .bundle-pill-price { margin-top: 0.2rem; display: flex; align-items: baseline; gap: 0.3rem; flex-wrap: wrap; justify-content: center; } .product-muttertag .bundle-card-pill .bundle-pill-price .bundle-price-old { font-size: 0.7rem; margin: 0; text-decoration: line-through; color: var(--mt-text-muted); } .product-muttertag .bundle-card-pill .bundle-pill-price .bundle-price-value { font-size: 1rem; font-weight: 700; color: var(--mt-rose-deep); } .product-muttertag .bundle-card-pill:has(input:checked) { border-color: var(--mt-rose) !important; background: linear-gradient(180deg, #FFF5F3 0%, #FBE7E3 100%) !important; box-shadow: 0 0 0 2px rgba(212, 131, 126, 0.25), 0 6px 18px rgba(212, 131, 126, 0.18) !important; } /* Hero bleibt visuell selected wenn komplett gewählt ist (= Erinnerung + Express) */ .product-muttertag .bundle-section-v2:has(input[name="bundle_type"][value="komplett"]:checked) .bundle-card-hero { border-color: var(--mt-gold) !important; background: linear-gradient(180deg, #FFFBF1 0%, #FFF2E6 100%) !important; box-shadow: 0 0 0 3px rgba(201, 168, 118, 0.35), 0 12px 36px rgba(201, 168, 118, 0.3) !important; } /* Check-Mark Indicator (Hero + Upgrade) */ .product-muttertag .bundle-card-check { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; border: 2px solid var(--mt-line); color: transparent; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); z-index: 1; } .product-muttertag .bundle-card-check svg { width: 14px; height: 14px; } .product-muttertag .bundle-card-hero:has(input:checked) .bundle-card-check, .product-muttertag .bundle-section-v2:has(input[name="bundle_type"][value="komplett"]:checked) .bundle-card-hero .bundle-card-check { background: var(--mt-gold); border-color: var(--mt-gold); color: #FFFFFF; } .product-muttertag .bundle-card-upgrade:has(input:checked) .bundle-card-check { background: var(--mt-rose-deep); border-color: var(--mt-rose-deep); color: #FFFFFF; } /* Hide radio inputs (visual selection over label) */ .product-muttertag .bundle-section-v2 .bundle-radio { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } /* Mobile fine-tune (<= 640px) */ @media (max-width: 640px) { .product-muttertag .bundle-section-v2 .bundle-heading { font-size: 1rem; margin-bottom: 0.85rem; } .product-muttertag .bundle-card-hero { padding: 0.85rem 0.85rem 1rem !important; } .product-muttertag .bundle-card-hero .bundle-name { font-size: 1.4rem !important; } .product-muttertag .bundle-card-hero .bundle-price-value { font-size: 1.55rem !important; } .product-muttertag .bundle-card-upgrade { padding: 0.8rem !important; } .product-muttertag .bundle-card-upgrade .bundle-card-photo { width: 76px; height: 76px; margin-right: 0.75rem; } .product-muttertag .bundle-card-upgrade .bundle-name { font-size: 1.08rem !important; } .product-muttertag .bundle-card-upgrade .bundle-price-value { font-size: 1.15rem !important; } .product-muttertag .bundle-alts { gap: 0.5rem; } } /* Desktop tweak */ @media (min-width: 769px) { .product-muttertag .bundle-section-v2 .bundle-card-hero, .product-muttertag .bundle-section-v2 .bundle-card-upgrade, .product-muttertag .bundle-section-v2 .bundle-alts, .product-muttertag .bundle-section-v2 .bundle-alts-heading { max-width: 480px; margin-left: auto; margin-right: auto; } .product-muttertag .bundle-section-v2 .bundle-card-hero .bundle-card-photo { max-width: 240px; } } /* ─── Express-Upgrade Switch (toggle song_plakette ↔ komplett) ─── */ .product-muttertag .bundle-modifier { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem; margin: 0 auto 0.85rem; max-width: 480px; border: 1.5px solid var(--mt-line); border-radius: 14px; background: #FFFFFF; cursor: pointer; transition: all 0.15s ease; user-select: none; } .product-muttertag .bundle-modifier:hover { border-color: var(--mt-rose); background: #FFFDFA; } .product-muttertag .bundle-modifier:has(input:checked) { border-color: var(--mt-rose-deep); background: linear-gradient(180deg, #FFF5F3 0%, #FBE7E3 100%); box-shadow: 0 4px 14px rgba(184, 95, 90, 0.16); } .product-muttertag .bundle-modifier-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .product-muttertag .bundle-modifier-icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; } .product-muttertag .bundle-modifier-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .product-muttertag .bundle-modifier-title { font-size: 0.95rem; font-weight: 600; color: var(--mt-text); } .product-muttertag .bundle-modifier-sub { font-size: 0.75rem; color: var(--mt-text-muted); margin-top: 1px; } .product-muttertag .bundle-modifier-price { font-size: 0.95rem; font-weight: 700; color: var(--mt-rose-deep); flex-shrink: 0; } .product-muttertag .bundle-modifier-switch { position: relative; width: 42px; height: 24px; background: #E5DDD3; border-radius: 999px; transition: all 0.2s ease; flex-shrink: 0; } .product-muttertag .bundle-modifier-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease; } .product-muttertag .bundle-modifier:has(input:checked) .bundle-modifier-switch { background: var(--mt-rose-deep); } .product-muttertag .bundle-modifier:has(input:checked) .bundle-modifier-switch::after { transform: translateX(18px); } @media (max-width: 640px) { .product-muttertag .bundle-modifier { padding: 0.6rem 0.75rem; gap: 0.5rem; } .product-muttertag .bundle-modifier-title { font-size: 0.88rem; } .product-muttertag .bundle-modifier-sub { font-size: 0.7rem; } } /* === UX-POLISH-PASS (make-interfaces-feel-better) === text-wrap: balance fuer Headings (keine orphan-words), text-wrap: pretty fuer Body (keine Witwen-Zeile am Ende), image-outlines: subtle 1px fuer visuelle Tiefe. Scope: nur Muttertag-Funnel — globale Styles bleiben unangetastet. */ .product-muttertag .form-step-title, .product-muttertag .form-step-sub, .product-muttertag .plakette-want-heading, .product-muttertag .plakette-upsell-intro, .product-muttertag .scarcity-heading, .product-muttertag .pk-modal-header h3 { text-wrap: balance; } .product-muttertag .plakette-upsell-bullets li, .product-muttertag .pk-trigger-sub, .product-muttertag .form-step-usp, .product-muttertag .scarcity-card p, .product-muttertag .scarcity-slot, .product-muttertag .bundle-modifier-sub, .product-muttertag .pk-tip { text-wrap: pretty; } /* Image outlines — 1px pure black at 0.1 opacity, inset so layout doesn't shift */ .product-muttertag .pk-funnel-main-img, .product-muttertag .pk-preview-bg, .product-muttertag .pk-tpl-btn img, .product-muttertag .bundle-card-photo img, .product-muttertag .pk-cover-area img { outline: 1px solid rgba(0, 0, 0, 0.1); outline-offset: -1px; } /* Cover-Template-Buttons: vergroesserte Hit-Area (visuell 64px, Hit-Area >= 44px ist erfuellt; Skill-Min-Empfehlung). Kein visueller Wechsel, nur Padding ist im Skill-Konformbereich. */ .product-muttertag .pk-tpl-btn { min-width: 64px; min-height: 64px; } /* Auto-Hint: dezenter Info-Block — Songtitel/Widmung werden automatisch erstellt. Skill: subtle background statt harter border, konzentrische Radius zum Step-Container, text-wrap pretty (schon global drin), kleine Schriftgroesse damit es nicht heraussticht. */ .product-muttertag .pk-auto-hint { display: flex; align-items: flex-start; gap: 0.55rem; margin: 1rem 0 0 0; padding: 0.7rem 0.85rem; background: rgba(192, 74, 102, 0.06); border-radius: 10px; font-size: 0.82rem; line-height: 1.5; color: var(--mt-text-muted, #5F5247); text-wrap: pretty; } .product-muttertag .pk-auto-hint strong { color: var(--mt-text, #2A1F1A); font-weight: 600; } .product-muttertag .pk-auto-hint-icon { flex-shrink: 0; font-size: 1rem; line-height: 1.4; } /* === Info-Step: Preis-Card (mt-pricecard) — strict scoped =================== */ .product-muttertag .form-step[data-step="info"] .mt-pricecard { position: relative; margin: 28px auto 10px; max-width: 460px; background: var(--mt-cream-deep); border: 1px solid rgba(138, 75, 63, 0.08); border-radius: 14px; padding: 14px 24px 12px; text-align: center; box-shadow: 0 2px 8px rgba(138, 75, 63, 0.05); } .product-muttertag .form-step[data-step="info"] .mt-pricecard-badge { position: absolute; top: -14px; right: -10px; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 13px 8px; background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); color: #FFF; border-radius: 999px; line-height: 1; text-transform: uppercase; box-shadow: 0 6px 16px rgba(184, 95, 90, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.18); transform: rotate(4deg); transform-origin: center; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-badge-tag { font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; opacity: 0.92; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-badge-pct { font-size: 14px; font-weight: 800; letter-spacing: 0.02em; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-label { font-size: 16px; color: var(--mt-text); font-weight: 500; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-strike { font-size: 16px; color: var(--mt-text-muted); text-decoration: line-through; font-weight: 500; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-now { font-family: var(--font-display); font-size: 30px; color: var(--mt-rose-deep); font-weight: 600; line-height: 1; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-bullets { margin-top: 8px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--mt-text-soft); } .product-muttertag .form-step[data-step="info"] .mt-pricecard-bullet { display: inline-flex; align-items: center; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-check { color: #6FA45E; margin-right: 4px; font-weight: 700; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-icon { margin-right: 4px; font-size: 13px; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-sep { color: var(--mt-text-muted); opacity: 0.7; } @media (max-width: 480px) { .product-muttertag .form-step[data-step="info"] .mt-pricecard { max-width: 100%; padding: 14px 16px 10px; margin-top: 34px; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-now { font-size: 26px; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-badge { top: -18px; right: 8px; padding: 5px 10px 6px; transform: none; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-badge-tag { font-size: 8px; } .product-muttertag .form-step[data-step="info"] .mt-pricecard-badge-pct { font-size: 12px; } } /* === Rückblick-Step (data-step="rueckblick") — strict scoped ================== */ .product-muttertag .form-step[data-step="rueckblick"] .rb-headline { text-align: center; margin-bottom: 6px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-sub { text-align: center; color: var(--mt-text-muted); font-size: 14px; margin: 0 0 22px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-list { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto 24px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review { background: #FFFFFF; border: 1px solid var(--mt-line); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(138, 75, 63, 0.05); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review:hover { box-shadow: 0 4px 16px rgba(138, 75, 63, 0.10); border-color: rgba(138, 75, 63, 0.18); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review.expanded { box-shadow: 0 6px 20px rgba(138, 75, 63, 0.12); border-color: rgba(212, 131, 126, 0.35); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-header { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-header:focus-visible { outline: 2px solid var(--mt-rose); outline-offset: -2px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--mt-cream-soft); cursor: zoom-in; transition: transform 0.15s ease; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-img:hover { transform: scale(1.05); } /* Lightbox für vergrößerte Profilbilder */ .product-muttertag .rb-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; animation: rbLightboxFade 0.2s ease; } .product-muttertag .rb-lightbox[hidden] { display: none; } .product-muttertag .rb-lightbox-img { max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); cursor: default; object-fit: contain; } .product-muttertag .rb-lightbox-close { position: absolute; top: 16px; right: 20px; background: rgba(255, 255, 255, 0.18); border: 0; color: #FFF; font-size: 26px; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 0 3px; transition: background 0.15s ease; } .product-muttertag .rb-lightbox-close:hover { background: rgba(255, 255, 255, 0.30); } @keyframes rbLightboxFade { from { opacity: 0; } to { opacity: 1; } } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-toprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-badge { display: inline-flex; align-items: center; gap: 3px; background: rgba(212, 131, 126, 0.12); border: 1px solid rgba(212, 131, 126, 0.25); border-radius: 100px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: var(--mt-terracotta); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-stars { color: var(--mt-gold); font-size: 11px; letter-spacing: 1px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; color: var(--mt-text); line-height: 1.25; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-author { font-size: 11.5px; color: var(--mt-text-muted); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-toggle { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--mt-rose-deep); font-size: 13px; transition: transform 0.25s ease; background: var(--mt-cream-soft); border-radius: 50%; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review.expanded .rb-review-toggle { transform: rotate(180deg); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-body { padding: 0 16px 14px; border-top: 1px solid var(--mt-line); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-text { font-size: 14px; line-height: 1.55; color: var(--mt-text-soft); margin: 12px 0 12px; font-style: italic; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio { display: flex; align-items: center; gap: 10px; background: var(--mt-cream); border: 1px solid var(--mt-line); border-radius: 10px; padding: 8px 10px; min-height: 52px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio-trigger { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio-mount { flex: 1; min-width: 0; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio-mount:empty { display: none; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-play { width: 36px; height: 36px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); color: #FFF; font-size: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(184, 95, 90, 0.30); flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding-left: 2px; transition: transform 0.15s ease; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-play:hover { transform: scale(1.05); } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-play.playing { padding-left: 0; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio-info { flex: 1; min-width: 0; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mt-text-muted); font-weight: 600; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-audio-name { font-size: 13.5px; font-weight: 600; color: var(--mt-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* CTA */ .product-muttertag .form-step[data-step="rueckblick"] .rb-cta { display: block; width: 100%; max-width: 480px; margin: 8px auto 4px; padding: 16px 24px; background: linear-gradient(135deg, var(--mt-rose) 0%, var(--mt-rose-deep) 100%); color: #FFF; border: 0; border-radius: 999px; font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 8px 24px rgba(184, 95, 90, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .product-muttertag .form-step[data-step="rueckblick"] .rb-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(184, 95, 90, 0.45); } .product-muttertag .form-step[data-step="rueckblick"] .rb-cta:active { transform: translateY(0); } @media (max-width: 600px) { .product-muttertag .form-step[data-step="rueckblick"] .rb-review-img { width: 52px; height: 52px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-title { font-size: 15px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-review-header { gap: 10px; padding: 10px 12px; } .product-muttertag .form-step[data-step="rueckblick"] .rb-cta { font-size: 15px; padding: 14px 20px; } } /* Mobile sticky CTA — nur sichtbar wenn rueckblick aktiv und scrolled past initial CTA */ @media (max-width: 768px) { .product-muttertag .form-step[data-step="rueckblick"] .rb-cta-sticky { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0)); z-index: 50; width: auto; max-width: none; margin: 0; padding: 14px 20px; font-size: 15px; box-sizing: border-box; opacity: 0; transform: translateY(100%); transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .product-muttertag .form-step[data-step="rueckblick"] .rb-cta-sticky.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } } @media (min-width: 769px) { .product-muttertag .form-step[data-step="rueckblick"] .rb-cta-sticky { display: none !important; } } /* ============================================================ */ /* CHECKOUT-SUMMARY (Final-Page vor Stripe — review-Step) */ /* ============================================================ */ .product-muttertag .form-step[data-step="review"] .form-step-title { margin-bottom: 0.4rem; } .product-muttertag .form-step[data-step="review"] .form-step-sub { margin-bottom: 1.5rem; font-style: italic; opacity: 0.85; } .product-muttertag .checkout-section-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mt-text-muted, #7a6a6a); margin: 1.75rem 0 0.65rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(0,0,0,0.08); } .product-muttertag .checkout-section-heading:first-of-type { margin-top: 0.5rem; } /* Plakette-Preview: kleine Card mit Bild + Label + Stift */ .product-muttertag .checkout-plakette-preview { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.9rem; background: rgba(255, 240, 230, 0.55); border: 1px solid rgba(220, 130, 90, 0.18); border-radius: 12px; margin-top: 0.65rem; } .product-muttertag .checkout-plakette-img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .product-muttertag .checkout-plakette-info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; } .product-muttertag .checkout-plakette-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mt-text-muted, #7a6a6a); } .product-muttertag .checkout-plakette-meta { font-size: 0.95rem; font-weight: 600; color: var(--mt-text, #2d1f1a); } /* Meta-Row: E-Mail + Lieferzeit */ .product-muttertag .checkout-meta-row { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem 1rem; background: rgba(255, 250, 245, 0.7); border-radius: 10px; font-size: 0.88rem; } .product-muttertag .checkout-meta-line { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .product-muttertag .checkout-meta-icon { font-size: 1rem; flex-shrink: 0; } .product-muttertag .checkout-meta-edit { margin-left: auto; } /* AGB-Disclaimer: kleinere Schrift, dezent */ .product-muttertag .checkout-agb-disclaimer { margin-top: 1.25rem; font-size: 0.72rem; line-height: 1.55; text-align: center; color: var(--mt-text-muted, #7a6a6a); padding: 0 0.5rem; } .product-muttertag .checkout-agb-disclaimer a { color: var(--mt-rose-deep, #c44d6f); text-decoration: underline; } .product-muttertag .checkout-agb-disclaimer strong { color: var(--mt-text, #2d1f1a); } /* Trust-Row: Sichere Zahlung + Methoden — direkt am CTA */ .product-muttertag .checkout-trust-row { margin-top: 0.6rem; text-align: center; font-size: 0.75rem; color: var(--mt-text-muted, #7a6a6a); display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap; line-height: 1.5; } .product-muttertag .checkout-trust-icon { font-size: 0.9rem; } @media (max-width: 480px) { .product-muttertag .checkout-plakette-preview { padding: 0.65rem; gap: 0.65rem; } .product-muttertag .checkout-plakette-img { width: 48px; height: 48px; } .product-muttertag .checkout-plakette-meta { font-size: 0.88rem; } .product-muttertag .checkout-meta-row { padding: 0.7rem 0.85rem; font-size: 0.82rem; } .product-muttertag .checkout-agb-disclaimer { font-size: 0.7rem; } } /* ================================================================ MOBILE PEP-PASS 1 (make-interfaces-feel-better) Hebel: Tap-Feedback, Stagger-Enter, Sticky Bottom-CTA Mobile, Selection-Confirm Pulse, Tabular Nums. Scope: Muttertag-Funnel. ================================================================ */ /* Hebel 1: Hover-Lift NUR fuer Hover-faehige Devices. Touch-Devices triggern :hover bei Tap und behalten den State — fuehlt sich klebrig an. Bestehender Hover-Effekt (theme.css ~260-266) bleibt fuer Desktop. */ @media (hover: none) { .product-muttertag .toggle-btn:hover, .product-muttertag .toggle-btn-tile:hover, .product-muttertag .tile-audio-btn:hover, .product-muttertag .pk-trigger-btn:hover { transform: none !important; box-shadow: none; background: #FFFFFF; border-color: var(--mt-line); } .product-muttertag .toggle-btn-tile.active:hover { background: linear-gradient(180deg, #FFF5F3 0%, #FBE7E3 100%); border-color: var(--mt-rose); box-shadow: 0 8px 20px rgba(212, 131, 126, 0.25); } } /* Hebel 1: Tap-Feedback — kurzer Scale-In auf :active fuer snappy haptic-feel. transition ist schon auf den Elementen (theme.css ~258), wir uebersteuern nur die duration beim Press damit es sich responsive anfuehlt. -webkit-tap-highlight transparent damit iOS nicht den haesslichen blauen Overlay zeigt. */ .product-muttertag .toggle-btn, .product-muttertag .toggle-btn-tile, .product-muttertag .tile-audio-btn, .product-muttertag .btn-primary, .product-muttertag .pk-trigger-btn { -webkit-tap-highlight-color: transparent; } .product-muttertag .toggle-btn-tile:active, .product-muttertag .tile-audio-btn:active, .product-muttertag .pk-trigger-btn:active { transform: scale(0.97); transition-duration: 0.08s; } .product-muttertag .btn-primary:active:not(:disabled) { transform: scale(0.98); transition-duration: 0.08s; } /* Hebel 2: Stagger-Enter — Tiles fade+slide rein, gestaffelt, wenn Step aktiv wird. Greift auf .tile-with-audio (Stil/Stimmung/Tempo/Stimme) und auf Plain-Tiles in .toggle-grid-2 (Stimmung 4-Tiles ohne Audio). `backwards` damit Element vor Animation unsichtbar ist. */ @keyframes mtTileEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .product-muttertag .form-step.active .tile-with-audio, .product-muttertag .form-step.active .toggle-grid-2 > .tile-with-audio, .product-muttertag .form-step.active .toggle-grid-2 > .toggle-btn-tile, .product-muttertag .form-step.active .toggle-grid-stil > .tile-with-audio { animation: mtTileEnter 0.32s cubic-bezier(0.4, 0, 0.2, 1) backwards; } .product-muttertag .form-step.active .toggle-grid > :nth-child(1) { animation-delay: 0.04s; } .product-muttertag .form-step.active .toggle-grid > :nth-child(2) { animation-delay: 0.10s; } .product-muttertag .form-step.active .toggle-grid > :nth-child(3) { animation-delay: 0.16s; } .product-muttertag .form-step.active .toggle-grid > :nth-child(4) { animation-delay: 0.22s; } @media (prefers-reduced-motion: reduce) { .product-muttertag .form-step.active .tile-with-audio, .product-muttertag .form-step.active .toggle-grid > * { animation: none !important; } } /* Hebel 3: Sticky Bottom-CTA Mobile — form-nav klebt am Viewport-Boden. Greift NUR <=640px. .form-nav wird via JS bei rueckblick + step 7 auf display:none gesetzt — Sticky greift dann auch nicht (display:none gewinnt). safe-area-inset fuer iPhone-Notch/Home-Indicator. */ @media (max-width: 640px) { /* !important hier nötig: theme.css ~3086 + ~3100 setzen vorher padding-top:0 !important, margin-top:Xpx !important, border-top:none !important. Gleiche Specificity wie unsere → last !important wins, also unsere muss !important sein. */ .product-muttertag .form-nav { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; max-width: none !important; margin: 0 !important; padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 1rem !important; align-items: center !important; background: rgba(255, 250, 246, 0.94) !important; -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); border-top: 1px solid rgba(0, 0, 0, 0.10) !important; box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.05) !important; z-index: 50 !important; gap: 0.5rem !important; } /* Body kriegt extra padding-bottom, damit der USP-Streifen am Boden des form-step nicht hinter der Sticky-CTA verschwindet. Existing 3.5rem (style.css 4567) gilt fuer landing-sticky-cta-mobile — auf erstellen.html ist die nicht da, padding ist hier ok als reines Visual-Spacing fuer den Sticky-CTA-Bereich. */ body.product-muttertag .form-card { padding-bottom: 5.25rem; } /* Cookie-Banner sichtbar: Sticky-CTA drueber pushen (gleiche Logik wie sticky-cta-mobile). */ body.product-muttertag:has(.cookie-banner) .form-nav { bottom: 8.5rem; } } /* Hebel 4: Selection-Confirm Pulse — wenn ein Tile per Click NEU active wird, spielt ein dezenter Pulse-Ring. JS setzt .tile-just-confirmed fuer 600ms. Bestehender active-Box-Shadow (theme.css ~272) bleibt parallel sichtbar. */ @keyframes mtConfirmPulse { 0% { box-shadow: 0 0 0 0 rgba(212, 131, 126, 0.55), 0 8px 20px rgba(212, 131, 126, 0.25); } 70% { box-shadow: 0 0 0 14px rgba(212, 131, 126, 0), 0 8px 20px rgba(212, 131, 126, 0.25); } 100% { box-shadow: 0 0 0 0 rgba(212, 131, 126, 0), 0 8px 20px rgba(212, 131, 126, 0.25); } } .product-muttertag .toggle-btn-tile.tile-just-confirmed { animation: mtConfirmPulse 0.55s ease-out; } @media (prefers-reduced-motion: reduce) { .product-muttertag .toggle-btn-tile.tile-just-confirmed { animation: none; } } /* Hebel 5: Tabular Nums auf zaehlende Texte — verhindert Wackeln bei dynamischen Updates. Wirkt nur auf Ziffern, lateinische Buchstaben bleiben proportional. */ .product-muttertag .progress-label, .product-muttertag .char-counter, .product-muttertag .stat-num, .product-muttertag .promo-banner-inner, .product-muttertag .delivery-timer-num, .product-muttertag .timer-value, .product-muttertag .countdown-num, .product-muttertag .price-now, .product-muttertag .price-strike, .product-muttertag .mt-pricecard-now, .product-muttertag .mt-pricecard-strike, .product-muttertag .voice-progress-time, .product-muttertag #checkoutPlaketteMeta, .product-muttertag .rb-stat-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Email-Card auf Review-Step: separater Block ueber "Deine Angaben"-Section. Nutzt .summary-card Base-Style (theme.css ~212), plus margin-bottom als visuelle Trennung zur Songkonfig-Card. Email ist Kontakt, nicht Konfig. */ .product-muttertag .summary-email-card { margin-bottom: 1rem; } @media (max-width: 640px) { .product-muttertag .summary-email-card { margin-bottom: 0.75rem; } } /* Final-CTA-Glow — dezenter atmender Rose-Schein auf "Jetzt kostenpflichtig bestellen". JS setzt .mt-final-glow nur auf Review-Step (app.js showStep). Breathing 3s, +Mini-Shine alle ~5s. Filter:brightness fuer Mikro-Pulse damit der Button "lebt", nicht nur den Schatten pumpt. */ @keyframes mtFinalCtaBreath { 0%, 100% { box-shadow: 0 6px 18px rgba(192, 74, 102, 0.28), 0 0 0 0 rgba(192, 74, 102, 0); filter: brightness(1); } 50% { box-shadow: 0 10px 28px rgba(192, 74, 102, 0.42), 0 0 22px 2px rgba(192, 74, 102, 0.22); filter: brightness(1.05); } } @keyframes mtFinalCtaShine { 0%, 88%, 100% { transform: translateX(-130%) skewX(-22deg); opacity: 0; } 92% { opacity: 0.55; } 99% { transform: translateX(230%) skewX(-22deg); opacity: 0; } } .product-muttertag .btn-primary.mt-final-glow { position: relative; overflow: hidden; isolation: isolate; animation: mtFinalCtaBreath 3s ease-in-out infinite; } .product-muttertag .btn-primary.mt-final-glow::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 28%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%); pointer-events: none; z-index: 1; transform: translateX(-130%) skewX(-22deg); animation: mtFinalCtaShine 5.5s ease-in-out infinite 1.5s; } .product-muttertag .btn-primary.mt-final-glow > * { position: relative; z-index: 2; } @media (prefers-reduced-motion: reduce) { .product-muttertag .btn-primary.mt-final-glow, .product-muttertag .btn-primary.mt-final-glow::after { animation: none; } } /* ================================================================ MOBILE PEP-PASS 2 (make-interfaces-feel-better) Hebel 6: Form-Step Crossfade interruptible Hebel 7: Concentric Border Radius (Phone-Mockup proportional) Hebel 8: Input-Focus-Polish (smooth transition + warm tint) Scope: Muttertag-Funnel. ================================================================ */ /* Hebel 6: Form-Step Enter — kuerzer + only-opacity (kein translateY mehr). Existing fadeIn (style.css ~1605) hat 0.4s + transform:translateY(10px) — das schiebt Tap-Targets waehrend Animation und kann auf Mobile zu missed Taps fuehren. Replace mit reiner opacity-fade — schneller (0.22s) + Layout-stabil = Tap-Targets sofort an final-Position. */ @keyframes mtFormStepEnter { from { opacity: 0; } to { opacity: 1; } } .product-muttertag .form-step { animation: none !important; } .product-muttertag .form-step.active { animation: mtFormStepEnter 0.22s ease-out !important; } @media (prefers-reduced-motion: reduce) { .product-muttertag .form-step.active { animation: none !important; } } /* Hebel 7: Phone-Mockup Concentric Border Radius — wenn das Phone im Funnel skaliert wird (240px statt 280px Original), muss die radius proportional mitskalieren damit der Look konzentrisch bleibt. Original: 280px width, 40px radius. Phone-screen ist 4px inset → 36px (40-4). Funnel-Variants: 240px (Desktop+Tablet): 40 * 240/280 = 34, screen 30 200px (Mobile <=720px): 40 * 200/280 = 28, screen 24 So bleibt das Verhaeltnis Mockup-Radius zu Phone-Width gleich wie im Original. */ .product-muttertag .form-step[data-step="info"] .phone-mockup { border-radius: 34px; } .product-muttertag .form-step[data-step="info"] .phone-screen { border-radius: 30px; } @media (max-width: 720px) { .product-muttertag .form-step[data-step="info"] .phone-mockup { border-radius: 28px; } .product-muttertag .form-step[data-step="info"] .phone-screen { border-radius: 24px; } } /* Hebel 8: Input-Focus-Polish — smooth transition fuer border-color + box-shadow + background. Existing focus-state (theme.css ~303) springt hart an. Mit transition wird der Uebergang premium-feeling. Plus warmer Cream-Tint auf Focus damit User klar sieht "hier bin ich gerade". transition-Properties explizit (nicht "all") damit andere Properties nicht mit-animieren. */ .product-muttertag .form-input, .product-muttertag textarea, .product-muttertag input[type="text"], .product-muttertag input[type="email"], .product-muttertag input[type="number"], .product-muttertag input[type="tel"], .product-muttertag select { transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease; } .product-muttertag .form-input:focus, .product-muttertag textarea:focus, .product-muttertag input[type="text"]:focus, .product-muttertag input[type="email"]:focus, .product-muttertag input[type="number"]:focus, .product-muttertag input[type="tel"]:focus, .product-muttertag select:focus { background-color: #FFFCF9 !important; } @media (prefers-reduced-motion: reduce) { .product-muttertag .form-input, .product-muttertag textarea, .product-muttertag input, .product-muttertag select { transition: none !important; } } /* ======================================================== STIMME-STEP MOBILE FIX: Voice-Tiles (Tobi/Marie) bleiben konstant gross egal ob Player oder Hörprobe-Pille drunter. Vorher: Player war höher als Hörprobe-Pille → align-items:stretch + flex:1 1 auto auf .toggle-btn-tile haben das aktive Toggle zusammengedrückt. Jetzt: Tile clamped auf 86px, Grid wächst pro Spalte natürlich. Desktop bleibt unangetastet. ======================================================== */ @media (max-width: 640px) { .product-muttertag .toggle-grid-2[data-group="stimme"] { align-items: start !important; } .product-muttertag .toggle-grid-2[data-group="stimme"] .tile-with-audio .toggle-btn-tile { flex: 0 0 86px !important; min-height: 86px !important; max-height: 86px !important; height: 86px !important; padding: 0.85rem 0.6rem !important; } } /* === iOS Auto-Zoom Safety-Net (added 2026-05-01) === Verhindert iOS-Auto-Zoom-Reinklicken in Input-Felder beim Tap. Triggert wenn computed font-size < 16px. !important ueberschreibt alle anderen Regeln. */ @media (max-width: 1024px) { /* High-specificity Safety-Net — muss .form-step-Selektoren überschreiben */ .product-muttertag input, .product-muttertag textarea, .product-muttertag select, .product-muttertag .form-input, .product-muttertag .form-textarea, .product-muttertag .form-step input, .product-muttertag .form-step textarea, .product-muttertag .form-step select, .product-muttertag .form-step .form-input, .product-muttertag .form-step .form-textarea, .product-muttertag form input, .product-muttertag form textarea, .product-muttertag form select { font-size: 16px !important; } }