/* ════════════════════════════════════════════════════════════════════ KONFIGURATOR CSS Light-Defaults: funktioniert eingebettet in die Hauptseite. Dark-Theme: aktiv nur wenn gesetzt (= standalone anfrage/index.htm). Magenta #E80868 bleibt in beiden Kontexten. ════════════════════════════════════════════════════════════════════ */ /* ── VARIABLEN: Light-Defaults ── */ :root { --c-bg: var(--bg-color, #ffffff); --c-surface: var(--card-bg, #ffffff); --c-surface2: var(--card-bg, #ffffff); --c-surface-deep:#f6f8f8; --c-border: var(--border-color, #e8e8e8); --c-text: var(--text-color, #324a4e); --c-text-muted: var(--secondary-color, #45565c); --c-white: var(--text-color, #324a4e); --c-cta: #E80868; --c-cta-hover: #c5065a; --c-cta-text: #ffffff; --c-btn-idle: var(--primary-color, #324a4e); --c-btn-border: var(--border-color, #e8e8e8); --c-progress-bg: rgba(50,74,78,0.15); --font-display: "Helvetica", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "Helvetica", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 6px; --radius-lg: 12px; --transition: 0.25s cubic-bezier(0.4,0,0.2,1); --shadow-cta: 0 0 40px rgba(232,8,104,0.4), 0 4px 20px rgba(0,0,0,0.5); } /* ── VARIABLEN: Dark-Override (nur standalone anfrage/index.htm) ── */ .anfrage-page { --c-bg: #141414; --c-surface: rgba(20,20,20,0.92); --c-surface2: rgba(30,30,30,0.85); --c-surface-deep:rgba(8,8,8,0.75); --c-border: rgba(255,255,255,0.09); --c-text: #f0f0f0; --c-text-muted: #a0a0a0; --c-white: #ffffff; --c-btn-idle: rgba(40,40,40,0.9); --c-btn-border: rgba(255,255,255,0.15); --c-progress-bg: rgba(80,80,80,0.4); } body.anfrage-page { background: var(--c-bg); color: var(--c-text); font-family: var(--font-body); line-height: 1.6; overflow-x: hidden; } /* ── VARIABLEN: Dark-Mode der Hauptseite (update.css .dark-mode) ── */ /* --c-bg, --c-surface, --c-border, --c-text werden automatisch über var(--bg-color) etc. von update.css übernommen. Nur hard-codierte Werte müssen hier explizit überschrieben werden. */ .dark-mode { /* Alle Konfigurator-Variablen explizit überschreiben – Verlässlicher als Vererbung über var(--card-bg) etc. */ --c-bg: #1a2223; --c-surface: #263438; --c-surface2: #2a3d42; --c-surface-deep: #1e2c30; --c-border: rgba(255,255,255,0.1); --c-text: #f0f0f0; --c-text-muted: #9ab0b3; --c-white: #ffffff; --c-btn-idle: var(--primary-color, #324a4e); --c-btn-border: rgba(255,255,255,0.15); --c-progress-bg: rgba(255,255,255,0.12); } .dark-mode #konfigurator .wk-time, .dark-mode #konfigurator .wk-sma, .dark-mode #konfigurator .wk-date { color-scheme: dark; } @keyframes vc-spin { to { transform: rotate(360deg); } } /* ── SKIP-LINK (nur standalone) ── */ .anfrage-page .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--c-cta); color: var(--c-cta-text); padding: 0.75rem 1.5rem; font-weight: 700; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; border-radius: var(--radius); z-index: 10000; transition: top 0.2s; } .anfrage-page .skip-link:focus { top: 1rem; } /* ════════════════════════════════════════════════════════════════════ STANDALONE-SEITE: Alles unter .anfrage-page (Hintergrundbild, Suchscheinwerfer, Hero, Buttons, Scroll-Hint) ════════════════════════════════════════════════════════════════════ */ .anfrage-page .site-bg { position: fixed; inset: 0; z-index: 0; background-image: url('hero.png'); background-size: cover; background-position: top center; background-repeat: no-repeat; } .anfrage-page .site-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(8,8,8,0.82) 0%, rgba(10,10,10,0.65) 50%, rgba(8,8,8,0.88) 100%); } #searchlight { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.6; } /* ── HERO FX ── */ .anfrage-page .hero-grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(232,8,104,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(232,8,104,0.055) 1px, transparent 1px); background-size: 60px 60px; animation: gridMove 22s linear infinite; } @keyframes gridMove { to { transform: translateY(60px); } } .anfrage-page .hero-spotlight { position: absolute; z-index: 1; width: 680px; height: 680px; background: radial-gradient(circle, rgba(232,8,104,0.08) 0%, transparent 68%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: pulse 5s ease-in-out infinite; } @keyframes pulse { 0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.5; } 50% { transform: translate(-50%,-50%) scale(1.2); opacity: 0.85; } } .anfrage-page .hero-scanlines { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(232,8,104,0.016) 3px, rgba(232,8,104,0.016) 4px); } .anfrage-page .hero-line { position: absolute; top: 0; right: 17%; z-index: 2; width: 1px; height: 100%; background: linear-gradient(to bottom, transparent, rgba(232,8,104,0.38), transparent); animation: lineFade 4s ease-in-out infinite; } @keyframes lineFade { 0%,100%{opacity:0.2;} 50%{opacity:0.7;} } /* ── HERO ── */ .anfrage-page .hero { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8rem 2rem 5rem; } .anfrage-page .hero-content { position: relative; z-index: 10; max-width: 900px; text-align: center; } .anfrage-page .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(232,8,104,0.1); border: 1px solid rgba(232,8,104,0.3); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 100px; margin-bottom: 2rem; animation: fadeInDown 0.8s ease both; } .anfrage-page .hero-badge::before { content: ''; width: 6px; height: 6px; background: var(--c-cta); border-radius: 50%; animation: blink 1.5s ease-in-out infinite; } @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.2;} } .anfrage-page .hero h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.5rem, 10vw, 8rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 1.5rem; color: #ffffff; text-shadow: 0 2px 30px rgba(0,0,0,0.7); animation: fadeInUp 0.8s 0.2s ease both; } .anfrage-page .hero h1 .line1 { display: block; color: #ffffff; } .anfrage-page .hero h1 .line2 { display: block; color: var(--c-cta); } .anfrage-page .hero h1 .line3 { display: block; color: rgba(240,240,240,0.45); font-weight: 300; } .anfrage-page .hero-sub { font-size: 1.12rem; color: #fff; max-width: 540px; margin: 0 auto 2.5rem; font-weight: 300; text-shadow: 0 1px 12px rgba(0,0,0,0.9); animation: fadeInUp 0.8s 0.4s ease both; } .anfrage-page .hero-cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; animation: fadeInUp 0.8s 0.6s ease both; } .anfrage-page .btn-primary { display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(40,40,40,0.9); color: #ffffff; border: 1px solid rgba(255,255,255,0.15); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 1rem 2.5rem; border-radius: var(--radius); transition: var(--transition); } .anfrage-page .btn-primary:hover, .anfrage-page .btn-primary:focus-visible { background: var(--c-cta); border-color: var(--c-cta); color: var(--c-cta-text); box-shadow: var(--shadow-cta); transform: translateY(-2px); } .anfrage-page .btn-primary:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 4px; } .anfrage-page .btn-secondary { display: inline-flex; align-items: center; gap: 0.6rem; background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.3); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; padding: 1rem 2rem; border-radius: var(--radius); transition: var(--transition); } .anfrage-page .btn-secondary:hover, .anfrage-page .btn-secondary:focus-visible { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); } .anfrage-page .btn-secondary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .anfrage-page .scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.38); font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; animation: fadeIn 1s 1.5s ease both; z-index: 10; } .anfrage-page .scroll-hint .arrow { width: 18px; height: 18px; border-right: 1px solid rgba(255,255,255,0.38); border-bottom: 1px solid rgba(255,255,255,0.38); transform: rotate(45deg); animation: scrollBounce 2s ease-in-out infinite; } @keyframes scrollBounce { 0%,100%{transform:rotate(45deg) translateY(0);} 50%{transform:rotate(45deg) translateY(6px);} } /* ════════════════════════════════════════════════════════════════════ TRUST BAR – beide Kontexte (Variablen passen sich an) ════════════════════════════════════════════════════════════════════ */ .trust-bar { position: relative; z-index: 10; background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 1.5rem 2rem; } .trust-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 3rem; flex-wrap: wrap; } .trust-item { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-display); font-size: 0.88rem; font-weight: 400; color: var(--c-text); transition: color 0.2s; } .trust-item:hover { color: var(--c-white); } .trust-item .ticon { width: 30px; height: 30px; background: rgba(232,8,104,0.08); border: 1px solid rgba(232,8,104,0.2); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-item .ticon svg { width: 14px; height: 14px; stroke: var(--c-cta); fill: none; stroke-width: 2.5; } .trust-item strong { color: var(--c-white); } /* ── TYPE-CARD ICONS: im Light-Mode sichtbar ── */ .type-icon svg { stroke: var(--c-cta); fill: none; } .type-card.selected .type-icon svg { stroke: var(--c-cta); } .dark-mode .type-icon svg, .anfrage-page .type-icon svg { stroke: #ffffff; } /* ════════════════════════════════════════════════════════════════════ KONFIGURATOR-SEKTION ════════════════════════════════════════════════════════════════════ */ #konfigurator { position: relative; z-index: 10; padding: 0rem 2rem 6rem; } #konfigurator .section-header { text-align: center; margin-bottom: 3rem; } #konfigurator .section-label { display: inline-block; font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-white); margin-bottom: 0.75rem; } #konfigurator .section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.1; color: var(--c-white); margin-bottom: 0.75rem; } #konfigurator .section-sub { color: var(--c-text-muted); font-size: 1rem; max-width: 600px; margin: 0 auto; } #konfigurator .section-sub a { color: var(--c-text-muted); text-decoration: underline; } .configurator { max-width: 960px; margin: 0 auto; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.08); } .progress-bar-wrap { background: var(--c-surface-deep); border-bottom: 1px solid var(--c-border); padding: 0.85rem 2rem 0; display: flex; flex-direction: column; gap: 0.75rem; } /* ── BREADCRUMB ── */ .breadcrumb-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 1.6rem; } .bc-back { display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text-muted); cursor: pointer; padding: 0.3rem 0.55rem; transition: var(--transition); flex-shrink: 0; } .bc-back:hover { border-color: rgba(232,8,104,0.45); color: var(--c-cta); } .bc-trail { display: flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; overflow: hidden; } .bc-sep { color: var(--c-text-muted); font-size: 0.75rem; flex-shrink: 0; } .bc-crumb { font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; white-space: nowrap; } .bc-done { background: none; border: none; cursor: pointer; padding: 0; color: var(--c-text-muted); text-decoration: none; transition: color 0.2s; } .bc-done:hover { color: var(--c-cta); } .bc-passive { color: var(--c-text-muted); } .progress-steps { display: flex; gap: 0.5rem; flex: 1; padding-bottom: 0.85rem; } .progress-step { height: 3px; flex: 1; background: var(--c-progress-bg); border-radius: 2px; transition: background 0.4s ease; position: relative; overflow: hidden; } .progress-step.active { background: var(--c-cta); } .progress-step.active::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent); animation: shimmer 1.5s infinite; } @keyframes shimmer { 0%{transform:translateX(-100%);} 100%{transform:translateX(100%);} } .progress-label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; color: var(--c-text-muted); white-space: nowrap; } .progress-label span { color: var(--c-cta); } .step-panel { display: none; animation: stepIn 0.3s ease both; } .step-panel.active { display: block; } @keyframes stepIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} } .step-content { padding: 2.5rem 2rem; } .step-question { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--c-white); margin-bottom: 0.4rem; } .step-hint { font-size: 0.9rem; color: var(--c-text-muted); margin-bottom: 2rem; } .type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; } .type-card { background: var(--c-surface2); border: 2px solid var(--c-border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s ease; } .type-card:hover, .type-card:focus-visible { border-color: rgba(232,8,104,0.45); transform: translateY(-2px); } .type-card:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 2px; } .type-card.selected { border-color: var(--c-cta); background: rgba(232,8,104,0.07); } .type-card.highlight { border-color: rgba(232,8,104,0.35); } .type-card.highlight:hover, .type-card.highlight:focus-visible { border-color: var(--c-cta); } .type-icon { font-size: 2.2rem; margin-bottom: 0.6rem; display: block; } .type-card-title { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--c-white); display: block; margin-bottom: 0.35rem; } .type-card-desc { font-size: 0.82rem; color: var(--c-text-muted); } #konfigurator .service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; margin-bottom: 2rem; } #konfigurator .service-card { background: var(--c-surface2); border: 2px solid var(--c-border); border-radius: var(--radius); padding: 1rem; text-align: left; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: flex-start; word-break: normal; overflow-wrap: anywhere; } #konfigurator .service-card:has(.service-desc) { white-space: normal; } #konfigurator .service-card:hover, #konfigurator .service-card:focus-visible { border-color: rgba(232,8,104,0.45); transform: translateY(-2px); } #konfigurator .service-card:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 2px; } #konfigurator .service-card.selected { border-color: var(--c-cta); background: rgba(232,8,104,0.07); } #konfigurator .service-card.highlight { border-color: rgba(232,8,104,0.3); } #konfigurator .service-name { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--c-white); line-height: 1.3; } #konfigurator .service-desc { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--c-text-muted); margin-top: 0.35rem; font-weight: 400; white-space: normal; word-break: normal; } .detail-section { background: var(--c-surface-deep); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; display: none; } .detail-section.visible { display: block; } .detail-title { font-family: var(--font-display); font-weight: 400; font-size: 0.88rem; color: var(--c-white); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .detail-title::before { content:''; width:4px; height:14px; background:var(--c-cta); border-radius:2px; } .radio-group, .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .radio-option, .checkbox-option { position: relative; } .radio-option input, .checkbox-option input { position: absolute; opacity: 0; width: 0; height: 0; } .radio-option label, .checkbox-option label { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--c-surface2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: all 0.15s ease; color: var(--c-text-muted); } .radio-option input:checked + label, .checkbox-option input:checked + label { background: rgba(232,8,104,0.1); border-color: var(--c-cta); color: var(--c-cta-text); } .radio-option label:hover, .checkbox-option label:hover { border-color: rgba(232,8,104,0.4); color: var(--c-white); } .radio-option input:focus-visible + label, .checkbox-option input:focus-visible + label { outline: 3px solid var(--c-cta); outline-offset: 2px; } .location-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.75rem; margin-bottom: 1.5rem; } .loc-card { background: var(--c-surface2); border: 2px solid var(--c-border); border-radius: var(--radius); padding: 1.25rem 0.75rem; text-align: center; cursor: pointer; transition: all 0.2s ease; } .loc-card:hover, .loc-card:focus-visible { border-color: rgba(232,8,104,0.45); } .loc-card:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 2px; } .loc-card.selected { border-color: var(--c-cta); background: rgba(232,8,104,0.07); } .loc-name { font-family: var(--font-display); font-weight: 400; font-size: 0.9rem; color: var(--c-white); } #konfigurator .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } #konfigurator .form-group { display: flex; flex-direction: column; gap: 0.4rem; } #konfigurator .form-group.full { grid-column: 1/-1; } #konfigurator .form-group label { font-family: var(--font-display); font-size: 0.8rem; font-weight: 400; letter-spacing: 0; color: var(--c-text); } #konfigurator #konfigurator .form-group label .req { color: var(--c-cta); } #konfigurator .form-group input, #konfigurator .form-group textarea { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); font-family: var(--font-body); font-size: 0.95rem; padding: 0.75rem 1rem; transition: border-color 0.2s; resize: vertical; } #konfigurator .form-group input:focus, #konfigurator .form-group textarea:focus { outline: none; border-color: var(--c-cta); box-shadow: 0 0 0 3px rgba(232,8,104,0.12); } #konfigurator .form-group input::placeholder, #konfigurator .form-group textarea::placeholder { color: var(--c-text-muted); opacity: 0.7; } #konfigurator .field-error { font-size: 0.8rem; color: #c0392b; display: none; margin-top: 0.2rem; } .anfrage-page #konfigurator .field-error { color: #ff6aaf; } #konfigurator .field-error.visible { display: block; } #konfigurator .form-message { padding: 0.75rem 1rem; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 1rem; display: none; } #konfigurator .form-message.visible { display: block; } #konfigurator .form-message.error { background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.3); color: #c0392b; } #konfigurator .form-message.success { background: rgba(232,8,104,0.08); border: 1px solid rgba(232,8,104,0.25); color: var(--c-cta); } .anfrage-page #konfigurator .form-message.error { background: rgba(255,59,0,0.1); border-color: rgba(255,59,0,0.3); color: #ff8a6a; } .anfrage-page #konfigurator .form-message.success { color: #ff6aaf; } .hp-field { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .privacy-check { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; padding: 1rem; background: var(--c-surface-deep); border-radius: var(--radius); border: 1px solid var(--c-border); } .privacy-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-cta); flex-shrink: 0; margin-top: 2px; cursor: pointer; } .privacy-check label { font-size: 0.82rem; color: var(--c-text-muted); line-height: 1.5; cursor: pointer; } .privacy-check a { color: inherit; text-underline-offset: 2px; } .step-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; background: var(--c-surface-deep); border-top: 1px solid var(--c-border); } .btn-back { background: transparent; border: 1px solid var(--c-border); color: var(--c-text-muted); font-family: var(--font-display); font-weight: 400; font-size: 0.9rem; padding: 0.7rem 1.5rem; border-radius: var(--radius); cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.4rem; } .btn-back:hover, .btn-back:focus-visible { border-color: rgba(232,8,104,0.45); color: var(--c-cta); } .btn-next { background: var(--c-btn-idle); border: 1px solid var(--c-btn-border); color: #ffffff; font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; padding: 0.8rem 2rem; border-radius: var(--radius); cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.5rem; } .btn-next:hover:not(:disabled), .btn-next:focus-visible:not(:disabled) { background: var(--c-cta); border-color: var(--c-cta); box-shadow: var(--shadow-cta); transform: translateY(-1px); } .btn-next:focus-visible { outline: 3px solid var(--c-cta); outline-offset: 3px; } .btn-next:disabled { opacity: 0.35; cursor: not-allowed; } .btn-next.loading { opacity: 0.7; cursor: wait; } #konfigurator .success-state { padding: 4rem 2rem; text-align: center; display: none; } #konfigurator .success-state.visible { display: block; } #konfigurator .success-icon { width: 76px; height: 76px; background: rgba(232,8,104,0.1); border: 2px solid var(--c-cta); border-radius: 50%; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; animation: successPop 0.5s cubic-bezier(0.175,0.885,0.32,1.275) both; } #konfigurator .success-icon svg { width: 32px; height: 32px; stroke: var(--c-cta); fill: none; stroke-width: 2.5; } @keyframes successPop { 0%{transform:scale(0);opacity:0;} 100%{transform:scale(1);opacity:1;} } #konfigurator .success-title { font-family: var(--font-display); font-weight: 400; font-size: 2rem; color: var(--c-white); margin-bottom: 0.75rem; } #konfigurator .success-text { color: var(--c-text-muted); font-size: 1rem; max-width: 400px; margin: 0 auto; } #konfigurator .success-time { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(232,8,104,0.08); border: 1px solid rgba(232,8,104,0.2); border-radius: var(--radius); padding: 0.6rem 1.2rem; font-family: var(--font-display); font-weight: 400; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--c-cta); margin-top: 1.5rem; } #konfigurator .success-time svg { width: 14px; height: 14px; stroke: var(--c-cta); fill: none; stroke-width: 2.5; } /* ── ANIMATIONS ── */ @keyframes fadeInDown { from{opacity:0;transform:translateY(-20px);} to{opacity:1;transform:translateY(0);} } @keyframes fadeInUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} } @keyframes fadeIn { from{opacity:0;} to{opacity:1;} } .reveal { opacity:0; transform:translateY(25px); transition:opacity 0.6s ease,transform 0.6s ease; } .reveal.visible { opacity:1; transform:translateY(0); } /* ── RESPONSIVE ── */ @media (max-width:768px) { /* Standalone Hero */ .anfrage-page .hero h1 { font-size: clamp(2.8rem,12vw,5rem); } .anfrage-page .hero { padding: 4.5rem 1.25rem 3rem; } .anfrage-page .hero-badge { font-size: 0.58rem; letter-spacing: 0.1em; white-space: nowrap; margin-bottom: 1rem; } .anfrage-page .btn-primary { font-size: 0.78rem; padding: 0.75rem 1.4rem; } .anfrage-page .btn-secondary{ font-size: 0.78rem; padding: 0.75rem 1.2rem; } .anfrage-page .scroll-hint { bottom: 1rem; } /* Konfigurator */ .trust-bar-inner { gap: 1.5rem; } .trust-item { font-size: 0.78rem; } .service-grid { grid-template-columns: 1fr; } .location-grid { grid-template-columns: 1fr 1fr; } .location-grid .loc-card:last-child { grid-column: 1/-1; } .form-grid { grid-template-columns: 1fr; } .step-content { padding: 1.5rem 1.25rem; } .step-nav { padding: 1.25rem; } .btn-back { font-size: 0.75rem; padding: 0.6rem 1rem; } .btn-next { font-size: 0.78rem; padding: 0.65rem 1.25rem; } .service-card { white-space: normal; min-width: 0; overflow-wrap: anywhere; max-width: none; } .service-name { font-size: 0.78rem; } .bc-trail { display: none; } .breadcrumb-nav { justify-content: flex-end; } .progress-bar-wrap { padding: 0.75rem 1.25rem 0; } } @media (max-width:480px) { .type-grid { grid-template-columns: 1fr; } .anfrage-page .hero-cta-group { flex-direction: column; align-items: center; } .anfrage-page .btn-primary, .anfrage-page .btn-secondary { width: 100%; justify-content: center; } .location-grid { grid-template-columns: 1fr; } .location-grid .loc-card:last-child { grid-column: auto; } } @media (forced-colors:active) { .btn-next { forced-color-adjust:none; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } } /* ════════════════════════════════════════════════════════════════════ WOCHENKALENDER ════════════════════════════════════════════════════════════════════ */ .wochen-kalender { margin-top: 1rem; } .wk-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; } .wk-label { font-size: 0.82rem; color: var(--c-text-muted); margin-right: 0.25rem; } .wk-tag-btn { display: inline-flex; align-items: center; cursor: pointer; } .wk-tag-btn input { display: none; } .wk-tag-btn span { display: inline-block; padding: 0.3rem 0.55rem; border: 1px solid var(--c-border); border-radius: 4px; font-size: 0.78rem; color: var(--c-text-muted); background: var(--c-bg); transition: all 0.15s; user-select: none; } .wk-tag-btn input:checked + span { border-color: var(--c-cta); background: rgba(232,8,104,0.12); color: var(--c-white); } .wk-tag-btn:hover span { border-color: rgba(232,8,104,0.4); } .wk-zeilen { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; } .wk-zeile { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: rgba(232,8,104,0.05); border: 1px solid rgba(232,8,104,0.2); border-radius: 6px; padding: 0.45rem 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .wk-zeile:hover { border-color: rgba(232,8,104,0.5); background: rgba(232,8,104,0.09); } .wk-zeile-tage { font-size: 0.82rem; color: var(--c-text-muted); font-weight: 400; min-width: 4rem; flex-shrink: 0; } .wk-zeile-inputs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; flex: 1; } .wk-zeile-detail { font-size: 0.82rem; color: var(--c-text-muted); flex: 1; } .wk-input-wrap { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--c-text-muted); } .wk-time, .wk-sma { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; color: var(--c-text); font-size: 0.82rem; padding: 0.25rem 0.4rem; outline: none; transition: border-color 0.15s; } .wk-time:focus, .wk-sma:focus { border-color: var(--c-cta); } .wk-sma { cursor: pointer; } .wk-del-btn { background: none; border: none; cursor: pointer; padding: 0.2rem; color: var(--c-text-muted); border-radius: 4px; line-height: 1; transition: color 0.15s; margin-left: auto; flex-shrink: 0; } .wk-del-btn:hover { color: var(--c-cta); } .wk-add-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1px dashed rgba(232,8,104,0.35); color: var(--c-white); border-radius: 6px; padding: 0.4rem 0.8rem; font-size: 0.85rem; font-weight: 400; cursor: pointer; transition: all 0.15s; } .wk-add-btn:hover { border-color: var(--c-cta); color: var(--c-cta); background: rgba(232,8,104,0.05); } @media (max-width:600px) { .wk-zeile { flex-direction: column; align-items: flex-start; } .wk-del-btn { margin-left: 0; } } .wk-zeitraum { margin-bottom: 0.75rem; } .wk-zeitraum-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .wk-date { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 4px; color: var(--c-text); font-size: 0.82rem; padding: 0.25rem 0.4rem; outline: none; transition: border-color 0.15s; color-scheme: light; } .anfrage-page .wk-time, .anfrage-page .wk-sma, .anfrage-page .wk-date { color-scheme: dark; } .wk-date:focus { border-color: var(--c-cta); } .wk-date:disabled { opacity: 0.35; cursor: not-allowed; } .wk-widerruf-wrap, .wk-vereinbarung-wrap { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--c-text-muted); cursor: pointer; } .wk-widerruf-wrap input, .wk-vereinbarung-wrap input { cursor: pointer; accent-color: var(--c-cta); } .wk-divider { height: 1px; background: var(--c-border); margin: 0.85rem 0; } .wk-hinweis { font-size: 0.78rem; color: var(--c-text-muted); margin-bottom: 0.6rem; } .wk-neue-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; background: var(--c-surface-deep); border: 1px solid var(--c-border); border-radius: 6px; padding: 0.6rem 0.75rem; margin-bottom: 0.6rem; transition: box-shadow 0.2s, border-color 0.2s; } .wk-neue-zeile.wk-edit-active { border-color: var(--c-cta); box-shadow: 0 0 0 2px rgba(232,8,104,0.2); } .wk-edit-icon { color: var(--c-text-muted); flex-shrink: 0; transition: color 0.15s; } .wk-zeile:hover .wk-edit-icon { color: var(--c-cta); } .wk-shake { animation: wk-shake 0.35s ease; } @keyframes wk-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-4px)} 60%{transform:translateX(4px)} } @media(max-width:600px) { .wk-zeitraum-row { flex-direction: column; align-items: flex-start; } .wk-neue-zeile { flex-direction: column; align-items: flex-start; } } /* ── 3-Karten-Grid ── */ .type-grid-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 600px) { .type-grid-3 { grid-template-columns: 1fr; } } /* ── Service-Info-Link ── */ #konfigurator .service-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; color: var(--c-text-muted); text-decoration: none; margin-top: 0.15rem; transition: color 0.18s; pointer-events: auto; } #konfigurator .service-link:hover { color: var(--c-cta); } /* ── Kalender Inline ── */ .wk-neue-zeile-inline { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .wk-tag-row-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0; } /* ── Nach Absprache ── */ .wk-absprache-wrap { margin-bottom: 0.75rem; } .wk-absprache-label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.85rem; color: var(--c-text-muted); } .wk-absprache-label input { width: auto; margin: 0; cursor: pointer; accent-color: var(--c-cta); } /* ── Upload Zone ── */ .vc-upload-zone { border: 2px dashed rgba(232,8,104,0.35); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: border-color 0.25s, background 0.25s; background: rgba(232,8,104,0.02); } .vc-upload-zone:hover, .vc-upload-zone.vc-drag { border-color: var(--c-cta); background: rgba(232,8,104,0.06); } .vc-upload-icon { width: 44px; height: 44px; margin: 0 auto 0.85rem; background: rgba(232,8,104,0.1); border: 1px solid rgba(232,8,104,0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--c-cta); } .vc-upload-title { font-family: var(--font-display); font-weight: 400; font-size: 1rem; margin-bottom: 0.3rem; color: var(--c-white); } .vc-upload-hint { font-size: 0.8rem; color: var(--c-text-muted); }