/* ============================================================================ A&J Gips GmbH — gemeinsames Stylesheet aller Seiten ---------------------------------------------------------------------------- Bis 2026-07-28 lag das komplette CSS inline in index.html. Mit sieben Seiten hiesse das siebenmal dieselben 60 KB im HTML. Als eigene Datei lädt der Browser sie einmal und nimmt sie auf jeder weiteren Seite aus dem Cache. ============================================================================ */ :root { --primary: #1a2332; --primary-light: #2c3e50; --accent: #e8722a; --accent-dark: #c95d1a; --accent-glow: rgba(232, 114, 42, 0.3); --gold: #f0a500; --light: #f4f6f8; --lighter: #fafbfc; --dark: #0d1117; --text: #4a5568; --text-light: #718096; --white: #ffffff; --border: #e2e8f0; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 20px rgba(0,0,0,0.1); --shadow-lg: 0 10px 40px rgba(0,0,0,0.15); --shadow-xl: 0 20px 60px rgba(0,0,0,0.2); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* `clip` statt `hidden`: schneidet den seitlichen Überstand der Einblend- Animationen weg, ohne aus dem Element einen Scroll-Container zu machen — `overflow: hidden` auf würde `scroll-behavior: smooth` aushebeln. */ html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; } body { font-family: var(--font-body); color: var(--text); line-height: 1.7; background: var(--white); overflow-x: clip; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } img { max-width: 100%; display: block; } button { cursor: pointer; border: none; outline: none; font-family: inherit; } input, textarea, select { font-family: inherit; } ::selection { background: var(--accent); color: var(--white); } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 860px; } .section-padding { padding: 100px 0; } /* Sichtbarer Fokus für Tastaturbedienung — `outline: none` auf Buttons hatte ihn global entfernt, damit war die Seite ohne Maus praktisch unbedienbar. */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--accent); color: var(--white); padding: 12px 20px; font-weight: 700; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* ── PRELOADER ───────────────────────────────────────────────────────────── Sicherheitsnetz: Die CSS-Animation blendet ihn nach 5 s auch dann aus, wenn das Skript nicht läuft — sonst bliebe die Seite hinter einer dunklen Fläche. */ #preloader { position: fixed; inset: 0; z-index: 99999; background: var(--primary); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; animation: preloaderFailSafe 0s linear 5s forwards; } #preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } @keyframes preloaderFailSafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .preloader-logo { font-size: 2.5rem; font-weight: 900; color: var(--white); letter-spacing: 2px; margin-bottom: 30px; text-align: center; } .preloader-logo span { color: var(--accent); } .preloader-bar { width: 200px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 10px; overflow: hidden; margin: 0 auto; } .preloader-bar::after { content: ''; display: block; width: 40%; height: 100%; background: var(--accent); border-radius: 10px; animation: preloaderSlide 1s ease-in-out infinite; } @keyframes preloaderSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* ── SCROLL REVEAL ───────────────────────────────────────────────────────── `visibility: hidden` statt nur opacity: sonst liegen die um 60 px verschobenen Elemente unsichtbar über dem Text daneben und fangen Klicks ab. */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal.active { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal-left.active { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(60px); transition: opacity 0.8s ease, transform 0.8s ease; } .reveal-right.active { opacity: 1; transform: translateX(0); } /* ── HEADER ──────────────────────────────────────────────────────────────── `header--solid` ist die Variante für Unterseiten ohne Vollbild-Hero: dort gibt es keinen dunklen Hintergrund, gegen den weisse Schrift lesbar wäre. */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; padding: 20px 0; transition: var(--transition); } header.scrolled, header.header--solid { background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); padding: 12px 0; box-shadow: 0 2px 30px rgba(0,0,0,0.1); } header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.6rem; font-weight: 900; color: var(--white); letter-spacing: 1px; } .logo span { color: var(--accent); } header.scrolled .logo, header.header--solid .logo { color: var(--primary); } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-weight: 600; font-size: 0.88rem; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1px; position: relative; padding: 5px 0; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 0.3s ease; } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-links a:hover { color: var(--white); } header.scrolled .nav-links a, header.header--solid .nav-links a { color: var(--text); } header.scrolled .nav-links a:hover, header.header--solid .nav-links a:hover, header.scrolled .nav-links a[aria-current="page"], header.header--solid .nav-links a[aria-current="page"] { color: var(--accent); } .nav-cta { background: var(--accent); color: var(--white) !important; padding: 12px 24px; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 4px 15px var(--accent-glow); white-space: nowrap; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--accent-dark); transform: translateY(-2px); } /* padding statt fester Höhe: die Balken bleiben 28 px breit, die Trefferfläche wächst auf 44 px — sonst ist der einzige Menüknopf am Handy nur 30 px hoch. */ .hamburger { display: none; flex-direction: column; gap: 6px; background: none; padding: 12px 8px; z-index: 10001; } .hamburger span { width: 28px; height: 2.5px; background: var(--white); border-radius: 5px; transition: var(--transition); } header.scrolled .hamburger span, header.header--solid .hamburger span { background: var(--primary); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } .hamburger.active span { background: var(--white) !important; } .mobile-menu { position: fixed; inset: 0; z-index: 10000; background: var(--primary); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; opacity: 0; visibility: hidden; transition: var(--transition); } .mobile-menu.active { opacity: 1; visibility: visible; } .mobile-menu a { font-size: 1.5rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 3px; transform: translateY(20px); opacity: 0; transition: all 0.4s ease; } .mobile-menu.active a { transform: translateY(0); opacity: 1; } .mobile-menu a:hover { color: var(--accent); } /* ── HERO (Startseite) ───────────────────────────────────────────────────── Bewusst ohne Foto: es liegen keine freigegebenen Bilder eigener Arbeiten vor. Die Struktur entsteht rein per CSS — kein externer Request, kein Lizenzthema. */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; background: var(--primary); overflow: hidden; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(1100px 620px at 82% -12%, rgba(232,114,42,0.20), transparent 62%), radial-gradient(900px 520px at 6% 112%, rgba(44,62,80,0.60), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.028) 0 2px, transparent 2px 10px), linear-gradient(160deg, #0d1117 0%, #1a2332 55%, #22303f 100%); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(13,17,23,0.55) 0%, rgba(26,35,50,0.35) 50%, rgba(232,114,42,0.10) 100%); } .hero-particles { position: absolute; inset: 0; overflow: hidden; } .particle { position: absolute; border-radius: 50%; background: rgba(232,114,42,0.15); animation: floatParticle linear infinite; } @keyframes floatParticle { 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100px) rotate(720deg); opacity: 0; } } .hero-content { position: relative; z-index: 10; max-width: 820px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(232,114,42,0.15); border: 1px solid rgba(232,114,42,0.3); padding: 8px 20px; border-radius: 50px; margin-bottom: 25px; color: var(--accent); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; animation: fadeInDown 0.8s ease 0.3s both; } .hero-badge::before { content: '●'; font-size: 0.5rem; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; color: var(--white); line-height: 1.1; margin-bottom: 25px; animation: fadeInUp 0.8s ease 0.5s both; } .hero h1 .accent-text { color: var(--accent); position: relative; } .hero h1 .accent-text::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background: rgba(232,114,42,0.25); border-radius: 4px; } .hero p { font-size: 1.2rem; color: rgba(255,255,255,0.78); max-width: 620px; margin-bottom: 34px; line-height: 1.8; animation: fadeInUp 0.8s ease 0.7s both; } .hero-buttons { display: flex; gap: 20px; flex-wrap: wrap; animation: fadeInUp 0.8s ease 0.9s both; } .hero-usp { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 38px; animation: fadeInUp 0.8s ease 1.1s both; } .hero-usp li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.72); font-size: 0.92rem; font-weight: 500; } .hero-usp li::before { content: '✓'; color: var(--accent); font-weight: 900; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--white); padding: 16px 36px; border-radius: 50px; font-weight: 700; font-size: 1rem; box-shadow: 0 4px 20px var(--accent-glow); transition: var(--transition); } .btn-primary:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 8px 30px var(--accent-glow); } .btn-secondary { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--white); padding: 16px 36px; border-radius: 50px; font-weight: 700; font-size: 1rem; border: 2px solid rgba(255,255,255,0.35); transition: var(--transition); } .btn-secondary:hover { border-color: var(--white); background: rgba(255,255,255,0.1); transform: translateY(-3px); } .btn-white { display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: var(--accent); padding: 16px 36px; border-radius: 50px; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,0.15); transition: var(--transition); } .btn-white:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,0.2); } .btn-outline-white { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--white); padding: 16px 36px; border-radius: 50px; font-weight: 700; font-size: 1rem; border: 2px solid rgba(255,255,255,0.6); transition: var(--transition); } .btn-outline-white:hover { background: rgba(255,255,255,0.15); border-color: var(--white); transform: translateY(-3px); } .hero-scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10; text-align: center; color: rgba(255,255,255,0.5); animation: bounce 2s infinite; } .hero-scroll-indicator .mouse { width: 26px; height: 40px; border: 2px solid rgba(255,255,255,0.4); border-radius: 15px; margin: 0 auto 10px; position: relative; } .hero-scroll-indicator .mouse::after { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 4px; height: 8px; background: var(--accent); border-radius: 4px; animation: scrollWheel 1.5s infinite; } @keyframes scrollWheel { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(12px); } } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* ── SEITENKOPF (Unterseiten) ──────────────────────────────────────────────── */ .page-hero { background: var(--primary); color: var(--white); padding: 150px 0 70px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 480px at 88% -20%, rgba(232,114,42,0.20), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 10px); } .page-hero .container { position: relative; z-index: 2; } .page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.15; margin: 14px 0 18px; } .page-hero .lead { font-size: 1.12rem; color: rgba(255,255,255,0.78); max-width: 720px; line-height: 1.8; } .page-hero .hero-buttons { margin-top: 32px; } .breadcrumb { font-size: 0.84rem; color: rgba(255,255,255,0.55); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .breadcrumb li { display: flex; align-items: center; gap: 8px; } .breadcrumb li + li::before { content: '›'; color: rgba(255,255,255,0.35); } .breadcrumb a { color: rgba(255,255,255,0.72); text-decoration: underline; text-underline-offset: 3px; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb [aria-current="page"] { color: var(--white); font-weight: 600; } /* ── STATS ───────────────────────────────────────────────────────────────── Nur belegbare Angaben: Gründungsjahr, angebotene Putzstufe, eigene Zusagen. Erfundene Kennzahlen gehören nicht auf eine Website. */ .stats-bar { background: var(--white); margin-top: -60px; position: relative; z-index: 20; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 40px 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-item { text-align: center; position: relative; } .stat-item:not(:last-child)::after { content: ''; position: absolute; right: -15px; top: 10%; height: 80%; width: 1px; background: var(--border); } .stat-number { font-size: 2.6rem; font-weight: 900; color: var(--primary); line-height: 1; margin-bottom: 8px; } .stat-number span { color: var(--accent); } .stat-label { font-size: 0.82rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } /* ── ABSCHNITTSKÖPFE ───────────────────────────────────────────────────────── */ .section-header { text-align: center; margin-bottom: 60px; } .section-header--left { text-align: left; } .section-tag { display: inline-block; background: rgba(232,114,42,0.1); color: var(--accent); padding: 6px 20px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 15px; } .page-hero .section-tag { background: rgba(232,114,42,0.2); } .section-header h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); color: var(--primary); margin-bottom: 15px; line-height: 1.2; } .section-header p { max-width: 640px; margin: 0 auto; color: var(--text-light); font-size: 1.05rem; } .section-header--left p { margin-left: 0; } .section-line { width: 60px; height: 4px; background: var(--accent); border-radius: 4px; margin: 20px auto 0; } .section-header--left .section-line { margin-left: 0; } /* ── LEISTUNGSKARTEN ───────────────────────────────────────────────────────── */ .services { background: var(--lighter); } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { background: var(--white); border-radius: var(--radius-md); padding: 45px 35px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid var(--border); display: flex; flex-direction: column; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .service-card:hover::before { transform: scaleX(1); } .service-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .service-icon { width: 70px; height: 70px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin-bottom: 25px; box-shadow: 0 4px 15px var(--accent-glow); } .service-card h3 { font-size: 1.3rem; color: var(--primary); margin-bottom: 15px; font-weight: 700; } .service-card > p { color: var(--text-light); font-size: 0.95rem; margin-bottom: 20px; } .service-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; } .service-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--text); } .service-list li::before { content: '✓'; color: var(--accent); font-weight: 800; font-size: 0.8rem; line-height: 1.7; } .service-more { margin-top: auto; font-weight: 700; color: var(--accent); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 7px; } .service-more::after { content: '→'; transition: transform 0.3s ease; } .service-card:hover .service-more::after { transform: translateX(4px); } /* ── ÜBER UNS ──────────────────────────────────────────────────────────────── */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-facts { background: var(--primary); color: rgba(255,255,255,0.75); border-radius: var(--radius-lg); padding: 45px 40px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .about-facts::before { content: ''; position: absolute; top: -80px; right: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(232,114,42,0.10); } .about-facts h3 { position: relative; font-family: var(--font-display); font-size: 1.6rem; color: var(--white); margin-bottom: 28px; } .about-facts dl { position: relative; display: grid; gap: 18px; } .about-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.08); } .about-facts div:last-child { border-bottom: none; padding-bottom: 0; } .about-facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.45); font-weight: 600; } .about-facts dd { font-size: 0.96rem; color: var(--white); font-weight: 600; text-align: right; } .about-text h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.5rem); color: var(--primary); margin-bottom: 20px; line-height: 1.2; } .about-text > p { margin-bottom: 15px; color: var(--text); } .team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; } .team-card { display: flex; align-items: center; gap: 15px; padding: 20px; background: var(--light); border-radius: var(--radius-sm); border: 1px solid var(--border); transition: var(--transition); } .team-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .team-avatar { width: 55px; height: 55px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 800; font-size: 1.1rem; flex-shrink: 0; } .team-card h4 { font-size: 1rem; color: var(--primary); } .team-card p { font-size: 0.8rem; color: var(--text-light); } /* ── ABLAUF ────────────────────────────────────────────────────────────────── */ .process { background: var(--primary); color: var(--white); position: relative; overflow: hidden; } .process::before { content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; border-radius: 50%; background: rgba(232,114,42,0.05); } .process .section-tag { background: rgba(232,114,42,0.2); } .process .section-header h2 { color: var(--white); } .process .section-header p { color: rgba(255,255,255,0.6); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: relative; } .process-grid::before { content: ''; position: absolute; top: 50px; left: 12.5%; right: 12.5%; height: 2px; background: rgba(255,255,255,0.1); } .process-step { text-align: center; position: relative; z-index: 2; } .process-number { width: 100px; height: 100px; border-radius: 50%; background: rgba(232,114,42,0.1); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; font-size: 2rem; font-weight: 900; color: var(--accent); transition: var(--transition); } .process-step:hover .process-number { background: var(--accent); color: var(--white); transform: scale(1.1); } .process-step h3 { font-size: 1.1rem; margin-bottom: 10px; font-weight: 700; } .process-step p { font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.6; } /* ── FLIESSTEXT (Leistungsseiten) ──────────────────────────────────────────── */ .prose h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--primary); margin: 46px 0 16px; line-height: 1.25; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.12rem; color: var(--primary); margin: 30px 0 10px; font-weight: 700; } .prose p { margin-bottom: 16px; } .prose > ul { margin: 0 0 20px 0; display: grid; gap: 11px; } .prose > ul li { display: flex; align-items: flex-start; gap: 11px; } .prose > ul li::before { content: '✓'; color: var(--accent); font-weight: 900; flex-shrink: 0; line-height: 1.7; } .prose strong { color: var(--primary); } .spec-table { width: 100%; border-collapse: collapse; margin: 8px 0 26px; font-size: 0.95rem; } .spec-table caption { text-align: left; font-weight: 700; color: var(--primary); padding-bottom: 12px; } .spec-table th, .spec-table td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: top; } .spec-table thead th { background: var(--light); color: var(--primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; } .spec-table tbody th { font-weight: 700; color: var(--primary); width: 26%; } .spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .callout { background: var(--light); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 20px 24px; margin: 26px 0; } .callout p:last-child { margin-bottom: 0; } .callout strong { color: var(--primary); } .region-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 24px; } .region-list li { background: var(--light); border: 1px solid var(--border); border-radius: 50px; padding: 7px 16px; font-size: 0.86rem; color: var(--text); } /* ── QUERVERWEISE ──────────────────────────────────────────────────────────── */ .related { background: var(--lighter); } .related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .related-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 30px 28px; transition: var(--transition); display: block; } .related-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: var(--shadow-md); } .related-card .tag { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); font-weight: 700; } .related-card h3 { font-size: 1.15rem; color: var(--primary); margin: 8px 0 8px; } .related-card p { font-size: 0.9rem; color: var(--text-light); } /* ── FAQ ───────────────────────────────────────────────────────────────────── */ .faq-grid { max-width: 820px; margin: 0 auto; } .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 15px; overflow: hidden; transition: var(--transition); } .faq-item.active { box-shadow: var(--shadow-md); border-color: var(--accent); } .faq-question { width: 100%; padding: 22px 25px; background: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.02rem; font-weight: 600; color: var(--primary); text-align: left; transition: var(--transition); gap: 15px; } .faq-question:hover { color: var(--accent); } .faq-icon { width: 30px; height: 30px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--accent); transition: var(--transition); flex-shrink: 0; } .faq-item.active .faq-icon { background: var(--accent); color: var(--white); transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-answer-inner { padding: 0 25px 22px; color: var(--text-light); line-height: 1.7; } /* ── CTA ───────────────────────────────────────────────────────────────────── */ .cta-banner { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); padding: 80px 0; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; top: -50%; left: -10%; width: 400px; height: 400px; border-radius: 50%; background: rgba(255,255,255,0.05); } .cta-banner::after { content: ''; position: absolute; bottom: -30%; right: -5%; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,0.05); } .cta-banner h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--white); margin-bottom: 15px; position: relative; } .cta-banner p { color: rgba(255,255,255,0.88); font-size: 1.1rem; margin-bottom: 35px; max-width: 560px; margin-left: auto; margin-right: auto; position: relative; } .cta-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; position: relative; } /* ── OFFERTE / FORMULAR ────────────────────────────────────────────────────── */ .offer-section { background: var(--lighter); } .offer-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: start; } .form-card { background: var(--white); border-radius: var(--radius-lg); padding: 45px 40px; box-shadow: var(--shadow-md); border: 1px solid var(--border); } .form-card h3 { font-family: var(--font-display); font-size: 1.7rem; color: var(--primary); margin-bottom: 8px; } .form-card > p.form-intro { font-size: 0.95rem; color: var(--text-light); margin-bottom: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--primary); margin-bottom: 8px; } .form-group .req { color: var(--accent); } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--text); background: var(--white); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .form-group textarea { min-height: 130px; resize: vertical; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,114,42,0.12); } .form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: #d93025; } .field-error { display: none; font-size: 0.8rem; color: #d93025; margin-top: 6px; font-weight: 600; } .field-error.show { display: block; } /* Honeypot: für Menschen unsichtbar, für Bots ein gefundenes Fressen. Nicht display:none — manche Bots überspringen versteckte Felder. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-submit { width: 100%; background: var(--accent); color: var(--white); padding: 16px 30px; border-radius: 50px; font-weight: 800; font-size: 1rem; box-shadow: 0 4px 20px var(--accent-glow); transition: var(--transition); } .form-submit:hover:not(:disabled) { background: var(--accent-dark); transform: translateY(-2px); } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .form-note { font-size: 0.8rem; color: var(--text-light); margin-top: 16px; line-height: 1.6; } .form-note a { color: var(--accent); font-weight: 600; text-decoration: underline; } .form-status { margin-top: 20px; padding: 16px 18px; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 600; display: none; } .form-status.show { display: block; } .form-status.ok { background: #e8f5ec; color: #1c6b36; border: 1px solid #b7dfc4; } .form-status.err { background: #fdeceb; color: #a3241c; border: 1px solid #f3c2be; } /* ── KONTAKTKARTEN + KARTE ─────────────────────────────────────────────────── */ .contact-cards { display: grid; gap: 20px; } .contact-info-card { background: var(--white); padding: 28px 26px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border); transition: var(--transition); display: flex; gap: 20px; align-items: flex-start; } .contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); } .contact-info-icon { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; box-shadow: 0 4px 15px var(--accent-glow); flex-shrink: 0; } .contact-info-card h4 { font-size: 1.05rem; color: var(--primary); margin-bottom: 6px; } .contact-info-card p { font-size: 0.93rem; color: var(--text-light); line-height: 1.6; } .contact-info-card a { color: var(--accent); font-weight: 600; } .contact-info-card a:hover { text-decoration: underline; } /* Karten-Platzhalter: Google Maps lädt erst auf Klick. Das spart beim ersten Seitenaufruf rund ein Megabyte Fremd-JavaScript und verhindert, dass die IP jedes Besuchers ungefragt an Google geht. */ .map-section { margin-top: 60px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .map-facade { position: relative; width: 100%; min-height: 340px; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px 24px; color: var(--white); background: radial-gradient(700px 340px at 70% -20%, rgba(232,114,42,0.22), transparent 60%), repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 12px), linear-gradient(150deg, #16202e 0%, #1a2332 60%, #24313f 100%); } .map-facade__pin { font-size: 2rem; } .map-facade strong { font-size: 1.05rem; font-weight: 700; } .map-facade span { font-size: 0.9rem; color: rgba(255,255,255,0.65); max-width: 420px; } .map-facade__btn { margin-top: 6px; background: var(--accent); color: var(--white); padding: 12px 26px; border-radius: 50px; font-weight: 700; font-size: 0.92rem; } .map-facade__btn:hover { background: var(--accent-dark); } .map-section iframe { width: 100%; height: 380px; border: none; display: block; } /* ── FOOTER ────────────────────────────────────────────────────────────────── */ footer { background: var(--dark); color: rgba(255,255,255,0.6); padding: 70px 0 0; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand .logo { font-size: 1.8rem; margin-bottom: 15px; display: inline-block; } .footer-brand p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; } .footer-col h4 { color: var(--white); font-size: 1rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1px; } .footer-col ul li { margin-bottom: 12px; } .footer-col ul li a { font-size: 0.9rem; } .footer-col ul li a:hover { color: var(--accent); padding-left: 5px; } .footer-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; font-size: 0.9rem; } .footer-contact-item span { color: var(--accent); } .footer-bottom { padding: 25px 0; font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; } .footer-bottom a { color: var(--accent); } .footer-bottom a:hover { text-decoration: underline; } /* Betreiberhinweis dezent: er gehört dem Dienstleister, nicht dem Kunden — deshalb kleiner und blasser als das Copyright der Firma. */ .footer-powered { font-size: 0.8rem; color: rgba(255,255,255,0.38); } .footer-powered a { color: rgba(255,255,255,0.6); font-weight: 600; } .footer-powered a:hover { color: var(--accent); } /* ── SCHWEBENDE SCHALTFLÄCHEN ──────────────────────────────────────────────── */ .back-to-top { position: fixed; bottom: 30px; right: 30px; z-index: 999; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 15px var(--accent-glow); opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition); } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: var(--accent-dark); } .whatsapp-btn { position: fixed; bottom: 30px; left: 30px; z-index: 999; width: 55px; height: 55px; border-radius: 50%; background: #25d366; color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 4px 15px rgba(37,211,102,0.4); transition: var(--transition); animation: whatsappPulse 2s infinite; } .whatsapp-btn:hover { transform: scale(1.1); } @keyframes whatsappPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.4); } 70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* ── RECHTSTEXTE ───────────────────────────────────────────────────────────── */ main.legal { padding: 150px 0 80px; background: var(--lighter); } .legal h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--primary); line-height: 1.2; margin-bottom: 10px; } .legal .lead { color: var(--text-light); font-size: 1.02rem; margin-bottom: 40px; } .legal h2 { font-size: 1.25rem; color: var(--primary); margin: 40px 0 14px; line-height: 1.35; } .legal h3 { font-size: 1.02rem; color: var(--primary); margin: 26px 0 10px; } .legal p { margin-bottom: 14px; } .legal ul { margin: 0 0 16px 22px; list-style: disc; } .legal li { margin-bottom: 8px; } .legal a { color: var(--accent); text-decoration: underline; } .legal-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 30px; margin-bottom: 28px; } .legal-card address { font-style: normal; } .legal dl { display: grid; gap: 14px; } .legal dl > div { display: flex; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .legal dl > div:last-child { border-bottom: none; padding-bottom: 0; } .legal dt { min-width: 210px; font-weight: 700; color: var(--primary); font-size: 0.92rem; } .legal dd { flex: 1; min-width: 220px; } .legal-note { background: var(--light); border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; margin: 24px 0; font-size: 0.94rem; } .legal-updated { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--text-light); } /* ── 404 ───────────────────────────────────────────────────────────────────── */ .nf { text-align: center; } .nf .code { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 7rem); font-weight: 900; color: var(--primary); line-height: 1; } .nf .code span { color: var(--accent); } .nf h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 14px 0 12px; color: var(--primary); } .nf p { max-width: 500px; margin: 0 auto 30px; color: var(--text-light); } .nf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .nf-links { margin-top: 40px; font-size: 0.92rem; } .nf-links a { color: var(--accent); text-decoration: underline; } /* ── RESPONSIV ─────────────────────────────────────────────────────────────── */ /* Sobald die zweispaltigen Raster einspaltig werden, füllt jedes Element die volle Breite — eine seitliche Einblendung um 60 px ragt dann aus dem Viewport und erzeugt horizontales Scrollen. Unterhalb dieser Grenze deshalb von unten einblenden statt von der Seite; der Effekt bleibt, der Überstand entfällt. */ @media (max-width: 1280px) { .reveal-left, .reveal-right { transform: translateY(40px); } .reveal-left.active, .reveal-right.active { transform: translateY(0); } } @media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .process-grid::before { display: none; } .footer-grid { grid-template-columns: 1fr 1fr; } .offer-grid { grid-template-columns: 1fr; } .nav-links { gap: 18px; } .nav-links a { font-size: 0.8rem; } } @media (max-width: 900px) { .nav-links { display: none; } .hamburger { display: flex; } } @media (max-width: 768px) { .hero { min-height: auto; padding: 130px 0 90px; } .hero h1 { font-size: 2.2rem; } .hero p { font-size: 1rem; } .hero-buttons { flex-direction: column; align-items: stretch; } .hero-buttons a { justify-content: center; } .hero-scroll-indicator { display: none; } .hero-usp { gap: 14px; flex-direction: column; } .page-hero { padding: 120px 0 55px; } .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 30px; margin-top: -40px; } .stat-item:not(:last-child)::after { display: none; } .services-grid { grid-template-columns: 1fr; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .team-cards { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .form-card { padding: 32px 24px; } .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } .section-padding { padding: 70px 0; } .cta-buttons { flex-direction: column; align-items: stretch; } .cta-buttons a { justify-content: center; } .whatsapp-btn { bottom: 24px; left: 20px; } .back-to-top { bottom: 24px; right: 20px; } main.legal { padding: 120px 0 60px; } .legal dt { min-width: 100%; } .legal-card { padding: 22px 20px; } .spec-table tbody th { width: auto; } } @media (max-width: 480px) { .stats-bar { grid-template-columns: 1fr; } } /* Bewegungsreduktion respektieren (System-Einstellung «Animationen reduzieren»). */ @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; } .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; } .hero-particles { display: none; } } /* Druck: Navigation, schwebende Knöpfe und Karte weglassen. */ @media print { header, .mobile-menu, .whatsapp-btn, .back-to-top, .hero-scroll-indicator, #preloader, .map-section, .cta-banner, .offer-section { display: none !important; } body { color: #000; } a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 0.8em; } }