/* ========================================================================== TED Bau & Renovation — tedbau.ch Palette abgeleitet aus dem Logo: Signalrot auf Weiss, dazu Anthrazit und ein warmer Gips-Ton als Gegenfarbe. Keine Verläufe, keine Fremdfarben. Typografie: Manrope (Titel, kantig und schwer wie das Logo) + IBM Plex Sans (Fliesstext, technisch und gut lesbar). Beide self-hosted. ========================================================================== */ /* ---------- Schriften: self-hosted, latin + latin-ext ---------- */ @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/manrope-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --rot: #bd1717; --rot-dunkel: #971111; --tinte: #16161a; --tinte-2: #2c2a27; --grau: #56534e; --gips: #efeae3; --gips-2: #e2dace; --linie: #d6cec2; --weiss: #ffffff; --f-titel: 'Manrope', 'Segoe UI', system-ui, sans-serif; --f-text: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; --breite: 1180px; --luft: 1.25rem; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; font-family: var(--f-text); font-size: 1rem; line-height: 1.65; color: var(--tinte-2); background: var(--weiss); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--rot); } h1, h2, h3, h4 { font-family: var(--f-titel); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--tinte); margin: 0 0 .75rem; text-wrap: balance; } /* Titlurile mari merg cu majuscule si litere apropiate — Manrope 800 tine bine la tracking negativ, dar doar pana la -.03em; peste, „RR" si „NN" se ating. */ h1, h2 { text-transform: uppercase; letter-spacing: -.025em; word-spacing: .04em; /* In Grossbuchstaben wird jedes Wort breiter. Deutsche Komposita wie DATENSCHUTZERKLÄRUNG passen dann auf einem 360px-Display in keine Zeile mehr und ragen aus dem Kasten. `hyphens` greift nur, wenn es sonst nicht passt — liefert das Trennwörterbuch. */ hyphens: auto; overflow-wrap: break-word; } h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); } h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 700; } p { margin: 0 0 1rem; } ul { margin: 0 0 1rem; padding-left: 1.15rem; } li { margin-bottom: .35rem; } :focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--tinte); color: #fff; padding: .75rem 1.25rem; z-index: 200; } .skip-link:focus { left: 0; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--luft); } .sektion { padding: 3.5rem 0; } .sektion--gips { background: var(--gips); } .sektion--dunkel { background: var(--tinte); color: #d8d5d0; } .sektion--dunkel h2, .sektion--dunkel h3 { color: #fff; } /* Abschnittsmarke: Nummer + rote Linie, linksbündig statt zentriert */ .marke { display: flex; align-items: center; gap: .65rem; font-family: var(--f-titel); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rot); margin-bottom: .85rem; } .marke::after { content: ''; flex: 0 0 48px; height: 3px; background: var(--rot); } .sektion--dunkel .marke { color: #ff5a5a; } .sektion--dunkel .marke::after { background: #ff5a5a; } .vorspann { max-width: 62ch; font-size: 1.05rem; color: var(--grau); } .sektion--dunkel .vorspann { color: #b9b5af; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .8rem 1.5rem; font-family: var(--f-titel); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } .btn--rot { background: var(--rot); color: #fff; } .btn--rot:hover { background: var(--rot-dunkel); } .btn--linie { border-color: var(--tinte); color: var(--tinte); background: transparent; } .btn--linie:hover { background: var(--tinte); color: #fff; } .btn--hell { border-color: #fff; color: #fff; background: transparent; } .btn--hell:hover { background: #fff; color: var(--tinte); } /* ---------- Kopfzeile ---------- */ .kopf { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--linie); } .kopf__leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; } .kopf__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; } .kopf__logo img { width: 88px; height: auto; } .nav { display: none; } .nav a { font-family: var(--f-titel); font-weight: 700; font-size: .95rem; color: var(--tinte); text-decoration: none; padding: .4rem 0; border-bottom: 3px solid transparent; } .nav a:hover { color: var(--rot); } .nav a[aria-current='page'] { border-bottom-color: var(--rot); } .kopf__tel { display: none; font-family: var(--f-titel); font-weight: 800; font-size: .98rem; color: var(--tinte); text-decoration: none; white-space: nowrap; } .kopf__tel:hover { color: var(--rot); } .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px; height: 48px; padding: 0 11px; background: none; border: 1px solid var(--linie); border-radius: 2px; cursor: pointer; } .burger span { display: block; height: 2px; background: var(--tinte); transition: transform .2s ease, opacity .2s ease; } .burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobilnav { display: none; border-top: 1px solid var(--linie); background: #fff; padding: .5rem 0 1.25rem; } .mobilnav.offen { display: block; } .mobilnav a { display: block; padding: .85rem 0; font-family: var(--f-titel); font-weight: 700; color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--gips-2); } .mobilnav a[aria-current='page'] { color: var(--rot); } .mobilnav .btn { width: 100%; margin-top: 1rem; } /* ---------- Hero: asymmetrisch, Text links, hohes Bild rechts ---------- */ .hero { background: var(--gips); border-bottom: 1px solid var(--linie); overflow: hidden; } .hero__raster { display: grid; gap: 2rem; /* padding-block, nicht padding: die Kurzform würde das seitliche Polster von .wrap auf 0 setzen. Auf dem Desktop fiel das nicht auf (der zentrierte Container hat ohnehin Luft), auf dem Handy klebte die Schrift am Rand. */ padding-block: 2.5rem 0; } .hero__text { align-self: center; padding-bottom: 2.5rem; } .hero__ort { display: inline-block; font-family: var(--f-titel); font-weight: 800; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; background: var(--rot); padding: .4rem .7rem; margin-bottom: 1.1rem; } /* Früher stand hier `.hero h1 {margin-bottom:1rem}`. Die H1 im Hero ist heute eine von fünf `.hero__zeile` im selben Rasterfeld — der Abstand nach unten kommt jetzt von `.hero__titelfeld`, und eine Zeile mit eigener Aussenkante sässe 16px höher als die anderen vier. */ .hero__lead { font-size: 1.1rem; max-width: 46ch; color: var(--tinte-2); margin-bottom: 1.5rem; } .hero__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; } .hero__fakten { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); } .hero__fakt strong { display: block; font-family: var(--f-titel); font-weight: 800; font-size: 1.6rem; color: var(--rot); line-height: 1; } .hero__fakt span { font-size: .85rem; color: var(--grau); } /* Kein negativer Aussenabstand: der hat auf dem Handy die Seite breiter gemacht als das Viewport und einen horizontalen Scrollbalken erzeugt. */ .hero__bild { position: relative; } .hero__bild img { width: 100%; object-fit: cover; } /* ---------- Leistungen: abwechselnde Reihen statt Icon-Raster ---------- */ .leistung { display: grid; gap: 1.5rem; padding: 2.25rem 0; border-top: 1px solid var(--linie); } .leistung:first-of-type { border-top: 0; } .leistung__nr { font-family: var(--f-titel); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--gips-2); margin-bottom: .35rem; } .leistung__inhalt h3 { margin-bottom: .6rem; } .leistung__inhalt p { color: var(--grau); margin-bottom: .85rem; } .leistung__liste { list-style: none; padding: 0; margin: 0 0 1rem; } .leistung__liste li { position: relative; padding-left: 1.35rem; font-size: .95rem; color: var(--tinte-2); } .leistung__liste li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--rot); } .leistung__bild img { width: 100%; } /* ---------- Karten (Leistungsübersicht auf der Startseite) ---------- */ .karten { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); } .karte { background: #fff; padding: 1.5rem 1.35rem; text-decoration: none; display: block; } .karte:hover { background: var(--gips); } .karte__nr { font-family: var(--f-titel); font-weight: 800; font-size: .78rem; letter-spacing: .1em; color: var(--rot); } .karte h3 { margin: .35rem 0 .4rem; font-size: 1.2rem; } .karte p { color: var(--grau); font-size: .93rem; margin: 0; } /* ---------- Einsatzgebiet: bewusst dicker roter Rand links ---------- */ .orte { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 1.75rem 0 0; } .orte li { font-size: .88rem; padding: .3rem .7rem; background: var(--weiss); border: 1px solid var(--linie); margin: 0; } /* ---------- Ablauf ---------- */ .ablauf { display: grid; gap: 1.5rem; counter-reset: schritt; } .schritt { border-top: 3px solid var(--rot); padding-top: .9rem; } .schritt__nr { font-family: var(--f-titel); font-weight: 800; font-size: .75rem; letter-spacing: .14em; color: var(--rot); } /* Auf dunklem Grund reicht das Logorot nicht: #bd1717 auf #16161a ergibt nur 2,8:1. Aufgehelltes Rot kommt auf 6,7:1 und bleibt trotzdem die Hausfarbe. */ .sektion--dunkel .schritt__nr { color: #ff6b6b; } .schritt h3 { font-size: 1.1rem; margin: .3rem 0 .4rem; } .schritt p { font-size: .93rem; color: var(--grau); margin: 0; } .sektion--dunkel .schritt p { color: #b9b5af; } /* ---------- Galerie ---------- */ .galerie { display: grid; gap: .75rem; } .galerie__figur { margin: 0; position: relative; } .galerie__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; line-height: 0; } .galerie__btn img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .galerie__btn:hover img { opacity: .9; } .galerie figcaption { font-size: .85rem; color: var(--grau); padding: .5rem .1rem 0; line-height: 1.45; } .filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; } .filter button { font-family: var(--f-titel); font-weight: 700; font-size: .88rem; min-height: 44px; padding: .5rem 1rem; background: #fff; border: 1px solid var(--linie); border-radius: 2px; cursor: pointer; color: var(--tinte); } .filter button[aria-pressed='true'] { background: var(--tinte); border-color: var(--tinte); color: #fff; } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10, 10, 12, .93); display: flex; align-items: center; justify-content: center; padding: 1rem; } .lightbox[hidden] { display: none; } .lightbox img { max-width: 100%; max-height: 82vh; width: auto; } .lightbox__text { position: absolute; bottom: 1.1rem; left: 1rem; right: 1rem; text-align: center; color: #ddd; font-size: .9rem; } .lightbox button { position: absolute; min-width: 48px; min-height: 48px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; border-radius: 2px; } .lightbox__zu { top: 1rem; right: 1rem; } .lightbox__vor { top: 50%; right: 1rem; transform: translateY(-50%); } .lightbox__zurueck { top: 50%; left: 1rem; transform: translateY(-50%); } /* ---------- Über uns ---------- */ .profil { display: grid; gap: 1.75rem; } .profil__bild img { width: 100%; } .unterschrift { width: 200px; margin-top: 1.25rem; } /* ---------- Formular ---------- */ .formular { display: grid; gap: 1.1rem; } .feld { display: flex; flex-direction: column; gap: .4rem; } .feld label { font-weight: 600; font-size: .92rem; } .feld .optional { font-weight: 400; color: var(--grau); } .feld input, .feld select, .feld textarea { font-family: var(--f-text); font-size: 1rem; padding: .8rem .9rem; min-height: 48px; border: 1px solid var(--linie); border-radius: 2px; background: #fff; color: var(--tinte); } .feld textarea { min-height: 140px; resize: vertical; } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: 3px solid var(--rot); outline-offset: 1px; border-color: var(--rot); } .feld-check { display: flex; align-items: flex-start; gap: .65rem; } .feld-check input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--rot); flex: 0 0 auto; } .feld-check label { font-size: .88rem; line-height: 1.55; color: var(--grau); font-weight: 400; } /* Antispam-Falle: optisch versteckt, aber ohne inline display:none */ .honig { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .hinweis { padding: 1rem 1.15rem; border-left: 4px solid var(--rot); background: #fdf3f3; font-size: .93rem; } .hinweis strong { display: block; margin-bottom: .2rem; } /* Kontaktdaten */ .kontaktliste { list-style: none; padding: 0; margin: 0; } .kontaktliste li { padding: .9rem 0; border-bottom: 1px solid var(--linie); margin: 0; } .kontaktliste span { display: block; font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--grau); margin-bottom: .15rem; } .kontaktliste a, .kontaktliste strong { font-family: var(--f-titel); font-weight: 700; font-size: 1.05rem; color: var(--tinte); text-decoration: none; } .kontaktliste a:hover { color: var(--rot); } /* ---------- Fusszeile ---------- */ .fuss { background: var(--tinte); color: #a5a19b; padding: 3rem 0 1.5rem; font-size: .93rem; } .fuss__raster { display: grid; gap: 2rem; } .fuss h3 { font-family: var(--f-titel); font-weight: 800; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 .85rem; } .fuss a { color: #d6d2cc; text-decoration: none; } .fuss a:hover { color: #fff; text-decoration: underline; } .fuss ul { list-style: none; padding: 0; margin: 0; } .fuss li { margin-bottom: .5rem; } .fuss__logo { width: 64px; margin-bottom: 1rem; } .fuss__unten { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid #32302d; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .85rem; } /* ---------- WhatsApp ---------- */ .wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .28); } .wa svg { width: 30px; height: 30px; fill: #fff; } /* ---------- Cookie-Banner ---------- */ .cookie { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 120; max-width: 460px; background: #fff; border: 1px solid var(--linie); border-top: 4px solid var(--rot); padding: 1.15rem 1.25rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .16); font-size: .9rem; } .cookie[hidden] { display: none; } .cookie p { margin: 0 0 .9rem; } .cookie__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; } .cookie__knoepfe button { font-family: var(--f-titel); font-weight: 700; font-size: .9rem; min-height: 44px; padding: .55rem 1rem; border-radius: 2px; cursor: pointer; border: 1px solid var(--tinte); background: #fff; color: var(--tinte); } .cookie__knoepfe button:first-child { background: var(--rot); border-color: var(--rot); color: #fff; } /* ---------- Rechtstexte ---------- */ .recht { max-width: 72ch; } .recht h2 { font-size: 1.35rem; margin-top: 2.25rem; } .recht h3 { font-size: 1.05rem; margin-top: 1.5rem; } .recht p, .recht li { font-size: .96rem; } .recht address { font-style: normal; } /* ---------- Fehlerseite ---------- */ .fehler { text-align: left; padding: 5rem 0; } .fehler__code { font-family: var(--f-titel); font-weight: 800; font-size: clamp(4rem, 18vw, 9rem); line-height: .9; color: var(--rot); } /* ========================================================================== Ab Tablet ========================================================================== */ @media (min-width: 640px) { .sektion { padding: 4.5rem 0; } .karten { grid-template-columns: repeat(2, 1fr); } .ablauf { grid-template-columns: repeat(2, 1fr); } .galerie { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .fuss__raster { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { :root { --luft: 2rem; } .sektion { padding: 5.5rem 0; } .burger, .mobilnav { display: none !important; } .nav { display: flex; gap: 1.75rem; align-items: center; } .kopf__tel { display: inline-block; } .kopf__logo img { width: 116px; } .kopf__leiste { min-height: 96px; } /* Hero 58 / 42 — bewusst nicht halbe-halbe */ .hero__raster { grid-template-columns: 58fr 42fr; gap: 3.5rem; padding-top: 3.5rem; } .hero__text { padding-bottom: 4rem; } .hero__bild { align-self: end; } .hero__bild img { max-height: 620px; } .leistung { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 3rem 0; } .leistung:nth-child(even) .leistung__bild { order: -1; } .karten { grid-template-columns: repeat(3, 1fr); } .ablauf { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .galerie { grid-template-columns: repeat(3, 1fr); } .profil { grid-template-columns: 42fr 58fr; gap: 3.5rem; align-items: start; } .fuss__raster { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; } .zweispalt { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } .zweispalt--schmal { grid-template-columns: 1.15fr .85fr; } .wa { right: 1.75rem; bottom: 1.75rem; } } /* ========================================================================== LEISTUNG + ORT — Seiten wie trockenbau-zuerich.html ========================================================================== */ .brotkrumen { background: #fff; border-bottom: 1px solid var(--linie); font-size: .85rem; color: var(--grau); padding: .7rem 0; } .brotkrumen a { color: var(--grau); text-decoration: none; } .brotkrumen a:hover { color: var(--rot); text-decoration: underline; } .brotkrumen span { color: var(--linie); } .brotkrumen span[aria-current] { color: var(--tinte); } /* Seitenspalte mit Kurzinfo */ .seitenspalte { position: relative; } .box { background: var(--gips); border: 1px solid var(--linie); border-top: 4px solid var(--rot); padding: 1.5rem 1.35rem; } .box h3 { font-size: 1.15rem; margin-bottom: .9rem; } .kurzinfo { margin: 0; } .kurzinfo > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); } .kurzinfo > div:last-child { border-bottom: 0; } .kurzinfo dt { font-size: .82rem; color: var(--grau); flex: 0 0 auto; } .kurzinfo dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--tinte); text-align: right; } /* Bildstreifen */ .streifen { display: grid; gap: 1rem; margin-top: 1.75rem; } .streifen__figur { margin: 0; } .streifen__figur img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .streifen__figur figcaption { font-size: .85rem; color: var(--grau); padding-top: .5rem; line-height: 1.45; } .galerie__note { margin-top: 1.5rem; font-size: .88rem; line-height: 1.6; color: var(--grau); max-width: 70ch; } /* Typische Fälle */ .scenarios { display: grid; gap: 1rem; margin-top: 1.75rem; } .scenario { background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--rot); padding: 1.15rem 1.25rem; } .scenario h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 .4rem; line-height: 1.35; } .scenario p { font-size: .93rem; line-height: 1.6; color: var(--grau); margin: 0; } /* Preisfaktoren */ .faktoren { margin: 0; display: grid; gap: 1.1rem; } .faktor { padding-left: 1rem; border-left: 2px solid var(--linie); } .faktor dt { font-weight: 700; font-size: .96rem; color: var(--tinte); margin-bottom: .2rem; } .faktor dd { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--grau); } /* FAQ */ .faq { display: grid; gap: 1.25rem; margin-top: 1.75rem; } .faq__item { border-top: 3px solid var(--rot); padding-top: .9rem; } .faq__item h3 { font-size: 1.05rem; margin: 0 0 .45rem; } .faq__item p { font-size: .94rem; line-height: 1.65; color: var(--grau); margin: 0; } /* Interne Verlinkung */ .linkbox h2 { font-size: 1.3rem; margin-bottom: .9rem; } .linkbox ul { list-style: none; padding: 0; margin: 0; } .linkbox li { margin: 0; border-bottom: 1px solid var(--linie); } .linkbox li a { display: block; padding: .7rem 0; color: var(--tinte); text-decoration: none; font-size: .95rem; } .linkbox li a:hover { color: var(--rot); } /* Übersichtsseite Einsatzgebiet */ .ortgruppe { margin-bottom: 3rem; } .ortgruppe > h2 { font-size: 1.4rem; padding-bottom: .6rem; border-bottom: 3px solid var(--rot); margin-bottom: 1.5rem; } .ortkarte { border-bottom: 1px solid var(--linie); padding: 1.25rem 0; } .ortkarte h3 { font-size: 1.15rem; margin: 0 0 .2rem; } .ortkarte > p { font-size: .87rem; color: var(--grau); margin: 0 0 .7rem; } .ortkarte ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .ortkarte li { margin: 0; } .ortkarte li a { display: inline-block; font-size: .85rem; padding: .35rem .75rem; background: var(--gips); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; } .ortkarte li a:hover { background: var(--rot); border-color: var(--rot); color: #fff; } @media (min-width: 640px) { .streifen { grid-template-columns: repeat(3, 1fr); } .scenarios { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .seitenspalte { position: sticky; top: 120px; } .ortgruppe { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; } .ortgruppe > h2 { grid-column: 1 / -1; } } /* ---------- Garantie-Siegel im Hero ---------- Sitzt bewusst auf dem Foto, nicht im Kopfbereich: die Kopfzeile ist nur 72 px hoch und sticky, dort würde ein goldenes Siegel das Logo erschlagen. Auf dem Bild hat es einen neutralen Hintergrund und steht trotzdem above the fold. */ .hero__bild .siegel { position: absolute; left: 12px; bottom: 12px; width: 92px; height: auto; z-index: 2; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .35)); } @media (min-width: 1024px) { /* Leicht über die Bildkante hinaus — so wirkt es wie ein aufgeklebtes Siegel und nicht wie ein Wasserzeichen. */ .hero__bild .siegel { left: -22px; bottom: 28px; width: 128px; } } /* ---------- Bilderstapel (Über uns, Abschnitt Ausrüstung) ---------- */ .bildstapel { display: grid; gap: 1rem; } .bildstapel figure { margin: 0; } .bildstapel img { width: 100%; } .bildstapel figcaption { font-size: .85rem; line-height: 1.5; color: var(--grau); padding-top: .45rem; } .bildpaar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* ---------- Bild im Leistungs-Kärtchen (Startseite) ---------- */ .karte { padding: 0; } .karte__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1.1rem; } .karte .karte__nr, .karte h3, .karte p { margin-left: 1.35rem; margin-right: 1.35rem; } .karte p { padding-bottom: 1.5rem; } .karte:hover .karte__bild { opacity: .92; } /* ---------- Karte im Abschnitt Einsatzgebiet ---------- */ .gebietskarte { width: 100%; height: auto; } /* .bildstapel img (0,1,1) schlägt .unterschrift (0,1,0) — die Signatur würde sonst auf volle Spaltenbreite gezogen. */ .bildstapel .unterschrift { width: 200px; margin-top: 1.5rem; } /* Karte in der rechten Spalte des Abschnitts Einsatzgebiet */ .kartenspalte { margin-top: 1.75rem; } @media (min-width: 1024px) { /* Die Karte mittig zur linken Spalte, sonst klebt sie oben */ .kartenspalte { margin-top: 0; align-self: center; } } /* ========================================================================== IKONEN — eigene SVGs, inline. Kein Icon-Set von der Stange. ========================================================================== */ .ikon { width: 1em; height: 1em; flex: 0 0 auto; color: var(--rot); vertical-align: -.12em; } .ikon-wrap { display: inline-flex; align-items: center; justify-content: center; margin-right: .55rem; font-size: 1.15em; } .ikon-wrap--gross { font-size: 1.5em; margin-right: .6rem; } .sektion--dunkel .ikon { color: #ff6b6b; } /* Kontaktliste: kleines Icon vor dem Label */ .kontaktliste span { display: flex; align-items: center; gap: .4rem; } .kontaktliste span .ikon { width: .95em; height: .95em; } /* ========================================================================== Abschluss-Block mit Siegel ========================================================================== */ /* Das Siegel steht seit der letzten Runde oben im Hero, bei den beiden anderen. Hier bleibt nur der Text — rechts gibt das Foto dahinter frei. */ .abschluss { display: grid; gap: 2rem; align-items: center; } @media (min-width: 1024px) { .abschluss { grid-template-columns: minmax(0, 620px); gap: 3rem; } } /* ========================================================================== HERO MIT VIDEO — 5 Szenen in Schleife, eine Zeile je Szene Das Video läuft jetzt auch auf dem Handy. Dort spielt eine eigene Fassung im Format 4:5 (hero-hoch.mp4, 745 KB): die 16:9-Datei hätte im hohen Hero über die halbe Breite verloren. ========================================================================== */ .hero--video { position: relative; background: var(--tinte) url('../images/hero/hero-poster-hoch.webp') center/cover no-repeat; border-bottom: 0; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Der Schleier ist bewusst dünn — der Film soll zu sehen sein. Lesbar bleibt die Schrift, weil der Verlauf genau dort am dunkelsten ist, wo sie steht (unten auf dem Handy, links auf dem Desktop) und weil h1 einen Schatten hat. */ .hero__schleier { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 12, 14, .34) 0%, rgba(12, 12, 14, .10) 26%, rgba(12, 12, 14, .46) 62%, rgba(12, 12, 14, .80) 100%); } .hero--video .hero__raster { position: relative; z-index: 2; min-height: max(440px, 74vh); /* ältere Browser ohne svh */ min-height: max(440px, 74svh); /* ohne Adressleiste gerechnet */ align-content: end; padding-top: 4rem; } .hero--video .hero__text { padding-bottom: 2.25rem; } /* Titelfeld: die fünf Zeilen liegen im selben Rasterfeld übereinander, das Feld ist also immer so hoch wie die längste. Darum verrutscht beim Szenenwechsel nichts — auch nicht, während zwei Zeilen gleichzeitig sichtbar sind. */ .hero__titelfeld { display: grid; margin-bottom: 1.5rem; } .hero__zeile { grid-area: 1 / 1; /* Unten bündig: die Zeilen sind unterschiedlich lang, sollen aber immer denselben Abstand zu den Knöpfen haben. Die Luft entsteht oben. */ align-self: end; margin: 0; font-family: var(--f-titel); font-weight: 800; font-size: clamp(1.95rem, 7vw, 3.5rem); line-height: 1.12; letter-spacing: -.025em; word-spacing: .04em; text-transform: uppercase; text-wrap: balance; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .45); /* visibility statt display: das Feld behält seine Höhe. */ opacity: 0; visibility: hidden; } .hero__zeile--aktiv { opacity: 1; visibility: visible; } @media (min-width: 701px) { .hero--video { background-image: url('../images/hero/hero-poster.webp'); } .hero__schleier { background: linear-gradient(90deg, rgba(12, 12, 14, .78) 0%, rgba(12, 12, 14, .50) 34%, rgba(12, 12, 14, .14) 66%, rgba(12, 12, 14, 0) 100%), linear-gradient(180deg, rgba(12, 12, 14, .14) 0%, rgba(12, 12, 14, .34) 100%); } } @media (min-width: 1024px) { .hero--video .hero__raster { min-height: 620px; align-content: center; grid-template-columns: minmax(0, 720px); padding-top: 3.5rem; } .hero--video .hero__text { padding-bottom: 1rem; } } /* Wer Bewegung reduziert haben will, bekommt das Standbild und eine feste Zeile. */ @media (prefers-reduced-motion: reduce) { .hero__video { display: none !important; } } /* Beide Siegel nebeneinander, unter den Knöpfen. Rechts unten lägen sie dem festen WhatsApp-Knopf im Weg. */ .hero__garantieblock { display: flex; align-items: center; gap: .75rem; margin-top: 0; } .hero__garantieblock .siegel { flex: 0 0 auto; width: 84px; height: auto; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .5)); } /* Schrift im SVG: die Siegel sind inline, also greift die Manrope der Seite. */ .siegel__zahl { font-family: var(--f-titel); font-weight: 800; font-size: 27px; letter-spacing: -1px; fill: #fff; text-anchor: middle; } .siegel__zahl--klein { font-size: 22px; letter-spacing: -.5px; } .siegel__wort { font-family: var(--f-titel); font-weight: 700; font-size: 9.5px; letter-spacing: 1.4px; fill: #efeae3; text-anchor: middle; } @media (min-width: 1024px) { .hero__garantieblock { gap: .9rem; } .hero__garantieblock .siegel { width: 104px; } } /* ========================================================================== ABSCHLUSS-BLOCK MIT FOTO IM HINTERGRUND Nur auf der Startseite. `.sektion--gips` steht auf 153 Seiten — deshalb ein eigener Modifikator statt einer Änderung an der gemeinsamen Klasse. ========================================================================== */ .sektion--foto { position: relative; overflow: hidden; background: var(--tinte); } .sektion--foto > .wrap { position: relative; z-index: 2; } .foto-grund { position: absolute; inset: 0; z-index: 0; overflow: hidden; } /* Etwas höher als der Rahmen und nach oben versetzt: so bleibt beim Parallax (GSAP verschiebt das Bild um ±5 %) oben und unten kein Streifen frei. */ .foto-grund img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; } .foto-grund::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 14, .70) 0%, rgba(12, 12, 14, .52) 45%, rgba(12, 12, 14, .78) 100%); } /* Wird von ScrollTrigger gesetzt, sobald man gescrollt hat. */ .kopf--geschoben { box-shadow: 0 2px 14px rgba(22, 22, 26, .12); } .sektion--foto .marke { color: #ffb4b4; } .sektion--foto h2 { color: #fff; } .sektion--foto .vorspann { color: #e8e5e1; } .sektion--foto .btn--linie { border-color: #fff; color: #fff; } @media (min-width: 701px) { .foto-grund::after { background: linear-gradient(90deg, rgba(12, 12, 14, .82) 0%, rgba(12, 12, 14, .58) 46%, rgba(12, 12, 14, .30) 100%); } } /* ========================================================================== BEWEGUNG, TEIL 2 — Übergänge beim Zeigen und beim Anfassen -------------------------------------------------------------------------- Es gelten dieselben zwei Regeln wie in main.js: 1. Der fertige Zustand steht hier. Animiert wird nur der Weg dorthin, und alles, was einen Startzustand braucht (verkürzte Linien, beschnittene Bilder), bekommt ihn erst, wenn JavaScript die Klasse `js-` setzt. Ohne JavaScript oder bei einem Fehler steht die Seite fertig da. 2. `prefers-reduced-motion` schaltet alles ab — das erledigt die Regel im Reset ganz oben, die jede Transition auf .01ms kürzt. Keine neue Datei, kein neues Skript: nur Klassen, die es schon gibt, und damit auf allen 160 Seiten gleichzeitig. ========================================================================== */ /* --- Fortschrittsbalken unter der Kopfzeile --- Zeigt, wie weit man in einer Seite ist. Auf den Ortsseiten ist das viel Text — dann ist es gut zu wissen, ob noch die Hälfte kommt. Wo der Browser scroll-gesteuerte Animationen kennt, läuft er ganz ohne Skript; sonst schiebt main.js ihn weiter. Das Element baut main.js. */ .fortschritt { position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: var(--rot); transform: scaleX(0); transform-origin: 0 50%; z-index: 3; } @supports (animation-timeline: scroll()) { .fortschritt { animation: fortschritt-laeuft linear both; animation-timeline: scroll(root block); } } @keyframes fortschritt-laeuft { to { transform: scaleX(1); } } /* --- Kopfzeile wird flacher, sobald man scrollt --- Die Klasse setzt main.js schon für den Schatten; hier wächst nur dazu, dass die Leiste zusammengeht. Auf dem Handy bleibt sie, wie sie ist: dort ist sie ohnehin niedrig und jedes Wackeln fällt auf. */ .kopf { transition: box-shadow .25s ease; } @media (min-width: 1024px) { .kopf__leiste { transition: min-height .3s cubic-bezier(.22, 1, .36, 1); } .kopf__logo img { transition: width .3s cubic-bezier(.22, 1, .36, 1); } .kopf--geschoben .kopf__leiste { min-height: 72px; } .kopf--geschoben .kopf__logo img { width: 92px; } } /* --- Die rote Linie hinter der Abschnittsnummer zieht sich auf --- `.marke::after` ist schon da: ein 48px langer roter Strich. Er wächst jetzt von links heraus, wenn der Abschnitt ins Bild kommt. Den Startzustand setzt die Klasse `js-marke`, damit der Strich ohne Skript einfach dasteht. */ .js-marke::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.22, 1, .36, 1) .12s; } .js-marke.marke--an::after { transform: scaleX(1); } /* --- Karten: das Bild zoomt, die Nummer rückt vor, unter den Titel zieht sich eine rote Linie --- */ /* `clip` statt `hidden`: beides schneidet den Zoom am Kartenrand ab, aber `hidden` macht aus der Karte einen Scroll-Container. Die scroll-gesteuerte Bildwanderung weiter unten hängt sich dann an diesen Container — und der scrollt nie, also stand sie fest. `hidden` bleibt als Rückfall für alte Browser stehen, die `clip` nicht kennen. */ .karte { overflow: hidden; overflow: clip; transition: background-color .2s ease; } .karte__bild { transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; } .karte:hover .karte__bild, .karte:focus-visible .karte__bild { transform: scale(1.05); } .karte__nr { display: inline-block; transition: transform .3s cubic-bezier(.22, 1, .36, 1); } .karte:hover .karte__nr { transform: translateX(4px); } .karte h3 { position: relative; width: fit-content; } .karte h3::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: 2px; background: var(--rot); transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s cubic-bezier(.22, 1, .36, 1); } .karte:hover h3::after, .karte:focus-visible h3::after { transform: scaleX(1); } /* --- Knöpfe: die Farbe wischt von links herein statt umzuspringen --- Das `::before` liegt hinter der Beschriftung, nicht davor: `isolation` sperrt das negative z-index im Knopf ein, sonst rutschte es hinter den Hintergrund des Abschnitts. */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.22, 1, .36, 1); } .btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); } .btn--rot::before { background: var(--rot-dunkel); } .btn--linie::before { background: var(--tinte); } .btn--hell::before { background: #fff; } /* Der Wischer übernimmt die Fläche — der alte Sprung in der Hintergrundfarbe würde ihn zudecken. */ .btn--rot:hover { background: var(--rot); } .btn--linie:hover { background: transparent; } .btn--hell:hover { background: transparent; } /* Die Schriftfarbe wartet, bis der Wischer durch ist. Ohne die Verzögerung steht bei `--linie` und `--hell` für einen Moment weisse Schrift auf noch weissem Grund und der Knopf ist unlesbar. Beim Verlassen gilt wieder die normale Regel oben, also ohne Wartezeit. */ .btn--linie:hover, .btn--hell:hover { transition: color .16s ease .2s, background-color .18s ease, border-color .18s ease; } /* --- Bilder decken sich von links auf, statt nur einzublenden --- Wie ein Spachtelzug über die Wand. Startzustand kommt von main.js. */ .js-wischen { clip-path: inset(0 100% 0 0); } /* --- Die Bilderstreifen auf den Ortsseiten --- */ .streifen__figur { overflow: hidden; overflow: clip; } /* siehe .karte */ .streifen__figur img { transition: transform .6s cubic-bezier(.22, 1, .36, 1); } .streifen__figur:hover img { transform: scale(1.04); } /* --- Die Bilder auf „Projekte“ bekommen dasselbe wie die Karten --- `clip` statt `hidden`, aus demselben Grund wie bei `.karte`: die scroll-gesteuerte Bildwanderung hängt sonst an einem Container fest, der nie scrollt. */ .galerie__btn { overflow: hidden; overflow: clip; } .galerie__btn img { transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .25s ease; } .galerie__btn:hover img, .galerie__btn:focus-visible img { transform: scale(1.05); } /* --- Ablauf, Szenarien, Faktoren, FAQ, Linkboxen: heben sich beim Zeigen --- */ .schritt .ikon { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); } .schritt:hover .ikon { transform: scale(1.14) rotate(-5deg); } .schritt__nr { display: inline-block; transition: transform .3s ease; } .schritt:hover .schritt__nr { transform: translateX(3px); } .linkbox { transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease; } .linkbox:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(22, 22, 26, .10); } .faq__item { transition: background-color .22s ease; } /* --- Ortschaften und Siegel --- */ .orte li { transition: transform .22s cubic-bezier(.22, 1, .36, 1), border-color .22s ease, background-color .22s ease; } .orte li:hover { transform: translateY(-2px); border-color: var(--rot); } .hero__garantieblock .siegel { transition: transform .35s cubic-bezier(.22, 1, .36, 1); } .hero__garantieblock .siegel:hover { transform: translateY(-5px) rotate(-3deg); } /* --- WhatsApp-Knopf --- */ .wa { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease; } .wa:hover { transform: scale(1.08); } /* ========================================================================== DIE KARTE WIRD GEZEICHNET -------------------------------------------------------------------------- Die Landesgrenze liegt als echter SVG-Pfad über dem Bild — 629 Punkte, aus der Bilddatei nachgezogen. `stroke-dashoffset` fährt sie ab wie ein Stift, danach füllt sich das Foto von Pfäffikon aus nach aussen, und die Linie blendet sich weg, weil sie im Bild schon drin ist. Ohne JavaScript passiert nichts davon: die Linie ist dann unsichtbar (sie liegt deckungsgleich auf der Grenze im Bild) und das Bild steht fertig da. ========================================================================== */ .kartenspalte { position: relative; } .karte-strich { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--tinte); pointer-events: none; opacity: 0; /* nur sichtbar, während gezeichnet wird */ z-index: 2; } .karte-strich.zeichnet { opacity: 1; } /* Der Kreis, aus dem heraus sich die Karte füllt, sitzt auf Pfäffikon ZH: 62,5 % von links, 31 % von oben — dort steht der Punkt im Bild. */ .gebietskarte.js-karte { --karte-r: 0%; -webkit-mask-image: radial-gradient(circle at 62.5% 31%, #000 var(--karte-r), transparent calc(var(--karte-r) + 14%)); mask-image: radial-gradient(circle at 62.5% 31%, #000 var(--karte-r), transparent calc(var(--karte-r) + 14%)); } /* ========================================================================== DIE UNTERSCHRIFT WIRD GESCHRIEBEN -------------------------------------------------------------------------- Nicht mit einer Kante, die von links nach rechts durchwischt — so schreibt niemand. In der Unterschrift steckt ein SVG, dessen Maske aus drei Pfaden besteht: dem Weg des Stifts, aus dem Bild nachgezogen. Der Schwung des T, dann „incu“, dann „Darius“. `stroke-dashoffset` fährt sie der Reihe nach ab, also erscheint die Tinte genau dort, wo der Stift gerade war. Die Maske hängt main.js ein — ohne JavaScript steht die Unterschrift da. ========================================================================== */ svg.unterschrift { display: block; height: auto; } /* ========================================================================== BEWEGUNG, TEIL 3 — die etwas aufwendigeren Sachen -------------------------------------------------------------------------- Alles, was den Zeiger braucht, steht in einer Abfrage auf `hover: hover` und `pointer: fine` ab 1024px: auf dem Handy gibt es keinen Zeiger, und sechs Karten mit eigener Compositing-Ebene kosten dort nur Strom. ========================================================================== */ /* --- `overflow-x: hidden` durch `clip` ersetzen --- Im eingebetteten CSS jeder Seite steht `body { overflow-x: hidden }`. Das schneidet nicht nur ab, es macht aus dem Body einen Scroll-Container — mit allem, was daran hängt: `position: sticky` und scroll-gesteuerte Animationen rechnen dann gegen einen Container, der nie scrollt. `clip` schneidet genauso ab, ohne den Nebeneffekt. Geprüft: auf sieben Seiten bei 390px ist `scrollWidth` gleich `innerWidth`, es ragt also ohnehin nichts heraus. Steht hier statt in 160 HTML-Dateien. */ body { overflow-x: clip; } /* --- Überschriften werden von oben nach unten aufgedeckt --- */ .js-titel { --titel: 0%; -webkit-mask-image: linear-gradient(to bottom, #000 var(--titel), transparent calc(var(--titel) + 24%)); mask-image: linear-gradient(to bottom, #000 var(--titel), transparent calc(var(--titel) + 24%)); } /* --- Bilder wandern im Rahmen mit, während man scrollt --- Über `object-position`, nicht über `transform`: der Zoom beim Überfahren liegt auf `transform`, und eine laufende Animation hätte ihn geschluckt. Wo der Browser scroll-gesteuerte Animationen kennt, läuft das komplett ohne Skript; wo nicht, steht das Bild eben still. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .karte__bild, .streifen__figur img, .galerie__btn img { animation: bild-wandert linear both; /* Muss ausgeschrieben werden: die Kurzform `animation` setzt die Dauer auf 0s, und mit 0s steht eine scroll-gesteuerte Animation sofort am Ende, statt über den ganzen Bereich zu laufen. `auto` heisst: so lang wie der Bereich. */ animation-duration: auto; animation-timeline: view(); animation-range: entry 0% exit 100%; } } } @keyframes bild-wandert { from { object-position: 50% 32%; } to { object-position: 50% 68%; } } @media (hover: hover) and (pointer: fine) and (min-width: 1024px) { /* --- Karten kippen leicht zum Zeiger, mit einem Lichtschein darüber --- Dasselbe gilt für die Bilder auf „Projekte“: dort ist `.galerie__figur` die Kachel, die die Karte spielt. */ .karten, .galerie { perspective: 1400px; } .karte, .galerie__figur { position: relative; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: background-color .2s ease, transform .55s cubic-bezier(.22, 1, .36, 1); } /* Solange der Zeiger drauf ist, folgt die Karte ohne Nachlauf — sonst schleppt sie hinterher und das Kippen fühlt sich zäh an. Beim Verlassen gilt wieder die Regel oben und sie federt zurück. */ .karte.kippt, .galerie__figur.kippt { transition: background-color .2s ease; } .karte::after, .galerie__figur::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), transparent 62%); opacity: 0; transition: opacity .35s ease; mix-blend-mode: overlay; } .karte:hover::after, .galerie__figur:hover::after { opacity: 1; } /* --- Knöpfe ziehen den Zeiger an --- */ .btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .5s cubic-bezier(.22, 1, .36, 1); } .btn.magnet { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* --- Auf den dunklen Abschnitten läuft ein warmer Schein mit --- */ .sektion--dunkel { position: relative; overflow: hidden; } .sektion--dunkel::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(620px circle at var(--sx, 50%) var(--sy, 50%), rgba(189, 23, 23, .18), transparent 62%); opacity: 0; transition: opacity .5s ease; } .sektion--dunkel:hover::before { opacity: 1; } .sektion--dunkel > .wrap { position: relative; z-index: 1; } } /* ========================================================================== Icons an den restlichen Stellen: Leistungskarten, Fusszeile, Projektfilter. Motive und Strichstaerke sind dieselben wie auf leistungen.html. ========================================================================== */ /* Leistungskarten auf der Startseite */ .karte h3 { display: flex; align-items: center; gap: .5rem; } .karte h3 .ikon-wrap { color: var(--rot); flex: 0 0 auto; } .karte h3 .ikon { width: 1.15em; height: 1.15em; } .karte .ikon { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .karte:hover .ikon { transform: scale(1.12) rotate(-4deg); } /* Fusszeile: Adresse, Telefon, Mail */ .fuss__adresse { display: grid; gap: .6rem; font-style: normal; } .fuss__zeile { display: flex; align-items: flex-start; gap: .55rem; } /* Heller als --rot: auf dem fast schwarzen Fuss ist #bd1717 zu dunkel. */ .fuss__zeile > .ikon { width: 1em; height: 1em; margin-top: .3em; color: #ff6b6b; flex: 0 0 auto; } a.fuss__zeile { text-decoration: none; } a.fuss__zeile:hover span { text-decoration: underline; } /* Projektfilter */ .filter button { display: inline-flex; align-items: center; gap: .4rem; } .filter button .ikon { width: .95em; height: .95em; flex: 0 0 auto; } /* Der aktive Knopf ist dunkel — rotes Icon waere darauf kaum zu sehen. */ .filter button[aria-pressed='true'] .ikon { color: #fff; }