/* ===== Anfang: Gemeinsames CSS (site.css) ===== */ /* ========================= 1) Design-Tokens (Farben, Abstände, Typo) ========================= */ :root{ /* --- Hintergrund & Grundfarben (Dark Theme) --- */ --bg:#0b1020; /* Basis-Hintergrund (sehr dunkel) */ --bg2:#060912; /* Verlauf / zweiter Hintergrundton */ --text:#eaf0ff; /* Standard-Textfarbe (hell) */ --muted:rgba(234,240,255,.72); /* Sekundärtext/„muted“ (z.B. Beschreibungen) */ --line:rgba(234,240,255,.16); /* Linien/Border-Farbe (dezent) */ --panel:rgba(255,255,255,.06); /* Card-Hintergrund (leicht transparent) */ --panel2:rgba(255,255,255,.09);/* Hover/aktives Panel (etwas stärker) */ /* --- Globale Akzentfarben (Buttons, Highlights) --- */ --accent:#6aa6ff; /* Primär-Akzent (Blau) */ --accent2:#2ecc71; /* Sekundär-Akzent (Grün) */ --warn:#f1c40f; /* Hinweis/Warnung (Gelb) */ --danger:#ff6b6b; /* Fehler/Alarm (Rot) */ /* --- Gewerke-spezifische Farben (Dots/Badges etc.) --- */ --elektroA:#ff6b6b; /* Elektro-Farbton A (Rot) */ --elektroB:#f39c12; /* Elektro-Farbton B (Orange) */ --sanitaerA:#6aa6ff;/* Sanitär-Farbton A (Blau) */ --sanitaerB:#20c997;/* Sanitär-Farbton B (Türkisgrün) */ /* Wärmepumpe – eigener Akzent */ --wp:#4fd1c5; --wpGlow: rgba(79, 209, 197, .22); /* --- Layout & Typo --- */ --shadow:0 18px 70px rgba(0,0,0,.48); /* Standard-Schatten für Cards */ --r:18px; /* Standard Border-Radius (rundere Optik) */ --max:1140px; /* Max. Content-Breite */ --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; /* Fonts */ } /* ========================= 2) Light Theme Override Aktiv, wenn ========================= */ [data-theme="light"]{ --bg:#f7f9ff; /* helles Basis-Hintergrund */ --bg2:#edf2ff; /* zweiter Hintergrundton/Verlauf */ --text:#0b1528; /* dunkle Textfarbe */ --muted:rgba(11,21,40,.72); /* Sekundärtext im Light Theme */ --line:rgba(11,21,40,.14); /* Linien/Border im Light Theme */ --panel:rgba(11,21,40,.05); /* Card-Hintergrund im Light Theme */ --panel2:rgba(11,21,40,.08);/* Hover/aktives Panel im Light Theme */ --shadow:0 16px 50px rgba(11,21,40,.12); /* weicherer Schatten */ } /* ========================= 3) Globale Baseline-Styles ========================= */ *{ box-sizing:border-box; } /* Padding/Borders in Breiten mitrechnen */ html,body{ height:100%; } body{ margin:0; font-family:var(--font); color:var(--text); /* Hintergrund: mehrere radial-gradients + linear gradient */ background: radial-gradient(900px 600px at 15% -10%, rgba(106,166,255,.28), transparent 55%), /* Blau-Glow oben links */ radial-gradient(700px 520px at 95% 5%, rgba(46,204,113,.18), transparent 55%), /* Grün-Glow oben rechts */ radial-gradient(900px 700px at 60% 115%, rgba(241,196,15,.12), transparent 55%), /* Gelb-Glow unten */ linear-gradient(180deg, var(--bg), var(--bg2)); /* Grund-Verlauf */ line-height:1.55; } a{ color:inherit; text-decoration:none; } /* Links ohne Unterstreichung */ a:hover{ text-decoration:underline; } /* Unterstreichung im Hover */ /* Content-Container: Breite + Innenabstand */ .wrap{ max-width:var(--max); margin:0 auto; padding:28px 20px; } /* ========================= 4) Header / Navigation (Desktop & Mobile) ========================= */ header{ position:sticky; /* bleibt oben stehen beim Scrollen */ top:0; z-index:50; backdrop-filter: blur(12px); /* Glas-Effekt */ background: color-mix(in srgb, var(--bg) 72%, transparent); /* halbtransparent */ border-bottom:1px solid var(--line); } /* Nav-Leiste: links Brand, mitte Links, rechts CTA */ .nav{ max-width:var(--max); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; } /* Brand (Logo + Firmenname/Claim) */ .brand{ display:flex; align-items:center; gap:12px; min-width:240px; } .brand:hover{ text-decoration:none; } /* Farbiger Logo-Block (Placeholder/Marke) */ .logo{ width:40px; height:40px; border-radius:14px; background: linear-gradient(135deg, var(--accent), var(--accent2)); /* Blau -> Grün */ border:1px solid color-mix(in srgb, var(--line) 60%, transparent); box-shadow:0 16px 44px rgba(106,166,255,.18); } .brand strong{ display:block; font-size:14px; letter-spacing:.2px; } /* Firmenname */ .brand span{ display:block; font-size:12px; color:var(--muted); margin-top:1px; } /* Claim */ .navlinks{ display:flex; /* Desktop-Navigation */ gap:14px; flex-wrap:wrap; /* bricht um, wenn nötig */ justify-content:center; } .navlinks a{ font-size:13px; color:var(--muted); padding:8px 10px; border-radius:10px; white-space:nowrap; } /* Hover-Effekt auf Navlinks */ .navlinks a:hover{ background:var(--panel2); color:var(--text); text-decoration:none; } /* Markiert aktuelle Seite per aria-current="page" */ .navlinks a[aria-current="page"]{ background: color-mix(in srgb, var(--panel2) 85%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } /* CTA-Bereich rechts (Theme Button, Menü Button, Telefon) */ .navcta{ display:flex; align-items:center; gap:10px; justify-content:flex-end; min-width:260px; } /* Allgemeiner Button-Stil */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; } .btn:hover{ background:var(--panel2); text-decoration:none; } /* Primär-Button (Gradient) */ .btn.primary{ background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 55%, var(--accent))); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow:0 18px 50px rgba(106,166,255,.22); } .btn.primary:hover{ filter:brightness(1.04); } /* Hilfsklasse für kleine Icons (SVG/IMG) */ .icon{ width:18px; height:18px; display:inline-block; } /* ===== Mobile Dropdown Menü ===== */ /* Menü-Button: auf Desktop versteckt, auf Mobile sichtbar */ .navToggle{ display:none; } /* Mobile-Menü Container (wird per JS ein/ausgeblendet via aria-hidden) */ .mobileNav{ display:none; /* default aus */ border-top:1px solid var(--line); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(12px); } /* Mobile-Menü Inhalte: Grid mit 2 Spalten */ .mobileNavInner{ max-width:var(--max); margin:0 auto; padding:12px 20px 16px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; } /* Mobile-Menü Link-Kacheln */ .mobileNavInner a{ display:block; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background: var(--panel); color: var(--text); font-weight:700; font-size:13px; text-decoration:none; } .mobileNavInner a:hover{ background:var(--panel2); } /* Responsive: kleine Anpassungen bei bestimmten Breiten */ @media (max-width: 980px){ .navcta{ min-width:auto; } .brand{ min-width:auto; } } @media (max-width: 900px){ .navlinks{ display:none; } /* Desktop-Links aus */ .navToggle{ display:inline-flex; } /* Menü-Button ein */ .mobileNav[aria-hidden="false"]{ display:block; } /* Mobile-Menü sichtbar wenn aria-hidden=false */ } @media (max-width: 520px){ .mobileNavInner{ grid-template-columns: 1fr; } /* 1 Spalte auf sehr kleinen Geräten */ } /* ========================= 5) Sections / Cards / Hero ========================= */ section{ padding:18px 0; } /* Standard-Abstand zwischen Abschnitten */ /* Standard-Card (boxy Content-Container) */ .card{ padding:16px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); } /* Hero-Card: großer Introblock */ .heroCard{ padding:26px; border-radius:var(--r); background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 85%, transparent), var(--panel)); border:1px solid var(--line); box-shadow:var(--shadow); position:relative; overflow:hidden; /* für Glows im :before */ } /* Hero Hintergrund-Glows */ .heroCard:before{ content:""; position:absolute; inset:-2px; background: radial-gradient(650px 260px at 18% 0%, rgba(106,166,255,.22), transparent 60%), radial-gradient(650px 260px at 82% 10%, rgba(46,204,113,.16), transparent 60%); pointer-events:none; } /* Inhalt über den Glows */ .heroContent{ position:relative; } /* Badge / Pill im Hero (kleines Label) */ .badge{ display:inline-flex; align-items:center; gap:10px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 85%, transparent); font-size:12px; color:var(--muted); width:fit-content; } /* H1-Style (groß, responsive) */ .h1{ font-size: clamp(28px, 3.2vw, 44px); line-height:1.10; margin:14px 0 10px; letter-spacing:-0.6px; } /* Lead-Text (Hero Einleitung) */ .lead{ margin:0 0 18px; color:var(--muted); font-size:15px; max-width:70ch; } /* CTA-Zeile im Hero */ .heroCTAs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; } /* ========================= 6) Layout Grids / SideCards / Listen ========================= */ .grid2{ display:grid; grid-template-columns: 1.1fr .9fr; /* links größer als rechts */ gap:16px; align-items:stretch; } @media (max-width: 980px){ .grid2{ grid-template-columns:1fr; } } /* Mobile: 1 Spalte */ /* SideCard: oft rechts neben Content (z.B. Wärmepumpe-Seite) */ .sideCard{ padding:18px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; overflow:hidden; } .sideCard h3{ margin:0; font-size:14px; } .sideCard p{ margin:0; color:var(--muted); font-size:13px; } /* List-Container (z.B. Bullet-Items als Cards) */ .list{ display:flex; flex-direction:column; gap:10px; margin-top:4px; } /* Einzelnes Item (mit Dot links) */ .item{ display:flex; gap:10px; padding:12px; border-radius:14px; border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, transparent); } /* Dot (Standard) */ .dot{ width:10px; height:10px; border-radius:999px; margin-top:4px; flex:0 0 auto; background:var(--accent); box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 15%, transparent); } /* Dot-Varianten je Gewerk */ .dot.elektro{ background: var(--elektroA); box-shadow:0 0 0 6px color-mix(in srgb, var(--elektroA) 18%, transparent); } .dot.sanitaer{ background: var(--sanitaerA); box-shadow:0 0 0 6px color-mix(in srgb, var(--sanitaerA) 18%, transparent); } .dot.heizung{ background: var(--accent2); box-shadow:0 0 0 6px color-mix(in srgb, var(--accent2) 18%, transparent); } /* Section-Header (Titel + Beschreibung) */ .sectionHead{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:10px; } .sectionHead h2{ margin:0; font-size:18px; letter-spacing:.1px; } .sectionHead p{ margin:0; color:var(--muted); font-size:13px; max-width:78ch; } /* 3-Spalten Grid (z.B. Startseite: Schnellnavigation) */ .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; } @media (max-width: 980px){ .grid3{ grid-template-columns:1fr; } } /* Reihe kleiner Pills/Buttons */ .pillrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .pill{ padding:6px 10px; border-radius:999px; border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, transparent); font-size:12px; color:var(--muted); } /* ========================= 7) KPI-Elemente (Startseite) ========================= */ .kpis{ margin-top:18px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; } @media (max-width: 640px){ .kpis{ grid-template-columns:1fr; } } .kpi{ padding:12px; border-radius:14px; border:1px solid var(--line); background:var(--panel); } .kpi b{ display:block; font-size:14px; } .kpi span{ display:block; font-size:12px; color:var(--muted); margin-top:2px; } /* ========================= 8) Ablauf-Seite (Steps) ========================= */ .twoCols{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } @media (max-width: 980px){ .twoCols{ grid-template-columns:1fr; } } .steps{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; } .step{ display:flex; gap:10px; padding:14px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); } .num{ width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--accent), var(--accent2)); font-weight:900; font-size:13px; flex:0 0 auto; } /* Vertrauens-Grid (z.B. „Warum wir“) */ .trustGrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:10px; } @media (max-width: 980px){ .trustGrid{ grid-template-columns:1fr; } } .trustItem{ border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, transparent); border-radius:14px; padding:12px; display:flex; gap:10px; } .trustIcon{ width:28px; height:28px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--accent), var(--accent2)); font-weight:900; font-size:13px; flex:0 0 auto; } .trustItem b{ display:block; font-size:13px; } .trustItem span{ display:block; margin-top:2px; font-size:12px; color:var(--muted); } /* ========================= 9) FAQ-Seite ========================= */ details{ border-radius:var(--r); border:1px solid var(--line); background:var(--panel); padding:12px 14px; } details + details{ margin-top:10px; } summary{ cursor:pointer; font-weight:800; font-size:13px; } details p{ color:var(--muted); font-size:13px; margin:8px 0 0; } /* ========================= 10) Kontakt-Seite (Formular + Infobox) ========================= */ .contact{ display:grid; grid-template-columns: 1fr .9fr; /* links Formular, rechts Infobox */ gap:12px; align-items:stretch; } @media (max-width: 980px){ .contact{ grid-template-columns:1fr; } } form{ display:grid; gap:10px; } /* Form-Layout */ label{ font-size:12px; color:var(--muted); } input, textarea{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid var(--line); background: color-mix(in srgb, var(--panel2) 70%, transparent); color:var(--text); outline:none; font-family:var(--font); font-size:13px; } textarea{ min-height:110px; resize:vertical; } .fine{ font-size:11px; color:var(--muted); margin:6px 0 0; } /* Kontakt-Info-Tabelle (Label + Value) */ .contactInfo{ display:grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin-top: 10px; } .contactInfo .label{ color: var(--muted); font-size: 12px; } .contactInfo .value{ font-size: 13px; } .contactInfo a{ text-decoration:none; } .contactInfo a:hover{ text-decoration:underline; } @media (max-width: 520px){ .contactInfo{ grid-template-columns: 1fr; } .contactInfo .label{ margin-top: 6px; } } /* ========================= 11) Footer (global) ========================= */ footer{ border-top:1px solid var(--line); margin-top:18px; padding-top:18px; color:var(--muted); font-size:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; } /* ========================= 12) Bilder / Medien-Wrapper (global) ========================= */ img { max-width: 100%; /* Bilder nie größer als Container */ height: auto; /* Seitenverhältnis erhalten */ display: block; /* unerwünschte Baseline-Lücken vermeiden */ } /* Allgemeiner Media-Container (Rahmen + Schatten) */ .media { border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); } /* Media-Bild: Full width */ .media img { width: 100%; height: auto; display: block; } /* Cover-Variante: 16:9 Ausschnitt + object-fit */ .media.cover img { aspect-ratio: 16 / 9; height: 100%; object-fit: cover; } /* ========================= 13) Leistungen: Hero mit Bild (Text links, Bild rechts) ========================= */ .heroSplit{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:stretch; } /* Rechts: Bildcontainer im Hero */ .heroMedia{ margin:0; border-radius: var(--r); border:1px solid var(--line); background: rgba(255,255,255,.06); box-shadow: var(--shadow); overflow:hidden; } .heroMedia img{ width:100%; height:100%; object-fit:cover; display:block; } /* Kartenbild oben in einer Card (z.B. Leistungen-Kacheln) */ .cardImg{ width:100%; height:200px; object-fit:cover; display:block; border-radius:14px; border:1px solid var(--line); background: rgba(255,255,255,.04); margin-bottom:12px; } /* ========================= 14) 2-Spalten Split Section (z.B. Text + Bild) ========================= */ .split{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:stretch; } /* Media als Card ohne Padding (Bild übernimmt die Fläche) */ .media.card{ padding:0; overflow:hidden; } .media.card img{ width:100%; height:100%; object-fit:cover; display:block; } /* Mobile-Anpassungen für Bild-Layouts */ @media (max-width: 900px){ .heroSplit, .split{ grid-template-columns: 1fr; } /* alles untereinander */ .cardImg{ height:180px; } .heroMedia img{ height:auto; } } /* ========================= 15) Geteilte Card mit Bild (Text links, Bild rechts) - Gut für „Hinweisbox + Foto daneben“ ========================= */ .splitCard{ display:grid; grid-template-columns: 1.1fr .9fr; gap:16px; align-items:stretch; } /* Linke Seite: Textbereich, vertikal zentriert */ .splitText{ display:flex; flex-direction:column; justify-content:center; } /* Rechte Seite: Bildcontainer */ .splitMedia{ margin:0; border-radius:14px; overflow:hidden; border:1px solid var(--line); background:rgba(255,255,255,.04); } .splitMedia img{ width:100%; height:100%; object-fit:cover; display:block; } /* Mobile: Bild unter Text + Höhe begrenzen */ @media (max-width: 900px){ .splitCard{ grid-template-columns:1fr; } .splitMedia{ max-height:260px; } } /* ========================= 16) Wärmepumpe – eigener Akzent (NEU) WICHTIG: Diese Variablen gehören in :root! ========================= */ /* :root{ --wp:#4fd1c5; --wpGlow: rgba(79, 209, 197, .22); } */ /* Dot-Variante Wärmepumpe (für ) */ .dot.wp{ background: var(--wp); box-shadow: 0 0 0 6px var(--wpGlow); } /* ===== Mobile: Header kompakter & ruhiger ===== */ @media (max-width: 520px){ body{ background: radial-gradient(700px 420px at 15% -10%, rgba(106,166,255,.18), transparent 60%), radial-gradient(560px 420px at 95% 5%, rgba(46,204,113,.12), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2)); } /* Header weniger "glasig" und flacher */ header{ backdrop-filter: blur(10px); } .nav{ padding: 8px 12px; /* war 12px 20px */ gap: 10px; } /* Brand kompakter */ .brand{ gap: 10px; min-width: auto; } .logo{ width: 34px; /* war 40px */ height: 34px; border-radius: 12px; box-shadow: 0 12px 34px rgba(106,166,255,.16); } /* Text neben Logo ausblenden (macht den Header deutlich aufgeräumter) */ .brand strong, .brand span{ display: none; } /* CTA-Bereich kompakter */ .navcta{ min-width: auto; gap: 8px; } .btn{ padding: 8px 10px; /* war 10px 12px */ border-radius: 12px; font-size: 12px; } /* Optional: Theme-Button mobil ausblenden (Menü + Call reicht meistens) */ #themeBtn{ display: none; } /* Telefon-CTA etwas kürzer machen */ .btn.primary{ padding: 8px 10px; } } /* ===== Lightbox ===== */ .lightboxOverlay{ position: fixed; inset: 0; background: rgba(5,10,20,.78); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .18s ease; } .lightboxOverlay.active{ opacity: 1; pointer-events: auto; } .lightboxOverlay img{ max-width: 85vw; max-height: 85vh; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.6); background: #000; } /* ===== Ende: Gemeinsames CSS (site.css) ===== */