/* ========================================================================== BRAND — Flethi Gruppe, Industrieservice -------------------------------------------------------------------------- Grundlage: SEELE.md und die Bildvorlage in _recherche/vorlage-chatgpt.png WICHTIGSTER UNTERSCHIED ZU ALLEN BISHERIGEN PROJEKTEN: Der Baukasten ist hell gebaut — Papier ist die Grundfläche, Dunkel die Ausnahme. Hier ist es umgekehrt. Statt jede Komponente einzeln umzufärben, werden die Grundwerte gedreht: --c-paper wird dunkel, --c-ink wird hell. Die Semantik bleibt damit gültig, und alles, was im Baukasten sauber mit Variablen arbeitet, zieht automatisch mit. Umgefärbt werden muss nur, wo der Baukasten Farben fest ausschreibt (Kacheln, Fußzeile) — jede dieser Stellen steht unten mit Begründung. Reihenfolge im : 01 → 02 → 03 → 04 → 05 → 06 → brand.css ========================================================================== */ /* -------------------------------------------------------------------------- SCHRIFT Archivo für Überschriften: geometrisch, kräftig, trägt Versalien mit weitem Tracking — genau die Anmutung der Vorlage. Inter für Fließtext. Beide lokal, niemals über die Google-CDN. -------------------------------------------------------------------------- */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2-variations"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; } :root { /* --- Grundflächen, gedreht --------------------------------------------- Patricks Vorgabe: Anthrazit #1F2328 als Primärfarbe. Die Vorlage zeigt zusätzlich eine noch dunklere Ebene für den Seitengrund und eine hellere für abgesetzte Sektionen. Drei Stufen statt einer Fläche — „keine einfachen Farbflächen". */ --c-paper: #14181C; /* Seitengrund, dunkelste Stufe */ --c-paper-warm: #1F2328; /* abgesetzte Sektionen, Patricks Anthrazit */ --c-paper-deep: #0D1114; /* Fußzeile und Abschlussband */ /* --- Schrift ------------------------------------------------------------ Auf #14181C: Text 14,7:1, Meta 6,9:1. Beide deutlich über 4,5. */ --c-ink: #E9EDF1; /* MUSS mitgesetzt werden. Ohne diese Zeile erbt jeder Sekundärtext den Baukastenwert #3A3431 — ein dunkles Braun, gedacht für helle Seiten. Auf diesem Grund ist er praktisch unsichtbar. Aufgefallen am Fußtext der Nachweis-Sektion (23.08.2026). Gemessen: #C2CAD2 auf #14181C = 11,4:1 */ --c-ink-soft: #C2CAD2; --c-ink-mute: #9BA5AE; /* --- Akzent ------------------------------------------------------------- Edelstahl-Silber. Kein Buntton: Die Marke lebt von Metall, nicht von Farbe. Das Eisblau kommt nur in Lichtverläufen vor, nie als Fläche. */ --c-accent: #C7CDD3; --c-accent-ink: #14181C; /* Schrift AUF dem Akzent: dunkel */ --c-accent-deep: #FFFFFF; --c-accent-2: #DCEAF3; /* Eisblau, nur für Lichter und Ränder */ --c-line: rgba(199,205,211,0.22); --c-line-soft: rgba(199,205,211,0.12); --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-text: "Inter", system-ui, -apple-system, sans-serif; --f-label: "Archivo", "Helvetica Neue", Arial, sans-serif; /* „Nicht rund. Eher klare Kanten, 8–12 px Radius maximal." */ --radius: 4px; --sh-weich: 0 1px 2px rgba(0,0,0,0.4); --sh-karte: 0 8px 30px rgba(0,0,0,0.45); --sh-hoch: 0 18px 50px rgba(0,0,0,0.55); } /* Der Seitengrund selbst. Ohne das bleibt hinter dem letzten Element die helle Grundfarbe des Baukastens stehen. */ html, body { background: var(--c-paper); color: var(--c-ink); } /* -------------------------------------------------------------------------- TYPOGRAFIE Überschriften in Versalien mit weitem Tracking, wie in der Vorlage. Das ist hier kein Effekt, sondern das tragende Gestaltungsmittel. -------------------------------------------------------------------------- */ h1, h2, h3, .hero__titel, .kachel__titel, .leistung__titel { font-family: var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; font-weight: 700; color: #FFFFFF; } .hero__titel { /* „INDUSTRIESERVICE" ist ein 16 Zeichen langes Wort in Versalien. Bei 4rem lief es über den Container und wurde vom overflow der Zeilen-Animation abgeschnitten. Deshalb kleiner und der Block breiter. */ font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: 0.005em; font-weight: 700; max-width: 22ch; overflow-wrap: break-word; } h2 { line-height: 1.12; } /* Fließtext: „gut lesbar, viel Abstand, professionell". */ body { font-family: var(--f-text); } p { line-height: 1.75; } .text-lead { line-height: 1.65; } /* Kicker: kleine Versalzeile über der Überschrift, silbern statt bunt. Kein Rahmen, kein Zeichen davor — beides ist im Baukasten entfernt. */ .kicker, .hero__kicker { font-family: var(--f-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-ink-mute); } /* -------------------------------------------------------------------------- SEKTIONEN Drei Stufen statt einer Fläche, dazu eine haarfeine Trennlinie mit Lichtverlauf zur Mitte hin. Das ersetzt die Sektionskanten (Schrägen, Wellen) der anderen Projekte: Hier wäre alles Geschwungene falsch. -------------------------------------------------------------------------- */ .sektion { background: var(--c-paper); position: relative; } .sektion--warm { background: var(--c-paper-warm); } .sektion + .sektion::before, .sektion--warm::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(to right, transparent, rgba(199,205,211,0.20) 22%, rgba(220,234,243,0.34) 50%, rgba(199,205,211,0.20) 78%, transparent); } .sektion.ist-dunkel { background: var(--c-paper-deep); } /* -------------------------------------------------------------------------- NAVIGATION Dunkel, mit feiner Linie nach unten statt Schatten. -------------------------------------------------------------------------- */ .site-nav { background: rgba(13,17,20,0.88); border-bottom: 1px solid var(--c-line-soft); backdrop-filter: blur(14px); } .site-nav::after { display: none; } .nav-liste a { font-family: var(--f-label); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-mute); } .nav-liste a:hover, .nav-liste a[aria-current="page"] { color: #FFFFFF; } .site-nav__wortmarke { font-family: var(--f-display); font-weight: 800; color: #FFFFFF; } .site-nav__wortmarke span { color: var(--c-ink-mute); } /* -------------------------------------------------------------------------- SCHALTFLÄCHEN „Anthrazit. Beim Hover: Silber, leichter Lichtreflex, keine starken Schatten." Der Reflex ist ein schmaler heller Streifen, der einmal quer durchläuft — Licht auf Metall, kein Farbwechsel. -------------------------------------------------------------------------- */ .btn { font-family: var(--f-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; border-radius: var(--radius); position: relative; overflow: hidden; isolation: isolate; } .btn::after { content: ""; position: absolute; inset: 0 auto 0 -60%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.30), transparent); transform: skewX(-18deg); transition: left 700ms cubic-bezier(0.22,1,0.36,1); pointer-events: none; } .btn:hover::after, .btn:focus-visible::after { left: 120%; } .btn--akzent { background: linear-gradient(180deg, #C7CDD3, #9AA3AB); color: #14181C; border: 1px solid rgba(255,255,255,0.35); } .btn--akzent:hover, .btn--akzent:focus-visible { background: linear-gradient(180deg, #FFFFFF, #C7CDD3); color: #14181C; } .btn--offen { background: transparent; color: #FFFFFF; border: 1px solid var(--c-line); } .btn--offen:hover, .btn--offen:focus-visible { border-color: rgba(220,234,243,0.6); background: rgba(199,205,211,0.08); color: #FFFFFF; } .btn--hell { background: #FFFFFF; color: #14181C; border: 1px solid #FFFFFF; } /* -------------------------------------------------------------------------- KACHELN Der Baukasten schreibt die Kachel weiß fest und schiebt beim Überfahren eine dunkle Fläche hoch. Beides ist hier falsch: Die Kachel IST dunkel. Wer den Hintergrund festschreibt, muss die Schriftfarbe mitschreiben — deshalb stehen die Werte ausgeschrieben und nicht als var(--c-ink). -------------------------------------------------------------------------- */ .kachel { --kachel-grund: #1A1F24; --kachel-text: #E9EDF1; --kachel-meta: #9BA5AE; background: linear-gradient(160deg, rgba(220,234,243,0.05), transparent 42%), #1A1F24; border: 1px solid var(--c-line-soft); border-radius: var(--radius); box-shadow: none; transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out), transform var(--d-base) var(--e-out); } .kachel::before { display: none; } .kachel:hover { --kachel-text: #FFFFFF; --kachel-meta: #C7CDD3; transform: translateY(-3px); border-color: rgba(220,234,243,0.34); background: linear-gradient(160deg, rgba(220,234,243,0.10), transparent 46%), #20262C; box-shadow: var(--sh-karte); } .kachel__titel { font-size: 0.9375rem; letter-spacing: 0.08em; margin-bottom: var(--s-3); } .kachel__fuss, .kachel:hover .kachel__fuss { color: var(--c-accent); border-top-color: var(--c-line-soft); } /* -------------------------------------------------------------------------- LEISTUNGSKACHEL MIT ICON Sechs Stück in einer Reihe, wie in der Vorlage. Line-Icons, technisch, nicht verspielt. Ab 68rem sechsspaltig, darunter stufenweise weniger. -------------------------------------------------------------------------- */ .leistungsraster { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); } @media (min-width: 44rem) { .leistungsraster { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 72rem) { .leistungsraster { grid-template-columns: repeat(6, minmax(0,1fr)); } } .kachel__icon { display: block; width: 34px; height: 34px; margin-bottom: var(--s-5); color: var(--c-accent-2); stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: color var(--d-base) var(--e-out); } .kachel:hover .kachel__icon { color: #FFFFFF; } /* -------------------------------------------------------------------------- ZAHLENBAND Vier Werte in einem Rahmen mit senkrechten Trennern, wie in der Vorlage. -------------------------------------------------------------------------- */ .zahlenband { border: 1px solid var(--c-line-soft); border-radius: var(--radius); background: linear-gradient(180deg, rgba(220,234,243,0.04), transparent); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 56rem) { .zahlenband { grid-template-columns: repeat(4, minmax(0,1fr)); } } .zahlenband__feld { padding: var(--s-6) var(--s-4); text-align: center; border-top: 1px solid var(--c-line-soft); border-left: 1px solid var(--c-line-soft); } .zahlenband__feld:nth-child(-n+2) { border-top: 0; } .zahlenband__feld:nth-child(odd) { border-left: 0; } @media (min-width: 56rem) { .zahlenband__feld { border-top: 0; border-left: 1px solid var(--c-line-soft); } .zahlenband__feld:first-child { border-left: 0; } .zahlenband__feld:nth-child(odd) { border-left: 1px solid var(--c-line-soft); } .zahlenband__feld:first-child { border-left: 0; } } .zahlenband__icon { width: 28px; height: 28px; margin: 0 auto var(--s-4); color: var(--c-accent-2); stroke: currentColor; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .zahlenband__wert { display: block; font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: #FFFFFF; line-height: 1.1; } .zahlenband__text { display: block; margin-top: var(--s-2); font-family: var(--f-label); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-mute); } /* -------------------------------------------------------------------------- BRANCHEN Vier Bildkacheln, Beschriftung unten über dem Bild. Das Bild wird beim Überfahren minimal größer und heller — „Licht fährt über Metall". -------------------------------------------------------------------------- */ .branchen { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-4); } @media (min-width: 64rem) { .branchen { grid-template-columns: repeat(4, minmax(0,1fr)); } } .branche { position: relative; display: block; overflow: hidden; border: 1px solid var(--c-line-soft); border-radius: var(--radius); text-decoration: none; isolation: isolate; aspect-ratio: 4 / 3; } .branche img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.72) brightness(0.82); transform: scale(1.01); transition: transform 900ms var(--e-out), filter 600ms var(--e-out); } .branche::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,13,16,0.94) 0%, rgba(10,13,16,0.72) 26%, rgba(10,13,16,0.28) 52%, rgba(10,13,16,0.08) 100%); } .branche:hover img { transform: scale(1.07); filter: saturate(0.85) brightness(0.95); } .branche__titel { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--s-5); font-family: var(--f-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; } .branche__titel::before { content: ""; display: block; width: 34px; height: 2px; margin-bottom: var(--s-3); background: var(--c-accent-2); transition: width var(--d-slow) var(--e-out); } .branche:hover .branche__titel::before { width: 68px; } /* -------------------------------------------------------------------------- HÄKCHENLISTE In der Vorlage steht sie in der Über-uns-Sektion. Line-Häkchen in Eisblau, kein gefülltes Symbol. -------------------------------------------------------------------------- */ .haken { list-style: none; padding: 0; display: grid; gap: var(--s-3); } .haken li { position: relative; padding-left: 1.85rem; margin: 0; color: var(--c-ink); } .haken li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 13px; height: 7px; border-left: 1.5px solid var(--c-accent-2); border-bottom: 1.5px solid var(--c-accent-2); transform: rotate(-45deg); } /* -------------------------------------------------------------------------- HERO Dunkle Halle im Hintergrund. Der Verlauf liegt links dicht und gibt nach rechts das Motiv frei — dort steht die Edelstahlanlage. Zusätzlich ein sehr flacher Lichtschimmer von oben rechts, der die Lichtstimmung der Vorlage aufnimmt. -------------------------------------------------------------------------- */ .hero { background: var(--c-paper-deep); border-bottom: 1px solid var(--c-line-soft); align-items: center; min-height: calc(100svh - var(--nav-h, 4.75rem)); } .hero__medien::after { background: /* Grundschicht über alle drei Aufnahmen. Video 1 ist eine dunkle Halle, Video 2 ein heller Reinraum — ohne diese Schicht springt die Stimmung beim Wechsel, und der helle Reinraum widerspricht der Marke („dunkle Industriehallen"). Der Kontrast war auch ohne sie sicher (8:1), es geht hier um die Anmutung, nicht um Lesbarkeit. */ linear-gradient(rgba(14,18,22,0.30), rgba(14,18,22,0.30)), radial-gradient(120% 90% at 78% 8%, rgba(220,234,243,0.16) 0%, transparent 55%), linear-gradient(to right, rgba(10,13,16,0.94) 0%, rgba(10,13,16,0.88) 26%, rgba(10,13,16,0.66) 46%, rgba(10,13,16,0.34) 68%, rgba(10,13,16,0.18) 100%), linear-gradient(to top, rgba(10,13,16,0.72) 0%, rgba(10,13,16,0.20) 42%, transparent 100%); } .hero__inhalt { max-width: 54rem; margin-inline: 0 auto; padding-inline: clamp(1.25rem, 4vw, 4.5rem); } .hero__text { max-width: 34rem; color: #C3CBD3; font-size: 1.0625rem; } .hero__kicker { color: #C7CDD3; letter-spacing: 0.26em; } @media (max-width: 48rem) { .hero { align-items: end; } .hero__medien::after { background: linear-gradient(to top, rgba(10,13,16,0.95) 0%, rgba(10,13,16,0.92) 40%, rgba(10,13,16,0.78) 58%, rgba(10,13,16,0.42) 76%, rgba(10,13,16,0.12) 100%); } } /* -------------------------------------------------------------------------- ABSCHLUSSBAND Ein schmales Band vor der Fußzeile, wie in der Vorlage: Überschrift links, Schaltfläche rechts. -------------------------------------------------------------------------- */ .abschluss { background: radial-gradient(90% 140% at 82% 50%, rgba(220,234,243,0.10), transparent 60%), var(--c-paper-warm); border-top: 1px solid var(--c-line-soft); color: var(--c-ink); } .abschluss h2 { color: #FFFFFF; } /* Der Baukasten zentriert das Abschlussband und begrenzt es auf 46rem. Die Vorlage zeigt es als breites Band: Überschrift links, Schaltfläche rechts. Deshalb linksbündig und über die volle Rasterbreite. */ .abschluss { text-align: left; padding-block: var(--s-9); } .abschluss__inner { display: grid; gap: var(--s-6); align-items: center; justify-items: start; max-width: none; margin-inline: 0; } .abschluss h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); max-width: 26ch; } .abschluss p { max-width: 46ch; } .abschluss__aktionen { justify-content: flex-start; } @media (min-width: 56rem) { .abschluss__inner { grid-template-columns: 1fr auto; } .abschluss__aktionen { justify-self: end; } } /* -------------------------------------------------------------------------- FUSSZEILE Farben ausgeschrieben, danach erst die Variablen umdefinieren — sonst liest background den im selben Block überschriebenen Wert. -------------------------------------------------------------------------- */ .site-footer { background: var(--c-paper-deep); color: #C3CBD3; border-top: 1px solid var(--c-line-soft); } .site-footer a { color: #C3CBD3; } .site-footer a:hover { color: #FFFFFF; } .site-footer h2 { color: #FFFFFF; font-size: 0.6875rem; letter-spacing: 0.18em; } .site-footer { --c-ink: #C3CBD3; --c-ink-mute: #7E888F; } .site-footer .invertieren { filter: none; } /* -------------------------------------------------------------------------- FORMULAR UND KARTE auf dunklem Grund -------------------------------------------------------------------------- */ .feld input, .feld select, .feld textarea { background: #1A1F24; border: 1px solid var(--c-line-soft); color: var(--c-ink); border-radius: var(--radius); } .feld input::placeholder, .feld textarea::placeholder { color: #6F7981; } .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: rgba(220,234,243,0.55); outline-color: rgba(220,234,243,0.55); } .karte, .karte-platzhalter { background: #1A1F24; border: 1px solid var(--c-line-soft); color: var(--c-ink); } .kontaktdaten__zeile { border-color: var(--c-line-soft); } /* -------------------------------------------------------------------------- BEWEGUNG „Alles sehr ruhig. Feine Fade-ins, sanfte Bewegungen, keine hektischen Effekte." Deshalb längere Dauer und weichere Kurve als im Baukasten. -------------------------------------------------------------------------- */ :root { --d-base: 420ms; --d-slow: 900ms; --e-out: cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal] { transition-duration: 1100ms; } /* Eine Linie, die beim Erscheinen einwächst. In der Vorlage sitzt sie unter den Sektionsüberschriften. */ .linie { display: block; width: 0; height: 2px; margin-top: var(--s-4); background: linear-gradient(to right, var(--c-accent-2), transparent); transition: width 1400ms var(--e-out) 200ms; } [data-reveal="sichtbar"] .linie, .js-aus .linie { width: 96px; } /* -------------------------------------------------------------------------- MARKE GROSS (Über-uns-Sektion) In der Vorlage steht das Logo dort groß auf dunklem Grund, mit einem weichen Lichtschein dahinter. -------------------------------------------------------------------------- */ .marke-gross { position: relative; margin: 0; display: grid; place-items: center; padding: var(--s-7); } .marke-gross::before { content: ""; position: absolute; inset: 12%; background: radial-gradient(circle at 50% 45%, rgba(220,234,243,0.13), transparent 62%); pointer-events: none; } .marke-gross img { position: relative; width: 100%; max-width: 22rem; height: auto; } /* Nav-Logo: das Bild trägt die Marke, die Wortmarke daneben entfällt. */ .site-nav__logo img { height: clamp(2.25rem, 3.4vw, 3rem); width: auto; } /* -------------------------------------------------------------------------- KACHELTITEL IN SCHMALEN SPALTEN Bei sechs Spalten stehen rund 140 px Textbreite zur Verfügung. Wörter wie „Industriereinigung" (18 Zeichen) passen dort nicht in eine Zeile, und das overflow-wrap: break-word des Baukastens hat sie mitten im Wort zerschnitten („INDUSTRIERE INIGUNG"). Stattdessen echte Silbentrennung: Das Dokument ist lang="de", der Browser trennt korrekt und setzt einen Trennstrich. break-word bleibt als letzte Reißleine für Wörter ohne Trennstelle. -------------------------------------------------------------------------- */ .leistungsraster .kachel { padding: var(--s-5) var(--s-4) var(--s-5); } .leistungsraster .kachel__titel { font-size: 0.8125rem; letter-spacing: 0.05em; line-height: 1.35; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } .leistungsraster .kachel p { font-size: 0.8125rem; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; } /* Branchenbild auf der Unterseite: gleiche Anmutung wie die Kacheln der Startseite, aber ohne Beschriftung im Bild. */ .branchen-figur { margin: 0; overflow: hidden; border: 1px solid var(--c-line-soft); border-radius: var(--radius); } .branchen-figur img { display: block; width: 100%; height: clamp(16rem, 30vw, 26rem); object-fit: cover; filter: saturate(0.72) brightness(0.86); } /* -------------------------------------------------------------------------- LEISTUNGSKACHEL MIT BILD BEIM ÜBERFAHREN Für jede der sechs Leistungen liegt ein eigenes Motiv vor. Bei 190 px Kachelbreite trägt ein dauerhafter Bildhintergrund nicht — er wird zu Rauschen, und die Vorlage zeigt die Kacheln bewusst nur mit Icon. Deshalb: Im Ruhezustand sieht die Kachel aus wie in der Vorlage. Erst beim Überfahren blendet das Motiv auf. Die Deckschicht bleibt an der Textzone dicht, sie ist ein Verlauf von unten, kein gleichmäßiger Schleier — der Text verliert dabei keinen Kontrast. Die Bilder selbst stehen groß auf der Leistungsseite, dort haben sie Platz und Wirkung. -------------------------------------------------------------------------- */ .kachel--bild { position: relative; isolation: isolate; overflow: hidden; } .kachel--bild::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background-image: linear-gradient(to top, rgba(16,20,24,0.94) 0%, rgba(16,20,24,0.88) 40%, rgba(16,20,24,0.72) 66%, rgba(16,20,24,0.46) 100%), var(--kachel-bild); background-size: cover, cover; background-position: center, center; transform: scale(1.06); transition: opacity var(--d-slow) var(--e-out), transform 1400ms var(--e-out); } .kachel--bild:hover::after, .kachel--bild:focus-visible::after { opacity: 1; transform: scale(1); } /* -------------------------------------------------------------------------- NAV-MARKE Das gelieferte Logo trägt den Schriftzug in dunklem Anthrazit — auf dunklem Grund unsichtbar. Deshalb wird nur das FG-Monogramm als Bild verwendet (Chrom, funktioniert auf dunkel), die Wortmarke daneben ist echter Text: scharf auf jedem Bildschirm, farblich steuerbar, vorlesbar. -------------------------------------------------------------------------- */ .site-nav__logo { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; } .site-nav__logo img { height: clamp(2rem, 3vw, 2.6rem); width: auto; } .site-nav__wortmarke { display: grid; gap: 2px; font-family: var(--f-display); font-size: clamp(0.9rem, 1.3vw, 1.05rem); font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: #FFFFFF; line-height: 1; } .site-nav__wortmarke span { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.24em; color: var(--c-ink-mute); } /* Die große Marke in der Über-uns-Sektion. */ .marke-gross figcaption { margin-top: var(--s-5); text-align: center; font-family: var(--f-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #FFFFFF; line-height: 1.2; } .marke-gross figcaption span { display: block; margin-top: var(--s-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.3em; color: var(--c-ink-mute); } /* -------------------------------------------------------------------------- BILD IM LEISTUNGS-AKKORDEON Die sechs quadratischen Motive stehen hier groß. Der Inhaltsbereich wird dafür dreispaltig: Bild, Beschreibung, Leistungspunkte. -------------------------------------------------------------------------- */ .leistung__bild { margin: 0; overflow: hidden; border: 1px solid var(--c-line-soft); border-radius: var(--radius); } .leistung__bild img { display: block; width: 100%; height: 100%; min-height: 14rem; object-fit: cover; filter: saturate(0.78) brightness(0.9); } @media (min-width: 62rem) { .leistung__inhalt { grid-template-columns: 1fr 1.2fr 1fr; align-items: start; } } /* ========================================================================== AUSBAUSTUFE 2 — VERFEINERUNG -------------------------------------------------------------------------- Die Struktur der Seite bleibt unverändert. Was hier folgt, hebt die Ausführung: Rhythmus, Tiefe, Übergänge, Zustände. Leitgedanke: Bei Anthrazit und Edelstahl entsteht Wertigkeit nicht durch Farbe, sondern durch Licht, Abstand und Präzision der Kanten. Jede Regel hier arbeitet an einem dieser drei Punkte. ========================================================================== */ :root { /* --- Vertikaler Rhythmus ------------------------------------------------ Sektionen bekommen mehr Luft. Der Baukastenwert war für helle Seiten gerechnet; auf dunklem Grund braucht dieselbe Menge Inhalt spürbar mehr Raum, sonst wirkt die Seite gedrängt statt ruhig. */ --sektion-y: clamp(5.5rem, 10vw, 11rem); /* --- Licht -------------------------------------------------------------- Drei Stufen. Sie ersetzen Schatten als Mittel für Tiefe: Auf dunklem Grund erzeugt ein Schatten nichts, ein Lichtsaum dagegen schon. */ --licht-kante: rgba(220,234,243,0.30); --licht-flaeche: rgba(220,234,243,0.055); --licht-schein: rgba(220,234,243,0.14); /* --- Schatten ----------------------------------------------------------- Tiefer und weicher als im Baukasten. Auf Anthrazit darf ein Schatten nicht grau werden, sonst wirkt er wie Schmutz. */ --sh-weich: 0 2px 8px rgba(0,0,0,0.30); --sh-karte: 0 14px 40px -12px rgba(0,0,0,0.65); --sh-hoch: 0 28px 70px -18px rgba(0,0,0,0.75); --e-sanft: cubic-bezier(0.25, 0.9, 0.28, 1); } /* -------------------------------------------------------------------------- TYPOGRAFISCHER RHYTHMUS Überschriften standen zu dicht an ihrem Vortext und zu weit vom eigenen Inhalt. Der Sektionskopf wird als Einheit gesetzt: Label, Überschrift, Linie, Lead — mit abnehmendem Abstand nach innen. -------------------------------------------------------------------------- */ .sektion-kopf { gap: 0; margin-bottom: clamp(3rem, 5vw, 4.5rem); max-width: 60rem; } .sektion-kopf .kicker { margin-bottom: var(--s-5); } .sektion-kopf h2 { font-size: clamp(1.75rem, 3.4vw, 2.9rem); letter-spacing: -0.005em; line-height: 1.14; margin: 0; } .sektion-kopf .linie { margin-top: var(--s-6); } .sektion-kopf p:not(.kicker) { margin-top: var(--s-6); max-width: 46rem; font-size: 1.0625rem; line-height: 1.8; color: var(--c-ink-mute); } /* Die Linie ist ein wiederkehrendes Zeichen der Seite. Sie bekommt einen festen Ort im Rhythmus und einen Verlauf, der nach rechts ausläuft. */ .linie { height: 1px; background: linear-gradient(to right, var(--licht-kante), rgba(199,205,211,0.10) 62%, transparent); } /* -------------------------------------------------------------------------- SEKTIONSÜBERGÄNGE Statt einer harten Kante zwischen zwei Flächen ein sehr flacher Lichtsaum. Er nimmt der Trennung die Härte, ohne sie aufzuweichen. -------------------------------------------------------------------------- */ .sektion + .sektion::before, .sektion--warm::before { background: linear-gradient(to right, transparent, rgba(199,205,211,0.14) 18%, var(--licht-kante) 50%, rgba(199,205,211,0.14) 82%, transparent); } .sektion--warm { background: radial-gradient(120% 70% at 50% 0%, var(--licht-flaeche), transparent 60%), var(--c-paper-warm); } /* -------------------------------------------------------------------------- NAVIGATION Milchglas statt Fläche. Die Leiste verdichtet sich beim Scrollen: mehr Unschärfe, dunklerer Grund, kürzere Höhe. Das ist der einzige Ort der Seite, an dem sich beim Scrollen etwas verändert — deshalb wirkt es. -------------------------------------------------------------------------- */ .site-nav { background: linear-gradient(180deg, rgba(13,17,20,0.82), rgba(13,17,20,0.66)); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(199,205,211,0.10); transition: background 500ms var(--e-sanft), border-color 500ms var(--e-sanft), backdrop-filter 500ms var(--e-sanft); } .site-nav[data-gescrollt="true"] { background: linear-gradient(180deg, rgba(11,14,17,0.94), rgba(11,14,17,0.88)); backdrop-filter: blur(26px) saturate(160%); -webkit-backdrop-filter: blur(26px) saturate(160%); border-bottom-color: rgba(199,205,211,0.16); } .site-nav__inner { gap: clamp(1.5rem, 3vw, 3rem); } /* Navigationspunkte: Unterstrich wächst aus der Mitte. */ .nav-liste { gap: clamp(1.25rem, 2.2vw, 2.25rem); } .nav-liste a { position: relative; padding-block: 0.5rem; transition: color 320ms var(--e-sanft); } .nav-liste a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--c-accent-2); transition: left 420ms var(--e-sanft), right 420ms var(--e-sanft); } .nav-liste a:hover::after, .nav-liste a:focus-visible::after, .nav-liste a[aria-current="page"]::after { left: 0; right: 0; } /* -------------------------------------------------------------------------- SCHALTFLÄCHEN Der Lichtreflex bleibt, bekommt aber Gesellschaft: eine Kante, die beim Überfahren aufhellt, und eine Hebung um genau 1 px. Mehr wäre bei einer Industriemarke zu verspielt. -------------------------------------------------------------------------- */ .btn { padding: 1.05rem 1.9rem; letter-spacing: 0.14em; transition: transform 380ms var(--e-sanft), box-shadow 380ms var(--e-sanft), background 380ms var(--e-sanft), border-color 380ms var(--e-sanft), color 380ms var(--e-sanft); will-change: transform; } .btn--gross { padding: 1.25rem 2.4rem; font-size: 0.8125rem; } .btn--akzent { background: linear-gradient(180deg, #DDE2E7 0%, #C7CDD3 46%, #A6AEB6 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 6px 20px -8px rgba(0,0,0,0.6); } .btn--akzent:hover, .btn--akzent:focus-visible { background: linear-gradient(180deg, #FFFFFF 0%, #E4E8EC 48%, #BFC7CE 100%); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 12px 30px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(220,234,243,0.22); } .btn--offen { border-color: rgba(199,205,211,0.28); background: rgba(199,205,211,0.03); } .btn--offen:hover, .btn--offen:focus-visible { transform: translateY(-1px); border-color: rgba(220,234,243,0.55); background: rgba(199,205,211,0.09); box-shadow: 0 10px 26px -12px rgba(0,0,0,0.7); } .btn:active { transform: translateY(0); } /* -------------------------------------------------------------------------- HERO — TIEFE Der Hero war eine Fläche mit Text darauf. Er bekommt jetzt vier Ebenen, von hinten nach vorn: Bewegtbild, Lichtstrahlen, Verlauf, Vignette. Die Lichtstrahlen sind kein Effekt um ihrer selbst willen: Video 1 zeigt Licht, das durch Hallenfenster fällt. Die Strahlen nehmen diese Richtung auf und halten sie über alle drei Aufnahmen konstant. -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; } /* Ebene 2 — Lichtstrahlen. Sehr flach, sehr langsam. */ .hero__licht { position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; background: linear-gradient(102deg, transparent 34%, rgba(220,234,243,0.075) 40%, transparent 46%), linear-gradient(102deg, transparent 52%, rgba(220,234,243,0.05) 57%, transparent 62%), linear-gradient(102deg, transparent 66%, rgba(220,234,243,0.035) 70%, transparent 75%); transform: translate3d(0,0,0); animation: strahlen 22s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes strahlen { 0% { opacity: 0.55; transform: translate3d(-1.5%, 0, 0) scaleY(1); } 100% { opacity: 1; transform: translate3d(1.5%, 0, 0) scaleY(1.04); } } /* Ebene 4 — Vignette. Zieht den Blick zur Mitte und schließt die Ränder. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(130% 100% at 50% 45%, transparent 42%, rgba(6,9,12,0.42) 82%, rgba(6,9,12,0.68) 100%); } .hero__inhalt { position: relative; z-index: 1; } /* Feine Parallaxe. Der Ausschlag ist absichtlich winzig: Die Bewegung soll spürbar, aber nicht bemerkbar sein. site.js setzt --maus-x/--maus-y. */ .hero__medien { transform: translate3d(calc(var(--maus-x, 0) * -14px), calc(var(--maus-y, 0) * -10px), 0) scale(1.045); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .hero__licht { transform: translate3d(calc(var(--maus-x, 0) * 22px), calc(var(--maus-y, 0) * 14px), 0); } /* Kicker, Überschrift, Text und Schaltflächen laufen nacheinander ein. */ .hero__kicker, .hero__text, .hero__aktionen { animation: hero-auf 1100ms var(--e-sanft) both; } .hero__kicker { animation-delay: 120ms; } .hero__text { animation-delay: 620ms; } .hero__aktionen { animation-delay: 780ms; } @keyframes hero-auf { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } .hero__kicker { position: relative; padding-left: 3.25rem; margin-bottom: var(--s-6); } .hero__kicker::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 2.25rem; height: 1px; background: var(--c-accent-2); transform-origin: left; animation: strich-auf 900ms var(--e-sanft) 320ms both; } @keyframes strich-auf { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero__titel { margin-bottom: var(--s-6); } .hero__text { margin-bottom: var(--s-8); font-size: 1.125rem; line-height: 1.75; } .hero__aktionen { gap: var(--s-4); } /* Bildlaufhinweis. Verschwindet, sobald gescrollt wurde. */ .hero__hinweis { position: absolute; left: 50%; bottom: clamp(1.5rem, 3vw, 2.5rem); transform: translateX(-50%); z-index: 1; display: grid; justify-items: center; gap: var(--s-3); font-family: var(--f-label); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(199,205,211,0.55); animation: hero-auf 1100ms var(--e-sanft) 1100ms both; transition: opacity 500ms var(--e-sanft); pointer-events: none; } .hero__hinweis span { display: block; width: 1px; height: 2.75rem; background: linear-gradient(to bottom, transparent, var(--licht-kante), transparent); overflow: hidden; position: relative; } .hero__hinweis span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, #DCEAF3, transparent); animation: hinweis-lauf 2.6s ease-in-out infinite; } @keyframes hinweis-lauf { 0% { transform: translateY(-100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } body[data-gescrollt="true"] .hero__hinweis { opacity: 0; } /* Die Punkte zur Videoauswahl werden zu präzisen Strichen. */ .hero__punkte { z-index: 1; gap: var(--s-3); right: clamp(1.25rem, 4vw, 4.5rem); bottom: clamp(1.5rem, 3vw, 2.5rem); } .hero__punkt { width: 2rem; height: 2px; border: 0; border-radius: 0; background: rgba(199,205,211,0.28); transition: background 420ms var(--e-sanft), width 420ms var(--e-sanft); cursor: pointer; } .hero__punkt:hover { background: rgba(220,234,243,0.6); } .hero__punkt[aria-current="true"] { background: #DCEAF3; width: 3rem; } /* -------------------------------------------------------------------------- LEISTUNGSKACHELN Sie sollen sich anfühlen wie die Oberfläche eines guten Geräts: klare Kante, ein Lichtsaum oben, spürbarer Widerstand beim Anfassen. Die Kante ist zweiteilig: ein durchgehender feiner Rahmen und darüber eine hellere Oberkante, die beim Überfahren aufleuchtet. Das ist der Unterschied zwischen „Rahmen" und „Fase". -------------------------------------------------------------------------- */ .leistungsraster { gap: clamp(0.75rem, 1.1vw, 1.25rem); } .leistungsraster .kachel { padding: clamp(1.5rem, 2vw, 2rem) clamp(1.25rem, 1.6vw, 1.6rem); background: linear-gradient(180deg, #1C2126 0%, #171B20 100%); border: 1px solid rgba(199,205,211,0.10); border-radius: 6px; transition: transform 480ms var(--e-sanft), border-color 480ms var(--e-sanft), box-shadow 480ms var(--e-sanft), background 480ms var(--e-sanft); will-change: transform; } /* Fase: heller Saum an der Oberkante. */ .leistungsraster .kachel::before { content: ""; display: block; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(to right, transparent, rgba(220,234,243,0.22) 30%, rgba(220,234,243,0.30) 50%, rgba(220,234,243,0.22) 70%, transparent); opacity: 0.7; transition: opacity 480ms var(--e-sanft); z-index: 2; } .leistungsraster .kachel:hover, .leistungsraster .kachel:focus-visible { transform: translateY(-4px); border-color: rgba(220,234,243,0.30); background: linear-gradient(180deg, #232930 0%, #1A1F25 100%); box-shadow: var(--sh-karte), 0 0 0 1px rgba(220,234,243,0.10); } .leistungsraster .kachel:hover::before { opacity: 1; } .kachel__icon { width: 42px; height: 42px; margin-bottom: var(--s-6); stroke-width: 1.1; color: #9FB3C4; transition: color 480ms var(--e-sanft), transform 620ms var(--e-sanft); will-change: transform; } .kachel:hover .kachel__icon { color: #E6F1FA; transform: translateY(-2px) scale(1.06); } .leistungsraster .kachel__titel { font-size: 0.875rem; letter-spacing: 0.07em; line-height: 1.4; margin-bottom: var(--s-4); color: #FFFFFF; } .leistungsraster .kachel p { font-size: 0.8125rem; line-height: 1.7; color: #98A2AB; transition: color 480ms var(--e-sanft); } .leistungsraster .kachel:hover p { color: #B7C0C8; } /* -------------------------------------------------------------------------- ZAHLENBAND Die Trenner sind keine Linien mehr, sondern Lichtsäume, die zur Mitte heller werden. Hinter der aktiven Zahl steht ein sehr weicher Schein. -------------------------------------------------------------------------- */ .zahlenband { border: 1px solid rgba(199,205,211,0.12); border-radius: 6px; background: radial-gradient(90% 140% at 50% 0%, rgba(220,234,243,0.05), transparent 62%), linear-gradient(180deg, #1B2026 0%, #15191E 100%); box-shadow: var(--sh-karte); overflow: hidden; } .zahlenband__feld { position: relative; padding: clamp(2.25rem, 3.4vw, 3.25rem) clamp(1rem, 2vw, 1.75rem); border: 0; } /* Senkrechter Lichtsaum statt Rahmen. */ .zahlenband__feld + .zahlenband__feld::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(to bottom, transparent, rgba(199,205,211,0.22) 30%, rgba(199,205,211,0.22) 70%, transparent); } @media (max-width: 55.99rem) { .zahlenband__feld:nth-child(odd)::before { display: none; } .zahlenband__feld:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(to right, transparent, rgba(199,205,211,0.18), transparent); } } .zahlenband__icon { width: 34px; height: 34px; margin-bottom: var(--s-5); stroke-width: 1.1; color: #8FA6BA; transition: color 600ms var(--e-sanft), transform 700ms var(--e-sanft); } .zahlenband__feld:hover .zahlenband__icon { color: #DCEAF3; transform: translateY(-2px); } .zahlenband__wert { position: relative; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* Weicher Schein hinter der Zahl. */ .zahlenband__feld::after { content: ""; position: absolute; left: 50%; top: 52%; width: 9rem; height: 5rem; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(220,234,243,0.13), transparent); opacity: 0; transition: opacity 700ms var(--e-sanft); pointer-events: none; } [data-reveal="sichtbar"] .zahlenband__feld::after { opacity: 1; } .zahlenband__text { margin-top: var(--s-3); font-size: 0.625rem; letter-spacing: 0.2em; } /* -------------------------------------------------------------------------- BRANCHEN Die Kacheln waren zu flach für ihren Inhalt. Höheres Format, größere Bilder, und die Beschriftung sitzt auf einer eigenen Verlaufsfläche statt direkt auf dem Foto. -------------------------------------------------------------------------- */ .branchen { gap: clamp(0.75rem, 1.2vw, 1.5rem); } .branche { aspect-ratio: 3 / 4; border: 1px solid rgba(199,205,211,0.10); border-radius: 6px; transition: transform 620ms var(--e-sanft), border-color 620ms var(--e-sanft), box-shadow 620ms var(--e-sanft); will-change: transform; } @media (min-width: 64rem) { .branche { aspect-ratio: 4 / 5; } } .branche img { filter: saturate(0.62) brightness(0.78) contrast(1.06); transform: scale(1.03); transition: transform 1100ms var(--e-sanft), filter 700ms var(--e-sanft); will-change: transform; } .branche::after { background: linear-gradient(to top, rgba(8,11,14,0.96) 0%, rgba(8,11,14,0.86) 18%, rgba(8,11,14,0.46) 44%, rgba(8,11,14,0.14) 72%, rgba(8,11,14,0.04) 100%); transition: opacity 620ms var(--e-sanft); } .branche:hover, .branche:focus-visible { transform: translateY(-5px); border-color: rgba(220,234,243,0.28); box-shadow: var(--sh-hoch); } .branche:hover img, .branche:focus-visible img { transform: scale(1.09); filter: saturate(0.78) brightness(0.92) contrast(1.04); } .branche:hover::after { opacity: 0.88; } .branche__titel { padding: clamp(1.25rem, 1.8vw, 1.75rem); font-size: 0.75rem; letter-spacing: 0.16em; line-height: 1.4; } .branche__titel::before { width: 1.75rem; height: 1px; margin-bottom: var(--s-4); background: var(--c-accent-2); transition: width 700ms var(--e-sanft); } .branche:hover .branche__titel::before { width: 4.5rem; } /* -------------------------------------------------------------------------- ÜBER UNS Das Logo bekommt mehr Raum und einen ruhigeren Schein. Die Häkchenliste läuft gestaffelt ein, sobald die Sektion im Bild steht. -------------------------------------------------------------------------- */ .marke-gross { padding: clamp(1.5rem, 4vw, 3.5rem); } .marke-gross img { max-width: 26rem; } .marke-gross::before { inset: 4%; background: radial-gradient(circle at 50% 42%, rgba(220,234,243,0.16) 0%, rgba(220,234,243,0.05) 42%, transparent 68%); } .marke-gross figcaption { letter-spacing: 0.18em; } .split .stapel-weit { max-width: 40rem; } .split .stapel-weit p { color: #A8B2BA; line-height: 1.85; } .haken { gap: var(--s-4); margin-top: var(--s-6); } .haken li { padding-left: 2.25rem; font-size: 0.9375rem; color: #C3CBD3; opacity: 0; transform: translateX(-8px); transition: opacity 700ms var(--e-sanft), transform 700ms var(--e-sanft); } [data-reveal="sichtbar"] .haken li { opacity: 1; transform: none; } .haken li:nth-child(1) { transition-delay: 120ms; } .haken li:nth-child(2) { transition-delay: 260ms; } .haken li:nth-child(3) { transition-delay: 400ms; } .haken li::before { width: 15px; height: 8px; border-width: 1.5px; border-color: #DCEAF3; top: 0.42em; } /* -------------------------------------------------------------------------- ABSCHLUSSBAND Statt einer Fläche ein Verlauf mit Lichtquelle rechts hinter der Schaltfläche — dort, wo der Blick hin soll. -------------------------------------------------------------------------- */ .abschluss { padding-block: clamp(4rem, 7vw, 6.5rem); background: radial-gradient(70% 180% at 88% 50%, rgba(220,234,243,0.13), transparent 62%), radial-gradient(90% 140% at 12% 0%, rgba(220,234,243,0.05), transparent 58%), linear-gradient(180deg, #1E242A 0%, #171C21 100%); border-top: 1px solid rgba(199,205,211,0.12); border-bottom: 1px solid rgba(199,205,211,0.08); } .abschluss h2 { font-size: clamp(1.5rem, 2.8vw, 2.35rem); line-height: 1.16; } .abschluss p { font-size: 1rem; line-height: 1.75; } .abschluss__inner { gap: clamp(2rem, 4vw, 4rem); } /* -------------------------------------------------------------------------- FUSSZEILE Klarere Hierarchie: Spaltenüberschriften kleiner und ruhiger, Links mit wachsendem Unterstrich, Kontaktangaben als eigene Gruppe abgesetzt. -------------------------------------------------------------------------- */ .site-footer { background: radial-gradient(80% 100% at 50% 0%, rgba(220,234,243,0.035), transparent 60%), var(--c-paper-deep); border-top: 1px solid rgba(199,205,211,0.12); } .site-footer__haupt { padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem); gap: clamp(2.5rem, 5vw, 4.5rem); } .site-footer h2 { font-size: 0.625rem; letter-spacing: 0.24em; color: #7E888F; margin-bottom: var(--s-5); } .footer-spalte ul { display: grid; gap: var(--s-3); } .site-footer a { position: relative; font-size: 0.9375rem; color: #AEB7BE; text-decoration: none; transition: color 320ms var(--e-sanft); } .site-footer a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: rgba(220,234,243,0.5); transition: right 420ms var(--e-sanft); } .site-footer a:hover { color: #FFFFFF; } .site-footer a:hover::after { right: 0; } .footer-marke p { color: #97A0A8; line-height: 1.75; } .site-footer__unten { border-top: 1px solid rgba(199,205,211,0.10); padding-block: var(--s-6); font-size: 0.8125rem; color: #79838A; } /* -------------------------------------------------------------------------- LEISTUNGS-AKKORDEON -------------------------------------------------------------------------- */ .leistung { border-color: rgba(199,205,211,0.12); } .leistung summary { padding-block: clamp(1.5rem, 2.2vw, 2.1rem); transition: color 380ms var(--e-sanft); } .leistung summary:hover .leistung__titel { color: #FFFFFF; } .leistung__titel { font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: 0.06em; transition: color 380ms var(--e-sanft); } .leistung__inhalt { padding-bottom: clamp(2rem, 3vw, 3rem); gap: clamp(1.5rem, 3vw, 2.75rem); } .leistung__liste li { font-size: 0.9375rem; line-height: 1.7; color: #A8B2BA; } .leistung__liste li::before { background: var(--c-accent-2); } .leistung__bild img { transition: transform 1100ms var(--e-sanft), filter 700ms var(--e-sanft); will-change: transform; } .leistung:hover .leistung__bild img { transform: scale(1.03); filter: saturate(0.9) brightness(1); } /* -------------------------------------------------------------------------- BRANCHENSEITE -------------------------------------------------------------------------- */ .branchen-figur { border-color: rgba(199,205,211,0.12); border-radius: 6px; box-shadow: var(--sh-karte); } .branchen-figur img { transition: transform 1200ms var(--e-sanft), filter 800ms var(--e-sanft); will-change: transform; } .branchen-figur:hover img { transform: scale(1.03); filter: saturate(0.86) brightness(0.96); } /* -------------------------------------------------------------------------- FORMULAR UND KARTE -------------------------------------------------------------------------- */ .feld input, .feld select, .feld textarea { padding: 0.95rem 1.05rem; background: #1A1F25; border-color: rgba(199,205,211,0.14); transition: border-color 340ms var(--e-sanft), background 340ms var(--e-sanft), box-shadow 340ms var(--e-sanft); } .feld input:hover, .feld select:hover, .feld textarea:hover { border-color: rgba(199,205,211,0.26); } .feld input:focus, .feld select:focus, .feld textarea:focus { background: #1E242A; border-color: rgba(220,234,243,0.55); box-shadow: 0 0 0 3px rgba(220,234,243,0.10); outline: none; } .feld label, .feld > span:first-child { font-family: var(--f-label); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8A939B; } .karte, .karte-platzhalter { border-color: rgba(199,205,211,0.12); border-radius: 6px; } .kontaktdaten__zeile { border-color: rgba(199,205,211,0.10); padding-block: var(--s-4); } .kontaktdaten__zeile dt, .kontaktdaten__zeile > span:first-child { font-family: var(--f-label); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: #7E888F; } /* -------------------------------------------------------------------------- SEITENKÖPFE DER UNTERSEITEN -------------------------------------------------------------------------- */ main > header.sektion { padding-block: clamp(4.5rem, 8vw, 8rem) clamp(3.5rem, 6vw, 6rem); background: radial-gradient(80% 120% at 18% 0%, rgba(220,234,243,0.07), transparent 62%), var(--c-paper-deep); } main > header.sektion h1 { line-height: 1.1; } /* -------------------------------------------------------------------------- BILDLAUF UND FOKUS -------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } :focus-visible { outline: 2px solid #DCEAF3; outline-offset: 3px; border-radius: 2px; } /* Bilder bekommen ein festes Seitenverhältnis aus width/height, damit beim Nachladen nichts springt. */ img { height: auto; } .branche img, .leistung__bild img, .branchen-figur img { height: 100%; } /* -------------------------------------------------------------------------- BREITENANPASSUNG -------------------------------------------------------------------------- */ @media (max-width: 63.99rem) { .split .stapel-weit { max-width: none; } .marke-gross { padding: var(--s-6); } .marke-gross img { max-width: 18rem; } } @media (max-width: 47.99rem) { .hero__punkte { right: 50%; transform: translateX(50%); bottom: 1rem; } .hero__hinweis { display: none; } .hero__aktionen { width: 100%; } .hero__aktionen .btn { width: 100%; justify-content: center; } .sektion-kopf { margin-bottom: var(--s-8); } .abschluss__aktionen .btn { width: 100%; justify-content: center; } } @media (max-width: 29.99rem) { .btn { padding: 1rem 1.4rem; letter-spacing: 0.1em; } .leistungsraster .kachel { padding: var(--s-5) var(--s-4); } } /* -------------------------------------------------------------------------- REDUZIERTE BEWEGUNG Wer Bewegung abbestellt hat, bekommt keine — aber jeden Inhalt. Alles, was hier animiert wird, ist Zierde; nichts davon trägt Bedeutung. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero__licht { animation: none; opacity: 0.7; } .hero__medien { transform: none; } .haken li { opacity: 1; transform: none; } .hero__kicker, .hero__text, .hero__aktionen, .hero__hinweis { animation: none; opacity: 1; } } /* -------------------------------------------------------------------------- NAVIGATIONSBREITE Mit fünf Punkten, Wortmarke und Schaltfläche reicht die Rasterbreite bei 1440 px nicht: Die Schaltfläche lief 14 px über den rechten Rand hinaus. Gemessen, nicht geschätzt. Deshalb engere Abstände in der Leiste, eine etwas kompaktere Schaltfläche und ein Logo, das nachgeben darf. -------------------------------------------------------------------------- */ .site-nav__inner { gap: clamp(1rem, 1.8vw, 2rem); flex-wrap: nowrap; } .site-nav__logo { flex: 0 1 auto; min-width: 0; } .nav-liste { gap: clamp(0.9rem, 1.5vw, 1.6rem); flex-wrap: nowrap; } .nav-liste a { font-size: 0.6875rem; letter-spacing: 0.13em; white-space: nowrap; } .site-nav__aktion { flex: 0 0 auto; } .site-nav__aktion.btn { padding: 0.9rem 1.35rem; font-size: 0.6875rem; letter-spacing: 0.11em; white-space: nowrap; } @media (min-width: 90rem) { .nav-liste a { font-size: 0.75rem; letter-spacing: 0.16em; } .site-nav__aktion.btn { padding: 0.95rem 1.75rem; font-size: 0.75rem; } } /* Werte, die keine Zahl sind, brauchen einen kleineren Grad — „Zuverlässig" sprengte bei gleichem Grad wie „50+" seine Spalte. */ .zahlenband__wert--wort { font-size: clamp(1.35rem, 2.4vw, 1.95rem); letter-spacing: 0.01em; } /* Fließtext in den Leistungskacheln: ausgleichender Umbruch, damit keine Einzelwörter oder Satzzeichen allein in der letzten Zeile stehen. */ .leistungsraster .kachel p, .leistungsraster .kachel__titel { text-wrap: pretty; } /* -------------------------------------------------------------------------- MARKE GROSS — EBENENFOLGE Der Lichtschein lag im Stapel über dem Logo und hat es verdeckt. Er gehört dahinter. isolation begrenzt den Stapel auf die figure, damit z-index: -1 nicht hinter den Seitengrund rutscht. -------------------------------------------------------------------------- */ .marke-gross { isolation: isolate; } .marke-gross::before { z-index: -1; } .marke-gross img { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- KACHELN — RUHIGER RASTER UND WEICHE OBERKANTE Zwei Beobachtungen aus dem Betrieb: 1. Die Titel sind ein- oder zweizeilig („Lager & Logistik" gegen „Industrie-Reinigung"). Dadurch begannen die Beschreibungen auf unterschiedlichen Höhen und das Raster wirkte unruhig. Der Titel bekommt deshalb eine feste Mindesthöhe von zwei Zeilen. 2. Beim Überfahren blendete das Motiv auf und endete an der Oberkante hart — es sah aus, als sei die Kachel oben abgeschnitten. Der Verlauf darüber bleibt jetzt bis zur Kante dicht und läuft erst darunter auf. -------------------------------------------------------------------------- */ .leistungsraster .kachel { display: flex; flex-direction: column; } .leistungsraster .kachel__titel { min-height: 2.45em; /* zwei Zeilen bei line-height 1.4 */ display: flex; align-items: flex-start; } .kachel--bild::after { background-image: linear-gradient(to top, rgba(16,20,24,0.95) 0%, rgba(16,20,24,0.90) 34%, rgba(16,20,24,0.72) 56%, rgba(16,20,24,0.60) 78%, rgba(16,20,24,0.74) 94%, rgba(16,20,24,0.96) 100%), var(--kachel-bild); /* Zusätzlich die Kante selbst weichzeichnen, damit das Motiv nicht an einer geraden Linie endet. */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); } /* -------------------------------------------------------------------------- BRANCHENKACHELN — dieselbe Oberkante Beim Überfahren wurde der Verlauf durchsichtiger (opacity 0.88) und gab das Bild oben hart frei. Statt die ganze Deckschicht aufzuhellen, wird nur ihr mittlerer Bereich lichter; oben und unten bleibt sie dicht. -------------------------------------------------------------------------- */ .branche::after { background: linear-gradient(to top, rgba(8,11,14,0.96) 0%, rgba(8,11,14,0.88) 18%, rgba(8,11,14,0.50) 44%, rgba(8,11,14,0.26) 68%, rgba(8,11,14,0.34) 88%, rgba(8,11,14,0.62) 100%); } .branche:hover::after, .branche:focus-visible::after { opacity: 1; background: linear-gradient(to top, rgba(8,11,14,0.94) 0%, rgba(8,11,14,0.82) 18%, rgba(8,11,14,0.36) 44%, rgba(8,11,14,0.12) 68%, rgba(8,11,14,0.22) 88%, rgba(8,11,14,0.55) 100%); } /* -------------------------------------------------------------------------- MARKE IN DER FUSSZEILE Dieselbe Kombination wie in der Navigation: Monogramm plus gesetzte Wortmarke. Vorher stand dort nur das Bild — mit falschen Maßen (170 × 64 bei einem Bild im Verhältnis 202 × 160), es wurde verzerrt. -------------------------------------------------------------------------- */ .footer-marke__logo { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; margin-bottom: var(--s-5); } .footer-marke__logo::after { display: none; } /* kein Unterstrich am Logo */ .footer-marke__logo img { height: 2.75rem; width: auto; flex: none; } .footer-marke__wort { display: grid; gap: 3px; font-family: var(--f-display); font-size: 1rem; font-weight: 800; letter-spacing: 0.10em; text-transform: uppercase; color: #FFFFFF; line-height: 1; } .footer-marke__wort span { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.24em; color: #7E888F; } /* ========================================================================== NACHWEIS — das für diesen Betrieb neu gebaute Element Ersetzt das Zahlenband mit den vier Platzhalterzahlen, das der Kunde gestrichen hat. An seiner Stelle steht der Ablauf, der Flethi tatsächlich unterscheidet: Vorher-Bild, Nachher-Bild, Unterschrift, Bericht am nächsten Morgen. Warum das trägt: Kunden setzen diese Berichte für ihre eigenen ISO-Nachweise ein. Das ist kein Werbeversprechen, sondern erspart ihnen Arbeit — und lässt sich nicht auf den nächsten Reinigungsbetrieb kopieren. ========================================================================== */ .nachweis__schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0; margin: var(--s-8) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--c-line-soft); } .nachweis__schritte li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6) var(--s-5) var(--s-6) 0; border-bottom: 1px solid var(--c-line-soft); } @media (min-width: 52rem) { .nachweis__schritte li + li { border-left: 1px solid var(--c-line-soft); padding-left: var(--s-5); } } .nachweis__nr { font-family: var(--f-display); font-size: var(--t-small); letter-spacing: 0.12em; color: var(--c-accent); font-variant-numeric: tabular-nums; } .nachweis__schritte b { font-family: var(--f-display); font-size: var(--t-h4); line-height: 1.15; } .nachweis__schritte span:last-child { font-size: var(--t-small); line-height: 1.55; color: var(--c-ink-mute); } .nachweis__fuss { margin-top: var(--s-7); max-width: 52ch; font-size: var(--t-lead); line-height: 1.55; color: var(--c-ink-soft); border-left: 2px solid var(--c-accent); padding-left: var(--s-5); } /* ========================================================================== BRANCHEN — Kacheln, drei davon mit Bild ========================================================================== */ .branchen { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--s-5); margin-top: var(--s-8); } .branche { display: flex; flex-direction: column; background: var(--c-paper); border: 1px solid var(--c-line-soft); text-decoration: none; color: var(--c-ink); overflow: hidden; transition: border-color var(--d-fast) var(--e-out); } .branche:hover, .branche:focus-visible { border-color: var(--c-accent); } .branche__bild { margin: 0; } .branche__bild img { display: block; inline-size: 100%; block-size: 9rem; object-fit: cover; } .branche__wort { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; /* alle Kacheln gleich hoch */ } .branche__titel { margin: 0; font-size: var(--t-h4); line-height: 1.2; hyphens: auto; } .branche__wort p { margin: 0; font-size: var(--t-small); line-height: 1.55; color: var(--c-ink-mute); } .branche__marke { margin-top: auto; /* sitzt immer am unteren Rand */ padding-top: var(--s-3); font-family: var(--f-display); font-style: normal; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); } /* ========================================================================== KUNDENSTIMME — anonymisiert Der Kunde hat ausdrücklich darum gebeten, weder Firmen- noch Personennamen zu nennen. Die Herkunftszeile bleibt deshalb bewusst allgemein, statt einen Namen zu erfinden. ========================================================================== */ .stimme { margin: 0; padding: var(--s-6); background: var(--c-paper-warm); border-left: 3px solid var(--c-accent); } .stimme p { margin: 0 0 var(--s-4); font-size: var(--t-lead); line-height: 1.55; } .stimme p::before { content: "„"; } .stimme p::after { content: "“"; } .stimme footer { font-size: var(--t-small); color: var(--c-ink-mute); } /* Die Unterzeile im Hero: als h2 ausgezeichnet, aber optisch ein Vorspann. Ohne diese Rücknahme greift die Überschriftengröße. */ .hero__unter { margin: var(--s-5) 0 var(--s-7); font-family: var(--f-text); font-weight: 400; font-size: var(--t-lead); line-height: 1.5; letter-spacing: 0; text-transform: none; color: rgba(246, 242, 235, 0.88); max-width: 46ch; } /* Abgrenzung: was Flethi ausdrücklich nicht macht. Zurückhaltend gesetzt, aber sichtbar, damit unpassende Anfragen gar nicht erst entstehen. */ .abgrenzung { margin-top: var(--s-7); max-width: 60ch; padding-left: var(--s-5); border-left: 2px solid var(--c-line-soft); font-size: var(--t-small); line-height: 1.6; color: var(--c-ink-mute); } /* ========================================================================== NACHTRÄGE 23.08.2026 — drei Darstellungsfehler ========================================================================== */ /* 1 — Der Kontaktkasten war weiß. `.kontaktdaten` setzt im Baukasten `background: #FFFFFF` hart. Auf dieser Seite ist die Schrift hell, also stand heller Text auf weißem Grund. Derselbe Fehlertyp wie bei --c-ink-soft: Wo ein Element seinen Hintergrund fest setzt, muss ein umgekehrtes Grundthema ihn mitnehmen. */ .kontaktdaten { background: var(--c-paper-warm); border-color: var(--c-line-soft); } .kontaktdaten__zeile { border-bottom-color: var(--c-line-soft); } .kontaktdaten dt, .kontaktdaten__zeile > span:first-child { color: var(--c-ink-mute); } .kontaktdaten dd, .kontaktdaten a { color: var(--c-ink); } .kontaktdaten a:hover, .kontaktdaten a:focus-visible { color: #FFFFFF; } /* 2 — Kacheln zuckten beim Überfahren. `transform: translateY(-3px)` hob die Kachel an, gleichzeitig wechselte der Rahmen die Farbe. Weil beide Eigenschaften unterschiedlich schnell rendern, blitzte die obere Kante kurz weg. Dazu kam ein Schatten, der für helle Seiten gedacht ist und auf dunklem Grund ohnehin nichts beiträgt. Jetzt bleibt die Kachel stehen; es wechseln nur Rahmen und Fläche. */ .kachel:hover, .kachel:focus-visible { transform: none; box-shadow: none; } .kachel { transition: border-color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out); } /* Dasselbe für die übrigen Kartenarten auf der Seite. */ .branche:hover, .branche:focus-visible, .leistung:hover { transform: none; box-shadow: none; } /* 3 — Überschriften liefen über den Rand. Lange Komposita wie „Lebensmittelindustrie" sind ein einziges Wort und brechen nicht von selbst. In einer schmalen Spalte ragten sie aus dem Kasten heraus. */ h1, h2, h3, .kachel__titel, .branche__titel, .leistung__titel { overflow-wrap: break-word; hyphens: auto; } /* -------------------------------------------------------------------------- BRANCHENKACHEL — abschließende Fassung In dieser Datei haben sich über mehrere Umbauten vier .branche-Regelsätze angesammelt (Zeilen 365, 1307, 1706, 1833). Die drei früheren stammen aus dem Vollbild-Modell: Bild absolut über die ganze Kachel, darüber ein bis zu 94 % deckender Verlauf. Solange die Kacheln kein Bild hatten, fiel das nicht auf — mit Bild war es schwarz. Gültig ist das Modell aus dem letzten Block: Bild oben, Text darunter. Der Beschreibungstext steht damit auf Fläche statt auf Foto und bleibt lesbar. Hier wird nur zurückgenommen, was die früheren Blöcke setzen. -------------------------------------------------------------------------- */ .branche { display: flex; flex-direction: column; aspect-ratio: auto; isolation: auto; } .branche::after { content: none; } .branche__bild { margin: 0; overflow: hidden; background: var(--c-paper-warm); } .branche__bild img { position: static; inset: auto; display: block; inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; /* Die Motive sind bereits kühl und flau. Der frühere Block zog sie zusätzlich auf 72 % Sättigung und 82 % Helligkeit herunter — zusammen mit dem dunklen Grund blieb davon nichts Erkennbares übrig. */ filter: none; transform: none; transition: transform 900ms var(--e-out); } .branche:hover .branche__bild img, .branche:focus-visible .branche__bild img { transform: scale(1.04); filter: none; } /* Der Titel gehört in den Textteil, nicht mehr an den Kachelfuß. */ .branche__titel { position: static; inset: auto; padding: 0; font-size: var(--t-h4); letter-spacing: 0.04em; text-transform: none; /* Lange Branchennamen umbrechen an der Silbe, nicht mitten im Wort. */ hyphens: auto; overflow-wrap: break-word; } /* -------------------------------------------------------------------------- BRANCHENSEITE — abwechselnd Bild links / Bild rechts Im Quelltext steht bei allen sechs Sektionen das Bild zuerst. Auf schmalen Bildschirmen ergibt das überall dieselbe Abfolge: erst das Motiv, dann der Text. Erst ab der Breite, ab der zwei Spalten stehen, wandert bei jeder zweiten Sektion das Bild auf die rechte Seite. Die Umkehr läuft über `order`, nicht über die Reihenfolge im HTML — sonst müsste man für die Optik am Desktop die Lesereihenfolge auf dem Handy opfern. Das Bild behält dabei immer die breitere Spalte, damit die sechs Sektionen im Scrollen gleich schwer wirken. -------------------------------------------------------------------------- */ @media (min-width: 62rem) { .branche-reihe--links { grid-template-columns: 7fr 5fr; } .branche-reihe--rechts { grid-template-columns: 5fr 7fr; } .branche-reihe--rechts > .branchen-figur { order: 2; } .branche-reihe--rechts > .stapel-weit { order: 1; } } /* -------------------------------------------------------------------------- ABLAUFLISTE (Kontaktseite, „So läuft eine Anfrage") Das Markup ist
  • TitelErklärung
    • . Für .ablauf gab es bisher keine einzige Regel, also blieb der span inline und der Erklärungstext klebte ohne Leerzeichen am Titel: „1. Anruf oder E-MailSie schildern…". Der Titel gehört auf eine eigene Zeile — ein Leerzeichen im HTML wäre die schlechtere Lösung, weil die Trennung dann von einem unsichtbaren Zeichen abhinge. -------------------------------------------------------------------------- */ .ablauf b { display: block; margin-bottom: var(--s-2); font-family: var(--f-display); font-weight: 700; color: var(--c-ink); } .ablauf span { display: block; color: var(--c-ink-mute); line-height: 1.6; } .ablauf li + li { margin-top: var(--s-5); } /* -------------------------------------------------------------------------- EINSTIEGSVORHANG — dunkel, nur das Zeichen Der Baukasten setzt `background: var(--c-ink)`. Das ist für helle Marken richtig und hier falsch: In dieser dunklen Fassung ist --c-ink die helle Textfarbe (#E9EDF1), der Vorhang blitzte also weiß auf, bevor die dunkle Seite erschien. Hier steht der dunkelste Ton der Marke, damit der Übergang in den Hero ohne Helligkeitssprung läuft. Statt des Schriftzugs steht das FG-Zeichen allein — groß, mittig. -------------------------------------------------------------------------- */ .einstieg { background: #0A0D10; } .einstieg__zeichen { /* Zwischen 9 rem und 17 rem, gebunden an die kleinere Bildschirmseite: auf dem Handy hochkant sonst zu klein, auf dem Desktop sonst zu wuchtig. */ inline-size: clamp(9rem, 30vmin, 20rem); block-size: auto; opacity: 0; transform: scale(0.94); animation: zeichen-auf 900ms var(--e-out) 60ms forwards; } @keyframes zeichen-auf { to { opacity: 1; transform: scale(1); } } /* Beim Aufziehen verschwindet das Zeichen etwas früher als der Vorhang — sonst wandert es sichtbar mit der Kante nach oben. */ .ist-geladen .einstieg__zeichen { opacity: 0; transform: scale(1.04); transition: opacity 240ms var(--e-out), transform 420ms var(--e-out); animation: none; } @media (prefers-reduced-motion: reduce) { .einstieg__zeichen { animation: none; opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- HERO DER UNTERSEITEN Dieselbe Bühne wie auf der Startseite: die drei Aufnahmen laufen als Hintergrund, der Hero füllt die Bildschirmhöhe, die erste Sektion beginnt erst beim Scrollen. Die Startvideos rotieren über die Seiten (Über uns 1, Leistungen und Kontakt 2, Branchen und Karriere 3), damit beim Durchklicken nicht überall dasselbe Bild steht. Geladen wird weiterhin nur das aktive und das folgende — die Logik dafür steckt in site.js und greift über data-src. -------------------------------------------------------------------------- */ .hero--unterseite { /* Volle Höhe abzüglich der Leiste, die darüber klebt. */ min-height: calc(100svh - var(--nav-h, 4.75rem)); display: grid; align-items: center; border-bottom: none; } /* Die Überschrift steht hier eine Stufe kleiner als auf der Startseite: Unterseitentitel sind länger, und zweizeilig ist die Grenze. */ .hero--unterseite .hero__titel { font-size: clamp(2.1rem, 5.6vw, 4.2rem); max-inline-size: 18ch; } .hero--unterseite .hero__unter { max-inline-size: 44ch; } /* Ein Titel, der auch gekürzt lang bleibt: „Aus der Lebensmittelindustrie heraus entstanden." Bei der normalen Hero-Größe steht er vierzeilig da und bricht dabei mitten im Wort. Zwei Zeilen sind die Grenze, also bekommt diese eine Überschrift mehr Zeilenbreite und eine Stufe weniger Schriftgröße. */ .hero--unterseite .hero__titel--lang { font-size: clamp(1.7rem, 4vw, 3rem); /* Keine ch-Begrenzung: `ch` misst die Ziffernbreite, Versalien sind deutlich breiter. 30ch klang großzügig und brach „LEBENSMITTEL- INDUSTRIE." trotzdem um. Hier begrenzt der Textkörper selbst. */ max-inline-size: none; } /* Hochformat in der Über-uns-Sektion: Das Türfoto ist 3:4. Die Standardfigur zwingt jedes Bild auf eine feste Querformat-Höhe (clamp(16rem, 30vw, 26rem)) und schneidet ein Hochformat dabei fast vollständig weg. Hier trägt das Seitenverhältnis die Höhe. */ .branchen-figur--hoch img { block-size: auto; aspect-ratio: 1230 / 1640; max-block-size: 38rem; object-fit: cover; } /* -------------------------------------------------------------------------- LEISTUNGSKARTE — „Enthalten" unter den Text, nicht daneben Bisher lief die aufgeklappte Karte dreispaltig: Bild | Text | Liste. Die Liste stand damit als schmale dritte Spalte rechts, ihre Punkte brachen auf zwei bis drei Zeilen um und die Karte wirkte unruhig. Jetzt zwei Spalten: das Bild trägt links beide Reihen, rechts steht oben der Text und darunter die Liste. Die Liste behält ihre zwei Spalten aus dem Baukasten — über die volle Textbreite stehen die Punkte damit ruhig nebeneinander statt untereinander zu brechen. -------------------------------------------------------------------------- */ @media (min-width: 62rem) { .leistung__inhalt { grid-template-columns: 0.9fr 1.7fr; /* Reihe 2 nimmt den Rest auf. Ohne das verteilt sich die Höhe des zweireihigen Bildes auf beide Reihen, und zwischen Text und „Enthalten" klafft je nach Textlänge eine unterschiedlich große Lücke — bei Lager & Logistik waren es über 100 px. */ grid-template-rows: auto 1fr; align-items: start; } .leistung__bild { grid-column: 1; grid-row: 1 / span 2; } .leistung__inhalt > .stapel { grid-column: 2; grid-row: 1; } .leistung__enthalten { grid-column: 2; grid-row: 2; } /* Die Punkte stehen jetzt auf ganzer Textbreite — drei Spalten fassen die kurzen Einträge, ohne dass eine Zeile umbricht. */ .leistung__enthalten .leistung__liste { /* Zwei Spalten, nicht drei: Die Karten haben vier Punkte, drei Spalten lassen die letzte halb leer und drücken die Einträge auf drei Zeilen. Bei zwei Spalten steht jeder Punkt ein- bis zweizeilig und die Aufteilung geht auf. */ columns: 2; column-gap: var(--s-7); } } @media (min-width: 48rem) and (max-width: 61.99rem) { .leistung__enthalten { grid-column: 1 / -1; } } /* -------------------------------------------------------------------------- ÜBERSCHRIFTEN: SILBENTRENNUNG STATT SCHNITT MITTEN IM WORT Der Baukasten setzt `overflow-wrap: break-word` global. Für Fließtext ist das richtig, für Überschriften nicht: Lange deutsche Komposita wurden an beliebiger Stelle zerschnitten — „ARBEITSUMGEBUNGE | N", „LEBENSMITTELINDUST | RIE", „VERKAUFSFLÄCH | EN". Das Dokument ist lang="de", also trennt der Browser korrekt und setzt einen Trennstrich. `break-word` bleibt als letzte Reißleine für Wörter ohne Trennstelle stehen — sonst liefen sie aus der Spalte heraus. Dieselbe Lösung wie oben bei den Kacheltiteln, hier für alle Überschriften, damit der Fehler nicht an der nächsten Stelle wieder auftaucht. -------------------------------------------------------------------------- */ h1, h2, h3, h4, .branche__titel, .leistung__titel, .kachel__titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } /* Das Türfoto steht als Hochformat neben dem Text und darf die Spalte ausfüllen — mit 38rem Deckel wirkte es neben dem langen Textblock verloren. */ .branchen-figur--hoch img { max-block-size: 46rem; }