/* ========================================================================== 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/glasreinigung-stange-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/glasreinigung-stange-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; } /* ========================================================================== 3. Vorteile-Abschnitt mit Fotoband (Manuel 24.09.2026: "Hier ein Hintergrund- bild rein bei den Vorteilen") · Leistungsseiten (9): Titelbild min-h-[75vh] — nur diese 9 Seiten haben es (gezählt 24.09.2026), Vorteile = 3. Abschnitt. · Ortsseiten: Titelbild min-h-[60vh], Vorteile = 4. Abschnitt. Die Tiefenprüfung kontrolliert je Seite, dass dort wirklich "Vorteile" steht. ========================================================================== */ main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3), main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) { position: relative; isolation: isolate; background: rgb(var(--sc-gruen-tief)) !important; } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3)::before, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4)::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/assets/bilder/band-flur-reinigung-1080w.webp") center / cover; } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3)::after, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--sc-gruen-tief) / .90) 0%, rgb(var(--sc-gruen-tief) / .76) 50%, rgb(var(--sc-gruen-tief) / .92) 100%); } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) h2, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) h2 { color: #fff; } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) h2 span, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) h2 span { color: var(--sc-akzent); } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) :has(> h2) > p, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) :has(> h2) > p { color: rgb(255 255 255 / .8); } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) :has(> h2) > .inline-flex, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) :has(> h2) > .inline-flex { background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .2); } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) :has(> h2) > .inline-flex *, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) :has(> h2) > .inline-flex * { color: var(--sc-akzent) !important; } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) [class*="rounded-"][class*="p-"], main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) [class*="rounded-"][class*="p-"] { box-shadow: 0 18px 40px -20px rgb(0 0 0 / .55); } /* ========================================================================== 4. Kundenstimmen als laufendes Band (Manuel: "Kundenstimmen sollen laufen, interaktiv") — die Bewegung macht staffclean-bewegung.js; hier nur das Aussehen. Greift erst, wenn das Skript die Leiste mit .sc-band markiert hat — ohne Skript bleibt alles wie vorher. ========================================================================== */ .sc-band { display: flex !important; gap: 1.25rem !important; overflow-x: auto !important; scroll-snap-type: none !important; scrollbar-width: none; margin-left: 0 !important; margin-right: 0 !important; padding: .5rem 0 1rem !important; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); cursor: grab; } .sc-band::-webkit-scrollbar { display: none; } .sc-band.sc-zieht { cursor: grabbing; } .sc-band > * { flex: 0 0 min(340px, 82vw) !important; min-width: 0 !important; } .sc-band > * > * { height: 100%; } /* Zähler (staffclean-bewegung.js zählt beim Sichtbarwerden hoch) — Breite fest, damit nichts springt */ .sc-zaehler { font-variant-numeric: tabular-nums; } /* ========================================================================== 5. Handy: AUFZÄHLUNGEN und SYMBOL-ZEILEN links — alles andere mittig Manuel 24.09.2026: 19:28 "Diese Haken sollten als Aufzählung sein und links", "das bei allen Aufzählungen"; 20:57 und 21:08 "auf vielen Seiten auf Handy nicht zentriert", "siehst du, dass das alles nicht zentriert ist?". 🔴 Die Fassung von 19:40 ging zu weit: sie setzte am Handy auch Fließtext, Textblöcke ("text-center lg:text-left") und alle Karten links. Gewollt war nur: Aufzählungen links. Jetzt gilt am Handy: · MITTIG (wie staffclean-mobil-*.css es vorsieht): Überschriften, Absätze, Textblöcke, Karten, Kennzahlen, Titelbereich. · LINKS: Listen (ul/ol, Haken-Zeilen li.flex) und Zeilen "Symbol + Text" — also Zeilen, deren ERSTES Kind ein Symbol-Quadrat (w-…/h-…) ist. Ursache der Unordnung bleibt: staffclean-mobil-*.css zentriert unter 640 px auch den INHALT solcher Zeilen (justify-content:center, Symbol margin:auto) — dann schwebt das Symbol mittig und der Text klebt rechts, und Haken-Zeilen springen. ========================================================================== */ @media (max-width: 639px) { /* Listen als linker Block */ #root main section ul, #root main section ol { text-align: left; } #root main section li.flex:not([class~="justify-center"]):not([class~="justify-between"]) { justify-content: flex-start; } /* Zeilen "Symbol + Text": Symbol links ohne Auto-Rand, Text direkt daneben und linksbündig */ #root main section :is(div, a).flex:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child):not([class~="justify-between"]):not([class*="flex-col"]) { justify-content: flex-start; text-align: left; } #root main section :is(div, a).flex:not([class*="flex-col"]) > div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child { margin-left: 0; margin-right: 0; } #root main section :is(div, a).flex:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child):not([class~="justify-between"]):not([class*="flex-col"]) > :not(:first-child), #root main section :is(div, a).flex:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child):not([class~="justify-between"]):not([class*="flex-col"]) > :not(:first-child) :is(p, h2, h3, h4, span) { text-align: left; } /* Absatz unter einer Abschnittsüberschrift richtet sich wie die Überschrift aus */ #root main section h2 ~ p { text-align: inherit; } } /* ========================================================================== 6. KOPF WIE AUF STAFFSEC.DE (Manuel 24.09.2026: "den Header so machen wie bei staffsec.de … an Staffclean-Design anpassen … mit durchlaufenden Bildern … vielleicht irgendwo Staffclean als Logo durchlaufend") a) Leiste ganz oben (statisches HTML AUSSERHALB von #root, deshalb kein Hydrierrisiko und kein Springen beim Laden): Einsatzgebiet, fester Ansprechpartner, 24/7-Hotline. KEINE Bewertungen — Staffclean hat keine belegten, und erfundene gibt es nicht. b) Bildwechsel im Titelbild der Startseite (staffclean-bewegung.js). c) Laufband mit Logo und allen Leistungen unter dem Titelbereich. ========================================================================== */ :root { --sc-leiste: 38px; } .sc-leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--sc-leiste); background: linear-gradient(90deg, #011a14 0%, #022c22 55%, #011a14 100%); border-bottom: 1px solid rgb(52 211 153 / .18); color: rgb(255 255 255 / .72); font: 500 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .01em; transition: transform .45s cubic-bezier(.2,.7,.2,1); } .sc-leiste-innen { max-width: 80rem; height: 100%; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sc-leiste-links, .sc-leiste-rechts { display: flex; align-items: center; gap: .85rem; white-space: nowrap; min-width: 0; } .sc-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-akzent); box-shadow: 0 0 0 0 rgb(52 211 153 / .6); animation: sc-puls 2.4s infinite; flex: none; } @keyframes sc-puls { 0% { box-shadow: 0 0 0 0 rgb(52 211 153 / .55); } 70% { box-shadow: 0 0 0 7px rgb(52 211 153 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 211 153 / 0); } } .sc-trenn { width: 1px; height: 13px; background: rgb(255 255 255 / .18); } .sc-leiste a { color: inherit; text-decoration: none; transition: color .2s; } .sc-leiste a:hover { color: #fff; } .sc-leiste-tel { display: inline-flex; align-items: center; gap: .5rem; color: #fff !important; font-weight: 700; font-size: 13.5px; } .sc-leiste-tel svg { color: var(--sc-akzent); } .sc-leiste-marke { color: var(--sc-akzent); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-right: .15rem; } .sc-nur-klein { display: none; } html.sc-gescrollt .sc-leiste { transform: translateY(-100%); } /* Kopf und Inhalt um die Leistenhöhe nach unten — von Anfang an per CSS, also ohne Springen. Beim Scrollen gleitet die Leiste weg und der Kopf rückt nach oben (wie auf staffsec.de). */ #root header.fixed { top: var(--sc-leiste); transition: top .45s cubic-bezier(.2,.7,.2,1), background-color .5s, box-shadow .5s; } html.sc-gescrollt #root header.fixed { top: 0; } #root main { padding-top: var(--sc-leiste); } @media (max-width: 639px) { :root { --sc-leiste: 34px; } .sc-leiste { font-size: 12px; } .sc-leiste-innen { padding: 0 1rem; } .sc-nur-gross { display: none; } .sc-nur-klein { display: inline; } .sc-leiste-tel { font-size: 12.5px; } .sc-leiste-marke { font-size: 9.5px; letter-spacing: .12em; } } @media (min-width: 640px) and (max-width: 1023px) { .sc-leiste-mail, .sc-leiste-mail + .sc-trenn { display: none; } } /* b) Bildwechsel im Titelbild — die Ebenen legt staffclean-bewegung.js an */ .sc-dia { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.02); transition: opacity 1.8s ease; will-change: opacity, transform; } .sc-dia.sc-an { opacity: 1; animation: sc-zoom 9s ease-out forwards; } @keyframes sc-zoom { from { transform: scale(1.02); } to { transform: scale(1.10); } } .sc-dia-punkte { position: absolute; z-index: 11; right: 2rem; bottom: 6.5rem; display: flex; gap: .45rem; } .sc-dia-punkte button { width: 26px; height: 3px; border: 0; padding: 0; border-radius: 2px; background: rgb(255 255 255 / .3); cursor: pointer; transition: background .3s, width .3s; } .sc-dia-punkte button[aria-current="true"] { width: 44px; background: var(--sc-akzent); } @media (max-width: 639px) { .sc-dia-punkte { right: 50%; transform: translateX(50%); bottom: 4.5rem; } } /* Überschrift wie auf staffsec.de: erstes Wort nur als Umriss */ .sc-kontur { color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .92); paint-order: stroke fill; } @media (max-width: 639px) { .sc-kontur { -webkit-text-stroke-width: 1.1px; } } /* c) Laufband mit Logo und Leistungen */ .sc-laufband { position: relative; margin: 3rem 0 0; padding: 1.1rem 0; overflow: hidden; background: linear-gradient(90deg, #011a14, #03382b 50%, #011a14); border-top: 1px solid rgb(52 211 153 / .22); border-bottom: 1px solid rgb(52 211 153 / .22); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); } .sc-laufband-spur { display: flex; width: max-content; animation: sc-lauf 55s linear infinite; } .sc-laufband:hover .sc-laufband-spur, .sc-laufband:focus-within .sc-laufband-spur { animation-play-state: paused; } .sc-laufband-gruppe { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; } .sc-laufband img { height: 46px; width: auto; flex: none; opacity: .95; } .sc-laufband a { color: rgb(255 255 255 / .86); font: 700 15px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .2s; } .sc-laufband a:hover { color: var(--sc-akzent); } .sc-laufband .sc-stern { color: var(--sc-akzent); font-size: 13px; } @keyframes sc-lauf { to { transform: translateX(-50%); } } @media (max-width: 639px) { .sc-laufband { margin-top: 2rem; padding: .8rem 0; } .sc-laufband img { height: 36px; } .sc-laufband a { font-size: 13px; } .sc-laufband-gruppe { gap: 1.5rem; padding-right: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .sc-laufband-spur { animation: none; } .sc-laufband { overflow-x: auto; } .sc-dia.sc-an { animation: none; } .sc-punkt { animation: none; } } /* Ratgeber (eigenständige Seite ohne App, Kopf nicht fixiert): Leiste im normalen Fluss */ .sc-leiste.sc-statisch { position: relative; } html.sc-gescrollt .sc-leiste.sc-statisch { transform: none; } /* Bildwechsel: die Bildebene muss einen EIGENEN Stapel bilden — sonst stiegen die Dias (z-index 1/2) über die dunkelgrüne Abdeckung .hero-overlay (erste Vorschau: zweites Bild grell, Text unlesbar). Mit isolation bleiben sie in der Bildebene, die Abdeckung liegt darüber. */ main > section.min-h-\[100svh\] > .bg-cover { isolation: isolate; overflow: hidden; } /* Handy-Menü (fester Block, Ebene 55, oben fest auf Kopfhöhe gesetzt) rückt um die Leiste mit, solange die Leiste sichtbar ist — sonst deckte es Logo und Schließen-Kreuz zu (Vorschau 24.09.). */ html:not(.sc-gescrollt) #root div.fixed[class*="z-[55]"][class*="bottom-0"] { margin-top: var(--sc-leiste); } /* Handy: Leiste knapp — links "24/7 erreichbar", rechts nur die Nummer (vorher lief sie über) */ @media (max-width: 639px) { .sc-leiste-marke { display: none; } } /* Gegen fremde Grundstile abgehärtet (Ratgeber setzt eigene Regeln für a/svg — dort brach die Hotline auf zwei Zeilen um) */ .sc-leiste a.sc-leiste-tel { display: inline-flex !important; flex-direction: row !important; align-items: center !important; white-space: nowrap !important; } .sc-leiste svg { display: inline-block !important; flex: none; } .sc-leiste span { display: inline; } .sc-leiste .sc-punkt, .sc-leiste .sc-trenn { display: inline-block; } @media (max-width: 639px) { .sc-leiste .sc-nur-gross { display: none !important; } } @media (min-width: 640px) { .sc-leiste .sc-nur-klein { display: none !important; } } /* Handy: Bildwechsel-Punkte sauber mittig (translate-Lösung saß links und war angeschnitten) */ @media (max-width: 639px) { .sc-dia-punkte { left: 0; right: 0; transform: none; justify-content: center; } } .sc-laufband img { height: 40px; } @media (max-width: 639px) { .sc-laufband img { height: 32px; } } /* ========================================================================== 7. Handy: KARTEN mittig, AUFZÄHLUNGEN links (Manuel 24.09.2026 20:57: "Auf vielen Seiten auf Handy nicht zentriert … überall anpassen" — dazu das Foto der Karte "01 Persönliche Beratung", linksbündig). Zusammen mit der Vorgabe von 19:28 ("Haken als Aufzählung und links") gilt: · Karte = abgerundeter Kasten mit EIGENER Überschrift (h3/h4 direkt oder in einem nicht-flex Zwischenblock) → alles mittig: Symbol, Kennzahl (unter statt neben das Symbol), Überschrift, Text. · Zeile = Symbol NEBEN Text (Überschrift steckt in einer flex-Zeile) → bleibt links. · Ausgenommen: Foto-Leistungskarten der Startseite (a.group), Formulare, Aufklapp-Fragen (button/details), Listen. !important bewusst — nur hier, nur am Handy, nur in Karten: die Regeln aus Abschnitt 5 sollen dort gezielt überstimmt werden. ========================================================================== */ @media (max-width: 639px) { #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) { text-align: center !important; } #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) :is(h3, h4, p) { text-align: center !important; } /* Symbol-Quadrat allein über der Überschrift: mittig */ #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) > div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]), #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) > div:not([class*="flex"]) > div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]) { margin-left: auto !important; margin-right: auto !important; } /* Kopfzeile der Karte (Symbol + Kennzahl bzw. Nummer + Symbol): mittig, Kennzahl darunter */ #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) > div[class*="flex"]:not(:has(h3, h4)), #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) > div:not([class*="flex"]) > div[class*="flex"]:not(:has(h3, h4)) { justify-content: center !important; } #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) > div[class*="justify-between"]:not(:has(h3, h4)), #root main section [class*="rounded-"]:not(a.group):not(:has(form, button, details, ul, ol)):is(:has(> h3), :has(> h4), :has(> div:not([class*="flex"]) > h3), :has(> div:not([class*="flex"]) > h4)) > div:not([class*="flex"]) > div[class*="justify-between"]:not(:has(h3, h4)) { flex-direction: column !important; align-items: center !important; gap: .6rem !important; } #root main section [class*="rounded-"]:not(a.group) [class*="justify-between"] > [class*="text-right"] { text-align: center !important; } } /* Zeilen-Verweise mit Symbol (Kontakt-Zeilen im Ansprechpartner-Kasten u. ä.): volle Breite, Symbol links, Text direkt daneben und linksbündig — auch innerhalb einer mittigen Karte. Vorher: Telefon-Zeile schmal (Mobil-Regel macht tel:-Verweise inline-flex), Online-Zeile mit Pfeil in der Mitte und Text rechts (Mobil-Regel zentriert "items-center gap"-Zeilen). */ @media (max-width: 639px) { #root main section [class*="rounded-"] a.flex:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child), #root main section a.flex[class*="rounded-"]:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child) { display: flex !important; width: 100% !important; justify-content: flex-start !important; text-align: left !important; } #root main section [class*="rounded-"] a.flex:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child) > div:not(:first-child), #root main section [class*="rounded-"] a.flex:has(> div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child) p { text-align: left !important; } } @media (max-width: 639px) { /* Symbol am Zeilenanfang eines Verweises: ohne Auto-Rand (die Rücksetzregel aus Abschnitt 5 griff nur bei div-Eltern; hier ist der Elternteil ein ) */ #root main section a.flex > div:is([class*="w-1"],[class*="w-8"],[class*="w-9"]):is([class*="h-1"],[class*="h-8"],[class*="h-9"]):first-child { margin-left: 0 !important; margin-right: 0 !important; } } /* Haken-Listen, deren Zeilen mit einer GRAFIK beginnen (svg statt Symbol-Kästchen) — z. B. "Arbeitsprinzipien", "Nachhaltig handeln", Staffgroup-Karten: am Handy stand jede Zeile einzeln mittig (Vorlage "justify-center lg:justify-start" bzw. Mobil-Regel), die Haken sprangen. Manuel 19:28: "Haken als Aufzählung und links". Ausgenommen: Plaketten (rounded-full), Knöpfe, Verweise. */ @media (max-width: 639px) { #root main section div.flex:has(> svg:first-child):not([class*="rounded-full"]):not([class*="flex-col"]):not(:has(> svg + svg)):not(:is([class*="w-8"],[class*="w-9"],[class*="w-1"]):is([class*="h-8"],[class*="h-9"],[class*="h-1"])) { justify-content: flex-start !important; text-align: left !important; } #root main section div.flex:has(> svg:first-child):not([class*="rounded-full"]):not([class*="flex-col"]):not(:has(> svg + svg)):not(:is([class*="w-8"],[class*="w-9"],[class*="w-1"]):is([class*="h-8"],[class*="h-9"],[class*="h-1"])) > :is(span, p, div) { text-align: left !important; } /* die Liste selbst als Block linksbündig in ihrer Karte, nicht jede Zeile mittig */ #root main section div[class*="space-y-"]:has(> div.flex > svg:first-child) { text-align: left; } } /* Handy: "24/7 HOTLINE" in der Leiste ausgeblendet lassen — ".sc-leiste span {display:inline}" (Härtung für den Ratgeber) hatte die Handy-Regel überstimmt */ @media (max-width: 639px) { .sc-leiste span.sc-leiste-marke { display: none !important; } } /* Vorteile-Band (Orts- und Leistungsseiten): Listen und Zeilentext hell — die Haken-Liste auf den Ortsseiten stand dunkel auf dunklem Band und war kaum lesbar (Handy-Überblick 24.09.) */ main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) :is(li, ul span, div.flex > span, div.flex > p), main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) :is(li, ul span, div.flex > span, div.flex > p) { color: rgb(255 255 255 / .86); } main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) :is(li, div.flex) > svg:first-child, main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) :is(li, div.flex) > svg:first-child { color: var(--sc-akzent); } /* … aber Text IN den weißen Karten auf dem Band bleibt dunkel */ main:has(> section.min-h-\[75vh\]) > section:nth-of-type(3) [class*="rounded-"][class*="bg-white"] :is(span, p), main:has(> section.min-h-\[60vh\]) > section:nth-of-type(4) [class*="rounded-"][class*="bg-white"] :is(span, p) { color: revert-layer; } /* Symbol-Kästchen: Grafik immer mittig im Kästchen (die Haken-Listen-Regel hatte sie an den linken Rand geschoben — Manuel 21:57 "noch immer schief") */ @media (max-width: 639px) { #root main section div.flex:is([class*="w-8"],[class*="w-9"],[class*="w-1"]):is([class*="h-8"],[class*="h-9"],[class*="h-1"]):has(> svg) { justify-content: center !important; align-items: center !important; } } /* Scroll-Maus im Titelbild mittig (Manuel 21:58). staffclean-mobil-*.css setzt "#root section[class*=min-h-] > div { width:100% }" — das traf auch die absolut positionierte Hülle "left-1/2 -translate-x-1/2": sie wurde bildschirmbreit, die Maus saß an ihrem linken Rand. Mittig platzierte Hüllen behalten ihre eigene Breite. */ #root section[class*="min-h-"] > div.absolute[class*="left-1/2"] { width: auto !important; } /* ========================================================================== 8. KOPFLEISTE, FASSUNG 2 (Manuel 24.09.2026 23 Uhr: "den Reiter nochmal anpassen, irgendwie ansprechend … grafisch besser machen"). · links drei Kernaussagen im Wechsel (je 5 s, weich nach oben), jede mit Symbol — nur Aussagen, die schon auf der Seite stehen (Einsatzgebiet, fester Ansprechpartner, feste Teams); nichts dazuerfunden. · rechts E-Mail als Chip und die 24/7-Hotline als leuchtende Pille (Hauptziel der Leiste). · Grund: tiefes Grün mit sanftem Lichtlauf, unten eine Linie Gold (Logofarbe) → Grün. Handy: links "24/7 erreichbar" mit Pulspunkt, rechts die Pille nur mit Nummer. ========================================================================== */ :root { --sc-leiste: 40px; --sc-gold: #cdbd93; } .sc-leiste { background: linear-gradient(90deg, #011a14 0%, #033a2d 50%, #011a14 100%); border-bottom: 0; color: rgb(255 255 255 / .78); overflow: hidden; } .sc-leiste::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--sc-gold) 20%, var(--sc-akzent) 50%, var(--sc-gold) 80%, transparent); opacity: .55; } .sc-leiste .sc-leiste-glanz { position: absolute; inset: 0; display: block; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / .07) 50%, transparent 58%) no-repeat; background-size: 250% 100%; animation: sc-glanz 11s ease-in-out infinite; } @keyframes sc-glanz { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } } .sc-leiste-innen { position: relative; } .sc-leiste b { color: #fff; font-weight: 600; } /* Wechselnde Aussagen: alle drei in derselben Rasterzelle — Breite = längste, nichts springt */ .sc-leiste ul.sc-wechsel { display: grid; margin: 0; padding: 0; list-style: none; } .sc-leiste ul.sc-wechsel > li { grid-area: 1 / 1; display: flex; align-items: center; gap: .55rem; margin: 0; padding: 0; opacity: 0; animation: sc-wechsel 15s infinite both; } .sc-leiste ul.sc-wechsel > li:nth-child(1) { animation-delay: -1s; } .sc-leiste ul.sc-wechsel > li:nth-child(2) { animation-delay: 4s; } .sc-leiste ul.sc-wechsel > li:nth-child(3) { animation-delay: 9s; } .sc-leiste ul.sc-wechsel svg { color: var(--sc-gold); } @keyframes sc-wechsel { 0% { opacity: 0; transform: translateY(70%); } 4% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 34% { opacity: 0; transform: translateY(-70%); } 100% { opacity: 0; transform: translateY(-70%); } } /* E-Mail als Chip */ .sc-leiste a.sc-leiste-mail { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / .14); background: rgb(255 255 255 / .04); transition: background .2s, border-color .2s, color .2s; } .sc-leiste a.sc-leiste-mail:hover { background: rgb(255 255 255 / .1); border-color: rgb(205 189 147 / .6); color: #fff; } .sc-leiste a.sc-leiste-mail svg { color: var(--sc-gold); } /* Hotline als Pille */ .sc-leiste a.sc-leiste-tel { gap: .5rem !important; padding: .3rem .85rem .3rem .7rem; border-radius: 999px; font-size: 13px; background: linear-gradient(135deg, #059669, #10b981); color: #fff !important; box-shadow: 0 0 0 1px rgb(52 211 153 / .35), 0 4px 16px -4px rgb(16 185 129 / .6); transition: transform .2s, box-shadow .2s, filter .2s; } .sc-leiste a.sc-leiste-tel:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 0 1px rgb(52 211 153 / .6), 0 6px 20px -4px rgb(16 185 129 / .8); } .sc-leiste a.sc-leiste-tel svg { color: #fff; } .sc-leiste .sc-leiste-marke { display: inline-flex; align-items: center; gap: .4rem; color: rgb(255 255 255 / .92); padding-right: .6rem; margin-right: .1rem; border-right: 1px solid rgb(255 255 255 / .35); font-size: 10px; letter-spacing: .16em; } .sc-leiste .sc-leiste-marke .sc-punkt { background: #fff; } .sc-leiste .sc-leiste-nummer { font-weight: 700; letter-spacing: .02em; } .sc-leiste-24 { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #fff; } @media (max-width: 639px) { :root { --sc-leiste: 38px; } .sc-leiste .sc-leiste-24 { display: inline-flex !important; } .sc-leiste a.sc-leiste-tel { padding: .26rem .7rem; font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .sc-leiste .sc-leiste-glanz { animation: none; } .sc-leiste ul.sc-wechsel > li { animation: none; opacity: 0; } .sc-leiste ul.sc-wechsel > li:first-child { opacity: 1; } } /* ========================================================================== 7. GESTALTUNGSSPRACHE VON BAULOGISTIK-NORD.DE — in Staffclean-Grün -------------------------------------------------------------------------- Manuel 25.09.2026 (als Ziel gesetzt): „analysieren, wie wir das da mit den Seiten gemacht haben. Einige grafische Highlights auf Staffclean umgemünzt, auf die Grafik von Staffclean. Einige gute Sachen mitgenommen und bei Staffclean dann umgesetzt." Am 24.09. kam alles von staffsec.de (Abschnitte 1–6). Diesmal wurden die vier Startseiten verglichen (vergleich.js, 25.09.2026) und nur übernommen, was es hier noch NICHT gab: a) GLASKARTEN auf dem Fotoband „Warum …" statt weißer Karten — mattes Glas, helle Kante, Akzentlinie oben, laufende Nummer „01 — Vorteil" unten (Baulogistik „Warum Baulogistik Nord anders arbeitet"). b) KUNDENSTIMMEN im selben Glas (Baulogistik „Was unsere Kunden sagen"). c) AKZENTWORT in Überschriften mit Unterstrich in Logo-Gold (Baulogistik „Organisation."). Gold, weil das Wort selbst schon grün ist und ein grüner Strich darunter verschwinden würde; #cdbd93 ist das „CLEAN" im Logo. d) WEICHER ÜBERGANG vom Titelbild in die Seite (Baulogistik-Titel). e) AKZENTLINIE oben auf der Kennzahlen-Karte (Baulogistik-Kartenköpfe). Bewusst NICHT übernommen: · Zertifikatsleiste „ISO 9001 · DIN 77200 · AVPQ" — das sind Zertifikate der Staffsec, nicht der Staffclean GmbH. Auf staffclean.de wäre das eine falsche Angabe (UWG). · Google-Sternebewertung von kontrollfahrten.com — für Staffclean gibt es keine belegten Bewertungen (Fallakte 24.09.2026). · Neue Abschnitte (Ablauf in 4 Schritten, Einblicke-Galerie) — sie bräuchten Eingriffe ins React-Bundle und damit neues Rendern. Diese Datei bleibt reine Gestaltung. ========================================================================== */ /* ---------- a) Glaskarten im „Warum"-Band der Startseite ---------- */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid { counter-reset: sc-vorteil; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group { counter-increment: sc-vorteil; position: relative; overflow: hidden; padding-bottom: 3.6rem !important; /* Platz für die Nummernzeile unten */ background: linear-gradient(160deg, rgb(255 255 255 / .12) 0%, rgb(2 44 34 / .50) 100%) !important; /* eigener Dunkelgrund: Lesbarkeit hängt NICHT am Foto (Safari-Messung 25.09.: 4,02 : 1 über heller Bildstelle) */ -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); border: 1px solid rgb(255 255 255 / .16) !important; box-shadow: 0 22px 46px -24px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .14) !important; transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .45s, background .45s, box-shadow .45s !important; } /* Ohne Glas-Unterstützung (ältere Browser): dichter, damit der Text lesbar bleibt */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group { background: rgb(4 60 46 / .82) !important; } } /* Akzentlinie oben — wie die farbigen Kartenköpfe auf baulogistik-nord.de */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc-akzent) 30%, var(--sc-gold, #cdbd93) 70%, transparent); opacity: .85; } /* Laufende Nummer unten: „01 — Vorteil" (CSS-Zähler, kein Eingriff in den Inhalt) */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group::after { content: counter(sc-vorteil, decimal-leading-zero) " — Vorteil"; position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.05rem; padding-top: .8rem; border-top: 1px solid rgb(255 255 255 / .12); font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: rgb(255 255 255 / .62); text-align: center; white-space: pre; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group:hover { transform: translateY(-5px); border-color: rgb(52 211 153 / .45) !important; background: linear-gradient(160deg, rgb(255 255 255 / .17) 0%, rgb(2 44 34 / .46) 100%) !important; box-shadow: 0 28px 56px -26px rgb(0 0 0 / .8), 0 0 0 1px rgb(52 211 153 / .18), inset 0 1px 0 rgb(255 255 255 / .18) !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group h3 { color: #fff !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group p { color: rgb(255 255 255 / .88) !important; } /* Symbol-Kästchen als Glas-Plakette mit Akzentrand, beim Überfahren voll in Akzent */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group > div:first-child { background: rgb(52 211 153 / .14) !important; border: 1px solid rgb(52 211 153 / .38); transition: background .45s, border-color .45s; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group > div:first-child svg { color: var(--sc-akzent) !important; transition: color .45s; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group:hover > div:first-child { background: var(--sc-akzent) !important; border-color: var(--sc-akzent); } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group:hover > div:first-child svg { color: rgb(var(--sc-gruen-tief)) !important; } /* ---------- b) Kundenstimmen im selben Glas ---------- ⚠️ Hier OHNE backdrop-filter: die Karten laufen im Band (staffclean-bewegung.js) ständig weiter — Weichzeichnen hinter bewegten Karten kostet am Handy jedes Bild neu Rechenzeit und ruckelt. Ein halbdurchsichtiges Dunkelgrün sieht auf dem abgedunkelten Foto gleich aus und kostet nichts. */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"] { position: relative; overflow: hidden; background: linear-gradient(165deg, rgb(255 255 255 / .11) 0%, rgb(2 44 34 / .52) 100%) !important; border: 1px solid rgb(255 255 255 / .15) !important; box-shadow: 0 22px 46px -24px rgb(0 0 0 / .75), inset 0 1px 0 rgb(255 255 255 / .12) !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"]::before { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 2px; background: linear-gradient(90deg, transparent, var(--sc-akzent) 30%, var(--sc-gold, #cdbd93) 70%, transparent); opacity: .8; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"]:hover { border-color: rgb(52 211 153 / .45) !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"] p { color: rgb(255 255 255 / .84) !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"] p.font-bold { color: #fff !important; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"] p.text-xs { color: rgb(255 255 255 / .55) !important; } /* Anführungszeichen-Symbol in Akzent; die Sterne behalten ihr Gold (text-amber-400) */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(6) div.group[class*="rounded-"] > svg:first-child { color: var(--sc-akzent) !important; opacity: .9; } /* ---------- c) Akzentwort mit Unterstrich in Logo-Gold ---------- Alle Seiten: jedes eingefärbte Wort in h1/h2. Die Umrissschrift (.sc-kontur) ist ausgenommen — sie hat keine Füllfarbe, ein Strich darunter stünde ohne Wort. box-decoration-break: bricht das Wort um (Handy: bis zu drei Zeilen, gemessen 25.09.), bekommt jede Zeile ihren eigenen Strich statt eines Strichs über die ganze Kopfbreite. Alle Akzentwörter sind inline (gemessen). */ main h1 span[class*="text-emerald"]:not(.sc-kontur), main h2 span[class*="text-emerald"]:not(.sc-kontur) { background-image: linear-gradient(90deg, rgb(205 189 147 / .95), rgb(205 189 147 / .55)); background-repeat: no-repeat; background-size: 100% .11em; background-position: 0 96%; padding-bottom: .05em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ---------- d) Weicher Übergang vom Titelbild in die Seite ---------- Ebene 1: über Bild und Abdeckung (beide z auto), UNTER Inhalt (z 10) und Bildpunkten (z 11) — gemessen 25.09.2026. Höhe bewusst knapp: die Bildpunkte sitzen am Handy 72 px über der Kante, der Text endet ~195 px darüber. */ main > section.min-h-\[100svh\]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .55) 70%, #fff 100%); } @media (max-width: 639px) { main > section.min-h-\[100svh\]::after { height: 52px; } } /* ---------- e) Akzentlinie oben auf der Kennzahlen-Karte ---------- */ main:has(> section.min-h-\[100svh\]) > section:nth-of-type(2) div.bg-white.shadow-xl { position: relative; overflow: hidden; } main:has(> section.min-h-\[100svh\]) > section:nth-of-type(2) div.bg-white.shadow-xl::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #059669, var(--sc-akzent) 40%, var(--sc-gold, #cdbd93) 100%); } @media (prefers-reduced-motion: reduce) { main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group, main:has(> section.min-h-\[100svh\]) > section:nth-of-type(4) .grid > * > div.group:hover { transition: none !important; transform: none !important; } } /* ========================================================================== 8. Kopf-Logo, Leistungs-Laufband, Ansprechpartner — Manuel 27.09.2026 ========================================================================== */ /* 8a. Kopf-Logo: Die alten Logodateien waren quadratisch mit großem Leerrand (Schrift ~30 px hoch in einem 88/112-px-Bild, das über den 56/64-px-Kopf hinausragte). Jetzt zugeschnittene Fassungen (staffclean-logo-kopf-hell/-dunkel), passend in den Kopf gesetzt. */ #root header.fixed a[class*="-my-6"] { margin-top: 0 !important; margin-bottom: 0 !important; } #root header.fixed img[src*="staffclean-logo-kopf"] { height: 46px !important; width: auto !important; max-width: none; } @media (min-width: 640px) { #root header.fixed img[src*="staffclean-logo-kopf"] { height: 54px !important; } } /* Gescrollt: Der Kopf war nur zu 80 % weiß — über den dunkelgrünen Abschnitten wurde er grau, das goldene „CLEAN“ im dunklen Logo verschwand darin. Jetzt deckend hell. */ #root header.fixed.bg-white\/80 { background-color: rgb(255 255 255 / .97) !important; } /* 8b. Leistungs-Laufband: läuft per Skript (staffclean-bewegung.js, bandBewegen) statt per CSS-Animation, damit man es auf dem Handy wischen und am Rechner mit der Maus ziehen kann. */ .sc-laufband.sc-js { overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; } .sc-laufband.sc-js::-webkit-scrollbar { display: none; } .sc-laufband.sc-js .sc-laufband-spur { animation: none !important; transform: none !important; } .sc-laufband.sc-js.sc-zieht { cursor: grabbing; user-select: none; } .sc-laufband.sc-js img { -webkit-user-drag: none; user-select: none; pointer-events: none; } /* 8c. „Ihr fester Ansprechpartner“ — kleiner und dezenter (Manuel: „erdrückend, riesengroß“) */ main section:has(img[src*="ansprechpartner-manu"]) { padding-top: 3rem !important; padding-bottom: 3rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .text-center.mb-10 { margin-bottom: 1.75rem !important; } main section:has(img[src*="ansprechpartner-manu"]) h2 { font-size: 1.5rem !important; line-height: 1.25 !important; margin-bottom: .6rem !important; } main section:has(img[src*="ansprechpartner-manu"]) h2 + p { font-size: .95rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm { max-width: 19rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative { padding: 1.1rem !important; } main section:has(img[src*="ansprechpartner-manu"]) div.relative.mx-auto:has(> div > img[src*="ansprechpartner-manu"]) { width: 7.5rem !important; height: 7.5rem !important; margin-bottom: 1rem !important; } main section:has(img[src*="ansprechpartner-manu"]) h3 { font-size: 1.1rem !important; margin-bottom: .75rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > p { font-size: .95rem !important; margin-bottom: 1.1rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid { gap: .6rem !important; margin-bottom: 1.25rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid > div { padding: .7rem .85rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 button { padding-top: .6rem !important; padding-bottom: .6rem !important; font-size: .95rem !important; height: auto !important; } @media (min-width: 640px) { main section:has(img[src*="ansprechpartner-manu"]) { padding-top: 4rem !important; padding-bottom: 4rem !important; } main section:has(img[src*="ansprechpartner-manu"]) h2 { font-size: 2rem !important; } main section:has(img[src*="ansprechpartner-manu"]) div.relative.mx-auto:has(> div > img[src*="ansprechpartner-manu"]) { width: 9rem !important; height: 9rem !important; } main section:has(img[src*="ansprechpartner-manu"]) h3 { font-size: 1.4rem !important; } } @media (min-width: 1024px) { main section:has(img[src*="ansprechpartner-manu"]) .max-w-7xl { max-width: 64rem !important; } } @media (max-width: 639px) { main section:has(img[src*="ansprechpartner-manu"]) { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .grid.lg\:grid-cols-12 { gap: 1.25rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm .space-y-2\.5 > a { padding: .45rem .7rem !important; min-height: 0 !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm .space-y-2\.5 > a > div:first-child { width: 2rem !important; height: 2rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid { grid-template-columns: 1fr 1fr !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid > div { padding: .55rem .6rem !important; text-align: left; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid > div .flex { gap: .45rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid > div .w-10 { width: 1.6rem !important; height: 1.6rem !important; border-radius: .5rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid > div .w-10 svg { width: .9rem !important; height: .9rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid h4 { font-size: .75rem !important; margin-bottom: .15rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .grid p { font-size: .68rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .flex.flex-col { flex-direction: row !important; gap: .5rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .flex.flex-col > a { flex: 1 1 0; min-width: 0; } main section:has(img[src*="ansprechpartner-manu"]) .lg\:col-span-7 > .flex.flex-col button { font-size: .85rem !important; padding-left: .5rem !important; padding-right: .5rem !important; } } @media (max-width: 639px) { /* Karte am Handy quer: Foto links, Name rechts, Kontaktzeilen darunter */ main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative { display: grid !important; grid-template-columns: 5.5rem 1fr; column-gap: 1rem; align-items: center; padding: .9rem !important; } main section:has(img[src*="ansprechpartner-manu"]) div.relative.mx-auto:has(> div > img[src*="ansprechpartner-manu"]) { width: 5.5rem !important; height: 5.5rem !important; margin: 0 !important; } main section:has(img[src*="ansprechpartner-manu"]) div.relative.mx-auto:has(> div > img[src*="ansprechpartner-manu"]) > div.absolute.-bottom-3 { font-size: .6rem !important; padding: .15rem .45rem !important; bottom: -.55rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center { text-align: left !important; margin: 0 !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center h3 { margin-bottom: .2rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > .space-y-2\.5 { grid-column: 1 / -1; margin-top: 1rem; } } @media (max-width: 639px) { main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center h3, main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center p { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center h3 { font-size: 1rem !important; } main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center p { font-size: .8rem !important; } } @media (max-width: 639px) { main section:has(img[src*="ansprechpartner-manu"]) .max-w-sm > div.relative > div.text-center p { width: 100% !important; max-width: none !important; display: block !important; } }