/* ============================================================ FRAG LORENZ – Gemeinsames Stylesheet (Multi-Page) Privat-Modus ist Standard; Gewerbe-Seiten haben ============================================================ */ /* --- SCHRIFTART --- */ @font-face { font-family: 'Outfit'; src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; } /* --- CSS-VARIABLEN (Privat ist Standard) --- */ :root { --bg-body: #e6f2ff; --bg-card: #ffffff; --primary: #0891b2; --primary-gradient: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%); --hero-gradient: linear-gradient(to bottom, #dbeafe 0%, #e6f2ff 100%); --text-main: #1e293b; --text-muted: #475569; --accent-bg: #dbeafe; --radius: 16px; --shadow: 0 20px 40px -15px rgba(8, 145, 178, 0.15); --gold: #f59e0b; --green: #10b981; --header-height: 96px; } /* --- BUSINESS MODE --- */ body.business-mode { --bg-body: #0f172a; --bg-card: #1e293b; --primary: #38bdf8; --primary-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%); --hero-gradient: linear-gradient(to bottom, #020617 0%, #0f172a 100%); --text-main: #f1f5f9; --text-muted: #94a3b8; --accent-bg: #1e293b; --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } /* --- GLOBALE STILE --- */ body { font-family: 'Outfit', sans-serif; margin: 0; color: var(--text-main); line-height: 1.7; background-color: var(--bg-body); font-size: 18px; overflow-x: hidden; padding-top: var(--header-height); } .text-gradient { background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* --- SVG ICON HELPERS --- */ .svg-icon { width: 1.2em; height: 1.2em; vertical-align: middle; display: inline-block; } .icon-box img { width: 22px; height: 22px; } /* --- ICON FARBE --- */ .icon-box img, .info-icon img, .floating-call-btn img { filter: none; } body.business-mode .icon-box img, body.business-mode .info-icon img, body.business-mode .floating-call-btn img, body.business-mode .price-card img, body.business-mode .price-list li::before, body.business-mode .svg-icon { filter: brightness(0) invert(1); } /* --- HEADER & NAVIGATION --- */ header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 10px 0; transition: transform 0.3s ease-in-out, background 0.4s; min-height: 72px; height: auto; box-sizing: border-box; display: flex; align-items: center; } header.header-hidden { transform: translateY(-100%); } body.business-mode header { background: rgba(15, 23, 42, 0.95); border-bottom: 1px solid rgba(255,255,255,0.1); } .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 100%; min-height: var(--header-height); column-gap: 30px; } .logo { font-weight: 800; font-size: 1.8rem; color: #0891b2 !important; cursor: pointer; letter-spacing: -0.5px; display: flex; align-items: center; gap: 14px; padding: 0; line-height: 1; z-index: 1001; justify-self: center; text-decoration: none; } .logo img { height: 45px; width: auto; display: block; } .nav-right { display: flex; align-items: center; gap: 26px; justify-self: end; } /* Der Privat/Gewerbe-Switch */ .mode-switch { background: #e2e8f0; padding: 4px; border-radius: 50px; display: flex; z-index: 1001; } body.business-mode .mode-switch { background: #334155; } .switch-btn { border: none; padding: 6px 14px; border-radius: 40px; cursor: pointer; font-size: 0.85rem; font-weight: 700; font-family: inherit; background: transparent; color: #64748b; transition: all 0.3s; } body.business-mode .switch-btn { color: #cbd5e1; } .switch-btn.active { background: white; color: #0891b2 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } body.business-mode .switch-btn.active { background: #0f172a; color: #38bdf8 !important; } /* Hamburger Button */ .hamburger-btn { display: none; align-items: center; gap: 8px; cursor: pointer; color: var(--text-muted); font-weight: 600; font-size: 1rem; z-index: 1001; flex-direction: column; line-height: 1; } .hamburger-label { font-size: 0.85rem; margin-top: -2px; } .hamburger-icon img { width: 28px; height: 28px; vertical-align: middle; } /* Navigation Links (a und button einheitlich) */ nav { display: flex; gap: 5px; } nav a, nav button { background: none; border: none; color: var(--text-muted); font-weight: 600; font-size: 1.05rem; cursor: pointer; padding: 8px 18px; border-radius: 50px; transition: all 0.2s ease; font-family: inherit; white-space: nowrap; line-height: 1; text-decoration: none; display: inline-block; } nav a:hover, nav button:hover { color: var(--primary); background: rgba(125, 211, 252, 0.1); } nav a.active-nav, nav button.active-nav { background: var(--bg-card); color: #0891b2 !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05); } nav a.nav-highlight { background: var(--primary); color: #fff !important; font-weight: 700; border-radius: 8px; padding: 6px 14px; box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35); transition: background 0.2s, box-shadow 0.2s, transform 0.15s; } nav a.nav-highlight:hover { background: #0284c7; color: #fff !important; box-shadow: 0 4px 16px rgba(14, 165, 233, 0.5); transform: translateY(-1px); } /* --- MEDIA QUERIES NAVIGATION --- */ @media (max-width: 992px) { :root { --header-height: 80px; } .hamburger-btn { display: flex; margin-left: auto; } .nav-right { justify-content: flex-end; width: 100%; } nav { display: none; position: absolute; top: var(--header-height); left: 0; width: 100%; background: var(--bg-card); flex-direction: column; padding: 20px 0; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.05); } body.business-mode nav { border-bottom: 1px solid rgba(255,255,255,0.1); } nav.nav-open { display: flex; animation: slideDownNav 0.3s ease; } nav a, nav button { width: 100%; text-align: center; padding: 15px; border-radius: 0; font-size: 1.1rem; } @keyframes slideDownNav { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .logo { font-size: 1.4rem; } .logo img { height: 35px; } } /* --- PAGE CONTENT ANIMATION --- */ .page-content { animation: slideUp 0.4s ease-out; padding-bottom: 80px; } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* --- LAYOUT --- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .grid { display: grid; gap: 25px; grid-template-columns: 1fr; } @media (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 992px) { .grid { grid-template-columns: 1fr 1fr 1fr; } } .grid-2 { display: grid; gap: 25px; grid-template-columns: 1fr; } @media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } } .abo-info-grid { align-items: stretch; } .abo-info-grid .info-box { margin-bottom: 0; height: 100%; } /* --- HERO --- */ .hero-wrapper { background: var(--hero-gradient); margin-bottom: 40px; overflow: hidden; position: relative; padding-bottom: 40px; } .hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 60px 20px 40px 20px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; } body.business-mode .hero-split { grid-template-columns: 1fr; text-align: center; max-width: 900px; padding: 70px 20px 50px 20px; } body.business-mode .hero-split .hero-text p { margin-left: auto; margin-right: auto; max-width: 780px; } body.business-mode .hero-split .hero-text a.cta-big, body.business-mode .hero-split .hero-text button.cta-big { margin-left: auto; margin-right: auto; display: inline-block; } body.business-mode .hero-split .hero-image { display: none; } .hero-text h1 { font-size: 3.8rem; font-weight: 900; margin-bottom: 20px; line-height: 1.15; color: var(--text-main); letter-spacing: -1.5px; } .hero-text p { color: var(--text-muted); font-size: 1.15rem; margin-bottom: 35px; line-height: 1.6; } .hero-image img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow); transform: rotate(1deg); transition: transform 0.4s ease; } .hero-image img:hover { animation: float 6s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px) rotate(1deg); } 50% { transform: translateY(-15px) rotate(1deg); } 100% { transform: translateY(0px) rotate(1deg); } } @keyframes float-straight { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .hero-centered { text-align: center; padding: 60px 20px 60px 20px; max-width: 1000px; margin: 0 auto; position: relative; z-index: 1; } .hero-centered h1 { font-size: 4.2rem; font-weight: 900; margin-bottom: 10px; line-height: 1.1; letter-spacing: -1.5px; color: var(--text-main); } .hero-centered p { font-size: 1.5rem; color: var(--text-muted); max-width: 800px; margin: 0 auto; } @media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; text-align: center; } .hero-image { margin-top: 30px; } .hero-image img { width: 80%; transform: rotate(0); } } /* --- CARDS --- */ .card { background: var(--bg-card); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.05); height: 100%; box-sizing: border-box; transition: transform 0.2s; display: flex; flex-direction: column; } body.business-mode .card { border: 1px solid rgba(255,255,255,0.1); } .card:hover { transform: translateY(-5px); } .card h3 { margin-top: 0; font-size: 1.3rem; display: flex; align-items: center; gap: 10px; color: var(--text-main); } .card p { color: var(--text-muted); } .clickable-card { cursor: pointer; position: relative; padding-bottom: 50px; } .clickable-card:hover { border-color: var(--primary); } .clickable-card::after { content: 'Mehr Infos →'; position: absolute; bottom: 20px; right: 20px; font-size: 0.85rem; color: var(--primary); font-weight: bold; opacity: 0; transition: opacity 0.2s; } .clickable-card:hover::after { opacity: 1; } .icon-box { background: var(--accent-bg); color: var(--primary); width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.1rem; flex-shrink: 0; } /* --- PREISE --- */ .price-card { background: var(--bg-card); padding: 40px; border-radius: var(--radius); text-align: center; border: 1px solid rgba(0,0,0,0.05); position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; } body.business-mode .price-card { border: 1px solid rgba(255,255,255,0.1); } .price-card.abo { border: 2px solid var(--gold); background: #fffbeb; } body.business-mode .price-card.abo { background: rgba(245, 158, 11, 0.1); border-color: var(--gold); } body.business-mode .price-card.abo-business { border: 2px solid var(--primary); background: rgba(56, 189, 248, 0.1); } .price-tag { font-size: 3.5rem; font-weight: 800; color: var(--primary); margin: 10px 0; } .price-list { text-align: left; list-style: none; padding: 0; margin-top: 30px; } .price-list li { padding-left: 30px; position: relative; margin-bottom: 12px; color: var(--text-muted); } .price-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background-image: url('icons/check-line.svg'); background-repeat: no-repeat; background-position: center; background-size: contain; } body.business-mode .price-list li::before { filter: brightness(0) invert(1); } /* --- INFO BOXEN --- */ .info-box { padding: 18px; border-radius: 12px; margin-bottom: 30px; display: flex; align-items: center; gap: 15px; background: var(--bg-card); border: 1px solid rgba(0,0,0,0.05); box-sizing: border-box; } .info-box .info-icon img { width: 28px; height: 28px; } .info-box h3 { font-size: 1.35rem; margin-bottom: 18px; } .info-box ol { margin: 0; padding-left: 20px; } .info-box li { margin-bottom: 16px; line-height: 1.65; font-size: 1.22rem; color: var(--text-main); } .info-box div > div { font-size: 1.22rem; line-height: 1.65; color: var(--text-muted); } .info-box li:last-child { margin-bottom: 0; } .info-box strong { color: var(--text-main); } @media (max-width: 520px) { .info-box { padding: 16px; gap: 12px; } .info-box h3 { font-size: 1.2rem; } .info-box li { font-size: 1.12rem; margin-bottom: 14px; } .info-box div > div { font-size: 1.12rem; } .info-box ol { padding-left: 18px; } } @media (max-width: 600px) { .info-box { flex-direction: column; text-align: center; } } .tax-tip { background-color: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } .gift-tip { background-color: #fffbeb; border: 1px solid #fcd34d; color: #92400e; margin-top: 30px; justify-content: center; text-align: center; padding: 20px; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.1); } /* --- TABELLEN --- */ table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 20px; color: var(--text-muted); } th, td { padding: 20px; border-bottom: 1px solid rgba(0,0,0,0.05); text-align: left; } th { background: var(--accent-bg); color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px; } body.business-mode td { border-bottom: 1px solid rgba(255,255,255,0.1); } /* --- FAQ --- */ details { background: var(--bg-card); border-radius: 12px; margin-bottom: 15px; border: 1px solid rgba(0,0,0,0.05); overflow: hidden; } body.business-mode details { border: 1px solid rgba(255,255,255,0.1); } summary { padding: 20px; font-weight: bold; cursor: pointer; list-style: none; position: relative; padding-right: 50px; color: var(--text-main); } summary::-webkit-details-marker { display: none; } summary:hover { background-color: var(--accent-bg); color: var(--primary); } summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.5rem; font-weight: bold; } details[open] summary::after { content: '-'; } details[open] summary { border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--primary); } .faq-content { padding: 20px; color: var(--text-muted); line-height: 1.6; background-color: var(--bg-card); } /* --- KONTAKT --- */ .contact-box { background: var(--bg-card); padding: 40px; border-radius: var(--radius); box-shadow: var(--shadow); } @media (max-width: 600px) { .contact-box { padding: 20px; } } .form-input { width: 100%; padding: 15px; border: 2px solid rgba(0,0,0,0.1); border-radius: 12px; box-sizing: border-box; font-size: 1rem; background: rgba(0,0,0,0.02); margin-bottom: 20px; color: var(--text-main); } /* --- BUTTONS & LINKS --- */ .cta-big { background: var(--primary-gradient); color: white; border: none; padding: 15px 35px; border-radius: 50px; font-size: 1.1rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: all 0.2s ease; max-width: 100%; text-decoration: none; display: inline-block; font-family: inherit; } .cta-big:hover { transform: translateY(-2px); filter: brightness(1.1); } .separator { display: flex; align-items: center; text-align: center; margin: 25px 0; color: var(--text-muted); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .separator::before, .separator::after { content: ''; flex: 1; border-bottom: 1px solid rgba(0,0,0,0.1); } body.business-mode .separator::before, body.business-mode .separator::after { border-bottom: 1px solid rgba(255,255,255,0.2); } .separator::before { margin-right: 15px; } .separator::after { margin-left: 15px; } /* --- BILD-TEXT SEKTION --- */ .image-text-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 80px; } .image-text-img img { width: 100%; border-radius: 20px; box-shadow: var(--shadow); transition: transform 0.4s ease; } .image-text-img img:hover { animation: float-straight 6s ease-in-out infinite; } @media (max-width: 768px) { .image-text-section { grid-template-columns: 1fr; } .image-text-img { order: -1; } } /* --- FOOTER --- */ footer { background: #020617; color: #94a3b8; text-align: center; padding: 40px 20px; margin-top: 60px; border-top: 1px solid rgba(255,255,255,0.1); } footer a { color: #cbd5e1; text-decoration: none; margin: 0 10px; } footer a:hover { color: var(--primary); text-decoration: underline; } /* --- FLOATING CALL BUTTON --- */ .floating-call-btn { position: fixed; bottom: 30px; right: 30px; background-color: var(--green); color: white; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4); z-index: 9999; font-size: 32px; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .floating-call-btn:hover { transform: scale(1.15); background-color: #059669; } .floating-call-btn img { width: 32px; height: 32px; filter: invert(1); } /* --- SLIDER (Testimonials) --- */ .slider-viewport { overflow: hidden; position: relative; width: 100%; padding: 0 40px; box-sizing: border-box; } .slider-track { display: flex; width: 100%; will-change: transform; } .testimonial-slide { min-width: 50%; flex: 0 0 50%; box-sizing: border-box; padding: 10px; } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.7); border: 1px solid #e2e8f0; color: var(--primary); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.1); font-size: 1.2rem; user-select: none; } .slider-arrow:hover { background: var(--primary); color: white; border-color: var(--primary); } .arrow-prev { left: 5px; } .arrow-next { right: 5px; } @media (max-width: 768px) { .testimonial-slide { min-width: 100%; flex: 0 0 100%; } .slider-viewport { padding: 0 10px; } .arrow-prev { left: 0; } .arrow-next { right: 0; } } /* --- MODAL --- */ .modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(15, 23, 42, 0.8); backdrop-filter: blur(5px); overflow: auto; } .modal-content { background-color: var(--bg-card); margin: 15% auto; padding: 30px; border-radius: var(--radius); width: 85%; max-width: 600px; position: relative; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } .close-btn { position: absolute; top: 15px; right: 20px; color: #94a3b8; font-size: 28px; font-weight: bold; cursor: pointer; transition: color 0.2s; } .close-btn:hover { color: var(--text-main); } .modal-title { font-size: 1.5rem; color: var(--primary); margin-top: 0; display: flex; align-items: center; gap: 15px; padding-right: 30px; } .modal-text { font-size: 1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 30px; } /* --- EINSATZGEBIET --- */ .service-area-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; } .city-tag { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.05); padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; color: var(--text-muted); transition: all 0.2s; cursor: default; } body.business-mode .city-tag { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #94a3b8; } .city-tag:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); } /* --- MOBILE ANPASSUNGEN --- */ @media (max-width: 768px) { body { font-size: 16px; } .container { padding: 0 15px; } .hero-split { padding: 30px 15px; gap: 30px; text-align: center; } .hero-text h1 { font-size: 2.4rem; margin-bottom: 15px; } .hero-text p { font-size: 1rem; margin-bottom: 25px; } .hero-centered { padding: 40px 15px; } .hero-centered h1 { font-size: clamp(2.0rem, 5.8vw, 2.6rem); text-wrap: balance; } .hero-centered p { font-size: 1.1rem; } .mode-switch { transform: scale(0.9); } .grid { gap: 15px; } .card { padding: 20px; } .price-card { padding: 25px 15px; } .price-tag { font-size: 2.8rem; } .floating-call-btn { bottom: 20px; right: 20px; width: 55px; height: 55px; } .floating-call-btn img { width: 26px; height: 26px; } .image-text-section { gap: 30px; margin-bottom: 50px; } }