/* ========================================================================== staffclean-gestaltung.css — Bildsprache von staffsec.de auf staffclean.de -------------------------------------------------------------------------- Manuel 24.09.2026: "hinter diesen Leisten, da müssen mal Fotos sein … so wie bei Staffsec … wir haben einige sehr geile grafische Sachen bei Staffsec, die bei Staffclean echt fehlen, wie auch mit diesen Bildern, teilweise den Hintergründen … gerade bei Aufzählung der Leistung." Die Farben von Staffclean (Grün) bleiben ausdrücklich — "die Farben sind da super". Übernommen von staffsec.de: 1. Leistungskarten als FOTOKARTEN: Bild vollflächig, dunkler Verlauf von unten, Symbol als Glas-Plakette oben links, Text weiß unten links, Link in Akzentfarbe, leichter Zoom beim Überfahren (wie „Drei Säulen" / „Branchenexpertise" auf staffsec.de). 2. FOTOBÄNDER hinter ganzen Abschnitten mit dunkler Abdeckung, helle Überschrift, weiße Karten darauf (wie „Was Kunden sagen" und das Zertifikate-Band auf staffsec.de). 3. Gleich hohe Karten je Reihe — vorher endeten sie unterschiedlich hoch, die „Mehr erfahren"-Links standen versetzt. Warum eine eigene Datei und kein Eingriff ins Bundle: Die Seite ist ein vorgerendertes React-Bundle; jede Änderung dort muss neu gerendert und hydriert werden (Fallakte: "App warf das vorgerenderte HTML weg"). Reine Gestaltung gehört nicht in den Programmcode. Diese Datei lässt sich mit EINER Zeile im wieder abschalten. Ansprache NUR über stabile Merkmale: · Leistungskarten über ihre Zieladresse a[href="/dienstleistungen/…"] · Startseite über ihr bildschirmhohes Titelbild main:has(> section.min-h-\[100svh\]) — nur index.html hat es (gemessen 24.09.2026 über alle HTML-Dateien). ========================================================================== */ :root { --sc-gruen-tief: 2 44 34; /* sehr dunkles Grün für Verläufe */ --sc-akzent: #34d399; /* emerald-400, wie "höchstem Niveau" im Titel */ } /* -------------------------------------------------------------------------- 1. Leistungskarten der Startseite → Fotokarten -------------------------------------------------------------------------- */ main:has(> section.min-h-\[100svh\]) .grid > .animate-fade-up { height: 100%; } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100%; min-height: 300px; padding: 1.5rem 1.5rem 1.4rem; text-align: left; border: 0; border-radius: 1.25rem; background-color: rgb(var(--sc-gruen-tief)); background-size: cover; background-position: center; box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35); } /* Bild als eigene Ebene, damit es beim Überfahren zoomen kann, ohne den Text zu bewegen */ main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"]::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--sc-bild); background-size: cover; background-position: center; transform: scale(1.001); transition: transform .7s cubic-bezier(.2,.7,.2,1); } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"]:hover::before { transform: scale(1.06); } /* Dunkler Verlauf von unten — Lesbarkeit geht vor Bild (Kontrast Weiß auf ≥ 85 % Grün) */ main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--sc-gruen-tief) / .95) 0%, rgb(var(--sc-gruen-tief) / .82) 38%, rgb(var(--sc-gruen-tief) / .35) 72%, rgb(var(--sc-gruen-tief) / .15) 100%); } /* Symbol: Glas-Plakette oben links statt grünem Quadrat in der Mitte */ main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] > div:first-child { position: absolute; top: 1.25rem; left: 1.25rem; margin: 0; width: 3rem; height: 3rem; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] > div:first-child svg { color: #fff; } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"]:hover > div:first-child { background: rgb(52 211 153 / .9); border-color: transparent; } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] h3 { color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin-bottom: .35rem; } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] p { color: rgb(255 255 255 / .82); margin-bottom: .9rem; } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] h3, main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] p { text-align: left; width: 100%; } main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] > span { color: var(--sc-akzent); } /* Ein Foto je Leistung — dieselben Bilder wie auf /dienstleistungen, damit die Bildsprache durchgeht */ a[href="/dienstleistungen/gebaeudereinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-f146e8a9-8551-42f6-a160-b007599f7ac0-640w.webp"); } a[href="/dienstleistungen/glasreinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-ad91796e-b0df-4dd4-9a10-6d3be7f8517e-640w.webp"); } a[href="/dienstleistungen/baureinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-9bb1d8ac-8b44-4a4c-977e-e00763f76d17-640w.webp"); } a[href="/dienstleistungen/grundreinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-d438e4e1-9a8f-4b48-a3d8-b93d0dfcbee8-640w.webp"); } a[href="/dienstleistungen/unterhaltsreinigung"]{ --sc-bild: url("/assets/bilder/2026-03-29-ace6f324-b190-42f4-b43a-fa6a58c6dc89-640w.webp"); } a[href="/dienstleistungen/industriereinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-217e9f91-7003-4a03-bc99-c51edf4dc70f-640w.webp"); } a[href="/dienstleistungen/winterdienst"] { --sc-bild: url("/assets/bilder/2026-03-29-4ea703da-b6ea-4edf-8c6e-d725c8dcb1fb-640w.webp"); } a[href="/dienstleistungen/hygiene-plus"] { --sc-bild: url("/assets/bilder/2026-03-29-cd7e68e0-1259-496b-91fe-077c2c88ed1e-640w.webp"); } a[href="/dienstleistungen/entruempelung"] { --sc-bild: url("/assets/bilder/entruempelung-wohnung-keller-haus-640w.webp"); } @media (min-width: 1024px) and (min-resolution: 1.5dppx) { a[href="/dienstleistungen/gebaeudereinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-f146e8a9-8551-42f6-a160-b007599f7ac0-1080w.webp"); } a[href="/dienstleistungen/glasreinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-ad91796e-b0df-4dd4-9a10-6d3be7f8517e-1080w.webp"); } a[href="/dienstleistungen/baureinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-9bb1d8ac-8b44-4a4c-977e-e00763f76d17-1080w.webp"); } a[href="/dienstleistungen/grundreinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-d438e4e1-9a8f-4b48-a3d8-b93d0dfcbee8-1080w.webp"); } a[href="/dienstleistungen/unterhaltsreinigung"]{ --sc-bild: url("/assets/bilder/2026-03-29-ace6f324-b190-42f4-b43a-fa6a58c6dc89-1080w.webp"); } a[href="/dienstleistungen/industriereinigung"] { --sc-bild: url("/assets/bilder/2026-03-29-217e9f91-7003-4a03-bc99-c51edf4dc70f-1080w.webp"); } a[href="/dienstleistungen/winterdienst"] { --sc-bild: url("/assets/bilder/2026-03-29-4ea703da-b6ea-4edf-8c6e-d725c8dcb1fb-1080w.webp"); } a[href="/dienstleistungen/hygiene-plus"] { --sc-bild: url("/assets/bilder/2026-03-29-cd7e68e0-1259-496b-91fe-077c2c88ed1e-1080w.webp"); } a[href="/dienstleistungen/entruempelung"] { --sc-bild: url("/assets/bilder/entruempelung-wohnung-keller-haus-1080w.webp"); } } @media (max-width: 639px) { main:has(> section.min-h-\[100svh\]) a.group.min-h-\[140px\][href^="/dienstleistungen/"] { min-height: 230px; } } /* -------------------------------------------------------------------------- 2. Fotobänder hinter ganzen Abschnitten der Startseite 4 = "Warum Unternehmen auf Staffclean vertrauen" 6 = "Kundenstimmen" -------------------------------------------------------------------------- */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4), main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) { position: relative; isolation: isolate; background: rgb(var(--sc-gruen-tief)) !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4)::before, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6)::before { content: ""; position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4)::before { background-image: url("/assets/bilder/2026-03-29-2e176116-0c17-4814-9a3d-f80ee3fa5c37-1080w.webp"); } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6)::before { background-image: url("/assets/bilder/2026-03-29-3c3cbfe8-56f1-421b-b2f2-6a43895e6bd5-1080w.webp"); } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4)::after, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--sc-gruen-tief) / .88) 0%, rgb(var(--sc-gruen-tief) / .72) 50%, rgb(var(--sc-gruen-tief) / .90) 100%); } /* Kopf des Abschnitts hell auf dem Fotoband */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) h2, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) h2 { color: #fff; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) h2 span, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) h2 span { color: var(--sc-akzent); } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .text-center.mb-10 > p, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) .text-center.mb-10 > p { color: rgb(255 255 255 / .8); } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .text-center.mb-10 > .inline-flex, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) .text-center.mb-10 > .inline-flex { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .text-center.mb-10 > .inline-flex *, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) .text-center.mb-10 > .inline-flex * { color: var(--sc-akzent) !important; } /* Karten auf dem Band: weiß, gleich hoch, mit Schatten — wie die Kundenstimmen auf staffsec.de */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * { height: 100%; } /* NUR die Karte selbst (div.group, abgerundet) — nicht ihre eckige Hülle .animate-fade-up; die erste Fassung färbte auch die Hülle weiß und nahm den Karten damit die Rundung. */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group { background: #fff; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .55); border-color: transparent; }