/* ====================================================================== DATEI: style.css – Haupt-Stylesheet der gesamten Website ====================================================================== Struktur dieser Datei (Suche nach den Abschnitts-Kommentaren): 1. :root – CSS-Variablen (Farben, Schriften, Abstände) → Hauptfarben hier ändern! 2. Reset/Base – Grundlegende Browser-Normalisierung 3. Barrierefreiheit – Skip-Link, Focus-Stile 4. Typografie – Überschriften, Texte, Links 5. Layout – Container, Grid, Flex-Helfer 6. Navbar – Kopfzeile + Navigation 7. Hero – Großes Einstiegsbanner 8. Sektionen – USP-Leiste, Karten, Services ... 9. Footer – Fußzeile 10. Admin-Stile – Bearbeitungsleiste, Inline-Edit 11. Dark Mode – Dunkel-Theme über data-theme="dark" 12. Media Queries – Responsive Breakpoints (768px, 480px ...) FARBEN ÄNDERN: In :root die Variablen --primary, --dark, --accent anpassen. SCHRIFT ÄNDERN: --font in :root, Font-URL im von header.php. ====================================================================== */ /* ──────────────────────────────────────────────── Elektro Günther – Haupt-Stylesheet ──────────────────────────────────────────────── */ :root { --primary: #b91c1c; --primary-dark: #991b1b; --dark: #1c0f0f; --dark2: #0e0808; --light: #fdf2f2; --text: #334155; --text-light: #64748b; --white: #ffffff; --border: #e8d8d8; --success: #16a34a; --error: #dc2626; --transition: all 0.3s ease; --radius: 8px; --shadow: 0 4px 6px -1px rgba(0,0,0,0.1); --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.15); } /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 120%; overflow-x: hidden; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text); background: var(--white); animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); } img { max-width: 100%; height: auto; display: block; } /* ── Accessibility ───────────────────────────────────── */ /* Skip-to-main-content Link */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 99999; } .skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; padding: 12px 22px; background: var(--primary); color: #fff; font-weight: 700; font-size: 1rem; border-radius: var(--radius); text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); } /* Globale Fokus-Indikatoren (tastaturgesteuert, nicht bei Mausklick) */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 3px; } /* Spezifischere Fokus-Indikatoren */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible, .filter-btn:focus-visible, .gallery-item:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; } .nav-links li a:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; color: var(--primary); background: rgba(185,28,28,0.12); } /* Formfelder: kein Outline – dafür sichtbarer Rand + Schatten */ .form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(185,28,28,0.25); } /* Versteckt für Screenreader sichtbare Elemente ohne visuelles Sichtbarkeit */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } ul { list-style: none; } /* Layout */ .container { width: 90%; max-width: 1200px; margin: 0 auto; } .section-padding { padding: 80px 0; } .bg-light { background-color: var(--light); } .text-center { text-align: center; } .subtitle { max-width: 700px; margin: -20px auto 40px; font-size: 1.1rem; color: var(--text-light); } .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .section-title-gap { margin-top: 60px; } .page-content { min-height: calc(100vh - 160px); padding-top: 80px; } /* Section Title */ .section-title { text-align: center; font-size: 2.2rem; margin-bottom: 40px; color: var(--dark); } .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--primary); margin: 10px auto 0; border-radius: 2px; } /* Buttons */ .btn { display: inline-block; padding: 12px 28px; background: var(--primary); color: var(--white); font-weight: 700; border-radius: var(--radius); border: 2px solid var(--primary); cursor: pointer; transition: var(--transition); font-size: 1rem; text-decoration: none; } .btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--white); } .btn-outline { background: transparent; color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); } .btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); } .btn-outline-light:hover { background: var(--white); color: var(--dark); } .btn-large { padding: 15px 35px; font-size: 1.05rem; } /* Header / Nav */ header { background: #2e1a1a; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0 2px 15px rgba(0,0,0,0.25); } .navbar { display: flex; justify-content: flex-start; align-items: center; padding: 16px 0; gap: 12px; } .logo { flex-shrink: 0; display: flex; align-items: center; } .logo a { color: var(--white); font-size: 1.4rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; line-height: 1; } .logo a i { color: var(--primary); margin-right: 6px; } .site-logo-img { height: 50px; width: auto; display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(255,255,255,0.12)); } .site-logo-text-fallback { display: inline-flex; align-items: center; gap: 6px; } @media (max-width: 480px) { .site-logo-img { height: 38px; } } .nav-links { display: flex; list-style: none; flex: 1; justify-content: center; gap: 2px; } .nav-links li a { color: #cbd5e1; padding: 7px 9px; font-weight: 500; font-size: 0.84rem; transition: var(--transition); border-radius: 4px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-width: 52px; } .nav-links li a:hover, .nav-links li a.active { color: var(--primary); background: rgba(185,28,28,0.10); } .burger { display: none; cursor: pointer; } .burger span { width: 25px; height: 3px; background: var(--white); border-radius: 2px; display: block; transition: var(--transition); } /* Hero */ .hero { background: linear-gradient(135deg,rgba(15,23,42,0.92) 0%,rgba(30,41,59,0.88) 100%), url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?auto=format&fit=crop&w=1400&q=80') no-repeat center/cover; min-height: 80vh; display: flex; align-items: center; color: var(--white); } .hero-inner { text-align: center; } .hero-badge { display: inline-block; background: rgba(185,28,28,0.15); border: 1px solid var(--primary); color: var(--primary); padding: 6px 18px; border-radius: 20px; font-size: 0.9rem; margin-bottom: 20px; } .hero h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.2; } .hero p { font-size: 1.25rem; color: #cbd5e1; margin-bottom: 35px; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* USP Bar */ .usp-bar { background: var(--primary); padding: 18px 0; } .usp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; } .usp-item { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 600; font-size: 0.9rem; } /* Page Hero */ .page-hero { background: linear-gradient(135deg,var(--dark2) 0%,var(--dark) 100%); padding: 60px 0 50px; color: var(--white); text-align: center; } .page-hero h1 { font-size: 2.5rem; margin-bottom: 12px; } .page-hero h1 i { color: var(--primary); margin-right: 10px; } .page-hero p { font-size: 1.1rem; color: #94a3b8; max-width: 600px; margin: 0 auto; } /* Grids */ .grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 28px; } .grid-2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(420px,1fr)); gap: 40px; } /* Cards */ .card { background: var(--white); padding: 32px 28px; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; transition: var(--transition); border-top: 4px solid transparent; } .card:hover { transform: translateY(-6px); border-top-color: var(--primary); box-shadow: var(--shadow-lg); } .card i { font-size: 2.8rem; color: var(--primary); margin-bottom: 18px; } .card h3 { margin-bottom: 12px; color: var(--dark); font-size: 1.15rem; } .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 0.9rem; font-weight: 600; margin-top: 12px; } /* Info Boxes */ .info-box { background: var(--white); padding: 30px; border-radius: var(--radius); box-shadow: var(--shadow); } .info-box h3 { margin-bottom: 15px; color: var(--dark); } .info-box h3 i { color: var(--primary); margin-right: 8px; } .list-style li { padding: 6px 0; border-bottom: 1px solid var(--border); } .list-style li::before { content: '✓ '; color: var(--primary); font-weight: 700; } /* Service Detail */ .service-detail { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: start; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px; } .service-detail.reverse { direction: rtl; } .service-detail.reverse > * { direction: ltr; } .service-detail-icon { font-size: 4rem; color: var(--primary); width: 80px; text-align: center; padding-top: 8px; } .service-detail-text h2 { font-size: 1.8rem; color: var(--dark); margin-bottom: 15px; } /* CTA */ .bg-dark-section { background: var(--dark); color: var(--white); } .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .cta-inner h2 { font-size: 1.8rem; margin-bottom: 12px; } .cta-inner p { color: #94a3b8; max-width: 550px; } .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } /* Stats */ .stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .stat-item { text-align: center; padding: 30px; border: 1px solid var(--border); border-radius: var(--radius); } .stat-number { display: block; font-size: 2.8rem; font-weight: 800; color: var(--primary); } .stat-label { font-size: 0.9rem; color: var(--text-light); } /* Contact */ .contact-info h3 { font-size: 1.4rem; color: var(--dark); margin-bottom: 20px; } .contact-detail { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; } .contact-detail i { color: var(--primary); margin-top: 3px; width: 18px; flex-shrink: 0; } .map-placeholder { margin-top: 30px; background: var(--light); border: 2px dashed var(--border); border-radius: var(--radius); height: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); gap: 8px; } .map-placeholder i { font-size: 2rem; color: var(--primary); } /* Forms */ .form-group { margin-bottom: 18px; } .form-group label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--dark); font-size: 0.95rem; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; font-family: inherit; color: var(--text); background: var(--white); transition: var(--transition); } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(185,28,28,0.25); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-row .full-width { grid-column: 1 / -1; } .required-star { color: var(--error); } .radio-group { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 8px; } .radio-group label { display: flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; } .checkbox-group .checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; } .checkbox-group input[type="checkbox"] { width: auto; margin-top: 3px; cursor: pointer; } /* Antrag Form */ .form-intro { background: var(--light); border-left: 4px solid var(--primary); padding: 14px 20px; margin-bottom: 30px; border-radius: 0 var(--radius) var(--radius) 0; } .antrag-form .form-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px; margin-bottom: 24px; box-shadow: var(--shadow); } .antrag-form .form-section h3 { font-size: 1.2rem; color: var(--dark); margin-bottom: 22px; display: flex; align-items: center; gap: 12px; } .form-step { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: var(--primary); color: var(--dark); font-weight: 800; border-radius: 50%; font-size: 0.9rem; flex-shrink: 0; } .contact-form { display: flex; flex-direction: column; } /* Preise */ .price-table-wrap { overflow-x: auto; } .price-table { width: 100%; border-collapse: collapse; } .price-table th, .price-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); } .price-table th { background: var(--dark); color: var(--white); font-weight: 600; } .price-table tr:hover td { background: var(--light); } .price-col { color: var(--primary); font-weight: 700; font-size: 1.05rem; white-space: nowrap; } .price-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .price-card { background: var(--white); border: 2px solid var(--border); border-radius: var(--radius); padding: 32px 28px; position: relative; transition: var(--transition); } .price-card:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); } .price-card.featured { border-color: var(--primary); } .price-card-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--dark); font-size: 0.8rem; font-weight: 700; padding: 3px 14px; border-radius: 12px; } .price-card-header { text-align: center; margin-bottom: 24px; } .price-card-header i { font-size: 2.5rem; color: var(--primary); margin-bottom: 12px; display: block; } .price-card-header h3 { font-size: 1.2rem; color: var(--dark); margin-bottom: 8px; } .price-tag { font-size: 1.6rem; font-weight: 800; color: var(--primary); } .price-card ul { margin-bottom: 24px; } .price-card ul li { padding: 8px 0; border-bottom: 1px solid var(--border); display: flex; gap: 8px; } .price-card ul li i { color: var(--success); } .price-card .btn { width: 100%; text-align: center; } /* Galerie */ .gallery-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px; } .filter-btn { padding: 8px 20px; border: 2px solid var(--border); background: var(--white); color: var(--text); border-radius: 20px; cursor: pointer; font-size: 0.92rem; transition: var(--transition); } .filter-btn:hover, .filter-btn.active { border-color: var(--primary); background: var(--primary); color: var(--dark); font-weight: 600; } .gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } .gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); cursor: pointer; aspect-ratio: 4/3; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .gallery-overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease; color: var(--white); padding: 16px; text-align: center; } .gallery-overlay p { font-size: 0.95rem; font-weight: 600; } .gallery-overlay i { font-size: 2rem; color: var(--primary); } .gallery-item:hover img { transform: scale(1.06); } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-item.hidden { display: none; } /* Lightbox */ .lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; } .lightbox-overlay.active { display: flex; } .lightbox-content { max-width: 80vw; text-align: center; } .lightbox-content img { max-height: 75vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); } #lightboxCaption { color: var(--white); margin-top: 14px; font-size: 1.05rem; } .lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; background: rgba(185,28,28,0.85); border: none; color: var(--white); cursor: pointer; border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: var(--transition); } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: var(--primary); } .lightbox-close { top: 20px; right: 20px; } .lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); } /* Alerts */ .alert { padding: 14px 20px; border-radius: var(--radius); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; font-weight: 500; } .alert-success { background: #dcfce7; border: 1px solid #86efac; color: #166534; } .alert-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; } /* Footer – kompakt */ footer, .site-footer { background: var(--dark2); color: #94a3b8; border-top: 1px solid #1e293b; } .site-footer { padding: 16px 0; text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-bottom: 10px; padding: 0 16px; } .footer-nav a { color: #94a3b8; font-size: 0.85rem; text-decoration: none; transition: color .2s; } .footer-nav a:hover { color: var(--primary); } .footer-link-btn { background: none; border: none; color: #94a3b8; font-size: 0.85rem; cursor: pointer; padding: 0; transition: color .2s; } .footer-link-btn:hover { color: var(--primary); } .footer-copy { font-size: 0.82rem; color: #64748b; margin: 0; padding: 0 16px; } .footer-copy strong { color: #94a3b8; } .footer-powered { margin-left: 8px; opacity: 0.7; } .footer-powered a { color: #64748b; } .footer-powered a:hover { color: var(--primary); } .cookie-reopen-btn { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:.85rem; padding:0; text-decoration:underline; } .cookie-reopen-btn:hover { color: var(--primary); } /* Admin-Modus Bar */ .eg-admin-bar { background: #7c2d12; color: #fef2f2; padding: 7px 16px; font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .eg-admin-bar strong { color: #fca5a5; } .eg-admin-bar-hint { color: #fca5a5; opacity: .75; font-size: .78rem; flex: 1; } .eg-admin-bar a { color: #fecaca; font-weight: 600; text-decoration: none; white-space: nowrap; } .eg-admin-bar a:hover { text-decoration: underline; } /* Team-Sektion */ .team-section { background: var(--light); } .team-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .team-text h2 { margin-bottom: 16px; } .team-text p { margin-bottom: 20px; color: var(--text-light); } .team-img { width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,.12); } @media screen and (max-width: 768px) { .team-inner { grid-template-columns: 1fr; } } /* Admin Inline-Edit Styles */ .eg-editable-section { position: relative; } .eg-pencil-btn { position: absolute; top: 10px; right: 10px; background: #b91c1c; color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; opacity: 0; transition: opacity .2s; z-index: 10; display: flex; align-items: center; justify-content: center; font-size: .8rem; } .eg-editable-section:hover .eg-pencil-btn { opacity: 1; } .eg-active { outline: 2px solid #b91c1c; outline-offset: 4px; background: rgba(185,28,28,0.04); border-radius: 4px; } .eg-field-editing { outline: 1px dashed #b91c1c; padding: 2px 4px; min-width: 20px; border-radius: 2px; } .eg-action-bar { display: flex; gap: 8px; padding: 10px 0 0; } .eg-save { background: #16a34a; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .eg-discard { background: #64748b; color: #fff; border: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-size: 0.85rem; } .eg-danger { background: #dc2626 !important; } .eg-flash { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: #16a34a; color: #fff; padding: 4px 14px; border-radius: 4px; font-size: 0.82rem; z-index: 30; white-space: nowrap; pointer-events: none; } .eg-flash-err { background: #dc2626; } /* Gallery edit */ .eg-gallery-editable { position: relative; } .eg-gallery-btn { position: absolute; top: 8px; right: 8px; opacity: 0; z-index: 20; width: 32px; height: 32px; background: rgba(185,28,28,.9); border: none; border-radius: 50%; color: #fff; font-size: .8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s; } .eg-gallery-editable:hover .eg-gallery-btn { opacity: 1; } .eg-gallery-add-btn { display: block; margin: 24px auto; background: #b91c1c; color: #fff; border: none; padding: 10px 26px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; } .eg-gallery-add-btn:hover { background: #991b1b; } /* Category pencil */ .eg-cat-pencil { opacity: 0; margin-left: 4px; font-size: 0.72rem; background: rgba(185,28,28,.8); color: #fff; border: none; border-radius: 3px; cursor: pointer; padding: 2px 5px; } .filter-btn:hover .eg-cat-pencil { opacity: 1; } .eg-cat-input { background: #1e0a0a; color: #f5e0e0; border: 1px solid #b91c1c; padding: 2px 8px; border-radius: 3px; font-size: inherit; width: 130px; } /* Gallery modal */ .eg-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 9999; align-items: center; justify-content: center; } .eg-modal[style*="flex"] { display: flex !important; } .eg-modal-inner { background: var(--white); color: var(--text); padding: 24px; border-radius: 10px; width: 90%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; max-height: 90vh; overflow-y: auto; } .eg-modal-inner h3 { color: var(--text); } .eg-modal-inner label { display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; font-weight: 500; color: var(--text); } .eg-modal-inner input, .eg-modal-inner select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; background: var(--white); color: var(--text); } .eg-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; } /* Floating Action Buttons */ .floating-buttons { position:fixed; bottom:28px; right:22px; z-index:8000; display:flex; flex-direction:column; gap:12px; align-items:flex-end; } .fab-btn { display:flex; align-items:center; gap:10px; padding:12px 18px 12px 14px; border-radius:50px; color:#fff; text-decoration:none; font-weight:700; font-size:.95rem; box-shadow:0 4px 16px rgba(0,0,0,.25); transition:transform .2s, box-shadow .2s; white-space:nowrap; } .fab-btn:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.3); } .fab-btn i { font-size:1.2rem; } .fab-phone { background:linear-gradient(135deg,#7f1d1d,#b91c1c); } .fab-whatsapp { background:linear-gradient(135deg,#16a34a,#22c55e); } .fab-label { font-size:.85rem; } /* Cookie Banner */ .cookie-banner { position:fixed; bottom:0; left:0; right:0; z-index:9998; background:var(--dark); color:var(--white); box-shadow:0 -4px 24px rgba(0,0,0,.3); animation:slideUp .4s ease; } @keyframes slideUp { from { transform:translateY(100%); } to { transform:translateY(0); } } .cookie-inner { max-width:1200px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .cookie-text { flex:1; min-width:240px; } .cookie-text strong { display:block; font-size:1rem; margin-bottom:6px; } .cookie-text p { margin:0; font-size:.85rem; color:#94a3b8; line-height:1.5; } .cookie-text a { color:var(--primary); } .cookie-actions { display:flex; gap:10px; flex-shrink:0; flex-wrap:wrap; } /* Google Maps Embed */ .map-embed { margin-top:16px; } .map-embed iframe { display:block; } /* Broadcast Banner */ .broadcast-bar { position:fixed; top:70px; left:0; right:0; z-index:999; background:linear-gradient(135deg,#1c0808,#7f1d1d); color:#fff; box-shadow:0 4px 20px rgba(0,0,0,.35); } .broadcast-inner { max-width:1200px; margin:0 auto; padding:8px 20px; display:flex; align-items:center; justify-content:center; gap:12px; } .broadcast-text { margin:0; font-size:1rem; font-weight:600; line-height:1.4; flex:1; } .broadcast-text i { color:var(--accent); margin-right:8px; } .broadcast-media { position:relative; flex:1; max-height:120px; overflow:hidden; border-radius:8px; display:flex; align-items:center; } .broadcast-media img { width:100%; max-height:120px; object-fit:cover; border-radius:8px; } .broadcast-media video { width:100%; max-height:120px; object-fit:cover; border-radius:8px; } .broadcast-overlay-text { position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.65); color:#fff; font-weight:700; font-size:1.05rem; padding:8px 14px; text-align:center; } .broadcast-bar.bc-hidden { display:none; } body.has-broadcast .page-content { padding-top: 140px; } body.has-broadcast.bc-has-media .page-content { padding-top: 228px; } /* Legal */ .legal-text { max-width: 820px; margin: 0 auto; } .legal-text h2 { font-size: 1.8rem; color: var(--dark); margin-bottom: 20px; } .legal-text h3 { font-size: 1.15rem; color: var(--dark); margin: 24px 0 8px; } .legal-text p, .legal-text li { margin-bottom: 10px; line-height: 1.75; } .legal-text hr { border: none; border-top: 1px solid var(--border); margin: 40px 0; } /* Admin */ .admin-body { background: #f1f5f9; min-height: 100vh; animation: none; } .admin-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--dark2); } .admin-login-card { background: var(--white); padding: 44px 40px; border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 400px; } .admin-login-logo { text-align: center; margin-bottom: 32px; } .admin-login-logo i { font-size: 2.5rem; color: var(--primary); } .admin-login-logo h1 { font-size: 1.6rem; color: var(--dark); margin: 8px 0 4px; } .admin-login-logo p { color: var(--text-light); font-size: 0.9rem; } .admin-back-link { text-align: center; margin-top: 18px; font-size: 0.9rem; } .admin-back-link a { color: var(--text-light); } .admin-back-link a:hover { color: var(--primary); } .admin-header { background: var(--dark); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0,0,0,0.2); } .admin-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; } .admin-logo { display: flex; align-items: center; gap: 12px; } .admin-logo a { color: var(--white); font-weight: 700; font-size: 1.2rem; } .admin-logo a i { color: var(--primary); } .admin-logo span { background: var(--primary); color: var(--white); font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 10px; } .admin-nav { display: flex; gap: 6px; } .admin-nav a { color: #94a3b8; padding: 8px 14px; border-radius: var(--radius); font-size: 0.9rem; transition: var(--transition); display: flex; align-items: center; gap: 6px; } .admin-nav a:hover, .admin-nav a.active { background: rgba(255,255,255,0.08); color: var(--primary); } .admin-main { padding: 28px; max-width: 1400px; margin: 0 auto; } .admin-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 16px; } .admin-stats-row2 { display: flex; gap: 16px; justify-content: center; margin-bottom: 24px; } .admin-stats-row2 .admin-stat-card { flex: 0 0 calc((100% - 32px) / 3); max-width: calc((100% - 32px) / 3); } .admin-stat-card { background: var(--white); padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow); text-align: center; } .admin-stat-card.highlight { border-top: 3px solid var(--primary); } .stat-num { display: block; font-size: 2.2rem; font-weight: 800; color: var(--dark); } .stat-lbl { font-size: 0.85rem; color: var(--text-light); } .admin-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; } .admin-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .filter-tab { padding: 7px 16px; border-radius: 20px; border: 1px solid var(--border); background: var(--white); color: var(--text); font-size: 0.88rem; transition: var(--transition); cursor: pointer; text-decoration: none; } .filter-tab:hover, .filter-tab.active { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 600; } .admin-search { display: flex; gap: 0; } .admin-search input { padding: 8px 14px; border: 1px solid var(--border); border-right: none; border-radius: var(--radius) 0 0 var(--radius); font-size: 0.9rem; width: 260px; } .admin-search button { padding: 8px 14px; background: var(--primary); border: none; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; font-size: 1rem; color: var(--white); } .admin-table-wrap { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { padding: 13px 16px; background: var(--dark); color: var(--white); text-align: left; font-size: 0.88rem; font-weight: 600; white-space: nowrap; } .admin-table td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: var(--light); } .unread-row td { font-weight: 600; } .action-td { white-space: nowrap; } .btn-sm { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 4px; font-size: 0.82rem; font-weight: 500; border: 1px solid var(--border); color: var(--text); background: var(--white); transition: var(--transition); text-decoration: none; margin-right: 4px; } .btn-sm:hover { border-color: var(--primary); color: var(--primary); } .btn-sm-primary { background: var(--primary); border-color: var(--primary); color: var(--white); } .btn-sm-primary:hover { background: var(--primary-dark); } .btn-sm-warn { background: #d97706; border-color: #b45309; color: var(--white); } .btn-sm-warn:hover { background: #b45309; } .btn-sm-danger { background: #dc2626; border-color: #b91c1c; color: var(--white); } .btn-sm-danger:hover { background: #b91c1c; } .admin-empty { padding: 60px; text-align: center; color: var(--text-light); } .admin-empty i { font-size: 3rem; margin-bottom: 12px; display: block; opacity: 0.3; } .badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .badge-new { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; } .badge-read { background: #f1f5f9; color: var(--text-light); border: 1px solid var(--border); } .badge-replied { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .badge-kontakt { background: #fff0f0; color: #991b1b; border: 1px solid #fca5a5; } .badge-antrag { background: #f0fdf4; color: #166534; border: 1px solid #86efac; } .admin-view-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; max-width: 900px; } .admin-view-card h2 { font-size: 1.5rem; color: var(--dark); margin-bottom: 8px; } .admin-view-meta { display: flex; gap: 20px; color: var(--text-light); font-size: 0.9rem; margin-bottom: 28px; flex-wrap: wrap; } .admin-view-meta span { display: flex; align-items: center; gap: 6px; } .admin-view-body { margin-bottom: 30px; } .detail-table { width: 100%; border-collapse: collapse; margin-bottom: 24px; } .detail-table th { width: 160px; padding: 10px 14px; background: var(--light); color: var(--dark); font-weight: 600; font-size: 0.9rem; border-bottom: 1px solid var(--border); text-align: left; } .detail-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .admin-message-box, .admin-extra-box { margin-bottom: 20px; } .admin-message-box h4, .admin-extra-box h4 { font-size: 0.95rem; color: var(--text-light); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; } .message-content { background: var(--light); border-left: 4px solid var(--primary); padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0; line-height: 1.7; } .admin-view-actions { display: flex; gap: 12px; flex-wrap: wrap; } .reply-meta { color: var(--text-light); font-size: 0.9rem; margin-bottom: 24px; } .quote-box { background: var(--light); border-left: 3px solid var(--border); padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-light); font-size: 0.88rem; line-height: 1.6; } /* Responsive */ @media screen and (max-width: 1024px) { .price-cards { grid-template-columns: 1fr 1fr; } .usp-grid { grid-template-columns: repeat(2,1fr); } .stats-grid { grid-template-columns: repeat(2,1fr); } } @media screen and (max-width: 768px) { .nav-links { position: absolute; right: 0; height: calc(100dvh - var(--header-h, 70px)); top: var(--header-h, 70px); background: var(--dark2); flex-direction: column; align-items: center; width: 75%; transform: translateX(100%); transition: transform 0.4s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.3); padding-top: 30px; overflow-y: auto; } .nav-links li { opacity: 0; margin: 6px 0; } /* Touch-Target: mindestens 44×44px für mobile Barrierefreiheit (WCAG 2.5.5) */ .nav-links li a { min-height: 44px; padding: 10px 20px; font-size: 1rem; display: flex; align-items: center; justify-content: center; white-space: nowrap; min-width: auto; } button.burger { display: flex; } .nav-active { transform: translateX(0%); } .navbar { justify-content: space-between; } .grid { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } .page-hero h1 { font-size: 1.8rem; } .grid-2 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .service-detail { grid-template-columns: 1fr; text-align: center; } .service-detail.reverse { direction: ltr; } .service-detail-icon { margin: 0 auto; } .cta-inner { flex-direction: column; text-align: center; } .gallery-grid { grid-template-columns: repeat(2,1fr); } .price-cards { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2,1fr); } .admin-stats { grid-template-columns: repeat(2,1fr); } .admin-stats-row2 .admin-stat-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } .admin-table-wrap { overflow-x: auto; } /* ── Mobile Anzeige-Fixes ────────────────────────────────────────── */ .container { padding: 0 16px; } .section-padding { padding: 44px 0; } .section-title-gap { margin-top: 32px; } .page-content { padding-top: 72px; } body.has-broadcast .page-content { padding-top: 128px; } body.has-broadcast.bc-has-media .page-content { padding-top: 196px; } .hero { padding: 32px 0; min-height: 72vh; } .hero p { font-size: 1.05rem; margin-bottom: 28px; } .page-hero { padding: 36px 0 26px; } .subtitle { font-size: 1rem; margin-bottom: 24px; } .broadcast-inner { flex-wrap: wrap; gap: 6px; padding: 8px 12px; justify-content: center; } .broadcast-text { font-size: .88rem; text-align: center; flex: 1 1 100%; } .card { padding: 22px 14px; } /* Floating-Buttons: nur Icon-Kreis auf Mobile */ .fab-label { display: none; } .fab-btn { padding: 14px; border-radius: 50%; } .floating-buttons { bottom: 16px; right: 14px; gap: 10px; } /* Cookie-Banner */ .cookie-inner { padding: 14px 16px; gap: 14px; } .cookie-text { min-width: 0; } .cookie-actions { width: 100%; justify-content: flex-start; } /* Galerie-Filter */ .gallery-filter { gap: 8px; margin-bottom: 20px; } .filter-btn { padding: 6px 14px; font-size: .82rem; } /* Info-Box und Form-Sektionen */ .info-box { padding: 20px 16px; } .antrag-form .form-section { padding: 20px 14px; } .antrag-layout { gap: 16px; } /* Listen-Einzug auf mobil */ .list-style li { word-break: break-word; } } @media screen and (max-width: 480px) { .hero h1 { font-size: 1.6rem; } .section-title { font-size: 1.5rem; margin-bottom: 20px; } .gallery-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .usp-grid { grid-template-columns: 1fr 1fr; } .admin-stats { grid-template-columns: 1fr 1fr; } .admin-stats-row2 .admin-stat-card { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); } /* ── Sehr kleine Bildschirme ────────────────────────────────────── */ .container { padding: 0 12px; } .section-padding { padding: 28px 0; } .section-title-gap { margin-top: 24px; } .hero { padding: 24px 0; min-height: 60vh; } .hero p { font-size: .95rem; margin-bottom: 20px; } .hero-badge { font-size: .78rem; padding: 4px 12px; margin-bottom: 12px; } .page-hero { padding: 28px 0 18px; } .page-hero h1 { font-size: 1.55rem; } .admin-login-card { padding: 28px 18px; } .fab-btn { padding: 12px; } .floating-buttons { bottom: 12px; right: 10px; gap: 8px; } /* Nav-Panel breiter auf sehr kleinen Screens */ .nav-links { width: 90%; } .nav-links li a { padding: 10px 14px; } /* Cookie-Banner Stack */ .cookie-inner { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; } .cookie-actions { width: 100%; } } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } .toggle .line1 { transform: rotate(-45deg) translate(-5px,6px); } .toggle .line2 { opacity: 0; } .toggle .line3 { transform: rotate(45deg) translate(-5px,-6px); } /* ── Dark Mode ───────────────────────────────────────── */ [data-theme="dark"] body { background: #1a0c0c; color: #e2d0d0; } [data-theme="dark"] .bg-light { background: #200e0e; } [data-theme="dark"] .card { background: #2a1010; border-color: #3d2020; } [data-theme="dark"] .card h3, [data-theme="dark"] .card p { color: #e2d0d0; } [data-theme="dark"] .info-box { background: #2a1010; } [data-theme="dark"] .info-box h3 { color: #f5e0e0; } [data-theme="dark"] .section-title, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #f5e0e0; } [data-theme="dark"] .subtitle, [data-theme="dark"] p { color: #c9b0b0; } [data-theme="dark"] .legal-text h2, [data-theme="dark"] .legal-text h3 { color: #f5e0e0; } [data-theme="dark"] .legal-text p, [data-theme="dark"] .legal-text li { color: #c9b0b0; } [data-theme="dark"] .form-section { background: #200e0e; border-color: #3d2020; } [data-theme="dark"] .form-group label { color: #d1b8b8; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background: #2a1010; border-color: #4a2020; color: #e2d0d0; } [data-theme="dark"] .form-group input::placeholder, [data-theme="dark"] .form-group textarea::placeholder { color: #7a5050; } [data-theme="dark"] .form-intro { color: #c9b0b0; } [data-theme="dark"] .price-card { background: #2a1010; border-color: #3d2020; } [data-theme="dark"] .price-card h3, [data-theme="dark"] .price-card p { color: #e2d0d0; } [data-theme="dark"] .price-table th { background: #3d1010; color: #f5e0e0; } [data-theme="dark"] .price-table td { color: #c9b0b0; border-color: #3d2020; } [data-theme="dark"] .price-table tr:hover td { background: #2a1010; } [data-theme="dark"] .price-col { color: var(--primary); font-weight: 600; } [data-theme="dark"] .list-style li { border-color: #3d2020; color: #c9b0b0; } [data-theme="dark"] .admin-body { background: #1a0c0c; } [data-theme="dark"] .admin-stat-card { background: #2a1010; } [data-theme="dark"] .stat-num { color: #f5e0e0; } [data-theme="dark"] .admin-table-wrap { background: #2a1010; } [data-theme="dark"] .admin-table th { background: #1c0f0f; } [data-theme="dark"] .admin-table td { border-color: #3d2020; color: #e2d0d0; } [data-theme="dark"] .admin-table tr:hover td { background: #330f0f; } [data-theme="dark"] .admin-view-card { background: #2a1010; } [data-theme="dark"] .detail-table th { background: #200e0e; color: #e2d0d0; border-color: #3d2020; } [data-theme="dark"] .detail-table td { border-color: #3d2020; color: #e2d0d0; } [data-theme="dark"] .message-content { background: #200e0e; color: #c9b0b0; } [data-theme="dark"] .admin-search input { background: #2a1010; border-color: #4a2020; color: #e2d0d0; } [data-theme="dark"] .filter-tab { background: #2a1010; border-color: #3d2020; color: #c9b0b0; } [data-theme="dark"] .price-calculator { background: #200e0e; border-color: #3d2020; } [data-theme="dark"] .price-calc-title { color: #f5e0e0; } [data-theme="dark"] .price-value { color: var(--primary); } [data-theme="dark"] .price-line-label, [data-theme="dark"] .price-line-value { color: #c9b0b0; } [data-theme="dark"] .info-tip-box { background: #2a1010; border-color: #3d2020; color: #c9b0b0; } [data-theme="dark"] .checkbox-group .checkbox-label { color: #d1b8b8; } [data-theme="dark"] .page-hero { background: #200e0e; } [data-theme="dark"] .broadcast-card, [data-theme="dark"] .form-card { background: #2a1010; border-color: #3d2020; } /* Dienste */ [data-theme="dark"] .service-detail { background: #2a1010; } /* Galerie-Filter */ [data-theme="dark"] .filter-btn { background: #2a1010; border-color: #4a2020; color: #c9b0b0; } [data-theme="dark"] .filter-btn:hover, [data-theme="dark"] .filter-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; } /* Kontakt-Karte */ [data-theme="dark"] .map-placeholder { background: #200e0e; border-color: #4a2020; } /* Admin-Login */ [data-theme="dark"] .admin-login-card { background: #2a1010; } /* Galerie-Bearbeitungsmodal */ [data-theme="dark"] .eg-modal-inner { background: #1a0c0c; color: #e2d0d0; } [data-theme="dark"] .eg-modal-inner input, [data-theme="dark"] .eg-modal-inner select { background: #2a1010; border-color: #4a2020; color: #e2d0d0; } /* Broadcast-Verwaltung */ [data-theme="dark"] .bc-card { background: #2a1010; } [data-theme="dark"] .bc-status-bar { background: #2a1010; } [data-theme="dark"] .bc-preview { background: #200e0e; border-color: #4a2020; } [data-theme="dark"] .type-tab { background: #1a0c0c; color: #c9b0b0; border-color: #4a2020; } [data-theme="dark"] .type-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; } [data-theme="dark"] .upload-area { border-color: #4a2020; } /* Spezifitäts-Fixes für verschachtelte Selektoren */ [data-theme="dark"] .form-section h3 { color: #f5e0e0; } [data-theme="dark"] .admin-login-logo h1 { color: #f5e0e0; } [data-theme="dark"] .admin-message-box h4, [data-theme="dark"] .admin-extra-box h4 { color: #9a7070; } /* bc-card h2: höhere Spezifität nötig, da broadcast.php inline-style nachlädt */ [data-theme="dark"] .bc-card h2 { color: #f5e0e0; border-color: #4a2020; } /* form-control-Inputs (broadcast admin) – Browserstandardfarben überschreiben */ [data-theme="dark"] .form-control { background: #2a1010; border-color: #4a2020; color: #e2d0d0; } [data-theme="dark"] .form-label { color: #d1b8b8; } /* ── Theme-Auswahl Modal ─────────────────────────────── */ .theme-overlay { display:none; position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,0.88); align-items:center; justify-content:center; } .theme-overlay.active { display:flex; } .theme-modal { background:#fff; border-radius:16px; padding:44px 36px; max-width:480px; width:90%; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:fadeIn .3s ease; } .theme-modal h2 { font-size:1.6rem; color:#1c0f0f; margin-bottom:8px; } .theme-modal > p { color:#64748b; margin-bottom:28px; font-size:.95rem; } .theme-choices { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } .theme-choice-btn { flex:1; min-width:140px; max-width:180px; padding:22px 16px; border:2px solid #e8d8d8; border-radius:12px; cursor:pointer; background:#fdf2f2; transition:all .2s; display:flex; flex-direction:column; align-items:center; gap:10px; } .theme-choice-btn:hover { border-color:#b91c1c; transform:translateY(-3px); box-shadow:0 8px 24px rgba(185,28,28,.2); } .theme-choice-btn .tc-icon { font-size:2.4rem; } .theme-choice-btn .tc-label { font-weight:700; color:#1c0f0f; font-size:1rem; } .theme-choice-btn .tc-desc { font-size:.78rem; color:#64748b; } .theme-choice-dark { background:#1c0f0f; border-color:#3d2020; } .theme-choice-dark:hover { border-color:#b91c1c; } .theme-choice-dark .tc-icon { color:#b91c1c; } .theme-choice-dark .tc-label, .theme-choice-dark .tc-desc { color:#e2d0d0; } /* ── Antrag Layout mit Kalkulator ────────────────────── */ .antrag-layout { display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; } @media(max-width:900px) { .antrag-layout { grid-template-columns:1fr; } .price-calc-wrap { position:static !important; } } .price-calc-wrap { position:sticky; top:90px; } .price-calculator { background:var(--white); border:2px solid var(--border); border-radius:12px; padding:22px; box-shadow:var(--shadow-lg); } [data-theme="dark"] .price-calculator { background:#2a1010; border-color:#3d2020; } .price-calc-title { font-size:.95rem; font-weight:700; color:var(--dark); margin-bottom:14px; display:flex; align-items:center; gap:8px; } [data-theme="dark"] .price-calc-title { color:#f5e0e0; } .price-display { text-align:center; padding:16px 12px; background:var(--primary); border-radius:8px; margin-bottom:14px; } .price-from { font-size:.72rem; color:rgba(255,255,255,.8); display:block; } .price-value { font-size:2rem; font-weight:800; color:#fff; display:block; line-height:1.1; } .price-disclaimer { font-size:.68rem; color:rgba(255,255,255,.65); display:block; margin-top:5px; } .price-lines { margin-bottom:12px; } .price-line { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid var(--border); font-size:.82rem; } [data-theme="dark"] .price-line { border-color:#3d2020; } .price-line:last-child { border-bottom:none; } .price-line-label { color:var(--text-light); } .price-line-value { font-weight:600; color:var(--dark); } [data-theme="dark"] .price-line-value { color:#f5e0e0; } .price-empty-hint { text-align:center; color:var(--text-light); font-size:.8rem; padding:8px; } .price-note { font-size:.72rem; color:var(--text-light); line-height:1.4; margin-top:8px; border-top:1px solid var(--border); padding-top:8px; } [data-theme="dark"] .price-note { border-color:#3d2020; color:#9a7070; } /* ── Info-Tooltips ───────────────────────────────────── */ .info-tip { position:relative; display:inline-block; margin-left:5px; vertical-align:middle; } .info-tip-btn { background:none; border:1.5px solid var(--primary); color:var(--primary); border-radius:50%; width:18px; height:18px; font-size:.65rem; font-weight:800; cursor:pointer; padding:0; line-height:1; transition:all .2s; } .info-tip-btn:hover { background:var(--primary); color:#fff; } .info-tip-box { display:none; position:absolute; left:24px; top:50%; transform:translateY(-50%); background:var(--dark); color:#fff; padding:10px 14px; border-radius:8px; font-size:.78rem; line-height:1.55; width:230px; z-index:200; box-shadow:0 6px 20px rgba(0,0,0,.35); } .info-tip-box::before { content:''; position:absolute; left:-6px; top:50%; transform:translateY(-50%); width:0; height:0; border:6px solid transparent; border-right-color:var(--dark); border-left:none; } .info-tip.open .info-tip-box { display:block; } @media(max-width:640px) { .info-tip-box { left:auto; right:0; top:24px; transform:none; max-width:calc(100vw - 32px); } .info-tip-box::before { display:none; } } /* ── Email/Info-Typ Badge ────────────────────────────── */ .badge-email { background:#fff0f0; color:#991b1b; border:1px solid #fca5a5; } /* ── Adressfelder (3 Spalten) ────────────────────────── */ .form-row-address { display:grid; grid-template-columns:1fr 120px 1fr; gap:12px; } @media(max-width:640px) { .form-row-address { grid-template-columns:1fr; } } /* ── Admin Preise ────────────────────────────────────── */ .price-mgmt-table { width:100%; border-collapse:collapse; } .price-mgmt-table th { background:var(--dark); color:var(--white); padding:11px 14px; font-size:.86rem; text-align:left; } .price-mgmt-table td { padding:11px 14px; border-bottom:1px solid var(--border); font-size:.88rem; } .price-mgmt-table tr:hover td { background:var(--light); } [data-theme="dark"] .price-mgmt-table td { border-color:#3d2020; color:#e2d0d0; } [data-theme="dark"] .price-mgmt-table tr:hover td { background:#330f0f; } .price-edit-input { padding:5px 8px; border:1px solid var(--border); border-radius:4px; font-size:.85rem; width:90px; } [data-theme="dark"] .price-edit-input { background:#2a1010; border-color:#4a2020; color:#e2d0d0; } .price-save-btn { padding:4px 12px; font-size:.8rem; background:var(--primary); color:#fff; border:none; border-radius:4px; cursor:pointer; } .price-del-btn { padding:4px 10px; font-size:.8rem; background:var(--error); color:#fff; border:none; border-radius:4px; cursor:pointer; } .bc-status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; } /* ── Accessibility Extras ────────────────────────────── */ /* Burger als Button (Reset Browser-Defaults) */ button.burger { background: none; border: none; padding: 4px; cursor: pointer; display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } /* Galerie-Items tastaturzugänglich */ .gallery-item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 8px; } /* Reduzierte Bewegung */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Aria-live Preis-Kalkulator */ #pcLive { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; } /* ═══════════════════════════════════════════════════════ NEUE ELEMENTE – Notfall-CTA, Slideshow, Bewertungen, FAQ, Rückruf-Formular, Maps-Consent ═══════════════════════════════════════════════════════ */ /* ── Nav Phone CTA ───────────────────────────────────── */ .nav-phone-cta { display:flex; align-items:center; gap:7px; background:var(--primary); color:var(--white) !important; padding:6px 14px !important; border-radius:20px; font-weight:700; font-size:.82rem; white-space:nowrap; transition:var(--transition); text-decoration:none; } .nav-phone-cta:hover { background:#991b1b !important; color:var(--white) !important; transform:scale(1.04); } .notdienst-dot { display:inline-block; width:8px; height:8px; background:#4ade80; border-radius:50%; flex-shrink:0; animation:pulse-dot 1.8s infinite; } @keyframes pulse-dot { 0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.7)} 60%{box-shadow:0 0 0 5px rgba(74,222,128,0)} } /* ── Hero Notfall-Leiste ─────────────────────────────── */ .hero-emergency { margin-top:28px; padding:12px 22px; background:rgba(185,28,28,.22); border:1px solid rgba(185,28,28,.45); border-radius:12px; display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center; } .hero-emergency .em-label { color:#fca5a5; font-size:.9rem; } .hero-emergency .em-phone { color:var(--white); font-weight:800; font-size:1.2rem; text-decoration:none; } .hero-emergency .em-phone:hover { text-decoration:underline; } .hero-emergency .em-badge { background:var(--primary); color:var(--white); padding:3px 10px; border-radius:12px; font-size:.73rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; } /* ── Referenz-Slideshow ──────────────────────────────── */ .ref-slideshow { position:relative; overflow:hidden; min-height:400px; display:flex; align-items:center; justify-content:center; background:var(--dark2); } .ref-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; background-size:cover; background-position:center; } .ref-slide.rs-active { opacity:1; } .ref-slide-darken { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,3,3,.78),rgba(25,8,8,.55)); } .ref-slide-content { position:relative; z-index:2; text-align:center; color:var(--white); padding:70px 24px; max-width:740px; margin:0 auto; } .ref-quote { font-size:1.45rem; font-style:italic; line-height:1.65; margin-bottom:10px; text-shadow:0 2px 10px rgba(0,0,0,.5); } .ref-quote::before { content:'\201E'; font-size:2.5rem; color:var(--primary); line-height:0; vertical-align:-.6rem; margin-right:2px; } .ref-quote::after { content:'\201C'; font-size:2.5rem; color:var(--primary); line-height:0; vertical-align:-.6rem; margin-left:2px; } .ref-author { font-size:.88rem; color:#94a3b8; margin-bottom:24px; } .ref-slide-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3; } .ref-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:.3s; border:none; padding:0; } .ref-dot.rs-active { background:var(--primary); transform:scale(1.25); } .ref-cta-link { display:inline-block; background:rgba(185,28,28,.85); color:var(--white); padding:9px 22px; border-radius:var(--radius); font-weight:700; text-decoration:none; font-size:.9rem; border:1px solid rgba(185,28,28,.6); } .ref-cta-link:hover { background:var(--primary); } /* ── Testimonials / Google-Bewertungen ───────────────── */ .testimonials-section { background:var(--light); } .testimonials-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; } .google-badge { display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--border); border-radius:12px; padding:12px 18px; } .google-badge-g { font-size:1.5rem; font-weight:900; background:linear-gradient(135deg,#4285F4,#34A853,#FBBC05,#EA4335); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .google-badge-score { font-size:1.8rem; font-weight:700; color:var(--dark); line-height:1; } .google-badge-stars { color:#f59e0b; font-size:1.1rem; } .google-badge-count { font-size:.8rem; color:var(--text-light); } .btn-google-review { background:#4285F4; color:#fff !important; border-color:#4285F4; } .btn-google-review:hover { background:#3367d6; border-color:#3367d6; } .reviews-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; } .review-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:20px; } .review-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; } .review-avatar { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.95rem; flex-shrink:0; } .review-name { font-weight:700; font-size:.92rem; color:var(--dark); } .review-stars { color:#f59e0b; font-size:.85rem; margin-top:1px; } .review-text { color:var(--text-light); font-size:.88rem; line-height:1.65; } .review-date { font-size:.78rem; color:#94a3b8; margin-top:8px; } /* ── FAQ ─────────────────────────────────────────────── */ .faq-list { max-width:820px; margin:0 auto; } .faq-item { border:1px solid var(--border); border-radius:10px; margin-bottom:10px; overflow:hidden; } .faq-q { background:var(--white); padding:16px 22px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:600; color:var(--dark); border:none; width:100%; text-align:left; font-size:.97rem; line-height:1.4; } .faq-q:hover { background:var(--light); } .faq-q .faq-ic { transition:.3s; color:var(--primary); flex-shrink:0; font-size:.9rem; } .faq-q[aria-expanded="true"] .faq-ic { transform:rotate(180deg); } .faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease; background:var(--white); } .faq-a.open { max-height:600px; } .faq-a-inner { padding:0 22px 16px; color:var(--text); line-height:1.75; font-size:.93rem; } /* ── Rückruf-Formular ────────────────────────────────── */ .callback-box { background:linear-gradient(135deg,var(--dark2) 0%,#2a0d0d 100%); border-radius:16px; padding:32px; color:var(--white); margin-bottom:40px; } .callback-box h3 { color:var(--white); font-size:1.35rem; margin-bottom:6px; display:flex; align-items:center; gap:10px; } .callback-box > p { color:#94a3b8; margin-bottom:22px; font-size:.92rem; } .callback-form-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; align-items:end; } .callback-form-grid .cf-group { display:flex; flex-direction:column; gap:5px; } .callback-form-grid label { color:#cbd5e1; font-size:.82rem; font-weight:500; } .callback-form-grid input, .callback-form-grid select { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); color:var(--white); border-radius:8px; padding:10px 13px; font-size:.9rem; width:100%; } .callback-form-grid input::placeholder { color:rgba(255,255,255,.38); } .callback-form-grid select option { background:#1c0f0f; } .cf-submit { background:var(--primary); color:var(--white); border:none; padding:10px 22px; border-radius:var(--radius); font-weight:700; cursor:pointer; font-size:.9rem; white-space:nowrap; } .cf-submit:hover { background:#991b1b; } .cf-privacy { grid-column:1/-1; display:flex; align-items:center; gap:8px; font-size:.8rem; color:#94a3b8; } .cf-privacy a { color:#94a3b8; text-decoration:underline; } .cf-privacy input[type=checkbox] { width:15px; height:15px; flex-shrink:0; } /* ── Google Maps Consent-Overlay ─────────────────────── */ .map-consent-wrap { position:relative; background:#111827; border-radius:10px; overflow:hidden; min-height:240px; display:flex; align-items:center; justify-content:center; margin-top:16px; } .map-consent-inner { text-align:center; padding:28px 20px; color:#94a3b8; } .map-consent-inner i { font-size:2.2rem; color:var(--primary); margin-bottom:12px; display:block; } .map-consent-inner p { font-size:.85rem; max-width:320px; margin:0 auto 16px; line-height:1.6; } .map-consent-inner a.mc-direct { display:block; margin-top:10px; font-size:.8rem; color:#64748b; } .map-load-btn { background:var(--primary); color:var(--white); border:none; padding:10px 22px; border-radius:var(--radius); font-weight:700; cursor:pointer; font-size:.88rem; } .map-load-btn:hover { background:#991b1b; } /* ── Dark-Mode Ergänzungen ───────────────────────────── */ [data-theme="dark"] .testimonials-section { background:var(--dark); } [data-theme="dark"] .google-badge, [data-theme="dark"] .review-card { background:var(--dark2); border-color:#3d1515; } [data-theme="dark"] .google-badge-score { color:var(--white); } [data-theme="dark"] .review-name { color:var(--white); } [data-theme="dark"] .faq-q { background:var(--dark2); color:var(--white); } [data-theme="dark"] .faq-q:hover { background:#2a1010; } [data-theme="dark"] .faq-a { background:var(--dark2); } [data-theme="dark"] .faq-a-inner { color:#cbd5e1; } [data-theme="dark"] .faq-item { border-color:#3d1515; } [data-theme="dark"] .map-consent-wrap { background:#0a0404; } /* ── Responsive Ergänzungen ──────────────────────────── */ @media (max-width:900px) { .callback-form-grid { grid-template-columns:1fr 1fr; } } @media (max-width:768px) { .callback-form-grid { grid-template-columns:1fr; } } @media (max-width:640px) { .callback-form-grid { grid-template-columns:1fr; } .ref-quote { font-size:1.1rem; } .hero-emergency { gap:8px; } .hero-emergency .em-phone { font-size:1rem; } .nav-phone-cta { display:none; } .testimonials-top { flex-direction:column; align-items:flex-start; } } /* ══════════════════════════════════════════════════════════════════════════ INLINE EDITOR (Edit-Modus CSS) ══════════════════════════════════════════════════════════════════════════ */ /* Admin-Bar im Edit-Modus */ .eg-admin-bar--edit { background: #1e3a5f; border-bottom: 2px solid #fcd34d; } /* Stift-Buttons im Edit-Modus immer sichtbar */ body.eg-edit-mode .eg-pencil-btn { opacity: 1; } /* Cursor im Edit-Modus: Text-Cursor auf editierbaren Elementen */ body.eg-edit-mode a:not(.eg-pencil-btn):not([id="egBackBtn"]), body.eg-edit-mode button:not(.eg-pencil-btn):not(.eg-action-bar *) { cursor: text; } /* Aktions-Leiste Buttons */ .eg-action-bar .eg-save { background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: .85rem; cursor: pointer; transition: background .15s; } .eg-action-bar .eg-save:hover { background: #15803d; } .eg-action-bar .eg-save:disabled { opacity: .55; cursor: not-allowed; } .eg-action-bar .eg-discard { background: #dc2626; color: #fff; border: none; border-radius: 6px; padding: 6px 14px; font-size: .85rem; cursor: pointer; transition: background .15s; } .eg-action-bar .eg-discard:hover { background: #b91c1c; } /* Label in der Aktions-Leiste */ .eg-ab-label { font-size: .85rem; color: #fff; margin-right: auto; display: flex; align-items: center; gap: 6px; } /* ── Toast ─────────────────────────────────────────────────────────────── */ #egToast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1e293b; color: #f8fafc; padding: 10px 22px; border-radius: 8px; font-size: .9rem; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity .22s, transform .22s; z-index: 99998; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.35); } #egToast.eg-toast-err { background: #b91c1c; } #egToast.eg-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Confirm-Dialog ────────────────────────────────────────────────────── */ .eg-confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 99999; backdrop-filter: blur(2px); } .eg-confirm-box { background: #fff; border-radius: 12px; padding: 28px 32px; max-width: 420px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,.28); } .eg-confirm-box h4 { margin: 0 0 8px; font-size: 1.1rem; color: #0f172a; } .eg-confirm-box p { margin: 0 0 20px; color: #475569; font-size: .95rem; line-height: 1.5; } .eg-confirm-btns { display: flex; gap: 10px; justify-content: flex-end; } .eg-confirm-btn { padding: 8px 18px; border-radius: 6px; border: 1.5px solid #cbd5e1; background: #f8fafc; color: #0f172a; font-size: .9rem; cursor: pointer; transition: background .15s; } .eg-confirm-btn:hover { background: #e2e8f0; } .eg-confirm-btn.primary { background: #1d4ed8; color: #fff; border-color: transparent; } .eg-confirm-btn.primary:hover { background: #1e40af; } /* ── Bild-Overlay (Klick zum Ersetzen) ─────────────────────────────────── */ .eg-img-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.48); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; font-size: .85rem; cursor: pointer; border-radius: inherit; opacity: 0; transition: opacity .18s; z-index: 5; } .eg-img-overlay i { font-size: 1.8rem; } .eg-img-overlay:hover, .eg-editable-section.eg-active .eg-img-overlay { opacity: 1; } @media (prefers-color-scheme: dark) { .eg-confirm-box { background: #1e293b; } .eg-confirm-box h4 { color: #f1f5f9; } .eg-confirm-box p { color: #94a3b8; } .eg-confirm-btn { background: #334155; border-color: #475569; color: #f1f5f9; } .eg-confirm-btn:hover { background: #475569; } } /* ── Bearbeitungsmodus v3: Untere Edit-Leiste ───────────────────────────── */ /* Admin-Bar Indikator im Edit-Mode */ .eg-admin-bar--editmode { background: linear-gradient(90deg, #1e3a5f 0%, #1e3a5f 80%, #78350f 100%); border-bottom: 2px solid #fcd34d; } /* Body-Padding damit Inhalt nicht hinter der festen Leiste verschwindet */ body.eg-edit-mode { padding-bottom: 62px !important; } /* Feste untere Edit-Leiste */ #egEditBar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99990; background: #0f172a; border-top: 3px solid #fcd34d; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; height: 52px; font-size: .875rem; box-shadow: 0 -4px 20px rgba(0,0,0,.4); } .eg-eb-info { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; } .eg-eb-info i { color: #fcd34d; font-size: 1rem; flex-shrink: 0; } .eg-eb-title { font-weight: 700; color: #fcd34d; white-space: nowrap; flex-shrink: 0; } .eg-eb-hint { color: #94a3b8; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eg-eb-hint kbd { background: #1e293b; border: 1px solid #334155; border-radius: 4px; padding: 1px 5px; font-size: .75rem; font-family: inherit; color: #e2e8f0; } .eg-eb-actions { display: flex; gap: 8px; flex-shrink: 0; } .eg-eb-save { background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 7px 16px; font-size: .85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .15s; } .eg-eb-save:hover { background: #15803d; } .eg-eb-save:disabled { opacity: .55; cursor: not-allowed; } .eg-eb-back { background: transparent; color: #cbd5e1; border: 1.5px solid #334155; border-radius: 6px; padding: 7px 14px; font-size: .85rem; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background .15s, color .15s; } .eg-eb-back:hover { background: #1e293b; color: #fff; border-color: #475569; } /* ── Stift-Modus: Hover-Outline für editierbare Felder ───────────────── */ body.eg-edit-mode .eg-field:not([contenteditable="true"]) { outline: 1px dashed rgba(59, 130, 246, 0.35); outline-offset: 2px; border-radius: 2px; cursor: pointer; } body.eg-edit-mode .eg-field:hover:not([contenteditable="true"]) { outline: 2px dashed #3b82f6; background: rgba(59, 130, 246, 0.05); } /* Schwebendes Stift-Symbol */ #egFloatPencil { position: fixed; z-index: 99995; width: 30px; height: 30px; display: none; align-items: center; justify-content: center; background: #1d4ed8; color: #fff; border: none; border-radius: 50%; font-size: .82rem; cursor: pointer; box-shadow: 0 2px 10px rgba(29, 78, 216, 0.55); transition: transform .15s, background .15s; pointer-events: auto; } #egFloatPencil:hover { background: #1e40af; transform: scale(1.18); } /* Editierbare Felder (contenteditable) */ .eg-ce-field[contenteditable="true"] { outline: 2px dashed rgba(59, 130, 246, 0.45); outline-offset: 3px; cursor: text; word-break: break-word; overflow-wrap: break-word; max-width: 100%; transition: outline .12s, background .12s; border-radius: 3px; } .eg-ce-field[contenteditable="true"]:hover { outline-color: #3b82f6; background: rgba(59, 130, 246, 0.05); } .eg-ce-field[contenteditable="true"]:focus { outline: 2px solid #1d4ed8; outline-offset: 3px; background: rgba(29, 78, 216, 0.07); } /* Text bleibt im Container */ .eg-ce-field[contenteditable="true"] { overflow: hidden; } /* Bilder: Klick-Indikator */ .eg-ce-img { cursor: pointer !important; transition: filter .15s, box-shadow .15s; outline: 2px dashed rgba(59,130,246,.5); outline-offset: 4px; border-radius: 4px; } .eg-ce-img:hover { filter: brightness(.85); box-shadow: 0 0 0 4px rgba(59,130,246,.3); } /* Mobile: Hint ausblenden */ @media (max-width: 640px) { .eg-eb-hint { display: none; } .eg-eb-title { font-size: .8rem; } }