/* TGTG-Airbnb: Nur Inter + Montserrat (flaches Design, keine Schreibschriften) */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Montserrat:wght@400;600;700;900&display=swap'); /* UI-State-Helper (Sprint 5b31): show/hide statt style.display [cite: 2026-03-02] */ .is-hidden{ display:none !important; } .is-visible{ display:block !important; } .is-visible-flex{ display:flex !important; } /* INPUT-FOCUS-RESET: Kein blauer/gelber Standard-Rahmen [cite: STRENGER CODE-CLEANUP 2026-02-23] */ input:focus, textarea:focus, select:focus, button:focus { outline: none !important; box-shadow: none !important; } #step-name input:focus, .input-giant-name:focus, .input-description:focus, .ghost-input:focus { border-bottom: 1px solid #222222 !important; } /* 1. DIE ANIMATIONS-KURVE (S25-Standard) [cite: 2026-02-21] */ :root { --s25-slide-curve: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Airbnb Branding & UI [cite: Dashboard 2.1] */ :root { --airbnb-black: #222222; --airbnb-white: #ffffff; --airbnb-border: #ebebeb; --price-yellow: #FFD700; /** Preis-Branding Anbieterseite: kräftiges Bernstein-Gelb [cite: 2026-02-25] */ --color-price-yellow: #FFB800; --status-active-green: #2ecc71; --status-active-blue: #3498db; --status-active-orange: #f39c12; --status-inactive: #d1d1d1; } /* Flying-Dish: Sternschnuppen-Animation für Magic-Game [cite: 2026-02-23] */ .flying-dish { position: fixed; z-index: 9999; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; pointer-events: none; box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .flying-dish::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 70%); transform: translate(-50%, -50%) scale(1.5); filter: blur(5px); z-index: -1; } @keyframes slot-land { 0% { transform: scale(1); } 50% { transform: scale(1.15); box-shadow: 0 0 24px rgba(255, 215, 0, 0.5); } 100% { transform: scale(1); } } .kw-slot.slot-landing { animation: slot-land 0.4s ease-out; } /* Shake-Animation bei Validierungsfehler [cite: 2026-02-23] */ @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .btn-shake { animation: shake 0.2s ease-in-out 0s 2; border: 1px solid #ff4444 !important; } /* 2. EMERALD-PULSE: Ready-Zustand des Primär-Buttons [cite: 2026-02-21] */ @keyframes emerald-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* 3. DER "READY" ZUSTAND: Schwarze Pill, kein Glow [cite: STRENGER CODE-CLEANUP 2026-02-23] */ .footer-btn-primary.is-ready { background: #1a1a1a !important; color: #ffffff !important; animation: none; cursor: pointer; transition: all 0.3s var(--s25-slide-curve); pointer-events: auto !important; box-shadow: none !important; } /* 4. Deaktivierter Zustand: opacity 0.3, nicht klickbar bis is-ready [cite: MASTER-LOGIC 2026-02-23] */ #mastercard-footer-step1 .footer-btn-primary:not(.is-ready), #mastercard-footer-step1 .btn-primary-black:not(.is-ready), #inserat-action-section .footer-btn-primary:not(.is-ready), #inserat-action-section .btn-primary-black:not(.is-ready) { opacity: 0.3 !important; pointer-events: none !important; transition: opacity 0.25s ease, background 0.25s ease; } #mastercard-footer-step1 .btn-primary-black.is-ready, #inserat-action-section .btn-primary-black.is-ready { opacity: 1 !important; background: #222222 !important; border-radius: 8px !important; pointer-events: auto !important; } /* Step 2 Inserieren-Button: Bleibt schwarz/gelb – keine is-ready-Logik */ .app-footer-main .footer-btn-primary { pointer-events: auto !important; } /* Init-Gate: entfernt – verursachte weiße Seite bei ORB/Blocking. Sichtbarkeit jetzt via early-visibility.js + initApp */ :root{ /* Mittagio High-End Farbpalette */ --bg:#FFFFFF; /* Native App: reine Leinwand, kein Beige [cite: Tabula Rasa] */ --bg-polaroid:#FFFFFF; /* Kein Polaroid-Beige mehr – einheitlich weiß */ --card:#FFFFFF; --text:#334155; /* Slate Grey - edler als reines Schwarz */ --muted:#6b6b6b; --border:#e7e1d5; /* TGTG-Airbnb Fusion: keine Schlagschatten, Inset-Dividers */ --tgtg-divider: 1px solid rgba(0,0,0,0.06); --tgtg-shadow-minimal: 0 1px 3px rgba(0,0,0,0.04); --tgtg-spacing: 24px; --tgtg-spacing-lg: 32px; --tgtg-img-radius: 18px; --tgtg-title-color: #0f172a; /* Legacy-Kompatibilität */ --shadow: 0 1px 3px rgba(0,0,0,0.04); --shadow2: 0 2px 8px rgba(0,0,0,0.06); --radius: 18px; --brand:#FFD700; /* Mittagio Gold - Primär (Korb, Abholnummer-Buttons) */ --brand2:#2ECC71; /* Erfolgs-Grün - Profit (Netto-Umsatz) */ --brand3:#27AE60; /* Mehrweg-Grün - Dezent (Blatt-Icon) */ --sticker-green:#27AE60; /* Preis-Sticker & Mehrweg-Badge (Polaroid-Card) */ --danger:#E34D4D; --font-polaroid-marker: 'Inter', system-ui, sans-serif; /* Design Tokens - PWA Light */ /* Radius */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px; /* Spacing */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --card-padding: 20px; /* Einheitliches Padding für alle Karten (Anbieter & Kunde) */ /* Typography */ --font-title: 18px; --font-title-lg: 20px; --font-body: 14px; --font-body-lg: 16px; --font-meta: 12px; --font-meta-sm: 13px; --font-weight-semibold: 600; --font-weight-bold: 700; /* Colors (Light) */ --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-border: #EAEAEA; --color-text: #1A1A1A; --color-text-secondary: #6B6B6B; --color-brand-yellow: #FFD700; /* Mittagio Gold */ --color-emerald: #10b981; /* High-Tech-Gastro Akzent (Inseratsflow, Pills) */ --color-success-green: #2ECC71; /* Erfolgs-Grün - Profit */ --color-eco-green: #27AE60; /* Mehrweg-Grün - Dezent */ --color-slate-text: #334155; /* Slate Grey - Texte */ --color-soft-yellow-bg: rgba(255, 204, 0, 0.15); --color-soft-green-bg: rgba(31, 157, 85, 0.12); --color-soft-grey-bg: rgba(0, 0, 0, 0.06); /* Icon Sizes */ --icon-inline: 16px; --icon-inline-lg: 18px; --icon-header: 20px; --icon-header-lg: 22px; --icon-nav: 22px; --icon-nav-lg: 24px; /* Button Heights */ --btn-height-min: 44px; --btn-height-md: 48px; /* Badge */ --badge-height: 24px; --badge-px: 10px; --badge-px-lg: 12px; /* ========== EINHEITLICH: HEADER & LAYOUT (Kunde + Anbieter) ========== */ --header-bg: rgba(255,255,255,0.92); --header-blur: 16px; --header-border: none; --header-padding-y: 12px; --header-padding-x: 16px; --header-title-size: 20px; --header-title-weight: 900; --header-title-spacing: -0.03em; --header-title-color: #0f172a; --header-subtitle-color: #64748b; --header-input-size: 15px; --header-input-weight: 500; --pill-min-height: 44px; --pill-font-size: 14px; --pill-font-weight: 700; --pill-radius: 22px; --pill-bg-inactive: #e5e7eb; --pill-color-inactive: #64748b; --pill-active-emerald: #059669; --section-title-size: 18px; --section-title-weight: 800; --list-title-weight: 800; --body-text-size: 15px; --body-text-color: #64748b; /* Nutzung: .prov-header, .prov-page-header, .discover-header-sticky, Pills (Kunde + Kochbuch) */ /* ========== EISERNES DESIGN-SYSTEM (Schritt 1.6) ========== */ --font-main: 'Montserrat', 'Inter', sans-serif; --color-title: #0f172a; --color-body: #64748b; --size-h1: 24px; --size-h2: 20px; --size-list-title: 18px; --size-body: 15px; --weight-heavy: 900; --weight-bold: 800; --weight-medium: 600; --weight-hero: 950; --radius-card: 16px; --radius-panel: 24px; --abholnummer-size: 2.5rem; --abholnummer-weight: 950; --content-padding-bottom: 120px; --content-padding-bottom-compact: 90px; --list-photo-size: 100px; --list-photo-radius: 16px; } /* ========== EISERNE SCHRIFT-REGEL (Typography Master) [cite: 2026-02-19] ========== */ /* Haupttitel (zentriert): 20px, 900, -0.03em, Midnight Blue #0f172a */ .ds-h1, .ds-h2{ font-size: 20px !important; font-weight: 900 !important; letter-spacing: -0.03em; color: #0f172a !important; } .ds-h2-850{ font-size: 20px !important; font-weight: 850 !important; color: #0f172a !important; letter-spacing: -0.03em; } .ds-empty-title{ font-size: 20px !important; font-weight: 900 !important; color: #0f172a !important; letter-spacing: -0.03em; margin: 0 0 12px; } /* Listen-Titel: 18px, 800 */ .ds-h3{ font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; } /* Body: 14-15px, Schiefergrau #64748b */ .ds-body{ font-size: 15px; color: #64748b; } .ds-meta{ font-size: 12px; font-weight: 700; color: var(--color-body); } .ds-label{ font-size: 15px; font-weight: 700; color: var(--color-title); } .ds-abholnummer-emoji{ font-size: 2.5rem !important; font-weight: 950 !important; font-family: ui-monospace, monospace !important; line-height: 1; color: #0f172a !important; } .content-padding-bottom{ padding-bottom: calc(var(--content-padding-bottom) + env(safe-area-inset-bottom, 0)) !important; } .content-padding-bottom-compact{ padding-bottom: calc(var(--content-padding-bottom-compact) + env(safe-area-inset-bottom, 0)) !important; } *{box-sizing:border-box} /* S25 Typografie: Glatte Schriften (Gussform-Look) [cite: 2026-02-19] */ body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ========== TRENNUNG KUNDE / ANBIETER (PFLICHT) ========== * Jede layout-kritische Regel (height, overflow, scroll) MUSS einen der beiden Scopes haben: * - NUR ANBIETER: body.provider-mode ... oder [id^="v-provider-"] ... * - NUR KUNDE: body:not(.provider-mode) ... * Keine gemeinsamen Regeln für #app/main/body mit height/overflow – sonst bricht eine Seite die andere. * ========== */ /* ========== TABULA RASA: ARCHITEKTEN-RESET [cite: 2026-02-19] ========== * 1. Global: #app, .app, alle Views width/max-width 100%, margin 0. Hierarchie-Sieg via !important. * 2. No-Box Policy: Jede View ein Haupt-Wrapper, padding 0 16px. Keine Kästen, nur Inset-Divider. * 3. Layer-Management: Header/Footer fixed. Main: padding-top/bottom + env(safe-area-inset-*). * 4. Breitenbefreiung: chiprow, dayrow max-width 100% (kein 980px-Zentrier-Box mehr). */ #app, .app{ width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box; } #app .view, [id^="v-provider-"], #v-discover{ width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box; } /* VIEW-SWITCH: nur aktive View sichtbar (gemeinsam) */ #app .view:not(.active){ display:none !important; min-height:0 !important; visibility:hidden !important; } #app .view.active{ display:block !important; } body.provider-mode #app .view.active{ min-height:100dvh; min-height:100vh; } #app .view.active#v-pickup-code{ display:flex !important; } #app .view.active[id^="v-provider-"]{ display:block !important; } #app .view.active#v-provider-week{ display:flex !important; } .backdrop:not(.active){ display:none !important; opacity:0 !important; pointer-events:none !important; visibility:hidden !important; } .sheet:not(.active){ visibility:hidden !important; pointer-events:none !important; } html,body{height:100%; width:100%; margin:0; padding:0; overflow-x:hidden;} body{ margin:0; padding:0; width:100%; font-family: var(--font-main); font-size:16px; line-height:1.5; color: var(--color-text, #1a1a1a); background:var(--bg); color:var(--text); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: pan-y pinch-zoom; overscroll-behavior-y: none; } body.provider-mode{ overflow-y:hidden; } /* Interaktions-Schutz: Schnelle Taps ohne 300ms-Delay (touch-action: manipulation) [Stabilität] */ .navbtn, #providerNav .navbtn, .prov-card, .status-pill, .func-icon-btn, .power-bar-legend-trigger, #v-provider-cookbook .cookbook-magazine-card, #wizard[data-flow="listing"] .inserat-power-bar .status-pill, #wizard[data-flow="listing"] .inserat-power-bar .func-icon-btn, .inserat-btn-primary, .inserat-btn-secondary, .btn, button[type="button"].cust-chip, .customer-nav .nav-item, .renner-speed-tile, .week-meal-card { touch-action: manipulation; } body:not(.provider-mode) #providerStatusIndicator, body:not(.provider-mode) #statusIndicatorDot { display: none !important; } a{color:inherit} /* App shell: NUR unkritische Gemeinsamkeiten (kein height/overflow für beide) */ .app,#app{ display:flex; flex-direction:column; box-sizing:border-box; overflow-x:hidden; width:100%; margin:0; } .app main,#app main{ display:block; } .app{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px)); } /* ========== NUR ANBIETER (body.provider-mode) – keine Regel hier darf Kunde betreffen ========== */ body.provider-mode .app, body.provider-mode #app{ min-height:100dvh; height:100dvh; max-height:100dvh; overflow:hidden; } body.provider-mode .app main, body.provider-mode #app main{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* ========== NUR KUNDE (body:not(.provider-mode)) – keine Regel hier darf Anbieter betreffen ========== */ body:not(.provider-mode) .app, body:not(.provider-mode) #app{ min-height:100%; min-height:100dvh; margin-top:0; padding-top:0; } body:not(.provider-mode) .app main, body:not(.provider-mode) #app main{ min-height:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; margin-top:0; } body:not(.provider-mode) #v-discover.view.active{ margin-top:0; padding-top:0; min-height:100dvh; display:block !important; background:#fcfcfc !important; } .topbar{ position:sticky; top:0; z-index:10; width:100%; background:rgba(255,255,255,.95); backdrop-filter:saturate(160%) blur(16px); -webkit-backdrop-filter:saturate(160%) blur(16px); border:none; box-shadow:0 4px 20px rgba(0,0,0,0.03); padding-top:env(safe-area-inset-top, 0px); padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); padding-bottom:12px; box-sizing:border-box; } .topbar-inner{width:100%; max-width:100%; margin:0; padding:0; display:flex; align-items:center; gap:10px; box-sizing:border-box;} .header-basket-btn{ position:relative; background:none; border:none; cursor:pointer; padding:8px; transition:transform 0.2s ease, filter 0.3s ease; display:flex; align-items:center; justify-content:center; } .header-basket-btn:hover{ transform:scale(1.1); } .header-basket-btn:active{ transform:scale(0.95); } .header-basket-btn.bounce{ animation:basketBounce 0.5s ease; } .header-basket-btn.glow{ filter:drop-shadow(0 0 12px rgba(255,215,0,0.8)); } @keyframes basketBounce{ 0%, 100%{transform:scale(1);} 50%{transform:scale(1.2);} } .header-basket-badge{ position:absolute; top:4px; right:4px; width:18px; height:18px; background:#FFD700; color:#2D3436; border-radius:50%; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.15); } .brand{ display:flex; align-items:center; gap:10px; min-width:0; cursor:pointer; transition:opacity 0.2s ease; } .brand:hover{ opacity:0.8; } .brand:active{ opacity:0.6; } .brand-badge{ width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,var(--brand),var(--brand2)); box-shadow:0 8px 18px rgba(0,0,0,.16); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto; } .brand-badge img{width:100%; height:100%; object-fit:cover; display:block} .brand-name{font-weight:900; letter-spacing:.06em; font-size:20px; white-space:nowrap} .spacer{flex:1} .chiprow{ max-width:100%; width:100%; margin:0; padding:6px 16px 8px; display:flex; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch; } /* Verzehrart-Buttons: Active-State mit gelber Hintergrundfarbe */ .verzehrmodus-checkout-btn.active, .verzehrmodus-cart-btn.active{ background:#FFD700 !important; border-color:#FFD700 !important; color:#2D3436 !important; font-weight:900 !important; } .verzehrmodus-checkout-btn:not(.active), .verzehrmodus-cart-btn:not(.active){ background:#fff !important; border-color:#e7e1d5 !important; color:#666 !important; font-weight:600 !important; } .verzehrmodus-checkout-btn:hover:not(.active), .verzehrmodus-cart-btn:hover:not(.active){ border-color:#FFD700 !important; background:#fffbf0 !important; } /* Pickup Card Styles – TGTG Tabula Rasa [cite: Plan Phase 3] */ .pickup-card { background: #fff; border: none; border-bottom: var(--tgtg-divider, 1px solid rgba(0,0,0,0.06)); border-radius: var(--tgtg-img-radius, 16px); padding: 16px; position: relative; overflow: hidden; transition: all 0.2s; cursor: pointer; box-shadow: var(--tgtg-shadow-minimal, 0 1px 3px rgba(0,0,0,0.04)); } .pickup-card:active { transform: scale(0.98); } .pickup-card.status-done { opacity: 0.6; background: #f8f7f2; } .pickup-card.status-paid { border-color: rgba(34, 197, 94, 0.3); } .pickup-card.just-done { animation: pickupDoneAnim 0.4s ease forwards; } @keyframes pickupDoneAnim { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 1; background: #2ecc71; } 100% { transform: scale(0.95); opacity: 0; } } .chip{ flex:0 0 auto; border:1px solid var(--border); background:#f8f7f3; padding:10px 16px; border-radius:999px; font-size:14px; font-weight:800; color:#222; cursor:pointer; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.06); display:inline-flex; align-items:center; gap:6px; } .chip.active{ border-color:rgba(31,157,85,.45); background:rgba(31,157,85,.12); box-shadow:0 10px 22px rgba(31,157,85,.12) } .pickup-group{ border:1px solid var(--border); background:#fff; border-radius:14px; padding:10px; box-shadow:0 6px 14px rgba(0,0,0,.06); } .pickup-group + .pickup-group{margin-top:10px} .pickup-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:900} .pickup-sub{font-size:12px; color:var(--muted)} .code-chip{ display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:#fff; font-size:12px; font-weight:900; margin:4px 6px 0 0; box-shadow:0 6px 14px rgba(0,0,0,.06); } .code-chip.done{background:rgba(31,157,85,.12); border-color:rgba(31,157,85,.4); color:#1f9d55; text-decoration:line-through} /* Abholnummer Card Animation (Pulse/Shimmer) */ /* Match-Screen Animationen */ @keyframes scaleIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes slideUp { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes abholnummerPulse { 0%, 100% { transform: scale(1); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); } 50% { transform: scale(1.01); box-shadow: 0 25px 30px -5px rgba(255,204,0,0.15), 0 15px 15px -5px rgba(255,204,0,0.08); } } @keyframes abholnummerShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .abholnummer-card-pulse { animation: abholnummerPulse 2s ease-in-out infinite; } .abholnummer-card-pulse::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: abholnummerShimmer 3s ease-in-out infinite; } .dayrow{ max-width:100%; width:100%; margin:0; padding:0 16px 12px; display:flex; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch; } .day{ flex:0 0 auto; border:none; background:#fff; padding:12px 16px; border-radius:999px; font-size:14px; font-weight:900; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.06); border:1px solid var(--border); } .day.active{background:rgba(242,183,5,.14); border-color:rgba(242,183,5,.55)} body:not(.provider-mode) main{ width:100%; max-width:100%; margin:0; padding:0; box-sizing:border-box; } .grid{display:grid; grid-template-columns:1fr; gap:12px} @media (min-width:820px){ .grid{grid-template-columns:1fr 1fr} } .card{ background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.08); cursor:pointer; position:relative; margin-bottom:16px; } /* Polaroid-Discovery: Weißer Rand – schmaler an den Seiten, breiter unter dem Text */ .card.polaroid{ background:#FFFFFF; border:none; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,0.08); padding:0 6px 20px 6px; /* schmaler seitlich, breiter unten */ display:flex; flex-direction:column; align-items:stretch; width:100%; max-width:100%; margin:0 auto; overflow:hidden; background:linear-gradient(135deg, #f5f1eb 0%, #ede8e0 100%); box-sizing:border-box; } @media (max-width: 480px) { .card.polaroid { padding:0 5px 16px 5px; } } .card.playful{ border-color:rgba(242,183,5,.38); box-shadow:0 12px 26px rgba(242,183,5,.18); } .card.playful .body{ background:linear-gradient(180deg,#fff, #fff4e6); } .card.playful .price{color:#b26b00} .card.playful .tag{background:rgba(242,183,5,.25)} .img{aspect-ratio:16/9; height:auto; min-height:120px; max-height:140px; background:#eee; position:relative; overflow:hidden; border-radius:20px 20px 0 0} .img img{width:100%; height:100%; object-fit:cover; display:block} /* Polaroid: Foto nimmt exakt 50% der Kachelhöhe ein */ .card.polaroid .img{ width:100%; height:50%; /* Exakt 50% der Kartenhöhe */ min-height:140px; max-height:140px; border-radius:0; position:relative; overflow:hidden; flex-shrink:0; } /* Badge-Overlay oben links auf dem Bild */ .badge-overlay { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; z-index: 10; } /* Der einzelne kreisrunde Badge-Button */ .badge-icon { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.15); border: 1px solid rgba(255, 255, 255, 0.3); } /* Bild innerhalb des Badges */ .badge-icon img { width: 18px; height: 18px; object-fit: contain; } /* 3 Säulen: Modern Badges (Icon + Text) */ .pillar-bars { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.05); } .pillar-badge { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.4; filter: grayscale(1); transition: all 0.3s ease; } .pillar-badge.active { opacity: 1; filter: grayscale(0); } .pillar-icon-circle { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f0f0f0; color: #666; font-size: 14px; transition: all 0.3s; } .pillar-badge.active.green .pillar-icon-circle { background: rgba(39, 174, 96, 0.15); color: #27AE60; } .pillar-badge.active.yellow .pillar-icon-circle { background: rgba(255, 215, 0, 0.2); color: #1a1a1a; } .pillar-badge.active.blue .pillar-icon-circle { background: rgba(15, 23, 42, 0.12); color: #121826; } .pillar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #999; text-align: center; } .pillar-badge.active .pillar-label { color: #333; } /* Detailseite Gericht: 3 Säulen als weiße Pills, Labels 10px Bold Uppercase [High-End] */ #sheet .detail-power-bar.detail-power-bar-pills { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px 20px; border-bottom: 1px solid rgba(0,0,0,0.04); } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 72px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color: transparent; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile:active { transform: scale(0.96); } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile.active .detail-pillar-emoji { opacity: 1; filter: none; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile:not(.active) .detail-pillar-emoji { opacity: 0.3; filter: grayscale(1); } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile:not(.active) .detail-pillar-label { color: #94a3b8; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-emoji { font-size: 22px; line-height: 1; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #1a1a1a; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile.active[data-pillar="vorort"] .detail-pillar-emoji { color: #c9a227; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile.active[data-pillar="mehrweg"] .detail-pillar-emoji { color: #0d9668; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile.active[data-pillar="abholnummer"] .detail-pillar-emoji { color: #d4a012; } #sheet .detail-power-bar.detail-power-bar-pills .detail-pillar-tile.active[data-pillar="abholnummer"] .detail-pillar-label { color: #1a1a1a; } /* Legacy: alte detail-pillar-btn falls noch irgendwo verwendet */ #sheet .detail-power-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px 20px; border-bottom: 1px solid rgba(0,0,0,0.04); } #sheet .detail-power-bar .detail-pillar-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.04); cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; -webkit-tap-highlight-color: transparent; } #sheet .detail-power-bar .detail-pillar-btn.active { background: #fff; border-color: #10b981; box-shadow: 0 2px 10px rgba(16,185,129,0.3); color: #1a1a1a; } #sheet .detail-power-bar .detail-pillar-btn:not(.active) { opacity: 0.6; filter: grayscale(0.4); } #sheet .detail-power-bar .detail-pillar-btn:active { transform: scale(0.96); } #sheet .detail-power-bar .detail-legend-btn { min-width: 36px; min-height: 36px; width: 36px; height: 36px; border: none; background: transparent; color: #94a3b8; font-size: 14px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } /* Logistik-Cards: weiß, weicher Schatten, Tap = Routenplanung */ .sheet-detail-logistics button { background: #fff !important; border: none !important; border-radius: 14px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; font-size: 14px !important; font-weight: 700 !important; color: #1a1a1a !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s !important; } .sheet-detail-logistics button:active { transform: scale(0.98); } /* Allergene-Pills */ .sheet-detail-allergens .allergen-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 8px; background: #F2F2F2; font-size: 12px; font-weight: 800; color: #475569; } .card.polaroid .img img{ width:100%; height:100%; object-fit:cover; display:block; } .provider-logo{ display:flex; align-items:center; gap:8px; padding:12px 14px 0; } .plogo{ width:28px; height:28px; border-radius:8px; background:#f2f2f2; overflow:hidden; border:1px solid var(--border); flex:0 0 auto; } .plogo img{width:100%; height:100%; object-fit:cover; display:block} .pname{font-size:14px; font-weight:900; color:#222; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.3} .body{padding:16px} .title{font-weight: var(--weight-hero); font-size: var(--size-list-title); margin:0; line-height:1.3} .sub{margin:4px 0 0; color:#444; font-size:14px; line-height:1.4} /* Refactored Card Styles - weniger Text, mehr Icons */ .card-heart{ position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; box-shadow:0 2px 8px rgba(0,0,0,.1); } .card-heart:hover{background:rgba(255,255,255,1); transform:scale(1.05)} .card-heart.on{background:rgba(255,204,0,.2)} .card-heart i{width:18px; height:18px; color:#999} .card-heart.on i{color:#e74c3c; fill:currentColor} .card-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; } .card-title{ font-weight:900; font-size:17px; margin:0; line-height:1.3; flex:1; min-width:0; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#111; } .card-provider{ font-size:13px; color:#666; margin:0 0 8px; line-height:1.3; font-weight:500; display:flex; align-items:center; gap:6px; } .card-provider .ico-inline{ width:16px; height:16px; flex-shrink:0; color:var(--muted); } .card-provider .ico-inline svg{ width:16px; height:16px; } .card-price{ font-size:24px; font-weight:950; color:var(--brand); margin:0 0 10px; line-height:1; } .card-info-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; align-items:center; } .card-info-badge{ display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; color:#666; white-space:nowrap; } .card-info-badge .ico-inline{ width:16px; height:16px; flex-shrink:0; color:var(--muted); } .card-info-badge .ico-inline svg{ width:16px; height:16px; } .card-status-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; } .card-status-badge{ display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:600; background:rgba(0,0,0,.06); color:#666; white-space:nowrap; } .card-status-badge .ico-inline{ width:14px; height:14px; flex-shrink:0; } .card-status-badge .ico-inline svg{ width:14px; height:14px; } /* Abholnummer Badge: leicht hervorgehoben (Markenfarbe Gelb) */ .card-status-badge.code{ background:rgba(255,204,0,.2); color:#b8860b; font-weight:700; } .card-status-badge.code .ico-inline{color:#b8860b} /* Badge-Styles Abholnummer */ .card-status-badge.dine{ background:rgba(31,157,85,.12); color:#1f9d55; } .card-status-badge.dine .ico-inline{color:#1f9d55} /* Zum Mitnehmen Badge: neutrale weiche Füllung */ .card-status-badge.pickup{ background:rgba(0,0,0,.06); color:#666; } /* Konzept-Icons: Mehrweg, Essen vor Ort, Abholnummer (einheitliche Größe) */ .concept-icon{ width:22px; height:22px; object-fit:contain; vertical-align:middle; flex-shrink:0; } .concept-icon-lg{ width:28px; height:28px; object-fit:contain; vertical-align:middle; flex-shrink:0; } .concept-icon-xl{ width:36px; height:36px; object-fit:contain; vertical-align:middle; flex-shrink:0; } .meta{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:12px} .price{font-weight:950; font-size:18px; color:#0f5c4c} .right{ text-align:right; font-size:13px; color:var(--muted); line-height:1.4 } .meta-line{display:flex; align-items:center; gap:6px; justify-content:flex-end} .tag{display:inline-block; margin-top:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:900; background:rgba(242,183,5,.18)} .badge{ position:absolute; top:12px; left:12px; background:rgba(17,17,17,.72); color:#fff; font-size:12px; font-weight:900; padding:6px 10px; border-radius:999px; box-shadow:0 10px 22px rgba(0,0,0,.18); line-height:1.3; } .badge.code{left:auto; right:12px; background:rgba(31,157,85,.9)} .badge.dine{background:rgba(242,183,5,.9); color:#111} .badge.inactive{background:rgba(0,0,0,.45)} .heart{ position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:999px; border:none; cursor:pointer; background:rgba(255,255,255,.92); box-shadow:0 10px 22px rgba(0,0,0,.16); font-size:16px; color:#bbb; display:flex; align-items:center; justify-content:center; } .heart.on{color:var(--danger)} /* Bottom nav - Glassmorphism Mittagio-Bar */ .nav-badge{ position:absolute; top:4px; right:8px; width:18px; height:18px; background:#FFD700; color:#2D3436; border-radius:50%; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; border:2px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,0.15); z-index:10; } .navbtn.bounce{ animation:basketBounce 0.5s ease; } .navbtn.glow{ filter:drop-shadow(0 0 12px rgba(255,215,0,0.8)); } @keyframes basketBounce{ 0%, 100%{transform:scale(1);} 50%{transform:scale(1.15);} } .bottom{ position:fixed; left:0; right:0; bottom:0; z-index:20; height:calc(60px + env(safe-area-inset-bottom, 20px)); padding-bottom:env(safe-area-inset-bottom, 20px); padding-left:env(safe-area-inset-left, 0); padding-right:env(safe-area-inset-right, 0); background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid rgba(231,225,213,.3); display:flex; box-shadow:0 -4px 20px rgba(0,0,0,.05); } .navbtn{ flex:1; border:none; background:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#777; font-size:11px; font-weight:600; padding:8px 4px; transition:color .2s; position:relative; -webkit-tap-highlight-color: transparent; } .navbtn * { pointer-events: none; } .navbtn .ico{font-size:22px; display:inline-flex; align-items:center; justify-content:center} .navbtn .ico svg{width:22px; height:22px; stroke-width:2} /* Bottom Navigation Icons: 22-24px */ .navbtn.active{color:var(--brand)} .navbtn.active .ico svg{color:var(--brand); stroke:var(--brand)} .navbtn.active{color:var(--brand); font-weight:900} /* Airbnb-Style: Kunde Tab-Bar – flach, weiß, graue Icons, aktiv gelb [cite: 2026-02-20] */ body:not(.provider-mode) #customerNav{ background:#fff !important; border: none !important; box-shadow: none !important; backdrop-filter:none; -webkit-backdrop-filter:none; } body:not(.provider-mode) #customerNav .navbtn{ color:#94a3b8; } body:not(.provider-mode) #customerNav .navbtn i, body:not(.provider-mode) #customerNav .navbtn svg{ color:#94a3b8; stroke:#94a3b8; } body:not(.provider-mode) #customerNav .navbtn.active{ color:var(--brand); } body:not(.provider-mode) #customerNav .navbtn.active i, body:not(.provider-mode) #customerNav .navbtn.active svg, body:not(.provider-mode) #customerNav .navbtn.active .ico svg{ color:var(--brand) !important; stroke:var(--brand) !important; } .navbtn .badge-notification{ position:absolute; top:8px; right:calc(50% - 20px); width:8px; height:8px; border-radius:50%; background:var(--brand); border:2px solid rgba(255,255,255,.85); } /* Views */ /* Confetti Animation */ @keyframes confetti-fall { 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } } .confetti { position: absolute; width: 10px; height: 10px; background: #FFD700; top: -20px; z-index: 0; pointer-events: none; animation: confetti-fall 3s linear forwards; } /* Schritt 3: Konfetti hinter Karte & Footer – Bedienelemente immer klickbar [cite: 2026-02-21] */ #inseratSuccessSheet .inserat-success-confetti-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; } #inseratSuccessSheet .inserat-success-sheet-body, #inseratSuccessSheet .inserat-success-footer { position: relative; z-index: 10; } @keyframes success-checkmark-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(16,185,129,0.25); } 50% { transform: scale(1.05); box-shadow: 0 12px 32px rgba(16,185,129,0.35); } } #inseratSuccessSheet .inserat-success-checkmark { animation: success-checkmark-pulse 1.5s ease-in-out infinite; } .week-activation-success-checkmark { animation: success-checkmark-pulse 1.5s ease-in-out infinite; } .success-card-preview { background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.04); margin: 20px 0; text-align: left; } .success-card-img { width: 100%; height: 120px; object-fit: cover; } .success-card-body { padding: 16px; } .view.active{display:block} /* Abholnummer-Ansicht benötigt flex-Layout */ .view.active#v-pickup-code{display:flex !important} /* Kundenseiten: Volle Breite, weiße Leinwand – kein Beige, kein seitliches Padding [cite: Tabula Rasa] */ .customer-view{ background:#fff; min-height:100vh; padding:0; padding-bottom:calc(100px + env(safe-area-inset-bottom, 0px)); box-sizing:border-box; width:100%; max-width:100%; } .customer-view .panel{ background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,0.06); border-radius:20px; box-shadow:0 4px 16px rgba(0,0,0,.06); } .customer-view .section-title{ font-size: var(--section-title-size); font-weight: var(--section-title-weight); color: var(--body-text-color); } .customer-view .hint{ color: var(--header-subtitle-color); } /* ========== TGTG-Airbnb Base (Provider nutzt weiterhin Karten) ========== */ .tgtg-list-item{ display: flex; flex-direction: row; align-items: stretch; gap: 16px; background: #fff; border-bottom: var(--tgtg-divider); padding: var(--tgtg-spacing) 0; margin-bottom: 0; box-shadow: none; } .tgtg-list-item:last-child{ border-bottom: none; } .tgtg-list-item-img-wrap{ position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 4 / 3; min-height: 200px; overflow: hidden; border-radius: var(--tgtg-img-radius); background: #f1f5f9; } .tgtg-list-item-img-wrap.tgtg-list-item-img-compact{ width: var(--list-photo-size); min-width: var(--list-photo-size); height: var(--list-photo-size); min-height: var(--list-photo-size); aspect-ratio: 1; border-radius: var(--list-photo-radius); overflow: hidden; } .tgtg-list-item-img-wrap img{ width: 100%; height: 100%; object-fit: cover; display: block; } .tgtg-list-item-body{ padding: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; } .tgtg-list-item-title{ font-family: var(--font-main); font-size: var(--size-list-title); font-weight: var(--weight-bold); color: var(--color-title); margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.02em; } .tgtg-list-item-meta{ font-size: 14px; font-weight: 600; color: #64748b; margin: 0 0 8px; } .tgtg-list-item-pillars{ display: flex; gap: 6px; margin-bottom: 8px; font-size: 14px; } .tgtg-list-item-pill{ padding: 4px 8px; border-radius: 999px; background: transparent; color: #64748b; border: none; } .tgtg-list-item-pill.active{ color: var(--tgtg-title-color); } .tgtg-list-item-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .tgtg-list-item-price{ font-size: 16px; font-weight: 900; color: var(--brand); } .tgtg-meta-chip{ font-size: 12px; color: #64748b; } .tgtg-list-item-cta-row .dish-card-cta{ padding: 10px 16px; border-radius: 999px; font-weight: 800; background: var(--brand); border: none; color: #0f172a; font-size: 14px; } /* offerCard mit tgtg-flat: keine Schatten, Inset-Divider */ .card.tgtg-flat{ box-shadow: none !important; border: none !important; } .card.tgtg-flat.polaroid, .card.tgtg-flat.playful{ border-bottom: var(--tgtg-divider) !important; } /* Topbar in Kundekontext: gleicher warmer Ton wie Seite 1 */ .topbar.customer-context{ background:rgba(232,224,214,0.92); border-bottom-color:rgba(0,0,0,0.08); } /* Provider-FAB und Abholnummer-Overlay in Kundenansicht nie anzeigen (auch beim Runterscrollen) */ body:not(.provider-mode) #fabProviderAddOffer, body:not(.provider-mode) #fabProviderAddOfferLabel { display: none !important; } #fabProviderAddOfferLabel { display: none !important; } /* Sheets / modals – Safe-Area für moderne Handys (S25, iPhone, Pixel) */ .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s; z-index:2000} .backdrop.active{opacity:1; pointer-events:auto} /* Modals: nur sichtbar wenn .active – verhindert leeren Screen / blockierte Klicks (z. B. Kochbuch tapbar) */ #quickPostBd:not(.active), #publishFeeBd:not(.active), #inseratSuccessBd:not(.active), #saveSuccessSheetBd:not(.active), #abholnummerExplainBd:not(.active), #weekActivationSuccessBd:not(.active){ display:none !important; opacity:0 !important; pointer-events:none !important; visibility:hidden !important; } #pricingFairnessBd:not(.active){ display:none !important; opacity:0 !important; pointer-events:none !important; } #cookbookLiveSheetBd:not(.active), #cookbookWeekSheetBd:not(.cookbook-week-bd-visible){ display:none !important; opacity:0 !important; pointer-events:none !important; visibility:hidden !important; } /* Preisübersicht als Bottom-Sheet (S25): von unten hochgleitend */ #pricingFairnessOverlay { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; max-height: 85vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.35s ease-out, visibility 0s linear 0.35s; pointer-events: none; visibility: hidden; border-radius: 20px 20px 0 0; } #pricingFairnessOverlay.active { transform: translateY(0); transition: transform 0.35s ease-out; pointer-events: auto; visibility: visible; } #quickPostSheet:not(.active), #publishFeeSheet:not(.active), #inseratSuccessSheet:not(.active), #saveSuccessSheet:not(.active), #abholnummerExplainSheet:not(.active){ visibility:hidden !important; pointer-events:none !important; } .sheet{ position:fixed; left:0; right:0; bottom:-120%; z-index:2001; background:#fff; border-radius:22px 22px 0 0; box-shadow:var(--shadow2); transition:bottom .28s ease; max-height:92vh; overflow:auto; padding-left:env(safe-area-inset-left, 0); padding-right:env(safe-area-inset-right, 0); padding-bottom:env(safe-area-inset-bottom, 0); } .sheet.active{bottom:0} #publishFeeSheet.active, #saveSuccessSheet.active, #abholnummerExplainSheet.active{ bottom:0 !important; visibility:visible !important; } #publishFeeBd{ background: rgba(0,0,0,0.45) !important; backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important; z-index: 2000 !important; } #publishFeeSheet{ width: 100% !important; max-width: 100% !important; border-radius: 24px 24px 0 0 !important; background: #ffffff !important; overflow: hidden !important; z-index: 2001 !important; } .abholnummer-explain-hero{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:0; scrollbar-width:none; } .abholnummer-explain-hero::-webkit-scrollbar{ display:none; } .abholnummer-explain-slide{ flex:0 0 100%; min-width:100%; scroll-snap-align:start; scroll-snap-stop:always; padding:0 24px 20px; box-sizing:border-box; } .abholnummer-explain-slide-img{ width:100%; aspect-ratio:4/3; border-radius:16px; object-fit:cover; background:#f1f3f5; } .abholnummer-explain-slide-body{ padding:16px 0; } .abholnummer-explain-slide-title{ margin:0 0 8px; font-size:20px; font-weight:900; color:#1a1a1a; } .abholnummer-explain-slide-sub{ margin:0; font-size:15px; color:#64748b; line-height:1.5; } .abholnummer-explain-dots{ display:flex; justify-content:center; gap:8px; padding:12px 0 20px; } .abholnummer-explain-dot{ width:8px; height:8px; border-radius:50%; background:#cbd5e1; border:none; padding:0; cursor:pointer; transition:background 0.2s; } .abholnummer-explain-dot.active{ background:#FFD700; } .handle{width:46px; height:5px; background:#ddd; border-radius:999px; margin:10px auto 6px} .sheet-img{height:260px; background:#eee} .sheet-img img{width:100%; height:100%; object-fit:cover; display:block} .sheet-body{padding:12px 14px 18px} .row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-top:1px solid #eee; font-size:15px; line-height:1.4} .btn{ width:100%; border:none; cursor:pointer; border-radius:999px; padding:16px 20px; font-weight:950; font-size:16px; background:var(--brand); color:#111; line-height:1.4; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; } .btn:disabled{opacity:.6; cursor:not-allowed} .btn.secondary{background:#fff; border:1px solid var(--border)} .btn.ghost{background:#f8f7f3; border:1px solid var(--border)} .mini{font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5} /* Primary CTA (Yellow, Dark Text, 56-64px) */ .btn-primary{ width:100%; border:none; cursor:pointer; border-radius:999px; padding:16px 20px; font-weight:950; font-size:16px; background:#f2b705; color:#111; line-height:1.4; display:flex; align-items:center; justify-content:center; gap:8px; min-height:56px; max-height:64px; transition: transform 0.1s cubic-bezier(0.4,0,0.2,1), box-shadow 0.1s ease, background 0.15s; } .btn-primary:hover{ box-shadow:0 10px 28px rgba(242,183,5,0.35); transform:translateY(-1px); } .btn-primary:active{ background:#e6b800; transform:scale(0.96); box-shadow:none; filter:brightness(0.95); } .btn-primary:disabled{ opacity:.6; cursor:not-allowed; background:#f2b705; } .btn-primary.loading{ opacity:.7; cursor:wait; } .btn-primary.success{ background:#2e7d32; color:#fff; } .card-actions{display:flex; gap:8px; margin-top:12px} .card-action{ flex:1; padding:0 16px; min-height:44px; border-radius:12px; border:none; background:#fff; font-weight:900; font-size:15px; cursor:pointer; transition:transform .1s, background .15s; display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; } .card-action:active{transform:scale(.97)} .card-action.primary{ background:var(--brand); color:#111; border:1px solid var(--brand); min-height:44px; } .card-action.primary:active{background:#e6b800} .card-action.ghost{background:#f8f7f3; border:1px solid var(--border)} .card-action:disabled{opacity:.5; cursor:not-allowed; background:#f5f5f5} /* Profile cards */ .panel{background:#fff; border:none; border-radius:18px; box-shadow:0 4px 20px rgba(0,0,0,0.03); padding:var(--card-padding, 20px); margin-bottom:16px} .panel h3{margin:0 0 10px; font-size:18px; font-weight:900; line-height:1.3} .section-title{font-weight:900; font-size:20px; margin:12px 0 8px; line-height:1.3} .rowlist{display:flex; flex-direction:column; gap:8px} .rowbtn{ width:100%; border:1px solid var(--border); background:#fff; cursor:pointer; border-radius:14px; padding:12px; text-align:left; font-weight:900; display:flex; align-items:center; justify-content:space-between; gap:12px; } .rowbtn-left{display:flex; align-items:center; gap:10px; min-width:0} .rowbtn-ico{ width:36px; height:36px; border-radius:10px; flex:0 0 auto; border:1px solid var(--border); background:#f8f7f3; display:flex; align-items:center; justify-content:center; } .rowbtn-ico svg{width:16px; height:16px} .rowbtn-text{min-width:0} .rowbtn-text span{display:block; font-weight:600; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.4} .rowbtn .chev{font-size:20px; color:var(--muted)} .rowgroup-title{font-size:13px; font-weight:900; color:var(--muted); margin-top:8px; line-height:1.4} .profile-head{display:flex; align-items:center; gap:12px} .profile-head .plogo{width:56px; height:56px; border-radius:50%} .profile-meta{display:flex; flex-direction:column; gap:4px} .profile-chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; background:#fff} .profile-actions{margin-top:10px} .profile-actions .btn{width:auto; margin-top:0} .row-group{margin-top:12px} .row-group .rowgroup-title{margin:0 0 8px} .row-muted{font-size:12px; color:var(--muted)} .tabrow{display:flex; gap:8px; flex-wrap:wrap} .tabrow .ans{font-size:12px; padding:8px 10px} /* Kochbuch: MASTER-SPEC MagazinKochbuch – nur Pills, Magazin-Karte, Action-Bar (siehe docs/KOCHBUCH_KONZEPT.md) */ #v-provider-cookbook .cookbook-action-bar{ width:100%; max-width:100%; margin:0; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); box-sizing:border-box; } #v-provider-cookbook .cookbook-bar-btn{ min-height:52px; border-radius:20px; font-size:10px; font-weight:800; letter-spacing:0.06em; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; border:none; transition:transform 0.12s; flex:1; min-width:0; } #v-provider-cookbook .cookbook-bar-btn:active{ transform:scale(0.97); } /* Kochbuch Magazin-Karte: feste Größe wie Magazin – keine Größenänderung beim Swipen/Blättern */ #v-provider-cookbook .cookbook-magazine-card{ transition:box-shadow 0.2s ease; min-height:420px; } #v-provider-cookbook .cookbook-magazine-card .cookbook-magazine-img-wrap{ height:240px; min-height:240px; flex-shrink:0; overflow:hidden; position:relative; } #v-provider-cookbook .cookbook-magazine-card .cookbook-magazine-img-wrap img{ object-position:center 20px; } #v-provider-cookbook .cookbook-magazine-dots{ display:flex; justify-content:center; gap:6px; margin-top:12px; flex-shrink:0; } #v-provider-cookbook .cookbook-magazine-dots .cookbook-dot{ width:8px; height:8px; border-radius:50%; background:rgba(0,0,0,0.15); transition:background 0.2s; } #v-provider-cookbook .cookbook-magazine-dots .cookbook-dot.on{ background:#10b981; } #v-provider-cookbook .cookbook-swipe-hint{ font-size:12px; color:#94a3b8; text-align:center; margin-top:8px; padding:6px 12px; } #v-provider-cookbook .cookbook-magazine-card{ box-shadow: var(--tgtg-shadow-minimal, 0 1px 3px rgba(0,0,0,0.04)); border-bottom: var(--tgtg-divider, 1px solid rgba(0,0,0,0.06)); } #v-provider-cookbook #cookbookMagazine, #v-provider-cookbook #cookbookMagazine .cookbook-magazine-card{ pointer-events: auto; } #v-provider-cookbook .cookbook-magazine-card .cookbook-magazine-img-wrap{ position:relative; } #v-provider-cookbook .cookbook-magazine-meta{ padding:6px 16px 10px; background:#f8fafc; border-bottom:1px solid rgba(0,0,0,0.04); font-size:12px; color:#94a3b8; line-height:1.3; flex-shrink:0; } #v-provider-cookbook .cookbook-card-price-input.cookbook-price-highlight{ border-bottom-color:#FACC15; box-shadow:0 0 0 2px rgba(250,204,21,0.35); animation:cookbook-price-pulse 1.5s ease-in-out infinite; } @keyframes cookbook-price-pulse{ 0%, 100%{ box-shadow:0 0 0 2px rgba(250,204,21,0.35); } 50%{ box-shadow:0 0 0 4px rgba(250,204,21,0.5); } } #v-provider-cookbook .cookbook-bar-secondary{ background:rgba(255,255,255,0.5); color:#475569; border:2px solid rgba(255,255,255,0.6); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } #v-provider-cookbook .cookbook-bar-primary{ background:#FACC15; color:#1a1a1a; box-shadow:0 4px 16px rgba(250,204,21,0.4); } /* Kochbuch: Kategorie-Pills wie Kundenseite (Discover) – kleiner, einheitliches Layout */ /* Kochbuch Pills: wie Dashboard (einheitlich) [cite: REFACTOR KOCHBUCH 2026-02-23] */ #v-provider-cookbook .cookbook-category-pills{ display:flex; gap:8px; overflow-x:auto; padding:8px max(20px, env(safe-area-inset-left)) 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:x proximity; } #v-provider-cookbook .cookbook-category-pills::-webkit-scrollbar{ display:none; } #v-provider-cookbook .cookbook-category-pills .cookbook-cat-pill{ flex:0 0 auto; scroll-snap-align:center; min-height:40px; padding:8px 16px; border-radius:20px; font-size:14px; font-weight:700; border:none; background:#f1f3f5; color:#64748b; cursor:pointer; transition:transform 0.15s, background 0.2s, color 0.2s; display:inline-flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } #v-provider-cookbook .cookbook-category-pills .cookbook-cat-pill:hover{ color:#1a1a1a; } #v-provider-cookbook .cookbook-category-pills .cookbook-cat-pill.on{ background:#0f172a; color:#fff; box-shadow:0 2px 8px rgba(15,23,42,0.25); } #v-provider-cookbook .cookbook-category-pills .cookbook-cat-pill:active{ transform:scale(0.96); } #v-provider-cookbook #btnCookbookEmptyAdd{ background:#FACC15 !important; color:#1a1a1a !important; box-shadow:0 4px 20px rgba(250,204,21,0.4) !important; } /* mt-state-empty: Kochbuch Empty State – sichtbar, ansprechend, nie „doof“ [cite: 2026-03-03] */ #v-provider-cookbook .mt-state-empty{ flex-direction:column; align-items:center; justify-content:center; min-height:280px; padding:48px 24px 80px; text-align:center; } #v-provider-cookbook .mt-state-empty-icon{ width:96px; height:96px; background:rgba(255,255,255,0.8); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,0.6); border-radius:50%; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(0,0,0,0.08); font-size:48px; line-height:1; } #v-provider-cookbook .mt-state-empty-title{ font-size:22px; font-weight:800; color:#1D1D1F; margin:0 0 8px; letter-spacing:-0.02em; } #v-provider-cookbook .mt-state-empty-desc{ color:#64748b; font-size:15px; line-height:1.5; margin:0 0 28px; max-width:280px; } #v-provider-cookbook .mt-state-empty-actions{ display:flex; flex-direction:column; gap:12px; width:100%; max-width:320px; } #v-provider-cookbook .mt-state-empty-btn{ width:100%; min-height:56px; border-radius:20px; font-size:15px; font-weight:800; border:none; cursor:pointer; transition:transform 0.12s, box-shadow 0.2s; -webkit-tap-highlight-color:transparent; } #v-provider-cookbook .mt-state-empty-btn:active{ transform:scale(0.98); } #v-provider-cookbook .mt-state-empty-btn-primary{ background:#1a1a1a; color:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.2); } #v-provider-cookbook .mt-state-empty-btn-secondary{ background:#FACC15; color:#1a1a1a; box-shadow:0 4px 20px rgba(250,204,21,0.4); } /* Cookbook Magic Ingest Overlay – wenn ausgeblendet, keine Blockade [cite: 2026-02-25] */ .cookbook-ingest-overlay{ position:fixed; inset:0; z-index:2000; background:#09090b; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:24px; box-sizing:border-box; transition:opacity 0.3s ease; pointer-events:none; } .cookbook-ingest-flash{ position:absolute; inset:0; background:#fff; opacity:0; transition:opacity 0.1s ease; pointer-events:none; } .cookbook-ingest-bg{ position:absolute; inset:0; background:#09090b; pointer-events:none; } .cookbook-ingest-counter{ position:relative; z-index:2; font-size:clamp(3rem, 12vw, 5rem); font-weight:900; color:#fff; line-height:1; transition:transform 0.2s ease; } .cookbook-ingest-counter.cookbook-ingest-pop{ animation:cookbookIngestPop 0.25s ease-out; } @keyframes cookbookIngestPop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.15); } 100%{ transform:scale(1); } } .cookbook-ingest-progress-wrap{ position:relative; z-index:2; width:80%; max-width:320px; height:6px; background:rgba(255,255,255,0.15); border-radius:999px; overflow:hidden; } .cookbook-ingest-progress-bar{ height:100%; width:0%; background:#fff; border-radius:999px; transition:width 0.05s linear; } .cookbook-week-sheet.cookbook-week-visible{ transform:translateY(0); } #cookbookWeekSheetBd.cookbook-week-bd-visible{ opacity:1; } #cookbookWeekSheet .cookbook-week-day-btn{ animation:cookbookWeekStagger 0.35s ease-out backwards; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(1){ animation-delay:0.03s; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(2){ animation-delay:0.06s; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(3){ animation-delay:0.09s; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(4){ animation-delay:0.12s; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(5){ animation-delay:0.15s; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(6){ animation-delay:0.18s; } #cookbookWeekSheet .cookbook-week-day-btn:nth-child(7){ animation-delay:0.21s; } @keyframes cookbookWeekStagger{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } } .cookbook-victory-overlay{ position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); animation:cookbookVictoryFade 0.2s ease-out; } /* Success-Check: Spring (500, 15) – leichtes Nachfedern */ .cookbook-victory-overlay .check-wrap{ width:72px; height:72px; border-radius:50%; background:rgba(255,222,0,0.2); border:3px solid var(--prov-brand); display:flex; align-items:center; justify-content:center; animation:cookbookVictoryPop 0.48s cubic-bezier(0.34, 1.4, 0.64, 1) forwards; } .cookbook-victory-overlay .check-wrap span{ font-size:40px; color:#1a1a1a; } @keyframes cookbookVictoryPop{ 0%{ transform:scale(0.8); opacity:0.9; } 70%{ transform:scale(1.05); } 100%{ transform:scale(1); opacity:1; } } @keyframes cookbookVictoryFade{ from{ opacity:0; } to{ opacity:1; } } .toast-soft-error{ background:#FF9500 !important; color:#fff !important; } .shake-horizontal{ animation:shakeH 0.3s ease-in-out; } @keyframes shakeH{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-5px); } 40%{ transform:translateX(5px); } 60%{ transform:translateX(-5px); } 80%{ transform:translateX(5px); } } .cart-line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid #eee} .cart-left{font-weight:700; flex:1; min-width:0} .cart-qty{display:flex; align-items:center; gap:6px} .qty-btn{border:1px solid var(--border); background:#fff; border-radius:999px; width:28px; height:28px; cursor:pointer; font-weight:900; transition:all .15s} .qty-btn:active{transform:scale(.95); background:#f5f5f5} .cart-price{font-weight:900; min-width:60px; text-align:right} /* Essenszeit Badge */ .cart-window-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:12px; background:rgba(255,204,0,.1); color:#b8860b; font-size:13px; font-weight:700; margin:8px 0; } .cart-window-badge i{width:16px; height:16px} /* Quick-Time-Chips */ .cart-time-chips{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 12px; } .cart-time-chip{ padding:8px 14px; border-radius:12px; border:1px solid #ddd; background:#fff; font-size:13px; font-weight:600; color:#666; cursor:pointer; transition:all .15s; } .cart-time-chip:active{transform:scale(.96); background:#f5f5f5} .cart-time-chip.selected{ background:var(--brand); color:#000; border-color:var(--brand); } /* Warenkorb leeren Button */ .cart-clear-btn{ display:inline-block; margin-top:12px; padding:8px 16px; border-radius:10px; background:#f5f5f5; color:#666; font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; transition:all .15s; } .cart-clear-btn:hover{background:#eee} .cart-clear-btn:active{transform:scale(.98)} .order-item{border:1px solid var(--border); border-radius:14px; padding:10px; background:#fff; box-shadow:0 6px 14px rgba(0,0,0,.06)} .order-item.done{opacity:.65} .order-item + .order-item{margin-top:10px} .order-top{display:flex; justify-content:space-between; align-items:center; gap:10px} .order-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px} .order-code{ border:1px solid var(--border); background:#fff; border-radius:10px; padding:6px 10px; font-weight:900; cursor:pointer; transition:transform 0.1s ease; } .order-code:active{ transform:scale(0.95); } .status-pill{display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:900; border:1px solid var(--border)} .status-pill.open{background:rgba(242,183,5,.12); color:#b37b00} .status-pill.done{background:rgba(31,157,85,.12); color:#1f9d55} .code-full{font-size:42px; font-weight:950; text-align:center; margin:10px 0} /* Pickup Card (Theken-Ansicht 2.0) – TGTG Tabula Rasa */ .pickup-card{ background:#fff; border-radius: var(--tgtg-img-radius, 16px); box-shadow: var(--tgtg-shadow-minimal, 0 1px 3px rgba(0,0,0,0.04)); position:relative; overflow:hidden; transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); cursor:pointer; border-left:6px solid #e5e7eb; border-bottom: var(--tgtg-divider, 1px solid rgba(0,0,0,0.06)); display:flex; flex-direction:column; min-height:160px; } .pickup-card:active{ transform:scale(0.96); } .pickup-card.status-open{ border-left-color:#FFD700; } .pickup-card.status-paid{ border-left-color:#2ecc71; } /* Bezahlt & Bereit */ .pickup-card.status-done{ opacity:0.6; filter:grayscale(100%); border-left-color:#999; box-shadow:none; background:#f9f9f9; } .pickup-card-header{ padding:16px 16px 0; display:flex; justify-content:space-between; align-items:flex-start; } .pickup-card-code{ font-size: 2.5rem; font-weight: 950; font-family: ui-monospace, monospace; line-height: 1; color: #0f172a; letter-spacing: 0.05em; } .pickup-card-time{ font-size:13px; font-weight:700; color:#666; background:#f0f2f5; padding:4px 8px; border-radius:8px; } .pickup-card-body{ padding:12px 16px 16px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; } .pickup-card-dish{ font-size:16px; font-weight:700; line-height:1.3; color:#333; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pickup-card-customer{ font-size:13px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pickup-card-badge{ position:absolute; top:12px; right:12px; background:#2ecc71; color:#fff; font-size:11px; font-weight:800; padding:4px 8px; border-radius:6px; } /* Animation für Erledigt */ @keyframes check-pop { 0% { transform:scale(0); opacity:0; } 50% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); opacity:1; } } .check-overlay{ position:absolute; inset:0; background:rgba(46,204,113,0.9); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; } .pickup-card.just-done .check-overlay{ opacity:1; } .pickup-card.just-done .check-icon{ animation:check-pop 0.3s ease-out forwards; } .quick-abholnummer{ position:fixed; inset:0; z-index:31; background:linear-gradient(135deg, var(--brand) 0%, #FFD700 100%); display:flex; align-items:center; justify-content:center; transform:translateY(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); padding:20px; } .quick-abholnummer.active{transform:translateY(0)} .quick-abholnummer-close{ position:absolute; top:20px; right:20px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(10px); border:2px solid rgba(255,255,255,.3); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; } .quick-abholnummer-close:hover{background:rgba(255,255,255,.3)} .quick-abholnummer-close i{width:24px; height:24px} .quick-abholnummer-content{ width:100%; max-width:400px; text-align:center; color:#111; } .quick-abholnummer-header{ margin-bottom:40px; } .quick-abholnummer-logo{ width:80px; height:80px; border-radius:20px; background:#fff; border:4px solid rgba(255,255,255,.5); margin:0 auto 16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.2); } .quick-abholnummer-logo img{ width:100%; height:100%; object-fit:cover; } .quick-abholnummer-provider{ font-size:26px; font-weight:900; margin-bottom:10px; line-height:1.3; } .quick-abholnummer-time{ font-size:15px; opacity:.8; font-weight:600; line-height:1.4; } .quick-abholnummer-code{ background:#fff; border-radius:var(--radius); padding:32px 24px; margin-bottom:24px; box-shadow:0 12px 32px rgba(0,0,0,.2); } .quick-abholnummer-code-label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px; } .quick-abholnummer-code-value{ font-size:72px; font-weight:950; line-height:1; color:#111; font-family: var(--font-main); letter-spacing:.05em; } .quick-abholnummer-details{ background:rgba(255,255,255,.3); backdrop-filter:blur(10px); border-radius:var(--radius); padding:20px; margin-bottom:20px; } .quick-abholnummer-detail-item{ margin-bottom:16px; } .quick-abholnummer-detail-item:last-child{margin-bottom:0} .quick-abholnummer-detail-label{ font-size:13px; font-weight:700; opacity:.7; margin-bottom:6px; line-height:1.4; } .quick-abholnummer-detail-value{ font-size:17px; font-weight:900; line-height:1.4; } .quick-abholnummer-status{ font-size:14px; font-weight:700; opacity:.8; line-height:1.4; margin-bottom:24px; } .quick-abholnummer-actions .btn{ background:#fff; color:#111; box-shadow:0 8px 24px rgba(0,0,0,.2); } .print-view{display:none} /* Airbnb Clean Header: Logo-Platzhalter ausblenden [cite: 2026-02-26] */ .app-header .logo-container, .app-header img.logo, .week-header-compact .logo-container, .week-header-compact img.logo { display: none !important; } @media print{ body{background:#fff; color:#000} body > *:not(#printView){display:none !important} #printView{display:block} /* Print-current-page: Wochenplan direkt drucken (Kebab → Drucken) [cite: 2026-02-26] */ body.print-current-page > *{ display:none !important } body.print-current-page #print-only-branding, body.print-current-page #app{ display:block !important } body.print-current-page #printView{ display:none !important } /* Dual-Branding: Oben Anbietername, unten Powered by metallio.de [cite: Print-Branding 2026-02-26] */ body.print-current-page #print-only-branding{ display:block !important; position:relative !important; left:auto !important; width:100% } body.print-current-page .print-header{ text-align:center; margin-bottom:30px; padding-top:20px } body.print-current-page .print-header h1{ font-family:'Montserrat',sans-serif; font-weight:900; text-transform:uppercase; font-size:28px; color:#222; margin:0 } body.print-current-page .print-divider{ height:2px; background:#222; width:100px; margin:10px auto } body.print-current-page .print-footer{ position:fixed; bottom:0; left:0; width:100%; text-align:center; font-size:12px; padding:10px 0; border-top:1px solid #ebebeb; font-family:'Montserrat',sans-serif } body.print-current-page nav, body.print-current-page .bottom-nav, body.print-current-page #weekMagicFab, body.print-current-page .week-kebab-dropdown, body.print-current-page .week-header-compact, body.print-current-page .thekenrenner-scroll, body.print-current-page .no-print, body.print-current-page #providerNavWrap, body.print-current-page #providerNav, body.print-current-page #weekViewFooter, body.print-current-page .topbar, body.print-current-page .kw-action-bar-fixed, body.print-current-page .week-kebab-trigger, body.print-current-page .backdrop{ display:none !important } body.print-current-page .week-plan-container{ width:100%; box-shadow:none !important } #printView .print-card{ border:1px solid #ddd; border-radius:12px; padding:16px; margin-bottom:12px; } #printView h1{margin:0 0 8px; font-size:20px} #printView h2{margin:12px 0 6px; font-size:16px} #printView .print-row{display:flex; justify-content:space-between; gap:12px; margin-top:6px} #printView .print-muted{color:#555; font-size:12px} #printView .print-badge{display:inline-block; padding:4px 8px; border:1px solid #999; border-radius:999px; font-size:11px; font-weight:700} #printView .print-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px} #printView .pickup-code-display{width:120px; height:120px; border:2px solid var(--brand); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#2D3436} } .two{display:grid; grid-template-columns:1fr 1fr; gap:10px} .bigbtn{ border:none; cursor:pointer; border-radius:18px; padding:14px; background:linear-gradient(135deg,rgba(242,183,5,.18),rgba(31,157,85,.12)); border:1px solid var(--border); text-align:left; font-weight:950; } .bigbtn span{display:block; font-weight:700; font-size:12px; color:var(--muted); margin-top:6px} /* Provider app header */ .prov-pill{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); padding:9px 12px; border-radius:999px; font-weight:950; font-size:13px; box-shadow:0 6px 14px rgba(0,0,0,.06); } .prov-pill::after { content: ''; display: none; } .provider-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap} .provider-logo.compact{padding:0} .header-actions{display:flex; gap:8px; flex-wrap:wrap} .header-actions .btn{width:auto; margin-top:0} .snackbar{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#111; color:#fff; border-radius:999px; padding:10px 14px; display:flex; align-items:center; gap:10px; box-shadow:0 10px 24px rgba(0,0,0,.22); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:40; font-size:13px; font-weight:900; } .snackbar.active{opacity:1; pointer-events:auto} .snackbar button{ border:none; background:#fff; color:#111; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:900; cursor:pointer; } /* Wizard */ .wizard{ background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:12px; } .w-top{display:flex; align-items:center; justify-content:space-between; gap:10px} .w-title{font-weight:950} .w-step{font-size:12px; color:var(--muted)} .w-q{margin:12px 0 10px; font-size:18px; font-weight:950; line-height:1.2} .w-help{margin:0 0 10px; color:var(--muted); font-size:13px} .answers{display:flex; flex-wrap:wrap; gap:8px} .ans{ border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:999px; font-weight:950; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.06); display:inline-flex; align-items:center; gap:6px; } .ans.on{border-color:rgba(31,157,85,.4); background:rgba(31,157,85,.10)} .field{width:100%; padding:14px 16px; border-radius:14px; border:1px solid var(--border); font-size:16px; background:#fbfaf7; line-height:1.5} .w-actions{display:flex; gap:10px; margin-top:12px} .w-actions button{flex:1} /* Inseratflow: Über Provider-Bottom-Nav (z-index 999) legen */ /* Wizard/InseratCard: Backdrop unter Sheet, damit Klicks die Karte treffen (nicht Backdrop) */ #wbd.active { z-index: 999 !important; background: radial-gradient(ellipse at center, rgba(254,243,199,0.35) 0%, rgba(251,191,36,0.08) 35%, rgba(0,0,0,0.65) 100%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #wizard.sheet--kitchen.active { z-index: 20000 !important; } /* Inseratsauswahl-Sheet (createFlowBd/createFlowSheet) – Deckelung Thekenrenner [cite: Beweis-Modus 2026-02-26] */ #createFlowBd { z-index: 499; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; background: rgba(0,0,0,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } #createFlowBd.active { opacity: 1; pointer-events: auto; } #createFlowSheet { z-index: 500 !important; position: fixed; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s; background: transparent; } #createFlowSheet.active { pointer-events: auto; opacity: 1; visibility: visible; } #createFlowDashboardContent { display: none; flex-direction: column; position: relative; width: 100%; max-height: 85vh; min-height: 260px; background: #fff; border-radius: 24px 24px 0 0; overflow-y: auto; padding: 20px 20px 0; padding-bottom: max(80px, env(safe-area-inset-bottom)); pointer-events: auto; } #createFlowDashboardContent .sheet-header { padding: 0 0 16px; text-align: center; } #createFlowDashboardContent .sheet-header h3 { margin: 0; font-size: 20px; font-weight: 900; color: #0f172a; } #createFlowWeekContent { display: none; flex-direction: column; align-items: center; justify-content: center; flex: 1; min-height: 0; pointer-events: auto; } #createFlowSheet .ghost-options-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; pointer-events: auto; } .ghost-option { font-size: 28px; font-weight: 800; color: white; margin: 30px 0; text-align: center; text-shadow: 0 0 20px rgba(255,255,255,0.4); cursor: pointer; transition: transform 0.3s, opacity 0.3s; animation: ghost-float 3s ease-in-out infinite; -webkit-tap-highlight-color: transparent; } .ghost-option:nth-child(1) { animation-delay: 0s; } .ghost-option:nth-child(2) { animation-delay: 0.2s; } .ghost-option:nth-child(3) { animation-delay: 0.4s; } .ghost-option:active { transform: scale(0.95); } .ghost-option.ghost-dissolve { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } @keyframes ghost-float { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } } #createFlowSheet .create-flow-footer-ghost { position: relative; bottom: auto; left: auto; right: auto; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); padding: 12px 24px calc(12px + env(safe-area-inset-bottom)) 24px; display: flex; gap: 12px; justify-content: center; pointer-events: auto; flex-shrink: 0; } #createFlowSheet .create-flow-footer-ghost .nav-btn-primary { background: #222222; color: #fff; height: 48px; min-height: 48px; padding: 0 24px; border-radius: 8px; font-weight: 700; font-size: 16px; border: none; cursor: pointer; flex: 1; max-width: 180px; } /* SYSTEM FOOTER – bündig S25-Rand, 2 massive schwarze Buttons gleich groß [cite: 2026-02-21] */ .system-bottom-nav { position: relative; bottom: auto; left: 0; right: 0; width: 100%; background: #fff; border-top: 1px solid #f1f5f9; padding: 12px 24px calc(12px + env(safe-area-inset-bottom)) 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 !important; border-radius: 0 !important; flex-shrink: 0; z-index: 10; } .system-bottom-nav .nav-btn-primary { background: #222222; color: #ffffff; height: 48px; min-height: 48px; padding: 0 24px; border-radius: 8px; font-weight: 700; font-size: 16px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; transition: transform 0.1s, opacity 0.2s; -webkit-tap-highlight-color: transparent; } .system-bottom-nav .nav-btn-primary:active { transform: scale(0.98); } .system-bottom-nav .nav-btn-equal { flex: 1; min-width: 0; } body.create-flow-open #providerNavWrap, body.wizard-inserat-open #providerNavWrap { display: none !important; } body.create-flow-open #fabProviderAddOffer { display: none !important; } body.wizard-inserat-open #cookbookFooterWrap { display: none !important; } /* Wochenplan-UI ausblenden wenn Mastercard offen [cite: Regression 2026-03-02] */ body.wizard-inserat-open #weekViewFooter, body.wizard-inserat-open #weekMagicFab { display: none !important; } /* Nuclear: #app komplett ausblenden – verhindert schwarzen Screen durch Stacking [cite: 2026-03-02] */ body.wizard-inserat-open #app { visibility: hidden !important; pointer-events: none !important; } /* CreateFlow/Sheets HINTER Wizard – verhindert Überlagerung [cite: Mastercard Fix 2026-03-02] */ body.wizard-inserat-open #createFlowBd, body.wizard-inserat-open #createFlowSheet { z-index: 1 !important; pointer-events: none !important; } body.cookbook-from-dashboard #providerNavWrap { display: none !important; } body.wizard-inserat-open { overflow: hidden !important; overscroll-behavior: none !important; } /* Force-Open: InseratCard sichtbar erzwingen [cite: 2026-02-28, Final-Fix 2026-03-01, Schwarzer Screen Fix 2026-03-02] */ body.wizard-inserat-open #wizard { display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; z-index: 99999 !important; transform: none !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 100vh !important; max-height: 100vh !important; width: 100vw !important; background: #ffffff !important; isolation: isolate !important; } body.wizard-inserat-open #wizard .wizard-scroll, body.wizard-inserat-open #wizard #wContent { background: #ffffff !important; } /* Backdrop HINTER Wizard – elementFromPoint traf sonst #wbd (schwarzer Screen) [cite: Schwarzer Screen Fix 2026-03-02] */ body.wizard-inserat-open #wbd { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 1 !important; } /* V44-Safety: Erzwingt Sichtbarkeit ohne Z-Index Krieg [cite: 2026-03-08] */ body.wizard-inserat-open #wbd.active { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } body.wizard-inserat-open #wizard.active { display: flex !important; visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; } /* V45 Content-Visibility & S25-Loader [cite: 2026-03-08] */ body.wizard-inserat-open .mastercard-container { transform: translateY(0) !important; opacity: 1 !important; display: flex !important; visibility: visible !important; } body.wizard-inserat-open #wContent { display: flex !important; flex-direction: column !important; opacity: 1 !important; transform: none !important; min-height: 200px; } /* S25 Spinner Animation */ .s25-spinner { width: 32px; height: 32px; border: 3px solid #f1f5f9; border-top: 3px solid #222222; border-radius: 50%; animation: s25-spin 0.8s linear infinite; } @keyframes s25-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body.wizard-inserat-open .bottom-nav { display: none !important; } /* Renner-Speed-Dial: 2x2 Grid, TOP-Badge, 70% Bild, Midnight Blue Name, grüner Preis [cite: 2026-02-16] */ .create-flow-renner-section { margin-bottom: 0; } .create-flow-renner-heading { font-weight: 800; font-size: 15px; color: #1a1a1a; margin-bottom: 12px; } .create-flow-renner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0; } .create-flow-renner-grid .renner-speed-tile { position: relative; border-radius: 20px; overflow: hidden; background: #f8fafc; box-shadow: 0 4px 16px rgba(0,0,0,0.08); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; min-height: 0; aspect-ratio: 1; } .create-flow-renner-grid .renner-speed-tile:active { transform: scale(0.98); } .renner-speed-tile .renner-speed-img-wrap { height: 70%; min-height: 0; overflow: hidden; background: #e5e7eb; } .renner-speed-tile .renner-speed-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .renner-speed-tile .renner-speed-body { flex: 1; padding: 10px 12px 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 0; } .renner-speed-tile .renner-speed-name { font-weight: 900; font-size: 14px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .renner-speed-tile .renner-speed-price-wrap { display: flex; align-items: center; gap: 6px; } .renner-speed-tile .renner-speed-price { display: inline-block; padding: 4px 10px; border-radius: 10px; background: rgba(16,185,129,0.15); color: #059669; font-size: 13px; font-weight: 800; } .renner-speed-tile .renner-speed-top-badge { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 4px 10px; border-radius: 10px; background: #FFD700; color: #1a1a1a; font-size: 11px; font-weight: 900; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(255,215,0,0.4); animation: rennerBadgePulse 1.8s ease-in-out infinite; } @keyframes rennerBadgePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.95; } } .create-flow-renner-empty { display: none; text-align: center; padding: 24px 16px; color: #64748b; font-size: 14px; } /* Magic Overlay: Slot-Machine & Animation [cite: S25 Premium 2026-03-02] */ .magic-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 20001; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity 0.25s ease; } .magic-overlay.is-hidden { display: none !important; pointer-events: none; } .magic-overlay:not(.is-hidden) { display: flex !important; } .magic-content { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px; } #magicSlotMachine { font-size: 24px; font-weight: 900; color: #FFD700; text-transform: uppercase; letter-spacing: 2px; min-height: 40px; } #magicStatusText { font-size: 16px; font-weight: 700; color: #fff; } .magic-loader { width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.2); border-top-color: #FFD700; border-radius: 50%; animation: magicSpin 0.8s linear infinite; } @keyframes magicSpin { to { transform: rotate(360deg); } } .slot-machine-text { animation: slotShuffle 0.1s infinite; } @keyframes slotShuffle { 0% { transform: translateY(-5px) skewX(-5deg); filter: blur(1px); } 50% { transform: translateY(5px) skewX(5deg); filter: blur(2px); } 100% { transform: translateY(-5px) skewX(-5deg); filter: blur(1px); } } /* S25 Premium: day-slot Pop-In & Sparkle [cite: 2026-03-02] */ .kw-day-card.day-slot { opacity: 0; transform: scale(0.8) translateY(40px); transition: none; } .kw-day-card.day-slot.pop-in { opacity: 1 !important; transform: scale(1) translateY(0) !important; transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .kw-day-card.sparkle-arrival { position: relative; overflow: hidden; } .kw-day-card.sparkle-arrival::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); transform: scale(0); animation: flashImpact 0.7s ease-out forwards; pointer-events: none; z-index: 10; } @keyframes flashImpact { 0% { transform: scale(0); opacity: 1; } 40% { opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } } /* Inseratflow: High-End Glassmorphism (Master) – backdrop-blur-2xl, bg-white/70, border-white/40, shadow-2xl */ #wizard.sheet--kitchen{ background:var(--provider-bg, #F5F5F7) !important; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:28px 28px 0 0; border:1px solid rgba(255,255,255,0.4); border-bottom:none; box-shadow:0 -12px 40px rgba(0,0,0,0.12), 0 4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9); max-height:90vh !important; height: 90vh !important; overflow:hidden; display:flex; flex-direction:column; margin-left:12px; margin-right:12px; max-width:calc(100% - 24px); } /* Tabula Rasa: InseratCard volle Breite, weiße Leinwand – kein Beige-Durchscheinen [cite: Plan InseratCard] */ /* Inseratsbüro: Mastercard Full-Screen, 0 Margin/Rundungen [cite: 2026-02-21] */ #wizard[data-flow="listing"].sheet--kitchen{ margin: 0 !important; margin-left:0 !important; margin-right:0 !important; max-width:100% !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; border-radius: 0 !important; background:#fff !important; border: none !important; box-shadow: none !important; } #wizard[data-flow="listing"].sheet--kitchen .wizard{ background:#fff !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; } #wizard[data-flow="listing"].sheet--kitchen .sheet-body.wizard-sheet-body{ padding: 0 !important; border-radius: 0 !important; } #wizard.sheet--kitchen .handle{ background:rgba(0,0,0,0.15); width:40px; margin:8px auto 4px; } /* Inseratsbüro: Kein Handle im Listing-Flow, volle Höhe [cite: 2026-02-21] */ #wizard[data-flow="listing"].sheet--kitchen .handle { display: none !important; } /* Inseratsbüro: Keine Rundungen in Mastercard – Edge-to-Edge [cite: 2026-02-21] */ #wizard[data-flow="listing"] .inserat-photo-in-scroll, #wizard[data-flow="listing"] .inserat-photo-tile, #wizard[data-flow="listing"] .inserat-collapsing-header { border-radius: 0 !important; } /* PWA-Finish: Clean Look – keine Schiefertafel, weißer Hintergrund [cite: 2026-01-28, LAYOUT-FIX 2026-02-28] */ #wizard[data-flow="listing"] .liquid-master-panel, #wizard[data-flow="listing"] .mastercard-container, #wizard[data-flow="listing"] .inserat-card-sheet { background: #ffffff !important; } /* ===== RADIKALER COMPACT-REFACTOR [cite: 2026-02-23] ===== */ /* 1. GLOBAL CLEANUP: Kein Glow, kein Schatten, flaches Design [cite: Silicon Valley 2026-03-02] */ #mastercard-step-edit .inserat-content-sheet, #mastercard-step-edit .pill-group, #mastercard-step-edit .inserat-power-bar, #mastercard-step-edit .price-section, #mastercard-step-edit .price-circle-yellow, #mastercard-step-edit .glow-effect, #wizard[data-flow="listing"] #mastercard-step-edit .price-circle-yellow, #wizard[data-flow="listing"] #mastercard-step-edit .glow-effect { box-shadow: none !important; } #mastercard-step-edit .price-circle-yellow, #mastercard-step-edit .glow-effect, #wizard[data-flow="listing"] #mastercard-step-edit .price-circle-yellow, #wizard[data-flow="listing"] #mastercard-step-edit .glow-effect { background: #ffffff !important; filter: none !important; } /* 2. COMPACT LAYOUT: Ein-Screen-Garantie S25 */ #mastercard-step-edit .inserat-scroll-area.mastercard-content, #mastercard-step-edit .mastercard-scroll-area { padding: 60px 0 120px !important; display: flex !important; flex-direction: column !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; gap: 0 !important; align-items: stretch !important; } /* 170px-Block entfernt – photo-tile füllt jetzt 100% des 250px-Containers [cite: PURGE 2026-03-12] */ /* 3. TYPOGRAFIE REDUKTION */ #mastercard-step-edit #step-name input, #mastercard-step-edit .input-giant-name, #wizard[data-flow="listing"] #mastercard-step-edit #step-name input.ghost-input { font-size: 22px !important; padding: 8px 0 4px 0 !important; } #mastercard-step-edit .input-description { font-size: 14px !important; color: #64748b; margin: 0 !important; padding: 4px 0 6px 0 !important; } #mastercard-step-edit .inserat-price-pill-input, #mastercard-step-edit .input-giant-price { font-size: 42px !important; margin-top: -4px; } /* ===== MASTERCARD KANON [cite: 2026-02-21, User Prompt] ===== */ /* Keyframes: Slide-In/Out für Mastercard [cite: 2026-02-25] */ @keyframes mastercardSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes mastercardSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } } /* 1. DIE SHELL: Verhindert das "Aufsitz-Gefühl", 100% S25-Screen */ #wizard[data-flow="listing"] .mastercard-container, .mastercard-main-container { display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: center !important; } #wizard[data-flow="listing"] .mastercard-container { position: relative; width: 100%; min-height: 100%; background: #ffffff; z-index: 1; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 0 !important; transform: none !important; opacity: 1 !important; display: flex !important; flex-direction: column !important; } #wizard[data-flow="listing"] .mastercard-container.is-open { transform: none !important; opacity: 1 !important; } #wizard[data-flow="listing"] .mastercard-container.slide-down { display: none !important; } /* mastercard-overlay: Hintergrund-Dimmer für Slide-Down [cite: 2026-02-21] */ .mastercard-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1999; } .mastercard-overlay.active { opacity: 1; pointer-events: auto; } /* Radikale Schlichtheit: Compact Typografie [cite: RADIKALER COMPACT 2026-02-23] */ #wizard[data-flow="listing"] .input-name-giant, #wizard[data-flow="listing"] #mastercard-step-edit #step-name input, #wizard[data-flow="listing"] #step-name input.ghost-input.inserat-detail-style-title { width: 100%; border: none; font-size: 22px; font-weight: 900; text-align: center; color: #0f172a; padding: 8px 0 4px 0; outline: none; background: transparent; } #wizard[data-flow="listing"] .input-price-giant, #wizard[data-flow="listing"] #mastercard-step-edit .inserat-price-pill-input, #wizard[data-flow="listing"] .inserat-price-pill-input { border: none; font-size: 42px; font-weight: 700; text-align: center; color: #222222; width: 100%; max-width: 150px; outline: none; background: transparent; box-sizing: border-box; } .minimal-divider { width: 40px; height: 4px; background: #f1f5f9; margin: 10px auto; border-radius: 2px; } /* Pill-Intro: Sanftes Aufleuchten beim Öffnen [cite: Silicon Valley 2026-03-02] */ @keyframes pillIntroRun { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 1; } } #mastercard-step-edit .pill-group.pill-intro-run .pill-cloud { animation: pillIntroRun 0.6s ease-out forwards; } /* FINALE NEUAUFBAU Schritt 1: Kompaktheit [cite: ZERO-CLICK FOCUS 2026-02-23] Foto 170px→Pills→Name→PowerBar→Preis */ #mastercard-step-edit .inserat-scroll-area { padding: 60px 0 120px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } #mastercard-step-edit .pill-group { margin-top: 0; box-shadow: none !important; } #mastercard-step-edit .category-pill { box-shadow: none !important; } #mastercard-step-edit .category-pill.active { background: #222222 !important; color: #ffffff !important; } #mastercard-step-edit .category-pill:not(.active) { background: #F5F5F5 !important; color: #6b7280 !important; } #mastercard-step-edit .pill-cloud.categories { gap: 10px; } /* Allergen-Pills gestrichen [cite: 2026-02-21] */ /* 5-Pillars: Icons only, space-around, 2px Balken bei aktiv [cite: S25 PREMIUM V2 2026-02-23] */ #mastercard-step-edit .power-item, #wizard[data-flow="listing"] .inserat-power-bar .power-item { flex: 0 0 auto; min-width: 65px; max-width: 80px; min-height: 44px; padding: 8px 4px 10px; border-radius: 12px; text-align: center; border: none; background: transparent; color: #94a3b8; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); cursor: pointer; user-select: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } /* S25: Grid zentriert, gleichmäßiger Abstand [cite: S25-GRID-FIX 2026-03-12] */ #mastercard-step-edit .inserat-power-bar, #wizard[data-flow="listing"] .inserat-power-bar { justify-content: center !important; gap: 8px !important; padding: 0 20px !important; box-sizing: border-box !important; flex-wrap: nowrap !important; } /* Labels sichtbar: 11px unter Icon [cite: S25-GRID-FIX 2026-03-12] */ #mastercard-step-edit .power-item .power-item-label, #wizard[data-flow="listing"] .inserat-power-bar .power-item-label { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: #9ca3af !important; margin-top: 4px !important; line-height: 1.1 !important; white-space: nowrap !important; } #mastercard-step-edit .power-item .inserat-pill-emo, #wizard[data-flow="listing"] .inserat-power-bar .power-item .inserat-pill-emo { font-size: 22px; line-height: 1; } #mastercard-step-edit .power-item.active, #wizard[data-flow="listing"] .inserat-power-bar .power-item.active { background: transparent !important; color: #1a1a1a !important; border-color: transparent !important; border-bottom-color: #1a1a1a !important; } #mastercard-step-edit .power-item:active, #wizard[data-flow="listing"] .inserat-power-bar .power-item:active { transform: scale(0.92); } /* S25 Unified Icon-Plates [cite: 2026-03-08] */ #wizard[data-flow="listing"] .inserat-power-bar .power-item .inserat-pill-emo, #mastercard-step-edit .power-item .inserat-pill-emo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: #f8f9fa; border-radius: 12px; font-size: 24px !important; transition: all 0.2s cubic-bezier(0.2, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.03); filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); } #wizard[data-flow="listing"] .inserat-power-bar .power-item.active .inserat-pill-emo, #mastercard-step-edit .power-item.active .inserat-pill-emo { background: #222222 !important; color: #ffffff !important; transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Icon final 24px – S25-Grid-Fix [cite: S25-GRID-FIX 2026-03-12] */ #wizard[data-flow="listing"] .inserat-power-bar .power-item .inserat-pill-emo, #mastercard-step-edit .power-item .inserat-pill-emo { font-size: 24px !important; width: 40px !important; height: 40px !important; line-height: 1; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } #wizard[data-flow="listing"] .inserat-power-bar .power-item.active, #mastercard-step-edit .power-item.active { background: #ffffff !important; box-shadow: inset 0 -4px 0 #222222; } /* Active Label: schwarz [cite: S25-GRID-FIX 2026-03-12] */ #wizard[data-flow="listing"] .inserat-power-bar .power-item.active .power-item-label, #mastercard-step-edit .power-item.active .power-item-label { color: #1a1a1a !important; font-weight: 700 !important; } #wizard[data-flow="listing"] .inserat-power-bar .power-item.active .inserat-pill-emo, #mastercard-step-edit .power-item.active .inserat-pill-emo { transform: scale(1.3) translateY(-4px); filter: drop-shadow(0 8px 20px rgba(0,0,0,0.25)) saturate(1.5); } /* PowerBar Haptik: press-anim beim Tippen [cite: 2026-02-23] */ .vendor-area .power-item.press-anim { transform: scale(0.9); transition: transform 0.1s ease; } .vendor-area .power-item .power-item-label { font-size: 10px; font-weight: 600; color: inherit; margin-top: 2px; line-height: 1.2; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* UNIFIED DESIGN-FINISH: Zentrierung [cite: 2026-02-23] */ .system-content-body { display: flex; flex-direction: column; align-items: center; text-align: center; } .scout-master-card.vendor-area .inserat-section, .scout-master-card .inserat-section { text-align: center !important; justify-content: center !important; } .scout-master-card.vendor-area #step-name input, .scout-master-card.vendor-area .input-description, .scout-master-card.vendor-area .inserat-price-pill-input { text-align: center !important; border: none !important; border-bottom: 1px solid #ebebeb !important; border-radius: 0 !important; padding: 8px 0 !important; } .scout-master-card.vendor-area #step-name input { font-size: 18px !important; font-weight: 500 !important; } /* QUICK-ADJUST DESIGN-MATCH: Airbnb-Footer-Look [cite: 2026-02-23] */ body.provider-mode .quick-adjust-sheet, body.provider-mode .inserat-quick-adjust-panel.quick-adjust-sheet { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 10000; width: 100%; max-width: 100vw; margin: 0; background: #ffffff !important; border-radius: 24px 24px 0 0; padding: 20px 16px 0; box-shadow: none; border-top: 1px solid #ebebeb; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.provider-mode .quick-adjust-headline { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: #0f172a; } /* Fertig-Button: pixelgenau über Footer, 0px margin/radius unten, safe-area [cite: 2026-02-23] */ body.provider-mode .quick-adjust-fertig, body.provider-mode .inserat-fertig-kachel.quick-adjust-fertig { width: 100%; min-height: 56px; margin: 20px 0 0; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0)); border: none; border-radius: 0; background: #222222 !important; color: #ffffff !important; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.1s ease; } body.provider-mode .quick-adjust-fertig:active, body.provider-mode .inserat-fertig-kachel.quick-adjust-fertig:active { transform: scale(0.98); } /* Quick-Adjust Pills: Schwarz-Weiß */ body.provider-mode .inserat-quick-adjust-panel .inserat-allergen-pill, body.provider-mode .inserat-quick-adjust-panel .extra-pill { border: 1px solid #ebebeb; background: #ffffff; color: #1a1a1a; transition: background 0.2s, color 0.2s; } body.provider-mode .inserat-quick-adjust-panel .inserat-allergen-pill.active { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; } body.provider-mode .inserat-quick-adjust-panel .extra-pill.active { background: #222222; color: #ffffff; border-color: #222222; } /* Category Chips: Aktiv #222222 weiß, Inaktiv #f2f2f2 grau [cite: S25 PREMIUM V2 2026-02-23] */ #wizard[data-flow="listing"] .category-pills-green .category-pill, #wizard[data-flow="listing"] .category-pill { min-height: 40px; padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; border: none !important; background: #f2f2f2; color: #6b7280; } #wizard[data-flow="listing"] .category-pills-green .category-pill.active, #wizard[data-flow="listing"] .category-pill.active { background: #222222 !important; color: #ffffff !important; border: none !important; } /* Quick-Delete: Papierkorb rechts im Namen [cite: 2026-02-23] */ #wizard[data-flow="listing"] .inserat-name-clear-btn { opacity: 0.7; transition: opacity 0.2s; } #wizard[data-flow="listing"] .inserat-name-clear-btn:hover { opacity: 1; } /* Chips–Preis: Mehr Abstand [cite: S25 PREMIUM V2 2026-02-23] */ #wizard[data-flow="listing"] .pill-group, #wizard[data-flow="listing"] .category-pills-green { margin-bottom: 16px !important; } #mastercard-step-edit .power-bar-module.inserat-power-bar { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; padding-top: 16px !important; } /* 3 Säulen: Nur Emoji-Icons 🍴🧾🔄 – kein Text [cite: 2026-01-27, 2026-02-02, LAYOUT-FIX 2026-02-28] */ #mastercard-step-edit .inserat-power-bar .power-item[data-type="vor-ort"] .power-item-label, #mastercard-step-edit .inserat-power-bar .power-item[data-type="abholnummer"] .power-item-label, #mastercard-step-edit .inserat-power-bar .power-item[data-type="mehrweg"] .power-item-label { display: none !important; } #mastercard-step-edit .input-description { width: 100%; border: none; font-size: 14px; color: #64748b; resize: none; padding: 3px 0 5px 0; margin: 0; text-align: center; } #mastercard-step-edit .price-section, #wizard[data-flow="listing"] .price-section { margin-bottom: 0; margin-top: 0; width: 100%; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100%; } #mastercard-step-edit .inserat-pfand-hint, #wizard[data-flow="listing"] .inserat-pfand-hint { font-size: 13px; color: #64748b; font-weight: 500; text-align: center; width: 100%; } /* Airbnb-Glow: Button atmet bei Validierung [cite: 2026-02-21] */ .footer-btn-primary-glow, #wizard[data-flow="listing"] .inserat-step1-nav .footer-btn-primary.is-ready { background: #ffffff; color: #0f172a; height: 56px; min-width: 180px; border-radius: 16px; font-size: 18px; font-weight: 800; border: none; box-shadow: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } /* No-Glow Policy: Kein Glow auf Weiter-Button [cite: ZERO-CLICK FOCUS 2026-02-23] */ .footer-btn-primary-glow.is-ready, #wizard[data-flow="listing"] .inserat-step1-nav .footer-btn-primary.is-ready { box-shadow: none; transform: translateY(0); } /* InseratCard-Footer: Weiß, #ebebeb Linie oben, 0px Margin/Radius, S25 safe-area [cite: 2026-02-23, S25 Footer 2026-02-26] */ /* Footer Airbnb-Style: weiß, bündig, schwarz-geknopft [cite: 2026-02-23, Final-Fix 2026-03-01] */ #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] .inserat-step1-nav.inserat-airbnb-footer { background: #ffffff !important; border-top: 1px solid #ebebeb !important; border-radius: 0 !important; box-shadow: none !important; } #wizard[data-flow="listing"] #mastercard-footer-step1 .btn-primary-black, #wizard[data-flow="listing"] .inserat-step1-nav .btn-primary-black { background: #222222 !important; color: #ffffff !important; border-radius: 8px !important; } #wizard[data-flow="listing"] .inserat-step1-nav.inserat-airbnb-footer { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100vw; padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: center; margin: 0 !important; border-radius: 0 !important; box-sizing: border-box; } /* InseratCard-Footer: bündig am Displayrand, S25 Edge-to-Edge [cite: 2026-02-23, 2026-02-26] */ .airbnb-footer-minimal, #wizard[data-flow="listing"] .inserat-step1-nav.inserat-immo-footer { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100vw; background: #222222; padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; margin: 0 !important; border-radius: 0 !important; box-sizing: border-box; } /* 2. FIXED HEADER: Bleibt oben stehen */ #wizard[data-flow="listing"] .mastercard-header { width: 100%; padding: 16px 0; text-align: center; font-weight: 800; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid #f1f5f9; z-index: 100; flex-shrink: 0; } /* 3. CONTENT-SCROLL: S25 snappy – overflow-y auto, touch scrolling, Header sticky [cite: 2026-02-21] */ #mastercardScrollArea, #wizard[data-flow="listing"] .mastercard-content, #wizard[data-flow="listing"] .inserat-scroll-area.mastercard-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 20px 24px 120px 24px; } /* 4. EBAY-STYLE PHOTO-SECTION: Smart-Crop, Drag-to-Pan [cite: 2026-02-21] */ #wizard[data-flow="listing"] .photo-section-ebay, #wizard[data-flow="listing"] .photo-section { width: 100%; width: 100vw; height: 190px; min-height: 190px; max-height: 190px; margin: 0; position: relative; background: #1e293b; overflow: hidden; flex-shrink: 0; cursor: grab; box-shadow: inset 0 -20px 20px rgba(0,0,0,0.1); } #wizard[data-flow="listing"] .photo-section-ebay .ebay-preview-img, #wizard[data-flow="listing"] .photo-section img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; transition: object-position 0.1s ease-out; -webkit-user-select: none; user-select: none; } /* UNIFIED: Kein grauer Schleier – Foto bleibt klar und immersiv (Neu + Edit) [cite: 2026-02-23] */ #wizard[data-flow="listing"] .photo-section-ebay .ebay-photo-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; padding: 10px 10px 0 0; background: transparent; pointer-events: none; } #wizard[data-flow="listing"] .photo-section-ebay .btn-photo-icon-only { pointer-events: auto; position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; background: rgba(255,255,255,0.9) !important; border-radius: 50%; z-index: 20; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; } #wizard[data-flow="listing"] .photo-section-ebay .ebay-edit-btn:not(.btn-photo-icon-only) { pointer-events: auto; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: none; padding: 10px 20px; border-radius: 50px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } #wizard[data-flow="listing"] .photo-section-ebay .ebay-hint { color: white; font-size: 11px; margin-top: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); font-weight: 600; pointer-events: none; } /* Kochbuch Quick-Select: horizontale Scroll-Leiste [cite: 2026-02-21] */ .cookbook-quick-select { display: flex; gap: 12px; overflow-x: auto; padding: 10px 16px; -webkit-overflow-scrolling: touch; flex-shrink: 0; scrollbar-width: none; } .cookbook-quick-select::-webkit-scrollbar { display: none; } .cookbook-quick-item { flex: 0 0 60px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } .cookbook-quick-item .cookbook-quick-thumb { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid #f1f5f9; display: block; } .cookbook-quick-item span { font-size: 10px; font-weight: 700; color: #64748b; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; } /* X als Flex-Kind im 3-Spalten Header [cite: CLEAN-SWEEP 2026-03-12] */ #wizard[data-flow="listing"] .btn-close-master, #wizard[data-flow="listing"] .close-mastercard { position: relative !important; top: auto !important; left: auto !important; width: 32px; height: 32px; background: transparent; border-radius: 50%; color: #9ca3af; display: flex; align-items: center; justify-content: center; z-index: 150; border: none; cursor: pointer; flex-shrink: 0; } /* Kamera-Linse entfernt – Nutzer nutzt zentralen Platzhalter [cite: UI CLEANUP 2026-02-23] */ #wizard[data-flow="listing"] .camera-trigger, #wizard[data-flow="listing"] .inserat-camera-float, #wizard[data-flow="listing"] .ebay-edit-btn.btn-photo-icon-only { display: none !important; } /* 5. Die 3 Säulen-Icons direkt unter dem Bild */ #wizard[data-flow="listing"] .pillars-row, #wizard[data-flow="listing"] .inserat-power-bar.inserat-unified-pills { display: flex; justify-content: space-around; padding: 15px 0; margin-bottom: 20px; } /* Wizard: app-like – Inserat-Flow weiter oben, weniger Abstand oben */ /* Inseratsflow: Kein Header, Bild volle Breite oben [cite: 2026-02-18] */ #wizard.sheet--kitchen .sheet-body.wizard-sheet-body{ padding:0; overflow:hidden; flex:1; min-height:0; display:flex; flex-direction:column; padding-bottom: env(safe-area-inset-bottom, 20px); } @keyframes wizardContentEnter{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } } #wizard.sheet--kitchen #wContent > *{ animation:wizardContentEnter 0.32s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; transition: transform 0.25s cubic-bezier(0.34, 1.2, 0.64, 1); } #wizard.sheet--kitchen .wizard{ background:transparent; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,0.4); border-radius:24px; padding:16px 20px 20px; box-shadow:0 12px 40px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.95); flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; position: relative; } #wizard.sheet--kitchen .wizard-progress-dots{ display:flex; justify-content:center; gap:6px; margin-bottom:8px; flex-shrink:0; } #wizard.sheet--kitchen .wizard-dot{ width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.12); transition:background .25s ease, transform .25s ease, width .25s ease; } #wizard.sheet--kitchen .wizard-dot.active{ background:var(--prov-brand); transform:scale(1.15); width:16px; border-radius:3px; } #wizard.sheet--kitchen .wizard-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; /* Pull-to-Refresh in InseratCard gesperrt */ scroll-behavior:smooth; margin:0 -20px; padding:0 20px 24px; /* Fußzeile entfernt – Platz nur für Safe Area */ } /* Liquid Panel / High-End Glassmorphism (Inseratsflow) – Optik wie Referenz */ #wizard.sheet--kitchen .glass-express-step0, #wizard.sheet--kitchen .inserat-universal-mask, #wizard.sheet--kitchen .listing-glass-panel, #wizard.sheet--kitchen .s25-floating-panel{ --glass-bg: rgba(255,255,255,0.95); --glass-border: rgba(255,255,255,0.6); --emerald: #10b981; --signal-yellow: #FACC15; --radius-panel: 2.4rem; border-radius: var(--radius-panel); background: var(--glass-bg); backdrop-filter: blur(40px) saturate(140%); -webkit-backdrop-filter: blur(40px) saturate(140%); border: 1px solid var(--glass-border); box-shadow: 0 24px 48px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8); overflow: hidden; max-width: min(420px, 100%); max-height: 92vh; display: flex; flex-direction: column; z-index: 100; } /* Foto randlos oben im Rahmen (S25 Ultra-Liquid) */ #wizard.sheet--kitchen .glass-express-step0.s25-floating-panel, #wizard.sheet--kitchen .listing-glass-panel.s25-floating-panel{ border-top-left-radius: 0; border-top-right-radius: 0; } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile, #wizard.sheet--kitchen .glass-express-step0 .photo-header{ height: 240px; min-height: 200px; background: #e8ecf0; border-radius: 0; flex-shrink: 0; box-shadow: 0 8px 24px rgba(0,0,0,0.08); } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile .inserat-photo-remove, #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile .inserat-photo-change{ position: absolute; bottom: 14px; right: 14px; padding: 12px 18px; min-height: 48px; border-radius: 999px; background: rgba(0,0,0,0.55); border: none; color: #fff; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: transform 0.12s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile .inserat-photo-change:hover{ color: #fff; } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile .inserat-photo-change:active{ transform: scale(0.98); } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile .inserat-photo-placeholder{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(160deg, rgba(248,247,242,0.98) 0%, rgba(241,245,249,0.95) 100%); } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile .inserat-photo-placeholder .inserat-photo-placeholder-icon{ font-size: 48px; opacity: 0.5; } #wizard.sheet--kitchen .glass-express-step0{ padding-bottom: 0; --gex-gap: 12px; --gex-block: 20px; } /* Magnet-Input: pulsierende Emerald-Linie – „Tipp mich an!“ */ @keyframes magnet-pulse{ 0%, 100%{ border-bottom-color: rgba(16,185,129,0.5); } 50%{ border-bottom-color: var(--emerald); } } @keyframes magnet-pulse-idle{ 0%, 100%{ border-bottom-color: rgba(16,185,129,0.15); } 50%{ border-bottom-color: rgba(16,185,129,0.4); } } #wizard.sheet--kitchen .glass-express-step0 #step-name input, #wizard.sheet--kitchen .glass-express-step0 .liquid-input, #wizard.sheet--kitchen .glass-express-step0 .liquid-input-focus{ width: 100%; min-height: 48px; background: transparent; border: none; border-bottom: 2px solid rgba(0,0,0,0.05); padding: 12px 0 10px 0; outline: none; font-weight: 800; color: #1a1a1a; transition: border-color 0.3s ease, box-shadow 0.3s ease; box-sizing: border-box; } #wizard.sheet--kitchen .glass-express-step0 #step-name input:focus, #wizard.sheet--kitchen .glass-express-step0 .liquid-input-focus:focus{ animation: magnet-pulse 1.2s ease-in-out infinite; } #wizard.sheet--kitchen .glass-express-step0 #step-name input.magnet-input, #wizard.sheet--kitchen .glass-master-panel #step-name input.magnet-input{ border-bottom: 2px solid rgba(0,0,0,0.05); animation: magnet-pulse-idle 2.5s ease-in-out infinite; } #wizard.sheet--kitchen .glass-express-step0 #step-name input.magnet-input:focus, #wizard.sheet--kitchen .glass-master-panel #step-name input.magnet-input:focus{ animation: magnet-pulse 1.2s ease-in-out infinite; } /* High-End Airbnb-Style: Gericht + Beschreibung – WOW-Eingaben */ #wizard.sheet--kitchen .glass-express-step0 #step-name.inserat-name-airbnb, #wizard.sheet--kitchen .liquid-master-panel #step-name.inserat-name-airbnb{ padding: 0; margin-bottom: 4px; border: none; background: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-airbnb-field-wrap, #wizard.sheet--kitchen .liquid-master-panel .inserat-airbnb-field-wrap{ margin-bottom: 20px; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-dish, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-dish{ width: 100%; min-height: 56px; padding: 18px 20px 14px; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; color: #1a1a1a; background: #fff; border: none; border-bottom: 2px solid rgba(0,0,0,0.06); border-radius: 0; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-dish::placeholder, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-dish::placeholder{ color: #94a3b8; font-weight: 600; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-dish:focus, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-dish:focus{ border-bottom-color: #1a1a1a; box-shadow: 0 2px 0 0 #1a1a1a; } /* Beschreibung: kleiner, dezent, hebt sich nicht ab */ #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-desc-wrap, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-desc-wrap{ margin-bottom: 4px; margin-top: -4px; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-desc, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-desc, #wizard.sheet--kitchen .glass-express-step0 #step-name input.inserat-desc-input, #wizard.sheet--kitchen .liquid-master-panel #step-name input.inserat-desc-input{ width: 100%; min-height: 36px; padding: 8px 0 6px; font-size: 0.95rem; font-weight: 500; font-style: italic; color: #64748b; background: transparent !important; border: none !important; border-bottom: none !important; border-radius: 0; outline: none; transition: border-color 0.2s ease; box-sizing: border-box; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-desc::placeholder, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-desc::placeholder, #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-desc-input::placeholder, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-desc-input::placeholder{ color: #cbd5e1; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-airbnb-desc:focus, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-airbnb-desc:focus, #wizard.sheet--kitchen .glass-express-step0 #step-name input.inserat-desc-input:focus, #wizard.sheet--kitchen .liquid-master-panel #step-name input.inserat-desc-input:focus{ box-shadow: 0 1px 0 0 rgba(16,185,129,0.3); color: #64748b; } #wizard.sheet--kitchen .glass-express-step0 #step-name input:first-of-type{ font-size: 1.75rem; text-align: left; } #wizard.sheet--kitchen .glass-express-step0 #step-name input:last-of-type, #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-desc-input, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-desc-input{ font-size: 0.95rem; color: #64748b; text-align: left; margin-top: 0; font-weight: 500; font-style: italic; background: transparent; } #wizard.sheet--kitchen .glass-express-step0 #step-name .inserat-desc-input::placeholder, #wizard.sheet--kitchen .liquid-master-panel #step-name .inserat-desc-input::placeholder{ color: #cbd5e1; } /* price-display: elegant, System-Sans / Inter, Bold [cite: Native-Feel] */ #wizard.sheet--kitchen .glass-express-step0 #step-price .inserat-price-input, #wizard.sheet--kitchen .glass-express-step0 .price-display{ font-size: 2.75rem; font-weight: 800; font-family: var(--font-main); text-align: center; color: #111; } /* Pills: haptisch, voll rund (Kategorien + Extras) – app-like :active */ #wizard.sheet--kitchen .glass-express-step0 #step-cat button, #wizard.sheet--kitchen .glass-express-step0 .extra-pill{ padding: 10px 20px; border-radius: 999px; background: rgba(0,0,0,0.05); font-weight: 700; transition: transform 0.12s ease, background 0.2s ease; cursor: pointer; border: none; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 #step-cat button:active, #wizard.sheet--kitchen .glass-express-step0 .extra-pill:active{ transform: scale(0.98); } #wizard.sheet--kitchen .glass-express-step0 #step-cat button[style*="#10b981"], #wizard.sheet--kitchen .glass-express-step0 .extra-pill.active{ background: var(--emerald) !important; color: #fff !important; transform: scale(1.05); } #wizard.sheet--kitchen .glass-express-step0 #step-cat button.active:active, #wizard.sheet--kitchen .glass-express-step0 .extra-pill.active:active{ transform: scale(0.98); } #wizard.sheet--kitchen .glass-express-step0 #step-extras .extra-pill{ padding: 8px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: rgba(0,0,0,0.05); } #wizard.sheet--kitchen .glass-express-step0 .glass-pill{ -webkit-tap-highlight-color:transparent; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition: border-color 0.2s, background 0.2s, transform 0.12s ease; box-shadow:0 2px 8px rgba(0,0,0,0.04); } #wizard.sheet--kitchen .glass-express-step0 .glass-pill:active{ transform:scale(0.97); } #wizard.sheet--kitchen .glass-express-step0 .glass-express-field{ border:2px solid rgba(255,255,255,0.65); background:rgba(255,255,255,0.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 2px 8px rgba(0,0,0,0.03); transition: border-color 0.2s, box-shadow 0.2s; } #wizard.sheet--kitchen .glass-express-step0 .glass-express-field:focus{ outline:none; border-color:var(--prov-brand); box-shadow:0 0 0 3px rgba(255,222,0,0.2); } #wizard.sheet--kitchen .glass-express-step0 .smart-confirm-bar{ margin-top:4px; padding-top:16px; padding-bottom:16px; gap:10px; } #wizard.sheet--kitchen .glass-express-step0 .listing-umsatz-potenzial{ margin-top:var(--gex-block); margin-bottom:4px; } #wizard.sheet--kitchen .glass-express-step0 .btn-glass-secondary{ min-height:50px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* Inserat Step 0: daumenfreundlich, alle Ziele mind. 48px */ #wizard.sheet--kitchen #wContent .field{ min-height: 52px !important; padding: 0 18px !important; font-size: 18px !important; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s, box-shadow 0.2s; } #wizard.sheet--kitchen #wContent .field:focus{ outline: none; border-color: var(--prov-brand); box-shadow: 0 0 0 3px rgba(255,222,0,0.2); } #wizard.sheet--kitchen #wContent button[type="button"]{ -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, background 0.2s, border-color 0.2s; } #wizard.sheet--kitchen #wContent button[type="button"]:active{ transform: scale(0.97); } #wizard.sheet--kitchen .wizard-footer{ margin-top: 8px; text-align:center; font-size:9px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:0.03em; flex-shrink: 0; } /* High-End Universal-Flow: Kategorie horizontal, Smart-Tiles, Pricing-Weiche */ #wizard.sheet--kitchen .inserat-cat-scroll::-webkit-scrollbar{ height:6px; } #wizard.sheet--kitchen .inserat-cat-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,0.15); border-radius:3px; } #wizard.sheet--kitchen .inserat-cat-tile:active{ transform:scale(0.98); } #wizard.sheet--kitchen .inserat-smart-tiles button:active{ transform:scale(0.96); } /* High-End Spring (stiffness 300, damping 20, mass 0.8) – 3 Säulen sofort sichtbar als Glas-Hüllen */ #wizard.sheet--kitchen .inserat-three-pillars button{ transition: transform 0.32s cubic-bezier(0.34, 1.2, 0.64, 1), border-color 0.2s, background 0.2s; } #wizard.sheet--kitchen .inserat-three-pillars button:active{ transform:scale(0.95); } #wizard.sheet--kitchen .inserat-photo-tile .inserat-photo-remove:hover, #wizard.sheet--kitchen .inserat-photo-tile .inserat-photo-change:hover{ color:#fff; } /* 3 Säulen: 🍴 🧾 🔄 + Zeit als eine Karte (app-like) */ #wizard.sheet--kitchen .glass-express-step0 #step-logistics, #wizard.sheet--kitchen .glass-express-step0 .logistics-bar.inserat-logistics-card{ display: flex; flex-direction: column; align-items: stretch; } #wizard.sheet--kitchen .glass-express-step0 .inserat-logistics-card-inner, #wizard.sheet--kitchen .glass-express-step0 .power-bar{ display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; background: rgba(255,255,255,0.4); border-radius: 20px; padding: 16px 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); margin-top: 8px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-extras-wrap, #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-wrap{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-pill{ padding: 8px 16px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-dropdown, #wizard.sheet--kitchen .glass-express-step0 .inserat-extras-dropdown{ background: rgba(255,255,255,0.4); border-radius: 16px; padding: 16px; border: 1px solid rgba(255,255,255,0.5); } #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile{ width: 100%; overflow: hidden; cursor: pointer; position: relative; } #wizard.sheet--kitchen .glass-express-step0 .inserat-scroll-area{ padding: 28px 24px; overflow-y: auto; flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 22px; background: #fff; } #wizard.sheet--kitchen .glass-express-step0.s25-floating-panel .inserat-scroll-area{ padding: 26px 24px; gap: 20px; } #wizard.sheet--kitchen .glass-express-step0 #step-name{ margin-bottom: 0; } #wizard.sheet--kitchen .glass-express-step0 #step-cat{ display: flex; gap: 8px; overflow-x: auto; padding: 0; margin: 0; -webkit-overflow-scrolling: touch; } #wizard.sheet--kitchen .glass-express-step0 #step-price{ text-align: center; margin: 0; padding: 0; margin-bottom: 2px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-price-row{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-price-input{ width: 50%; max-width: 180px; background: transparent; border: none; padding: 16px; outline: none; } #wizard.sheet--kitchen .glass-express-step0 .inserat-price-euro{ font-size: 2rem; font-weight: 900; color: #ccc; margin-left: 10px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-earnings{ font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin: 0; } #wizard.sheet--kitchen .glass-express-step0 .inserat-umsatzprognose{ color: #94a3b8; font-weight: 700; text-transform: none; letter-spacing: 0; } /* Transparenz-Tooltip Umsatzprognose (gläsern, Fade-In & Slide-Up) */ #wizard.sheet--kitchen .glass-express-step0 .inserat-prognose-wrap{ position: relative; margin-top: 10px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } #wizard.sheet--kitchen .glass-express-step0 .info-trigger{ color: #94a3b8; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .glass-tooltip{ display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(10px); width: 220px; max-width: calc(100vw - 48px); margin-bottom: 8px; padding: 12px; border-radius: 1rem; font-size: 0.7rem; color: #475569; line-height: 1.35; background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 10px 25px rgba(0,0,0,0.08); pointer-events: none; z-index: 20; } #wizard.sheet--kitchen .glass-express-step0 .glass-tooltip.prognose-tooltip-visible{ display: block; animation: tooltip-slide 0.3s ease-out forwards; } @keyframes tooltip-slide{ from{ opacity: 0; transform: translateX(-50%) translateY(10px); } to{ opacity: 1; transform: translateX(-50%) translateY(0); } } #wizard.sheet--kitchen .glass-express-step0 .inserat-logistics-btn{ font-size: 24px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; transition: transform 0.12s ease, filter 0.2s; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-logistics-btn:active{ transform: scale(0.95); } #wizard.sheet--kitchen .glass-express-step0 .inserat-logistics-btn.active{ transform: scale(1.1); filter: grayscale(0); } #wizard.sheet--kitchen .glass-express-step0 .inserat-logistics-btn.active:active{ transform: scale(0.95); } #wizard.sheet--kitchen .glass-express-step0 .inserat-logistics-btn.inactive{ filter: grayscale(1); opacity: 0.35; transform: scale(0.9); } #wizard.sheet--kitchen .glass-express-step0 .inserat-pickup-time-dropdown{ width: 100%; display: flex; justify-content: center; padding: 12px 0 4px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-pickup-time-row{ display: flex; align-items: center; justify-content: center; gap: 10px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-pickup-time-input{ padding: 10px 14px; border-radius: 12px; border: 2px solid rgba(0,0,0,0.08); font-size: 16px; font-weight: 700; background: #fff; color: #1a1a1a; } #wizard.sheet--kitchen .glass-express-step0 .inserat-pickup-time-trigger{ font-size: 24px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: transform 0.12s ease; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-pickup-time-trigger:active{ transform: scale(0.98); } #wizard.sheet--kitchen .glass-express-step0 #step-allergens{ margin: 0; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-trigger{ width: 100%; text-align: left; font-size: 0.9rem; font-weight: 700; color: #334155; padding: 14px 16px; border: none; background: rgba(0,0,0,0.04); cursor: pointer; border-radius: 12px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; transition: transform 0.12s ease; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-trigger:active{ transform: scale(0.98); } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-trigger:hover{ color: #64748b; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-inner{ display: flex; flex-direction: column; gap: 8px; padding: 16px 0; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-row, #wizard.sheet--kitchen .liquid-master-panel .inserat-allergen-row{ display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; font-size: 0.95rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.4); color: #64748b; text-align: left; transition: transform 0.12s ease, background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-row .inserat-allergen-emo, #wizard.sheet--kitchen .liquid-master-panel .inserat-allergen-row .inserat-allergen-emo{ font-size: 1rem; display: inline; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-row .inserat-allergen-code, #wizard.sheet--kitchen .liquid-master-panel .inserat-allergen-row .inserat-allergen-code{ font-weight: 800; display: inline; color: inherit; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-row .inserat-allergen-name, #wizard.sheet--kitchen .liquid-master-panel .inserat-allergen-row .inserat-allergen-name{ display: inline; color: inherit; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-row.active, #wizard.sheet--kitchen .liquid-master-panel .inserat-allergen-row.active{ background: #10b981; color: #fff; } #wizard.sheet--kitchen .glass-express-step0 .inserat-allergen-row:active, #wizard.sheet--kitchen .liquid-master-panel .inserat-allergen-row:active{ transform: scale(0.98); } /* Airbnb-Footer: Edge-to-Edge, ohne seitliche Lücken/Rundungen, blur(30px) [cite: 2026-02-21] */ #wizard.sheet--kitchen .glass-express-step0 .inserat-action-section{ padding: 20px max(16px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom, 24px)) max(16px, env(safe-area-inset-right)); margin: 0; border-radius: 0; border-top: 1px solid rgba(0,0,0,0.06); background: rgba(245,245,240,0.92); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); box-shadow: 0 -8px 32px rgba(0,0,0,0.06); flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary{ width: 100%; min-height: 56px; padding: 18px 24px; border-radius: 24px; font-size: 16px; font-weight: 800; border: none; cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.3; transition: transform 0.15s ease; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary.inserat-btn-emerald{ background: #10b981; color: #fff; box-shadow: 0 10px 30px rgba(16,185,129,0.35); } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary.renner-fast-pulse{ animation: rennerGreenPulse 2s ease-in-out infinite; } @keyframes rennerGreenPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(16,185,129,0.35); transform: scale(1); } 50% { box-shadow: 0 12px 36px rgba(16,185,129,0.45); transform: scale(1.01); } } @keyframes inserat-hero-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(16,185,129,0.45), 0 10px 30px rgba(0,0,0,0.12); transform: scale(1); } 50% { box-shadow: 0 0 32px rgba(16,185,129,0.6), 0 12px 36px rgba(0,0,0,0.15); transform: scale(1.01); } } #wizard[data-flow="listing"] .inserat-btn-primary.is-loading { pointer-events: none; } #wizard[data-flow="listing"] .inserat-btn-spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: inserat-spin 0.7s linear infinite; } @keyframes inserat-spin { to { transform: rotate(360deg); } } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary .inserat-cta-main{ text-transform: none; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary .inserat-cta-sub{ display: block; font-size: 0.75rem; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: 0.95; margin-top: 4px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary, #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-secondary { transition: transform 0.1s cubic-bezier(0.4,0,0.2,1), box-shadow 0.1s ease; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-primary:active{ transform: scale(0.96); box-shadow: none; filter: brightness(0.95); } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-secondary{ width: 100%; min-height: 56px; padding: 16px 24px; border-radius: 24px; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform 0.15s ease; -webkit-tap-highlight-color: transparent; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-secondary.inserat-btn-yellow-border{ border: 2px solid #FACC15; background: rgba(250,204,21,0.08); color: #1a1a1a; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-secondary .inserat-cta-main{ display: block; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-secondary .inserat-cta-sub{ display: block; font-size: 0.75rem; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: 0.9; margin-top: 4px; } #wizard.sheet--kitchen .glass-express-step0 .inserat-btn-secondary:active{ transform: scale(0.96); box-shadow: none; filter: brightness(0.95); } /* Legacy Step0 CTA-Farben entfernt: Footer-Buttons werden zentral im Airbnb-Block gestylt */ #wizard.sheet--kitchen .glass-express-step0 .inserat-master-flow > section button{ border-radius: 2rem; } #wizard.sheet--kitchen .inserat-pickup-time-trigger:active{ opacity:0.9; } /* Tastatur-Check: Preis-Feld – fester Bereich, kein Layout-Sprung bei Zahlentastatur */ #wizard.sheet--kitchen .inserat-price-wrap{ min-height:72px; contain:layout; } #wizard.sheet--kitchen .inserat-price-field{ scroll-margin-bottom:100px; } /* Onboarding Views: App-like Sticky Layout */ .onboarding-view { background: var(--provider-bg) !important; min-height: 100vh; display: flex; flex-direction: column; } .onboarding-view .panel { flex: 1; display: flex; flex-direction: column; padding: 24px max(20px, env(safe-area-inset-right)) 100px max(20px, env(safe-area-inset-left)) !important; width: 100%; max-width: 100%; margin: 0; background: transparent !important; border: none !important; box-shadow: none !important; box-sizing: border-box; } .onboarding-actions { position: fixed; bottom: 0; left: 0; right: 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 20px)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-top: 1px solid rgba(0, 0, 0, 0.06); display: flex; gap: 12px; z-index: 100; } .onboarding-actions button { flex: 1; height: 56px; border-radius: 16px; font-weight: 800; font-size: 16px; border: none; cursor: pointer; transition: transform 0.1s; } /* Onboarding-Preview: 5-Ebenen-InseratCard-Stil, 32px Radius, Bottom-Sheet [cite: 2026-02-18] */ #v-provider-onboarding-preview .onboarding-preview-card, #v-provider-onboarding-preview .inserat-card-preview { border-radius: 32px; overflow: hidden; background: #fff; box-shadow: 0 12px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02); display: flex; flex-direction: column; } #v-provider-onboarding-preview .onboarding-preview-card img, #v-provider-onboarding-preview .inserat-card-preview img { width: 100%; height: 100%; object-fit: cover; } .onboarding-actions button.btn-primary { background: var(--brand); color: #1a1a1a; box-shadow: 0 4px 14px rgba(255, 215, 0, 0.4); } .onboarding-actions button.secondary { background: rgba(0, 0, 0, 0.05); color: #64748b; } .onboarding-actions button:active { transform: scale(0.97); } /* Dashboard KPIs & Cards */ .provider-kpi-card { background: #fff; padding: 20px; border-radius: 24px; border: 1px solid rgba(0,0,0,0.04); box-shadow: 0 4px 12px rgba(0,0,0,0.02); transition: transform 0.1s, box-shadow 0.2s; } .provider-kpi-card:active { transform: scale(0.98); box-shadow: 0 2px 8px rgba(0,0,0,0.01); } .provider-kpi-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } /* FAB NUR Dashboard: rechts (explizit left:auto), Animation Buttons */ .fab-provider { position: fixed; left: auto !important; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); right: 20px; height: 60px; padding: 0 24px; border-radius: 30px; background: #1a1a1a; color: #fff; border: none; box-shadow: 0 12px 32px rgba(0,0,0,0.25); cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; z-index: 1000; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); } .fab-provider:active { transform: scale(0.92); } .fab-provider i { width: 24px; height: 24px; stroke-width: 3; } /* Plus-Button Anbieter: kühles Blau (--prov-brand), weißes Plus */ .provider-add-plus-btn, #fabProviderAddOffer.fab-provider-plus { background: var(--prov-brand) !important; color: #fff !important; border: none !important; animation: fab-pulse-prov 2s ease-in-out infinite; } .provider-add-plus-btn .plus-char, #fabProviderAddOffer.fab-provider-plus .plus-char { color: #fff !important; font-weight:900; text-shadow: 0 1px 2px rgba(0,0,0,0.15); } /* FAB: nur runder Plus-Button, rechts (applike) */ #fabProviderAddOffer.fab-provider-plus { width: 56px; height: 56px; min-width: 56px; padding: 0; border-radius: 50%; justify-content: center; } /* Stolz-Edition: FAB gelb mit weißem Rand, animiert (applike) */ @keyframes fab-plus-float { 0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12); } 50% { transform: scale(1.06); box-shadow: 0 6px 26px rgba(255,222,0,0.4), 0 10px 30px rgba(0,0,0,0.15); } } #fabProviderAddOffer.fab-provider-plus { background: #ffde00 !important; border: 4px solid #fff !important; box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12) !important; animation: fab-plus-float 2.2s ease-in-out infinite; } #fabProviderAddOffer.fab-provider-plus .plus-char { color: #1a1a1a !important; text-shadow: none !important; } #fabProviderAddOffer.fab-provider-plus:active, .provider-add-plus-btn:active { animation: none; transform: scale(0.96); } /* REGEL: Gelbes Plus – einheitlich in der ganzen App für „Hinzufügen“ (Anbieter erkennt sofort: hier kann ich was hinzufügen) */ .prov-add-plus-icon { width: 64px; height: 64px; min-width: 64px; min-height: 64px; background: #ffde00; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 300; line-height: 1; color: #1a1a1a; box-shadow: 0 4px 16px rgba(255,222,0,0.45); } .prov-add-plus-trigger { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.1s; padding: 8px; } .prov-add-plus-trigger:active { transform: scale(0.98); } @keyframes fab-pulse-prov { 0%, 100% { box-shadow: 0 4px 20px rgba(14,165,233,0.45), 0 8px 24px rgba(0,0,0,0.15); } 50% { box-shadow: 0 4px 28px rgba(14,165,233,0.6), 0 8px 32px rgba(0,0,0,0.2); } } .provider-add-plus-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 14px; font-weight: 800; font-size: 16px; cursor: pointer; transition: transform 0.15s; } @media (min-width: 501px) { .fab-provider { right: calc(20px + env(safe-area-inset-right, 0)); left: auto; } } #wizard.sheet--kitchen .w-top{ margin-bottom:12px; } #wizard.sheet--kitchen .w-title{ font-weight:800; font-size:14px; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; } #wizard.sheet--kitchen .w-step{ font-size:12px; color:#64748b; font-weight:600; margin-top:2px; } #wizard.sheet--kitchen .w-q{ font-size:22px; font-weight:900; color:#1a1a1a; line-height:1.2; margin:0 0 8px; letter-spacing:-0.02em; } #wizard.sheet--kitchen .w-help{ font-size:15px; color:#64748b; margin:0 0 24px; line-height:1.5; } #wizard.sheet--kitchen #wContent{ flex:1; min-height:0; margin-bottom:0; scroll-margin-top:16px; } #wizard.sheet--kitchen .panel{ scroll-behavior:smooth; } #wizard.sheet--kitchen #wContent .answers{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } #wizard.sheet--kitchen #wContent .field{ margin-top:0; margin-bottom:8px; } #wizard.sheet--kitchen #wContent input[type="checkbox"]{ accent-color:var(--brand); } #wizard.sheet--kitchen .hint{ color:#64748b; font-size:13px; } #wizard.sheet--kitchen .panel{ background:#f8f9fa; border:1px solid rgba(0,0,0,0.08); color:#1a1a1a; border-radius:12px; padding:14px; margin-top:12px; } #wizard.sheet--kitchen .panel .hint{ color:#64748b; } #wizard.sheet--kitchen .ans{ background:#fff; border:1px solid rgba(0,0,0,0.12); color:#1a1a1a; padding:12px 16px; border-radius:14px; font-weight:700; min-height:44px; box-sizing:border-box; transition:background .15s, border-color .15s; } #wizard.sheet--kitchen #wContent .ans.ans--thumb{ min-height:72px; min-width:72px; } #wizard.sheet--kitchen .ans:hover{ background:#f8f9fa; border-color:rgba(0,0,0,0.18); } #wizard.sheet--kitchen .ans.on{ border-color:var(--brand); background:rgba(255,215,0,0.15); color:#1a1a1a; } #wizard.sheet--kitchen .field{ background:#fff; border:1px solid rgba(0,0,0,0.12); color:#1a1a1a; border-radius:12px; padding:14px 16px; font-size:16px; } #wizard.sheet--kitchen .field::placeholder{ color:#94a3b8; } #wizard.sheet--kitchen .btn.ghost{ background:#f8f9fa; border:1px solid rgba(0,0,0,0.1); color:#1a1a1a; } #wizard.sheet--kitchen .mini{ color:#64748b; font-size:12px; } /* Vorschau-Bereich (kein Livebild): kompakt, klar */ #wizard.sheet--kitchen #listingPreview{ margin-top:20px; padding-top:16px; border-top:1px solid rgba(0,0,0,0.08); } #wizard.sheet--kitchen #listingPreview .hint{ font-size:12px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; } #wizard.sheet--kitchen #listingPreview .listing-preview-badge{ background:rgba(46,125,50,0.1); border:1px solid rgba(46,125,50,0.3); border-radius:12px; padding:12px; } #wizard.sheet--kitchen #listingPreview .listing-preview-badge div{ color:#2e7d32; font-weight:700; } #wizard.sheet--kitchen #listingPreview .listing-preview-subline{ color:#64748b; } #wizard.sheet--kitchen .listing-reuse-preview{ background:rgba(31,157,85,0.08) !important; border:1px solid rgba(46,175,80,0.25) !important; border-radius:12px; padding:12px; } #wizard.sheet--kitchen .listing-reuse-preview span{ color:#1a1a1a; } #wizard.sheet--kitchen .listing-hint-box{ background:#f8f9fa !important; border:1px solid rgba(0,0,0,0.08) !important; border-radius:12px; padding:12px; } #wizard.sheet--kitchen .listing-hint-box div{ color:#1a1a1a !important; } #wizard.sheet--kitchen .listing-cost-block{ background:#f8f9fa !important; border:1px solid rgba(0,0,0,0.08); border-radius:12px; padding:14px; } #wizard.sheet--kitchen .listing-cost-block div{ color:#1a1a1a; } #wizard.sheet--kitchen .listing-cost-block .listing-cost-muted{ color:#64748b; } #wizard.sheet--kitchen .listing-cost-block.listing-cost-green{ background:rgba(46,125,50,0.1) !important; border:1px solid rgba(46,125,50,0.3); } #wizard.sheet--kitchen .listing-cost-block.listing-cost-green div{ color:#2e7d32; } #wizard.sheet--kitchen .listing-datum-summary .listing-datum-day{ color:#1a1a1a; font-weight:800; } #wizard.sheet--kitchen .listing-datum-summary .hint{ color:#64748b; } /* Inseratflow: Sticky Bottom – Glas, Emerald-Button (JETZT INSERIEREN) */ .listing-sticky-footer{ position:sticky; bottom:0; left:0; right:0; margin:16px -20px 0; padding:14px 20px 20px; padding-bottom:calc(20px + env(safe-area-inset-bottom, 0)); background:linear-gradient(to top, rgba(255,255,255,0.92) 60%, rgba(255,255,255,0.85)); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 -4px 24px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8); border-radius:24px 24px 0 0; border-top:1px solid rgba(255,255,255,0.5); } /* Potenzial heute: groß Emerald, 4,99 € daneben klein */ .revenue-card-enter{ animation: revenueCardBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes revenueCardBounce{ 0%{ opacity:0; transform:translateY(12px); } 60%{ opacity:1; transform:translateY(-2px); } 100%{ opacity:1; transform:translateY(0); } } /* Bild-Platzhalter: Shimmer/Skeleton während Laden */ .wizard-img-skeleton::after{ content:''; position:absolute; inset:0; background:linear-gradient(95deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); background-size:200% 100%; animation:wizardShimmer 1.2s ease-in-out infinite; } @keyframes wizardShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } } /* ========== INSERATSFLOW (TOTALER RESET & SILICON VALLEY) ========== */ /* Edge-to-Edge: Foto volle Breite, keine inneren Abstände [cite: 2026-02-18 MITTAGIO_MASTER_RULES] */ #wizard[data-flow="listing"] .handle { display: none !important; } #wizard[data-flow="listing"] .liquid-master-panel.listing-glass-panel, #wizard[data-flow="listing"] .liquid-master-panel.glass-express-step0, #wizard[data-flow="listing"] .liquid-master-panel.s25-floating-panel { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Sheet: feste Höhe + Flex, damit innen nur .inserat-scroll-area scrollt */ #wizard[data-flow="listing"].sheet--kitchen.active { max-height: 100dvh !important; height: 100vh !important; height: 100dvh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #wizard[data-flow="listing"].sheet--kitchen .sheet-body.wizard-sheet-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 !important; } #wizard[data-flow="listing"].sheet--kitchen .wizard { padding: 0 !important; } /* wizard-inner: fehlende Flex-Kette – ohne das kollabiert alles auf 0 Höhe */ #wizard[data-flow="listing"].sheet--kitchen .wizard-inner { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; overflow: hidden !important; } /* Neutralisierung des alten Wizards [cite: 2026-02-14] */ #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll { overflow: hidden !important; flex: 1; min-height: 0; display: flex !important; flex-direction: column !important; padding: 0 !important; margin: 0 !important; /* Negativer Margin aus .wizard-scroll aufheben */ } #wizard[data-flow="listing"] .w-actions { display: none !important; } /* Universal-X: absolut rechts im Header */ .close-wizard-x, #wizard[data-flow="listing"] .close-wizard-x { background: none; border: none; box-shadow: none; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .close-wizard-x:active { opacity: 0.5; } .close-wizard-x::before, .close-wizard-x::after { content: none; } /* Universal-X: Pop-Away (Implosion) beim Schließen [cite: 2026-02-16 S25] */ #wizard[data-flow="listing"] .liquid-master-panel.x-pop-away { animation: x-pop-away 0.28s cubic-bezier(0.55, 0, 0.45, 1) forwards; } @keyframes x-pop-away { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.92); opacity: 0; } } /* Harmonic-Edit-Mode: gesamte Action-Row (Pills + Preis) bounce bei Tastenschlag Titel [cite: 2026-02-16] */ #wizard[data-flow="listing"] .inserat-cat-price-row.harmonic-bounce { animation: harmonic-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes harmonic-bounce { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 70% { transform: scale(0.98); } 100% { transform: scale(1); } } /* Hero-Morph: gelber Preis-Button expandiert zu 4rem-Zahlenfeld in der Mitte [cite: 2026-02-16 S25] */ #wizard[data-flow="listing"] .inserat-cat-price-row.hero-morph-active, #wizard[data-flow="listing"] .price-section.hero-morph-active { flex-wrap: wrap; } #wizard[data-flow="listing"] .inserat-cat-price-row.hero-morph-active .inserat-price-pill-wrap, #wizard[data-flow="listing"] .price-section.hero-morph-active .inserat-price-pill-wrap { width: 100%; max-width: 100%; justify-content: center; padding: 16px; border-radius: 20px; transition: width 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.35s ease; background: #f8fafc; } #wizard[data-flow="listing"] .inserat-cat-price-row.hero-morph-active .inserat-price-pill-input.inserat-price-fintech, #wizard[data-flow="listing"] .price-section.hero-morph-active .inserat-price-pill-input.inserat-price-fintech { width: 140px; font-size: 4rem !important; text-align: center; } #wizard[data-flow="listing"] .inserat-cat-price-row.hero-morph-active .inserat-price-pill-euro, #wizard[data-flow="listing"] .price-section.hero-morph-active .inserat-price-pill-euro { font-size: 1.5rem; font-weight: 900; vertical-align: super; margin-left: 6px; } #wizard[data-flow="listing"] .inserat-cat-price-row:not(.hero-morph-active) .inserat-price-pill-wrap, #wizard[data-flow="listing"] .price-section:not(.hero-morph-active) .inserat-price-pill-wrap { cursor: pointer; } #wizard[data-flow="listing"] .inserat-cat-price-row:not(.hero-morph-active) .inserat-price-pill-wrap .inserat-price-pill-input, #wizard[data-flow="listing"] .price-section:not(.hero-morph-active) .inserat-price-pill-wrap .inserat-price-pill-input { pointer-events: none; } #wizard[data-flow="listing"] .inserat-cat-price-row.hero-morph-active .inserat-price-pill-wrap .inserat-price-pill-input, #wizard[data-flow="listing"] .price-section.hero-morph-active .inserat-price-pill-wrap .inserat-price-pill-input { pointer-events: auto; } /* Pure-Clean InseratCard: Kein Kasten, direkt auf beigem Hintergrund [cite: 2026-02-20 Schritt 2.3] */ .liquid-master-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: transparent; border: none; box-shadow: none; } #wizard[data-flow="listing"].sheet--kitchen .liquid-master-panel { margin: 0; border-radius: 0; border: none; min-height: 0; flex: 1; font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif; background: transparent; } #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll #wContent{ flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; } /* InseratCard: sheet ist direktes Kind von #wContent, liquid-master-panel darin [cite: Mastercard Step1 Fix 2026-03-02] */ #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll #wContent > .inserat-card-sheet{ flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll #wContent > .inserat-card-sheet > .liquid-master-panel, #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll #wContent > .liquid-master-panel{ flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* Bereich-Steuerung: Fixed Cockpit kein Scroll [cite: S25-FIXED-COCKPIT 2026-03-11] */ .liquid-master-panel .scroll-content, .liquid-master-panel .inserat-scroll-area { flex: 1; min-height: 0; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; } #wizard[data-flow="listing"] .inserat-scroll-area { padding: 60px 0 120px; overflow-y: auto; font-family: var(--font-main); -webkit-overflow-scrolling: touch; } /* App-like: ein Bildschirm, klare Sektionen [cite: Plan Inseratsflow] */ .liquid-master-panel .inserat-scroll-area { --inserat-section-gap: 28px; } .liquid-master-panel .inserat-section { margin-bottom: var(--inserat-section-gap, 28px); } .liquid-master-panel .inserat-section-label { font-size: 10px; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 8px; display: block; } /* Floating-Layer: 96px Abstand (12+68+16) – Buttons berühren Nav-Pille NIEMALS [cite: 2026-02-18] */ .liquid-master-panel .fixed-footer, .liquid-master-panel .inserat-action-section { flex-shrink: 0; padding: 20px; padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); margin-bottom: 0; background: transparent; border: none; box-shadow: none; } /* Magnet-Pulse Animation */ @keyframes magnet-pulse { 0%, 100% { border-bottom-color: rgba(16,185,129,0.5); } 50% { border-bottom-color: var(--emerald); } } .liquid-master-panel #step-name input.magnet-input:focus { animation: magnet-pulse 1.2s ease-in-out infinite; } /* Ghost-Price: Pulsierender Placeholder 8,90 € [cite: 2026-02-21] */ @keyframes ghostPulse { 0% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.01); } 100% { opacity: 0.3; transform: scale(1); } } #wizard[data-flow="listing"] .price-input-wrapper input.price-field::placeholder, #wizard[data-flow="listing"] .price-field::placeholder { color: #64748b; font-weight: 700; animation: ghostPulse 3s cubic-bezier(0.4, 0, 0.2, 1) infinite; } #wizard[data-flow="listing"] .price-field:focus { outline: none; border-bottom: 2px solid #10b981; transition: border-color 0.3s ease; } /* Collapsing Header „Dein Inserat“ [cite: 2026-02-21 Inseratsbüro] */ /* Fixer Header: „Dein Inserat“ bleibt stehen, Inhalt scrollt darunter weg */ #wizard[data-flow="listing"] .inserat-collapsing-header { position: sticky !important; top: 0 !important; z-index: 20; flex-shrink: 0; background: #fff !important; border-bottom: 1px solid rgba(0,0,0,0.06); } #wizard[data-flow="listing"] .inserat-collapsing-header .inserat-collapsing-title { font-size: 18px; font-weight: 800; color: #0f172a; transition: font-size 0.25s ease; } #wizard[data-flow="listing"] .inserat-collapsing-header.is-scrolled .inserat-collapsing-title { font-size: 14px; font-weight: 700; } #wizard[data-flow="listing"] .inserat-collapsing-header.is-scrolled { padding: 8px 16px; } /* Tunnel-Blick: Nav ausblenden wenn Inseratsauswahl ODER Mastercard offen [cite: 2026-02-21] */ /* Mastercard-Footer Airbnb-Style: weiß, bündig, schwarzer Button [cite: 2026-02-23, LAYOUT-FIX 2026-02-28] */ /* Footer: position:fixed ist bereits inline gesetzt (z-index:1000002) – nur dekorative Regeln hier [cite: S25-GRID-FIX 2026-03-12] */ body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-action-section.inserat-action-layer, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-action-section.inserat-action-pricing { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; z-index: 1000002 !important; display: flex !important; flex-direction: column !important; padding: 12px 20px !important; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; background: #ffffff !important; border-top: 1px solid #ebebeb !important; } /* Footer-Padding: Safe-Area [cite: 2026-02-23] */ body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .liquid-master-panel .inserat-action-section { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; } /* Scroll-Bereich: Platz für fixierten Footer (Fixed Cockpit) [cite: S25-FIXED-COCKPIT 2026-03-11] */ body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-scroll-area { padding-bottom: 120px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } /* Step1-Nav: 2 Buttons gleich groß wie system-bottom-nav (48px, gap 12px) */ body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-step1-nav { display: flex !important; gap: 12px !important; width: 100% !important; min-height: 48px !important; align-items: stretch !important; } body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-step1-nav .btn-secondary-link { flex: 0 !important; min-width: auto !important; min-height: 48px !important; border-radius: 0 !important; background: transparent !important; color: #222222 !important; text-decoration: underline; } body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-step1-nav .btn-primary-black { flex: 1 !important; min-height: 48px !important; height: 48px !important; border-radius: 8px !important; background: #222222 !important; color: #ffffff !important; opacity: 0.4; pointer-events: none; transition: all 0.3s ease; } body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-step1-nav .btn-primary-black.is-ready { background: #222222 !important; color: #ffffff !important; opacity: 1; pointer-events: auto; } /* S25: Scroll-Bereich padding-top = Header + Safe-Area, Foto bündig unter Header (0px Spalt) */ #wizard[data-flow="listing"] .mastercard-scroll-area.wizard-scroll-container, #wizard[data-flow="listing"] #mastercard-step-edit .inserat-scroll-area { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; } /* Bild im Scroll-Fluss: Edge-to-Edge, keine Rundungen [cite: 2026-02-21 Inseratsbüro] */ #wizard[data-flow="listing"] .inserat-scroll-area.inserat-scroll-with-photo { padding-top: 0 !important; } /* Edge-to-Edge Photo: Bild berührt Bildschirmrand links/rechts, kein border-radius */ #wizard[data-flow="listing"] .inserat-cockpit-photo.inserat-photo-container, #wizard[data-flow="listing"] .inserat-photo-container.photo-container { width: 100vw !important; max-width: 100vw !important; margin-left: calc(-50vw + 50%) !important; margin-right: 0 !important; padding: 0 !important; border-radius: 0 !important; overflow: hidden !important; } #wizard[data-flow="listing"] .inserat-photo-in-scroll, #wizard[data-flow="listing"] .inserat-photo-tile { width: 100% !important; border-radius: 0 !important; } /* Pills direkt unter Bild, großer Titel (H1) darunter [cite: Airbnb Collapsing] */ #wizard[data-flow="listing"] .inserat-content-sheet.wizard-content .floating-badges { margin-top: 0 !important; margin-bottom: 0; padding-bottom: 0; } #wizard[data-flow="listing"] .wizard-content #step-name, #wizard[data-flow="listing"] .inserat-content-sheet #step-name { margin-top: 6px !important; transition: opacity 0.25s ease-out; } #wizard[data-flow="listing"] .wizard-content #step-name .input-giant-name.inserat-detail-style-title, #wizard[data-flow="listing"] #mastercard-step-edit #step-name input.ghost-input.inserat-detail-style-title { font-size: 28px !important; font-weight: 800 !important; } /* ghost-input: Placeholder pulsierend (z.B. Jägerschnitzel) [cite: 2026-02-21] */ #wizard[data-flow="listing"] .ghost-input::placeholder { animation: ghost-placeholder-pulse 2.5s ease-in-out infinite; } @keyframes ghost-placeholder-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.9; } } /* Pulsierende leere Felder (atmen): Preis, Gericht [cite: 2026-02-21] */ #wizard[data-flow="listing"] .inserat-price-input::placeholder, #wizard[data-flow="listing"] .price-field::placeholder, #wizard[data-flow="listing"] .inserat-price-pill-input::placeholder { animation: ghost-placeholder-pulse 2.5s ease-in-out infinite; } #wizard[data-flow="listing"] #step-name input.ghost-input::placeholder { animation: ghost-placeholder-pulse 2.5s ease-in-out infinite; } /* Textarea Beschreibung: kein harter Rahmen */ #wizard[data-flow="listing"] .inserat-desc-textarea, #wizard[data-flow="listing"] .inserat-desc-no-frame textarea { border: none !important; box-shadow: none !important; } /* Guided Interaction: Pulsieren des Foto-Bereichs bei leerer Karte [cite: 2026-01-29] */ @keyframes inserat-card-photo-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16,185,129,0.25); } 50% { opacity: 0.92; box-shadow: 0 0 0 8px rgba(16,185,129,0.08); } } #wizard[data-flow="listing"] .photo-header.inserat-card-photo-pulse, #wizard[data-flow="listing"] .inserat-photo-tile.inserat-card-photo-pulse { animation: inserat-card-photo-pulse 1.8s ease-in-out infinite; } /* InseratCard klickbar: explizit pointer-events, damit keine Überlagerung Klicks schluckt */ #wizard[data-flow="listing"] #wContent > .liquid-master-panel, #wizard[data-flow="listing"] .liquid-master-panel.inserat-card { pointer-events: auto; } /* Pure-Clean: InseratCard ohne Box [cite: 2.3] */ #wizard[data-flow="listing"] .liquid-master-panel.inserat-card { border-radius: 0; box-shadow: none; } #wizard[data-flow="listing"] .liquid-master-panel .photo-header, #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar, #wizard[data-flow="listing"] .liquid-master-panel .inserat-cat-price-row, #wizard[data-flow="listing"] .liquid-master-panel .inserat-action-section, #wizard[data-flow="listing"] .liquid-master-panel .inserat-scroll-area { pointer-events: auto; } /* Goldene Sammelkarte: Header-Bild Ratio 3:2, No-Scroll S25 [cite: 2026-02-14, 2026-02-16] */ .liquid-master-panel .photo-header, .liquid-master-panel .inserat-photo-tile.photo-header { width: 100%; aspect-ratio: 3/2; max-height: min(260px, 38vh); flex-shrink: 0; height: auto; min-height: 0; transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } /* Listing: Foto 250px – scrollt normal unter Fixed Header [cite: S25-PREMIUM-NAV 2026-03-11] */ #wizard[data-flow="listing"] .liquid-master-panel .photo-header, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header { height: 250px !important; min-height: 250px !important; max-height: 250px !important; aspect-ratio: auto; box-shadow: none; border: none; } .liquid-master-panel .photo-header img, .liquid-master-panel .inserat-photo-tile.photo-header img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .photo-header.inserat-photo-loading::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; z-index: 12; } .photo-header.inserat-photo-loading .inserat-photo-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 13; width: 44px; height: 44px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: inserat-spin 0.8s linear infinite; } @keyframes inserat-spin { to { transform: translate(-50%,-50%) rotate(360deg); } } /* Photo Lightbox: Überlagert ALLES (Sheet, Footer), Zoom-In aus Mastercard [cite: FINALIZE SHEET 2026-02-23] */ #photo-lightbox.photo-lightbox-overlay { position: fixed !important; inset: 0 !important; background: #000 !important; z-index: 20000 !important; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: flex; align-items: center; justify-content: center; } #photo-lightbox .photo-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: pointer; } #photo-lightbox .photo-lightbox-close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); } /* Keyboard-Avoidance: Header schrumpft bei aktivem Input (Titel/Preis) [cite: 2026-02-16] */ #wizard[data-flow="listing"] .liquid-master-panel.inserat-keyboard-active .photo-header, #wizard[data-flow="listing"] .liquid-master-panel.inserat-keyboard-active .inserat-photo-tile.photo-header { max-height: 120px !important; aspect-ratio: 3/2; } #wizard[data-flow="listing"].sheet--kitchen .liquid-master-panel .photo-header, #wizard[data-flow="listing"].sheet--kitchen .liquid-master-panel .inserat-photo-tile.photo-header { border-radius: 0; width: 100%; margin: 0; margin-top: 0; padding: 0; } .liquid-master-panel .photo-header.inserat-photo-tile .inserat-photo-placeholder, .liquid-master-panel .photo-header:not(:has(img[src])) { background: #f8fafc; display: flex; align-items: center; justify-content: center; gap: 15px; overflow: hidden; } /* Header-Morph: selection-overlay für Allergene/Extras im Header (Frosted Glass) */ #wizard[data-flow="listing"] .photo-header .selection-overlay { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 20px 45px 20px 20px; opacity: 0; pointer-events: none; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; z-index: 15; } #wizard[data-flow="listing"] .photo-header.is-selecting .selection-overlay { opacity: 1; pointer-events: auto; backdrop-filter: blur(25px) saturate(160%); -webkit-backdrop-filter: blur(25px) saturate(160%); background: rgba(255,255,255,0.2); } #wizard[data-flow="listing"] .photo-header img { transition: transform 0.4s, filter 0.4s; } #wizard[data-flow="listing"] .photo-header.is-selecting img { transform: scale(1.1); filter: brightness(0.7) blur(25px); } #wizard[data-flow="listing"] .photo-header.is-selecting .inserat-photo-placeholder { filter: blur(25px); opacity: 0.8; } #wizard[data-flow="listing"] .photo-header .selection-overlay-inner { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; align-items: center; gap: 8px; width: 100%; } /* UNIFIED: Pills im Selection-Overlay = Schwarz-Weiß [cite: 2026-02-23] */ body.provider-mode #wizard[data-flow="listing"] .photo-header .selection-overlay .extra-pill, body.provider-mode #wizard[data-flow="listing"] .photo-header .selection-overlay .inserat-allergen-pill { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid #ebebeb; background: #ffffff; color: #1a1a1a; cursor: pointer; transition: background 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; } body.provider-mode #wizard[data-flow="listing"] .photo-header .selection-overlay .extra-pill.active { background: #222222; color: #ffffff; border-color: #222222; } body.provider-mode #wizard[data-flow="listing"] .photo-header .selection-overlay .inserat-allergen-pill.active { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; } #wizard[data-flow="listing"] .photo-header .selection-overlay-inner.selection-overlay-inner--time { display: flex; align-items: center; justify-content: center; } /* ========== Inserat Bottom-Sheet (Allergen-Auswahl): fixiert unten, S25 Native [cite: 2026-02-18] ========== */ .inserat-bottom-sheet-backdrop { position: fixed; inset: 0; z-index: 1100000; background: rgba(0,0,0,0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .inserat-bottom-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; } /* UNIFIED: Bottom-Sheet im Anbieterbereich = Airbnb-Footer-Look [cite: 2026-02-23] */ body.provider-mode .inserat-bottom-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200000; width: 100%; max-width: 100vw; border-radius: 24px 24px 0 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0)); background: #ffffff !important; border-top: 1px solid #ebebeb; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); } body.provider-mode .inserat-bottom-sheet.is-open { transform: translateY(0); } body.provider-mode .inserat-bottom-sheet .inserat-sheet-handle { width: 44px; height: 5px; background: #ebebeb; border-radius: 3px; margin: 0 auto 16px; } /* Pills: Schwarz-Weiß, keine bunten Farben */ body.provider-mode .inserat-bottom-sheet .inserat-allergen-pill { padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; border: 1px solid #ebebeb; background: #ffffff; color: #1a1a1a; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; } body.provider-mode .inserat-bottom-sheet .inserat-allergen-pill.active { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; } /* Fertig-Button: identisch zum Footer (#222222, 8px Radius) */ body.provider-mode .inserat-bottom-sheet .inserat-sheet-done, body.provider-mode #wizard[data-flow="listing"] .inserat-fertig-kachel { width: 100%; min-height: 56px; padding: 16px 24px; margin-top: 20px; border-radius: 8px; border: none; background: #222222 !important; color: #ffffff !important; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.1s ease; } body.provider-mode .inserat-bottom-sheet .inserat-sheet-done:active, body.provider-mode #wizard[data-flow="listing"] .inserat-fertig-kachel:active { transform: scale(0.98); } .inserat-power-bar .inserat-allergen-codes { font-size: 10px; font-weight: 800; color: #0f172a; letter-spacing: 0.02em; margin-left: 4px; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* InseratCard-Wrapper: TGTG flach, Inset-Divider statt Schatten [cite: Plan Tabula Rasa] */ #wizard[data-flow="listing"] .inserat-card-sheet { width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 24px 24px 0 0; background: #fff; box-shadow: none; border-top: var(--tgtg-divider, 1px solid rgba(0,0,0,0.06)); } /* Bild volle Breite oben, kein weißer Rand [cite: 2026-02-18] */ #wizard[data-flow="listing"] .inserat-card-sheet .photo-header, #wizard[data-flow="listing"] .inserat-card-sheet .inserat-photo-tile.photo-header { height: 250px !important; min-height: 250px !important; max-height: 250px !important; object-fit: cover; width: 100%; margin: 0; border-radius: 0; border: none; } #wizard[data-flow="listing"] .inserat-card-sheet .inserat-detail-style-title, #wizard[data-flow="listing"] .inserat-card-sheet .magnet-input { color: #0f172a; font-weight: 800; } #wizard[data-flow="listing"] .inserat-card-sheet .inserat-airbnb-desc, #wizard[data-flow="listing"] .inserat-card-sheet .inserat-desc-input { color: #64748b; } /* eBay-Header Clean-up: Kein „Foto ändern“-Button – nur dezentes Kamera-Icon in der Ecke [cite: 2026-02-21 Step 2] */ #wizard[data-flow="listing"] .liquid-master-panel .photo-header .inserat-photo-change, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header .inserat-photo-change { display: none !important; } #wizard[data-flow="listing"] .liquid-master-panel .photo-header .inserat-photo-edit-icon, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header .inserat-photo-edit-icon { position: absolute; top: 12px; right: 12px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.12s ease, background 0.2s ease; } #wizard[data-flow="listing"] .liquid-master-panel .photo-header .inserat-photo-edit-icon:active, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header .inserat-photo-edit-icon:active { transform: scale(0.95); background: rgba(0,0,0,0.4); } /* Pricing-Label über Buttons: dezenter Puls; auf schmalen Displays kleiner [cite: 2026-02-16] */ .pricing-info-label { cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 500; color: #94a3b8; margin-bottom: 8px; -webkit-tap-highlight-color: transparent; animation: gentle-pulse 3s infinite ease-in-out; } @media (max-width: 400px) { #wizard[data-flow="listing"] .pricing-info-label { font-size: 11px; } } /* No-Scroll UI (S25): Karte + Buttons ohne Scrollen sichtbar [cite: 2026-02-14] */ @media (max-height: 700px) { #wizard[data-flow="listing"] .liquid-master-panel .photo-header, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header { height: 140px !important; min-height: 140px !important; } #wizard[data-flow="listing"] .liquid-master-panel.inserat-keyboard-active .photo-header, #wizard[data-flow="listing"] .liquid-master-panel.inserat-keyboard-active .inserat-photo-tile.photo-header { height: 100px !important; min-height: 100px !important; } #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar { padding: 8px 16px; } #wizard[data-flow="listing"] .liquid-master-panel .inserat-section { padding-top: 8px; padding-bottom: 8px; } #wizard[data-flow="listing"] .liquid-master-panel #step-name input.inserat-detail-style-title { font-size: var(--size-h2) !important; } #wizard[data-flow="listing"] .liquid-master-panel .inserat-price-section input.inserat-price-fintech { font-size: 3rem !important; } } @keyframes gentle-pulse { 0% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; text-shadow: 0 0 8px rgba(16,185,129,0.2); } 100% { transform: scale(1); opacity: 0.8; } } /* Leerer Foto-Header: dezentes Pulsieren (Marken-Grün) [cite: plan Smart-Photo] */ #wizard[data-flow="listing"] .liquid-master-panel .photo-header.pulse-soft, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; } @keyframes pulse-soft { 0%, 100% { border-bottom: 2px solid rgba(16,185,129,0.2); } 50% { border-bottom: 2px solid rgba(16,185,129,0.45); } } /* Neues Bild: Fade-in [cite: plan Smart-Photo] */ #wizard[data-flow="listing"] .liquid-master-panel .photo-header img.inserat-photo-fade-in, #wizard[data-flow="listing"] .liquid-master-panel .inserat-photo-tile.photo-header img.inserat-photo-fade-in { animation: inserat-photo-fade-in 0.5s ease forwards; } @keyframes inserat-photo-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* Smart-Photo: Vorschaubilder (3 Standard-Bilder / imageMap) */ .photo-suggestion { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid transparent; transition: all 0.2s ease; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .photo-suggestion:active { transform: scale(0.9); border-color: #10b981; } /* Status-Leiste: Pills direkt unter dem Bild (🍴 Vor Ort, 🔄 Mehrweg) */ .inserat-status-bar { display: flex; gap: 12px; padding: 12px 20px; flex-shrink: 0; background: transparent; justify-content: center; align-items: center; } .inserat-status-bar .status-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 2px solid transparent; min-height: 44px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; -webkit-tap-highlight-color: transparent; } .inserat-status-bar .status-pill.active { background: #10b981; color: #fff; } .inserat-status-bar .status-pill.inactive { background: rgba(0,0,0,0.06); color: #64748b; filter: grayscale(0.5); } .inserat-status-bar .status-pill:active { transform: scale(0.98); } .inserat-status-bar .status-pill { flex-shrink: 0; } /* Listing-Flow: Unified – nur 🍴 🔄 Pills, Emerald wenn aktiv */ #wizard[data-flow="listing"] .inserat-status-bar.inserat-unified-pills .status-pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; border: 2px solid transparent; min-height: 44px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; -webkit-tap-highlight-color: transparent; } #wizard[data-flow="listing"] .inserat-status-bar.inserat-unified-pills .status-pill.active { background: #10b981; color: #fff; } #wizard[data-flow="listing"] .inserat-status-bar.inserat-unified-pills .status-pill.inactive { background: rgba(0,0,0,0.06); color: #64748b; } #wizard[data-flow="listing"] .inserat-status-bar.inserat-unified-pills .status-pill:active { transform: scale(0.98); } /* Goldene Sammelkarte: Power-Bar – aktive Icons weiß + Emerald-Border/Shadow, 44x44 [cite: 2026-01-27, 2026-02-16] */ #wizard[data-flow="listing"] .inserat-power-bar.inserat-unified-pills .status-pill.active { background: #fff; color: #059669; border: 2px solid #10b981; } #wizard[data-flow="listing"] .inserat-power-bar.inserat-unified-pills .status-pill.inactive { background: rgba(248,250,252,0.8); color: #64748b; border: 2px solid transparent; } #wizard[data-flow="listing"] .inserat-power-bar .func-icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; border: 2px solid rgba(0,0,0,0.08); background: rgba(248,250,252,0.8); transition: background 0.2s, color 0.2s, transform 0.1s cubic-bezier(0.4,0,0.2,1); cursor: pointer; -webkit-tap-highlight-color: transparent; } #wizard[data-flow="listing"] .inserat-power-bar .func-icon-btn.active { background: #f1f5f9; color: #0f172a; border-color: rgba(0,0,0,0.12); } #wizard[data-flow="listing"] .inserat-power-bar .func-icon-btn:active { transform: scale(0.9); } /* Layout-Lock: Power-Bar feste Flex-Row unter dem Bild – Icons verschieben sich nie [Stabilität] */ .inserat-power-bar { display: flex; align-items: center; flex-shrink: 0; flex-wrap: nowrap; } .inserat-power-bar .status-pill, .inserat-power-bar .func-icon-btn, .inserat-power-bar .power-bar-legend-trigger { flex-shrink: 0; } /* Power-Bar Icon-Only (S25): 44x44px Touch-Targets, space-between [cite: 2026-02-16] */ #wizard[data-flow="listing"] .inserat-power-bar.inserat-unified-pills { justify-content: space-between; padding-left: 16px; padding-right: 16px; } /* S25 High-End: Power-Bar Icons 20% kleiner, eine Zeile, Emerald-Glow für Toggles [cite: 2026-02-16] */ #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar.inserat-unified-pills { flex-wrap: nowrap; gap: 6px 12px; padding: 6px 12px; margin-top: -4px; } #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar .status-pill { min-width: 35px; min-height: 35px; padding: 6px; justify-content: center; transition: transform 0.1s cubic-bezier(0.4,0,0.2,1); } #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar .status-pill span { font-size: 14px !important; } #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar .func-icon-btn { width: 35px; height: 35px; min-width: 35px; min-height: 35px; font-size: 16px; } #wizard[data-flow="listing"] .liquid-master-panel .inserat-power-bar .power-bar-legend-trigger { min-width: 35px; min-height: 35px; width: 35px; height: 35px; font-size: 12px; } #wizard[data-flow="listing"] .inserat-power-bar .status-pill:active { transform: scale(0.9); } #wizard[data-flow="listing"] .inserat-power-bar .power-bar-legend-trigger:hover, #wizard[data-flow="listing"] .inserat-power-bar .power-bar-legend-trigger:focus { color: #64748b; } /* Power-Bar: Kein grauer Hintergrund, Emerald-Glow hinter Icons [cite: 2026-02-18 Master Card] */ #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell { background: transparent; padding: 10px 16px; gap: 8px; flex-wrap: nowrap; justify-content: space-between; } #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .status-pill, #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .func-icon-btn, #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .power-bar-legend-trigger { min-width: 44px; min-height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; background: transparent; border: none; box-shadow: none; color: #94a3b8; } #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .power-bar-legend-trigger { color: #94a3b8; } #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .inserat-pill-emo { font-size: 14px; } #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .power-bar-legend-round { width: 44px; height: 44px; border-radius: 50%; font-size: 14px; } /* Inaktiv: transparent, kein grauer Hintergrund */ #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .status-pill.inactive, #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .func-icon-btn:not(.active), #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .power-bar-legend-trigger { background: transparent !important; border: none !important; box-shadow: none !important; color: #94a3b8; } /* Aktiv: neutral Grau/Schwarz – kein Grün [cite: FINALE POLISH 2026-02-21] */ #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .status-pill.active, #wizard[data-flow="listing"] .inserat-power-bar.inserat-soft-shell .func-icon-btn.active { background: #f1f5f9 !important; color: #0f172a !important; border: none !important; } /* Mastercard Footer: Airbnb-Style, weiß, 0 margin/radius [cite: 2026-02-23, LAYOUT-FIX 2026-02-28] */ body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-action-section.inserat-action-layer, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-action-section.inserat-action-pricing, #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] [data-inserat-step="2"].inserat-step1-nav, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; border-radius: 0 !important; background: #ffffff !important; border-top: 1px solid #ebebeb !important; padding: 16px 20px !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; min-height: 72px !important; box-sizing: border-box !important; } #wizard[data-flow="listing"] #mastercard-footer-step2 .btn-primary-black, #wizard[data-flow="listing"] [data-inserat-step="2"].inserat-step1-nav .btn-primary-black, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main .footer-btn-primary { background: #222222 !important; color: #ffffff !important; border-radius: 8px !important; min-height: 48px !important; } /* Step 2 CTA niemals durch Step1-Ready-Gates blockieren */ #wizard[data-flow="listing"] #mastercard-footer-step2 .btn-primary-black, #wizard[data-flow="listing"] #mastercard-footer-step2.inserat-step2-nav .btn-primary-black { pointer-events: auto !important; opacity: 1 !important; cursor: pointer !important; } #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] #mastercard-footer-step2.inserat-step2-nav { z-index: 2000001 !important; pointer-events: auto !important; } /* Bottom-Nav-Style: Beide Buttons gleich groß (48px), Airbnb Black [cite: 2026-02-21] */ #wizard[data-flow="listing"] .inserat-step1-nav { display: flex; gap: 12px; width: 100%; min-height: 48px; align-items: stretch; } #wizard[data-flow="listing"] .app-footer-main .btn-secondary-link { flex: 0 !important; min-width: auto; background: transparent !important; color: #222222 !important; text-decoration: underline; } #wizard[data-flow="listing"] .app-footer-main .btn-secondary-link:hover, #wizard[data-flow="listing"] .app-footer-main .btn-secondary-link:focus { background: transparent !important; color: #222222 !important; opacity: 0.9; } #wizard[data-flow="listing"] .app-footer-main .btn-primary-black { flex: 1; min-height: 48px; border-radius: 8px !important; box-shadow: none !important; border: none !important; } #wizard[data-flow="listing"] .app-footer-main .btn-secondary-link:active, #wizard[data-flow="listing"] .app-footer-main .btn-primary-black:active { transform: scale(0.98); } /* Scroll-Bereich: Platz für Footer, letzter Preis-Eintrag komplett sichtbar [cite: FINALIZE SHEET 2026-02-23] */ body.provider-mode #wizard[data-flow="listing"] .liquid-master-panel:has(.inserat-action-layer) .inserat-scroll-area { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0)); } body.provider-mode:not(.wizard-inserat-open) #wizard[data-flow="listing"] .inserat-action-section.inserat-action-layer { position: fixed; bottom: calc(96px + env(safe-area-inset-bottom, 0)); left: 16px; right: 16px; z-index: 10; } .pricing-card { border: 2px solid #f1f5f9; border-radius: 16px; padding: 24px 12px; text-align: center; background: #ffffff; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; } .pricing-card.selected, .pricing-card.is-selected { border-color: #10b981 !important; background: rgba(16, 185, 129, 0.04); box-shadow: 0 0 0 1px #10b981, 0 10px 25px rgba(16, 185, 129, 0.15); transform: scale(1.02); } /* Checkout-Flow: Step 1 → Step 2 Slide-Animation [cubic-bezier 0.4,0,0.2,1] */ .inserat-steps-slider { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } .inserat-steps-track { display: flex; width: 100%; max-width: 100%; flex: 1; min-height: 0; transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1); } .inserat-steps-slider[data-inserat-step="1"] .inserat-steps-track { transform: translateX(0); } .inserat-steps-slider[data-inserat-step="2"] .inserat-steps-track { transform: translateX(-100%); } .inserat-steps-slider[data-inserat-step="3"] .inserat-steps-track { transform: translateX(-200%); } .inserat-step1-pane, .inserat-step2-pane, .inserat-step3-pane { width: 100%; max-width: 100%; flex: 0 0 100%; min-height: 0; display: flex; flex-direction: column; } /* Step 2: Live-Flow-Card (Smartphone-Mockup) */ .inserat-live-flow-card { width: 120px; height: 200px; margin: 0 auto 16px; border-radius: 16px; overflow: hidden; background: linear-gradient(145deg, #1a1a1a 0%, #2d2d2d 100%); box-shadow: 0 12px 36px rgba(0,0,0,0.35); position: relative; border: 4px solid #0f0f0f; flex-shrink: 0; } .inserat-live-flow-card-inner { position: absolute; inset: 8px 6px 24px; background: #f8f7f2; border-radius: 10px; overflow: hidden; } .inserat-live-flow-card .abholnummer-pop { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(16,185,129,0.95); color: #fff; font-size: 11px; font-weight: 900; animation: abholnummer-pop-in 0.5s cubic-bezier(0.34, 1.2, 0.64, 1) forwards; } @keyframes abholnummer-pop-in { 0% { opacity: 0; transform: translateX(-50%) scale(0.8); } 100% { opacity: 1; transform: translateX(-50%) scale(1); } } /* Pro-Wahl: 🧾 leuchtendes Overlay auf Gerichtsbild */ .inserat-step2-preview.has-pro-overlay::after { content: '🧾'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 48px; filter: drop-shadow(0 0 12px rgba(16,185,129,0.8)); animation: inserat-abholnummer-glow 1.5s ease-in-out infinite; pointer-events: none; } @keyframes inserat-abholnummer-glow { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(16,185,129,0.8)); } 50% { opacity: 0.85; filter: drop-shadow(0 0 20px rgba(16,185,129,1)); } } .inserat-step2-abholnummer-badge { transition: opacity 0.25s; } /* Success-Glow (Step 2 → 3) */ .inserat-success-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; } .inserat-success-glow.animate { opacity: 1; animation: success-glow-sweep 0.6s ease-out forwards; } @keyframes success-glow-sweep { 0% { background: linear-gradient(90deg, rgba(16,185,129,0.4) 0%, transparent 50%); } 50% { background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.5) 50%, transparent 100%); } 100% { background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.3) 100%); opacity: 0; } } .inserat-tiles-scale-down { animation: inserat-tiles-scale-down 0.35s cubic-bezier(0.4,0,0.2,1) forwards; } @keyframes inserat-tiles-scale-down { to { transform: scale(0.92); opacity: 0; } } /* Step 2: Slot-Machine Sweep – diagonaler Lichtblitz über gesamten Bildschirm [cite: 2026-02-21] */ .step2-slot-machine-sweep { position: fixed; inset: -50%; z-index: 999; pointer-events: none; width: 200%; height: 200%; } .step2-slot-machine-sweep::after { content: ''; display: block; position: absolute; top: 50%; left: -50%; width: 80%; height: 300%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.75) 35%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.75) 65%, transparent 100%); transform: translateY(-50%) rotate(-35deg); } .step2-slot-machine-sweep.animate::after { animation: step2-slot-sweep 0.55s ease-out forwards; } @keyframes step2-slot-sweep { 0% { transform: translateY(-50%) translateX(-80%) rotate(-35deg); opacity: 1; } 100% { transform: translateY(-50%) translateX(120%) rotate(-35deg); opacity: 0.3; } } /* Step 2 + Step 3: Full-Screen 100vh wenn aktiv [cite: 2026-02-21] */ #wizard.inserat-step2-active.sheet--kitchen, #wizard.inserat-step2-active[data-flow="listing"], #wizard.inserat-step3-active.sheet--kitchen, #wizard.inserat-step3-active[data-flow="listing"] { height: 100vh !important; max-height: 100vh !important; } /* Step 3: Live-Erfolg [cite: 2026-02-21] */ .inserat-step3-pane { position: relative; overflow: hidden; background: #f8fafc; } .inserat-step3-pane .success-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 10; } .inserat-step3-pane .inserat-step3-content { flex: 1; overflow: hidden; padding: 18px 20px calc(110px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; } .inserat-step3-pane .step3-success-title { margin: 0; text-align: center; font-size: 24px; font-weight: 900; color:#0f172a; line-height:1.2; } .inserat-step3-pane .live-status-card { margin: 0; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 14px 32px rgba(0,0,0,0.10); border: 1px solid #f1f5f9; } .inserat-step3-pane .live-card-badge { position: absolute; top: 12px; left: 12px; padding: 6px 12px; background: rgba(16,185,129,0.95); color: #fff; font-size: 12px; font-weight: 900; border-radius: 999px; z-index: 2; animation: livePulse 1.2s ease-in-out infinite; } .inserat-step3-pane .live-card-img { width: 100%; height: 160px; object-fit: cover; display: block; } .inserat-step3-pane .live-card-info { padding: 16px 20px; } .inserat-step3-pane .live-card-info h3 { margin: 0 0 4px; font-size: 17px; font-weight: 900; color: #0f172a; } .inserat-step3-pane .live-card-info p { margin: 0; font-size: 15px; font-weight: 700; color: #64748b; } .inserat-step3-pane .final-abhol-box { margin-top: 15px; padding: 12px; background: #f8fafc; border-radius: 12px; text-align: center; } .inserat-step3-pane .abhol-id { display: block; font-size: 24px; font-weight: 900; color: #10b981; } .inserat-step3-pane .step3-whatsapp-btn { width:100%; min-height:56px; border-radius:14px; border:2px solid #16a34a; background:#ffffff; color:#16a34a; font-size:16px; font-weight:800; cursor:pointer; } .inserat-step3-pane .step3-whatsapp-btn:active { transform: scale(0.98); } .inserat-step3-pane .step3-new-listing-btn { width:100%; min-height:52px; border-radius:12px; border:2px solid #111111; background:#ffffff; color:#111111; font-size:15px; font-weight:800; cursor:pointer; } .inserat-step3-pane .step3-overview-link { background:transparent; border:none; color:#475569; text-decoration:underline; font-size:15px; font-weight:700; cursor:pointer; padding:6px 0; } @keyframes livePulse { 0%{ transform: scale(1); } 50%{ transform: scale(1.06); } 100%{ transform: scale(1);} } .inserat-step3-pane #step3ConfettiContainer .confetti { position: absolute; width: 10px; height: 10px; background: #FFD700; border-radius: 2px; animation: confetti-fall 3s linear forwards; top: -20px; } @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* Footer: Alle Definitionen in .vendor-area .app-footer-main am Ende [cite: FINAL DESIGN-LOCK 2026-02-23] */ /* Footer: Siehe .vendor-area .app-footer-main am Ende [cite: FINAL DESIGN-LOCK 2026-02-23] */ /* Schritt 3: Erfolgs-Footer – Links Teilen, Rechts Zum Dashboard [cite: 2026-02-21] */ #inseratSuccessSheet .inserat-success-footer.airbnb-footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; position: absolute; z-index: 100; } #inseratSuccessSheet .inserat-success-footer-link.secondary { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: #fff !important; font-size: 15px; font-weight: 600; cursor: pointer; padding: 12px 16px; min-height: 48px; opacity: 0.95; transition: opacity 0.2s ease; } #inseratSuccessSheet .inserat-success-footer-link.secondary:active { opacity: 0.8; } #inseratSuccessSheet .inserat-success-footer-btn-primary { flex: 1; min-width: 0; min-height: 56px; border-radius: 16px; background: #121212; color: #fff; font-size: 16px; font-weight: 800; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,0.3); transition: transform 0.15s ease, box-shadow 0.2s ease; } #inseratSuccessSheet .inserat-success-footer-btn-primary:active { transform: scale(0.98); } /* Inseratsbüro: Footer in allen Phasen (1,2,3) Edge-to-Edge, 0px Radius unten [cite: 2026-02-21] */ .app-footer-main, .inserat-success-footer { border-radius: 0 !important; } /* Publish-Fee Modal: Success-Glow vor Schließen */ .publish-fee-success-glow { opacity: 0; } .publish-fee-success-glow.animate { opacity: 1; animation: publish-fee-success-sweep 0.6s ease-out forwards; } @keyframes publish-fee-success-sweep { 0% { background: linear-gradient(90deg, rgba(16,185,129,0.5) 0%, transparent 40%); } 40% { background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.6) 50%, transparent 100%); } 100% { background: linear-gradient(90deg, transparent 0%, rgba(16,185,129,0.4) 100%); opacity: 0; } } /* Info-Legende Bottom-Sheet: Aktiviert-Zustand */ .info-legend-item.active { background: rgba(16,185,129,0.1) !important; border: 2px solid rgba(16,185,129,0.4); box-shadow: 0 2px 12px rgba(16,185,129,0.25), 0 0 0 1px rgba(16,185,129,0.15); } /* #psheet-CSS entfernt (Legacy) – InseratCard nur im #wizard [cite: 2026-02-18] */ /* Save-Scope-Dialog: Nur aktuell vs. Kochbuch [cite: Asset-Logik] */ .save-scope-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1998; } .save-scope-sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: min(400px, 100%); background: #fff; border-radius: 20px 20px 0 0; padding: 24px 20px max(env(safe-area-inset-bottom), 20px); box-shadow: 0 -10px 40px rgba(0,0,0,0.15); z-index: 1999; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; } .save-scope-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: #0f172a; } .save-scope-btn { min-height: 48px; border-radius: 14px; border: none; font-size: 15px; font-weight: 800; cursor: pointer; width: 100%; } .save-scope-btn-current { background: #f1f5f9; color: #0f172a; } .save-scope-btn-cookbook { background: #10b981; color: #fff; } .save-scope-cancel { background: transparent; color: #64748b; border: none; font-size: 14px; font-weight: 700; cursor: pointer; padding: 12px; } /* Titel wie Detailseite (h2#sDish): 24px, 950, Abstand 0 0 8px, gleiche Typo */ .inserat-unified-title-wrap { padding-bottom: 0; } /* InseratCard: Titel wie gedruckte Überschrift, ohne Input-Rahmen [Master-Prompt Card-Veredelung] */ /* Menükarten-Look: keine Input-Rahmen/Hintergründe, erst bei Fokus sichtbar [cite: 2026-02-18] */ .inserat-unified-title-wrap .inserat-detail-style-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 800; color: #0f172a; letter-spacing: -0.03em; line-height: 1.2; border: none; background: transparent; outline: none; width: 100%; border: none; background: transparent; padding: 4px 0 8px; outline: none; font-family: var(--font-main); } .inserat-unified-title-wrap .inserat-detail-style-title:focus { border: none; background: transparent; box-shadow: 0 2px 0 0 rgba(16,185,129,0.5); animation: magnet-pulse 1.2s ease-in-out infinite; } .inserat-unified-title-wrap .inserat-detail-style-title::placeholder { color: #94a3b8; } /* Listing: Titel exakt wie Detailkarte #sDish (24px, 950) – überschreibt glass-express input:first-of-type */ #wizard[data-flow="listing"].sheet--kitchen .liquid-master-panel #step-name input.inserat-detail-style-title, #wizard[data-flow="listing"].sheet--kitchen .glass-express-step0 #step-name input.inserat-detail-style-title { font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 800 !important; color: #0f172a !important; letter-spacing: -0.03em; line-height: 1.2; } /* Full-Width Title Hierarchy: step-name eigene Zeile, Titel 100% Breite [cite: 2026-02-16] */ #wizard[data-flow="listing"] #step-name, #wizard[data-flow="listing"] .inserat-unified-title-wrap { display: block; width: 100%; box-sizing: border-box; } /* Keyboard-Avoidance: scroll-margin damit Input ca. 20px über Tastatur bleibt [cite: 2026-02-18] */ #wizard[data-flow="listing"] input, #wizard[data-flow="listing"] textarea { scroll-margin-bottom: 220px; } #wizard[data-flow="listing"] #step-name input.inserat-detail-style-title, #wizard[data-flow="listing"] #step-name input.magnet-input { width: 100% !important; max-width: 100%; box-sizing: border-box; color: #0f172a; font-weight: 800; font-size: 1.5rem; border: none !important; border-bottom: none !important; background: transparent !important; padding: 4px 0; outline: none; } #wizard[data-flow="listing"] #step-name input.inserat-detail-style-title:focus, #wizard[data-flow="listing"] #step-name input.magnet-input:focus { border-bottom: none !important; border-radius: 0; box-shadow: none; background: transparent !important; } /* Action-Row: Titel volle Breite, darunter dezente Beschreibung [cite: 2026-02-16 S25] */ #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-airbnb-desc-wrap { margin-top: 4px; margin-bottom: 0; } /* InseratCard: Beschreibung Untertitel, Schiefergrau #64748b, 0.95rem – Menükarten-Look [cite: 2026-02-18] */ #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-desc-input, #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-airbnb-desc { font-size: 0.95rem; font-weight: 500; color: #64748b; font-style: italic; border: none !important; border-bottom: none !important; background: transparent !important; box-shadow: none !important; outline: none; padding: 4px 0; } #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-desc-input:focus, #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-airbnb-desc:focus { box-shadow: 0 1px 0 0 rgba(16,185,129,0.3); } #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-desc-input::placeholder, #wizard[data-flow="listing"] .inserat-unified-title-wrap .inserat-airbnb-desc::placeholder { color: #94a3b8; } /* Kategorie-Pills: wie Detailseite sAllergensCodes / Karten-Text – 14px, 700, #1a1a1a, gleiche Optik */ /* Goldene Sammelkarte: Kategorie + Preis in einer Zeile, dann Gerichtsname, dann Beschreibung [cite: 2026-02-16] */ #wizard[data-flow="listing"] .inserat-cat-price-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; margin-bottom: 16px; } #wizard[data-flow="listing"] .inserat-price-pill-wrap { display: inline-flex; align-items: center; flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: #f8fafc; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } #wizard[data-flow="listing"] .inserat-price-pill-input { width: 56px; border: none; background: transparent; font-size: 16px; font-weight: 500; color: var(--color-price-yellow, #FFB800); padding: 0; outline: none; } #wizard[data-flow="listing"] .inserat-price-pill-input::placeholder { color: rgba(0,0,0,0.4); } /* Preis: € 70% Größe, Superscript – Preis-Gelb [cite: 2026-02-25] */ #wizard[data-flow="listing"] .inserat-price-pill-euro, #wizard[data-flow="listing"] .price-section .inserat-price-pill-euro { font-size: 0.55em !important; font-weight: 400; color: var(--color-price-yellow, #FFB800); vertical-align: super; margin-left: 4px; line-height: 1; opacity: 0.9; } /* Verdienst-Vorschau: Preis-Gelb, dezent (nicht fett) [cite: 2026-02-25] */ #wizard[data-flow="listing"] #inserat-verdienst-vorschau.inserat-verdienst-vorschau, #wizard[data-flow="listing"] .price-section #inserat-verdienst-vorschau { color: var(--color-price-yellow, #FFB800) !important; font-weight: 500 !important; } #wizard[data-flow="listing"] .inserat-desc-italic, #wizard[data-flow="listing"] .inserat-airbnb-desc.inserat-desc-italic { font-style: italic; color: #64748b; } #wizard[data-flow="listing"].sheet--kitchen .inserat-cat-pills .extra-pill { font-size: 13px; font-weight: 700; color: #1a1a1a; padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,0.04); border: none; min-height: 40px; } #wizard[data-flow="listing"].sheet--kitchen .inserat-cat-pill.active, #wizard[data-flow="listing"].sheet--kitchen .inserat-cat-pills .extra-pill.active { background: #10b981 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(16,185,129,0.4); } /* Preis-Sektion: wie sPriceSticker – 14px, 900 (ohne Fintech-Klasse) */ #wizard[data-flow="listing"] .inserat-price-section .inserat-price-input:not(.inserat-price-fintech), #wizard[data-flow="listing"] .inserat-price-section .price-display:not(.inserat-price-fintech) { font-size: 14px !important; font-weight: 900 !important; color: #1a1a1a !important; } /* Fintech-Preis (S25): massive Zahl 4rem, Preis-Gelb, edel (font-weight 500) [cite: 2026-02-25] */ #wizard[data-flow="listing"] .inserat-price-section input.inserat-price-fintech { width: 140px; max-width: 60%; background: transparent !important; border: none !important; border-bottom: 2px solid rgba(0,0,0,0.08) !important; border-radius: 0 !important; padding: 12px 0 10px !important; outline: none !important; font-size: 4rem !important; font-weight: 500 !important; color: var(--color-price-yellow, #FFB800) !important; text-align: center; transition: border-color 0.3s ease; } #wizard[data-flow="listing"] .inserat-price-section .inserat-price-euro-sup { font-size: 1.5rem; font-weight: 900; color: #1a1a1a; vertical-align: super; margin-left: 4px; } #wizard[data-flow="listing"] .inserat-price-section input.inserat-price-fintech:focus { border-bottom-color: #10b981 !important; animation: magnet-pulse 1.2s ease-in-out infinite; } /* Umsatzprognose: wie sInfoHint – 12px, 600, #94a3b8 */ #wizard[data-flow="listing"] .inserat-prognose-wrap.inserat-umsatzprognose p { font-size: 12px; font-weight: 600; color: #94a3b8; } /* Funktions-Icons am Ende: schwebend, gläsernes Dropdown */ .inserat-func-icons { display: flex; gap: 16px; padding: 20px; justify-content: center; align-items: center; flex-shrink: 0; } .inserat-func-icons .func-icon-btn { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.5); display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; transition: transform 0.12s; -webkit-tap-highlight-color: transparent; } .inserat-func-icons .func-icon-btn:active { transform: scale(0.95); } .inserat-func-icons .func-icon-btn.active { background: rgba(16,185,129,0.2); border-color: rgba(16,185,129,0.4); } /* Kein Wizard-Chrome im Listing – nur Panel */ #wizard[data-flow="listing"].sheet--kitchen .wizard-progress-dots, #wizard[data-flow="listing"].sheet--kitchen .w-top, #wizard[data-flow="listing"].sheet--kitchen .w-q, #wizard[data-flow="listing"].sheet--kitchen .w-help { display: none !important; } /* Handle + Sheet dezent (app-like ein Screen) */ #wizard[data-flow="listing"].sheet--kitchen .handle{ width: 40px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 999px; margin: 8px auto 6px; } #wizard[data-flow="listing"].sheet--kitchen.active{ box-shadow: 0 -2px 24px rgba(0,0,0,0.08); border-top: 1px solid rgba(255,255,255,0.6); } /* Einheitliches Support-Layout: Anbieter + Inseratsflow (Buttons, Panels, Abstände wie Support-Sheet) */ :root{ --support-border:#e5e7eb; --support-border-radius:12px; --support-padding:16px; --support-padding-lg:24px; } /* Provider-App: Design-System Schritt 1.7 – Schwerer, professioneller */ :root{ --provider-bg: #F5F5F7; --provider-surface: #ffffff; --provider-surface-alt: #f0f0eb; --provider-border: rgba(0,0,0,0.06); --provider-text: #1a1a1a; --provider-text-muted: #64748b; --provider-nav-bg: #1a1a1a; --provider-shadow: 0 4px 20px rgba(0,0,0,0.05); --provider-radius: 20px; --provider-btn-height: 56px; --provider-btn-radius: 28px; --prov-brand: #FFDE00; --prov-success: #FFDE00; --prov-danger: #ef4444; --premium-anthracite: #1a1a1a; --premium-anthracite-soft: #334155; --glass-bg: rgba(255,255,255,0.75); --glass-border: rgba(255,255,255,0.4); --glass-shadow: 0 8px 32px rgba(0,0,0,0.06); --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.8); --card-radius-premium: 24px; --card-shadow-soft: 0 4px 20px rgba(0,0,0,0.05); --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.08); } /* Anbieter Design-System: Card-Radius 16px (Ruhe durch Ordnung), Seitenrand 16px */ body.provider-mode { --card-radius-premium: 16px; } /* Provider: einheitlich Warmes Beige #F8F7F2 – kein Farbsprung zwischen Dashboard/Wochenplan/Inserat */ body.provider-mode [id^="v-provider-"].view{ position:relative; background: var(--provider-bg) !important; } body.provider-mode #v-provider-home, body.provider-mode #v-provider-pickups, body.provider-mode #v-provider-profile, body.provider-mode #v-provider-billing{ background: var(--provider-bg) !important; } /* Kochbuch & Wochenplan: Warmes Glassmorphism-Hintergrund */ body.provider-mode #v-provider-cookbook, body.provider-mode #v-provider-week{ background: #f8fafc !important; } /* Header: KW-Trigger + Kebab [cite: 2026-02-21] */ #v-provider-week .week-header-kw-trigger{ font-family:inherit; } #v-provider-week .week-header-kw-badge{ font-size:14px; font-weight:800; color:#64748b; background:rgba(0,0,0,0.06); padding:4px 10px; border-radius:10px; } #v-provider-week .week-kebab-trigger{ position:relative; } .kw-selector-item{ position:relative; padding-left:16px; } .kw-selector-active{ background:rgba(16,185,129,0.12) !important; border:2px solid rgba(16,185,129,0.3); font-weight:800; color:#059669; } .kw-selector-dot{ display:inline-block; width:8px; height:8px; background:#10b981; border-radius:50%; margin-left:8px; vertical-align:middle; } .kw-selector-list-horizontal{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:10px; padding:0 20px 20px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; max-height:none; } .kw-selector-list-horizontal .kw-selector-item{ flex:0 0 auto; min-width:100px; padding:12px 14px; border:2px solid transparent; border-radius:12px; scroll-snap-align:start; text-align:center; white-space:nowrap; } .kw-selector-list-horizontal .kw-selector-active{ background:#fff !important; border:2px solid #000; font-weight:800; color:#0f172a; } /* Smart Time Sheet: Full-Height, Feiertage, schwarze Buttons [cite: 2026-03-02] */ .kw-smart-time-sheet{ animation:kwSmartSheetSlideUp 0.35s cubic-bezier(0.32,0.72,0,1) forwards; } @keyframes kwSmartSheetSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } } .kw-smart-time-sheet-handle{ width:40px; height:4px; background:rgba(0,0,0,0.12); border-radius:2px; margin:12px auto 16px; flex-shrink:0; } .kw-smart-time-sheet-header{ padding:0 20px 20px; flex-shrink:0; } .kw-smart-time-sheet-title{ margin:0 0 8px; font-size:20px; font-weight:900; color:#0f172a; } .kw-smart-date-range{ font-size:15px; font-weight:700; color:#64748b; margin-bottom:12px; } .kw-smart-holidays{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .kw-smart-holiday-badge{ padding:6px 12px; border-radius:8px; background:rgba(255,215,0,0.2); color:#78350f; font-size:13px; font-weight:700; } .kw-selector-list-vertical{ display:flex; flex-direction:column; gap:8px; padding:0 20px 24px; overflow-y:auto; flex:1; min-height:0; -webkit-overflow-scrolling:touch; } .kw-selector-list-vertical .kw-selector-item{ width:100%; min-height:56px; padding:0 16px; border:none; border-radius:8px; background:#222222; color:#ffffff; font-size:16px; font-weight:600; cursor:pointer; text-align:left; display:flex; align-items:center; justify-content:space-between; transition:transform 0.15s, background 0.2s; -webkit-tap-highlight-color:transparent; } .kw-selector-list-vertical .kw-selector-item:active{ transform:scale(0.98); background:#333; } .kw-selector-list-vertical .kw-selector-active{ background:#222222 !important; color:#ffffff; border:2px solid #10b981; box-shadow:0 0 0 2px rgba(16,185,129,0.3); } .kw-selector-list-vertical .kw-selector-dot{ background:#FFD700; } /* High-End Card Polish: Hintergrund slate-50, Karten weiss mit Schatten, rounded-2xl [cite: 2026-02-20] */ body.provider-mode #v-provider-home > *, body.provider-mode #v-provider-week > *, body.provider-mode [id^="v-provider-"].view.active > *{ position:relative; z-index:1; } /* dynamic-header: Permanent Sticky (Airbnb), z-index 9999 ÜBER allem, Glass [cite: 2026-02-21 Master-Fix] */ body.provider-mode .dynamic-header { position: sticky !important; top: 0 !important; z-index: 9999 !important; background-color: rgba(245, 245, 240, 0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: none; } /* Wochenplan-Gesetz: Alle Headers Montserrat 900, linksbündig, gleicher Abstand [Master-Fix] */ body.provider-mode .dynamic-header .prov-page-header-title, body.provider-mode .dynamic-header .system-header-title, body.provider-mode .dynamic-header h1 { font-family: 'Montserrat', 'Inter', sans-serif !important; font-weight: 900 !important; font-size: 24px !important; color: #1a1a1a !important; letter-spacing: -0.03em; margin: 0; text-align: left; } /* Airbnb-Fest: Kein header-hidden – Header bleibt permanent sichtbar [cite: 2026-02-21] */ /* system-header: Airbnb-Style Collapsing – beim Hochscrollen Title schrumpft, 48px Glass-Bar [cite: 2026-02-21] */ .system-header { border-bottom: none !important; box-shadow: none !important; transition: min-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.3s ease, background 0.3s ease; } .system-header .system-header-title { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.3s ease, opacity 0.25s ease; } .system-header .system-header-icon { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, width 0.3s ease, height 0.3s ease; } .system-header.system-header-collapsed { min-height: 48px !important; padding-top: calc(6px + env(safe-area-inset-top, 0)) !important; padding-bottom: 6px !important; padding-left: 16px !important; padding-right: 16px !important; justify-content: center !important; background: rgba(255, 255, 255, 0.75) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) !important; } .system-header.system-header-collapsed .prov-page-header-row { justify-content: center; } .system-header.system-header-collapsed .prov-page-header-left { justify-content: center; flex: 1; } .system-header.system-header-collapsed .system-header-title { font-size: 15px !important; transform: scale(0.9); margin: 0; } .system-header.system-header-collapsed .system-header-icon { width: 28px !important; height: 28px !important; transform: scale(0.75); } .system-header.system-header-collapsed .prov-page-header-actions, .system-header.system-header-collapsed .prov-page-header-action { opacity: 0.9; } .system-header.system-header-collapsed .prov-page-header-right { position: absolute; right: 16px; } .system-header.system-header-collapsed #provPickupFilter, .system-header.system-header-collapsed .cookbook-category-pills { display: none !important; } .system-header.system-header-collapsed .prov-header-inner > div:not(.prov-page-header-row) { display: none !important; } /* Flüssiger Übergang Header–Inhalt, keine harte Trennlinie [cite: 2026-02-21] */ body.provider-mode .system-header.prov-page-header { border-bottom: none !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02) !important; } /* Header: Keine Icons – nur Titel (zentrale .dynamic-header regelt alles) */ body.provider-mode .dynamic-header .prov-page-header-icon { display: none !important; } /* Modern App-Like CSS for Provider (Design-Tokens = einheitlich mit Kundenseite) */ .prov-header { position: sticky; top: 0; z-index: 100; background: rgba(245,245,240,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: var(--header-padding-y) var(--header-padding-x) 16px; padding-top: calc(var(--header-padding-y) + env(safe-area-inset-top, 0)); border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.03); font-family: 'Montserrat', sans-serif; font-weight: 900; text-align: left; } .prov-title { margin: 0; font-size: var(--header-title-size); font-weight: var(--header-title-weight); letter-spacing: var(--header-title-spacing); color: var(--header-title-color); } /* App-Header Abholungen/Wochenplan/Kochbuch/Profil – einheitlich Meine-Küche-Style, permanent sticky */ body.provider-mode .prov-page-header { position: sticky; top: 0; z-index: 100; min-height: 60px; padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0)); background: rgba(245,245,240,0.95) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: none; box-shadow: 0 4px 20px rgba(0,0,0,0.03); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 900; text-align: left; } .prov-page-header .prov-page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .prov-page-header .prov-page-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; } .prov-header-reset-trigger { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .prov-header-reset-trigger:active { opacity: 0.85; } #v-provider-profile .provider-sub-header h1 { touch-action: manipulation; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Einheitlich: alle Anbieter-Header (Meine Küche, Abholungen, Wochenplan, Kochbuch) */ .prov-page-header .prov-page-header-icon { width: 44px; height: 44px; background: var(--prov-brand); color: #1a1a1a; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(255, 222, 0, 0.25); flex-shrink: 0; } .prov-page-header .prov-page-header-icon i, .prov-page-header .prov-page-header-icon svg { width: 24px; height: 24px; color: #fff; } /* Headline Anbieter: Montserrat 20px / 900, Letter-Spacing -0.03em */ .prov-page-header .prov-page-header-title { margin: 0; font-family: var(--font-main); font-size: var(--size-h2); font-weight: var(--weight-heavy); letter-spacing: -0.03em; color: var(--color-title); } .prov-page-header .prov-page-header-actions { display: flex; gap: 8px; flex-shrink: 0; } .prov-page-header .prov-page-header-actions button, .prov-page-header .prov-page-header-action { background: var(--color-soft-grey-bg, rgba(0,0,0,0.06)); border: none; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: var(--r-md, 14px); display: flex; align-items: center; justify-content: center; color: var(--header-title-color); cursor: pointer; } .prov-page-header .prov-page-header-actions button:active { transform: scale(0.96); } /* Komponenten-Glättung: Minimaler Schatten, Trennung nur über Inset-Divider [cite: Tabula Rasa] */ .prov-card { background: #fff; border-radius: var(--tgtg-img-radius, 18px); padding: var(--tgtg-spacing, 20px); border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: 0; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 100%; min-width: 0; box-sizing: border-box; } .prov-card:active { transform: scale(0.98); } /* Emerald-Glow nach Fast-Track-Speichern (Änderungen speichern) [cite: 2026-02-18] */ .prov-card.prov-card-emerald-glow { animation: prov-card-emerald-glow 1.2s ease-out forwards; } @keyframes prov-card-emerald-glow { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7), 0 1px 3px rgba(0,0,0,0.04); } 30% { box-shadow: 0 0 24px 4px rgba(16, 185, 129, 0.4), 0 4px 20px rgba(16, 185, 129, 0.15); } 100% { box-shadow: 0 1px 3px rgba(0,0,0,0.04); } } #v-provider-week .week-meal-card-wrap.prov-card-emerald-glow { animation: prov-card-emerald-glow 1.2s ease-out forwards; } .prov-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 12px; } .prov-stat-item { text-align: center; padding: 12px 8px; border-right: 1px solid #eee; } .prov-stat-item:last-child { border-right: none; } .prov-stat-value { display: block; font-size: var(--size-h1); font-weight: var(--weight-hero); color: var(--color-title); line-height: 1; } .prov-stat-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; margin-top: 6px; display: block; } .prov-badge { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; } .prov-badge-live { background: rgba(255, 222, 0, 0.2); color: #1a1a1a; font-weight: 700; } .prov-badge-draft { background: rgba(100, 116, 139, 0.1); color: #64748b; } .prov-badge-abholer { background: rgba(255, 222, 0, 0.2); color: #1a1a1a; } .prov-action-btn { background: var(--provider-surface); border: 1px solid var(--provider-border); padding: 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: all 0.2s ease; } .prov-action-btn:active { transform: scale(0.96); } .prov-action-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content:center; } [id^="v-provider-"]{ background:var(--provider-bg) !important; font-family: var(--font-main); } /* Einheitlicher Sticky-Header für Anbieter-Subseiten */ .provider-header-bar{ background: var(--header-bg) !important; backdrop-filter: blur(var(--header-blur)); -webkit-backdrop-filter: blur(var(--header-blur)); position:sticky; top:0; z-index:50; border-bottom: var(--header-border); padding: var(--header-padding-y) var(--header-padding-x); margin: calc(-1 * var(--header-padding-x)) calc(-1 * var(--header-padding-x)) 24px calc(-1 * var(--header-padding-x)); display:flex; align-items:center; justify-content:center; } .provider-header-bar h1{ margin:0; font-size: var(--section-title-size); font-weight: var(--section-title-weight); color: var(--header-title-color) !important; } .provider-header-bar .btn-back{ position:absolute; left:10px; color:#121826; font-size:16px; padding:8px; display:flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; } /* Legal-Anbieter-Seiten: gleiches helles Layout */ #v-legal-impressum-provider, #v-legal-faq-provider, #v-legal-datenschutz-provider, #v-legal-inserat-info-provider{ background:var(--provider-bg) !important; } #v-legal-impressum-provider .panel, #v-legal-faq-provider .panel, #v-legal-datenschutz-provider .panel, #v-legal-inserat-info-provider .panel{ background:#fff !important; color:#1a1a1a !important; border:1px solid rgba(0,0,0,0.06) !important; box-shadow:0 2px 12px rgba(0,0,0,0.06) !important; } #v-legal-impressum-provider .panel h1, #v-legal-faq-provider .panel h1, #v-legal-datenschutz-provider .panel h1, #v-legal-inserat-info-provider .panel h1, #v-legal-inserat-info-provider .panel h2{ color:#1a1a1a !important; } #v-legal-impressum-provider .panel div, #v-legal-impressum-provider .panel p, #v-legal-faq-provider .panel div, #v-legal-faq-provider .panel p, #v-legal-datenschutz-provider .panel div, #v-legal-datenschutz-provider .panel p, #v-legal-inserat-info-provider .panel div, #v-legal-inserat-info-provider .panel p{ color:#334155 !important; } /* Anbieter Infoseite Inseratsflow: Grid 5 Spalten Desktop, 1–2 Spalten Mobile */ .inserat-info-grid{ display:grid !important; grid-template-columns:repeat(5, 1fr); gap:20px 16px; max-width:100%; } @media (max-width: 900px){ .inserat-info-grid{ grid-template-columns:repeat(2, 1fr) !important; } } @media (max-width: 480px){ .inserat-info-grid{ grid-template-columns:1fr !important; } } #v-legal-impressum-provider .panel a, #v-legal-faq-provider .panel a, #v-legal-datenschutz-provider .panel a{ color:#121826 !important; } #v-legal-agb-provider{ background:var(--provider-bg) !important; } [id^="v-provider-"] .panel{ background:var(--provider-surface) !important; color:var(--provider-text) !important; border:2px solid var(--provider-border) !important; box-shadow:none !important; border-radius:var(--support-border-radius) !important; padding:var(--card-padding, 20px) !important; } [id^="v-provider-"] .panel div, [id^="v-provider-"] .panel span, [id^="v-provider-"] .panel label{ color:var(--provider-text) !important; } [id^="v-provider-"] .panel .hint, [id^="v-provider-"] .provider-profile-section-title{ color:var(--provider-text-muted) !important; } /* Provider-Login-View: „Als Gastronom anmelden“ sehr weit oben */ #v-provider-login{ display:flex; flex-direction:column; align-items:stretch; padding-top:calc(16px + env(safe-area-inset-top, 0)); padding-left:20px; padding-right:20px; padding-bottom:40px; min-height:100vh; box-sizing:border-box; } #v-provider-login .panel{ margin-top:0 !important; margin-bottom:0 !important; max-width:400px; align-self:center; width:100%; } /* Status-Banner: nur dieser bleibt grün mit Weißtext (Support-Layout) */ #providerStatusBanner{ background:linear-gradient(135deg, #2e7d32 0%, #1f5f23 100%) !important; color:#fff !important; border:2px solid #1f5f23 !important; box-shadow:none !important; border-radius:var(--support-border-radius) !important; } #providerStatusBanner *{ color:#fff !important; } /* Kunden-Nachfrage: heller Hintergrund, dunkle Schrift (lesbar) */ #providerCustomerDemand{ background:#fffbf0 !important; border:1px solid #e6c200 !important; color:var(--provider-text) !important; border-radius:6px !important; } #providerCustomerDemand #providerRequestCount{ color:var(--provider-text) !important; font-weight:800 !important; } #providerCustomerDemand .btn-primary{ background:#2e7d32 !important; color:#fff !important; } #providerPersonalSpar, #providerPersonalSpar *{ background:var(--provider-surface-alt) !important; color:var(--provider-text) !important; border-color:var(--provider-border) !important; } #providerPersonalSpar strong{ color:var(--provider-text) !important; } [id^="v-provider-"] h1,[id^="v-provider-"] h2,[id^="v-provider-"] h3{ color:var(--provider-text) !important; } #v-provider-home .provider-home-header, #v-provider-home .provider-home-header *, #v-provider-home h1{ color:var(--provider-text) !important; } #v-provider-home .provider-home-header div:first-child{ color:var(--provider-text-muted) !important; } [id^="v-provider-"] #provPickupsSubheader, [id^="v-provider-"] .hint{ color:var(--provider-text-muted) !important; } #providerStatusIndicator{ background:var(--provider-surface) !important; border:2px solid var(--provider-border) !important; box-shadow:0 1px 3px rgba(0,0,0,.08) !important; border-radius:var(--support-border-radius) !important; } #statusIndicatorText{ color:var(--provider-text) !important; } /* KPI-Karten: dunkle Schrift, lesbar */ #kpiCardTagesessen, #kpiCardAbholungen, #kpiCardKochbuch{ background:var(--provider-surface) !important; border:2px solid var(--provider-border) !important; border-radius:var(--support-border-radius) !important; } #kpiCardTagesessen div:first-child, #kpiCardAbholungen div:first-child, #kpiCardKochbuch div:first-child{ color:var(--provider-text) !important; } #kpiCardTagesessen div:last-child, #kpiCardAbholungen div:last-child, #kpiCardKochbuch div:last-child{ color:var(--provider-text-muted) !important; } #providerTimeTracker, #providerTimeTracker *{ color:var(--provider-text) !important; background:var(--provider-surface) !important; border-color:var(--provider-border) !important; } #providerTimeTracker div:first-child, #providerTimeTracker div:last-child{ color:var(--provider-text-muted) !important; } #providerTimeTracker #providerTimeSaved{ color:var(--provider-text) !important; } #providerTodayShare, #providerTodayShare .btn{ color:var(--provider-text) !important; background:var(--provider-surface) !important; border-color:var(--provider-border) !important; } /* Buttons im Provider-Bereich: Support-Layout (wie Support-Sheet) */ [id^="v-provider-"] .btn, [id^="v-provider-"] .btn-primary, [id^="v-provider-"] button[class*="btn"]{ border-radius:var(--support-border-radius) !important; min-height:48px !important; font-weight:700 !important; font-size:15px !important; padding:var(--support-padding) var(--support-padding-lg) !important; box-shadow:none !important; transition:border-color .15s, background .15s !important; -webkit-tap-highlight-color:transparent; } [id^="v-provider-"] .btn:active, [id^="v-provider-"] .btn-primary:active, [id^="v-provider-"] button[class*="btn"]:active{ transform:scale(0.98) !important; } [id^="v-provider-"] .btn.secondary, [id^="v-provider-"] .btn.ghost{ background:#fff !important; border:2px solid var(--support-border) !important; color:var(--provider-text) !important; } [id^="v-provider-"] .btn:not(.secondary):not(.ghost), [id^="v-provider-"] .btn-primary{ border:2px solid transparent !important; } /* Bottom-Nav Provider: Eckig, tiefes Anthrazit #121212, Blur – Hardware-Fusion S25 [cite: 2026-02-21] */ #providerNav.provider-nav-pill{ background: rgba(18, 18, 18, 0.85) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: none !important; border-radius: 0 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; } #providerNav:not(.provider-nav-pill){ background: rgba(255,255,255,0.98) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: none !important; box-shadow: 0 -2px 16px rgba(0,0,0,.06) !important; } #providerNav .navbtn{ color:var(--provider-text-muted); } #providerNav .navbtn.active{ color:var(--prov-brand); } #providerNav .navbtn.active .ico svg{ color:var(--prov-brand); stroke:var(--prov-brand); } /* Provider Nav Light: Stolz-Edition – Gelb (#ffde00) aktiv, inaktive Tabs 20 % Opacity */ .provider-nav-light .navbtn{ color:#1a1a1a; font-weight:600; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } .provider-nav-light .navbtn{ border-top:2px solid transparent; } .provider-nav-light .navbtn:not(.active){ opacity:0.2; } .provider-nav-light .navbtn.active{ color:#ffde00; font-weight:700; border-top-color:#ffde00; opacity:1; } .provider-nav-light .navbtn.active .ico svg{ color:#ffde00 !important; stroke:#ffde00 !important; } /* Modern Bottom-Nav: Anthrazit, aktiver Tab = dezentes Weiß-Leuchten (Arbeits-Modus, nicht Gelb/Kunde) */ .provider-nav-pill .navbtn{ color:rgba(255,255,255,0.4); border-top:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; flex:1; min-width:0; } .provider-nav-pill .navbtn .ico{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background 0.2s, box-shadow 0.2s; } .provider-nav-pill .navbtn:not(.active) .ico{ background:transparent; } .provider-nav-pill .navbtn.active{ color:#fff; opacity:1; } .provider-nav-pill .navbtn.active .ico{ background:rgba(255,255,255,0.2); width:44px; height:44px; border-radius:50%; box-shadow:0 0 16px rgba(255,255,255,0.4); } .provider-nav-pill .navbtn.active .ico svg{ color:#fff !important; stroke:#fff !important; } .provider-nav-pill .navbtn .ico + div, .provider-nav-pill .provider-nav-label{ font-size:10px; font-weight:700; text-align:center; letter-spacing:0.02em; display:block; } .provider-nav-pill .navbtn:not(.active) .provider-nav-label{ color:rgba(255,255,255,0.5); } .provider-nav-pill .navbtn.active .provider-nav-label{ color:#fff; } /* Bottom-Nav: bündig am Displayrand, Safe-Area, Airbnb-Footer [cite: 2026-02-23, 2026-02-25] */ #providerNavWrap.provider-nav-wrap-pill{ position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; box-sizing: border-box; z-index: 1052 !important; border-radius: 0 !important; margin: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; } #providerNavWrap #providerNav{ min-height: 75px; padding: 12px 24px 25px; display: flex; justify-content: space-between; align-items: center; border-radius: 0 !important; } /* Airbnb-Style Footer: bündig, Reinweiß, feine Trennlinie #ebebeb [cite: 2026-02-23, 2026-02-25] */ body.provider-mode #providerNavWrap.provider-nav-wrap-pill{ background: #ffffff !important; border-top: 1px solid #ebebeb !important; } body.provider-mode #providerNav.provider-nav-pill{ background: var(--airbnb-white, #ffffff) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; border-top: none !important; } body.provider-mode #providerNavWrap.provider-nav-wrap-pill .navbtn{ color:var(--airbnb-black, #222222) !important; } body.provider-mode #providerNavWrap.provider-nav-wrap-pill .navbtn:not(.active){ opacity:0.5 !important; } body.provider-mode #providerNavWrap.provider-nav-wrap-pill .navbtn.active{ opacity:1 !important; font-weight:800 !important; } body.provider-mode #providerNavWrap.provider-nav-wrap-pill .navbtn .provider-nav-label{ color:inherit !important; } body.provider-mode #providerNavWrap.provider-nav-wrap-pill .navbtn .ico svg{ color:var(--airbnb-black, #222222) !important; stroke:var(--airbnb-black, #222222) !important; } body.provider-mode #providerNavWrap.provider-nav-wrap-pill .navbtn.active .ico{ background:rgba(0,0,0,0.06) !important; box-shadow:none !important; border-radius:8px !important; } [id^="v-provider-"] .panel h1,[id^="v-provider-"] .panel h2,[id^="v-provider-"] .panel h3,[id^="v-provider-"] .panel .section-title{ color:var(--provider-text) !important; } [id^="v-provider-"] .panel .hint{ color:var(--provider-text-muted) !important; } /* Dynamisch eingefügter Inhalt: immer lesbar */ #providerActiveOffersList, #providerActiveOffersList *, #providerTodayContent, #providerTodayContent *, #providerWeekDayContent, #providerWeekDayContent *{ color:var(--provider-text) !important; } #providerActiveOffersList [style*="color:var(--muted)"], #providerTodayContent .hint, #providerWeekDayContent .hint{ color:var(--provider-text-muted) !important; } /* FAB: Stolz gelb, Schatten */ #fabProviderAddOffer{ background:#ffde00 !important; border:4px solid #fff !important; box-shadow:0 4px 20px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12) !important; transition:transform .15s ease, box-shadow .15s ease; } #fabProviderAddOffer .plus-char{ color:#1a1a1a !important; } #fabProviderAddOffer:active{ transform:scale(0.95); } /* Provider Dashboard CTA: Hover/Active Scale (App-Style) */ .provider-dashboard-cta:hover{ transform:scale(0.98); } .provider-dashboard-cta:active{ transform:scale(0.95); } /* FAB nur Dashboard: fest rechts über Bottom-Nav (applike Plus-Button), immer visuell rechts */ #fabProviderAddOffer{ position: fixed !important; left: auto !important; right: calc(16px + env(safe-area-inset-right, 0)) !important; bottom: calc(130px + env(safe-area-inset-bottom, 20px)) !important; margin-left: 0 !important; direction: ltr; } #fabProviderAddOfferLabel{ right:calc(16px + env(safe-area-inset-right, 0)) !important; } #providerStatusIndicator{ top:calc(16px + env(safe-area-inset-top, 0)) !important; right:calc(16px + env(safe-area-inset-right, 0)) !important; } /* FAQ accordion */ .faq{margin-top:12px} details{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 6px 14px rgba(0,0,0,.06);padding:14px 16px} details+details{margin-top:10px} summary{cursor:pointer;font-weight:950;font-size:15px;line-height:1.4} summary:focus-visible{outline:2px solid var(--accent,#121826);outline-offset:2px;border-radius:8px} summary::-webkit-details-marker{display:none} #v-legal-faq details summary::-webkit-details-marker, #v-legal-faq-provider details summary::-webkit-details-marker{display:none} #v-legal-faq details summary::marker, #v-legal-faq-provider details summary::marker{content:''} details p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6} .profile-faq-accordion details summary::-webkit-details-marker{display:none} /* helper */ .hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.25} .loc-row{display:flex; gap:8px; align-items:center} .pin-btn{ border:1px solid var(--border); background:#fff; border-radius:14px; width:44px; height:44px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; } .ico-inline{display:inline-flex; align-items:center} .ico-inline svg{width:14px; height:14px; stroke:currentColor} .info-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; font-size:12px; color:var(--muted)} .info-item{ display:inline-flex; align-items:center; gap:6px; background:#f8f7f3; border:1px solid var(--border); padding:5px 10px; border-radius:999px; font-size:13px; line-height:1.4; } /* Onboarding – volle Breite */ .onboarding-step{ width:100%; max-width:100%; margin:0; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); box-sizing:border-box; } .onboarding-header{ display:flex; justify-content:space-between; align-items:flex-start; } .onboarding-progress{ font-size:12px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; } .onboarding-logo-preview:hover{ border-color:var(--brand); background:#fff4e6; } .onboarding-logo-preview img{ display:block; } .time-btn.active{ background:var(--brand); border-color:var(--brand); } .onboarding-summary-item:last-child{ margin-bottom:0; } /* Social Feed - Story-Leiste – volle Breite */ .stories-container{ padding:16px max(14px, env(safe-area-inset-right)) 20px max(14px, env(safe-area-inset-left)); width:100%; max-width:100%; margin:0; box-sizing:border-box; } .stories-scroll{ display:flex; gap:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; } .story-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; } .story-avatar{ width:64px; height:64px; border-radius:50%; border:3px solid var(--brand); padding:2px; background:#fff; overflow:hidden; position:relative; } .story-avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .story-name{ font-size:12px; font-weight:700; color:var(--text); max-width:64px; text-align:center; overflow:hidden; text-overflow:ellipsis; line-height:1.3; } /* Discover Page - App-like UX (PWA, Light Mode) */ /* Toggle-Switch für Discover-View */ .discover-view-toggle{ margin-left:auto; /* Rechts ausrichten in Quick-Filters */ } /* View-Toggle im Topbar */ .discover-view-toggle-topbar{ display:none; } /* Floating Action Button (FAB) für Modus-Wechsel */ .fab-mode-toggle{ position:fixed; bottom:calc(80px + env(safe-area-inset-bottom, 16px) + 20px); right:16px; width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border:1px solid rgba(231,225,213,.3); box-shadow:0 8px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04); display:none; align-items:center; justify-content:center; cursor:pointer; z-index:25; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; user-select:none; } .fab-mode-toggle:hover{ transform:scale(1.05); box-shadow:0 12px 32px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06); background:rgba(255,255,255,.95); } .fab-mode-toggle:active{ transform:scale(.95); } .fab-mode-toggle.pulsing{ animation:fabPulse .4s ease-out; } @keyframes fabPulse{ 0%{transform:scale(1);} 50%{transform:scale(1.15); box-shadow:0 12px 40px rgba(255,184,0,.3), 0 0 0 1px rgba(255,184,0,.2);} 100%{transform:scale(1);} } .fab-mode-toggle i{ width:24px; height:24px; color:#2D3436; transition:transform .2s ease; } .fab-mode-toggle.active i{ transform:rotate(180deg); } /* Micro-Hint (Sprechblase beim ersten Start) */ .fab-hint{ position:absolute; bottom:calc(100% + 12px); right:0; background:#2D3436; color:#fff; padding:10px 14px; border-radius:12px; font-size:13px; font-weight:600; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.2); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .3s ease, transform .3s ease; } .fab-hint.show{ opacity:1; transform:translateY(0); } .fab-hint::after{ content:''; position:absolute; top:100%; right:20px; width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #2D3436; } .discover-calendar-wrapper{ padding:6px 0 4px; border-top:1px solid rgba(0,0,0,.04); max-width:100%; margin:0 auto; box-sizing:border-box; } .discover-calendar-scroll{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 14px; scrollbar-width:none; } .discover-calendar-scroll::-webkit-scrollbar{display:none} .toggle-switch{ position:relative; width:64px; height:32px; background:#e0e0e0; border-radius:16px; border:none; cursor:pointer; transition:background 0.3s ease; display:flex; align-items:center; padding:4px; box-shadow:0 2px 8px rgba(0,0,0,0.1); } .toggle-switch.active{ background:var(--brand); } .toggle-icon{ position:absolute; width:24px; height:24px; display:flex; align-items:center; justify-content:center; transition:opacity 0.3s ease, transform 0.3s ease; z-index:2; } .toggle-icon-list{ left:4px; opacity:1; } .toggle-icon-match{ right:4px; opacity:0.5; } .toggle-switch.active .toggle-icon-list{ opacity:0.5; } .toggle-switch.active .toggle-icon-match{ opacity:1; } .toggle-icon svg{ width:18px; height:18px; stroke-width:2.5; } .toggle-slider{ position:absolute; width:24px; height:24px; background:#fff; border-radius:50%; transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 2px 4px rgba(0,0,0,0.2); left:4px; z-index:3; } .toggle-switch.active .toggle-slider{ transform:translateX(32px); } /* Status-Ampel Animationen */ @keyframes pulse-green { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } @keyframes blink-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes pulse-yellow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes pulse-green-dot { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 12px rgba(39,174,96,0.8); } 50% { opacity: 0.8; transform: scale(1.2); box-shadow: 0 0 20px rgba(39,174,96,1); } } /* Status-Ampel: Nur im Provider-Modus sichtbar */ #providerStatusIndicator { display: none; } body.provider-mode #providerStatusIndicator { display: flex !important; } /* Anbieter-Ansichten: Topbar ausblenden, Inhalt beginnt oben ohne Leerraum */ body.provider-mode .topbar { display: none !important; } /* Full-Width Edge-to-Edge: Kein seitliches Padding, Inhalt nutzt volle Displaybreite [cite: 2026-02-18] */ body.provider-mode main { padding-top: 0 !important; margin-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; } body.provider-mode main > [id^="v-provider-"].view.active { margin-top: 0 !important; padding-top: 0 !important; } /* Kein leerer Screen beim Nach-oben-Scrollen: Overscroll/Rubber-Band deaktivieren */ body.provider-mode { overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; overflow-x: hidden; } /* Nuclear: Im Provider-Modus nur die aktive Provider-View sichtbar – alle anderen main-Kinder aus dem Layout */ /* Alle main-Kinder ausblenden außer aktive Provider-View + FAB + Week-Sheets (FAB-Schnellaktionen) [cite: 2026-03-02] */ body.provider-mode main > *:not([id^="v-provider-"].view.active):not(#fabProviderAddOffer):not(#weekMagicSheetBd):not(#weekMagicSheet):not(#kwSelectorBd):not(#kwSelectorSheet):not(#weekTemplatesBd):not(#weekTemplatesSheet):not(#weekTemplatePreviewBd):not(#weekTemplatePreviewSheet) { display: none !important; } /* Anbieter-Views: kein Extra-Platz oben – Inhalt beginnt sofort (Safe-Area nur im Header) */ body.provider-mode [id^="v-provider-"] { padding-top: 0 !important; margin-top: 0 !important; } body.provider-mode [id^="v-provider-"].view.active { padding-top: 0 !important; } /* Discover Header – Pure-Clean Airbnb: Frei über volle Breite, nur feine Trennlinie [cite: 2026-02-20 Schritt 2.2] */ .discover-header-sticky{ position: sticky !important; top: 0 !important; left: 0; right: 0; width: 100%; z-index: 1500 !important; min-height: 60px; padding: 0 !important; margin: 0 !important; padding-top: env(safe-area-inset-top, 0) !important; background: #ffffff !important; border: none; border-bottom: 1px solid #ebebeb; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; } /* Perfect Alignment & Symmetry: Flex + Logo absolut mittig [cite: 2026-02-18] */ /* Minimalist Header: Reinweiß, zentriert [cite: 2026-02-20 Schritt 1.4] */ #v-discover .discover-header-top-row.discover-header-minimal{ position: relative; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 56px; padding: 12px 20px; background: transparent; min-height: 44px; padding: 8px 16px; padding-top: 8px; padding-left: max(16px, env(safe-area-inset-left, 0)); padding-right: max(16px, env(safe-area-inset-right, 0)); z-index: 10; } /* Fallback: alte Top-Row ohne Minimal-Klasse */ #v-discover .discover-header-top-row{ position: relative; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; min-height: 56px; padding: 12px 20px; background: linear-gradient(180deg, #121826 0%, #0f172a 100%); min-height: 44px; padding: 4px 12px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); z-index: 10; } #v-discover .discover-logo{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--font-main); font-weight: 900; font-size: 20px; letter-spacing: -0.03em; line-height: 1.2; max-height: 24px; color: #fff; letter-spacing: -0.03em; z-index: 1; pointer-events: none; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } #v-discover .discover-header-top-row.discover-header-minimal .discover-logo{ color: #0f172a; } #v-discover .discover-header-sticky.scrolled .discover-logo { transform: translate(-50%, -50%) scale(0.94); opacity: 0.95; } /* Linke Seite: Standort – gleiche optische Höhe wie GPS rechts [cite: 2026-02-18] */ #v-discover .discover-location-row-wrap{ display: flex; align-items: center; gap: 6px; min-height: 32px; min-width: 0; z-index: 2; } /* Standort: Frei schwebend, kein Kasten [cite: Pure-Clean 2.2] */ #v-discover .discover-location-btn-inner{ padding: 8px 0; border-radius: 0; background: transparent; border: none; transition: opacity 0.2s ease; } #v-discover .discover-header-top-row.discover-header-minimal .discover-location-btn-inner{ background: transparent; border: none; } #v-discover .discover-location-btn-inner:active{ background: rgba(255,255,255,0.2); } #v-discover .discover-location-text, #v-discover #discoverCurrentLocation{ font-size: 14px !important; font-weight: 700; color: rgba(255,255,255,0.95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #v-discover .discover-header-top-row.discover-header-minimal .discover-location-text, #v-discover .discover-header-top-row.discover-header-minimal #discoverCurrentLocation{ color: #0f172a; } /* Rechte Seite: GPS-Button als symmetrischer Partner – gleiche Gewichtung [cite: 2026-02-18] */ #v-discover .discover-header-right-anchor{ display: flex; align-items: center; justify-content: flex-end; min-height: 32px; z-index: 2; } #v-discover .discover-gps-btn{ width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,0.1) !important; background: rgba(255,255,255,0.05) !important; color: #fff !important; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } #v-discover .discover-gps-btn:active{ background: var(--brand, #FFD700) !important; transform: scale(0.92); } #v-discover .discover-gps-btn i, #v-discover .discover-gps-btn svg{ width: 16px !important; height: 16px !important; color: #fff !important; } /* Kalender-Icon: Frei schwebend, kein Kasten [cite: Pure-Clean 2.2] */ #v-discover .discover-calendar-btn{ display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border-radius: 50%; border: none; background: transparent; color: #0f172a; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; -webkit-tap-highlight-color: transparent; } #v-discover .discover-calendar-btn:active{ background: rgba(0,0,0,0.1); transform: scale(0.94); } #v-discover .discover-calendar-btn i, #v-discover .discover-calendar-btn svg{ width: 20px !important; height: 20px !important; color: inherit !important; } #v-discover .discover-filter-sticky{ background: transparent !important; border: none !important; flex-shrink: 0; position: relative; z-index: 9; width: 100%; } /* Scroll-Fade: Standort-Text ausblenden ab 50px Scroll – mehr Platz für Filter-Pills */ #v-discover .discover-header-sticky.scrolled #discoverCurrentLocation{ opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } #v-discover .discover-header-sticky:not(.scrolled) #discoverCurrentLocation{ opacity: 1; transition: opacity 0.25s ease; } /* Pin-Wiggle: Rotation -8° bis +8°, 0,5s [cite: 2026-01-29] */ @keyframes pin-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } } /* Pin-Wiggle: nur einmal beim Laden, nicht ablenkend [cite: 2026-01-29] */ #v-discover .discover-location-pin { display: inline-block; animation: pin-wiggle 0.5s ease-in-out 0.4s both; animation-iteration-count: 1; } /* Ebene 1: Standortsuche (ganz oben) */ .discover-location-search-row{ padding:10px 16px 8px; max-width:100%; margin:0 auto; box-sizing:border-box; } .discover-location-search-input{ width:100%; padding:12px 16px; border-radius:12px; border:1px solid rgba(0,0,0,.1); background:#fff; font-size: var(--header-input-size); font-weight: var(--header-input-weight); color: var(--body-text-color); outline:none; box-sizing:border-box; } .discover-location-search-input::placeholder{ color:#999; font-weight:400; } .discover-location-search-input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,215,0,0.1); } /* Location-Autofill Suggestions */ .location-suggestion-item{ padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.05); transition:background 0.2s ease; } .location-suggestion-item:hover{ background:rgba(0,0,0,0.05); } .location-suggestion-item:active{ background:rgba(0,0,0,0.1); } .location-suggestion-item{ padding:10px 12px; cursor:pointer; border-bottom:1px solid rgba(0,0,0,0.05); transition:background 0.2s ease; } .location-suggestion-item:hover{ background:rgba(0,0,0,0.05); } .location-suggestion-item:active{ background:rgba(0,0,0,0.1); } /* Ebene 2: Aktueller Standort zentriert (klickbar) */ .discover-location-row{ display:flex; justify-content:center; align-items:center; padding:6px 10px; max-width:100%; margin:0 auto; box-sizing:border-box; } .discover-location-pill-clickable{ display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:20px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.08); font-size: var(--pill-font-size); font-weight: var(--font-weight-semibold, 600); color: var(--body-text-color); cursor:pointer; transition:all 0.2s ease; border:none; background:transparent; } .discover-location-pill-clickable:hover{ background:rgba(0,0,0,.06); } .discover-location-pill-clickable i{ width:16px; height:16px; color:#666; } /* Ebene 2: Quick-Filter Buttons nebeneinander */ .discover-quick-filters-row{ display:flex; align-items:center; justify-content:center; gap:6px; padding:0 10px 6px; max-width:100%; margin:0 auto; box-sizing:border-box; } .quick-filter-btn{ display:flex; align-items:center; gap:6px; padding:10px 16px; border-radius:24px; border:1px solid rgba(0,0,0,.1); background:#fff; color: var(--body-text-color); font-size: var(--pill-font-size); font-weight: var(--font-weight-semibold, 600); cursor:pointer; transition:all 0.2s ease; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,.05); } .quick-filter-btn i{ width:18px; height:18px; flex-shrink:0; } .quick-filter-btn:hover{ background:#f8f8f8; transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,.08); } .quick-filter-btn.active{ background:var(--brand); color:#2D3436; border-color:var(--brand); font-weight:700; box-shadow:0 4px 12px rgba(255,204,0,0.3); } .discover-header{ position:relative; } /* Kompakte Standort-Pill (44-48px) - zentriert */ .discover-location-pill{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:24px; background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.08); height:44px; box-sizing:border-box; max-width:280px; width:100%; } .discover-location-icon-left{ width:18px; height:18px; flex-shrink:0; opacity:.7; color:#666; } .discover-location-input{ flex:1; border:none; background:transparent; font-size: var(--header-input-size); font-weight: var(--header-input-weight); color: var(--body-text-color); outline:none; min-width:0; } .discover-location-input::placeholder{ color:#999; font-weight:400; } .discover-location-btn{ width:32px; height:32px; border-radius:50%; border:none; background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; flex-shrink:0; } .discover-location-btn:hover{ background:rgba(0,0,0,.05); } .discover-location-btn i{ width:18px; height:18px; color:#666; } /* Filter-Leiste: Kategorien – Fixiert oben (Design-Tokens) */ .discover-categories-wrapper{ padding:6px 16px 8px; border-top: var(--header-border); width:100%; max-width:100%; margin:0; position:sticky; top:0; background: var(--header-bg); z-index:50; box-shadow:0 2px 8px rgba(0,0,0,0.02); } .discover-categories-scroll{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 10px; scrollbar-width:none; } .discover-categories-scroll::-webkit-scrollbar{display:none} .discover-category-chip{ flex:0 0 auto; padding:6px 12px; min-height: 32px; border-radius:16px; border:1px solid rgba(0,0,0,.08); font-size: var(--font-meta, 12px); font-weight: var(--font-weight-semibold, 600); display:flex; align-items:center; gap:6px; background: var(--pill-bg-inactive); color: var(--pill-color-inactive); cursor:pointer; transition:all 0.2s ease; white-space:nowrap; justify-content:center; gap:3px; } .discover-category-chip i{ width:12px; height:12px; flex-shrink:0; opacity:0.7; } .discover-category-chip span{ font-size:11px; } .discover-category-chip.active{ background: var(--brand); color:#000; border-color: var(--brand); font-weight: var(--pill-font-weight); box-shadow:0 2px 6px rgba(255,204,0,.3); } .discover-category-chip:not(.active){ border-color: rgba(0,0,0,.08); background: var(--pill-bg-inactive); } .discover-category-chip:active{ transform:scale(.96); } .discover-filter-sticky{ overflow-x:visible; min-width:0; width:100%; box-sizing:border-box; } /* Pure-Clean: Kategorie-Pills direkt auf Hintergrund, kein Rahmen [cite: 2.2] */ .discover-filter-sticky.discover-filter-pure{ background: transparent !important; border: none !important; } /* Sticky Category-Bar: Volle Breite, keine seitlichen Abstände [cite: 2026-02-20 Schritt 1.5] */ #v-discover #discoverCategoriesBar.discover-header-pills{ display: flex; justify-content: space-around; gap: 0; overflow-x: visible; overflow-y: visible; scroll-snap-type: none; padding: 12px 0 14px; scrollbar-width: none; min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; flex-wrap: nowrap; } #v-discover #discoverCategoriesBar .discover-category-chip{ flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border-radius: 0; font-size: 13px; font-weight: 600; border: none; background: transparent; color: #64748b; cursor: pointer; transition: color 0.2s, border-color 0.2s; -webkit-tap-highlight-color: transparent; box-shadow: none; display: flex; align-items: center; justify-content: center; gap: 4px; border-bottom: 2px solid transparent; } #v-discover #discoverCategoriesBar .discover-category-chip:active{ transform: scale(0.98); } #v-discover #discoverCategoriesBar .discover-category-chip.active{ color: #0f172a; border-bottom: 2px solid #0f172a; background: transparent; } /* Fallback: andere discover-header-pills (ohne discoverCategoriesBar) behalten Scroll */ #v-discover .discover-header-pills:not(#discoverCategoriesBar){ display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding: 8px 12px 10px; justify-content: flex-start; } /* Radius & Tage: schmal, feine Grauschrift [cite: 2026-02-18] */ #v-discover .discover-radius-time-row.discover-filter-row-slim{ display: flex; align-items: center; gap: 6px; padding: 4px 12px 6px; flex-wrap: wrap; } #v-discover .discover-filter-row-slim .discover-radius-pill{ min-height: 32px; padding: 6px 10px; font-size: 13px; color: #94a3b8; } #v-discover #discoverDaysBar{ display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:4px 12px 6px; scroll-padding:12px; scrollbar-width:none; min-width:0; max-width:100%; width:100%; box-sizing:border-box; white-space:nowrap; touch-action:pan-x; } #v-discover #discoverDaysBar::-webkit-scrollbar{ display:none; } /* Radius & Tage: 13px, dezentes Grau – nur aktiver (gelber) Tag sticht hervor [cite: 2026-02-18] */ #v-discover #discoverDaysBar .cust-chip{ min-height:28px; min-width:52px; width:52px; padding:4px 4px; font-size:13px; font-weight:600; border-radius:999px; flex:0 0 52px; box-sizing:border-box; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid rgba(0,0,0,0.05); background:#f8fafc; color:#cbd5e1; transition:background 0.2s, color 0.2s, border-color 0.2s; } #v-discover #discoverDaysBar .cust-chip.active{ background:#FFD700; color:#1a1a1a; border-color:rgba(255,215,0,0.6); box-shadow:0 1px 4px rgba(255,215,0,0.25); } /* TGTG-Airbnb: Full-Width Liste, Inset-Dividers, viel Weißraum [cite: 2026-02-20] */ #v-discover .discover-offers-list{ display: flex !important; flex-direction: column !important; align-items: center !important; gap: 40px !important; padding-top: 20px !important; padding-bottom: 100px !important; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } #v-discover .dish-card{ position: relative !important; width: 100% !important; max-width: 320px !important; display: flex !important; flex-direction: column !important; align-items: center !important; } #v-discover .tgtg-list-item{ background: transparent !important; border: none !important; margin: 0 auto; position: relative !important; width: 100% !important; max-width: 320px !important; } #v-discover .tgtg-list-item::after{ display: none; } /* Titel 18px/800 Midnight Blue, Pillars dezent grau, Preis mutig [cite: 2.2] */ #v-discover .tgtg-list-item-title{ font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 4px !important; } #v-discover .tgtg-list-item-pillars{ gap: 4px; margin-bottom: 6px; } #v-discover .tgtg-list-item-pill{ color: #94a3b8 !important; opacity: 0.9; } #v-discover .tgtg-list-item-pill.active{ color: #64748b !important; opacity: 1; } #v-discover .tgtg-list-item-price{ font-size: 16px !important; font-weight: 900 !important; color: var(--brand) !important; } /* In meine Box: flache Pill, keine harten Schatten [cite: 2.2] */ #v-discover .tgtg-list-item-cta-row .dish-card-cta{ padding: 10px 20px; border-radius: 999px; font-weight: 800; background: var(--brand); border: none; color: #0f172a; font-size: 14px; box-shadow: none; } #v-discover .tgtg-list-item:active{ transform: scale(0.99); } /* Kompakte Karte: Preis-Badge und Actions kleiner [cite: Schritt 1.3] */ #v-discover .tgtg-list-item .tgtg-list-item-img-compact .tgtg-price-badge{ bottom: 6px; right: 6px; padding: 4px 8px; font-size: 12px; } #v-discover .tgtg-list-item .tgtg-list-item-img-compact .tgtg-actions-top{ top: 4px; right: 4px; gap: 4px; } #v-discover .tgtg-list-item .tgtg-list-item-img-compact .tgtg-btn-floating{ width: 32px; height: 32px; } /* Preis-Badge auf Bild – flach, Pure-Clean [cite: 2.2] */ #v-discover .tgtg-list-item .tgtg-price-badge{ position: absolute; bottom: 12px; right: 12px; background: var(--brand); color: #121826; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: 15px; box-shadow: none; z-index: 10; } /* Floating Actions (Herz & Teilen) – flach */ #v-discover .tgtg-list-item .tgtg-actions-top{ position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 10; } #v-discover .tgtg-list-item .tgtg-btn-floating{ width: 40px; height: 40px; background: rgba(255,255,255,0.9); border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; box-shadow: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } #v-discover .tgtg-list-item .tgtg-btn-floating:active{ transform: scale(0.92); } @keyframes heart-blink { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } /* Legacy dish-card: Fallback für Übergang (kann entfernt werden wenn tgtg überall) */ #v-discover .dish-card{ width: 100%; max-width: 100%; background: #fff !important; box-shadow: none !important; border: none !important; border-bottom: var(--tgtg-divider); padding-bottom: var(--tgtg-spacing); border-radius: 0; overflow: visible; } #v-discover .dish-card-image-wrapper{ border-radius: var(--tgtg-img-radius); overflow: hidden; } #v-discover .dish-card .pillar-pill, #v-discover .dish-card .distance-chip{ font-size: 13px; font-weight: 600; color: #64748b; } /* Pure-Clean: Discover auf warmem Hintergrund [cite: 2.2] */ #v-discover{ background: #fcfcfc !important; } /* Content: TGTG-Weißraum – Design-System padding-bottom 120px */ body:not(.provider-mode) #v-discover .discover-main{ padding-top: 0 !important; padding-left: max(16px, env(safe-area-inset-left, 0)); padding-right: max(16px, env(safe-area-inset-right, 0)); padding-bottom: calc(var(--content-padding-bottom) + env(safe-area-inset-bottom, 0)); min-height: 0; width: 100%; max-width: 100%; } /* Discover: Leerzustand mittig zwischen Header und Footer [cite: 2026-01-27, 2026-01-29] */ #v-discover #discoverOffers{ min-height: 60vh; display: flex; flex-direction: column; } /* Modern Craft Empty State – reduzierter dish-card Look [cite: 2026-02-18] */ #v-discover .empty-state-container{ flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px 48px; background: rgba(248,250,252,0.6); border-radius: 20px; margin: 0 auto; max-width: 100%; box-sizing: border-box; } #v-discover .empty-state-icon{ font-size: 56px; line-height: 1; margin-bottom: 20px; animation: empty-state-breathe 2.5s ease-in-out infinite; } @keyframes empty-state-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } #v-discover .empty-state-title{ font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-size: 1.5rem; font-weight: 600; color: #0f172a; margin: 0 0 8px; text-align: center; } #v-discover .empty-state-text{ font-family: var(--font-main); font-size: 0.95rem; color: #64748b; line-height: 1.5; margin: 0 0 24px; text-align: center; max-width: 320px; } #v-discover .empty-state-container .btn-cust-primary{ min-width: 200px; } #v-discover .cust-card{ width:100%; box-shadow: none !important; border: none !important; border-bottom: var(--tgtg-divider) !important; } #v-discover .dish-card{ margin-bottom: 0; padding: 0 var(--tgtg-spacing) var(--tgtg-spacing) !important; } #v-discover .dish-card .dish-card-image-wrapper{ width: 100%; } #v-discover .dish-card > *:not(.dish-card-image-wrapper){ padding-left: 0; padding-right: 0; } #v-discover .dish-card > *:not(.dish-card-image-wrapper):first-of-type{ padding-top: var(--tgtg-spacing); } #v-discover .dish-card .dish-card-cta{ margin-left: auto; margin-right: auto; } #v-discover .cust-card:active{ transform:scale(0.99); box-shadow:0 2px 12px rgba(0,0,0,0.06); } #v-discover .discover-tiles-grid .cust-card .cust-card-body{ display:flex; flex-direction:column; } #v-discover .discover-tiles-grid .cust-card .btn.btn-mittagsbox-cta{ min-height:52px; font-size:16px; border-radius:14px; background:#FFD700 !important; color:#1a1a1a; font-weight:800; box-shadow:0 2px 12px rgba(255,215,0,0.25); } /* Discovery: Restaurant-Karte (Anbieter-Block) + Tiles darunter */ #v-discover .discover-restaurant-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; margin:0 0 12px 0; border-radius:var(--tgtg-img-radius); background:#fff; border:none; box-shadow:none; border-bottom:var(--tgtg-divider); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform 0.15s, box-shadow 0.2s; } #v-discover .discover-restaurant-card:active{ transform:scale(0.99); } #v-discover .discover-restaurant-card .restaurant-name{ font-size: var(--font-body-lg, 16px); font-weight: 800; color: var(--header-title-color); } #v-discover .discover-restaurant-card .restaurant-meta{ font-size: var(--font-meta); color: var(--header-subtitle-color); font-weight: var(--font-weight-semibold, 600); margin-top:2px; } #v-discover .discover-tiles-grid{ display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:20px; padding:0 0 8px; } #v-discover .discover-tiles-grid .cust-card{ width:100%; margin:0; border-radius:var(--tgtg-img-radius); overflow:hidden; box-shadow:none; border-bottom:var(--tgtg-divider); } #v-discover .discover-tiles-grid .cust-card .cust-card-img{ display:block; width:100%; height:auto; max-height:240px; object-fit:cover; opacity:0; transition:opacity 0.35s ease; } #v-discover .discover-tiles-grid .cust-card .cust-card-img.img-loaded{ opacity:1; } /* Silent & Clean: 4:3 Bild, Pillars unter Bild, kompakte Karte, 1.5 Kacheln sichtbar (S25) */ #v-discover .discover-tiles-grid .cust-card.discover-card-silent{ max-height:480px; display:flex; flex-direction:column; } #v-discover .discover-tiles-grid .cust-card.discover-card-silent .discover-card-img-wrap{ flex-shrink:0; } #v-discover .discover-tiles-grid .cust-card.discover-card-silent .discover-card-img-inner .cust-card-img{ max-height:none; height:100%; opacity:0; transition:opacity 0.35s ease; } #v-discover .discover-tiles-grid .cust-card.discover-card-silent .discover-card-img-inner .cust-card-img.img-loaded{ opacity:1; } #v-discover .discover-tiles-grid .cust-card.discover-card-silent .discover-card-pillars{ flex-shrink:0; } #v-discover .discover-tiles-grid .cust-card.discover-card-silent .cust-card-body{ flex:1; min-height:0; display:flex; flex-direction:column; } #v-discover .discover-tiles-grid .cust-card.discover-card-silent .btn-mittagsbox-cta{ width:auto !important; min-width:200px; } #v-discover .discover-block{ margin-bottom:24px; } #v-discover .status-container{ display:flex; gap:6px; margin-top:8px; flex-wrap:nowrap; overflow-x:auto; } .discover-radius-row{ position:relative; } .discover-radius-pill{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; min-width:48px; padding:10px 16px; border-radius:24px; border:1px solid #e5e7eb; background:#fff; color:#1a1a1a; font-size:14px; font-weight:700; cursor:pointer; -webkit-tap-highlight-color:transparent; } .discover-radius-opt{ display:block; width:100%; min-height:48px; padding:14px 18px; border:none; background:none; text-align:left; font-size:15px; font-weight:600; color:#1a1a1a; cursor:pointer; border-radius:12px; } .discover-radius-opt:hover{ background:#f1f3f5; } .discover-radius-opt:active{ background:#e5e7eb; } /* Switch-Button: Thumb-Zone unten Mitte (S25) */ .discover-view-switch{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + env(safe-area-inset-bottom, 24px)); min-height:56px; padding:14px 24px; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; border:2px solid #e5e7eb; border-radius:28px; font-size:16px; font-weight:800; color:#1a1a1a; cursor:pointer; box-shadow:0 6px 24px rgba(0,0,0,0.12); z-index:90; transition:transform 0.15s, box-shadow 0.2s; -webkit-tap-highlight-color:transparent; } .discover-view-switch:active{ transform:translateX(-50%) scale(0.97); box-shadow:0 2px 12px rgba(0,0,0,0.1); } /* Karte: Pins mit großem Touch-Ziel (S25), mind. 56px */ .discover-map-canvas .discover-pin{ position:absolute; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:56px; min-height:56px; padding:12px; box-sizing:border-box; cursor:pointer; transform:translate(-50%,-100%); filter:drop-shadow(0 2px 10px rgba(0,0,0,0.2)); -webkit-tap-highlight-color:transparent; } .discover-map-canvas .discover-pin-emoji{ font-size:28px; margin-bottom:4px; line-height:1; } .discover-map-canvas .discover-pin-price{ background:#fff; padding:6px 12px; border-radius:14px; font-size:14px; font-weight:800; color:#1a1a1a; border:2px solid #121826; white-space:nowrap; } /* Pin-Drawer: über fixierter Footer-Navigation, keine Z-Index-Kollision [cite: 2026-01-27, 2026-01-29] */ #discoverPinDrawer.discover-pin-drawer{ z-index: 1100 !important; transition:transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); will-change:transform; } .discover-pin-drawer:not(.open){ transform:translateY(100%); pointer-events:none; visibility:hidden; } .discover-pin-drawer.open{ transform:translateY(0); pointer-events:auto; visibility:visible; } .discover-leaflet-pin{ background:none !important; border:none !important; } #discoverPinDrawerBackdrop{ z-index: 1099 !important; transition:opacity 0.3s ease, visibility 0.3s; } #discoverPinDrawerBackdrop.open{ opacity:1; visibility:visible; } #discoverPinDrawerBackdrop:not(.open){ opacity:0; visibility:hidden; pointer-events:none; } /* Kalender (horizontal swipebar, ohne Überschrift, distinct style) */ .discover-calendar{ padding:0 16px 14px; width:100%; max-width:100%; margin:0; border-top:1px solid rgba(0,0,0,.06); margin-top:4px; padding-top:10px; } .discover-calendar-scroll{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 10px; scrollbar-width:none; } .discover-calendar-scroll::-webkit-scrollbar{display:none} .discover-day{ flex:0 0 auto; padding:8px 14px; border-radius:16px; border:1.5px solid rgba(0,0,0,.15); font-size:13px; font-weight:600; background:#fff; color:#666; cursor:pointer; transition:all .2s; white-space:nowrap; min-width:50px; text-align:center; } .discover-day.active{ background:var(--brand); color:#000; border-color:var(--brand); box-shadow:0 2px 6px rgba(255,204,0,.25); font-weight:900; } .discover-day:active{ transform:scale(.96); } /* Quick-Filter Pill (große Kapsel) */ .discover-quick-filter-pill{ transition:all 0.2s ease; } .discover-quick-filter-pill.active{ background:var(--brand) !important; border-color:var(--brand) !important; color:#1a1a1a !important; font-weight:900 !important; box-shadow:0 2px 6px rgba(255,204,0,.3); } .discover-quick-filter-pill:active{ transform:scale(.96); } /* Navigation: "Zur Liste wechseln" Button (sticky) */ .discover-list-toggle-row{ position:sticky; top:0; z-index:50; padding:8px 10px; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 2px 8px rgba(0,0,0,.05); transition:box-shadow 0.2s ease; } .discover-list-toggle-row.scrolled{ box-shadow:0 4px 12px rgba(0,0,0,.1); } .btn-list-toggle{ width:100%; padding:12px 20px; border-radius:999px; border:1px solid rgba(0,0,0,.1); background:#fff; font-size:14px; font-weight:600; color:#333; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 2px 6px rgba(0,0,0,.08); } .btn-list-toggle:hover{ background:#f8f8f8; transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.12); } .btn-list-toggle:active{ transform:translateY(0); box-shadow:0 2px 4px rgba(0,0,0,.1); } .btn-list-toggle i{ width:18px; height:18px; } /* Angebots-Liste Container (kompakt, vertikal) */ .discover-offers{ width:100%; max-width:100%; margin:0; padding:12px 16px; display:flex; flex-direction:column; gap:6px; box-sizing:border-box; } /* Polaroid-Karten: Zufällige Rotation für natürlichen Look */ .card.polaroid{ transform:rotate(0deg); transition:transform 0.3s ease, box-shadow 0.3s ease; border-radius:var(--tgtg-img-radius) !important; box-shadow:none !important; border:none !important; } /* Airbnb: Keine Rotation mehr – saubere Karten [cite: 2026-02-20] */ .card.polaroid:nth-child(3n+1), .card.polaroid:nth-child(3n+2), .card.polaroid:nth-child(3n+3){ transform:rotate(0deg); } .card.polaroid:hover{ transform:scale(1.02); box-shadow:var(--tgtg-shadow-minimal); z-index:10; } /* Kompakte Horizontale Gericht-Karte (Slim-Card) - High Performance */ /* Entscheidungs-Kacheln (2x2 Grid) */ .decision-tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; } @media (min-width: 640px) { .decision-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (min-width: 1024px) { .decision-tiles-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } } /* Rechte Seite: Details (kompakt, ohne extra Padding) */ .dish-details { flex: 1; padding: 0; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } /* Obere Zeile: Name & Preis */ .dish-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } /* Gerichtsname: Serif für Speisekarten-Stil [cite: 2026-02-18] */ .dish-name { font-size: 20px; font-weight: 600; color: #0f172a; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; -webkit-box-orient: vertical; overflow: hidden; } /* Favoriten Grid-Kachel: Airbnb-Style [cite: 2026-02-20] */ .fav-grid-card { position: relative; background: #fff !important; border-radius: var(--tgtg-img-radius); box-shadow: none; overflow: hidden; border-bottom: none; border: none; } @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } /* Jiggle-Effekt: Leichtes, dauerhaftes Wackeln (Rotation ±1.2°) */ @keyframes jiggle { 0%, 100% { transform: rotate(-1.2deg); } 25% { transform: rotate(1.2deg); } 50% { transform: rotate(-1.2deg); } 75% { transform: rotate(1.2deg); } } /* Jiggle-Animation nur auf .fav-grid-card anwenden */ .fav-grid-card { animation: fadeIn 0.3s ease-out, jiggle 3s ease-in-out infinite; } /* Exit-Animation: Kachel skaliert auf 0 und verschwindet, andere rücken flüssig nach */ @keyframes removeCard { 0% { opacity: 1; transform: scale(1) rotate(0deg); } 100% { opacity: 0; transform: scale(0) rotate(0deg); } } .fav-grid-card.removing { animation: removeCard 0.25s ease-out forwards; } /* Skeleton Loading Animation (Pulse) */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .skeleton-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .skeleton-bg { background-color: #e2e8f0; /* slate-200 */ } .skeleton-bg-light { background-color: #f1f5f9; /* slate-100 */ } /* Favoriten-Icon Bounce */ @keyframes favBounce { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.3); } 50% { transform: scale(0.9); } 75% { transform: scale(1.15); } } .fav-icon-bounce { animation: favBounce 0.5s ease-out; } @keyframes cartIconGlow { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.4); transform: scale(1.15); } } .cart-icon-glow { animation: cartIconGlow 0.5s ease-out; } /* Mittagsbox-Tab „atmet“ beim Eintreffen des Thumbnails (10–20% Scale) */ @keyframes cartIconBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } .cart-icon-breathe { animation: cartIconBreathe 0.45s ease-out; } /* Mittagsbox: Aktive Session – pulsierender Status-Punkt */ @keyframes mittagsbox-session-pulse { 0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px rgba(34,197,94,0.3); } 50% { opacity: 0.85; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(34,197,94,0.2); } } .mittagsbox-session-dot { animation: mittagsbox-session-pulse 2s ease-in-out infinite; } /* Abholnummer-Hero (v-cart, v-order-success): Design-System 2.5rem/950 monospace */ #cartActiveAbholnummerDisplay, #orderSuccessAbholnummer { font-family: ui-monospace, monospace !important; font-size: var(--abholnummer-size) !important; font-weight: var(--abholnummer-weight) !important; color: var(--color-title) !important; letter-spacing: 0.08em; line-height: 1.1; } #v-cart #cartActiveAbholnummerDisplay { margin: 12px 0 4px; letter-spacing: 0.08em; } #orderSuccessAbholnummer { letter-spacing: 0.12em; font-size: 2.5rem !important; font-weight: 950 !important; } /* Mittagsbox: Karte pro Gericht (Thumbnail, 3 Säulen, Routen, Abgeholt) */ .mittagsbox-active-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.05); } .mittagsbox-active-card .mittagsbox-card-row { display:flex; gap:16px; padding:16px; align-items:flex-start; } .mittagsbox-active-card .mittagsbox-thumb { width:88px; height:88px; border-radius:14px; overflow:hidden; flex-shrink:0; background:#f1f3f5; } .mittagsbox-active-card .mittagsbox-thumb img { width:100%; height:100%; object-fit:cover; } .mittagsbox-active-card .mittagsbox-body { flex:1; min-width:0; } .mittagsbox-active-card .mittagsbox-pillars { display:flex; gap:10px; margin-top:10px; font-size:18px; } .mittagsbox-active-card .mittagsbox-pillars span { opacity:0.5; } .mittagsbox-active-card .mittagsbox-pillars span.active { opacity:1; } .mittagsbox-active-card .mittagsbox-route-btns { display:flex; gap:10px; margin-top:14px; } .mittagsbox-active-card .mittagsbox-route-btns button { flex:1; min-height:44px; border-radius:12px; border:none; background:#f1f3f5; font-size:13px; font-weight:700; color:#1a1a1a; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:transform 0.1s, background 0.2s; -webkit-tap-highlight-color:transparent; } .mittagsbox-active-card .mittagsbox-route-btns button:active { transform: translateY(2px) scale(0.98); } .mittagsbox-active-card .btn-abgeholt { width:100%; min-height:52px; margin-top:16px; border-radius:14px; border:none; background:#22c55e; color:#fff; font-size:16px; font-weight:800; cursor:pointer; transition:transform 0.1s; } .mittagsbox-active-card .btn-abgeholt:active { transform: scale(0.98); } /* Herz pulsiert einmal beim Favorisieren (Magic Move) */ @keyframes heartPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.9; } } .heart-pulse-once { animation: heartPulse 0.4s ease-out; } /* Ghost: transparenter Schatten am Startort während des Flugs */ .fly-thumbnail-ghost { position: fixed; z-index: 10000; pointer-events: none; border-radius: 12px; overflow: hidden; opacity: 0.4; transition: opacity 0.25s ease; } .fly-thumbnail-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Flug-Animation: Thumbnail fliegt in Parabel in die Mittagsbox */ .fly-thumbnail { position: fixed; z-index: 10001; pointer-events: none; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .fly-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Mittagsbox: Discovery-Look – breite Karten (95%), Slim-Pills, einheitlich mit v-discover */ #v-fav #favDishes.fav-dishes-grid, #v-fav #favDishes { display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 0 0 12px !important; max-width: 100%; align-items: center; } #v-fav .fav-grid-card, #v-fav .fav-card { width: 95% !important; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; min-height: 0; } #v-fav .fav-grid-card .fav-card-img-wrap, #v-fav .fav-card .fav-card-img-wrap { width: 100%; aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; background: #f1f3f5; position: relative; } #v-fav .fav-grid-card .fav-card-img-wrap img, #v-fav .fav-card .fav-card-img-wrap img, #v-fav .fav-card > img.fav-card-img { width: 100%; height: 100%; object-fit: cover; } /* Abgeholt: dezent schwarz-weiß auf dem Bild */ #v-fav .fav-card.fav-card-abgeholt .fav-card-img-wrap img, #v-fav .fav-card.fav-card-abgeholt > img.fav-card-img, #v-fav .fav-grid-card.fav-card-abgeholt .fav-card-img-wrap img { filter: grayscale(100%); opacity: 0.85; } #v-fav .fav-grid-card .fav-card-body, #v-fav .fav-card .fav-card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px 14px; } #v-fav .fav-grid-card .fav-card-title, #v-fav .fav-card .fav-card-title { font-size: 16px !important; font-weight: 800; color: var(--header-title-color); margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } /* Slim-Pills: 3 Säulen wie Discovery (🍴 🧾 🔄), 🧾 mit #FFD700 */ #v-fav .fav-card-pillars, #v-fav .saeulen-mini, #v-fav .card-pillars { display: flex; align-items: center; gap: 12px; padding: 8px 0 10px; flex-wrap: wrap; } #v-fav .fav-card-pillars .pillar-pill, #v-fav .saeulen-mini .emoji-icon { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--pill-color-inactive); opacity: 0.7; } #v-fav .fav-card-pillars .pillar-pill.active, #v-fav .saeulen-mini .emoji-icon.active { opacity: 1; color: var(--header-title-color); } #v-fav .fav-card-pillars .pillar-pill.pillar-abholnummer.active, #v-fav .saeulen-mini .emoji-icon.active.abholnummer-highlight, #v-fav .abholnummer-highlight { background: var(--brand); color: #1a1a1a; padding: 4px 8px; border-radius: 999px; opacity: 1; } #v-fav .fav-card-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } #v-fav .fav-card-actions .btn-route { flex: 1; min-height: 44px; border-radius: 12px; border: none; background: #f1f3f5; font-size: 14px; font-weight: 700; color: #1a1a1a; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: transform 0.1s, background 0.2s; -webkit-tap-highlight-color: transparent; } #v-fav .fav-card-actions .btn-route:active { transform: scale(0.98); } #v-fav .fav-card-actions .btn-abholnummer { min-height: 44px; padding: 0 18px; border-radius: 12px; border: none; background: var(--brand); color: #1a1a1a; font-size: 14px; font-weight: 800; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 2px 12px rgba(255,215,0,0.35); transition: transform 0.1s; } #v-fav .fav-card-actions .btn-abholnummer:active { transform: scale(0.98); } #v-fav .fav-card-price-sticker { position: absolute; bottom: 8px; right: 8px; padding: 4px 10px !important; border-radius: 8px !important; background: rgba(0,0,0,0.6) !important; font-weight: 800; font-size: 14px !important; color: #fff; z-index: 10; } /* Favoriten-Header: schlank & verspielt – "Deine Favoriten heute ⚡" */ .fav-header-wrap { background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,250,240,0.96) 100%) !important; } .fav-header-title { font-family: var(--font-main) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; } /* Share-Button: Icon ohne Rahmen, schwebt rechts neben Text */ #btnFavShareHeader { border: none !important; background: transparent !important; box-shadow: none !important; } #v-fav #favContent { padding: 8px 0 20px !important; } #v-fav .fav-grid-card .btn, #v-fav .fav-card .btn { min-height: 44px !important; font-size: 14px !important; border-radius: 12px !important; } /* Mittagsbox-Zusammenfassung: Gesamtwert oben */ #v-fav .fav-summary-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; margin: 0 0 16px; background: rgba(255,255,255,0.95); border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.04); } #v-fav .fav-summary-bar .fav-summary-label { font-size: 14px; font-weight: 700; color: var(--header-subtitle-color); } #v-fav .fav-summary-bar .fav-summary-value { font-size: var(--size-list-title); font-weight: var(--weight-heavy); color: var(--brand); } /* Meins: letzte Bestellzeile ohne unteren Rand */ #profileOrderHistoryList .profile-order-item:last-child, #profileOrderHistoryMore .profile-order-item:last-child { border-bottom: none !important; } /* Responsive Grid für Provider-Favoriten */ @media (min-width: 768px) { #favProviders { grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)) !important; gap: 20px !important; justify-items: center !important; } } @media (max-width: 480px) { #favProviders { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; justify-items: center !important; } } /* Responsive Discovery-Liste: Vertikale Liste für alle Bildschirmgrößen (kompakt) */ @media (max-width: 374px) { .discover-offers { padding: 10px 8px !important; gap: 5px !important; } } /* Discover (Kunde): discover-tiles-grid Cust-Cards [cite: 2026-02-18] */ @media (max-width: 430px) { body:not(.provider-mode) #v-discover .discover-tiles-grid .cust-card:not(.discover-card-silent) .cust-card-img { max-height: 170px; } } /* Provider-Layout: Optimiert für kleine Bildschirme (Samsung S25, ~360-412px) */ @media (max-width: 420px) { [id^="v-provider-"]{ padding:16px 12px !important; } [id^="v-provider-"] h1{ font-size:26px !important; } [id^="v-provider-"] .panel{ padding:14px !important; border-radius:16px !important; } #providerStatusIndicator{ top:12px; right:12px; padding:6px 10px; } #providerStatusIndicator span{ font-size:11px; } /* KPI Cards 3er-Grid → kleinere Schrift */ #kpiCardTagesessen, #kpiCardAbholungen, #kpiCardKochbuch{ padding:14px 10px !important; } #kpiCardTagesessen div:first-child, #kpiCardAbholungen div:first-child, #kpiCardKochbuch div:first-child{ font-size:26px !important; } /* Provider-Nav: kompakter */ #providerNav .navbtn{ font-size:10px; padding:8px 4px; } #providerNav .navbtn .ico svg{ width:20px; height:20px; } } @media (max-width: 360px) { [id^="v-provider-"]{ padding:12px 10px !important; } [id^="v-provider-"] h1{ font-size:24px !important; } #kpiCardTagesessen div:first-child, #kpiCardAbholungen div:first-child, #kpiCardKochbuch div:first-child{ font-size:22px !important; } } @media (min-width: 768px) { .discover-offers { padding: 16px 12px !important; gap: 8px !important; } } /* Dish-Card: Gerichtsname Serif (Vertical Gallery) [cite: 2026-02-18] */ #v-discover .dish-card .dish-name{ font-family: var(--font-main); font-size: 18px; font-weight: 800; color: var(--tgtg-title-color) !important; line-height: 1.2; margin: 0; letter-spacing: -0.02em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #v-discover .dish-card .dish-price{ font-size: 14px; font-weight: 800; color: var(--brand, #FFD700); white-space: nowrap; flex-shrink: 0; font-family: var(--font-main); } .dish-price { font-size: 14px; font-weight: 800; color: #111; white-space: nowrap; font-family: var(--font-main); } /* Mittlere Zeile: Anbieter */ .dish-provider { font-size: 13px; color: #666; font-weight: 500; margin-top: 4px; } /* Untere Zeile: Meta & Buttons */ .dish-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; } .distance-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #444; background: #f0f0f0; padding: 4px 10px; border-radius: 8px; white-space: nowrap; } .action-group { display: flex; gap: 8px; } .btn-icon { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #f0f0f0; background: #fff; display: flex; align-items: center; justify-content: center; color: #111; transition: all 0.2s ease; cursor: pointer; flex-shrink: 0; } .btn-icon:hover { background: #f9f9f9; } .btn-icon.heart-btn:hover { color: #ff4757; border-color: #ffdce0; } .btn-icon.heart-btn.active { color: #ff4757; background: #ffdce0; border-color: #ff4757; } .discover-list-badge{ display:inline-flex; align-items:center; gap:3px; padding:4px 8px; border-radius:6px; font-size:10px; font-weight:700; background:rgba(0,0,0,.05); color:#666; } .discover-list-badge .ico-inline{ width:14px; height:14px; flex-shrink:0; } .discover-list-badge .ico-inline svg{ width:14px; height:14px; } .discover-list-badge.code{ background:rgba(255,204,0,.15); color:#b8860b; } .discover-list-badge.dine{ background:rgba(31,157,85,.1); color:#1f9d55; } .discover-list-badge.pickup{ background:rgba(0,0,0,.05); color:#666; } .discover-list-actions{ margin-top:auto; padding-top:8px; } .discover-list-btn{ width:100%; padding:10px 14px; border-radius:10px; border:none; font-weight:900; font-size:14px; cursor:pointer; transition:transform .1s, background .15s; text-align:center; background:var(--brand); color:#111; display:flex; align-items:center; justify-content:center; gap:6px; } .discover-list-btn .ico-inline{ width:18px; height:18px; flex-shrink:0; } .discover-list-btn .ico-inline svg{ width:18px; height:18px; } .discover-list-btn:active{ transform:scale(.97); background:#e6b800; } /* Anbieterbereich: Layout main – einheitlich #F2F2F7, kein Hintergrundbild */ html, body{ min-height:100vh; min-height:100dvh; } body.provider-mode main{ min-height:100vh; min-height:100dvh; min-height:100svh; display:block; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; max-width:100%; box-sizing:border-box; overflow-anchor:none; position:relative; background:#F2F2F7; } body.provider-mode main:has(#v-provider-home.view.active){ overflow:hidden !important; height:100vh !important; height:100dvh !important; min-height:0; } body.provider-mode main:has(#v-provider-home.view.active) > #v-provider-home.view.active{ height:100% !important; min-height:100% !important; } body.provider-mode main > *:not(#fabProviderAddOffer){ position: relative; z-index: 1; } body.provider-mode [id^="v-provider-"].view.active{ min-height:100vh; min-height:100dvh; display:block !important; visibility:visible !important; opacity:1 !important; scroll-margin-top:0; position:relative; width:100%; max-width:100%; overflow-x:hidden; box-sizing:border-box; } /* Erster Viewport sofort gefüllt: Inhalt oben verankern, keine Animation die verschiebt */ body.provider-mode [id^="v-provider-"].view.active{ animation:none !important; transform:translateY(0) !important; } /* Globaler Header-Standard: Alle 5 Anbieter-Seiten – permanent sticky, Meine-Küche-Style [cite: 2026-02-21] */ body.provider-mode [id^="v-provider-"] .prov-header, body.provider-mode [id^="v-provider-"] .prov-page-header, body.provider-mode [id^="v-provider-"] .dashboard-kasten-header, body.provider-mode [id^="v-provider-"] .provider-profile-header-rebuild, body.provider-mode [id^="v-provider-"] .week-header-compact, body.provider-mode [id^="v-provider-"] .provider-header-bar, body.provider-mode [id^="v-provider-"] > header.prov-page-header, body.provider-mode [id^="v-provider-"] > header.dashboard-kasten-header{ display:flex !important; flex-direction:column; position:sticky !important; top:0 !important; z-index:100; background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); font-family:'Montserrat',sans-serif; font-weight:900; text-align:left; box-sizing:border-box; } body.provider-mode #v-provider-week.view.active .week-header-compact{ display:flex !important; } body.provider-mode [id^="v-provider-"].view.active#v-provider-week{ display:flex !important; flex-direction:column !important; } /* Single Source: Alle 5 Anbieter-Container padding:0 margin:0, Edge-to-Edge [cite: 2026-02-21] */ body.provider-mode #v-provider-home, body.provider-mode #v-provider-pickups, body.provider-mode #v-provider-week, body.provider-mode #v-provider-cookbook, body.provider-mode #v-provider-profile{ padding:0 !important; margin:0 !important; } /* Globale Airbnb-Header: Pickups, Wochenplan, Kochbuch, Profil als Flex-Column */ body.provider-mode #v-provider-pickups.view.active, body.provider-mode #v-provider-week.view.active, body.provider-mode #v-provider-cookbook.view.active, body.provider-mode #v-provider-profile.view.active{ display:flex !important; flex-direction:column !important; min-height:0 !important; } /* Edge-to-Edge: Content volle Breite S25, nur Safe-Area seitlich [cite: 2026-02-21] */ body.provider-mode #v-provider-home .dashboard-floating-wrap, body.provider-mode #provPickupsScroll, body.provider-mode #kwBoardScroll, body.provider-mode #cookbookScrollWrap, body.provider-mode #v-provider-profile .provider-profile-content-rebuild{ padding-left: env(safe-area-inset-left, 0) !important; padding-right: env(safe-area-inset-right, 0) !important; } /* Meine Küche: View füllt main (height:100%), Wrap = absoluter Scroll-Bereich (immer sichtbar + scrollbar) */ #v-provider-home.view.active{ position:relative !important; height:100% !important; min-height:0 !important; max-height:100% !important; background:#fff; display:block !important; padding:0 !important; margin:0 !important; width:100%; box-sizing:border-box; overflow:hidden !important; } /* Dashboard: absoluter Scroll – Full-Width Edge-to-Edge, nur Inset-Divider zwischen Karten [cite: 2026-02-18] */ #v-provider-home .dashboard-floating-wrap{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:0 !important; display:flex; flex-direction:column; gap:0; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; min-height:0; padding:0 env(safe-area-inset-right, 0) calc(24px + 100px + env(safe-area-inset-bottom, 0)) env(safe-area-inset-left, 0) !important; padding-top:env(safe-area-inset-top, 0) !important; width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box; background:#fff; border-radius:0 !important; box-shadow:none !important; border:none !important; } /* No-Box Policy: Keine Kästen, flache Leinwand – Transparenz statt Tabelle [cite: Tabula Rasa] */ #v-provider-home .dashboard-kasten{ background:transparent !important; border-radius:0 !important; box-shadow:none !important; border:none !important; overflow:visible; } /* S25 Island Design: Hintergrund #f9f9f9, zwei schwebende Cards [cite: 2026-02-23] */ #v-provider-home .dashboard-floating-wrap{ background:#f9f9f9 !important; } #v-provider-home .dashboard-kasten-angebote, #v-provider-home .dashboard-kasten-wochenplan{ background:#fff !important; border-radius:12px !important; box-shadow:0 2px 12px rgba(0,0,0,0.08) !important; margin:0 16px 16px !important; padding:16px !important; max-width:calc(100% - 32px); box-sizing:border-box; } #v-provider-home .dashboard-kasten-angebote:last-of-type, #v-provider-home .dashboard-kasten-wochenplan:last-of-type{ margin-bottom:max(16px, env(safe-area-inset-bottom)); } /* Header „Dashboard“: Layout + Stil wie Wochenplan/Kochbuch (prov-page-header) */ #v-provider-home .dashboard-kasten-header{ position:sticky; top:0; z-index:9999; border-radius:0 !important; box-shadow:none !important; border:none !important; } /* ========== STICKY-GEWALT: Header + Sub-Bar radikal fixiert [cite: 2026-02-21] ========== * Wichtig: Scroll-Container (dashboard-floating-wrap, pickups-floating-wrap) hat overflow-y:auto. * Parent (#v-provider-home etc.) hat overflow:hidden nur für Clipping – Scroll ist im Wrap. * background-color #f5f5f0 !important verhindert Durchscheinen des dahinter scrollenden Inhalts. */ .sticky-header{ position:sticky !important; top:0 !important; z-index:1000 !important; background-color:#f5f5f0 !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); flex-shrink:0; } .sticky-sub-bar{ position:sticky !important; top:60px !important; z-index:900 !important; background-color:#f5f5f0 !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); flex-shrink:0; } @supports (top: env(safe-area-inset-top)){ .sticky-sub-bar{ top:calc(60px + env(safe-area-inset-top, 0)) !important; } } /* GLOBALER HEADER-STANDARD: Alle Anbieter-Seiten wie Meine Küche (Montserrat 900, 20px, #f5f5f0, blur, sticky top:0) */ body.provider-mode [id^="v-provider-"] > header.prov-page-header, body.provider-mode [id^="v-provider-"] > header.dynamic-header, body.provider-mode [id^="v-provider-"] > header.system-header, body.provider-mode .sticky-header{ position:sticky !important; top:0 !important; z-index:1000 !important; background-color:#f5f5f0 !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); font-family:'Montserrat','Inter',sans-serif; flex-shrink:0; } body.provider-mode [id^="v-provider-"] .prov-page-header-title, body.provider-mode [id^="v-provider-"] .system-header-title{ font-size:20px !important; font-weight:900 !important; letter-spacing:-0.03em; color:#0f172a !important; text-align:left; } body.provider-mode [id^="v-provider-"] .prov-header-toolbar{ display:flex; gap:8px; align-items:center; } #v-provider-home .dashboard-kasten-header.prov-page-header{ background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:none !important; box-shadow:0 4px 20px rgba(0,0,0,0.03) !important; } #v-provider-home .dashboard-kasten-header .prov-header-inner{ padding:0; } #v-provider-home .dashboard-kasten-header .prov-title, #v-provider-home .dashboard-kasten-header .prov-page-header-title{ font-size: 20px !important; font-weight: 900 !important; letter-spacing: -0.03em; color: #0f172a !important; } /* KPI-Kasten: .sticky-sub-bar (top: 60px), background #f5f5f0 – kein Durchscheinen */ #v-provider-home .dashboard-kasten-kpis{ padding:20px env(safe-area-inset-right, 0) 32px env(safe-area-inset-left, 0); padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); background-color:#f5f5f0 !important; flex-shrink:0; margin-bottom:0; } #v-provider-home .dashboard-kpi-row{ gap:24px; } #v-provider-home .dashboard-kasten-kpis::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(0,0,0,0.06); } /* Visuelle Trennung beim Scrollen: dezenter Schatten unter KPIs */ #v-provider-home .dashboard-kasten-kpis.kpis-scrolled{ box-shadow:0 2px 8px rgba(0,0,0,0.04); } /* KPI-Labels: 10px / 800, Uppercase, dezent grau */ #v-provider-home .dashboard-kasten-kpis .kpi-label{ font-size:10px !important; font-weight:800 !important; color:#94a3b8 !important; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:4px !important; } /* KPI-Werte: 18px / 900 */ #v-provider-home .dashboard-kasten-kpis [id^="dashboard"]{ font-size: var(--size-list-title) !important; font-weight: var(--weight-heavy) !important; text-shadow:0 1px 2px rgba(255,255,255,0.8); filter:drop-shadow(0 1px 2px rgba(0,0,0,0.06)); transition:transform 0.15s ease; } #v-provider-home .dashboard-kasten-kpis [id^="kpi"]:active [id^="dashboard"]{ transform:scale(1.05); } #v-provider-home .dashboard-kasten-kpis #dashboardTagesessenCount{ color:#1a1a1a !important; } #v-provider-home .dashboard-kasten-kpis #dashboardAbholungenCount{ color:#121826 !important; } #v-provider-home .dashboard-kasten-kpis #dashboardUmsatzToday, #v-provider-home .dashboard-kasten-kpis .kpi-umsatz-value{ color:var(--status-active-green) !important; font-weight:900 !important; } #v-provider-home .dashboard-kasten-kpis .kpi-label-umsatz{ font-weight:900 !important; color:var(--status-active-green) !important; } #v-provider-home .dashboard-kasten-angebote{ padding:14px env(safe-area-inset-right, 0) 14px env(safe-area-inset-left, 0); max-width:100%; box-sizing:border-box; } #v-provider-home .dashboard-floating-wrap{ max-width:100%; min-width:0; padding-left:env(safe-area-inset-left, 0); padding-right:env(safe-area-inset-right, 0); box-sizing:border-box; } #v-provider-home .dashboard-kasten-angebote .provider-week-title{ font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; } #v-provider-home .dashboard-kasten-wochenplan{ padding:14px env(safe-area-inset-right, 0) 18px env(safe-area-inset-left, 0); max-width:100%; box-sizing:border-box; } #v-provider-home .dashboard-kasten-wochenplan .provider-week-title{ font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; } #v-provider-home.view.active .prov-header, #v-provider-home.view.active .dashboard-kasten{ position:relative; z-index:1; min-height:0; overflow:visible; flex-shrink:0; } /* Dashboard-Wrap: Pure-Clean 100x100 wie Discover, Inset Divider [cite: 2.3] */ /* Edge-to-Edge: Inserat-Cards volle Breite, keine Schatten/Boxen [cite: 2026-02-18] */ #v-provider-home #providerActiveListingsSection{ margin-bottom:0; padding:0; margin-left:0; margin-right:0; } #v-provider-home #providerActiveListingsSection .provider-week-title{ margin-bottom:12px; } #v-provider-home #providerActiveListings{ display:flex; flex-direction:column; gap:0; max-width:100%; min-width:0; box-sizing:border-box; padding:0; margin:0; } /* High-End Empty State: motivierend, Airbnb-Stil [cite: Gemini] */ #v-provider-home .provider-empty-state.empty-state-container{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 24px; text-align:center; background:#fff; border-radius:24px; border:1px solid rgba(0,0,0,0.06); box-shadow:0 4px 24px rgba(0,0,0,0.06); } #v-provider-home .provider-empty-state .empty-state-icon{ font-size:64px; line-height:1; margin-bottom:20px; opacity:0.7; filter:grayscale(0.15); animation: empty-state-breathe 2.5s ease-in-out infinite; } @keyframes empty-state-breathe{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } #v-provider-home .provider-empty-state .empty-state-title{ font-family:'Montserrat','Inter',sans-serif; font-size:20px; font-weight:900; color:#0f172a; margin:0 0 12px; letter-spacing:-0.03em; } #v-provider-home .provider-empty-state .empty-state-text{ font-size:15px; color:#64748b; line-height:1.5; margin:0 0 28px; max-width:320px; } #v-provider-home .provider-empty-state .btn-primary-large{ width:100%; max-width:320px; min-height:56px; padding:0 24px; background:#222222; color:#fff; font-size:16px; font-weight:800; border:none; border-radius:8px; cursor:pointer; box-shadow:0 4px 16px rgba(34,34,34,0.25); transition:transform 0.15s, box-shadow 0.2s; } #v-provider-home .provider-empty-state .btn-primary-large:hover{ box-shadow:0 6px 20px rgba(34,34,34,0.35); } #v-provider-home .provider-empty-state .btn-primary-large:active{ transform:scale(0.98); } #v-provider-home .provider-empty-state .empty-state-pricing-hint{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; font-size:13px; color:#94a3b8; font-weight:600; } #v-provider-home .provider-empty-state .empty-state-pricing-hint .divider{ opacity:0.5; } #v-provider-home .provider-empty-state .empty-state-inner{ display:flex; flex-direction:column; align-items:center; width:100%; } .prov-card.inserat-bar-card, #v-provider-home .prov-card.inserat-bar-card{ box-shadow:none !important; border-radius:0 !important; } /* Swipe-Wrapper für aktive Inserate: Hintergrund + Icons, Kachel gleitet mit */ #v-provider-home #providerActiveListings .dashboard-listing-swipe-wrap{ position:relative; overflow:hidden; min-height:0; } #v-provider-home #providerActiveListings .dashboard-listing-swipe-wrap::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(0,0,0,0.06); z-index:2; pointer-events:none; } #v-provider-home #providerActiveListings .dashboard-listing-swipe-wrap:last-child::after{ display:none; } #v-provider-home #providerActiveListings .dashboard-swipe-actions{ position:absolute; top:0; bottom:0; width:80px; display:flex; flex-direction:column; gap:4px; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; pointer-events:none; } #v-provider-home #providerActiveListings .dashboard-swipe-actions-left{ left:0; background:#ff4444; } #v-provider-home #providerActiveListings .dashboard-swipe-actions-right{ right:0; background:#2563eb; } #v-provider-home #providerActiveListings .dashboard-swipe-icon{ font-size:24px; } #v-provider-home #providerActiveListings .dashboard-swipe-label{ text-align:center; padding:0 6px; } #v-provider-home #providerActiveListings .dashboard-listing-swipe{ position:relative; z-index:1; background:#fff; transition:transform 0.15s ease-out; touch-action:pan-y; } #v-provider-home #providerActiveListings .prov-card.prov-list-item{ display:flex; flex-direction:row; align-items:stretch; gap:16px; padding:16px env(safe-area-inset-right, 0) 16px env(safe-area-inset-left, 0); background:transparent; border:none; position:relative; cursor:pointer; min-height:0; } #v-provider-home #providerActiveListings .prov-list-item::after{ display:none; } /* Ausverkauft: Graustufen + Banner */ #v-provider-home #providerActiveListings .prov-list-item-sold-out .prov-list-item-img-wrap{ filter:grayscale(100%); } #v-provider-home #providerActiveListings .prov-list-item-sold-out .prov-list-item-body{ opacity:0.7; } #v-provider-home #providerActiveListings .prov-list-item-ausverkauft-banner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); color:#fff; font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; } #v-provider-home .prov-list-item-img-wrap{ width:100px; min-width:100px; height:100px; border-radius:16px; overflow:hidden; position:relative; flex-shrink:0; } #v-provider-home .prov-list-item-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; } #v-provider-home .prov-list-item-price-badge{ position:absolute; bottom:6px; right:6px; padding:4px 10px; border-radius:999px; font-size:14px; font-weight:900; background:var(--brand,#FACC15); color:#1a1a1a; } #v-provider-home .prov-list-item-live-badge{ position:absolute; top:6px; left:6px; background:rgba(255,255,255,0.9); backdrop-filter:blur(4px); padding:4px 8px; border-radius:8px; display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; text-transform:uppercase; color:#1a1a1a; } #v-provider-home .prov-list-item-live-badge .live-dot{ width:6px; height:6px; background:#22c55e; border-radius:50%; } #v-provider-home .prov-list-item-body{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; } #v-provider-home .prov-list-item-pillars{ display:flex; gap:6px; margin-bottom:6px; flex-shrink:0; } #v-provider-home .prov-list-item-pillars .pillar-mini{ flex-shrink:0; } /* S25 Dashboard: 5 Säulen – aktiv leuchtend, inaktiv dezent [cite: Gemini 5-Säulen] */ #v-provider-home .dashboard-five-pillars{ display:flex; align-items:center; gap:12px; margin-top:8px; margin-bottom:8px; flex-wrap:wrap; } #v-provider-home .dashboard-pillar-icon.icon-pill{ width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); } #v-provider-home .dashboard-pillar-icon.icon-pill.inactive{ opacity:0.3; filter:grayscale(100%); color:var(--status-inactive); } #v-provider-home .dashboard-pillar-icon.icon-pill.active{ opacity:1; filter:grayscale(0%); color:#222222; transform:scale(1.05); } #v-provider-home .dashboard-pillar-icon.icon-pill.active[data-pillar="dineIn"]{ filter:grayscale(0%) drop-shadow(0 0 4px rgba(46,204,113,0.6)); } #v-provider-home .dashboard-pillar-icon.icon-pill.active[data-pillar="pickupCode"]{ filter:grayscale(0%) drop-shadow(0 0 6px rgba(52,152,219,0.8)); } #v-provider-home .dashboard-pillar-icon.icon-pill.active[data-pillar="reuse"]{ filter:grayscale(0%) drop-shadow(0 0 4px rgba(155,89,182,0.6)); } #v-provider-home .dashboard-pillar-icon.icon-pill.active[data-pillar="allergens"], #v-provider-home .dashboard-pillar-icon.icon-pill.active[data-pillar="extras"]{ filter:grayscale(0%) drop-shadow(0 0 4px rgba(241,196,15,0.7)); } #v-provider-home .dashboard-pillar-icon:not(.icon-pill){ width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity 0.15s; } #v-provider-home .dashboard-pillar-icon:not(.icon-pill).active{ color:#222222; opacity:1; } #v-provider-home .dashboard-pillar-icon:not(.icon-pill).inactive{ opacity:0.15; color:#222222; } #v-provider-home .dashboard-pillar-icon:active{ transform:scale(0.95); } #v-provider-home .prov-list-item-meta-row{ display:flex; justify-content:flex-end; gap:12px; font-size:13px; margin-bottom:8px; } #v-provider-home .prov-list-item-meta-row .price-tag.prov-list-item-price-informational{ color:#64748b !important; font-weight:500 !important; font-size:0.95rem !important; text-shadow:none; } #v-provider-home .prov-list-item-title{ margin:0 0 4px; font-size:18px; font-weight:800; color:#0f172a; line-height:1.3; } #v-provider-home .prov-list-item-abholnummer{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(255,215,0,0.15); color:#1a1a1a; font-size:12px; font-weight:800; } #v-provider-home .prov-list-item-abholnummer.gray{ background:#f1f5f9; color:#94a3b8; } #v-provider-home .prov-list-item-abholnummer .abholnummer-val{ margin-left:auto; font-family:monospace; letter-spacing:0.05em; } #v-provider-home .dashboard-kasten-wochenplan .provider-week-title{ margin:0 0 16px; } #v-provider-home .provider-week-footer{ padding-top:20px; padding-bottom:0; } #v-provider-home .provider-week-footer #btnProviderWeekFooter{ min-height:48px; } #v-provider-home .prov-stats-grid{ margin-top:12px; gap:0; } #v-provider-home .prov-stat-item{ padding:12px 4px; border-right:1px solid #eee; } #v-provider-home .prov-stat-item:last-child{ border-right:none; } #v-provider-pickups{ min-height:100vh; min-height:100dvh; background:#f8fafc; width:100%; box-sizing:border-box; } #v-provider-pickups.view.active{ display:flex !important; flex-direction:column !important; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; overflow:hidden !important; } /* Abholnummern: pickups-floating-wrap = Scroll-Container (analog dashboard-floating-wrap); Header + Filter sticky darin */ #v-provider-pickups .pickups-floating-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; gap:0; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; padding:0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0) !important; padding-top:env(safe-area-inset-top, 0) !important; width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box; background:#fff; } #v-provider-pickups .pickups-floating-wrap > header{ position:sticky; top:0; z-index:100; flex-shrink:0; background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } /* Filter (Offen/Abgeholt): .sticky-sub-bar – kein Durchscheinen */ #v-provider-pickups .prov-pickups-filter-sticky{ padding:12px max(16px, env(safe-area-inset-right, 0)) 12px max(16px, env(safe-area-inset-left, 0)); background-color:#f5f5f0 !important; flex-shrink:0; } #v-provider-pickups #provPickupsScroll{ flex:1; min-height:0; } /* TGTG-Layout: weiße Leinwand, kein grauer Rand [cite: FAQ Anbieter] */ #v-provider-profile{ min-height:100vh; min-height:100dvh; width:100%; box-sizing:border-box; background:#fff !important; } #v-provider-profile.view.active{ display:flex !important; flex-direction:column !important; } #v-provider-profile.view.active > header{ position:sticky; top:0; z-index:100; flex-shrink:0; background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } #v-provider-profile.view.active > div{ position:relative; z-index:1; min-height:0; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* Ebene 1: Business-Dashboard (Master-Prompt) – #22C55E, 16px Radius */ #v-provider-profile .provider-profile-header-rebuild.dynamic-header{ background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:none; display:flex; flex-direction:column; gap:8px; flex-shrink:0; } #v-provider-profile .provider-profile-header-row1{ position:relative; display:flex; align-items:center; justify-content:flex-end; width:100%; } #v-provider-profile .provider-profile-logo.provider-profile-logo-center{ display:flex; justify-content:center; } #v-provider-profile .provider-profile-gear-btn.provider-profile-gear-btn-tr{ position:absolute; top:0; right:0; } #v-provider-profile .provider-profile-header-row2{ display:flex; align-items:center; } #v-provider-profile .provider-profile-title{ margin:0; font-size:18px; font-weight:950; letter-spacing:-0.03em; color:#1a1a1a; } #v-provider-profile .provider-profile-logo{ font-size:18px; font-weight:950; letter-spacing:-0.03em; cursor:pointer; color:#1a1a1a; } #v-provider-profile .provider-profile-logo .logo-io{ color:#6B7280; } #v-provider-profile .provider-profile-logo .app-brand-logo{ height:32px; width:auto; display:block; object-fit:contain; } #v-provider-profile .provider-profile-gear-btn{ width:40px; height:40px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; box-shadow:none; color:#6B7280; } #v-provider-profile .provider-profile-gear-btn i{ stroke:#6B7280; } #v-provider-profile .provider-profile-gear-btn .provider-profile-gear-svg{ color:#6B7280; flex-shrink:0; } /* Welcome-Header: mehr Luft nach oben, zentriert [TGTG-Vorbild] */ #v-provider-profile #providerProfileWelcome.provider-profile-welcome{ flex-shrink:0; padding:32px 20px 24px; text-align:center; } #v-provider-profile .provider-profile-welcome-text{ margin:0 0 4px; font-size:24px; font-weight:700; color:#111827; line-height:1.3; } #v-provider-profile .provider-profile-welcome-subtitle{ margin:0; font-size:14px; color:#6B7280; line-height:1.4; } #v-provider-profile .provider-profile-tiles-wrap{ padding:0 0 24px; } #v-provider-profile .provider-profile-content-rebuild{ flex:1; overflow-y:auto; padding:20px max(16px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); width:100%; max-width:100%; margin:0; box-sizing:border-box; } /* Account Settings Airbnb-Style: Master-Kachel + Grid + Accordion [cite: 2026-02-18] */ .account-settings-airbnb{ display:flex; flex-direction:column; gap:20px; } .account-master-kachel{ display:flex; align-items:center; justify-content:space-between; padding:20px; background:#fff; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); cursor:pointer; min-height:80px; transition:transform 0.15s ease, box-shadow 0.2s ease; -webkit-tap-highlight-color:transparent; } .account-master-kachel.account-profile-header{ cursor:pointer; } .account-master-kachel.account-profile-header:active{ transform:scale(0.98); } .provider-kpi-cockpit{ margin-top:20px; display:flex; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 2px; } .provider-kpi-cockpit::-webkit-scrollbar{ display:none; } .provider-kpi-item{ flex:1; min-width:112px; min-height:66px; border:none; background:transparent; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; padding:4px 2px; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; } .provider-kpi-item:active{ transform:scale(0.98); } .provider-kpi-value{ font-size:20px; font-weight:900; color:#111827; line-height:1.1; font-variant-numeric:tabular-nums; -moz-font-feature-settings:"tnum"; -webkit-font-feature-settings:"tnum"; font-feature-settings:"tnum"; } .revenue-value-wrapper{ display:flex; align-items:baseline; gap:4px; } .trend-arrow{ font-size:14px; font-weight:800; line-height:1; opacity:1; transform-origin:center; position:relative; } .trend-arrow-up{ color:#008a00; } .trend-arrow-down{ color:#dc2626; } .trend-arrow-flat{ color:#9ca3af; } .provider-kpi-label{ font-size:10px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:0.08em; line-height:1; } @keyframes provider-kpi-glow-finish{ 0%{ text-shadow:0 0 0 rgba(0,0,0,0); } 50%{ text-shadow:0 0 10px rgba(0,122,255,0.4); } 100%{ text-shadow:0 0 0 rgba(0,0,0,0); } } .provider-kpi-value-finished{ animation:provider-kpi-glow-finish 0.6s ease-out; } @keyframes provider-trend-pulse{ 0%{ transform:scale(1); opacity:0.75; } 50%{ transform:scale(1.3); opacity:1; } 100%{ transform:scale(1); opacity:1; } } .trend-arrow.active{ animation:provider-trend-pulse 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .trend-arrow[data-trend-tooltip]:hover::after, .trend-arrow[data-trend-tooltip]:focus-visible::after{ content:attr(data-trend-tooltip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; background:#0f172a; color:#fff; font-size:11px; font-weight:700; line-height:1; padding:6px 8px; border-radius:8px; box-shadow:0 6px 18px rgba(15,23,42,0.24); z-index:3; pointer-events:none; } .provider-glam-dashboard{ background:#f7f7f7; border-radius:24px; padding:20px; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.65); } .provider-glam-dashboard{ margin-top:30px; } .provider-glam-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; } .provider-glam-tile{ border:none; border-radius:24px; background:#ffffff; min-height:168px; aspect-ratio:1/1.1; box-shadow:0 10px 30px rgba(0,0,0,0.08); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:16px 14px; cursor:pointer; transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease; -webkit-tap-highlight-color:transparent; } .provider-glam-tile:active{ transform:scale(0.95); } .provider-glam-icon{ font-size:32px; line-height:1; margin-bottom:6px; } .provider-glam-title{ font-size:15px; font-weight:800; color:#1a1a1a; letter-spacing:-0.01em; } .provider-glam-subtitle{ font-size:11px; color:#6b7280; line-height:1.35; max-width:90%; } .provider-glam-tile-billing.is-fresh-billing{ box-shadow:0 10px 30px rgba(0,0,0,0.08), 0 0 0 2px rgba(250,204,21,0.52), 0 0 22px rgba(250,204,21,0.45); animation:provider-billing-golden-pulse 2.2s ease-in-out infinite; } @keyframes provider-billing-golden-pulse{ 0%,100%{ box-shadow:0 10px 30px rgba(0,0,0,0.08), 0 0 0 2px rgba(250,204,21,0.45), 0 0 18px rgba(250,204,21,0.32); } 50%{ box-shadow:0 12px 34px rgba(0,0,0,0.12), 0 0 0 2px rgba(250,204,21,0.75), 0 0 28px rgba(250,204,21,0.55); } } .provider-faq-overlay-backdrop{ position:fixed; inset:0; z-index:1202; background:rgba(15,23,42,0.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .provider-faq-overlay{ position:fixed; inset:0; z-index:1203; display:flex; flex-direction:column; background:#f8fafc; opacity:0; pointer-events:none; transition:opacity 0.2s ease; } .provider-faq-overlay.is-open{ opacity:1; pointer-events:auto; } .provider-faq-overlay-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px; padding-top:calc(12px + env(safe-area-inset-top, 0px)); background:#ffffff; border-bottom:1px solid #e5e7eb; } .provider-faq-overlay-header h3{ margin:0; font-size:20px; font-weight:900; color:#0f172a; letter-spacing:-0.02em; } .provider-faq-overlay-header button{ width:44px; height:44px; border:none; border-radius:12px; background:#f1f5f9; color:#334155; font-size:28px; line-height:1; cursor:pointer; } .provider-faq-overlay-body{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); } .provider-faq-accordion{ background:#ffffff; border-radius:20px; overflow:hidden; box-shadow:0 8px 24px rgba(15,23,42,0.08); border:1px solid rgba(15,23,42,0.06); } .provider-faq-item{ border-bottom:1px solid #e5e7eb; } .provider-faq-item:last-child{ border-bottom:none; } .provider-faq-trigger{ width:100%; border:none; background:#ffffff; text-align:left; cursor:pointer; min-height:60px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px; font-weight:800; color:#0f172a; } .provider-faq-chevron{ color:#64748b; transition:transform 0.25s ease; flex-shrink:0; } .provider-faq-item.open .provider-faq-chevron{ transform:rotate(180deg); } .provider-faq-content{ max-height:0; overflow:hidden; transition:max-height 0.32s ease; } .provider-faq-item.open .provider-faq-content{ max-height:220px; } .provider-faq-content p{ margin:0; padding:0 18px 16px; font-size:14px; color:#64748b; line-height:1.55; } .provider-profile-mein-betrieb-card .provider-profile-mein-betrieb-label{ display:block; font-size:11px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:6px; } .provider-profile-mein-betrieb-card .account-master-left{ flex:1; min-width:0; } .provider-profile-mein-betrieb-chevron{ flex-shrink:0; } /* 2x2 KPI-Grid "Deine Gesamtleistung" – Dashboard-Parameter [cite: 2026-02-25] */ .provider-profile-kpis-wrap{ width:100%; } .provider-profile-kpis-title{ margin:0 0 12px; font-size:16px; font-weight:800; color:#0f172a; letter-spacing:-0.02em; } #v-provider-profile .dashboard-kasten-kpis-profile{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; padding:20px env(safe-area-inset-right, 0) 32px env(safe-area-inset-left, 0); padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); background:#f5f5f0; border-radius:20px; position:relative; } #v-provider-profile .dashboard-kasten-kpis-profile .provider-profile-kpi-cell{ display:flex; flex-direction:column; align-items:flex-start; min-height:64px; padding:12px 0 0; } #v-provider-profile .dashboard-kasten-kpis-profile .kpi-label{ font-size:10px !important; font-weight:800 !important; color:#94a3b8 !important; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:4px !important; } #v-provider-profile .dashboard-kasten-kpis-profile .kpi-umsatz-value, #v-provider-profile .dashboard-kasten-kpis-profile #accountStatUmsatz{ color:var(--status-active-green) !important; font-weight:900 !important; font-size:18px !important; } #v-provider-profile .dashboard-kasten-kpis-profile .kpi-label-umsatz{ font-weight:900 !important; color:var(--status-active-green) !important; } #v-provider-profile .dashboard-kasten-kpis-profile #accountStatInserate, #v-provider-profile .dashboard-kasten-kpis-profile #accountStatKochbuch, #v-provider-profile .dashboard-kasten-kpis-profile #accountStatAbholungen{ font-size:18px !important; font-weight:900 !important; color:#1a1a1a !important; } .account-master-left{ display:flex; align-items:center; gap:16px; } .account-master-logo{ width:56px; height:56px; border-radius:14px; object-fit:cover; } /* Single-Page: Stats-Reihe unter Header [cite: 2026-02-21] */ .account-stats-row{ display:flex; gap:16px; padding:0 4px 20px; flex-wrap:wrap; } .account-stats-row .account-stat{ align-items:flex-start; } .account-master-name{ margin:0; font-size:18px; font-weight:900; color:#0f172a; letter-spacing:-0.02em; } .account-master-ort{ margin:4px 0 0; font-size:14px; color:#64748b; font-weight:600; } .account-master-stats{ display:flex; gap:20px; } .account-stat{ display:flex; flex-direction:column; align-items:flex-end; } .account-stat span{ font-size:20px; font-weight:900; color:#1a1a1a; } .account-stat small{ font-size:11px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:0.06em; margin-top:2px; } .account-stat-umsatz span{ color:#22C55E !important; } .account-grid-nav{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; } .account-grid-nav.account-grid-4{ grid-template-columns:repeat(2, 1fr); width:100%; max-width:100%; } .account-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:88px; padding:16px; border:none; border-radius:20px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.06); cursor:pointer; transition:transform 0.15s ease; -webkit-tap-highlight-color:transparent; color:#1a1a1a; font-size:13px; font-weight:700; } .account-tile svg{ color:#64748b; flex-shrink:0; } .account-tile:active{ transform:scale(0.97); } .account-faq-section{ width:100%; } .account-faq-title{ margin:0 0 12px; font-size:16px; font-weight:800; color:#0f172a; } .account-accordion{ display:flex; flex-direction:column; width:100%; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 2px 12px rgba(0,0,0,0.04); } .account-accordion-item{ border-bottom:1px solid rgba(0,0,0,0.06); } .account-accordion-item:last-child{ border-bottom:none; } .account-accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border:none; background:#fff; cursor:pointer; font-size:15px; font-weight:700; color:#1a1a1a; text-align:left; -webkit-tap-highlight-color:transparent; } .account-accordion-trigger .account-accordion-chevron{ flex-shrink:0; transition:transform 0.25s ease; color:#64748b; } .account-accordion-item.open .account-accordion-trigger .account-accordion-chevron{ transform:rotate(180deg); } .account-accordion-content{ max-height:0; overflow:hidden; transition:max-height 0.35s cubic-bezier(0.4,0,0.2,1); } .account-accordion-item.open .account-accordion-content{ max-height:400px; } .account-accordion-inner{ padding:0 20px 16px; font-size:14px; color:#64748b; line-height:1.5; } .account-logout-btn{ margin-top:8px; width:100%; min-height:52px; padding:14px 20px; background:#fef2f2; border:2px solid #fecaca; border-radius:16px; font-size:15px; font-weight:700; color:#b91c1c; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; -webkit-tap-highlight-color:transparent; } .account-logout-btn:active{ transform:scale(0.98); } /* Profil-Footer: Airbnb-Style (weiß, #ebebeb Linie, Safe-Area), Logout dezent [cite: 2026-02-23] */ .provider-profile-footer.provider-profile-footer-airbnb{ margin-top:auto; padding-top:20px; padding-bottom:calc(20px + env(safe-area-inset-bottom)); border-top:1px solid #ebebeb; background:#fff; width:100%; } .provider-profile-footer-airbnb .account-legal-footer{ padding:0 0 16px; } .account-logout-btn-dezent{ margin-top:0 !important; min-height:44px !important; padding:10px 16px !important; background:transparent !important; border:1px solid #e5e7eb !important; font-size:14px !important; font-weight:600 !important; color:#64748b !important; } .account-logout-btn-dezent:active{ background:#f8fafc !important; } .provider-profile-grid-title{ margin:0 0 10px; font-size:16px; font-weight:800; color:#0f172a; } .account-geld-option-inline{ margin-bottom:12px; } /* Mein Geld Sub-View: Quick-Access-Karten, Pills, PDF-Export (S25-PWA) [cite: 2026-02-25] */ .geld-quick-cards{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:20px; } .geld-quick-card{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-height:88px; padding:16px; border:none; border-radius:20px; background:#fff; box-shadow:0 4px 16px rgba(0,0,0,0.06); cursor:pointer; transition:transform 0.15s ease, box-shadow 0.2s ease; text-align:left; font-family:inherit; -webkit-tap-highlight-color:transparent; } .geld-quick-card:active{ transform:scale(0.97); } .geld-quick-card-icon{ font-size:28px; margin-bottom:6px; } .geld-quick-card-label{ font-size:15px; font-weight:800; color:#1a1a1a; } .geld-quick-card-hint{ font-size:12px; font-weight:600; color:#64748b; margin-top:2px; } .geld-quick-card.active{ box-shadow:0 4px 20px rgba(16,185,129,0.25); border:2px solid var(--status-active-green, #10b981); } .geld-pills-title{ margin:0 0 10px; font-size:14px; font-weight:700; color:#64748b; } .geld-pills-wrap{ display:flex; gap:8px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .geld-pills-wrap::-webkit-scrollbar{ display:none; } .geld-pill{ flex-shrink:0; min-height:44px; padding:0 18px; border-radius:22px; border:2px solid #e5e7eb; background:#fff; font-size:14px; font-weight:700; color:#475569; cursor:pointer; transition:border-color 0.2s, background 0.2s, color 0.2s; -webkit-tap-highlight-color:transparent; } .geld-pill:active{ background:#f8fafc; } .geld-pill.active{ border-color:var(--status-active-green, #10b981); background:rgba(16,185,129,0.08); color:#0f172a; } .geld-pdf-export-wrap{ margin:20px 0 24px; padding:20px; border-radius:20px; background:linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.06)); border:2px solid rgba(16,185,129,0.3); } .geld-pdf-export-label{ margin:0 0 12px; font-size:14px; font-weight:700; color:#0f172a; } .geld-pdf-export-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; padding:0 24px; border:none; border-radius:16px; background:var(--status-active-green, #10b981); color:#fff; font-size:16px; font-weight:800; cursor:pointer; box-shadow:0 4px 14px rgba(16,185,129,0.35); transition:transform 0.12s; -webkit-tap-highlight-color:transparent; } .geld-pdf-export-btn:active{ transform:scale(0.98); } .geld-options-cards{ display:flex; flex-direction:column; gap:12px; margin-top:8px; } .geld-option-card{ border-radius:16px !important; } .geld-footer-airbnb{ flex-shrink:0; } .geld-footer-airbnb .geld-footer-inner{ margin-top:auto; } /* Legal Footer: Impressum, Datenschutz, AGB [cite: 2026-02-21] */ .account-legal-footer{ padding:20px 0 12px; text-align:center; font-size:13px; } .account-legal-link{ color:#64748b; text-decoration:none; font-weight:600; } .account-legal-link:hover{ color:#1a1a1a; text-decoration:underline; } .account-legal-sep{ margin:0 8px; color:#cbd5e1; } /* Meine Regeln / Mein Geld Overlays (Slide-In) */ .account-overlay-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1198; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .account-regeln-sheet{ position:fixed; left:0; right:0; bottom:0; max-height:85vh; background:#fff; border-radius:24px 24px 0 0; z-index:1199; box-shadow:0 -8px 32px rgba(0,0,0,0.15); transform:translateY(100%); opacity:0; visibility:hidden; pointer-events:none; transition:transform 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.2s ease; overflow:hidden; display:flex; flex-direction:column; } .account-regeln-sheet.active{ transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; } .account-regeln-sheet-inner{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(24px + env(safe-area-inset-bottom)); flex:1; min-height:0; } .account-regeln-sheet-header{ display:flex; align-items:center; justify-content:space-between; padding:20px max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left)); border-bottom:1px solid #e5e7eb; flex-shrink:0; } .account-regeln-sheet-header h3{ margin:0; font-size:18px; font-weight:950; color:#1a1a1a; } .account-regeln-sheet-header button{ width:44px; height:44px; border:none; background:transparent; cursor:pointer; font-size:28px; line-height:1; color:#64748b; display:flex; align-items:center; justify-content:center; } .account-regeln-sheet-body{ padding:20px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left)); } .account-geld-option{ display:flex; align-items:center; gap:16px; width:100%; min-height:60px; padding:16px; margin-bottom:12px; border:none; border-radius:16px; background:#f8f9fa; cursor:pointer; text-align:left; font-family:inherit; transition:background 0.2s; -webkit-tap-highlight-color:transparent; } .account-geld-option:active{ background:#f1f3f5; } .account-geld-icon{ font-size:24px; } .account-geld-option span:not(.account-geld-icon){ flex:1; display:flex; flex-direction:column; gap:2px; } .account-geld-option small{ font-size:12px; font-weight:600; color:#64748b; } /* providerProfileSubService als Slide-In Overlay (Meine Regeln) */ #providerProfileSubService.as-regeln-overlay{ position:fixed !important; left:0; right:0; bottom:0; top:auto !important; max-height:85vh; z-index:1199; border-radius:24px 24px 0 0; box-shadow:0 -8px 32px rgba(0,0,0,0.15); transform:translateY(100%); transition:transform 0.35s cubic-bezier(0.32,0.72,0,1); } #providerProfileSubService.as-regeln-overlay.active{ transform:translateY(0); } .account-support-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1200; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .account-support-modal{ position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:400px; background:#fff; border-radius:24px 24px 0 0; z-index:1201; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow:0 -8px 32px rgba(0,0,0,0.15); } .account-support-modal-title{ margin:0 0 20px; font-size:18px; font-weight:900; color:#0f172a; } .account-support-option{ display:flex; align-items:center; width:100%; min-height:56px; padding:0 20px; margin-bottom:8px; border:none; border-radius:16px; background:rgba(0,0,0,0.04); font-size:15px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; transition:background 0.2s; } .account-support-option:active{ background:rgba(0,0,0,0.08); } .account-support-close{ margin-top:16px; width:100%; min-height:48px; border:2px solid rgba(0,0,0,0.1); border-radius:14px; background:transparent; font-size:15px; font-weight:700; color:#64748b; cursor:pointer; -webkit-tap-highlight-color:transparent; } #v-provider-profile .provider-profile-main-rebuild{ display:flex; flex-direction:column; gap:24px; } #v-provider-profile .provider-focus-card{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); } #v-provider-profile .provider-focus-card-inserat{ padding:0 0 20px; } #v-provider-profile .provider-focus-card-img-wrap{ width:100%; padding-bottom:56%; position:relative; overflow:hidden; border-radius:16px 16px 0 0; background:#f1f3f5; height:0; } #v-provider-profile .provider-focus-card-img-wrap img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; } #v-provider-profile .provider-focus-card-pillars{ display:flex; justify-content:center; align-items:center; gap:12px; padding:12px 0; font-size:20px; } #v-provider-profile .provider-focus-card-title{ margin:0 20px 8px; font-size:17px; font-weight:800; color:#1a1a1a; line-height:1.3; } #v-provider-profile .provider-focus-badge{ display:inline-block; margin:0 20px 16px; padding:4px 12px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; } #v-provider-profile .provider-focus-badge-green{ background:#22C55E; color:#fff; } #v-provider-profile .provider-focus-btn{ display:block; width:calc(100% - 40px); margin:0 20px; min-height:52px; border-radius:16px; font-size:15px; font-weight:800; border:none; cursor:pointer; background:#22C55E; color:#fff; transition:transform 0.12s; } #v-provider-profile .provider-focus-btn:active{ transform:scale(0.98); } #v-provider-profile .provider-focus-card-abholnummer{ padding:24px 20px; text-align:center; } #v-provider-profile .provider-focus-abholnummer-number{ font-size:2.5rem; font-weight:950; font-family:ui-monospace, monospace; color:#0f172a; letter-spacing:0.02em; margin-bottom:8px; } #v-provider-profile .provider-focus-card-info{ margin:0; font-size:14px; color:#6B7280; line-height:1.45; } #v-provider-profile .provider-focus-card-abrechnung{ padding:20px; display:flex; align-items:center; gap:16px; cursor:pointer; transition:background 0.2s; } #v-provider-profile .provider-focus-card-abrechnung:active{ background:#f3f4f6; } #v-provider-profile .provider-focus-card-icon{ font-size:28px; } /* Support & Hilfe: Erste-Hilfe-Karten + Accordion + Mike [Self-Service] */ .provider-support-page .provider-support-section-title{ margin:0 0 12px; font-size:15px; font-weight:800; color:#6B7280; text-transform:uppercase; letter-spacing:0.04em; } .provider-support-error-cards{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; } .provider-support-error-card{ display:flex; align-items:center; gap:14px; padding:16px 20px; background:#fff; border-radius:16px; border:1px solid #E5E7EB; box-shadow:0 1px 3px rgba(0,0,0,0.04); cursor:pointer; text-align:left; font-family:inherit; transition:transform 0.15s, box-shadow 0.15s; } .provider-support-error-card:active{ transform:scale(0.98); } .provider-support-error-icon{ font-size:24px; } .provider-support-error-label{ font-size:15px; font-weight:800; color:#1a1a1a; } .provider-support-solution-box{ padding:16px 20px; margin-bottom:20px; background:#F0FDF4; border-radius:16px; border:1px solid #BBF7D0; } .provider-support-solution-text{ margin:0 0 12px; font-size:14px; line-height:1.6; color:#166534; font-weight:600; } .provider-support-mail-btn{ width:100%; min-height:44px; padding:0 16px; font-size:14px; font-weight:800; color:#15803d; background:#fff; border:1px solid #22C55E; border-radius:12px; cursor:pointer; } .provider-support-accordion{ display:flex; flex-direction:column; gap:0; background:#fff; border-radius:16px; overflow:hidden; border:1px solid #E5E7EB; box-shadow:0 1px 3px rgba(0,0,0,0.04); margin-bottom:24px; } .provider-support-accordion-item{ border-bottom:1px solid #F3F4F6; } .provider-support-accordion-item:last-child{ border-bottom:none; } .provider-support-accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:transparent; border:none; font-size:15px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; font-family:inherit; } .provider-support-accordion-trigger:active{ background:#F9FAFB; } .provider-support-accordion .accordion-content{ max-height:0; overflow:hidden; transition:max-height 300ms ease-out, padding 300ms ease; background-color:#F9FAFB; } .provider-support-accordion .accordion-content.open{ max-height:500px; padding:16px 20px; border-top:1px solid #E5E7EB; } .provider-support-accordion .accordion-content p{ margin:0; font-size:14px; line-height:1.6; color:#6B7280; } .provider-support-accordion .chevron-icon{ flex-shrink:0; color:#9ca3af; transition:transform 0.3s ease; } .provider-support-accordion .chevron-icon.rotated{ transform:rotate(180deg); } .provider-support-contact-block{ margin-top:8px; } .provider-support-mike-btn{ width:100%; min-height:56px; border-radius:16px; font-size:16px; font-weight:800; border:none; cursor:pointer; background:#22C55E; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform 0.12s; } .provider-support-mike-btn:active{ transform:scale(0.98); } .provider-support-mike-hint{ margin:12px 0 0; font-size:13px; color:#6B7280; line-height:1.5; text-align:center; } .provider-support-legal-links{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid #E5E7EB; box-shadow:0 1px 3px rgba(0,0,0,0.04); margin-bottom:24px; } .provider-support-legal-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; color:#1a1a1a; font-size:15px; font-weight:700; text-decoration:none; border-bottom:1px solid #F3F4F6; transition:background 0.2s; } .provider-support-legal-row:last-child{ border-bottom:none; } .provider-support-legal-row:active{ background:#F9FAFB; } /* Horizontaler Slider: 7 Screens mit Snap-Effekt [cite: 2026-01-29] */ #v-provider-profile .provider-profile-hero{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; gap:16px; padding:16px 20px 24px; padding-left:calc(20px + env(safe-area-inset-left, 0)); padding-right:calc(20px + env(safe-area-inset-right, 0)); scrollbar-width:none; flex-shrink:0; } #v-provider-profile .provider-profile-hero::-webkit-scrollbar{ display:none; } #v-provider-profile .provider-profile-hero-slide{ flex:0 0 calc(100% - 32px); min-width:calc(100% - 32px); scroll-snap-align:start; scroll-snap-stop:always; border-radius:16px; overflow:hidden; background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); display:flex; flex-direction:column; min-height:260px; box-sizing:border-box; } #v-provider-profile .provider-profile-hero-slide:not(:has(.provider-profile-hero-slide-img)){ padding:20px; } #v-provider-profile .provider-profile-hero-slide-img{ width:100%; aspect-ratio:16/10; object-fit:cover; background:#f1f3f5; } #v-provider-profile .provider-profile-hero-slide-body{ padding:20px; flex:1; display:flex; flex-direction:column; gap:12px; } #v-provider-profile .provider-profile-hero-slide-title{ margin:0; font-size:18px; font-weight:900; color:#1a1a1a; line-height:1.3; font-family: var(--font-main); } #v-provider-profile .provider-profile-hero-slide-sub{ margin:0; font-size:13px; color:#64748b; line-height:1.45; } #v-provider-profile .provider-profile-hero-badge{ display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:#64748b; margin-bottom:4px; } #v-provider-profile .provider-profile-hero-cta{ min-height:52px; border-radius:14px; font-size:15px; font-weight:800; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; font-family: var(--font-main); transition:transform 0.12s, box-shadow 0.2s; } #v-provider-profile .provider-profile-hero-cta:active{ transform:scale(0.98); } #v-provider-profile .provider-profile-hero-cta--yellow{ background:#FFD700; color:#1a1a1a; box-shadow:0 4px 16px rgba(255,215,0,0.35); } #v-provider-profile .provider-profile-hero-cta--emerald{ background:#10b981; color:#fff; box-shadow:0 4px 16px rgba(16,185,129,0.25); } #v-provider-profile .provider-profile-hero-icon-wrap{ width:56px; height:56px; border-radius:16px; background:#f1f3f5; display:flex; align-items:center; justify-content:center; font-size:28px; margin-bottom:8px; } #v-provider-cookbook{ min-height:100vh; min-height:100dvh; width:100%; box-sizing:border-box; overscroll-behavior-y:none !important; } #v-provider-cookbook.view.active{ display:flex !important; flex-direction:column !important; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; overflow:hidden; pointer-events:auto; position:relative; z-index:1; } #v-provider-cookbook.view.active > header{ position:sticky !important; top:0 !important; z-index:1000; flex-shrink:0; width:100%; background:#ffffff !important; border-bottom:1px solid #f0f0f0; box-sizing:border-box; transition:box-shadow 0.2s ease; } #v-provider-cookbook.view.active > header.cookbook-header-shadow{ box-shadow:0 6px 20px rgba(15,23,42,0.06); } #v-provider-cookbook.view.active > div{ position:relative; z-index:1; min-height:0; flex:1; overflow:visible; } /* Kochbuch Galerie-Modus: untere Router-Navigation ausblenden [cite: 2026-01-26, 2026-02-18] */ body.provider-cookbook-active #providerNavWrap{ display:none !important; } /* Kochbuch: Scroll-Bereich vertikal + snap */ #v-provider-cookbook #cookbookScrollWrap{ margin-top:0; flex:1; min-height:0; height:auto; max-height:none; overflow-y:auto !important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:none !important; background:transparent; pointer-events:auto; padding:14px max(20px, env(safe-area-inset-right)) calc(140px + env(safe-area-inset-bottom, 0)) max(20px, env(safe-area-inset-left)); scroll-snap-type:y mandatory; scroll-padding-top:10px; } #v-provider-cookbook #cookbookMagazine{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:20px; overflow:visible; padding:0; box-sizing:border-box; } #v-provider-cookbook #cookbookMagazine .cookbook-magazine-card{ width:100%; max-width:none; margin:0; scroll-snap-align:start; scroll-snap-stop:always; border-radius:16px; box-shadow:0 8px 28px rgba(15,23,42,0.08); border:1px solid rgba(15,23,42,0.06) !important; overflow:hidden; background:#fff; } #v-provider-cookbook #cookbookMagazine .cookbook-magazine-img-wrap{ width:100%; aspect-ratio:16/9; height:auto !important; min-height:0 !important; } #v-provider-cookbook #cookbookMagazine .cookbook-magazine-img-wrap img{ width:100%; height:100%; object-fit:cover; object-position:center; } #v-provider-cookbook .cookbook-magazine-nav, #v-provider-cookbook .cookbook-magazine-dots, #v-provider-cookbook .cookbook-swipe-hint{ display:none !important; } .cookbook-header-sticky{ position:sticky; top:0; background:#ffffff; z-index:1000; } .cookbook-list-vertical{ display:flex; flex-direction:column; gap:20px; } .dish-card{ scroll-snap-align:start; } #v-provider-cookbook .cookbook-category-pills{ background:#ffffff; padding:10px max(20px, env(safe-area-inset-left)) 12px; overflow-x:auto; gap:10px; -webkit-overflow-scrolling:touch; } #v-provider-cookbook .cookbook-action-bar{ background:rgba(255,255,255,0.7) !important; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid rgba(255,255,255,0.4) !important; box-shadow:0 -4px 24px rgba(0,0,0,0.06); } /* Kochbuch: Footer fixiert, Safe-Area, nur Content scrollt [cite: 2026-02-23, 2026-02-25] */ .cookbook-footer-fixed{ position:fixed !important; left:20px; right:20px; bottom:calc(env(safe-area-inset-bottom, 0px) + 20px); width:auto; z-index:10000; background:transparent !important; margin:0; border:0; padding:0; display:flex; justify-content:center; align-items:center; box-sizing:border-box; } .cookbook-footer-fixed .cookbook-footer-btn-inserieren{ max-width:none; width:100%; min-height:56px; border-radius:16px; border:none; background:#222222 !important; color:#fff; font-size:16px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; box-shadow:0 12px 28px rgba(15,23,42,0.22); } .cookbook-footer-fixed .cookbook-footer-btn-inserieren:active{ opacity:0.9; transform:scale(0.99); } .cookbook-footer-fixed .cookbook-footer-btn-inserieren:disabled, .cookbook-footer-fixed .cookbook-footer-btn-inserieren[aria-disabled="true"]{ background:#94a3b8 !important; cursor:not-allowed; opacity:0.9; } #v-provider-cookbook #cookbookMagazine .cookbook-magazine-card{ z-index:2; pointer-events:auto !important; cursor:pointer; } #v-provider-cookbook .cookbook-footer-btn-inserieren{ width:100%; min-height:56px; border-radius:16px; border:none; background:#222222; color:#fff; font-size:16px; font-weight:800; cursor:pointer; -webkit-tap-highlight-color:transparent; } #v-provider-cookbook .cookbook-footer-btn-inserieren:active{ opacity:0.9; transform:scale(0.99); } /* Kochbuch: editierbares Preisfeld in der Karte [cite: REFACTOR KOCHBUCH 2026-02-23] */ #v-provider-cookbook .cookbook-price-cell{ display:flex; flex-direction:column; align-items:flex-start; flex-shrink:0; min-height:48px; margin-left:14px; } #v-provider-cookbook .cookbook-price-row{ display:flex; align-items:baseline; gap:2px; } #v-provider-cookbook .cookbook-card-price-input{ width:4.5em; min-width:48px; font-size:22px; font-weight:400; color:#FFB800; background:transparent; border:none; border-bottom:2px solid #e2e8f0; padding:4px 4px 4px 8px; text-align:right; -moz-appearance:textfield; } #v-provider-cookbook .cookbook-card-price-input::-webkit-outer-spin-button, #v-provider-cookbook .cookbook-card-price-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } #v-provider-cookbook .cookbook-card-price-input:focus{ outline:none; border-bottom-color:#10b981; } #v-provider-cookbook .cookbook-price-suffix{ font-size:22px; font-weight:400; color:#FFB800; flex-shrink:0; } #v-provider-cookbook .cookbook-magazine-card h2{ font-weight:900 !important; } #v-provider-cookbook .cookbook-price-saved{ opacity:0; pointer-events:none; font-size:18px; margin-left:6px; transition:opacity 0.2s ease; } #v-provider-cookbook .cookbook-price-saved.cookbook-price-saved-visible{ opacity:1; } #v-provider-cookbook .price-history{ font-size:11px; color:#999999; font-weight:400; margin-top:4px; cursor:pointer; -webkit-tap-highlight-color:transparent; line-height:1.2; } #v-provider-cookbook .price-history:hover{ color:#64748b; } #v-provider-cookbook .cookbook-footer-btn-inserieren:disabled, #v-provider-cookbook .cookbook-footer-btn-inserieren[aria-disabled="true"]{ background:#94a3b8 !important; cursor:not-allowed; opacity:0.9; } /* Mittagio-Button: Goldenes Buch mit sanftem Glow [cite: 2026-02-18, 2026-02-25] */ @keyframes mittagio-book-glow{ 0%, 100%{ filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.6)); } 50%{ filter: drop-shadow(0 0 10px rgba(255, 184, 0, 0.85)); } } #btnOpenMittagio.cookbook-mittagio-btn, #v-provider-cookbook #btnOpenMittagio.cookbook-mittagio-btn{ border: 1px solid rgba(212, 175, 55, 0.6) !important; box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15); background: linear-gradient(180deg, #fefce8 0%, #f5f5f7 100%) !important; filter: drop-shadow(0 0 5px rgba(255, 184, 0, 0.6)); animation: mittagio-book-glow 2.5s ease-in-out infinite; } #btnOpenMittagio.cookbook-mittagio-btn:active, #v-provider-cookbook #btnOpenMittagio.cookbook-mittagio-btn:active{ box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.35); } /* Mittagio Dual-Action-Card: Airbnb-Style schwarze Buttons [cite: 2026-02-23, 2026-02-25] */ .mittagio-dual-btn{ width:100%; min-height:52px; padding:0 20px; border-radius:8px; border:none; background:#222222; color:#fff; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; -webkit-tap-highlight-color:transparent; transition:opacity 0.2s, transform 0.1s; } .mittagio-dual-btn:active{ opacity:0.9; transform:scale(0.99); } .mittagio-dual-btn-inserieren{ background:#222222 !important; } /* Archiv: Fade-in-up Transition beim Kategorie-Wechsel [cite: 2026-02-25] */ @keyframes archiv-fade-in-up{ 0%{ opacity:0; transform:translateY(10px); } 100%{ opacity:1; transform:translateY(0); } } #archivGridContainer.archiv-fade-in-up{ animation:archiv-fade-in-up 300ms cubic-bezier(0.32, 0.72, 0, 1) forwards; } /* Archiv: Smart-Search-Kinetik – Suchleiste nach oben schieben beim Scrollen [cite: 2026-02-25] */ #archivSearchWrap{ transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease, margin-top 0.3s ease; transform-origin: top; } .search-wrap-hidden{ transform: translateY(-100%); opacity: 0; margin-top: -50px; pointer-events: none; } .v-provider-archiv .archiv-category-pills{ transition: margin-top 0.3s ease; } /* Pills nachrücken wenn SearchWrap versteckt – Header-Kompression */ .v-provider-archiv #archivSearchWrap.search-wrap-hidden + #archivCategoryPills{ margin-top: -50px; } /* Archiv: Magazin-Prinzip – Kategorie-Pills, Clean-Cards [cite: 2026-02-25] */ .v-provider-archiv .archiv-category-pills{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .v-provider-archiv .archiv-category-pills::-webkit-scrollbar{ display:none; } .v-provider-archiv .archiv-cat-pill{ transition:background 0.2s, color 0.2s; flex-shrink:0; } .v-provider-archiv .archiv-cat-pill.active{ background:#FFB800 !important; color:#1a1a1a !important; } .v-provider-archiv .archiv-archiv-card:active{ transform:scale(0.98); } .v-provider-archiv .archiv-archiv-card img{ object-position:center 20px; } /* Wochenplan: Layer-Hierarchie + Beweis-Modus [cite: Ultimative Klick-Stabilität 2026-02-26] */ #v-provider-week{ position:relative; z-index:1; } #weekMagicFab{ display:none !important; } /* Kebab Body-Portal: außerhalb Header, kein backdrop-filter-Konflikt [cite: Option C 2026-03-02] */ .week-kebab-dropdown{ position:fixed !important; z-index:9999 !important; } #v-provider-week.view{ display:none; } #v-provider-week.view.active{ display:flex !important; flex-direction:column !important; min-height:100vh; min-height:100dvh; height:100vh; height:100dvh; padding:0; padding-bottom:calc(80px + env(safe-area-inset-bottom, 0)); background:#f8fafc; box-sizing:border-box; overflow:visible; visibility:visible !important; opacity:1 !important; position:relative; } #v-provider-week.view.active::before, #v-provider-week.view.active::after{ content:''; position:absolute; pointer-events:none !important; z-index:0; } #v-provider-week.view.active::before{ top:-15%; left:-10%; width:45%; height:45%; border-radius:50%; background:radial-gradient(ellipse at 30% 20%, rgba(226,232,240,0.6) 0%, transparent 70%); filter:blur(80px); pointer-events:none !important; } #v-provider-week.view.active::after{ bottom:-10%; right:-10%; width:40%; height:40%; border-radius:50%; background:radial-gradient(ellipse at 70% 80%, rgba(203,213,225,0.5) 0%, transparent 70%); filter:blur(80px); pointer-events:none !important; } #v-provider-week.view.active > header, #v-provider-week.view.active > #kwBoardWrap{ position:relative; z-index:1050; } #v-provider-week.view.active #btnWeekKebab{ position:relative; z-index:1050 !important; } /* Wochenplan-Header: Minimal, KW-Badge links, Kebab rechts [cite: 2026-02-20 Final Header Kill] */ #v-provider-week .week-header-minimal{ position:sticky; top:0; z-index:50; flex-shrink:0; min-height:44px; width:100%; background:rgba(255,255,255,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,0.05); padding:calc(10px + env(safe-area-inset-top, 0)) 16px 10px; display:flex; align-items:center; justify-content:space-between; transition:box-shadow 0.2s ease; } /* Wochenplan: identischer Header wie Meine Küche (KW-Badge entfernt, linksbündig) */ #v-provider-week .week-header-minimal .week-header-row{ display:flex; align-items:center; justify-content:flex-start; width:100%; gap:12px; position:relative; } #v-provider-week .week-header-kw-badge{ display:inline-flex !important; align-items:center; padding:10px 16px; border-radius:12px; background:rgba(0,0,0,0.06); font-size:15px; font-weight:800; color:#0f172a; pointer-events:none; } /* KW-Trigger klickbar: über Parent, pointer-events, Touch-Ziel [cite: 2026-02-25] */ #v-provider-week .prov-page-header-left[data-reset-view="week"]{ position:relative; display:flex !important; align-items:stretch !important; justify-content:flex-start; flex:1; min-width:0; } #v-provider-week .week-header-compact{ flex-shrink:0 !important; background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); font-family:'Montserrat',sans-serif; position:sticky; top:0; z-index:1050; transition:box-shadow 0.2s ease; } #v-provider-week .week-header-compact.week-header-scrolled{ box-shadow:0 2px 8px rgba(0,0,0,0.06); } #v-provider-week .week-header-title-left, #v-provider-week .prov-page-header-title{ margin:0; font-family:'Montserrat','Inter',sans-serif !important; font-weight:900 !important; font-size:20px !important; letter-spacing:-0.03em; color:#0f172a !important; text-align:left; } #v-provider-week .week-header-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; } /* Lücke finden ✨: dezent als smarter Assistent, Text-Link-Stil [cite: 2026-01-29, 2026-02-18] */ #v-provider-week .week-magic-gap-btn{ background:transparent; border:1px solid #e2e8f0; min-height:36px; padding:0 10px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:5px; color:#64748b; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.2s, color 0.2s, border-color 0.2s; } #v-provider-week .week-magic-gap-btn:hover{ background:#f8fafc; color:#475569; border-color:#cbd5e1; } #v-provider-week .week-plan-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; width:100%; max-width:100%; margin:0; padding:0 max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); box-sizing:border-box; } #v-provider-week .week-list-scroll{ flex:1; min-height:120px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 0 16px; } #v-provider-week .week-dayrow{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid #f1f3f5; } #v-provider-week .week-thumb-zone{ flex-shrink:0; padding:16px 20px; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0)); background:rgba(255,255,255,0.7); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-top:1px solid rgba(255,255,255,0.4); } /* ============================================================ MODERNE SMARTPHONES (S25, Galaxy S25, iPhone 15/16, Pixel 8) Daumenfreundlich: Touch-Ziele mind. 48px, Safe-Area, einhändig ============================================================ */ @media (max-width:430px) and (min-height:700px){ /* App: Safe-Area unten für Gestenleiste */ .app{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 20px)) !important; } .customer-view{ padding-bottom:calc(78px + env(safe-area-inset-bottom, 20px)) !important; } /* Bottom Nav: höher für S25-Gesten, Touch mind. 48px */ .bottom{ height:calc(64px + env(safe-area-inset-bottom, 20px)) !important; padding-bottom:env(safe-area-inset-bottom, 20px) !important; } .navbtn{ min-height:48px; padding:10px 8px !important; font-size:12px !important; font-weight:600; } .navbtn .ico svg{ width:24px !important; height:24px !important; } /* Provider: kein Platz oben – Inhalt beginnt sofort (Safe-Area nur im ersten Header) */ [id^="v-provider-"]{ padding-top:0 !important; margin-top:0 !important; padding-left:calc(20px + env(safe-area-inset-left, 0)) !important; padding-right:calc(20px + env(safe-area-inset-right, 0)) !important; } #v-provider-home .prov-header, #providerProfileHeader, #v-provider-cookbook > header, #v-provider-pickups .pickups-floating-wrap > header, #v-provider-week .week-header-compact{ padding-top:calc(12px + env(safe-area-inset-top, 0)) !important; } #v-provider-week .week-header-compact{ background:rgba(255,255,255,0.8) !important; } #v-provider-week .prov-page-header{ padding-top:calc(10px + env(safe-area-inset-top, 0)) !important; } #v-provider-home{ padding:0 !important; margin:0 !important; } /* KPI Cards: 3er Grid, Touch-freundlich */ #v-provider-home [style*="grid-template-columns:repeat(3"]{ gap:10px !important; } #kpiCardTagesessen, #kpiCardAbholungen, #kpiCardKochbuch{ padding:16px 10px !important; border-radius:16px !important; min-height:72px; display:flex; flex-direction:column; justify-content:center; } #kpiCardTagesessen div[style*="font-size:20px"], #kpiCardAbholungen div[style*="font-size:32px"], #kpiCardKochbuch div[style*="font-size:32px"]{ font-size:26px !important; } #providerTimeTracker{ padding:18px !important; } #providerTimeTracker div[style*="font-size:36px"]{ font-size:30px !important; } #providerPersonalSpar{ padding:16px !important; } #v-provider-cookbook, #v-provider-profile{ padding:0 16px 100px !important; } #v-provider-cookbook{ padding-bottom:0 !important; } #v-provider-profile{ padding:0 20px calc(90px + env(safe-area-inset-bottom, 0)) !important; } #v-provider-pickups h3, #v-provider-cookbook h1, #v-provider-profile h1{ font-size:20px !important; } /* Wochenplan: nur wenn .active (nicht auf Kochbuch/anderen Seiten) */ #v-provider-week.view{ display:none !important; } #v-provider-week.view.active{ display:flex !important; flex-direction:column !important; min-height:100vh !important; min-height:100dvh !important; padding:0 !important; padding-bottom:calc(80px + env(safe-area-inset-bottom, 0)) !important; background:transparent !important; overflow:hidden !important; position:relative; } /* Wochenplan-Header: 1:1 Vorlage für alle Seiten – Montserrat 900, linksbündig [Master-Fix] */ #v-provider-week .week-header-compact{ flex-shrink:0; background:rgba(245,245,240,0.95); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,0.06); position:sticky; top:0; z-index:9999; padding-top:calc(10px + env(safe-area-inset-top, 0)); padding-right:20px; padding-bottom:16px; padding-left:20px; min-height:52px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; } #v-provider-week .week-header-compact h1, #v-provider-week .week-header-compact .prov-page-header-title{ margin:0; font-family:'Montserrat','Inter',sans-serif !important; font-weight:900 !important; font-size:20px !important; letter-spacing:-0.03em; color:#0f172a !important; text-align:left; } #v-provider-week .week-header-subtitle{ margin:0; font-size:12px; font-weight:600; color:#64748b; letter-spacing:0.02em; } #v-provider-week .week-plan-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; width:100%; max-width:100%; margin:0; padding:0 20px 16px; box-sizing:border-box; } #v-provider-week .week-list-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 0 16px; } #v-provider-week .week-thumb-zone{ flex-shrink:0; padding:16px 20px; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0)); background:#fff; border-top:1px solid #e2e8f0; margin:0 -20px 0; padding-left:20px; padding-right:20px; } /* Wochenplan (weiteres Layout) */ #v-provider-week .week-dayrow{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:0 0 16px; margin-bottom:16px; border-bottom:1px solid #f1f3f5; } /* Wochenplan: Tag-Kacheln alle gleich groß */ #v-provider-week .week-day-pill{ flex:0 0 auto; width:56px; min-width:56px; height:52px; min-height:52px; padding:0 6px; border-radius:14px; border:1px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:12px; font-weight:800; color:#64748b; cursor:pointer; transition:all 0.2s; line-height:1.2; text-align:center; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; } #v-provider-week .week-indicator-dot{ background:transparent; border:none; padding:4px; cursor:pointer; border-radius:50%; } #v-provider-week .week-indicator-dot:focus{ outline:none; box-shadow:0 0 0 2px var(--prov-brand); } #v-provider-week .week-day-pill.active{ background:rgba(16,185,129,0.12); border-color:#10b981; color:#1a1a1a; } #v-provider-week .week-day-pill.week-day-pill-today{ background:rgba(255,255,255,0.6); border-color:rgba(16,185,129,0.35); font-weight:900; box-shadow:0 1px 3px rgba(0,0,0,0.06); } #v-provider-week .week-day-pill.week-day-pill-today.active{ border-color:#10b981; background:rgba(16,185,129,0.12); } #v-provider-week .week-status-block{ display:flex; justify-content:space-between; align-items:center; padding:12px 16px; min-height:48px; background:rgba(255,255,255,0.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:14px; margin-bottom:14px; border:1px solid rgba(255,255,255,0.5); box-shadow:0 1px 3px rgba(0,0,0,0.04); flex-wrap:nowrap; } #v-provider-week .week-status-online{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:#1a1a1a; } #v-provider-week .week-status-draft{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:#64748b; } #v-provider-week .week-status-dot{ width:10px; height:10px; border-radius:50%; } /* TGTG-Airbnb Tabula Rasa: flach [cite: Plan Phase 3] */ #v-provider-week .week-meal-card-wrap{ transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease; border-radius: var(--tgtg-img-radius, 18px); margin-bottom: 14px; box-shadow: none; border: none; border-bottom: var(--tgtg-divider, 1px solid rgba(0,0,0,0.06)); } /* Online = grüner Hintergrund, Offline = roter Hintergrund */ #v-provider-week .week-meal-card-wrap.week-card-live{ background: rgba(34,197,94,0.14); border-bottom-color: rgba(34,197,94,0.25); } #v-provider-week .week-meal-card-wrap.week-card-offline{ background: rgba(239,68,68,0.1); border-bottom-color: rgba(239,68,68,0.2); } #v-provider-week .week-meal-card-wrap:active{ transform: scale(0.98); } /* Success-Shimmer: Tag geplant/online – dezent goldener Streifen */ #v-provider-week .week-meal-card-wrap.week-card-live::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: linear-gradient(105deg, transparent 0%, rgba(255,222,0,0.08) 40%, rgba(212,168,83,0.12) 50%, rgba(255,222,0,0.08) 60%, transparent 100%); background-size: 200% 100%; animation: cardSuccessShimmer 2s ease-out 1; } @keyframes cardSuccessShimmer{ 0%{ background-position: 200% 0; opacity:0; } 30%{ opacity:1; } 100%{ background-position: -100% 0; opacity:0; } } #v-provider-week .week-meal-card{ display:flex; align-items:center; gap:12px; padding:16px 20px; background: transparent; border-radius: inherit; margin-bottom:0; color: var(--premium-anthracite, #1a1a1a); } #v-provider-week .week-meal-name{ font-weight:900; font-size:16px; color: var(--premium-anthracite, #1a1a1a); line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } #v-provider-week .week-meal-badges{ font-size:16px !important; } #v-provider-week .week-meal-badges span{ font-size:1.1em; } /* Status-Visualisierung Wochenplan: Power-Bar (🍴🕒🧾🔄), No-Scroll, nur in der Karte [cite: Gold-Assets] */ #v-provider-week .week-power-bar{ display:flex; align-items:center; gap:6px; margin-top:8px; font-size:18px; line-height:1; flex-wrap:nowrap; } #v-provider-week .week-power-bar .week-power-icon{ display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; border-radius:8px; transition: opacity 0.2s, box-shadow 0.2s, filter 0.2s; } #v-provider-week .week-power-bar .week-power-icon.week-power-icon-ok{ color:#059669; filter: drop-shadow(0 0 6px rgba(16,185,129,0.4)); } #v-provider-week .week-power-bar .week-power-icon.week-power-icon-muted{ opacity:0.4; filter: grayscale(0.6); } #v-provider-week .week-power-bar .week-power-icon.week-power-time-missing{ animation: weekTimePulse 1.5s ease-in-out infinite; opacity:0.9; color:#94a3b8; filter: drop-shadow(0 0 4px rgba(250,204,21,0.35)); } #v-provider-week .week-power-bar .week-power-icon.week-power-time-ok{ color:#059669; filter: drop-shadow(0 0 6px rgba(16,185,129,0.5)); } @keyframes weekTimePulse{ 0%,100%{ opacity:0.75; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } } #v-provider-week .week-meal-card-wrap.week-card-live .week-power-bar{ border-radius:12px; padding:4px 8px; margin-top:8px; } #v-provider-week .week-meal-card-wrap.week-card-live{ animation: weekCardLiveGlow 2.5s ease-in-out infinite; } @keyframes weekCardLiveGlow{ 0%,100%{ border-bottom-color: rgba(16,185,129,0.25); } 50%{ border-bottom-color: rgba(16,185,129,0.4); } } #v-provider-week .week-meal-meta{ font-size:13px; color:#64748b; margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } #v-provider-week .week-meal-meta .week-meal-price-right{ margin-left:auto; font-weight:500; color:var(--color-price-yellow, #FFB800); } #v-provider-week .week-meal-verdienst{ font-weight:500; color:var(--color-price-yellow, #FFB800); } #v-provider-week .week-meal-online{ display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#1a1a1a; } #v-provider-week .week-meal-actions{ display:flex; align-items:center; gap:6px; } #v-provider-week .week-add-more{ width:100%; margin-top:8px; min-height:56px; padding:16px; border-radius:16px; border:none; background:var(--prov-brand); color:#1a1a1a; font-size:16px; font-weight:800; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(255,222,0,0.35); } #v-provider-week .week-add-more:hover{ background:#0d9668; } #v-provider-week .week-add-more:active{ transform:scale(0.98); } #v-provider-week .week-empty-state #btnWeekEmptyAdd.provider-add-plus-btn{ min-height:56px; background:var(--prov-brand); color:#1a1a1a; font-weight:800; border:none; box-shadow:0 4px 12px rgba(255,222,0,0.35); } #v-provider-week .week-empty-state #btnWeekEmptyAdd.provider-add-plus-btn .plus-char{ color:#fff; } #v-provider-week .week-empty-state{ text-align:center; padding:32px 20px; } #v-provider-week .week-empty-state .week-empty-title{ font-size:18px; font-weight:900; color:#1a1a1a; margin-bottom:8px; } #v-provider-week .week-empty-state .week-empty-hint{ font-size:14px; color:#64748b; line-height:1.5; margin-bottom:24px; } #v-provider-week .week-actions-bar{ display:flex; align-items:center; gap:10px; margin-top:0; padding-top:16px; padding-bottom:4px; border-top:1px solid #e2e8f0; flex-wrap:nowrap; } #v-provider-week .week-actions-bar .btn{ min-height:48px; flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:14px; font-weight:700; border-radius:14px; } #v-provider-week .week-actions-bar .btn[aria-label="Aktualisieren"]{ flex:0 0 auto; min-width:48px; } /* S25 Thumb-Zone: Date-Picker Snap-Carousel */ #v-provider-week .week-dayrow{ scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; } #v-provider-week .week-day-pill{ scroll-snap-align:center; scroll-snap-stop:always; width:56px; min-width:56px; } /* Wochenplan: Gericht-Kacheln einheitliche Mindesthöhe */ #v-provider-week .week-meal-card-wrap{ position:relative; overflow:hidden; border-radius: var(--card-radius-premium, 24px); margin-bottom:14px; min-height:72px; } /* Swipe-Card: Premium 24px + Glass beibehalten */ #v-provider-week .week-meal-card-swipe{ display:flex; align-items:stretch; transition:transform 0.2s ease-out; touch-action:pan-y; } #v-provider-week .week-meal-card-swipe .week-meal-card{ flex:1; margin-bottom:0; min-width:0; position:relative; z-index:1; background:transparent; border-radius:inherit; } /* Swipe-Exit: Karte gleitet sanft aus dem Bild beim Löschen/Kopieren */ #v-provider-week .week-meal-card-wrap.week-meal-card-exit{ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; pointer-events:none; } #v-provider-week .week-meal-card-wrap.week-meal-card-exit.week-meal-card-exit-left .week-meal-card-swipe .week-meal-card{ transform: translateX(-120%); } #v-provider-week .week-meal-card-wrap.week-meal-card-exit.week-meal-card-exit-right .week-meal-card-swipe .week-meal-card{ transform: translateX(120%); } #v-provider-week .week-meal-card-wrap.week-meal-card-exit .week-meal-card-swipe .week-meal-card{ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #v-provider-week .week-meal-card-wrap.week-meal-card-exit{ opacity:0; } #v-provider-week .week-swipe-actions{ display:flex; flex-direction:column; gap:4px; position:absolute; top:0; bottom:0; width:80px; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; } #v-provider-week .week-swipe-actions.left{ left:0; background:#121826; } #v-provider-week .week-swipe-actions.right{ right:0; background:#ef4444; } /* Aktivierung: großer Button – Loading + Success-Checkmark (Premium) */ #v-provider-week .week-activate-block{ padding:16px 0; margin-top:8px; } #v-provider-week .week-activate-btn{ width:100%; min-height:56px; border-radius:18px; font-size:16px; font-weight:800; border:none; background: var(--prov-brand); color:#1a1a1a; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 4px 16px rgba(255,222,0,0.35); transition: background 0.3s, transform 0.2s, opacity 0.3s; } #v-provider-week .week-activate-btn:active{ transform:scale(0.98); } #v-provider-week .week-activate-btn.loading{ pointer-events:none; color:transparent; position:relative; } #v-provider-week .week-activate-btn.loading::after{ content:''; position:absolute; width:24px; height:24px; border:3px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation: weekActivateSpin 0.7s linear infinite; } #v-provider-week .week-activate-btn.success{ background:#059669; pointer-events:none; } #v-provider-week .week-activate-btn.success .week-activate-btn-text{ opacity:0; } #v-provider-week .week-activate-btn.success::after{ content:''; position:absolute; width:14px; height:22px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg) scale(0); animation: weekActivateCheck 0.35s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards; margin-top: -4px; } @keyframes weekActivateSpin{ to{ transform: rotate(360deg); } } @keyframes weekActivateCheck{ to{ transform: rotate(45deg) scale(1); } } /* Sortiermodus: Drag-Handle, Reihenfolge ändern */ #v-provider-week .week-sort-bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:rgba(14,165,233,0.1); border-radius:14px; margin-bottom:16px; border:1px solid rgba(14,165,233,0.25); } #v-provider-week .week-sort-bar .week-sort-done{ min-height:44px; padding:0 18px; font-size:15px; font-weight:800; border-radius:12px; background:var(--prov-brand); color:#1a1a1a; border:none; cursor:pointer; } #v-provider-week .week-meal-card-wrap[draggable="true"]{ cursor:grab; } #v-provider-week .week-meal-card-wrap[draggable="true"]:active{ cursor:grabbing; } #v-provider-week .week-meal-card-wrap.week-drag-over{ box-shadow:0 0 0 2px var(--prov-brand); border-radius:16px; } #v-provider-week .week-meal-card-drag-handle{ width:24px; height:24px; color:#94a3b8; flex-shrink:0; margin-right:10px; } #v-provider-week .week-status-block .week-activate-inline{ min-height:44px; padding:0 18px; font-size:14px; font-weight:800; border-radius:12px; background:var(--prov-brand); color:#1a1a1a; border:none; cursor:pointer; box-shadow:0 2px 12px rgba(255,222,0,0.35); } #v-provider-week .week-status-block .week-activate-inline:active{ transform:scale(0.98); } #v-provider-week .week-status-activate-hint{ font-size:11px; color:#64748b; margin-top:6px; line-height:1.3; } /* Applike: Header mit Untertitel, Safe-Area oben; Zeile für Titel + Fertig (Edit-Mode) */ #v-provider-week .week-header-compact{ padding:calc(8px + env(safe-area-inset-top, 0)) 20px 12px 20px; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:rgba(245,245,240,0.95) !important; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); font-family:'Montserrat',sans-serif; } #v-provider-week .week-header-row{ display:flex; align-items:center; justify-content:space-between; width:100%; max-width:100%; gap:12px; } #v-provider-week .week-header-row > div:first-child{ min-width:0; text-align:left; } #v-provider-week .week-header-done-btn{ flex-shrink:0; min-height:44px; padding:0 18px; font-size:15px; font-weight:800; border-radius:12px; background:var(--prov-brand); color:#1a1a1a; border:none; cursor:pointer; box-shadow:0 2px 12px rgba(255,222,0,0.35); } #v-provider-week .week-header-done-btn:active{ transform:scale(0.98); } /* Übersicht: kompakte Tageskarten (nur Lesen), app-first */ #v-provider-week .week-overview-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 20px 20px; } /* Wochenplan Übersicht: Tages-Kacheln einheitlich */ #v-provider-week .week-overview-day{ background: var(--glass-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--card-radius-premium, 24px); border:1px solid rgba(255,255,255,0.6); padding:14px 16px; margin-bottom:12px; min-height:72px; box-shadow: var(--card-shadow-soft), var(--glass-inner-glow); position:relative; overflow:hidden; } #v-provider-week .week-overview-day.week-day-online::before{ content:''; position:absolute; inset:0; background: linear-gradient(105deg, transparent 0%, rgba(255,222,0,0.08) 45%, rgba(212,168,83,0.12) 55%, transparent 100%); background-size: 200% 100%; animation: weekSuccessShimmer 1.5s ease-out 1; pointer-events:none; } @keyframes weekSuccessShimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } } #v-provider-week .week-overview-day-label{ font-size:13px; font-weight:800; color:#64748b; margin-bottom:8px; display:flex; align-items:center; gap:8px; } #v-provider-week .week-overview-day-label .week-overview-badge{ font-size:10px; font-weight:800; padding:2px 8px; border-radius:8px; } #v-provider-week .week-overview-day-label .week-overview-badge.online{ background:#dcfce7; color:#166534; } #v-provider-week .week-overview-day-label .week-overview-badge.draft{ background:#f1f5f9; color:#64748b; } #v-provider-week .week-overview-dishes{ font-size:15px; font-weight:700; color:#1a1a1a; line-height:1.45; } #v-provider-week .week-overview-dishes.empty{ color:#94a3b8; font-weight:600; } #v-provider-week .week-overview-cta-wrap{ padding:16px 20px calc(24px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e2e8f0; flex-shrink:0; } /* Küchentauglich: Emerald, große Touch-Fläche */ #v-provider-week .week-overview-cta-wrap .week-edit-primary{ width:100%; min-height:56px; border-radius:16px; font-size:17px; font-weight:800; border:none; background:var(--prov-brand); color:#1a1a1a; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 4px 16px rgba(255,222,0,0.35); } #v-provider-week .week-overview-cta-wrap .week-edit-primary:active{ transform:scale(0.98); } /* Wochen-Indikator: Status-Punkte (Grün=aktiv, Gelb=Planung, Grau=leer) */ #v-provider-week .week-indicator-row{ display:flex; justify-content:center; gap:10px; padding:8px 0 12px; flex-wrap:wrap; } #v-provider-week .week-indicator-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; border:none; padding:0; cursor:pointer; background:inherit; } #v-provider-week .week-indicator-dot.week-dot-active{ background:var(--prov-brand); } #v-provider-week .week-indicator-dot.week-dot-draft{ background:#eab308; } #v-provider-week .week-indicator-dot.week-dot-empty{ background:#e2e8f0; } /* Feiertag: dezent mit Schloss */ #v-provider-week .week-day-pill.week-day-pill-holiday{ opacity:0.85; } #v-provider-week .week-day-pill.week-day-pill-holiday::after{ content:''; display:inline-block; width:12px; height:12px; margin-left:4px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E") no-repeat center; background-size:12px 12px; vertical-align:middle; } /* Master-Aktivierung: Sammel-Button */ #v-provider-week .week-master-activate-bar{ margin-top:12px; padding:14px 16px; background:rgba(255,222,0,0.12); border:1px solid rgba(255,222,0,0.35); border-radius:14px; } #v-provider-week .week-master-activate-bar .week-master-btn{ width:100%; min-height:56px; border-radius:14px; font-size:16px; font-weight:800; border:none; background:var(--prov-brand); color:#1a1a1a; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 4px 12px rgba(255,222,0,0.35); } #v-provider-week .week-master-activate-bar .week-master-btn:active{ transform:scale(0.98); } #v-provider-week .week-overview-scroll{ -webkit-overflow-scrolling:touch; } #v-provider-week .week-overview-cta-wrap .week-edit-primary{ min-height:56px; } /* ========== KW-Board (High-End Wochenplan) ========== */ /* Header wie Meine Küche: Mein Wochenplan links, Kochbuch+Share rechts [cite: 2026-02-18, 2026-03-02] */ #v-provider-week .week-header-compact{ padding:calc(10px + env(safe-area-inset-top, 0)) 16px 12px !important; min-height:52px !important; } /* KW-Navigation: dezent, ~30% kleiner, Steuerungs-Element [cite: 2026-03-02] */ #v-provider-week .kw-nav-container{ display:flex; flex-direction:column; align-items:center; padding:6px 0 8px; background:rgba(255,255,255,0.85); backdrop-filter:blur(10px); border-bottom:1px solid #ebebeb; position:sticky; top:0; z-index:100; flex-shrink:0; } #v-provider-week .kw-selector{ display:flex; align-items:center; gap:12px; } #v-provider-week .kw-display-wrap{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:nowrap; } #v-provider-week .kw-display{ font-size:13px; font-weight:700; margin:0; color:#717171; } #v-provider-week .kw-back-to-now-hint{ font-size:10px; font-weight:800; color:#10b981; background:rgba(16,185,129,0.12); padding:3px 8px; border-radius:8px; white-space:nowrap; transition:opacity 0.2s ease; } #v-provider-week .kw-back-to-now-hint.is-visible{ display:inline-flex !important; align-items:center; } #v-provider-week .date-range{ font-size:9px; color:#94a3b8; margin-top:2px; } #v-provider-week .nav-arrow{ background:none; border:none; font-size:14px; color:#717171; cursor:pointer; padding:4px 8px; min-height:36px; min-width:36px; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; } #v-provider-week .nav-arrow:active{ opacity:0.7; } /* Renner-Karussell */ #v-provider-week .renner-scroll{ display:flex; overflow-x:auto; gap:12px; padding:10px 16px 12px; scrollbar-width:none; flex-shrink:0; -webkit-overflow-scrolling:touch; } #v-provider-week .renner-scroll::-webkit-scrollbar{ display:none; } #v-provider-week .renner-card{ flex:0 0 70px; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#eee; border:1px solid #ebebeb; cursor:pointer; transition:transform 0.2s; } #v-provider-week .renner-card:active{ transform:scale(0.96); } #v-provider-week .renner-card .renner-card-img-wrap{ width:70px; height:70px; flex-shrink:0; position:relative; overflow:hidden; } #v-provider-week .renner-card img{ width:100%; height:100%; object-fit:cover; display:block; } #v-provider-week .renner-card .renner-card-name{ font-size:10px; color:#717171; line-height:1.2; padding:4px 4px 6px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70px; } /* Tages-Timeline vertikal */ #v-provider-week .day-section{ padding:0 16px 24px; } #v-provider-week .day-label{ font-size:12px; font-weight:700; color:#717171; text-transform:uppercase; margin-bottom:8px; } #v-provider-week .slot-card{ background:#ffffff; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; box-shadow:0 2px 4px rgba(0,0,0,0.03); margin-bottom:8px; } #v-provider-week .slot-card .slot-card-img-wrap{ position:relative; flex-shrink:0; width:64px; height:64px; border-radius:12px; overflow:hidden; background:#e2e8f0; } #v-provider-week .slot-card .slot-card-img-wrap img{ width:100%; height:100%; object-fit:cover; } #v-provider-week .slot-card .slot-abholnummer-badge{ position:absolute; top:4px; right:4px; font-size:10px; background:rgba(0,0,0,0.6); color:#fff; padding:2px 6px; border-radius:6px; } #v-provider-week .slot-card .slot-card-body{ flex:1; min-width:0; text-align:left; } #v-provider-week .slot-card .slot-card-title{ font-size:16px; font-weight:800; color:#1a1a1a; line-height:1.3; } #v-provider-week .slot-card .slot-card-price{ font-size:14px; font-weight:600; color:#FFB800; margin-top:2px; } #v-provider-week .veggie-sog-slot{ background:rgba(16,185,129,0.08); border:1px dashed #10b981; border-radius:12px; padding:12px 16px; margin-bottom:8px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; cursor:pointer; transition:background 0.2s; } #v-provider-week .veggie-sog-slot:active{ background:rgba(16,185,129,0.14); } #v-provider-week .veggie-sog-text{ font-size:14px; font-weight:700; color:#0f172a; flex:1; min-width:0; } #v-provider-week .veggie-sog-btn{ flex:0 0 70px; display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:#eee; border:1px solid #ebebeb; cursor:pointer; } #v-provider-week .veggie-sog-btn .veggie-sog-btn-img{ width:70px; height:56px; flex-shrink:0; overflow:hidden; } #v-provider-week .veggie-sog-btn img{ width:100%; height:100%; object-fit:cover; display:block; } #v-provider-week .veggie-sog-btn .veggie-sog-btn-name{ font-size:10px; color:#717171; line-height:1.2; padding:2px 4px 4px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70px; } /* KW-Leiste: flacher und subtiler [cite: 2026-02-20] */ #v-provider-week .kw-carousel{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; scroll-padding:0 16px; padding:6px 16px 8px; scrollbar-width:none; } #v-provider-week .kw-carousel::-webkit-scrollbar{ display:none; } #v-provider-week .kw-pill{ flex:0 0 auto; min-width:60px; scroll-snap-align:center; scroll-snap-stop:always; min-height:36px; padding:6px 10px; border-radius:10px; border:none; background:rgba(241,245,249,0.9); font-size:12px; font-weight:700; color:#94a3b8; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; } #v-provider-week .kw-pill:hover{ background:#e2e8f0; color:#64748b; } #v-provider-week .kw-pill.active{ background:#0f172a; color:#fff; box-shadow:0 2px 12px rgba(15,23,42,0.2), 0 1px 3px rgba(0,0,0,0.08); transform:scale(1.02); } #v-provider-week .kw-progress-wrap{ padding:0 16px 8px; } #v-provider-week .kw-progress{ height:4px; border-radius:999px; background:#e2e8f0; overflow:hidden; } #v-provider-week .kw-progress-fill{ height:100%; border-radius:999px; background:var(--prov-brand); transition:width 0.3s ease; } #v-provider-week .kw-season-banner{ transition:opacity 0.25s ease, transform 0.25s ease; border-radius:16px; margin:0 20px 12px; } #v-provider-week .kw-season-banner:not([class*="kw-season-"]){ background:#eff6ff; color:#1e40af; border:1px solid rgba(59,130,246,0.2); } #v-provider-week .kw-season-banner.kw-season-mint{ background:linear-gradient(135deg, rgba(167,243,208,0.5) 0%, rgba(110,231,183,0.35) 100%); color:#065f46; border:1px solid rgba(16,185,129,0.25); } #v-provider-week .kw-season-banner.kw-season-mint .kw-season-banner-btn{ background:#10b981; color:#fff; } #v-provider-week .kw-season-banner.kw-season-summer{ background:linear-gradient(135deg, rgba(253,230,138,0.5) 0%, rgba(251,191,36,0.35) 100%); color:#78350f; border:1px solid rgba(245,158,11,0.3); } #v-provider-week .kw-season-banner.kw-season-summer .kw-season-banner-btn{ background:#f59e0b; color:#fff; } #v-provider-week .kw-season-banner.kw-season-herbst{ background:linear-gradient(135deg, rgba(254,215,170,0.5) 0%, rgba(251,146,60,0.35) 100%); color:#7c2d12; border:1px solid rgba(234,88,12,0.25); } #v-provider-week .kw-season-banner.kw-season-herbst .kw-season-banner-btn{ background:#ea580c; color:#fff; } #v-provider-week .kw-season-banner.kw-season-winter{ background:linear-gradient(135deg, rgba(241,245,249,0.9) 0%, rgba(226,232,240,0.6) 100%); color:#121826; border:1px solid rgba(15,23,42,0.15); } #v-provider-week .kw-season-banner.kw-season-winter .kw-season-banner-btn{ background:#121826; color:#fff; } /* Edge-to-Edge: Inserat-Bar-Cards volle Breite [cite: 2026-02-18] */ #v-provider-week .kw-slot.inserat-bar-card{ background:#fff !important; border:none !important; box-shadow:0 2px 12px rgba(0,0,0,0.06) !important; border-radius:16px !important; margin:0; padding:0; } #v-provider-week .kw-board-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:12px max(12px, env(safe-area-inset-left)) calc(160px + env(safe-area-inset-bottom, 0)) max(12px, env(safe-area-inset-right)); position:relative; background:#f8fafc; } #v-provider-week .kw-board-swipe-inner{ transition:transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); will-change:transform; } #v-provider-week .kw-board-swipe-inner.kw-swipe-active{ transition:none; } /* Empty State Launchpad: Silicon Valley – keine Schatten, feine Linien, reinweiß [cite: 2026-03-03] */ #v-provider-week .empty-state-launchpad{ position:absolute; inset:0; flex:1; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:24px; cursor:pointer; -webkit-tap-highlight-color:transparent; background:#FFFFFF; } #v-provider-week .empty-state-launchpad.is-hidden{ display:none !important; pointer-events:none; } #v-provider-week .empty-state-launchpad.is-visible-flex{ display:flex !important; } #v-provider-week .empty-state-launchpad-icon{ font-size:48px; line-height:1; animation:empty-launchpad-float 2.5s ease-in-out infinite; } @keyframes empty-launchpad-float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } #v-provider-week .placeholder-cards-wrap{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; } #v-provider-week .placeholder-card{ width:80px; height:100px; border:1px solid #ebebeb; border-radius:12px; background:#FFFFFF; flex-shrink:0; } #v-provider-week .empty-state-launchpad-hint{ font-family:Inter,sans-serif; font-size:16px; color:#666; margin:0; text-align:center; } #v-provider-week .empty-state-secondary{ font-family:Inter,sans-serif; font-size:14px; font-weight:600; padding:10px 20px; border-radius:12px; border:1px solid #ebebeb; background:#FFFFFF; color:#666; cursor:pointer; transition:transform 0.2s; } #v-provider-week .empty-state-secondary:active{ transform:scale(0.98); } #v-provider-week .kw-load-template-btn:active{ transform:scale(0.98); } #v-provider-week .kw-grid.kw-template-apply .kw-day-card, #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card{ animation: kwTemplateDayIn 0.5s ease-out forwards; opacity:0; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(1), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(1){ animation-delay:0.05s; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(2), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(2){ animation-delay:0.1s; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(3), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(3){ animation-delay:0.15s; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(4), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(4){ animation-delay:0.2s; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(5), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(5){ animation-delay:0.25s; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(6), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(6){ animation-delay:0.3s; } #v-provider-week .kw-grid.kw-template-apply .kw-day-card:nth-child(7), #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(7){ animation-delay:0.35s; } @keyframes kwTemplateDayIn{ 0%{ opacity:0; transform:translateY(-8px); } 100%{ opacity:1; transform:translateY(0); } } #v-provider-week .kw-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; max-width:100%; width:100%; margin:0 auto; box-sizing:border-box; } @media (max-width:640px){ /* Wochenplan Handy: Flex-Kette stabil halten, damit Struktur nicht zusammenbricht [cite: 2026-02-16] */ #v-provider-week.view.active{ display:flex !important; flex-direction:column !important; min-height:100dvh; height:100dvh; max-height:100dvh; overflow:hidden !important; } #v-provider-week #kwBoardWrap{ flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; max-width:100%; } /* Edge-to-Edge: Safe-Area nur [cite: 2026-02-18] */ #v-provider-week .kw-board-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:12px max(12px, env(safe-area-inset-left)) calc(120px + env(safe-area-inset-bottom, 0)) max(12px, env(safe-area-inset-right)); position:relative; background:#f8fafc; } #v-provider-week .kw-grid{ grid-template-columns:1fr; gap:12px; width:100%; max-width:100%; padding:0; } #v-provider-week .kw-day-card{ width:100%; max-width:100%; box-sizing:border-box; min-width:0; padding:12px; } #v-provider-week .kw-slots{ min-width:0; width:100%; box-sizing:border-box; } #v-provider-week .kw-slot-empty{ min-width:0; width:100%; box-sizing:border-box; } /* Edge-to-Edge: KW-Nav, Renner Safe-Area [cite: 2026-03-02] */ #v-provider-week .kw-nav-container{ padding-left:max(12px, env(safe-area-inset-left)); padding-right:max(12px, env(safe-area-inset-right)); } } @media (max-width:768px){ #v-provider-week .kw-grid{ grid-template-columns:1fr; } } #v-provider-week #kwBoardWrap{ overflow-x:hidden; max-width:100%; } /* High-End Card: weiss, weicher Schatten, kein Border, rounded-2xl [cite: 2026-02-20] */ #v-provider-week .kw-day-card{ background:#fff; border-radius:24px; border:none; box-shadow:0 2px 12px rgba(0,0,0,0.06); padding:12px; min-height:auto; display:flex; flex-direction:column; gap:8px; transition:transform 0.2s ease, box-shadow 0.2s ease; box-sizing:border-box; flex:1 1 auto; } #v-provider-week .kw-day-card:active{ transform:scale(0.98); } #v-provider-week .kw-day-card.kw-day-has-live{ box-shadow:0 2px 12px rgba(0,0,0,0.06), 0 0 0 2px rgba(16,185,129,0.2); } #v-provider-week .kw-day-card.kw-day-card-highlight{ animation: kwDayCardGapPulse 2s ease-in-out; box-shadow:0 8px 32px rgba(0,0,0,0.08), 0 0 0 2px rgba(14,165,233,0.5), 0 0 24px rgba(14,165,233,0.25); } @keyframes kwDayCardGapPulse{ 0%, 100%{ box-shadow:0 8px 32px rgba(0,0,0,0.06), 0 0 0 1px rgba(14,165,233,0.3); } 50%{ box-shadow:0 8px 32px rgba(0,0,0,0.08), 0 0 0 3px rgba(14,165,233,0.6), 0 0 28px rgba(14,165,233,0.35); } } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card{ animation: kwTemplateApplyIn 0.5s ease-out backwards; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(1){ animation-delay:0.05s; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(2){ animation-delay:0.1s; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(3){ animation-delay:0.15s; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(4){ animation-delay:0.2s; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(5){ animation-delay:0.25s; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(6){ animation-delay:0.3s; } #v-provider-week .kw-grid.kw-grid-just-applied .kw-day-card:nth-child(7){ animation-delay:0.35s; } @keyframes kwTemplateApplyIn{ 0%{ opacity:0; transform:translateY(-8px); } 100%{ opacity:1; transform:translateY(0); } } #v-provider-week .week-header-title-text{ font-size:20px !important; font-weight:900 !important; letter-spacing:-0.03em; color:#0f172a; } #v-provider-week .kw-board-strip-title{ font-size:14px; font-weight:700; color:#0f172a; margin:0 0 10px 0; padding:0 max(12px, env(safe-area-inset-left)) 0 0; } #v-provider-week .kw-day-label{ font-size:14px; font-weight:800; color:#18181b; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; } #v-provider-week .kw-day-date{ font-size:16px; font-weight:800; color:#18181b; } #v-provider-week .kw-day-count{ font-size:12px; font-weight:600; color:#71717a; } #v-provider-week .kw-day-card.kw-day-today{ box-shadow:0 2px 12px rgba(0,0,0,0.06), 0 0 0 2px rgba(14,165,233,0.35); background:linear-gradient(180deg, rgba(14,165,233,0.06) 0%, #fff 24px); } #v-provider-week .kw-day-card.kw-day-filled{ background:linear-gradient(180deg, rgba(16,185,129,0.06) 0%, #fff 20px); } #v-provider-week .kw-day-card.kw-day-empty .kw-day-label, #v-provider-week .kw-day-card.kw-day-empty .kw-day-date{ color:#a1a1aa; } #v-provider-week .kw-day-card.kw-day-empty{ background:#f4f4f5; } #v-provider-week .kw-slots{ display:flex; flex-direction:column; gap:8px; flex:1 1 auto; min-height:0; } #v-provider-week .kw-slot{ border-radius:16px; overflow:hidden; min-height:52px; position:relative; cursor:pointer; transition:background 0.2s; flex-shrink:0; box-sizing:border-box; } #v-provider-week .kw-slot-main{ display:flex; gap:12px; align-items:center; padding:10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:14px; border:1px solid rgba(255,255,255,0.5); min-height:80px; height:80px; flex-shrink:0; } #v-provider-week .kw-slot-small{ min-height:52px; height:52px; flex-shrink:0; } #v-provider-week .kw-slot-empty{ flex-shrink:0; } #v-provider-week .kw-slot-main.kw-slot-live{ background:rgba(34,197,94,0.18); border-color:rgba(34,197,94,0.3); } #v-provider-week .kw-slot-main.kw-slot-offline{ background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.25); opacity:0.7; box-shadow:0 0 0 1px rgba(239,68,68,0.2); } #v-provider-week .kw-slot-main .kw-slot-thumb{ width:64px; height:64px; border-radius:16px; background:#e2e8f0; flex-shrink:0; background-size:cover; background-position:center; position:relative; object-fit:cover; } #v-provider-week .kw-slot-main .kw-slot-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:16px; display:block; } #v-provider-week .kw-slot-main .kw-slot-body{ flex:1; min-width:0; } #v-provider-week .kw-slot-main .kw-slot-name{ font-size:14px; font-weight:800; color:#1a1a1a; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } #v-provider-week .kw-slot-main .kw-slot-price{ font-size:15px; font-weight:900; color:#1a1a1a; margin-top:2px; } #v-provider-week .kw-slot-override-badges{ position:absolute; top:4px; right:4px; display:flex; gap:2px; font-size:12px; } #v-provider-week .kw-slot-small.kw-slot-live{ background:rgba(34,197,94,0.18); border-color:rgba(34,197,94,0.3); } #v-provider-week .kw-slot-small.kw-slot-offline{ background:rgba(239,68,68,0.12); border-color:rgba(239,68,68,0.25); opacity:0.7; box-shadow:0 0 0 1px rgba(239,68,68,0.2); } /* Silent Slot: weiss mit Schatten wie belegte Karten, rounded-2xl [cite: 2026-02-20] */ #v-provider-week .kw-slot-empty{ min-height:56px; border:none; border-radius:16px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:center; gap:8px; color:#94a3b8; font-size:14px; font-weight:600; transition:color 0.2s, background 0.2s; cursor:pointer; font-family:inherit; padding:0 16px; margin:0; width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none; } #v-provider-week .kw-slot-empty .kw-slot-empty-icon{ font-size:18px; font-weight:300; color:#94a3b8; } #v-provider-week .kw-slot-empty .kw-slot-empty-text{ color:#94a3b8; } #v-provider-week .kw-slot-empty:active{ background:#e2e8f0; color:#64748b; } /* Leerer Tag: einzige Kachel etwas höher für ruhigere Optik */ #v-provider-week .kw-slots:has(.kw-slot-empty:only-child) .kw-slot-empty{ min-height:72px; } /* Kebab dropdown: verhindern dass Klick auf Item sofort schliesst */ .week-kebab-dropdown .week-kebab-item{ -webkit-tap-highlight-color:transparent; } #v-provider-week .kw-slot-small{ display:flex; align-items:center; gap:8px; padding:8px 10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-radius:12px; border:1px solid rgba(255,255,255,0.5); } #v-provider-week .kw-slot-small .kw-slot-thumb{ width:40px; height:40px; border-radius:12px; background:#e2e8f0; flex-shrink:0; background-size:cover; background-position:center; position:relative; } #v-provider-week .kw-slot-small .kw-slot-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; } #v-provider-week .kw-slot-small .kw-slot-name{ font-size:13px; font-weight:700; color:#1a1a1a; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; flex:1; min-width:0; } #v-provider-week .kw-slot-small .kw-slot-price{ font-size:13px; font-weight:800; color:#1a1a1a; margin-left:auto; } /* Inserat-Card-Style: Preis-Pill wie Kochbuch/Listing [cite: 2026-02-18] */ #v-provider-week .kw-slot .price-pill{ background:#FFD700; color:#1a1a1a; font-weight:800; box-shadow:0 2px 8px rgba(255,215,0,0.25); border-radius:999px; } #v-provider-week .kw-slot-main .price-pill{ padding:6px 12px; font-size:15px; } #v-provider-week .kw-slot-small .price-pill{ padding:4px 10px; font-size:13px; } #v-provider-week .kw-slot.kw-slot-live{ box-shadow:0 0 0 1px rgba(16,185,129,0.2), 0 2px 12px rgba(16,185,129,0.12); border-radius:14px; } #v-provider-week .kw-slot.kw-slot-offline{ box-shadow:0 0 0 1px rgba(239,68,68,0.25), 0 2px 12px rgba(0,0,0,0.04); } #v-provider-week .week-meal-meta .price-pill{ padding:4px 10px; font-size:13px; } #v-provider-week .week-meal-meta .price-pill.week-meal-price-right{ font-weight:500; color:var(--color-price-yellow, #FFB800); } #v-provider-week .kw-slot{ transition:transform 0.2s ease; } #v-provider-week .kw-slot.kw-slot-swipe-delete{ background:rgba(239,68,68,0.2); } #v-provider-week .kw-slot.kw-slot-swipe-copy{ background:rgba(34,197,94,0.18); } #v-provider-week .kw-slot-flat{ display:flex; align-items:center; gap:10px; text-align:left; padding:10px 12px; min-height:52px; } #v-provider-week .kw-slot-flat .kw-slot-flat-body{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; } #v-provider-week .kw-slot-flat .kw-slot-flat-title{ font-size:16px; font-weight:800; color:#18181b; line-height:1.25; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; } #v-provider-week .kw-slot-flat .kw-slot-flat-price{ font-size:14px; font-weight:400; color:#FFB800; flex-shrink:0; margin-left:auto; text-align:right; } #v-provider-week .kw-slot-flat .kw-slot-cat-icon{ font-size:18px; flex-shrink:0; } #v-provider-week .kw-cookbook-strip-wrap{ flex-shrink:0; background:linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,250,252,0.95) 50%, rgba(241,245,249,0.92) 100%); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); border-bottom:1px solid rgba(0,0,0,0.06); padding:10px 0 14px; } #v-provider-week .kw-cookbook-drag-strip{ display:flex; flex-wrap:nowrap; align-items:center; gap:10px; padding:0 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } #v-provider-week .kw-smart-suggestions-strip .kw-suggestion-card{ scroll-snap-align:start; flex:0 0 auto; display:inline-flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:72px; max-width:72px; padding:8px 6px 6px; border-radius:16px; background:#fff; border:none; box-shadow:0 2px 12px rgba(0,0,0,0.06); position:relative; cursor:grab; user-select:none; transition:transform 0.15s, box-shadow 0.15s; } #v-provider-week .kw-smart-suggestions-strip .kw-suggestion-card:active{ cursor:grabbing; } #v-provider-week .kw-smart-suggestions-strip .kw-suggestion-card.dragging{ transform:scale(0.95); opacity:0.85; cursor:grabbing; } #v-provider-week .kw-suggestion-compact .kw-suggestion-name{ font-size:12px; font-weight:700; color:#1a1a1a; line-height:1.2; text-align:center; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; order:1; margin-bottom:6px; } #v-provider-week .kw-smart-suggestions-strip .kw-suggestion-thumb{ width:100%; aspect-ratio:1; max-height:48px; border-radius:8px; flex-shrink:0; margin-bottom:6px; border:none; box-shadow:0 2px 8px rgba(0,0,0,0.08); order:2; background-size:cover; background-position:center; } #v-provider-week .kw-suggestion-compact .kw-suggestion-thumb-mini{ width:100%; aspect-ratio:1; max-height:40px; border-radius:8px; margin-bottom:6px; } #v-provider-week .kw-suggestion-compact{ min-width:72px; max-width:72px; padding:8px 6px 6px; } #v-provider-week .kw-suggestion-compact .kw-suggestion-price{ font-size:13px; font-weight:400; color:#FFB800; display:block; order:3; text-align:right; width:100%; } #v-provider-week .kw-smart-suggestions-strip .kw-suggestion-sparkle{ font-size:12px; margin-bottom:2px; filter:drop-shadow(0 0 6px rgba(255,215,0,0.5)); } #v-provider-week .kw-suggestion-compact .kw-suggestion-sparkle{ display:none; } #v-provider-week .kw-suggestion-badge{ display:none !important; } #v-provider-week .kw-smart-suggestions-strip .kw-suggestion-dismiss{ display:none !important; } #v-provider-week .kw-slot-empty.kw-slot-ghost-highlight{ animation: kwSlotGhostPulse 1.2s ease-in-out infinite; border-color:#0ea5e9; background:rgba(14,165,233,0.08); box-shadow:0 0 0 2px rgba(14,165,233,0.4), 0 0 20px rgba(14,165,233,0.2); } #v-provider-week .kw-slot-roll-in{ animation: kwSlotRollIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes kwSlotRollIn{ 0%{ transform:scale(0.8); opacity:0; } 100%{ transform:scale(1); opacity:1; } } @keyframes kwSlotGhostPulse{ 0%, 100%{ box-shadow:0 0 0 2px rgba(14,165,233,0.4), 0 0 20px rgba(14,165,233,0.2); } 50%{ box-shadow:0 0 0 3px rgba(14,165,233,0.7), 0 0 28px rgba(14,165,233,0.35); } } #v-provider-week .kw-cookbook-drag-label{ font-size:13px; font-weight:700; color:#64748b; margin-right:4px; } #v-provider-week .kw-cookbook-drag-pill{ padding:8px 14px; border-radius:12px; background:rgba(255,255,255,0.8); border:1px solid rgba(16,185,129,0.35); color:#0f766e; font-size:13px; font-weight:700; cursor:grab; user-select:none; transition:transform 0.15s, box-shadow 0.15s; } #v-provider-week .kw-cookbook-drag-pill:active{ cursor:grabbing; } #v-provider-week .kw-cookbook-drag-pill:hover{ box-shadow:0 2px 12px rgba(16,185,129,0.2); transform:scale(1.02); } #v-provider-week .kw-cookbook-drag-pill{ position:relative; padding-right:36px; } #v-provider-week .kw-pill-dismiss{ position:absolute; top:4px; right:4px; width:24px; height:24px; border:none; background:rgba(0,0,0,0.08); border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#64748b; font-size:14px; line-height:1; padding:0; flex-shrink:0; transition:background 0.15s, color 0.15s; } #v-provider-week .kw-pill-dismiss:hover{ background:rgba(239,68,68,0.2); color:#dc2626; } #v-provider-week .kw-pill-dismiss:active{ transform:scale(0.95); } #v-provider-week .kw-pill-dismiss i{ width:14px; height:14px; } /* Magnet-Slot Glimmer: Ready-to-Drop [cite: 2026-02-18] */ #v-provider-week .kw-slot.kw-slot-drop-over, #v-provider-week .kw-slot-empty.kw-slot-drop-over{ background:rgba(16,185,129,0.08) !important; border:2px dashed #10b981 !important; transform:scale(1.02); box-shadow:0 0 0 2px #10b981, 0 0 20px rgba(16,185,129,0.35), inset 0 0 15px rgba(16,185,129,0.1); transition:all 0.2s ease; } /* Theken-Renner / Cookbook-Pill während des Draggens [cite: 2026-02-18] */ #v-provider-week .kw-cookbook-drag-pill.dragging{ opacity:0.9; transform:scale(1.1) rotate(-2deg); box-shadow:0 25px 50px rgba(0,0,0,0.15); z-index:10001; cursor:grabbing; } body.provider-week-active #v-provider-week .kw-board-scroll{ padding-bottom:calc(140px + env(safe-area-inset-bottom, 0px)) !important; } /* Smart-Save-Blase: Plopp & Schwebe [cite: 2026-02-18, 2026-02-26] */ .smart-save-bubble{ position:fixed; background:white; color:#10b981; padding:6px 12px; border-radius:20px; font-weight:900; font-size:14px; box-shadow:0 4px 15px rgba(0,0,0,0.1); pointer-events:none; z-index:10002; animation:bubbleRise 0.8s ease-out forwards; } @keyframes bubbleRise{ 0%{ transform:translateY(0) scale(0.5); opacity:0; } 30%{ transform:translateY(-20px) scale(1.1); opacity:1; } 100%{ transform:translateY(-60px) scale(1); opacity:0; } } /* Magic FAB: Body-Level, viewport-fixed, klickbar über Footer [cite: 2026-03-02] */ #weekMagicFab{ position:fixed !important; bottom:calc(20px + env(safe-area-inset-bottom, 0) + 60px) !important; right:20px !important; width:56px; height:56px; border-radius:50%; border:none; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.12); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:9999 !important; pointer-events:auto !important; transition:transform 0.2s, box-shadow 0.2s; -webkit-tap-highlight-color:transparent; } #weekMagicFab:active{ transform:scale(0.95); } #weekMagicFab .week-magic-fab-icon{ font-size:24px; pointer-events:none; } /* Magic Sheet */ .week-magic-sheet-handle{ width:36px; height:4px; background:rgba(0,0,0,0.12); border-radius:2px; margin:10px auto 12px; } .week-magic-sheet-title{ margin:0 20px 16px; font-size:17px; font-weight:800; color:#0f172a; } .week-magic-sheet-list{ display:flex; flex-direction:column; gap:8px; padding:0 20px 20px; } .week-magic-sheet-btn{ display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 16px; border:none; border-radius:14px; background:#f8fafc; font-size:15px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; transition:background 0.2s; } .week-magic-sheet-btn:active{ background:#e2e8f0; } .week-magic-sheet-emo{ font-size:20px; } /* Kebab: High-End Glaseffekt, S25 Native-First, Touch-Target 60px [cite: 2026-02-18, 2026-02-25] */ /* Kebab-Trigger: z-index 1010, sattes Schwarz, große Touch-Area [cite: 2026-02-23] */ #v-provider-week .week-kebab-trigger, #btnWeekKebab{ min-width:60px; min-height:60px; padding:12px; border-radius:12px; border:none; background:rgba(255,255,255,0.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; color:#222222 !important; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background 0.2s, transform 0.15s; z-index:1010 !important; pointer-events:auto !important; } #v-provider-week .week-kebab-trigger:active, #btnWeekKebab:active{ background:rgba(0,0,0,0.08); transform:scale(0.96); } #v-provider-week .week-kebab-trigger i, #btnWeekKebab i{ flex-shrink:0; width:22px; height:22px; color:inherit; } /* Body-Portal: Glassmorphism, Scale-Pop-In, Silicon Valley Elevation [cite: Option C 2026-03-02] */ #weekKebabDropdown.app-dropdown{ position:fixed !important; top:calc(60px + env(safe-area-inset-top, 0)) !important; right:15px !important; left:auto !important; bottom:auto !important; width:220px; min-width:220px; background:rgba(255,255,255,0.95); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); border-radius:18px; box-shadow:0 15px 35px rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.3); padding:8px 0; z-index:10000 !important; transform-origin:top right; transition:transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease; opacity:0; transform:scale(0.8); } #weekKebabDropdown.app-dropdown.is-visible{ opacity:1; transform:scale(1); } .week-kebab-dropdown{ position:fixed !important; top:calc(60px + env(safe-area-inset-top, 0)) !important; right:16px !important; left:auto !important; bottom:auto !important; background:#ffffff; border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.06); padding:8px 0 calc(8px + env(safe-area-inset-bottom, 0)); z-index:9999 !important; min-width:220px; } .week-kebab-separator{ border-top:1px solid #ebebeb; margin:6px 12px; } .week-kebab-item{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:0 20px; border:none; border-radius:0; background:transparent; font-family:'Montserrat','Inter',sans-serif; font-size:15px; font-weight:700; color:#222222; cursor:pointer; text-align:left; transition:background 0.2s; } .week-kebab-item i{ flex-shrink:0; width:20px !important; height:20px !important; color:#222222; } .week-kebab-item:active{ background:#f1f5f9; } .dropdown-item{ padding:14px 20px; font-weight:600; color:#222; display:flex; align-items:center; gap:12px; width:100%; min-height:56px; border:none; border-radius:0; background:transparent; font-family:'Montserrat','Inter',sans-serif; font-size:15px; cursor:pointer; text-align:left; transition:background 0.2s; } .dropdown-item:active{ background:#f0f0f0; } /* Verschieben-Sheet (Long-Press) */ .kw-move-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1100; display:flex; align-items:flex-end; justify-content:center; padding:0 20px calc(80px + env(safe-area-inset-bottom)); animation:fadeIn 0.2s ease; } .kw-move-sheet{ background:#fff; border-radius:24px 24px 0 0; padding:24px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); width:100%; max-width:100%; max-height:70vh; overflow:auto; box-shadow:0 -8px 32px rgba(0,0,0,0.12); box-sizing:border-box; } .kw-move-title{ font-size:15px; font-weight:800; color:#1a1a1a; margin-bottom:16px; } .kw-move-days{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; } .kw-move-day-btn{ width:100%; min-height:52px; padding:14px 16px; border-radius:16px; border:2px solid #e2e8f0; background:#f8fafc; font-size:15px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; } .kw-move-day-btn:active{ transform:scale(0.98); } .kw-move-cancel{ width:100%; min-height:52px; border-radius:16px; border:2px solid #f1f3f5; background:#fff; font-size:15px; font-weight:700; color:#64748b; cursor:pointer; } /* Wochen-Vorlagen Bottom-Sheet: Glas */ .week-templates-sheet.active{ animation: weekTemplatesSlideUp 0.3s ease-out; } @keyframes weekTemplatesSlideUp{ from{ transform:translateY(100%); opacity:0.8; } to{ transform:translateY(0); opacity:1; } } .week-template-item:hover{ background:rgba(16,185,129,0.08); border-color:rgba(16,185,129,0.25); } .week-template-item:active{ transform:scale(0.98); } /* Action-Bar (Drucken & Teilen) – schlank, Silicon-Valley-Style */ #v-provider-week .kw-action-bar-fixed{ position:fixed; bottom:calc(64px + env(safe-area-inset-bottom, 20px)); left:0; right:0; width:100%; margin:0; box-sizing:border-box; background:rgba(255,255,255,0.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:0; padding:10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); display:flex; align-items:center; gap:12px; z-index:998; box-shadow:0 -4px 24px rgba(0,0,0,0.06); } #v-provider-week .kw-action-bar-fixed .btn{ min-height:44px; flex:1; min-width:0; border-radius:12px; font-size:14px; font-weight:600; letter-spacing:0.01em; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; background:rgba(0,0,0,0.04); color:#1a1a1a; cursor:pointer; transition:background 0.2s, transform 0.15s; } #v-provider-week .kw-action-bar-fixed .btn:hover{ background:rgba(0,0,0,0.07); } #v-provider-week .kw-action-bar-fixed .btn:active{ transform:scale(0.97); } #v-provider-week .kw-action-bar-fixed .btn i{ opacity:0.9; } /* Preview-Mode: Palette + FAB + Footer ausblenden [cite: 2026-02-18] */ body.week-preview-mode #v-provider-week #kwNavContainer{ display:none !important; } body.week-preview-mode #v-provider-week #rennerScroll{ display:none !important; } body.week-preview-mode #weekMagicFab{ display:none !important; } body.week-preview-mode #weekViewFooter{ display:none !important; } body.week-preview-mode #v-provider-week #btnWeekKebab{ display:none !important; } body.week-preview-mode #v-provider-week #btnWeekPreviewClose{ display:inline-flex !important; align-items:center; justify-content:center; } /* Druck: nur Wochenplan-Content (Grid), Navigation/Header ausblenden [cite: 2026-02-18, 2026-02-23] */ @media print{ #v-provider-week #kwNavContainer, #v-provider-week #rennerScroll, #weekViewFooter, #v-provider-week .week-header-compact, #v-provider-week .week-kebab-trigger, #v-provider-week .week-header-back-btn, #v-provider-week #btnWeekPreviewClose, #providerNavWrap, #providerNav, .bottom, .topbar{ display:none !important; } #v-provider-week .kw-board-scroll{ padding-bottom:24px !important; } #v-provider-week .kw-grid{ break-inside:avoid; } } /* Nur .kw-board-scroll scrollt – View und Body ohne Scroll, Header bleibt oben [cite: 2026-03-02] */ #v-provider-week.view.active{ overflow:hidden !important; height:100vh; height:100dvh; max-height:100dvh; overflow-x:hidden !important; display:flex !important; flex-direction:column !important; } body.provider-week-active:not(.wizard-inserat-open){ overflow:hidden !important; overflow-x:hidden !important; } /* Wochenplan fullscreen: Topbar ausblenden, main ohne horizontales Scroll – applike */ body.provider-week-active .topbar{ display:none !important; } body.provider-week-active main{ padding-top:0 !important; padding-left:0 !important; padding-right:0 !important; max-width:none !important; overflow-x:hidden !important; } /* Strich oben beheben: nahtloser Übergang zur Statusleiste [cite: 2026-03-02] */ body.provider-week-active{ background:#f5f5f0 !important; --week-footer-height:86px; } body.provider-week-active #app, body.provider-week-active main{ border-top:none !important; box-shadow:none !important; } /* Tab-Nav: im Wochenplan sichtbar [cite: provider-bottom-nav-fest, Footer unten 2026-02-25] */ /* Wochenplan-Footer: nur bei provider-week-active sichtbar, Body-Level [cite: 2026-02-25] */ #weekViewFooter{ display:none !important; } body.provider-week-active #weekViewFooter{ display:flex !important; flex-direction:column; } #weekViewFooter.week-footer-hidden{ display:none !important; } /* Magic FAB: display:none siehe Zeile 7252; hier nur provider-week-active Override */ /* FAB: 16px Abstand über Footer (var für Wartbarkeit) [cite: 2026-02-23, 2026-03-02] */ body.provider-week-active #weekMagicFab{ display:flex !important; z-index:10050 !important; pointer-events:auto !important; bottom:calc(var(--week-footer-height, 86px) + env(safe-area-inset-bottom, 0)) !important; } /* Wochenplan-Footer: Airbnb-Style – Links Counter, Rechts schwarzer Button [cite: 2026-03-02] */ .week-view-footer-fixed{ position:fixed !important; bottom:0; left:0; right:0; width:100%; z-index:10000; background:#ffffff !important; border-top:1px solid #ebebeb; padding:12px 24px calc(12px + env(safe-area-inset-bottom, 0)); box-sizing:border-box; } .week-view-footer-fixed .footer-content-wrapper{ display:flex; justify-content:space-between; align-items:center; gap:16px; } .week-view-footer-fixed .week-footer-counter{ font-size:14px; font-weight:600; color:#717171; } .week-view-footer-fixed .btn-airbnb-primary{ height:48px; min-height:48px; padding:0 24px; margin:0; border-radius:8px; border:none; background:#222222 !important; color:#ffffff !important; font-size:16px; font-weight:600; cursor:pointer; display:flex; justify-content:center; align-items:center; transition:transform 0.1s ease; -webkit-tap-highlight-color:transparent; flex-shrink:0; } .week-view-footer-fixed .btn-airbnb-primary:active{ transform:scale(0.98); } .week-view-footer-fixed .btn-airbnb-primary.week-footer-pulse-empty{ animation:week-footer-pulse-soft 2s ease-in-out infinite; } @keyframes week-footer-pulse-soft{ 0%, 100%{ opacity:0.85; box-shadow:none; } 50%{ opacity:1; box-shadow:0 0 0 2px rgba(34,34,34,0.2); } } .week-view-footer-fixed .footer-subtext{ font-size:11px; color:#717171; margin:0; line-height:1.3; } /* Dashboard: Dein Wochenplan – klare Trennung von KPIs, App-Kasten, S25-Safe */ #providerWeekSection .prov-card{ padding:var(--card-padding, 20px); border-radius:24px; box-shadow:0 4px 20px rgba(0,0,0,0.06); border:none; background:#fff; } #providerWeekSection{ margin-top:28px; padding:24px 16px 24px; padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); background:#fff; border-radius:28px; box-shadow:0 4px 24px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); } #providerWeekSection .provider-week-title{ margin:0 0 24px; font-size:22px; font-weight:900; color:#1a1a1a; letter-spacing:-0.02em; } .provider-week-footer #btnProviderWeekFooter:active{ transform:scale(0.98); box-shadow:0 1px 6px rgba(0,0,0,0.08); } #providerWeekDays{ display:flex; gap:10px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 0 24px; margin-bottom:24px; scroll-snap-type:x mandatory; } /* Dashboard + Wochenplan: Tag-Pills (Mo–So) alle gleich groß */ #providerWeekDays .week-preview-pill{ flex:0 0 auto; width:52px; min-width:52px; height:52px; min-height:52px; padding:0 6px; border-radius:32px; border:2px solid #f1f3f5; background:#fff; font-size:10px; font-weight:900; color:#64748b; cursor:pointer; transition:all 0.2s; line-height:1.2; text-align:center; white-space:pre-line; scroll-snap-align:center; scroll-snap-stop:always; display:flex; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box; } #providerWeekDays .week-preview-pill::after{ content:''; width:8px; height:8px; border-radius:50%; margin-top:4px; background:#e2e8f0; border:none; transition:background 0.2s; } #providerWeekDays .week-preview-pill.has-online::after{ background:var(--prov-brand); box-shadow:0 0 0 2px rgba(255,222,0,0.35); } #providerWeekDays .week-preview-pill.has-listings:not(.has-online)::after{ background:#121826; border:none; } #providerWeekDays .week-preview-pill.active{ background:#ffde00; border-color:#ffde00; color:#1a1a1a; box-shadow:0 2px 12px rgba(255,222,0,0.4); transform:scale(1.05); } #providerWeekDays .week-preview-pill.active::after{ background:#121826; } #providerWeekDays .week-preview-pill.active.has-online::after{ background:var(--prov-brand); box-shadow:0 0 0 2px rgba(255,222,0,0.35); } /* Wochenplan 2.2: Dashboard-Pills minimalistisch – ohne Status-Punkt, Fokus auf Karten */ #v-provider-home #providerWeekDays .week-preview-pill::after{ display:none !important; } #v-provider-home #providerWeekDays .week-preview-pill{ width:52px; min-width:52px; height:52px; min-height:52px; } .prov-stat-hint{ display:block; font-size:11px; font-weight:600; color:#94a3b8; margin-top:2px; line-height:1.2; } #v-provider-home .prov-stat-item:focus-visible, #v-provider-home button:focus-visible{ outline:2px solid var(--prov-brand,#0ea5e9); outline-offset:2px; } /* Design-System: tiefes Anthrazit für Texte in Provider-Bereich */ #v-provider-home h1, #v-provider-home h2, #v-provider-home h3, #v-provider-home .prov-stat-value, #v-provider-home .prov-stat-label{ color: var(--premium-anthracite, #1a1a1a); } .provider-cookbook-tiles{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; } @media (min-width:420px){ .provider-cookbook-tiles{ grid-template-columns:repeat(4, 1fr); } } @media (min-width:520px){ .provider-cookbook-tiles{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; gap:10px; padding-bottom:4px; } .provider-cookbook-tiles .cookbook-tile{ flex:0 0 auto; min-width:110px; width:110px; } } #providerWeekDayContent{ min-height:100px; text-align:left; padding:0; } #providerWeekDayContent .week-preview-dishes{ display:flex; flex-direction:column; gap:14px; } #providerWeekDayContent .week-preview-section-label{ font-size:10px; font-weight:900; color:#9ca3af; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:12px; padding:0 4px; } #providerWeekDayContent .week-preview-section-label-center{ text-align:center; margin-top:20px; margin-bottom:12px; } #providerWeekDayContent .week-preview-dish{ background:#fff; padding:20px 20px; min-height:56px; border-radius:40px; box-shadow:0 2px 12px rgba(0,0,0,0.04); display:flex; justify-content:space-between; align-items:center; border-left:12px solid transparent; cursor:pointer; transition:transform 0.15s, box-shadow 0.15s; gap:16px; } #providerWeekDayContent .week-preview-dish:active{ transform:scale(0.97); } #providerWeekDayContent .week-preview-dish.week-preview-dish-online{ border-left-color:var(--prov-brand); } #providerWeekDayContent .week-preview-dish-thumb{ width:56px; height:56px; min-width:56px; min-height:56px; border-radius:50%; overflow:hidden; border:2px solid #f3f4f6; background:#f1f3f5; flex-shrink:0; } #providerWeekDayContent .week-preview-dish-thumb img{ width:100%; height:100%; object-fit:cover; } #providerWeekDayContent .week-preview-dish-sold{ background:#f8fafc; border:1px dashed #e2e8f0; border-radius:20px; padding:12px 16px; min-width:60px; text-align:center; flex-shrink:0; } #providerWeekDayContent .week-preview-dish-sold span:first-child{ display:block; font-size:8px; font-weight:800; color:#9ca3af; text-transform:uppercase; letter-spacing:0.05em; } #providerWeekDayContent .week-preview-dish-sold .week-preview-dish-sold-num{ font-size:16px; font-weight:900; color:#1a1a1a; } #providerWeekDayContent .week-preview-dish-online .week-preview-dish-inner{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; } #providerWeekDayContent .week-preview-dish-time{ display:none; } #providerWeekDayContent .week-preview-dish-online .week-preview-dish-time{ display:none; } #providerWeekDayContent .week-preview-dish.week-preview-dish-geplant{ opacity:0.9; background:rgba(255,255,255,0.95); border:2px dashed #e2e8f0; border-left-width:8px; border-left-color:#e2e8f0; padding:24px 20px; min-height:60px; } #providerWeekDayContent .week-preview-dish.week-preview-dish-geplant .week-preview-dish-name{ color:#64748b; } #providerWeekDayContent .week-preview-dish-name{ font-size:20px; font-weight:900; color:#1a1a1a; line-height:1.2; } #providerWeekDayContent .week-preview-dish-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; } #providerWeekDayContent .week-preview-dish-status{ font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:0.05em; } #providerWeekDayContent .week-preview-dish-status.online{ display:none; } #providerWeekDayContent .week-preview-dish-status.geplant{ color:#94a3b8; } #providerWeekDayContent .week-preview-cta{ margin-top:24px; } #providerWeekDayContent .week-preview-cta .btn{ width:100%; min-height:48px; border-radius:14px; font-weight:700; border:2px solid #e5e7eb; background:#fff; color:#1a1a1a; } #providerWeekDayContent .week-preview-link{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:#1a1a1a; margin-top:20px; margin-bottom:24px; cursor:pointer; color:var(--prov-brand,#0ea5e9); padding-bottom:env(safe-area-inset-bottom, 0); } #providerWeekDayContent .week-preview-gap-tip{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:#f8fafc; border:1px solid #e2e8f0; padding:20px; border-radius:24px; margin-top:16px; box-shadow:0 0 0 1px rgba(15,23,42,0.06), 0 4px 20px rgba(15,23,42,0.08); } #providerWeekDayContent .week-preview-gap-tip-inner{ display:flex; align-items:center; gap:12px; } #providerWeekDayContent .week-preview-gap-tip-label{ font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.08em; color:#121826; } #providerWeekDayContent .week-preview-gap-tip-title{ font-size:13px; font-weight:800; color:#1a1a1a; margin-top:2px; } #providerWeekDayContent .week-preview-gap-tip-stats{ font-size:11px; font-weight:700; color:#1a1a1a; margin-top:4px; } #providerWeekDayContent .week-preview-gap-tip .week-preview-gap-tip-btn{ background:#fff; padding:8px 14px; border-radius:12px; font-size:9px; font-weight:900; text-transform:uppercase; border:none; box-shadow:0 1px 4px rgba(0,0,0,0.06); cursor:pointer; color:#1a1a1a; } /* Leerer Tag – Direkt-Inserieren-Trigger (Wochenplan 3.0 „Keine Ausreden“) */ #providerWeekDayContent .week-preview-empty-trigger{ background:rgba(255,255,255,0.5); border:2px dashed #e2e8f0; border-radius:40px; padding:32px 24px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; cursor:pointer; transition:background 0.2s, transform 0.1s; box-shadow:0 2px 12px rgba(0,0,0,0.04); } #providerWeekDayContent .week-preview-empty-trigger:active{ transform:scale(0.98); background:#fff; } #providerWeekDayContent .week-preview-empty-trigger .week-preview-empty-label{ font-size:10px; font-weight:900; color:#9ca3af; text-transform:uppercase; letter-spacing:0.12em; margin-bottom:4px; } #providerWeekDayContent .week-preview-empty-trigger .week-preview-empty-cta{ font-size:16px; font-weight:900; color:#1a1a1a; } #v-provider-profile .panel{ padding:18px !important; border-radius:16px !important; margin-bottom:16px !important; } #v-provider-profile .provider-profile-section-title{ margin-top:24px; margin-bottom:12px; } #v-provider-profile .provider-profile-section-title:first-of-type{ margin-top:0; } /* Meins: einheitliche Abstände der Menüzeilen (Daten, Präferenzen, Zahlung, FAQ) */ #v-provider-profile .provider-profile-row{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 18px; background:none; border:none; border-bottom:1px solid #f1f3f5; font-size:15px; font-weight:700; color:#1a1a1a; text-align:left; cursor:pointer; } #v-provider-profile .provider-profile-row-last{ border-bottom:none; } /* App-like: Menüzeilen mit klarem Abstand, Touch-freundlich */ #v-provider-profile .provider-profile-row{ min-height:56px !important; padding:18px 20px !important; font-size:16px !important; } #v-provider-profile .provider-profile-row-app{ border-bottom:1px solid #f1f3f5; transition:background 0.15s ease; } #v-provider-profile .provider-profile-row-app:active{ background:#f8f9fa !important; } #v-provider-profile .provider-profile-row-app.provider-profile-row-last{ border-bottom:none; } #v-provider-profile .provider-profile-row i[data-lucide]{ width:20px !important; height:20px !important; } #v-provider-profile .provider-profile-logout-btn:active{ transform:scale(0.98); opacity:0.9; } /* S25 Native-First: flüssiges flex-column, Scroll nicht blockieren [cite: s25-native-first] */ #v-provider-profile .provider-profile-sub{ flex:1; min-height:0; display:flex; flex-direction:column; background:#fff !important; transition:transform 0.28s cubic-bezier(0.32,0.72,0,1); } #v-provider-profile .provider-profile-sub > .tgtg-list-wrap, #v-provider-profile .provider-profile-sub > div[style*="overflow-y:auto"]{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 0 calc(120px + env(safe-area-inset-bottom, 0)); box-sizing:border-box; width:100%; } #v-provider-profile .provider-profile-sub .provider-sub-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px; padding-bottom:calc(120px + env(safe-area-inset-bottom, 0)); box-sizing:border-box; } #v-provider-profile #providerProfileMenuCard{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); } /* Einstellungen (Zahnrad): wie Kundenseite – Clean Card & Spacing */ #v-provider-profile .provider-profile-sub .provider-settings-scroll{ padding:40px max(16px, env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom, 0)) max(16px, env(safe-area-inset-left)); display:flex; flex-direction:column; gap:20px; width:100%; max-width:100%; margin:0; box-sizing:border-box; } /* Einstellungen: Clean-Look Cards – weiß, dezent Schatten, keine Schiefertafel [cite: s25-native-first] */ #v-provider-profile .provider-settings-card{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid rgba(0,0,0,0.04); box-shadow:0 2px 12px rgba(0,0,0,0.06); margin-bottom:0; } #v-provider-profile .provider-settings-identity .plogo{ width:100% !important; height:100% !important; border-radius:18px !important; } #v-provider-profile #providerSettingsLogoBtn{ transition:border-color 0.2s, background 0.2s; } #v-provider-profile #providerSettingsLogoBtn:hover{ border-color:#94a3b8; } #v-provider-profile #providerSettingsLogoBtn:active{ transform:scale(0.98); } #v-provider-profile .provider-settings-card .provider-time-trigger{ width:100%; padding:24px; border-radius:16px; background:#f8fafc; border:1px solid rgba(0,0,0,0.06); cursor:pointer; text-align:center; transition:background 0.2s; } #v-provider-profile .provider-settings-card .provider-time-trigger.time-picker-display{ padding:16px; background:#F0FDF4; border-radius:12px; min-height:56px; } #v-provider-profile .provider-settings-card .provider-time-trigger:active{ background:#f1f3f5; } #v-provider-profile .provider-settings-card .provider-time-trigger.time-picker-display:active{ background:#dcfce7; } #v-provider-profile .provider-settings-card .provider-time-inline{ display:flex; align-items:center; gap:12px; margin-top:16px; } #v-provider-profile .provider-settings-card .provider-time-inline select{ width:100%; height:48px; padding:0 12px; border:none; border-bottom:2px solid #e5e7eb; border-radius:0; font-size:16px; font-weight:700; background:transparent; color:#1a1a1a; cursor:pointer; } #v-provider-profile .provider-settings-card .provider-time-inline select:focus{ outline:none; border-bottom-color:var(--brand,#FFD700); } #v-provider-profile .provider-settings-danger-footer .provider-footer-row{ display:flex; justify-content:space-between; align-items:center; padding:18px 20px; background:#fff; border:1px solid rgba(0,0,0,0.04); border-radius:24px; margin-bottom:12px; box-shadow:0 8px 24px rgba(0,0,0,0.03); cursor:pointer; font-size:16px; font-weight:700; color:#1a1a1a; text-decoration:none; color:inherit; } #v-provider-profile .provider-settings-danger-footer .provider-footer-row:active{ background:#f8f9fa; } #v-provider-profile .provider-settings-danger-footer .provider-footer-delete{ display:block; width:100%; padding:16px; font-size:14px; font-weight:800; color:#dc2626; background:transparent; border:none; cursor:pointer; text-align:center; } /* Floating Label Container – Schritt 2 Inseratseinstellungen [cite: Premium-CSS] */ #v-provider-profile .input-group{ position:relative; margin-bottom:24px; background:#FFFFFF; padding:16px 20px; border-bottom:1px solid #E5E7EB; } #v-provider-profile .input-group label{ display:block; font-size:10px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; } #v-provider-profile .input-group input{ width:100%; border:none; font-size:16px; color:#111827; padding:0; outline:none; background:transparent; min-height:24px; } #v-provider-profile .input-label{ position:absolute; top:20px; left:20px; font-size:10px; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:0.05em; transition:all 0.2s ease; pointer-events:none; } #v-provider-profile .input-field:focus ~ .input-label, #v-provider-profile .input-field:not(:placeholder-shown) ~ .input-label, #v-provider-profile .input-field.floating-filled ~ .input-label{ top:12px; font-size:10px; color:#6B7280; } #v-provider-profile .input-field{ width:100%; border:none; outline:none; font-size:16px; background:transparent; color:#111827; box-sizing:border-box; padding:0; min-height:44px; } #v-provider-profile .input-field::placeholder{ color:transparent; } /* Zeit-Picker (15-Minuten-Wheel) – Mittagio-Grün [cite: Premium-CSS] */ #v-provider-profile .time-picker-display{ font-size:24px; font-weight:600; color:#22C55E; text-align:center; padding:16px; background:#F0FDF4; border-radius:12px; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; } /* 3 Säulen Toggles: Emoji links, Text daneben, Toggle ganz rechts – großzügige Touch-Zonen */ #v-provider-profile .provider-settings-pillar-row{ display:flex; justify-content:space-between; align-items:center; padding:20px 24px; min-height:56px; gap:16px; } #v-provider-profile .provider-settings-pillar-row .pillar-left{ display:flex; align-items:center; gap:14px; flex:1; min-width:0; } #v-provider-profile .provider-settings-pillar-row .pillar-emoji{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; } #v-provider-profile .provider-settings-pillar-row .pillar-text{ min-width:0; } #v-provider-profile .provider-settings-pillar-row .toggle-switch{ flex-shrink:0; margin-left:auto; } /* Betriebsdaten: Card-Design, kein Tabellen-Layout [cite: 2026-02-17] */ #v-provider-profile #providerBusinessDataCardWrap .input-group{ margin-bottom:16px; padding:14px 16px; background:#f8fafc; border-radius:14px; border:1px solid #e5e7eb; } #v-provider-profile #providerBusinessDataCardWrap .input-group label{ font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; display:block; } #v-provider-profile #providerBusinessDataCardWrap .input-group input{ width:100%; padding:0; border:none; background:transparent; font-size:16px; font-weight:600; color:#1a1a1a; outline:none; } #v-provider-profile #providerBusinessDataCardWrap .input-group input::placeholder{ color:#94a3b8; font-weight:500; } /* Wochentage: runde Day-Pills, aktiv = Mittagio-Grün [cite: 2026-01-29] */ #v-provider-profile .provider-day-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 16px; border-radius:999px; border:2px solid #e5e7eb; background:#fff; font-size:14px; font-weight:700; color:#6B7280; cursor:pointer; transition:background 0.2s, border-color 0.2s, color 0.2s; } #v-provider-profile .provider-day-pill.active{ background:#22C55E; border-color:#22C55E; color:#fff; } #v-provider-profile .provider-day-pill:active{ opacity:0.9; } /* iOS-Style Toggles für 3 Säulen (🍴 🔄 🧾) in Grün #22C55E [cite: 2026-01-27] */ #v-provider-profile .provider-settings-card .toggle-switch.active .toggle-slider{ transform:translateX(32px); } #v-provider-profile .provider-settings-card .toggle-switch{ background:#e5e7eb; } #v-provider-profile .provider-settings-card .toggle-switch.active{ background:#22C55E !important; } /* Einstellungen Accordion (Collapsible Sections) [cite: 2026-02-17] */ .provider-settings-accordion{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.06); border:1px solid rgba(0,0,0,0.04); margin-bottom:20px; } .provider-settings-accordion-item{ border-bottom:1px solid #e5e7eb; } .provider-settings-accordion-item:last-child{ border-bottom:none; } .provider-settings-accordion-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 20px; background:transparent; border:none; font-size:16px; font-weight:800; color:#1a1a1a; cursor:pointer; text-align:left; transition:background 0.2s; } .provider-settings-accordion-trigger:active{ background:#f8fafc; } .provider-settings-accordion-trigger .accordion-chevron{ width:20px; height:20px; color:#64748b; flex-shrink:0; transition:transform 0.3s ease-out; } .provider-settings-accordion-item.open .provider-settings-accordion-trigger .accordion-chevron{ transform:rotate(180deg); } .provider-settings-accordion-content{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 0.3s ease-out; } .provider-settings-accordion-item.open .provider-settings-accordion-content{ grid-template-rows:1fr; } .provider-settings-accordion-content-inner{ overflow:hidden; } .provider-settings-accordion-content-inner > *{ padding:0 20px 20px; } /* Account verwalten: TGTG Full-Width – weiße Leinwand, keine Box [cite: FAQ Anbieter] */ #v-provider-profile .tgtg-list-wrap{ background:#fff !important; flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px max(16px, env(safe-area-inset-right, 0)) calc(120px + env(safe-area-inset-bottom, 0)) max(16px, env(safe-area-inset-left, 0)); display:flex; flex-direction:column; box-sizing:border-box; width:100% !important; max-width:none !important; gap:0; } /* Container-Sprengung: Keine max-width, keine festen Breiten */ #v-provider-profile .tgtg-list{ background:#fff !important; margin:0; border-radius:0; border:none !important; box-shadow:none !important; overflow:hidden; width:100% !important; max-width:none !important; } #v-provider-profile .tgtg-list:has(.tgtg-accordion){ box-shadow:none !important; border:none !important; border-radius:0; margin:0; } #v-provider-profile .tgtg-section-title{ font-size:11px; font-weight:800; letter-spacing:0.06em; color:#64748b; text-transform:uppercase; margin:0 0 4px; padding:12px 16px 4px; padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); } /* Zeile = von ganz links bis ganz rechts. Icon links, Pfeil rechts [TGTG] */ #v-provider-profile .tgtg-row{ position:relative; display:flex !important; align-items:center !important; justify-content:space-between !important; width:100% !important; min-height:56px; padding:16px 20px !important; padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); background:#FFFFFF !important; border:none !important; box-shadow:none !important; font-size:16px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; font-family:inherit; transition:background 0.2s; -webkit-tap-highlight-color:transparent; box-sizing:border-box; border-bottom:1px solid #E5E7EB !important; } #v-provider-profile .tgtg-row:last-child{ border-bottom:none; } #v-provider-profile .tgtg-row::after{ display:none !important; } #v-provider-profile .tgtg-row:active{ background:#f8fafc !important; } #v-provider-profile .tgtg-row .tgtg-icon, #v-provider-profile .tgtg-row .tgtg-row-icon{ font-size:20px; flex-shrink:0; width:28px; min-width:28px; text-align:left; } #v-provider-profile .tgtg-row .tgtg-label{ flex:1; min-width:0; text-align:left; } #v-provider-profile .tgtg-row .tgtg-chevron{ width:20px; height:20px; color:#94a3b8; flex-shrink:0; } #v-provider-profile .tgtg-identity{ padding:32px 16px 20px; text-align:center; background:transparent; padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); } #v-provider-profile .tgtg-identity-name{ margin:0; font-size:17px; font-weight:800; color:#1a1a1a; letter-spacing:-0.02em; } #v-provider-profile .tgtg-identity-ort{ margin:4px 0 0; font-size:14px; color:#64748b; } /* FOLGE UNS: SVG-Icons Grün, Subtitle [cite: 2026-02-18] */ #v-provider-profile .tgtg-row-icon{ width:20px; height:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; } #v-provider-profile .tgtg-row-icon svg{ width:20px; height:20px; } #v-provider-profile .tgtg-row-icon--green{ color:#22C55E; } #v-provider-profile .tgtg-label-sub{ display:block; margin-top:2px; font-size:12px; font-weight:600; color:#6B7280; } #v-provider-profile .tgtg-row.tgtg-row--link{ min-height:60px; } /* Was ist was? Accordion: TGTG-Flat – durchgehende weiße Fläche, 1px Inset-Divider (links 16px), 300ms [cite: 2026-01-29] */ #v-provider-profile .tgtg-accordion-item{ position:relative; } #v-provider-profile .tgtg-accordion-item::after{ content:''; position:absolute; left:16px; right:0; bottom:0; height:1px; background:#E5E7EB; } #v-provider-profile .tgtg-accordion-item:last-child::after{ display:none; } #v-provider-profile .tgtg-accordion-trigger{ width:100% !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px; min-height:56px; padding:16px 20px !important; padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); background:#fff !important; border:none !important; box-shadow:none !important; font-size:16px; font-weight:700; color:#1a1a1a; cursor:pointer; text-align:left; font-family:inherit; transition:background 0.2s; -webkit-tap-highlight-color:transparent; } #v-provider-profile .tgtg-accordion-trigger .tgtg-label{ text-align:left; } #v-provider-profile .tgtg-accordion-trigger:active{ background:#f8fafc; } #v-provider-profile .tgtg-accordion-trigger .tgtg-accordion-chevron{ width:18px; height:18px; color:#94a3b8; flex-shrink:0; transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1); opacity:0.85; } #v-provider-profile .tgtg-accordion-item.open .tgtg-accordion-trigger .tgtg-accordion-chevron{ transform:rotate(90deg); } #v-provider-profile .tgtg-accordion-content{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1); } #v-provider-profile .tgtg-accordion-item.open .tgtg-accordion-content{ grid-template-rows:1fr; } #v-provider-profile .tgtg-accordion-content-inner{ overflow:hidden; } #v-provider-profile .tgtg-accordion-body{ padding:0 16px 16px; font-size:14px; line-height:1.5; color:#475569; opacity:0; transition:opacity 300ms cubic-bezier(0.4, 0, 0.2, 1); background:#F9FAFB; } #v-provider-profile .tgtg-accordion-item.open .tgtg-accordion-body{ opacity:1; } /* Account verwalten: S25 – volle Breite, kein Box-Padding [TGTG] */ @media (max-width:600px){ #v-provider-profile .provider-profile-sub{ width:100% !important; max-width:100% !important; box-sizing:border-box; } #v-provider-profile .tgtg-list-wrap{ padding-left:max(16px, env(safe-area-inset-left, 0)); padding-right:max(16px, env(safe-area-inset-right, 0)); padding-bottom:calc(120px + env(safe-area-inset-bottom, 0)); width:100%; box-sizing:border-box; } #v-provider-profile .provider-sub-header{ padding-left:20px; padding-right:20px; } #v-provider-profile .provider-sub-header h1{ flex:1; text-align:center; margin:0; min-width:0; } #v-provider-profile .provider-profile-content-rebuild{ padding:20px; width:100%; max-width:100%; box-sizing:border-box; } } /* Account verwalten: Profil löschen ganz unten – schlichter Text-Link ohne Box [TGTG-Vorbild] */ #v-provider-profile .provider-settings-sticky-footer{ position:relative; padding:24px 20px calc(24px + env(safe-area-inset-bottom)); background:transparent; border:none; display:flex; justify-content:center; flex-shrink:0; } #v-provider-profile .provider-settings-sticky-footer .provider-footer-delete{ display:inline-block; width:auto; margin:0; padding:12px 0; background:transparent; border:none; border-radius:0; font-size:15px; font-weight:700; color:#dc2626; cursor:pointer; text-decoration:underline; text-underline-offset:3px; } /* Provider Bottom Nav: Safe-Area, Touch 48px */ #providerNav{ height:calc(64px + env(safe-area-inset-bottom, 20px)) !important; padding-bottom:env(safe-area-inset-bottom, 20px) !important; } #providerNav .navbtn{ min-height:52px; padding:12px 8px !important; font-size:12px !important; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; } #providerNav .navbtn.active{ font-weight:700; } #providerNav .navbtn .ico svg{ width:24px !important; height:24px !important; } #providerNav .navbtn .ico.navbtn-emoji{ display:flex; align-items:center; justify-content:center; } /* FAB nur Dashboard: rechts */ #fabProviderAddOffer{ left: auto !important; bottom:calc(130px + env(safe-area-inset-bottom, 20px)) !important; right:calc(20px + env(safe-area-inset-right, 0)) !important; width:56px !important; height:56px !important; min-width:56px; min-height:56px; } #fabProviderAddOfferLabel{ right:calc(20px + env(safe-area-inset-right, 0)) !important; } /* Sheets: max-height mit Safe-Area */ .sheet{ max-height:calc(92vh - env(safe-area-inset-bottom, 0)) !important; } /* Buttons: Mindest-Touch 48px */ .btn, .btn-primary, .btn-secondary{ min-height:48px !important; } /* Notfall-Fix: Liquid-Panel auf Mobile – ein sauberes Glas-Panel, kein abgeschnittenes Chaos */ #wizard.sheet--kitchen.active{ max-height: 100dvh !important; height: 100dvh !important; height: 100vh !important; } #wizard[data-flow="listing"].sheet--kitchen.active{ height: 100vh !important; height: 100dvh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #wizard.sheet--kitchen .liquid-panel, #wizard.sheet--kitchen .listing-glass-panel, #wizard.sheet--kitchen .glass-express-step0{ z-index: 9999 !important; min-height: 0 !important; max-height: none !important; padding: 15px !important; box-sizing: border-box; } #wizard[data-flow="listing"].sheet--kitchen .liquid-master-panel, #wizard[data-flow="listing"].sheet--kitchen .glass-express-step0{ padding: 0 !important; } #wizard.sheet--kitchen .glass-express-step0 .inserat-scroll-area{ padding: 0 2px; } #wizard.sheet--kitchen .glass-express-step0 .photo-header, #wizard.sheet--kitchen .glass-express-step0 .inserat-photo-tile.photo-header{ height: 180px !important; min-height: 180px !important; } #wizard.sheet--kitchen .sheet-body.wizard-sheet-body{ padding: 0 !important; } #wizard.sheet--kitchen .wizard-scroll{ padding-bottom: 120px !important; -webkit-overflow-scrolling: touch; } /* Inseratsflow Mobile: nur Mitte scrollen, Buttons fix mit Safe-Area */ #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll{ overflow: hidden !important; padding-bottom: 0 !important; } #wizard[data-flow="listing"].sheet--kitchen .glass-express-step0 .inserat-action-section{ padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 24px)) !important; } #wizard.sheet--kitchen #wContent .ans{ min-height:48px !important; padding:14px 18px !important; min-width:0; } #wizard.sheet--kitchen #wContent .ans.ans--thumb{ min-height:72px !important; min-width:72px !important; } #wizard.sheet--kitchen #wContent .answers{ gap:10px !important; } #wizard.sheet--kitchen .field{ min-height:48px !important; padding:16px 18px !important; } #wizard.sheet--kitchen .wizard-scroll{ padding-bottom:24px !important; } #wizard[data-flow="listing"].sheet--kitchen .wizard-scroll{ padding-bottom: 0 !important; } #wizard.sheet--kitchen .handle{ padding:12px 0 !important; margin:12px auto 8px !important; min-height:24px !important; } /* Kochbuch: Pills wie Kundenseite beibehalten (min-height 44px) */ #v-provider-cookbook .cookbook-action-sheet-btn{ min-height:52px !important; } .discover-offers{ padding:14px 12px !important; gap:12px !important; } .card.polaroid{ border-radius:18px !important; } } /* Extra kleine Phones (<375px, z.B. iPhone SE) */ @media (max-width:374px){ #v-provider-home{ padding:0 8px 0 !important; padding-top:0 !important; } #v-provider-home h1{ font-size:20px !important; } #kpiCardTagesessen, #kpiCardAbholungen, #kpiCardKochbuch{ padding:10px 6px !important; } #kpiCardTagesessen div[style*="font-size:20px"], #kpiCardAbholungen div[style*="font-size:32px"], #kpiCardKochbuch div[style*="font-size:32px"]{ font-size:22px !important; } } /* Bild-Container (Discover-Karten): Quadratisch, zentriert */ .card .img{ width:100%; margin:0 0 12px; display:flex; justify-content:center; align-items:center; background:transparent; position:relative; } /* Back Navigation – einheitlich: Icon + „Zurück“ */ .btn-back{ display:inline-flex; align-items:center; justify-content:center; gap:8px; } .btn-back i{ width:18px; height:18px; flex-shrink:0; } .back-button{ position:absolute; top:12px; left:12px; min-width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,.1); } .back-button i{ width:20px; height:20px; } /* Chat-Bubbles Feed */ .feed-container{ width:100%; max-width:100%; margin:0; padding:0 16px 20px; } .chat-bubble{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:16px; box-shadow:0 4px 12px rgba(0,0,0,.06); position:relative; } .chat-bubble-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .chat-bubble-avatar{ width:44px; height:44px; border-radius:50%; overflow:hidden; flex:0 0 auto; border:2px solid var(--border); } .chat-bubble-avatar img{ width:100%; height:100%; object-fit:cover; } .chat-bubble-meta{ flex:1; min-width:0; } .chat-bubble-name{ font-weight:900; font-size:17px; margin-bottom:4px; line-height:1.3; } .chat-bubble-time{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:6px; line-height:1.4; } .chat-bubble-distance{ position:absolute; top:16px; right:16px; font-size:12px; font-weight:700; color:var(--muted); background:#f8f7f3; padding:5px 10px; border-radius:999px; } .chat-bubble-message{ font-size:16px; line-height:1.6; color:var(--text); margin-bottom:14px; } .chat-bubble-image{ width:100%; border-radius:16px; overflow:hidden; margin-bottom:12px; max-height:300px; object-fit:cover; } .chat-bubble-actions{ display:flex; gap:10px; margin-top:12px; } .chat-bubble-btn{ flex:1; padding:12px; border-radius:12px; border:none; font-weight:900; font-size:14px; cursor:pointer; transition:transform .1s; } .chat-bubble-btn:active{transform:scale(.98)} .chat-bubble-btn-primary{ background:var(--brand); color:#111; } .chat-bubble-btn-secondary{ background:#f8f7f3; border:1px solid var(--border); color:var(--text); } .feed-empty{ width:100%; max-width:100%; margin:0; } /* Pickup Card (Theken-Ansicht 2.0) – TGTG Tabula Rasa */ .pickup-card{ background:#fff; border-radius: var(--tgtg-img-radius, 16px); box-shadow: var(--tgtg-shadow-minimal, 0 1px 3px rgba(0,0,0,0.04)); position:relative; overflow:hidden; transition:all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); cursor:pointer; border-left:6px solid #e5e7eb; border-bottom: var(--tgtg-divider, 1px solid rgba(0,0,0,0.06)); display:flex; flex-direction:column; min-height:160px; } .pickup-card:active{ transform:scale(0.96); } .pickup-card.status-open{ border-left-color:#FFD700; } .pickup-card.status-paid{ border-left-color:#2ecc71; } /* Bezahlt & Bereit */ .pickup-card.status-done{ opacity:0.6; filter:grayscale(100%); border-left-color:#999; box-shadow:none; background:#f9f9f9; } .pickup-card-header{ padding:16px 16px 0; display:flex; justify-content:space-between; align-items:flex-start; } .pickup-card-code{ font-size: 2.5rem; font-weight: 950; font-family: ui-monospace, monospace; line-height: 1; color: #0f172a; letter-spacing: 0.05em; } .pickup-card-time{ font-size:13px; font-weight:700; color:#666; background:#f0f2f5; padding:4px 8px; border-radius:8px; } .pickup-card-body{ padding:12px 16px 16px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; } .pickup-card-dish{ font-size:16px; font-weight:700; line-height:1.3; color:#333; margin-bottom:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pickup-card-customer{ font-size:13px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pickup-card-badge{ position:absolute; top:12px; right:12px; background:#2ecc71; color:#fff; font-size:11px; font-weight:800; padding:4px 8px; border-radius:6px; } /* Animation für Erledigt */ @keyframes check-pop { 0% { transform:scale(0); opacity:0; } 50% { transform:scale(1.2); opacity:1; } 100% { transform:scale(1); opacity:1; } } .check-overlay{ position:absolute; inset:0; background:rgba(46,204,113,0.9); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.2s; } .pickup-card.just-done .check-overlay{ opacity:1; } .pickup-card.just-done .check-icon{ animation:check-pop 0.3s ease-out forwards; } /* Sticky Categories Bar */ .discover-categories-sticky { position: sticky; top: 60px; /* Header height approx */ z-index: 90; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 12px 16px; overflow-x: auto; white-space: nowrap; display: flex; gap: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); margin-bottom: 16px; scrollbar-width: none; /* Firefox */ } .discover-categories-sticky::-webkit-scrollbar { display: none; } .cat-pill { padding: 8px 16px; border-radius: 20px; background: #f2f2f2; color: #666; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); flex-shrink: 0; display: flex; align-items: center; gap: 6px; } .cat-pill:active { transform: scale(0.95); } .cat-pill.active { background: #1a1a1a; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .cat-pill i { width: 16px; height: 16px; } /* Kalender/Day-Pills – moderner Look */ .discover-days-sticky { gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, rgba(255,248,240,0.98) 0%, rgba(247,246,240,0.95) 100%); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.04); } .day-pill { flex-shrink: 0; min-width: 72px; padding: 12px 14px; border-radius: 16px; border: 2px solid transparent; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; color: #64748b; box-shadow: 0 2px 8px rgba(0,0,0,0.06); } .day-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.1); color: #334155; } .day-pill:active { transform: scale(0.97); } .day-pill.day-pill--today { background: linear-gradient(135deg, #FFD700 0%, #f2b705 100%); color: #1a1a1a; border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 16px rgba(255,215,0,0.35); } .day-pill.day-pill--today:hover { box-shadow: 0 6px 20px rgba(255,215,0,0.45); transform: translateY(-2px); } .day-pill .day-pill-label { font-weight: 800; letter-spacing: -0.02em; } .day-pill .day-pill-date { font-size: 11px; font-weight: 600; opacity: 0.85; } /* Redesigned Offer Card (Modern App Style) */ .offer-card-modern { background: #fff; border-radius: 24px; width: 95%; max-width: 95%; margin-left: auto; margin-right: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.06); margin-bottom: 24px; overflow: hidden; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(0,0,0,0.02); } .offer-card-modern:active { transform: scale(0.98); } .ocm-image-container { position: relative; width: 100%; aspect-ratio: 4/3; background: #f0f0f0; overflow: hidden; } .ocm-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ocm-provider-badge { position: absolute; top: 12px; left: 12px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); padding: 6px 12px 6px 6px; border-radius: 20px; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 13px; font-weight: 700; color: #333; z-index: 2; } .ocm-provider-logo { width: 24px; height: 24px; border-radius: 50%; background: #eee; object-fit: cover; } .ocm-like-btn { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.1); color: #333; z-index: 2; cursor: pointer; transition: transform 0.2s; } .ocm-like-btn:active { transform: scale(0.8); } .ocm-like-btn.active { color: #e74c3c; fill: #e74c3c; } .ocm-price-tag { position: absolute; bottom: 12px; right: 12px; background: #1a1a1a; color: #fff; padding: 8px 14px; border-radius: 16px; font-weight: 800; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .ocm-content { padding: 16px 20px 20px; } .ocm-title { font-size: 18px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px; line-height: 1.3; } .ocm-meta { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.05); font-size: 13px; color: #666; font-weight: 500; } .ocm-meta-item { display: flex; align-items: center; gap: 6px; } .ocm-meta-item i { width: 16px; height: 16px; color: #999; } /* Silicon-Valley Pills: dezente Pop-Animation beim Laden */ .ocm-pills-row { animation: ocmPillPop 0.35s ease-out; } @keyframes ocmPillPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } /* App-like Transitions & Feedback */ .view { display: none; opacity: 0; } .view.active { display: block; opacity: 1; animation: viewIn 0.2s ease-out forwards; } .view.active#v-pickup-code { display: flex !important; } /* Applike: Wochenplan ohne Verschieben – nur Einblendung */ #v-provider-week.active { animation: viewInFade 0.2s ease-out forwards; } @keyframes viewInFade { from { opacity: 0; } to { opacity: 1; } } @keyframes viewIn { from { transform: translateY(6px); } to { transform: translateY(0); } } /* Global Button Feedback */ button:active, .btn:active, .btn-primary:active, .cat-pill:active, .day-pill:active, .ocm-like-btn:active, .chip:active { transform: scale(0.96) !important; } button, .btn, .btn-primary, .cat-pill, .day-pill, .ocm-like-btn, .chip { transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, box-shadow 0.2s; } /* --- MODERN CUSTOMER UI --- */ .customer-view { background: #fff; min-height: 100vh; } /* Meins, Mittagsbox, Favoriten, Orders: Inhaltsbereich, seitliches Padding 16px [cite: Tabula Rasa] */ #v-profile .customer-main-wrap, #v-cart .customer-main-wrap, #v-fav .customer-main-wrap, #v-orders .customer-main-wrap { min-height: calc(100vh - 60px); padding: 0 16px; padding-bottom: calc(var(--content-padding-bottom) + env(safe-area-inset-bottom, 0)); padding-left: max(16px, env(safe-area-inset-left, 0)); padding-right: max(16px, env(safe-area-inset-right, 0)); box-sizing: border-box; } /* Modern Sticky Header – Design-System Kundenseiten: 60px, Native App [cite: 2026-03-11 Top-Rand-Fix] */ .cust-header-sticky { position: sticky; top: 0; z-index: 100; min-height: 60px; padding: 0 16px; background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); padding-left: 16px; padding-right: 16px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; } /* Kundenseiten (ohne Discover): Header startet ganz oben, kein Top-Gap */ body:not(.provider-mode) .customer-view:not(#v-discover) > .cust-header-sticky { margin-top: 0 !important; padding-top: 0 !important; top: 0 !important; } /* Discover-Header: eigene Regeln (padding/shadow) in .discover-header-sticky weiter oben */ /* Seitentitel: Design-System --size-h2/--weight-heavy (Discover etc.), Checkout/Rechtliches --size-h1 */ .customer-view .cust-header-sticky h1, #v-discover .discover-header-sticky h1 { font-family: var(--font-main) !important; font-size: var(--size-h2) !important; font-weight: var(--weight-heavy) !important; letter-spacing: -0.03em; color: var(--color-title); margin: 0; } #v-checkout .panel h3 { font-family: var(--font-main) !important; font-size: var(--size-h1) !important; font-weight: var(--weight-heavy) !important; letter-spacing: -0.03em; color: var(--color-title); } /* Kunde: Anbieter-Profil (Restaurant-Seite) – app-like, nicht gequetscht, S25-tauglich */ #v-provider-detail-public { display: flex !important; flex-direction: column !important; min-height: 100vh; min-height: 100dvh; background: #f8f9fa !important; } #v-provider-detail-public .pub-prov-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0)); } #v-provider-detail-public .cust-header-sticky { flex-shrink: 0; background: #fff; } #v-provider-detail-public .pub-prov-back-btn, #v-provider-detail-public .pub-prov-fav-btn { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } #v-provider-detail-public .pub-prov-back-btn:active, #v-provider-detail-public .pub-prov-fav-btn:active { transform: scale(0.96); } #v-provider-detail-public .pub-prov-hero { border: 1px solid rgba(0,0,0,0.04); } #v-provider-detail-public .pub-prov-section-title { font-size: 13px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 14px; } #v-provider-detail-public .pub-prov-empty { text-align: center; padding: 28px 20px; font-size: 15px; font-weight: 600; color: #94a3b8; line-height: 1.5; } #v-provider-detail-public .pub-prov-offer-card { min-height: 56px; transition: transform 0.2s ease; } #v-provider-detail-public .pub-prov-offer-card:active { transform: scale(0.98); } #v-provider-detail-public .pub-prov-hero button:active { transform: scale(0.98); } @media (max-width: 430px) and (min-height: 700px) { #v-provider-detail-public .pub-prov-header-row { padding: 16px 16px !important; } #v-provider-detail-public .pub-prov-back-btn, #v-provider-detail-public .pub-prov-fav-btn { min-width: 52px; min-height: 52px; } #v-provider-detail-public #pubProvName { font-size: var(--size-h2) !important; } #v-provider-detail-public .pub-prov-hero { padding: 28px 20px !important; } #v-provider-detail-public .pub-prov-scroll { padding: 20px 16px calc(28px + env(safe-area-inset-bottom, 0)) !important; } #v-provider-detail-public #pubProvTitle { font-size: 22px !important; } #v-provider-detail-public #pubProvAddress { font-size: 14px !important; } } /* Airbnb-Style Cards: 28px Radius, hauchzarter Schatten [cite: 2026-02-20] */ .cust-card { background: #fff; border-radius: var(--tgtg-img-radius); overflow: hidden; border: none; box-shadow: none; border-bottom: var(--tgtg-divider); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; margin-bottom: var(--tgtg-spacing); } .cust-card:active { transform: scale(0.97); box-shadow: 0 4px 12px rgba(0,0,0,0.02); } .cust-card-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: #f1f3f5; } .cust-card-body { padding: 16px; display: flex; flex-direction: column; gap: 4px; } .cust-card-title { font-size: 18px; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cust-card-meta { font-size: 13px; font-weight: 600; color: #64748b; display: flex; align-items: center; gap: 4px; } /* Preise Kundenseiten: gelbe Pills, schwarzer Text, 14px, 800 */ .cust-card-price { font-size: 14px; font-weight: 800; margin-top: 8px; display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--brand); color: #000; } .cust-card-price.price-pill { margin-left: auto; } .customer-view .price-pill { font-size: 14px !important; font-weight: 800 !important; background: var(--brand) !important; color: #000 !important; padding: 6px 12px !important; border-radius: 999px !important; } /* Favorites Grid: 2x2, Airbnb-Style (28px Radius, mehr Weißraum) [cite: 2026-02-20] */ .fav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tgtg-spacing); padding: 0 var(--tgtg-spacing); } .fav-card { background: #fff; border-radius: var(--tgtg-img-radius); overflow: hidden; box-shadow: none; display: flex; flex-direction: column; border: none; height: 100%; } .fav-card-img { width: 100%; aspect-ratio: 1/1; /* Quadratisch laut Spec */ object-fit: cover; } /* Segmented Control / Chips */ .cust-chip-bar { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; } .cust-chip-bar::-webkit-scrollbar { display: none; } .cust-chip { flex: 0 0 auto; padding: 8px 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(0,0,0,0.05); font-size: 14px; font-weight: 700; color: #64748b; transition: all 0.2s; } .cust-chip.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Airbnb-Footer: System-Integration – reinweiß, bündig, Safe-Area [cite: 2026-02-23] */ body:not(.provider-mode) .bottom-nav { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; background-color: #ffffff !important; border-top: 1px solid #ebebeb !important; margin: 0 !important; padding-bottom: env(safe-area-inset-bottom) !important; z-index: 2000 !important; display: flex !important; justify-content: space-around !important; align-items: center !important; height: calc(65px + env(safe-area-inset-bottom)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; border-radius: 0 !important; } .nav-item i { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .nav-item.active i { transform: translateY(-2px) scale(1.1); color: var(--brand); } /* 3 Pillars in Card – kreisförmige Standard-Icons (Grün, Petrol, Gelb) direkt unter dem Bild; Layout-Lock [Stabilität] */ .card-pillars { display: flex; gap: 12px; margin-top: 12px; align-items: center; flex-shrink: 0; } .pillar-mini { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #f1f3f5; opacity: 0.45; filter: grayscale(1); flex-shrink: 0; } .pillar-mini.active { opacity: 1; filter: grayscale(0); } .pillar-mini.active.green { background: rgba(13, 150, 104, 0.2); color: #0d9668; } .pillar-mini.active.yellow { background: rgba(201, 162, 39, 0.35); color: #1a1a1a; } .pillar-mini.active.petrol { background: rgba(13, 148, 136, 0.2); color: #0d9488; } /* Discover: 3 Säulen mit Farben – Vor Ort warmes Gelb, Abholnummer Gold, Mehrweg sattes Grün */ /* Discover: 3 Säulen – Vor Ort Gelb, Abholnummer Gold, Mehrweg Grün [cite: 2026-01-26, 2026-01-27, 2026-01-29] */ #v-discover .discover-card-pillars .pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; } #v-discover .discover-card-pillars .pillar-icon:nth-child(1) { background: rgba(201, 162, 39, 0.25); box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.35); } #v-discover .discover-card-pillars .pillar-icon:nth-child(2) { background: rgba(212, 160, 18, 0.25); box-shadow: 0 0 0 1px rgba(212, 160, 18, 0.35); } #v-discover .discover-card-pillars .pillar-icon:nth-child(3) { background: rgba(13, 150, 104, 0.25); box-shadow: 0 0 0 1px rgba(13, 150, 104, 0.35); } /* Preis: systemweit gelbe Pill-Darstellung */ .price-pill { display: inline-block; padding: 8px 16px; border-radius: 999px; background: #FFD700; color: #1a1a1a; font-weight: 800; font-size: 16px; box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25); } /* Button Refinement – fancy, klar, ein Haupt-CTA */ .btn-cust-primary { height: 56px; min-height: 56px; border-radius: 18px; background: var(--brand); color: #1a1a1a; border: none; font-weight: 850; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 24px rgba(255, 215, 0, 0.28); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; cursor: pointer; } .btn-cust-primary:hover { box-shadow: 0 14px 36px rgba(255, 215, 0, 0.4); transform: translateY(-2px) scale(1.02); } .btn-cust-primary:active { transform: scale(0.97); } /* Mittagsbox-CTA: puffy Hover ~0.2s ease-out [cite: 2026-01-29, 2026-02-18] */ #v-discover .btn-mittagsbox-cta, #v-discover .btn-cust-primary { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } #v-discover .btn-mittagsbox-cta:hover, #v-discover .btn-cust-primary:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); transform: scale(1.03) translateY(-2px); } #v-discover .btn-mittagsbox-cta:active, #v-discover .btn-cust-primary:active { transform: scale(0.97); } .btn-cust-primary:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; } /* --- END MODERN CUSTOMER UI --- */ /* === S25 HIGH-END FINISH === */ #v-provider-account-manage .settings-container { display: flex !important; flex-direction: column !important; gap: 16px !important; padding: 20px !important; height: auto !important; min-height: 100% !important; overflow-y: auto !important; /* Macht die Seite auf dem S25 wieder rollbar */ -webkit-overflow-scrolling: touch; } #v-provider-account-manage button { position: relative !important; /* Verhindert das Übereinanderstapeln */ width: 100% !important; left: 0 !important; top: 0 !important; margin-bottom: 0 !important; min-height: 60px !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; } /* === Trust-Footer (Rechtliches & Payment) === */ .trust-footer { padding: 60px 20px; border-top: 1px solid #eaeaea; background: #fff; font-family: var(--font-main); } .trust-footer-inner { width: 100%; max-width: 100%; margin: 0; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; } .trust-footer-apps { display: flex; gap: 15px; align-items: center; } .trust-footer-app-badge { opacity: 0.5; filter: grayscale(1); } .trust-footer-coming { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 1px; } .trust-footer-payment { display: flex; gap: 20px; align-items: center; opacity: 0.6; } .trust-footer-payment img { display: block; } .trust-footer-legal { display: flex; gap: 25px; font-size: 14px; color: #666; } .trust-footer-legal a { text-decoration: none; color: inherit; } .trust-footer-copy { text-align: center; margin-top: 40px; font-size: 12px; color: #aaa; } /* Footer nur in Anbieter-Login (Landingpage) – Abstand zum Panel [cite: 2026-02-04] */ #v-provider-login .trust-footer { margin-top: 32px; } /* === FOOTER HARDWARE UNITY: S25 Native Look [cite: 2026-02-23] === */ .vendor-area .app-footer-main, #wizard[data-flow="listing"] .vendor-area .app-footer-main { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100vw !important; background: #ffffff !important; border-top: 1px solid #ebebeb !important; padding: 12px 24px calc(16px + env(safe-area-inset-bottom)) !important; padding-left: max(24px, env(safe-area-inset-left)) !important; padding-right: max(24px, env(safe-area-inset-right)) !important; display: flex !important; justify-content: space-between !important; align-items: center !important; z-index: 500 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .vendor-area .btn-primary-black, .vendor-area .app-footer-main .footer-btn-primary { height: 48px !important; min-height: 48px !important; padding: 0 32px !important; background: #1a1a1a !important; color: #ffffff !important; border-radius: 8px !important; font-weight: 600 !important; border: none !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } .vendor-area .btn-secondary-link, .vendor-area .app-footer-main .footer-link-secondary { height: 48px !important; min-height: 48px !important; padding: 0 !important; color: #222222 !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: underline !important; background: transparent !important; border: none !important; } .vendor-area .app-footer-main .footer-btn-primary, .vendor-area .app-footer-main .btn-primary-black { min-width: 180px !important; flex: 1; } /* btn-secondary-text: Dezentes Grau, Airbnb-Stil [cite: 2026-03-10] */ .btn-secondary-text { background: none; border: none; color: #717171; font-weight: 600; text-decoration: underline; font-size: 15px; cursor: pointer; padding: 12px 0; min-height: 48px; align-self: center; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; } .btn-secondary-text:active { color: #222222; } /* overflow:hidden Scroll-Block entfernt – Airbnb-Block setzt overflow-y:auto [cite: PURGE 2026-03-12] */ .mastercard-scroll-area, .inserat-scroll-area.mastercard-scroll-area, #mastercard-step-edit .mastercard-scroll-area { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 60px 0 120px !important; } #wizard[data-flow="listing"] .inserat-photo-tile.photo-header { margin-top: 0 !important; margin-bottom: 0 !important; } /* Duplikat-Regel entfernt – Basis-Regel oben übernimmt [cite: PURGE-FINAL 2026-03-12] */ /* Content-Sheet: direkt ans Foto, kein sichtbarer Weißraum [cite: S25-PREMIUM 2026-03-11] */ #wizard[data-flow="listing"] .inserat-content-sheet { background: #ffffff !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; margin-top: 0 !important; padding-top: 2px !important; position: relative; z-index: 2; overflow: visible; } /* Beschreibungsfeld: sichtbar, nicht abgeschnitten [cite: MASTER-CARD FIX 2026-02-23] */ #wizard[data-flow="listing"] .inserat-desc-wrap { flex-shrink: 0; overflow: visible; min-height: 44px; } /* height:30vh + ::after-Gradient entfernt – Airbnb-Block (250px) greift [cite: PURGE 2026-03-12] */ #wizard[data-flow="listing"] .inserat-photo-tile.inserat-photo-placeholder { background: #e2e8f0 !important; } #wizard[data-flow="listing"] .inserat-photo-placeholder-center { display: flex !important; align-items: center !important; justify-content: center !important; background: #e2e8f0 !important; } #wizard[data-flow="listing"] .inserat-photo-placeholder-center span { font-size: 48px !important; opacity: 0.5; } /* Titel-Hierarchie: Bold, Letter-Spacing [cite: S25 PREMIUM V2 2026-02-23] */ #wizard[data-flow="listing"] .input-giant-name, #wizard[data-flow="listing"] #gericht-name.inserat-detail-style-title, #wizard[data-flow="listing"] .inserat-name-textarea { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em !important; margin-top: 0 !important; } #wizard[data-flow="listing"] .inserat-name-textarea { line-height: 1.3; } /* Untertitel: 0.85rem, Medium-Grau [cite: S25 PREMIUM V2 2026-02-23] */ #wizard[data-flow="listing"] .input-description, #mastercard-step-edit .input-description { font-size: 0.85rem !important; color: #6b7280 !important; } /* Powerbar mittig [cite: UNIFIED MASTERCARD 2026-02-23] */ #wizard[data-flow="listing"] .inserat-power-bar { justify-content: center !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; } /* Feedback-Liste: Allergene, Extras, Mehrweg, Vor Ort [cite: PIXEL-PERFECT 2026-02-23] */ #wizard[data-flow="listing"] .feedback-list { width: 100%; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 0; } #wizard[data-flow="listing"] .feedback-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 6px; min-height: 24px; padding: 8px 12px; background: rgba(16, 185, 129, 0.08); border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.2); } #wizard[data-flow="listing"] .feedback-row .feedback-icon { width: 20px; min-width: 20px; height: 20px; flex-shrink: 0; opacity: 0.8; margin-top: 2px; font-size: 16px; line-height: 1; text-align: center; } #wizard[data-flow="listing"] .feedback-row .feedback-text { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.35; word-break: break-word; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Quick-Adjust: mittig unten (left:50% + transform in script.js) [cite: UNIFIED MASTERCARD 2026-02-23] */ #wizard[data-flow="listing"] .inserat-quick-adjust-panel, #wizard[data-flow="listing"] .quick-adjust-sheet { left: 50% !important; width: 100% !important; max-width: 400px !important; } /* Fertig-Button: pixelgenau über Footer, 0px margin/radius unten [cite: 2026-02-23] */ #wizard[data-flow="listing"] .quick-adjust-sheet .inserat-fertig-kachel, #wizard[data-flow="listing"] .quick-adjust-sheet .quick-adjust-fertig { margin-bottom: 0 !important; border-radius: 0 !important; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important; } /* Validation Error: sanfter roter Schimmer [cite: S25 PREMIUM 2026-02-23] */ #wizard[data-flow="listing"] .inserat-validation-error { animation: inserat-validation-shimmer 0.5s ease; } @keyframes inserat-validation-shimmer { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); } } /* Anti-Flash: Farbwechsel weich [cite: Refactor Event Handlers 2026-02-23] */ #wizard[data-flow="listing"] .category-pill, #wizard[data-flow="listing"] .inserat-allergen-pill, #wizard[data-flow="listing"] .photo-header .inserat-allergen-pill { transition: background 0.2s, color 0.2s; } /* Zentrierungs-Achse Step 1 + 2 [cite: 2026-02-23] */ .mastercard-step-center, #mastercard-step-edit, .inserat-step1-pane { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .mastercard-scroll-area > *, .inserat-scroll-area.mastercard-scroll-area > * { width: 100%; max-width: 100%; box-sizing: border-box; } /* Demo-Modus Indikator (dezenter Badge, Klick zum Umschalten) */ .demo-badge { position: fixed; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.5); color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; z-index: 10000; text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; } /* 9:16 Share-Template (1080×1920) – WhatsApp-Status [cite: 2026-02-18] */ .share-template-916{ font-family: 'Inter', -apple-system, sans-serif; display:flex; flex-direction:column; } .share-template-916 .st916-header{ display:flex; align-items:center; gap:24px; padding:48px 40px 32px; background:#fff; border-bottom:2px solid #ebebeb; box-sizing:border-box; } .share-template-916 .st916-logo{ width:80px; height:80px; border-radius:20px; background:#f1f5f9; background-size:cover; background-position:center; flex-shrink:0; } .share-template-916 .st916-title-wrap{ flex:1; min-width:0; } .share-template-916 .st916-title{ font-size:42px; font-weight:900; color:#0f172a; margin:0 0 6px 0; line-height:1.2; } .share-template-916 .st916-kw{ font-size:24px; font-weight:700; color:#64748b; } .share-template-916 .st916-content{ padding:24px 40px; overflow:hidden; box-sizing:border-box; flex:1; min-height:0; } .share-template-916 .st916-dish{ background:#fff; border-radius:24px; overflow:hidden; margin-bottom:24px; box-shadow:0 4px 20px rgba(0,0,0,0.08); border:1px solid #e2e8f0; } .share-template-916 .st916-dish-img{ width:100%; height:280px; background:#f1f5f9; background-size:cover; background-position:center; display:block; } .share-template-916 .st916-pillars{ display:flex; justify-content:center; gap:24px; padding:16px 24px; border-top:1px solid #f1f5f9; font-size:28px; background:#fafafa; } .share-template-916 .st916-dish-body{ padding:20px 24px; } .share-template-916 .st916-dish-name{ font-size:32px; font-weight:800; color:#0f172a; margin:0 0 6px 0; } .share-template-916 .st916-dish-meta{ font-size:24px; color:#64748b; } .share-template-916 .st916-dish-price{ font-size:28px; font-weight:800; color:#0f172a; margin-top:8px; } .share-template-916 .st916-footer{ padding:32px 40px 48px; background:#0f172a; color:#fff; text-align:center; box-sizing:border-box; margin-top:auto; } .share-template-916 .st916-footer-addr{ font-size:24px; font-weight:600; margin:0 0 12px 0; line-height:1.4; } .share-template-916 .st916-footer-cta{ font-size:32px; font-weight:900; margin:0; letter-spacing:0.02em; } /* Overlay Sichtbarkeit nur per JS (display:none/ flex) – kein !important, sonst blockiert es beim Seitenstart */ .share-template-overlay{ align-items:center; justify-content:center; } /* ========== Insert Review View (Woche aktivieren) [cite: 2026-02-25] ========== */ #v-insert-review.native-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f8fafc; z-index: 2000; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); } #v-insert-review .view-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #fff; border-bottom: 1px solid #ebebeb; } #v-insert-review .view-header .back-btn { width: 44px; height: 44px; border: none; background: none; font-size: 24px; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; } #v-insert-review .view-header h2 { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; } #v-insert-review .review-scroll-area { flex: 1; overflow-y: auto; padding-bottom: 120px; -webkit-overflow-scrolling: touch; } #v-insert-review .review-grid-2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; } #v-insert-review .review-card { display: flex; flex-direction: column; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); } #v-insert-review .review-card img { width: 100%; height: 80px; object-fit: cover; } #v-insert-review .review-card .info { padding: 10px 12px; } #v-insert-review .review-card .info h3 { font-weight: 900; font-size: 14px; margin: 0 0 4px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #v-insert-review .review-card .pillars { display: flex; gap: 6px; font-size: 12px; } #v-insert-review .billing-card { margin: 0 16px 24px; padding: 20px; background: #fff; border-radius: 16px; border: 1px dashed #e2e8f0; } #v-insert-review .billing-card h3 { margin: 0 0 16px 0; font-size: 16px; font-weight: 800; color: #0f172a; } #v-insert-review .billing-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } #v-insert-review .billing-row.total { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; font-weight: 800; font-size: 18px; } #v-insert-review .billing-row.highlight-green { color: #10b981; font-weight: 900; } #v-insert-review .price-bold { font-weight: 900; font-size: 18px; } #v-insert-review .strike { text-decoration: line-through; opacity: 0.4; font-size: 14px; margin-right: 8px; } #v-insert-review .badge-free { color: #10b981; font-size: 20px; font-weight: 900; } #v-insert-review .billing-divider { height: 1px; background: #e2e8f0; margin: 16px 0; } #v-insert-review .service-info { background: #f0fdf4; padding: 12px; border-radius: 8px; margin-top: 10px; border: 1px dashed #10b981; } #v-insert-review .service-info .explanation { font-size: 12px; color: #15803d; margin: 5px 0 0 0; } #v-insert-review .price-tag { font-weight: 700; color: #10b981; } #v-insert-review .airbnb-footer { position: fixed; bottom: 0; left: 0; width: 100%; background: white; border-top: 1px solid #ebebeb; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 10000; } #v-insert-review .airbnb-footer .footer-line { height: 1px; background: #ebebeb; margin: 0 0 12px 0; } #v-insert-review .primary-btn-black { width: calc(100% - 32px); margin: 0 16px; background: #222222; color: white; height: 54px; border-radius: 8px; font-weight: bold; font-size: 16px; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Step-Flow Monetisierung: Gold-Schimmer & Footer-Konstanz [cite: 2026-02-25] */ .step-view { padding-bottom: 120px; } .step-view .premium-header-shimmer { background: linear-gradient(90deg, #ffffff 0%, #fff9e6 50%, #ffffff 100%); background-size: 200% 100%; animation: goldShimmer 3s infinite; padding: 40px 20px; text-align: center; border-bottom: 1px solid #f2e6c2; } @keyframes goldShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .step-view .review-minimal-list { padding: 16px; } .step-view .mini-summary-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: #fcfcfc; border-radius: 12px; border: 1px solid #f0f0f0; } .step-view .mini-summary-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; } .step-view .mini-info { display: flex; flex-direction: column; gap: 4px; } .step-view .mini-info .name { font-weight: 700; color: #1e293b; } .step-view .mini-info .price { font-size: 15px; color: #10b981; font-weight: 600; } .step-view .cashflow-selector { padding: 0 20px 16px; } .step-view .option-card { padding: 20px; border-radius: 12px; border: 2px solid #e2e8f0; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .step-view .option-card.active { border-color: #10b981; box-shadow: 0 0 0 1px #10b981; } .step-view .option-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .step-view .option-card .label { font-weight: 700; color: #1e293b; } .step-view .option-card .price-big { font-size: 20px; font-weight: 900; color: #10b981; } .step-view .option-card .sub-note { font-size: 12px; color: #64748b; margin: 0; } .step-view .revenue-preview-box { margin: 20px; padding: 15px; background: #fcfcfc; border-radius: 12px; color: #888; font-size: 13px; text-align: center; border: 1px solid #f0f0f0; } .step-view .revenue-preview-box strong { color: #444; } /* Footer-Konstanz: Daumen-Position halten [cite: 2026-02-23] */ .step-view .airbnb-footer.step-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: 100px; background: white; display: flex; flex-direction: column; align-items: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid #ebebeb; z-index: 10000; } .step-view .airbnb-footer .footer-line { height: 1px; background: #ebebeb; margin: 0 0 12px 0; } .step-view .primary-btn-black { width: calc(100% - 40px); height: 56px; background: #222; color: white; border-radius: 8px; font-weight: 900; font-size: 17px; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Step 3: Success-View BÄM & Viralität [cite: 2026-02-25] */ .success-view-bg { background: #f8fafc; text-align: center; overflow-y: auto; padding-bottom: 120px; position: relative; } .success-view-bg .confetti-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; overflow: hidden; } .success-view-bg .success-header { padding: 40px 20px 20px; } .success-view-bg .live-pill-pulse { display: inline-block; background: #10b981; color: white; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: 12px; letter-spacing: 1px; margin-bottom: 12px; } .success-view-bg .bam-title { font-size: 56px; font-weight: 900; color: #222; margin: 10px 0; transform: rotate(-3deg); animation: popAndRotate 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes popAndRotate { 0% { transform: scale(0) rotate(-15deg); opacity: 0; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } } .success-view-bg .success-header p { margin: 0; font-size: 15px; color: #64748b; } .success-view-bg .live-status-card-container { padding: 0 16px; } .success-view-bg .live-card { background: white; border-radius: 20px; margin: 20px 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); position: relative; text-align: left; border: 2px solid #10b981; animation: glowSuccess 2s infinite alternate; } @keyframes glowSuccess { from { box-shadow: 0 10px 30px rgba(16, 185, 129, 0.1); } to { box-shadow: 0 10px 40px rgba(16, 185, 129, 0.3); } } .success-view-bg .active-badge { position: absolute; top: 12px; left: 12px; background: #10b981; color: white; padding: 4px 10px; border-radius: 8px; font-weight: bold; font-size: 11px; z-index: 2; } .success-view-bg .live-card img { width: 100%; height: 160px; object-fit: cover; display: block; } .success-view-bg .live-card-body { padding: 15px; } .success-view-bg .price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; } .success-view-bg .abhol-badge { color: #10b981; font-weight: 900; font-size: 14px; } .success-view-bg .viral-section { padding: 24px 16px; } .success-view-bg .viral-section h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: #0f172a; } .success-view-bg .share-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .success-view-bg .share-item { background: white; border: 1px solid #ebebeb; border-radius: 16px; padding: 15px 5px; font-weight: bold; font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .success-view-bg .share-item:active { transform: scale(0.95); background: #f0fdf4; } /* Pure Food Magazin – Schatzkammer [cite: 2026-02-18, 2026-02-25] */ .magazine-scroll-area { background: #ffffff; } #cookbookMittagioLayer.cookbook-mittagio-layer{ transform: translateY(0); opacity: 1; transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease; } #cookbookMittagioLayer.cookbook-mittagio-layer.is-closing{ transform: translateY(100%); opacity: 0.92; } .treasure-card { background: #fff; border-radius: 24px; margin-bottom: 30px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.06); transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1); cursor: pointer; -webkit-tap-highlight-color: transparent; } .treasure-card:active { transform: scale(0.97); } .treasure-card img { width: 100%; height: 320px; object-fit: cover; display: block; } .treasure-info { padding: 24px; text-align: left; } .treasure-name { font-weight: 900; font-size: 26px; color: #222; margin: 0 0 5px 0; } .treasure-price { font-size: 18px; color: #666; font-weight: 500; margin: 0; } .fly-image { position: fixed; transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1); border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); object-fit: cover; z-index: 10000; } /* Smart-Adopt Highlight: Vorlage aus Schatzkammer übernommen */ #wizard.adopted-pro-dish-glow .mastercard-container, #wizard.adopted-pro-dish-glow .liquid-master-panel{ box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.35), 0 16px 42px rgba(10, 132, 255, 0.2) !important; animation: adopted-pro-dish-glow 1.2s ease-out; } @keyframes adopted-pro-dish-glow{ 0%{ box-shadow: 0 0 0 0 rgba(10,132,255,0), 0 8px 16px rgba(10,132,255,0); } 35%{ box-shadow: 0 0 0 2px rgba(10,132,255,0.38), 0 18px 44px rgba(10,132,255,0.22); } 100%{ box-shadow: 0 0 0 1px rgba(10,132,255,0.12), 0 10px 24px rgba(10,132,255,0.12); } } /* Legacy v-step-* Views: Nicht mehr verwenden – InseratCard nur im #wizard [cite: STOP-ORDER] */ #v-step-1, #v-step-2-monetize, #v-step-3-success { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* Legacy v-step-* entfernt – InseratCard nur im #wizard [cite: STOP-ORDER] */ #v-step-1, #v-step-2-monetize, #v-step-3-success { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* MASTERCARD PREMIUM LOOK & ICONS [cite: 2026-03-03] */ #wizard[data-flow="listing"] { background: #ffffff !important; z-index: 20000 !important; } /* V46 ICONS & FOOTER [cite: 2026-03-04] */ /* 🕒 Uhr | 🔄 Mehrweg | 🌿 Erle | 🍴 Besteck | ➕ Extras */ .power-item .inserat-pill-emo { font-size: 32px !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15)) saturate(1.2); transition: all 0.3s var(--s25-slide-curve, cubic-bezier(0.2, 0.8, 0.2, 1)); } .power-item.active .inserat-pill-emo { transform: scale(1.3) translateY(-6px); } /* Airbnb-Footer: Absolut bündig & Weiß */ .inserat-airbnb-footer { background: #ffffff !important; border-top: 1px solid #ebebeb !important; padding-bottom: env(safe-area-inset-bottom, 20px) !important; display: flex; justify-content: center; } /* Primärer Button: Schwarz #222222, 8px Radius */ #wizard[data-flow="listing"] .btn-primary-black { background: #222222 !important; color: #ffffff !important; border-radius: 8px !important; font-weight: 700; padding: 14px 28px; border: none; width: 100%; max-width: 400px; } /* V47 VISUAL FORCE [cite: 2026-03-04] */ body.wizard-inserat-open #wizard { display: flex !important; z-index: 99999 !important; visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; background: #fff !important; } body.wizard-inserat-open #wbd { display: block !important; z-index: 99998 !important; opacity: 1 !important; } /* S25 PREMIUM ICONS: Kräftig & Aussagekräftig [cite: 2026-03-03] */ .power-item .inserat-pill-emo { font-size: 30px !important; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)) saturate(1.3); } /* V48: EDGE-TO-EDGE & BLACK BORDER FIX [cite: 2026-03-04] */ html, body { background-color: #ffffff !important; height: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; } #app, main, .view { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; } #wizard[data-flow="listing"] { bottom: 0 !important; height: 100vh !important; width: 100vw !important; z-index: 100000 !important; } /* V49: CONTENT VISIBILITY FIX [cite: 2026-03-04] */ #wContent, .wizard-sheet-body { opacity: 1 !important; visibility: visible !important; display: block !important; color: #222222 !important; min-height: 200px; } #v-provider-home.active { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #ffffff !important; z-index: 100; display: block !important; } #providerNavWrap { z-index: 9999; } /* V51: ULTIMATIVE SICHTBARKEIT [cite: 2026-03-05] */ html, body { background-color: #ffffff !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } body.wizard-inserat-open #wizard { display: flex !important; visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; z-index: 1000000 !important; background: #ffffff !important; position: fixed !important; inset: 0 !important; } body.wizard-inserat-open #wbd { display: block !important; z-index: 999999 !important; background: rgba(0,0,0,0.5) !important; } /* V52: ULTIMATE LAYER-FIX [cite: 2026-03-05] */ #wizard, #wbd { transition: none !important; } body.wizard-inserat-open #wizard { display: flex !important; background: #ffffff !important; } :root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* V53: FINAL Z-INDEX FIX – Wizard IMMER über Backdrop (Spezifität 1ID+3Klassen schlägt alle) */ body.wizard-inserat-open #wizard.sheet--kitchen.active { z-index: 1000001 !important; position: fixed !important; inset: 0 !important; background: #ffffff !important; display: flex !important; flex-direction: column !important; visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; } /* ============================================================ S25 COCKPIT – 35/45/20 Layout (Final Implementation) ============================================================ */ #wizard[data-flow="listing"] .inserat-cockpit { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; overflow-x: hidden !important; position: relative; background: #ffffff; max-width: 100vw; box-sizing: border-box; } /* 35dvh Block entfernt – Airbnb-Block setzt 250px [cite: PURGE 2026-03-12] */ #wizard[data-flow="listing"] .inserat-cockpit-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px calc(96px + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Titel und Beschreibung zentriert */ #wizard[data-flow="listing"] .inserat-cockpit-body .inserat-section, #wizard[data-flow="listing"] .inserat-cockpit-body .inserat-desc-wrap { width: 100%; text-align: center; } /* ============================================================ Service-Grid – 5 quadratische Kacheln (Airbnb-Highlight) ============================================================ */ /* Info-Section: Wrapper für Service-Grid [cite: 2026-03-10] */ .info-section { background: #f9f9f9; border-radius: 24px; padding: 14px 12px 14px; margin: 8px 16px 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .section-label { font-size: 11px; font-weight: 800; color: #717171; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; text-align: center; } /* Floating Badges im Hero-Foto – position:absolute, inline-style übernimmt die Kontrolle [cite: S25-PREMIUM 2026-03-11] */ .floating-badges { display: flex; flex-wrap: nowrap; gap: 6px; z-index: 160; pointer-events: auto; } .badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 5px 10px; border-radius: 18px; font-size: 12px; font-weight: 700; color: #222222; border: none; cursor: pointer; transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .badge:active { transform: scale(0.95); } .badge.active { background: #222222; color: #ffffff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); } /* Category-Badges: eigene Klasse, kein Konflikt mit globalem .badge [cite: 2026-03-10] */ .category-badge { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid #e8e8e8; background: #ffffff; color: #222222; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .category-badge:active { transform: scale(0.95); } .category-badge.active { background: #1a1a1a; color: #ffffff; border-color: #1a1a1a; box-shadow: 0 2px 10px rgba(0,0,0,0.18); } .inserat-service-grid, .service-grid { display: flex; justify-content: center; align-items: center; width: 100%; padding: 0 16px; box-sizing: border-box; gap: 8px; } .inserat-service-tile, .service-tile { flex: 1; min-width: 0; max-width: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 16px; border: 1px solid #ebebeb; background: #ffffff; cursor: pointer; gap: 3px; padding: 6px 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .inserat-service-tile:active, .service-tile:active { transform: scale(0.93); } .inserat-service-tile.active, .inserat-service-tile.is-active, .service-tile.active, .service-tile.is-active { background: #eef6ff; border: 1.5px solid #007aff; color: #007aff; } .inserat-service-tile.active .tile-icon, .inserat-service-tile.is-active .tile-icon, .service-tile.active .tile-icon, .service-tile.is-active .tile-icon { color: #007aff; } .inserat-service-tile.active .tile-label, .inserat-service-tile.is-active .tile-label, .service-tile.active .tile-label, .service-tile.is-active .tile-label { color: #007aff; } .inserat-service-tile .tile-icon, .service-tile .tile-icon { font-size: 18px; line-height: 1; } .inserat-service-tile .tile-label, .service-tile .tile-label { font-size: 9px; font-weight: 700; color: #333333; text-align: center; line-height: 1.2; } /* S25 Edge-Protection: Keine feste Breite > 320px im Inseratsflow [cite: S25-GRID-FIX 2026-03-13] */ #wizard[data-flow="listing"] .inserat-content-sheet, #wizard[data-flow="listing"] .inserat-cockpit-body, #wizard[data-flow="listing"] .inserat-scroll-area, #mastercard-step-edit .inserat-content-sheet, #mastercard-step-edit .inserat-scroll-area { max-width: 100%; box-sizing: border-box; } /* Rebowl-Row innerhalb des Grids */ .inserat-service-rebowl { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: rgba(16, 185, 129, 0.06); border-radius: 10px; border: 1px solid rgba(16, 185, 129, 0.2); font-size: 13px; font-weight: 600; color: #0f172a; } /* ============================================================ Cockpit-Preis – 32px zentriert, direkt vor Footer ============================================================ */ .inserat-cockpit-price { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0 0; margin-top: auto; } .inserat-cockpit-price .inserat-price-pill-wrap { display: flex; align-items: baseline; gap: 4px; justify-content: center; } .inserat-cockpit-price .inserat-price-pill-input { font-size: 32px !important; font-weight: 900 !important; text-align: center; border: none !important; border-bottom: 2px solid #e5e5e5 !important; background: transparent !important; outline: none; width: 130px; color: #0f172a; padding: 4px 0 8px; } .inserat-cockpit-price .inserat-price-pill-input:focus { border-bottom-color: #000000 !important; } .inserat-cockpit-price .currency { font-size: 22px; font-weight: 900; color: #0f172a; } /* ============================================================ Sub-Menu-Drawer (Allergene / Slide-Up) ============================================================ */ .sub-menu-drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 1100000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .sub-menu-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .sub-menu-drawer { position: fixed; left: 0; right: 0; bottom: 0; background: #ffffff; border-radius: 20px 20px 0 0; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12); z-index: 1200000; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); max-height: 65vh; overflow-y: auto; padding: 16px 16px calc(90px + env(safe-area-inset-bottom, 0)); } .sub-menu-drawer.is-open { transform: translateY(0); } .sub-menu-drawer-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; margin: 0 auto 16px; } .sub-menu-drawer-title { font-size: 17px; font-weight: 800; color: #0f172a; text-align: center; margin: 0 0 16px; } /* Allergen-Grid im Drawer */ .sub-menu-allergen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .sub-menu-allergen-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 14px; border: 2px solid #e5e5e5; background: #ffffff; cursor: pointer; gap: 3px; padding: 6px 2px; transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease; -webkit-tap-highlight-color: transparent; } .sub-menu-allergen-tile:active { transform: scale(0.93); } .sub-menu-allergen-tile.active { border: 2px solid #000000; background: #f8f8f8; } .sub-menu-allergen-tile .allergen-emoji { font-size: 20px; line-height: 1; } .sub-menu-allergen-tile .allergen-code { font-size: 9px; font-weight: 800; color: #333333; text-align: center; } .sub-menu-drawer-fertig { width: 100%; min-height: 52px; border: none; border-radius: 12px; background: #222222; color: #ffffff; font-size: 15px; font-weight: 800; cursor: pointer; margin-top: 8px; } /* Footer immer über Drawer */ /* S25-ULTRA: Footer absolut bündig mit unterem Displayrand, verschmilzt mit Home-Bar [cite: 2026-03-12] */ #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] .inserat-action-section.fixed-footer, #mastercard-footer-step1 { z-index: 10000 !important; } /* Preis-Input: hochwertig, klar, fett, große Schrift (Reihenfolge Pills oben, Preis unten unverändert) */ #wizard[data-flow="listing"] .inserat-price-pill-input.input-giant-price, #wizard[data-flow="listing"] #gericht-preis.inserat-price-fintech { font-size: 26px !important; font-weight: 800 !important; color: #222222 !important; } /* Allergen-Disclaimer im Drawer */ .sub-menu-allergen-disclaimer { font-size: 11px; font-style: italic; color: #94a3b8; line-height: 1.4; text-align: center; margin: 12px 0 0; } /* S25/HANDY-STABILITÄT: Footer klebt in Step 1 + Step 2 auf jedem Gerät */ #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2 { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; margin: 0 !important; background: #ffffff !important; border-top: 1px solid #ebebeb !important; z-index: 10000 !important; padding-bottom: env(safe-area-inset-bottom, 20px) !important; min-height: calc(68px + env(safe-area-inset-bottom, 20px)) !important; transform: translateZ(0); -webkit-transform: translateZ(0); } #wizard[data-flow="listing"] #mastercard-footer-step1 .inserat-step1-nav, #wizard[data-flow="listing"] #mastercard-footer-step2.inserat-step1-nav { width: 100% !important; min-height: 48px !important; align-items: stretch !important; } /* Scroll-Reserve: letzter Inhalt bleibt über klebendem Footer sichtbar */ #wizard[data-flow="listing"] #mastercard-step-edit .mastercard-scroll-area, #wizard[data-flow="listing"] #mastercard-step-edit .inserat-scroll-area, #wizard[data-flow="listing"] #mastercard-step-money .inserat-step2-wrap { padding-bottom: calc(132px + env(safe-area-inset-bottom, 20px)) !important; } /* =================================================================== S25 PREMIUM NAVIGATION: Fixed Header + Normal-Scroll Photo Apple/Airbnb-Style [cite: S25-PREMIUM-NAV 2026-03-11] =================================================================== */ /* 30vh Photo-Block entfernt – Airbnb-Block weiter unten setzt 250px [cite: PURGE 2026-03-12] */ /* Photo-Tile im Scroll: einheitlich 250px */ #wizard[data-flow="listing"] .inserat-photo-tile.inserat-photo-in-scroll { height: 250px !important; min-height: 250px !important; max-height: 250px !important; } /* Fixed Header: Airbnb Collapsing + S25 Safe-Area (nicht hinter Kamera) */ #app-sticky-header, #inserat-fixed-header { position: fixed; top: 0; left: 0; width: 100%; min-height: calc(70px + env(safe-area-inset-top, 0px)); padding-top: calc(env(safe-area-inset-top, 0px) + 10px); padding-left: 0; padding-right: 0; padding-bottom: 10px; background: #ffffff; z-index: 1000002; border-bottom: 1px solid transparent; display: flex; align-items: flex-end; justify-content: center; margin: 0; transition: border-color 0.25s ease, background 0.2s ease; box-sizing: border-box; box-shadow: none; } #app-sticky-header .header-title, #inserat-fixed-header .header-title { position: relative; z-index: 0; opacity: 0; transition: opacity 0.25s ease-out; font-size: 16px; font-weight: 600; color: #222222; } #app-sticky-header.header-collapsed .header-title, #inserat-fixed-header.header-collapsed .header-title { opacity: 1; } #app-sticky-header.header-collapsed, #inserat-fixed-header.header-collapsed { border-bottom-color: #ebebeb; } #app-sticky-header .close-wizard-x, #app-sticky-header .btn-close-master, #inserat-fixed-header .close-wizard-x, #inserat-fixed-header .btn-close-master { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 24px; color: #888; } /* ✏️ Edit-Icon oben rechts im Foto (dunkler Glas-Kreis) */ #inserat-edit-pencil-btn { transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.15s; } #inserat-edit-pencil-btn:active { transform: scale(0.88); opacity: 0.7; } /* Foto-Editor: 50/50 Split-Screen (Mastercard Step 1) */ #photo-edit-overlay.photo-editor-floating.photo-editor-split { background: #000; height: 100dvh; width: 100vw; display: flex; flex-direction: column; z-index: 1100005; overflow: hidden; user-select: none; -webkit-user-select: none; opacity: 0; transition: opacity 0.22s ease; } #photo-edit-overlay.photo-editor-floating.photo-editor-split.is-open { opacity: 1; } #photo-edit-overlay.photo-editor-floating.photo-editor-split.is-closing { opacity: 0; pointer-events: none; } #photo-edit-overlay .image-display-zone { position: relative; height: 50dvh; width: 100vw; overflow: hidden; background: #000; } #photo-edit-overlay .editor-bg-image { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; min-width: 100%; min-height: 100%; object-fit: cover; transform: translate(-50%, -50%); touch-action: none; -webkit-user-drag: none; transition: transform 0.2s ease, filter 0.2s ease; } #photo-edit-overlay .crop-grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.30) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.30) 1px, transparent 1px); background-size: 33.33% 33.33%; } #photo-edit-overlay .editor-controls-sheet { position: relative; height: 50dvh; margin-top: -20px; border-radius: 24px 24px 0 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 -10px 30px rgba(0,0,0,0.10); border-top: 1px solid rgba(255,255,255,0.7); display: flex; flex-direction: column; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2; } #photo-edit-overlay .photo-coach-floating { position: relative; left: auto; right: auto; bottom: auto; z-index: 2; border-radius: 18px; padding: 12px; background: rgba(255,255,255,0.80); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(15,23,42,0.08); } #photo-edit-overlay .coach-title { margin: 0 0 8px; font-size: 12px; font-weight: 800; color: #334155; } #photo-edit-overlay .inspiration-slider { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } #photo-edit-overlay .pill { background: rgba(255,255,255,0.95); border: 1px solid rgba(15,23,42,0.10); padding: 6px 10px; border-radius: 999px; white-space: nowrap; font-size: 12px; color: #334155; } #photo-edit-overlay .save-photo-btn { width: 100%; max-width: 420px; align-self: center; margin-top: 20px; padding: 16px; border: none; border-radius: 16px; background: #111827; color: #fff; font-size: 16px; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; box-shadow: 0 10px 22px rgba(15,23,42,0.18); transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease; } #photo-edit-overlay .save-photo-btn:active { transform: scale(0.98); } #photo-edit-overlay .save-photo-btn.is-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; } #photo-edit-overlay .save-photo-btn.is-saved { background: #10b981; pointer-events: none; } #photo-edit-overlay .editor-save-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #ffffff; border-radius: 50%; animation: photo-editor-spin 0.8s linear infinite; } @keyframes photo-editor-spin { to { transform: rotate(360deg); } } #photo-edit-overlay .editor-bottom-nav { position: absolute; left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); z-index: 3; display: flex; justify-content: space-around; align-items: center; gap: 10px; padding: 14px 12px; background: rgba(255,255,255,0.60); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(15,23,42,0.08); border-radius: 22px; } #photo-edit-overlay .tool-btn { text-align: center; font-size: 11px; color: #0f172a; background: transparent; border: none; min-height: 60px; min-width: 72px; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; } #photo-edit-overlay .tool-btn .tool-icon { font-size: 23px; margin-bottom: 4px; } #photo-edit-overlay .tool-btn span { display: block; font-weight: 700; color: #0f172a; } #photo-edit-overlay .tool-btn.active { opacity: 1; } #photo-edit-overlay .tool-btn:not(.active) { opacity: 0.75; } #photo-edit-overlay .tool-btn:active { transform: scale(0.96); } .ebay-preview-img.pulse-highlight { animation: photo-save-glow 1s ease-out; } @keyframes photo-save-glow { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.75); transform: scale(1); } 50% { box-shadow: 0 0 18px 4px rgba(16,185,129,0.30); transform: scale(1.015); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); transform: scale(1); } } @keyframes profile-button-attention-bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px); box-shadow: 0 12px 22px rgba(0,0,0,0.2); } 60% { transform: translateY(-4px); } } .button-attention-hint { animation: profile-button-attention-bounce 1s ease; background-color: #007aff !important; color: #ffffff !important; transition: background-color 0.5s ease, color 0.5s ease; } /* Crop-Fertig-Overlay im Foto */ #crop-fertig-overlay { touch-action: none; /* verhindert Page-Scroll während Crop */ } /* Step 2 Clean UI: kompakt, homogen, eBay/Airbnb */ #wizard[data-flow="listing"] #mastercard-step-money .step2-clean-info { padding-bottom: 6px; } #wizard[data-flow="listing"] #mastercard-step-money .step2-pickup-box { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); } #wizard[data-flow="listing"] #mastercard-step-money .step2-umsatz-vorschau { margin-bottom: 8px !important; } /* Schmale Handys (<=390px): kompakter Footer + Step2 ohne Umbrüche */ @media (max-width: 390px) { #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2 { padding-left: 12px !important; padding-right: 12px !important; min-height: calc(64px + env(safe-area-inset-bottom, 20px)) !important; } #wizard[data-flow="listing"] #mastercard-footer-step1 .btn-primary-black, #wizard[data-flow="listing"] #mastercard-footer-step2 .btn-primary-black { min-height: 46px !important; height: 46px !important; font-size: 15px !important; padding: 0 16px !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-clean-info { gap: 8px !important; padding: 10px 12px 0 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-pickup-box { padding: 10px 12px !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-umsatz-vorschau { margin: 6px 12px 0 !important; width: calc(100% - 24px) !important; padding: 10px 12px !important; } } /* #inserat-fixed-title entfernt – kein Titel im Header mehr [cite: PURGE-FINAL 2026-03-12] */ /* Service-Tiles: sanfter Schatten für Premium-Look */ #wizard[data-flow="listing"] .inserat-service-tile { box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important; transition: box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) !important; } #wizard[data-flow="listing"] .inserat-service-tile:active { transform: scale(0.96) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; } /* =================================================================== AIRBNB SCROLLABLE LAYOUT Inhalt scrollt unter fixem Header – Clean Sweep [cite: CLEAN-SWEEP 2026-03-12] =================================================================== */ /* Großer Titel (H1): direkt unter Pills, 28px, 800 */ #wizard[data-flow="listing"] .wizard-content #step-name, #wizard[data-flow="listing"] .wizard-content .inserat-unified-title-wrap { margin-top: 16px !important; } #wizard[data-flow="listing"] .wizard-content #step-name .input-giant-name, #wizard[data-flow="listing"] .wizard-content .inserat-detail-style-title.inserat-gericht-name-extra { font-size: 28px !important; font-weight: 800 !important; } /* 1. ScrollArea: padding für Header (60px) + Footer (120px) */ #wizard[data-flow="listing"] .inserat-scroll-area.mastercard-scroll-area, #mastercard-step-edit .inserat-scroll-area, #mastercard-step-edit .mastercard-scroll-area { display: flex !important; flex-direction: column !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; padding-top: 60px !important; padding-bottom: 120px !important; padding-left: 0 !important; padding-right: 0 !important; align-items: stretch !important; gap: 0 !important; } /* 2. PhotoContainer: 250px, Edge-to-Edge – Bild berührt Bildschirmrand links/rechts */ #wizard[data-flow="listing"] .inserat-cockpit-photo, #wizard[data-flow="listing"] .inserat-photo-container, #wizard[data-flow="listing"] .photo-container { width: 100vw !important; max-width: 100vw !important; height: 190px !important; min-height: 190px !important; max-height: 190px !important; flex-shrink: 0 !important; overflow: hidden !important; position: relative !important; margin: 0 0 0 calc(-50vw + 50%) !important; padding: 0 !important; border-radius: 0 !important; } /* 3. PhotoTile: füllt den photoContainer, PURGE – kein Weißraum */ #wizard[data-flow="listing"] .inserat-photo-tile.inserat-photo-in-scroll, #wizard[data-flow="listing"] .inserat-photo-tile.photo-header { height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } /* 4. ContentSheet: normaler Flow, kompakt, 20px Safe-Zone [cite: S25-GRID-FIX 2026-03-12] */ #wizard[data-flow="listing"] .inserat-cockpit-body.inserat-content-sheet, #wizard[data-flow="listing"] .inserat-cockpit-body { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; overflow: visible !important; padding: 0 20px 16px !important; gap: 8px !important; flex: 0 0 auto !important; box-sizing: border-box !important; } #wizard[data-flow="listing"] .wizard-content #step-name .input-giant-name, #wizard[data-flow="listing"] .wizard-content .inserat-name-textarea { font-size: 28px !important; font-weight: 800 !important; } /* 5. Keyboard-Mode: Photo schrumpft auf 150px */ #wizard[data-flow="listing"] .liquid-master-panel.inserat-keyboard-active .inserat-cockpit-photo { height: 150px !important; min-height: 150px !important; max-height: 150px !important; } /* 6. Kleiner Screen (<700px): Photo 200px */ @media (max-height: 700px) { #wizard[data-flow="listing"] .inserat-cockpit-photo { height: 200px !important; height: 25vh !important; max-height: 25vh !important; } } /* Listing Hotfix 2026-03-13: Header sichtbar, Scroll stabil, Footer sticky im Panel */ #wizard[data-flow="listing"] .inserat-steps-slider, #wizard[data-flow="listing"] .inserat-step1-pane, #wizard[data-flow="listing"] .inserat-step2-pane, #wizard[data-flow="listing"] .inserat-step3-pane, #wizard[data-flow="listing"] #mastercard-step-edit { min-height: 0 !important; width: 100% !important; max-width: 100% !important; } #wizard[data-flow="listing"] .inserat-scroll-area.mastercard-scroll-area { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; } #app-sticky-header .header-title, #inserat-fixed-header .header-title { opacity: 1 !important; } /* sticky-Override entfernt – Footers nutzen position:fixed aus dem Block unten */ /* Listing Footer Final: keine Legacy-Airbnb-Fixed-Leiste mehr im Wizard */ #wizard[data-flow="listing"] #mastercard-footer-step1 .inserat-step1-nav, #wizard[data-flow="listing"] #mastercard-footer-step2.inserat-step1-nav, #wizard[data-flow="listing"] [data-inserat-step="3"].inserat-step1-nav { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; margin: 0 !important; background: #ffffff !important; border-top: 0 !important; } /* STRICT FOOTER ALIGNMENT (S25): finaler Listing-Footer */ body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main { position: fixed !important; bottom: 0 !important; left: 0 !important; width: 100% !important; z-index: 10000 !important; margin: 0 !important; border-radius: 0 !important; background: #ffffff !important; border-top: 1px solid #ebebeb !important; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) 20px !important; box-sizing: border-box !important; transform: translateZ(0); -webkit-transform: translateZ(0); } #wizard[data-flow="listing"] #mastercard-footer-step1 .inserat-step1-nav, #wizard[data-flow="listing"] #mastercard-footer-step2.inserat-step1-nav, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main.inserat-step1-nav { display: flex !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-top: 0 !important; } #wizard[data-flow="listing"] .inserat-step1-nav .btn-primary-black, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main .footer-btn-primary { background: #222222 !important; color: #ffffff !important; border-radius: 8px !important; min-height: 48px !important; border: none !important; } #wizard[data-flow="listing"] .inserat-step1-nav .btn-secondary-link { color: #222222 !important; font-weight: 800 !important; text-decoration: underline !important; background: transparent !important; border: none !important; } #wizard[data-flow="listing"] .inserat-scroll-area { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } /* MASTERCARD STEP 1 FINAL: 5 Icons + Airbnb Footer Single Source */ #wizard[data-flow="listing"] .inserat-service-grid, #wizard[data-flow="listing"] .service-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; justify-items: center !important; align-items: center !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; padding: 0 16px !important; margin: 0 auto !important; box-sizing: border-box !important; } #wizard[data-flow="listing"] .inserat-service-tile, #wizard[data-flow="listing"] .service-tile { width: 100% !important; max-width: none !important; min-width: 0 !important; aspect-ratio: 1 / 1 !important; } #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2 { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 10000 !important; margin: 0 !important; border-radius: 0 !important; background: #ffffff !important; border-top: 1px solid #ebebeb !important; box-shadow: none !important; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)) 20px !important; box-sizing: border-box !important; } #wizard[data-flow="listing"] #mastercard-footer-step1 .inserat-step1-nav, #wizard[data-flow="listing"] #mastercard-footer-step2.inserat-step1-nav, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main.inserat-step1-nav { display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 12px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } #wizard[data-flow="listing"] .inserat-step1-nav .btn-primary-black, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main .footer-btn-primary, #wizard[data-flow="listing"] #mastercard-footer-step2 .btn-primary-black { color: #ffffff !important; border-radius: 12px !important; border: none !important; min-height: 52px !important; width: calc(100% - 40px) !important; margin: 0 auto !important; display: block !important; font-size: 16px !important; font-weight: 800 !important; transition: background 0.2s ease, box-shadow 0.2s ease !important; -webkit-tap-highlight-color: transparent; } #wizard[data-flow="listing"] #mastercard-footer-step2 .btn-primary-black:active { transform: scale(0.98); } #wizard[data-flow="listing"] .inserat-step1-nav .btn-secondary-link { color: #222222 !important; font-weight: 800 !important; text-decoration: underline !important; background: transparent !important; border: none !important; } #wizard[data-flow="listing"] .inserat-scroll-area, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-scroll-area { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } /* UNIVERSAL DEVICE FIX: iPhone/iPad/Samsung viewport + footer stability */ body.wizard-inserat-open #wizard[data-flow="listing"], #wizard[data-flow="listing"].sheet--kitchen, #wizard[data-flow="listing"].sheet--kitchen.active { height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; } #wizard[data-flow="listing"] .sheet-body.wizard-sheet-body, #wizard[data-flow="listing"] .wizard, #wizard[data-flow="listing"] .wizard-inner, #wizard[data-flow="listing"] .wizard-scroll, #wizard[data-flow="listing"] #wContent, #wizard[data-flow="listing"] .inserat-card-sheet, #wizard[data-flow="listing"] .liquid-master-panel, #wizard[data-flow="listing"] .mastercard-container { min-height: 0 !important; } #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step1, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] #mastercard-footer-step2 { padding: 12px 20px calc(12px + max(env(safe-area-inset-bottom, 0px), 12px)) 20px !important; } #wizard[data-flow="listing"] .inserat-scroll-area, body.provider-mode.wizard-inserat-open #wizard[data-flow="listing"] .inserat-scroll-area { padding-bottom: var(--listing-footer-offset, calc(104px + max(env(safe-area-inset-bottom, 0px), 12px))) !important; } /* Edge-to-Edge Consistency: gleiche Typo-/Inset-Basis auf iOS/Android */ #wizard[data-flow="listing"] { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #app-sticky-header, #inserat-fixed-header, #wizard[data-flow="listing"] #mastercard-footer-step1, #wizard[data-flow="listing"] #mastercard-footer-step2, #wizard[data-flow="listing"] [data-inserat-step="3"].app-footer-main { left: 0 !important; right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Global Alignment & Cleanup: einheitliche Zeilen in Mastercard */ .mastercard-row { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 12px; } .mastercard-label { text-align: left; font-size: 15px; color: #666666; } .mastercard-value { text-align: right; font-weight: 800; font-size: 18px; color: #222222; } /* Mastercard Step 2: Final Review Card (S25) */ #mastercard-step-2 { background-color: #f6f8fa; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } #wizard[data-flow="listing"] #mastercard-step-money .final-review-step2 { background: #ffffff !important; overflow: hidden !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-review-title { text-align: left; } /* ===== STEP 2: MONETIZATION – PREMIUM CARD DESIGN ===== */ #wizard[data-flow="listing"] #mastercard-step-money .final-review-step2 { background: #ffffff !important; overflow: hidden !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-review-stamp { width: calc(100% - 40px) !important; box-sizing: border-box !important; margin: 16px 20px 0 !important; border-radius: 12px !important; border: 1px solid #eee !important; border-bottom: 2px dashed #ddd !important; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important; background: #fff !important; padding: 10px 12px !important; opacity: 0.6 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-review-stamp #money-dish-name { font-size: clamp(16px, 4.4vw, 18px) !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-review-stamp #money-dish-price { font-size: clamp(21px, 5vw, 24px) !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-floating-tiles { width: 100% !important; display: flex !important; flex-direction: column !important; gap: 12px !important; padding: 16px 20px 0 !important; box-sizing: border-box !important; background: transparent !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile, #wizard[data-flow="listing"] #mastercard-step-money .service-tile-card { position: relative !important; width: 100% !important; min-height: 124px !important; text-align: left !important; border: 2px solid transparent !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; padding: 16px 52px 14px 16px !important; margin: 10px 0 !important; cursor: pointer !important; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease !important; -webkit-tap-highlight-color: transparent !important; display: block !important; box-sizing: border-box !important; appearance: none !important; -webkit-appearance: none !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile:active { transform: scale(0.97) !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile.is-active, #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile.active, #wizard[data-flow="listing"] #mastercard-step-money .service-tile-card.active { border: 2px solid #007aff !important; box-shadow: 0 8px 25px rgba(0,122,255,0.1) !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-check { position: absolute !important; top: 16px !important; right: 16px !important; width: 28px !important; height: 28px !important; border-radius: 999px !important; border: 2px solid #d1d5db !important; color: transparent !important; background: #f8fafc !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 900 !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important; pointer-events: none !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile.is-active .step2-choice-check { border-color: #007aff !important; background: #007aff !important; color: #ffffff !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-row { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile.has-recommendation .step2-choice-row { padding-right: 0 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-head-wrap { display: inline-flex !important; align-items: center !important; gap: 6px !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-head { font-size: 16px !important; font-weight: 800 !important; color: #0f172a !important; line-height: 1.2 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-feature-title { color: #007aff !important; font-weight: 900 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-info-btn { border: 1px solid rgba(0,0,0,0.08) !important; background: rgba(0,0,0,0.06) !important; color: #999999 !important; width: 16px !important; height: 16px !important; min-width: 16px !important; border-radius: 999px !important; font-size: 10px !important; line-height: 1 !important; font-weight: 800 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-price { font-size: 24px !important; font-weight: 900 !important; line-height: 1 !important; color: #0f172a !important; white-space: nowrap !important; } .tile-price { font-size: 22px !important; font-weight: 900 !important; color: #007aff !important; margin-left: auto !important; white-space: nowrap !important; } .step2-feature-price { font-size: 26px !important; font-weight: 900 !important; color: #007aff !important; text-align: right !important; } .tile-price-value { text-align: right !important; font-size: 24px !important; font-weight: 900 !important; color: #007aff !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-tile.is-active .step2-choice-price { color: #007aff !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-sub { margin-top: 5px !important; font-size: 12px !important; color: #64748b !important; line-height: 1.4 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-feature-pills { display: flex !important; gap: 6px !important; margin-top: 8px !important; flex-wrap: wrap !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-feature-pill { background: #f0f2f5 !important; color: #555 !important; padding: 4px 10px !important; border-radius: 100px !important; font-size: 11px !important; font-weight: 600 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-marketing-checks { list-style: none !important; margin: 10px 0 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; font-size: 13px !important; line-height: 1.6 !important; color: #334155 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-marketing-checks li { display: flex !important; align-items: flex-start !important; gap: 6px !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-marketing-checks .check { color: #28a745 !important; font-weight: 900 !important; } #popover-backdrop { position: fixed; inset: 0; opacity: 0; pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(0,0,0,0.3); transition: opacity 0.22s ease; z-index: 1000; } #popover-backdrop.show { opacity: 1; pointer-events: auto; } #info-popover { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(16px); width: min(420px, calc(100% - 32px)); background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25); opacity: 0; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; z-index: 1001; } #info-popover.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #info-popover .step2-popover-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: none; border-radius: 999px; background: rgba(0,0,0,0.06); color: #64748b; font-size: 18px; cursor: pointer; } #info-popover .step2-popover-title { margin: 0 30px 10px 0; font-size: 18px; font-weight: 900; color: #0f172a; } #info-popover .step2-popover-body { font-size: 14px; line-height: 1.55; color: #334155; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-list { margin: 6px 72px 0 0 !important; padding: 0 !important; list-style: none !important; display: flex !important; flex-direction: column !important; gap: 4px !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-list li { font-size: 12px !important; line-height: 1.35 !important; color: #334155 !important; font-weight: 600 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-fee { color: #475569 !important; font-weight: 700 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-badge-best { position: absolute !important; top: 10px !important; right: 52px !important; padding: 2px 8px !important; border-radius: 999px !important; background: #007aff !important; color: #ffffff !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: 0.02em !important; } .badge-bestseller { position: absolute; top: -10px; right: 15px; background: #007aff; color: #ffffff; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; } .badge-recommendation { position: absolute; top: 8px; left: 10px; right: auto; background: #007aff; color: #ffffff; padding: 2px 6px; border-radius: 6px; font-size: 9px; font-weight: 800; text-transform: uppercase; z-index: 10; } #wizard[data-flow="listing"] #mastercard-step-money .step2-badge-best.badge-recommendation { top: 8px !important; left: 10px !important; right: auto !important; border-radius: 6px !important; padding: 2px 6px !important; font-size: 9px !important; } #wizard[data-flow="listing"] #mastercard-footer-step2 .btn-primary-black { letter-spacing: 0.5px !important; border: none !important; background: #111111 !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-thumb-wrap { position: absolute !important; right: 14px !important; bottom: 12px !important; width: 44px !important; height: 64px !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16) !important; border: 1px solid rgba(15, 23, 42, 0.08) !important; } #wizard[data-flow="listing"] #mastercard-step-money .step2-choice-thumb { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } .btn-pulse, #wizard[data-flow="listing"] #mastercard-footer-step2 .step2-heartbeat { animation: heartbeat 2s infinite ease-in-out !important; background: #111111 !important; } /* Globaler Hintergrund fuer alle Mastercard-Container (Step 1/2/3) */ .mastercard-container, #mastercard-step-1, #mastercard-step-2, #mastercard-step-3, #mastercard-step-edit, #mastercard-step-money, #mastercard-step-live, #wizard[data-flow="listing"] .mastercard-step { background-color: #ffffff !important; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } /* Preview-Stempel ohne Box-Look */ .photo-preview-container { background-color: #ffffff !important; border: none !important; box-shadow: none !important; } #wizard[data-flow="listing"] #mastercard-step-money .photo-preview-container, #wizard[data-flow="listing"] #mastercard-step-live .photo-preview-container { opacity: 0.6 !important; filter: grayscale(40%) !important; border-bottom: 1px solid #ebebeb !important; padding-bottom: 15px !important; margin-bottom: 20px !important; } /* Nur Step-2-Kacheln heben sich sauber vom Weiss ab */ #mastercard-step-2 .service-tile-card, #mastercard-step-money .service-tile-card { background: #ffffff !important; border: 1px solid #ebebeb !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important; } body { background-color: #ffffff; }