/* ============================================================ kategorie.css — vier Gewerke-Welten der ZEE-Website Ergänzt styles.css und landing.css (ersetzt nichts). Jede Kategorie hat eine eigene Farbstimmung, aber dieselbe Struktur, Typografie und Abstände. Die Farben sind gebrochen und leicht entsättigt gewählt (kein reines Blau/Rot/Grau), damit sie warm und wertig wirken statt technisch-grell. Gesetzt wird die Welt über data-kat am : data-kat="waerme" Petrol/Mint — wie die Startseite data-kat="sanierung" Salbei/Lehm — grünlich, hell, warm data-kat="elektro" Terrakotta — hell-rötlich bis Amber data-kat="rohbau" Schiefer — gedecktes Blaugrau ============================================================ */ /* ---------------- Farbwelten ---------------- */ /* Wärme, Klima, Heizung — identisch zur Startseite (Petrol & Mint) */ body[data-kat="waerme"]{ --kat:#0c5260; --kat-tief:#072e36; --kat-hell:#e4f2ef; --kat-hell-2:#d3ece5; --kat-akzent:#2fae95; --kat-linie:#c3ddd8; --kat-grad:linear-gradient(125deg,#0c5260 0%,#14807f 52%,#38c2a4 100%); --kat-flaeche:#eef7f5; } /* Sanierung & Renovierung — Salbeigrün auf Lehm, deutlich heller */ body[data-kat="sanierung"]{ --kat:#3f7d63; --kat-tief:#28503f; --kat-hell:#eaf3ec; --kat-hell-2:#dcecdf; --kat-akzent:#7fb98f; --kat-linie:#cadfcf; --kat-grad:linear-gradient(125deg,#2f6c56 0%,#5d9b78 48%,#9ecfa5 100%); --kat-flaeche:#f2f7f1; } /* Elektroarbeiten — Blau, dunkel bis hell (Wunsch Mubarik 23.07.2026, Vorbild directpool.de: Marken-Verlauf #40B5CA -> #0B576F, Akzent #02A2FF). Der Verlauf läuft bewusst von hell nach DUNKEL: Weißer Text auf #40B5CA erreicht nur 2,4:1 Kontrast, auf #0B576F dagegen 8,1:1. So bleibt die Farbwelt erhalten und die Schrift trotzdem gut lesbar. */ body[data-kat="elektro"]{ --kat:#0b576f; --kat-tief:#083c4d; --kat-hell:#e6f4fa; --kat-hell-2:#dff3fb; --kat-akzent:#40b5ca; --kat-linie:#c4e3ee; --kat-grad:linear-gradient(138deg,#40b5ca 0%,#127b96 45%,#0b576f 100%); --kat-flaeche:#f2f9fc; } /* Rohbau & Beton — Schiefer: blaugrau mit Wärme, nie kaltes Grau */ body[data-kat="rohbau"]{ --kat:#48606e; --kat-tief:#2c3d47; --kat-hell:#ecf1f3; --kat-hell-2:#dde6ea; --kat-akzent:#7d98a5; --kat-linie:#cbd8de; --kat-grad:linear-gradient(125deg,#334954 0%,#54707e 52%,#8aa6b2 100%); --kat-flaeche:#f1f5f6; } /* Die Kategorieseiten färben die geerbten Grundtöne um, damit Knöpfe, Links und Flächen aus styles.css automatisch mitziehen. */ body[data-kat]{ --blue:var(--kat); --blue-600:var(--kat); --blue-700:var(--kat-tief); --blue-900:var(--kat-tief); --blue-100:var(--kat-hell-2); --blue-50:var(--kat-hell); --green:var(--kat-akzent); --green-600:var(--kat); --green-100:var(--kat-hell-2); --grad:var(--kat-grad); --sky:var(--kat-flaeche); --line:var(--kat-linie); --brand:var(--kat); background:var(--kat-flaeche); } /* ---------------- Kopfbereich der Kategorieseite ---------------- */ .kat-hero{ position:relative; padding:clamp(58px,8vw,104px) 0 clamp(46px,6vw,74px); background:var(--kat-grad); color:#fff; overflow:hidden; } .kat-hero::after{ /* weicher Auslauf nach unten */ content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px; background:linear-gradient(to bottom,rgba(255,255,255,0),var(--kat-flaeche)); opacity:.22;pointer-events:none; } .kat-hero .container{position:relative;z-index:2} .kat-hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center; } .kat-hero .eyebrow{ color:#fff;opacity:.9; display:inline-flex;align-items:center;gap:9px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.26); padding:7px 15px;border-radius:999px; font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:600; backdrop-filter:blur(6px); } .kat-hero h1{ color:#fff;margin:20px 0 0; font-size:clamp(34px,4.6vw,55px); } .kat-hero h1 em{font-style:normal;color:#fff;text-decoration:underline;text-decoration-thickness:.09em;text-underline-offset:.13em;text-decoration-color:rgba(255,255,255,.45)} .kat-hero .lead{ color:rgba(255,255,255,.93);margin-top:18px; font-size:clamp(17px,1.5vw,20px);max-width:56ch; } .kat-usps{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} .kat-usps li{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.24); color:#fff;font-size:14.5px;font-weight:500; padding:8px 14px;border-radius:999px; } .kat-usps li::before{ content:"";width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,.85);flex:0 0 7px; } .kat-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .kat-hero-cta .btn-weiss{ background:#fff;color:var(--kat-tief); font-family:var(--font-display);font-weight:700;font-size:18.5px;letter-spacing:-.01em; padding:19px 34px;border-radius:16px;display:inline-flex;align-items:center;gap:12px; box-shadow:0 18px 44px -12px rgba(0,0,0,.55), 0 0 0 6px rgba(255,255,255,.16); transition:transform .2s var(--ease), box-shadow .2s; } .kat-hero-cta .btn-weiss:hover{ transform:translateY(-3px); box-shadow:0 26px 56px -14px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.22); } .kat-hero-cta .btn-weiss svg{width:20px;height:20px;transition:transform .22s var(--ease)} .kat-hero-cta .btn-weiss:hover svg{transform:translateX(5px)} .kat-hero-cta .btn-klar{ background:rgba(255,255,255,.1);color:#fff;font-weight:600; border:1px solid rgba(255,255,255,.36); padding:15px 24px;border-radius:14px;display:inline-flex;align-items:center;gap:9px; transition:background .2s; } .kat-hero-cta .btn-klar:hover{background:rgba(255,255,255,.2)} /* Bild im Kopfbereich — vollständig sichtbar, nichts wird abgeschnitten */ .kat-hero-bild{ border-radius:22px;overflow:hidden; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.24); box-shadow:0 30px 70px -28px rgba(0,0,0,.55); } .kat-hero-bild img{width:100%;height:auto;display:block} @media (max-width:900px){ .kat-hero-grid{grid-template-columns:1fr} .kat-hero-bild{order:-1} } /* ---------------- Meister-Hinweis ---------------- */ /* Betont die meistergeführte Ausführung, ohne ZEE selbst als eingetragenen Handwerksbetrieb auszugeben (ZEE koordiniert). */ .kat-meister{ display:flex;gap:16px;align-items:flex-start; background:#fff;border:1px solid var(--kat-linie); border-left:4px solid var(--kat); border-radius:16px;padding:20px 24px; box-shadow:var(--shadow-sm); margin-top:clamp(28px,4vw,44px); } .kat-meister svg{width:26px;height:26px;flex:0 0 26px;color:var(--kat);margin-top:2px} .kat-meister b{display:block;color:var(--kat-tief);font-family:var(--font-display);font-size:17.5px;margin-bottom:4px} .kat-meister p{color:var(--muted);font-size:16px;line-height:1.6} /* ---------------- Leistungs-Karten ---------------- */ .kat-karten{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;margin-top:38px; } .kat-karte{ background:#fff;border:1px solid var(--kat-linie);border-radius:18px; padding:26px 26px 24px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s, border-color .25s; } .kat-karte:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--kat-akzent)} .kat-karte-kopf{display:flex;align-items:center;gap:13px;margin-bottom:14px} .kat-karte-icon{ width:44px;height:44px;flex:0 0 44px;border-radius:13px; background:var(--kat-hell);color:var(--kat); display:grid;place-items:center; } .kat-karte-icon svg{width:23px;height:23px} .kat-karte h3{font-size:20px;color:var(--kat-tief)} .kat-karte p{color:var(--muted);font-size:16.5px;line-height:1.62} .kat-karte ul{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px} .kat-karte ul li{ font-size:13.5px;color:var(--kat-tief);font-weight:550; background:var(--kat-hell);border:1px solid var(--kat-linie); padding:5px 11px;border-radius:999px; } /* ---------------- Projektgalerie ---------------- */ /* Bilder werden NIE zugeschnitten: die Karte richtet sich nach dem Bild. */ /* Galerie: feste Spaltenzahl, damit die Bilder sauber nebeneinander stehen und die Reihen gleich hoch beginnen (Mubarik 23.07.2026). Kein Bild ueberspannt mehr zwei Spalten - das riss vorher Luecken ins Raster. */ .kat-galerie{ display:grid;grid-template-columns:repeat(3,minmax(0,340px)); gap:24px;margin-top:38px;align-items:start;justify-content:center; } @media (max-width:1050px){ .kat-galerie{grid-template-columns:repeat(2,minmax(0,340px))} } @media (max-width:620px){ .kat-galerie{grid-template-columns:minmax(0,360px)} } .kat-projekt{ background:#fff;border:1px solid var(--kat-linie);border-radius:18px; overflow:hidden;box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s; } .kat-projekt:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .kat-projekt-bild{background:var(--kat-hell);line-height:0; aspect-ratio:3/4;overflow:hidden} /* Hochformat-Raster (3:4). Die meisten Aufnahmen sind hochkant und fuellen die Kachel damit vollstaendig aus. Die wenigen Querformate werden nur seitlich sanft angeschnitten (position:center) - der Bildinhalt bleibt erhalten, das Raster steht ruhig und gleich hoch. So wirkt die Galerie aufgeraeumt. */ .kat-projekt-bild img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} .kat-projekt-text{padding:18px 20px 20px;text-align:center} .kat-projekt-text b{ display:block;font-family:var(--font-display);font-size:17.5px; color:var(--kat-tief);margin-bottom:6px;letter-spacing:-.01em; } .kat-projekt-text span{color:var(--muted);font-size:15.5px;line-height:1.55;display:block} .kat-projekt-tag{ display:block;margin-top:14px;text-align:center; font-family:var(--font-display); font-size:13.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--kat); background:none;border:0;padding:0; /* keine Pille, keine Umrandung */ } /* Frueher spannten Querformate zwei Spalten. Das erzeugte Luecken und eine unruhige Anordnung -> alle Bilder sind jetzt gleich breit. */ /* ---------------- Ablauf ---------------- */ .kat-ablauf{counter-reset:schritt;display:grid;gap:16px;margin-top:34px} .kat-schritt{ display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start; background:#fff;border:1px solid var(--kat-linie);border-radius:16px;padding:20px 22px; } .kat-schritt::before{ counter-increment:schritt;content:counter(schritt); width:38px;height:38px;border-radius:11px; background:var(--kat);color:#fff; display:grid;place-items:center; font-family:var(--font-display);font-weight:700;font-size:17px; } .kat-schritt b{display:block;color:var(--kat-tief);font-family:var(--font-display);font-size:17.5px;margin-bottom:4px} .kat-schritt p{color:var(--muted);font-size:16px;line-height:1.6} /* ---------------- Abschnitt mit farbiger Fläche ---------------- */ .kat-flaeche{background:var(--kat-hell);border-top:1px solid var(--kat-linie);border-bottom:1px solid var(--kat-linie)} /* ---------------- Anfrage-Formular ---------------- */ .kat-formular{ background:#fff;border:1px solid var(--kat-linie);border-radius:22px; padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-md); max-width:820px;margin:34px auto 0; } .kat-formular .feld{margin-bottom:18px} .kat-formular label{ display:block;font-weight:600;color:var(--kat-tief); font-size:15.5px;margin-bottom:7px; } .kat-formular label .opt{font-weight:400;color:var(--muted);font-size:14px} .kat-formular input[type=text], .kat-formular input[type=tel], .kat-formular input[type=email], .kat-formular select, .kat-formular textarea{ width:100%;padding:13px 15px;font:inherit;font-size:16.5px;color:var(--ink); background:var(--kat-flaeche); border:1.5px solid var(--kat-linie);border-radius:12px; transition:border-color .18s, box-shadow .18s, background .18s; } .kat-formular input:focus,.kat-formular select:focus,.kat-formular textarea:focus{ outline:none;border-color:var(--kat);background:#fff; box-shadow:0 0 0 4px color-mix(in srgb, var(--kat) 14%, transparent); } .kat-formular textarea{min-height:130px;resize:vertical} .kat-formular .zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:640px){.kat-formular .zeile{grid-template-columns:1fr}} .kat-formular .btn-senden{ width:100%;padding:16px 24px;border:0;border-radius:14px; background:var(--kat-grad);color:#fff; font-family:var(--font-display);font-weight:650;font-size:17.5px; box-shadow:0 14px 32px -14px var(--kat); transition:transform .2s var(--ease), box-shadow .2s; } .kat-formular .btn-senden:hover{transform:translateY(-2px);box-shadow:0 20px 42px -16px var(--kat)} .kat-formular .hinweis{color:var(--muted);font-size:14.5px;margin-top:14px;line-height:1.55} .kat-formular .datenschutz{display:flex;gap:11px;align-items:flex-start;margin:6px 0 20px} .kat-formular .datenschutz input{margin-top:4px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--kat)} .kat-formular .datenschutz label{font-weight:400;font-size:15px;color:var(--muted);margin:0} .kat-formular .hp{position:absolute;left:-9999px;opacity:0} /* ---------------- Fragen (FAQ) ---------------- */ .kat-faq{margin-top:34px;display:grid;gap:12px;max-width:900px} .kat-faq details{ background:#fff;border:1px solid var(--kat-linie);border-radius:14px; padding:18px 22px;transition:border-color .2s; } .kat-faq details[open]{border-color:var(--kat-akzent)} .kat-faq summary{ cursor:pointer;font-family:var(--font-display);font-weight:650; font-size:17.5px;color:var(--kat-tief);list-style:none; display:flex;justify-content:space-between;gap:16px;align-items:center; } .kat-faq summary::-webkit-details-marker{display:none} .kat-faq summary::after{ content:"+";font-size:24px;color:var(--kat);flex:0 0 auto; transition:transform .22s var(--ease);line-height:1; } .kat-faq details[open] summary::after{transform:rotate(45deg)} .kat-faq details p{color:var(--muted);font-size:16.5px;line-height:1.65;margin-top:13px} /* ---------------- Startseiten-Kacheln der vier Bereiche ---------------- Umgebaut 23.07.2026 (Mubarik): keine Fotos mehr, sondern kompakte abgerundete Rechtecke mit Symbol und kurzer Beschriftung, alle vier nebeneinander in EINER Zeile. Die Startseite soll nicht überladen wirken; die echten Projektfotos stehen auf den Kategorieseiten. */ /* 12.08.2026: 3 statt 4 Spalten. Mit der neuen PV-Kachel sind es FUENF Bereiche - bei 4 Spalten stand Rohbau allein in der zweiten Reihe (4+1, sieht aus wie vergessen). 3+2 wirkt gesetzt. Ab 1180px passen alle fuenf nebeneinander. */ .gewerke-grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:16px;margin-top:34px; } @media (min-width:1180px){ .gewerke-grid{grid-template-columns:repeat(5,1fr)} } @media (max-width:900px){ .gewerke-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .gewerke-grid{grid-template-columns:1fr} } .gewerk-kachel{ position:relative;display:flex;flex-direction:column;align-items:flex-start; background:#fff;border:1px solid var(--line);border-radius:18px; padding:22px 20px 20px; box-shadow:var(--shadow-sm); transition:transform .24s var(--ease), box-shadow .24s, border-color .24s; } .gewerk-kachel:hover{ transform:translateY(-4px);box-shadow:var(--shadow-md); border-color:var(--kachel-ton,var(--blue-600)); } /* farbige Kante oben — macht die vier Welten schon hier sichtbar */ .gewerk-kachel::before{ content:"";position:absolute;top:0;left:0;right:0;height:4px; border-radius:18px 18px 0 0; background:var(--kachel-grad,var(--grad)); } .gewerk-kachel-icon{ width:52px;height:52px;border-radius:15px; background:var(--kachel-hell,#eef4f5); color:var(--kachel-ton,var(--blue-600)); display:grid;place-items:center;margin-bottom:15px; transition:transform .24s var(--ease); } .gewerk-kachel:hover .gewerk-kachel-icon{transform:scale(1.06)} .gewerk-kachel-icon svg{width:27px;height:27px} .gewerk-kachel-titel{ font-family:var(--font-display);font-weight:700; font-size:18px;line-height:1.25;letter-spacing:-.02em; color:var(--ink);margin-bottom:7px; } .gewerk-kachel-sub{color:var(--muted);font-size:15px;line-height:1.5;flex:1} .gewerk-mehr{ display:inline-flex;align-items:center;gap:7px;margin-top:15px; font-weight:650;color:var(--kachel-ton,var(--blue-600));font-size:15px; } .gewerk-mehr svg{width:16px;height:16px;transition:transform .22s var(--ease)} .gewerk-kachel:hover .gewerk-mehr svg{transform:translateX(4px)} .gewerk-kachel[data-ton="waerme"] {--kachel-ton:#0c5260;--kachel-hell:#e4f2ef;--kachel-linie:#c3ddd8;--kachel-grad:linear-gradient(90deg,#0c5260,#38c2a4)} .gewerk-kachel[data-ton="sanierung"]{--kachel-ton:#3f7d63;--kachel-hell:#eaf3ec;--kachel-linie:#cadfcf;--kachel-grad:linear-gradient(90deg,#2f6c56,#9ecfa5)} .gewerk-kachel[data-ton="elektro"] {--kachel-ton:#0b576f;--kachel-hell:#e6f4fa;--kachel-linie:#c4e3ee;--kachel-grad:linear-gradient(90deg,#0b576f,#40b5ca)} .gewerk-kachel[data-ton="rohbau"] {--kachel-ton:#48606e;--kachel-hell:#ecf1f3;--kachel-linie:#cbd8de;--kachel-grad:linear-gradient(90deg,#334954,#8aa6b2)} /* 12.08.2026: fuenfte Kachel Photovoltaik. Bernstein statt Petrol/Gruen - die Sonnenseite soll sich von Waermepumpe und Elektro unterscheiden. Ton dunkel genug fuer Text auf Weiss (Kontrast geprueft). */ .gewerk-kachel[data-ton="pv"] {--kachel-ton:#9a6410;--kachel-hell:#fbf1de;--kachel-linie:#ecdcbb;--kachel-grad:linear-gradient(90deg,#9a6410,#e8b551)} /* ---------------- Querverweise am Seitenende ---------------- */ .kat-weitere{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:32px} .kat-weitere a{ display:flex;flex-direction:column;gap:5px; background:#fff;border:1px solid var(--kat-linie);border-radius:15px; padding:18px 20px;transition:transform .2s var(--ease), border-color .2s; } .kat-weitere a:hover{transform:translateY(-3px);border-color:var(--kat-akzent)} .kat-weitere b{font-family:var(--font-display);color:var(--kat-tief);font-size:16.5px} .kat-weitere span{color:var(--muted);font-size:14.5px;line-height:1.5} /* ---------------- Bewegung nur, wenn gewünscht ---------------- */ @media (prefers-reduced-motion:reduce){ .gewerk-kachel,.kat-karte,.kat-projekt,.kat-hero-cta a,.kat-formular .btn-senden{transition:none} .gewerk-kachel:hover,.kat-karte:hover,.kat-projekt:hover{transform:none} } /* ============================================================ Bild-Text-Abschnitte im Wechsel (Startseite) Vorbild directpool.de: Bild und Text nebeneinander, Seite wechselt von Abschnitt zu Abschnitt. Ergänzt 23.07.2026. ============================================================ */ .wechsel{display:grid;gap:clamp(38px,5vw,64px)} .wechsel-zeile{ display:grid;grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,58px);align-items:center; } /* jede zweite Zeile: Bild nach rechts */ .wechsel-zeile:nth-child(even) .wechsel-bild{order:2} .wechsel-bild{ position:relative;border-radius:22px;overflow:hidden; box-shadow:0 24px 54px -26px rgba(11,42,51,.42); background:var(--blue-50); } .wechsel-bild img{width:100%;height:auto;display:block} /* dezente Farbkante passend zur Marke */ .wechsel-bild::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:5px; background:var(--grad); } .wechsel-text .eyebrow{margin-bottom:14px;display:inline-block} .wechsel-text h3{ font-size:clamp(23px,2.5vw,31px);margin-bottom:14px;color:var(--ink); } .wechsel-text p{color:var(--muted);font-size:17px;line-height:1.68;margin-bottom:14px} .wechsel-punkte{margin-top:16px;display:grid;gap:10px} .wechsel-punkte li{ display:flex;gap:11px;align-items:flex-start; color:var(--ink);font-size:16.5px;line-height:1.55; } .wechsel-punkte svg{ width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:var(--green-600); } .wechsel-punkte li span{flex:1} .wechsel-cta{ display:inline-flex;align-items:center;gap:9px;margin-top:20px; font-weight:650;color:var(--blue-600);font-size:16.5px; } .wechsel-cta svg{width:17px;height:17px;transition:transform .22s var(--ease)} .wechsel-cta:hover svg{transform:translateX(4px)} @media (max-width:860px){ .wechsel-zeile{grid-template-columns:1fr} .wechsel-zeile:nth-child(even) .wechsel-bild{order:0} } /* ============================================================ Videobereich (Startseite) Lädt erst auf Klick und bindet keinen externen Dienst ein (kein YouTube-Embed -> kein Cookie-Banner nötig). Bleibt ausgeblendet, solange keine Videodatei hinterlegt ist. ============================================================ */ .video-block{ position:relative;border-radius:24px;overflow:hidden; background:var(--blue-900); box-shadow:0 30px 70px -30px rgba(11,42,51,.5); aspect-ratio:16/9;max-width:960px;margin:34px auto 0; } .video-block video,.video-block iframe{width:100%;height:100%;display:block;border:0;object-fit:cover} .video-vorschau{position:absolute;inset:0;cursor:pointer;border:0;padding:0;background:none;width:100%} .video-vorschau img{width:100%;height:100%;object-fit:cover} .video-vorschau::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(7,46,54,.62),rgba(7,46,54,.15)); } .video-play{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:82px;height:82px;border-radius:50%; background:rgba(255,255,255,.94); display:grid;place-items:center; box-shadow:0 14px 40px -10px rgba(0,0,0,.5); transition:transform .24s var(--ease), background .2s; } .video-vorschau:hover .video-play{transform:translate(-50%,-50%) scale(1.08);background:#fff} .video-play svg{width:32px;height:32px;color:var(--blue-700);margin-left:4px} .video-bild-text{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:26px 30px;color:#fff;text-align:left; } .video-bild-text b{display:block;font-family:var(--font-display);font-size:20px;margin-bottom:4px} .video-bild-text span{font-size:15.5px;opacity:.9} /* Startseiten-Überschrift: eine Zeile, ein Stil (Mubarik 23.07.2026). Vorher war "Modernisierung" farbig abgesetzt; das erzeugte zwei Schriftbilder in einer Zeile. Jetzt durchgehend gleich gesetzt. */ .hero-eine-zeile{ font-size:clamp(29px,3.5vw,44px); line-height:1.08; text-wrap:balance; /* gleichmäßiger Umbruch, falls die Zeile doch bricht */ max-width:100%; } /* KEIN white-space:nowrap - die Hero-Spalte ist schmaler als das Fenster, eine erzwungene Zeile lief rechts aus dem Bild (geprüft 23.07.2026). */ /* ============================================================ Service & Wartung: Einleitung mit Bild daneben (23.07.2026). Der Abschnitt hatte bisher gar kein Foto, rechts blieb die Fläche leer. Jetzt Text links, Bild rechts - wie in den übrigen Wechsel-Abschnitten der Startseite. ============================================================ */ .svc-intro{ display:grid;grid-template-columns:1.15fr .85fr; gap:clamp(26px,4vw,54px);align-items:center; } .svc-intro-text .eyebrow{margin-bottom:12px;display:inline-block} .svc-intro-bild{ border-radius:22px;overflow:hidden;position:relative; box-shadow:0 24px 54px -26px rgba(11,42,51,.42); background:var(--blue-50); } .svc-intro-bild img{width:100%;height:auto;display:block} .svc-intro-bild::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--grad); } /* Fakten-Kasten statt Foto (Mubarik 31.07.2026): an dieser Stelle interessiert den Kunden, was drin ist und was es kostet, nicht ein weiteres Baustellenbild. */ .svc-fakten{ background:var(--surface,#fff); border:1px solid var(--line-strong,#c4dcd8); border-radius:22px;padding:30px 30px 26px; box-shadow:0 24px 54px -26px rgba(11,42,51,.42); position:relative;overflow:hidden; } .svc-fakten::after{ content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--grad); } .sf-kopf{ display:inline-block;font-family:var(--font-display);font-size:13px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:12px; } .sf-preis{display:flex;flex-direction:column;gap:2px;margin-bottom:20px} .sf-preis b{font-family:var(--font-display);font-size:26px;line-height:1.15;color:var(--blue-700)} .sf-preis span{font-size:15px;color:var(--muted)} .sf-liste{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:11px} .sf-liste li{ position:relative;padding-left:29px;font-size:16px;line-height:1.5;color:#39474c; } .sf-liste li::before{ content:"";position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%; background:var(--green-100,#dbf3ec); } .sf-liste li::after{ content:"";position:absolute;left:6px;top:10px;width:7px;height:4px; border-left:2px solid var(--green-600,#1aa589);border-bottom:2px solid var(--green-600,#1aa589); transform:rotate(-45deg); } .sf-fuss{font-size:14.5px;color:var(--muted);margin:0 0 18px} @media (max-width:860px){ .svc-intro{grid-template-columns:1fr} .svc-intro-bild{order:-1;max-width:420px;margin:0 auto} .svc-fakten{padding:26px 24px 24px} } /* ---------- Vorher/Nachher-Karte (11.08.2026) ---------- Mubarik: "es sind teilweise vor und nachher bilder." Zwei Bilder desselben Raums nebeneinander, klar beschriftet. Die Karte ueberspannt zwei Spalten der Galerie, damit beide Bilder gross genug bleiben. Am Handy stehen sie untereinander - nebeneinander waeren sie zu klein, um den Unterschied zu erkennen. */ .kat-projekt.vorhernachher{grid-column:span 2} @media (max-width:1050px){ .kat-projekt.vorhernachher{grid-column:span 2} } @media (max-width:620px){ .kat-projekt.vorhernachher{grid-column:span 1} } .vn-paar{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--kat-linie)} @media (max-width:620px){ .vn-paar{grid-template-columns:1fr} } .vn-bild{position:relative;line-height:0;background:var(--kat-hell)} .vn-bild img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4} .vn-marke{ position:absolute;left:12px;top:12px; font-family:var(--font-display);font-size:12px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; padding:6px 12px;border-radius:999px; background:rgba(255,255,255,.92);color:var(--kat-tief); box-shadow:0 2px 8px rgba(11,42,51,.18); } .vn-bild.ist-nachher .vn-marke{background:linear-gradient(135deg,#0c5260,#14807f);color:#fff}