/* * Leistungen — ported from the standalone mockup (home-mockup.BACKUP-liked-version.html). * Full-bleed hover rows that break out of the section's own max-width column to span the * whole browser width. Since 2026-08-24 follows the site-wide Light/Dark switcher (see the * "Light/Dark-Konvention" comment in nav.css) like every other pattern — the section itself * still sets no background of its own (relies on 's, see style.css), only its text/ * accent tokens switch here. * * Large screens (from roughly 1900px, e.g. 2560x1440): the clamp() ceilings and the * section's max-width column were raised the same way as cro.css's own header note * describes (max-width 1400px to 1750px, heading/number/name ceilings scaled up * similarly), the vw coefficient in each clamp left untouched. That lets the section keep * growing past the point where the old, tighter ceilings used to plateau, instead of * freezing early and leaving excess empty margin on very wide screens. * * 2026-08-28: raised again to match the CRO-family pages (cro.css/google-ads.css/ * social-ads.css), whose own .wrap caps at 2200px — the homepage's max-width:1750px here * was tuned in an earlier, less aggressive pass and left it visibly narrower than those * pages at 2560px+. max-width 1750px to 2200px (ratio ~1.257), every clamp() ceiling below * scaled by the same ratio, min and vw/vh coefficient left untouched. */ .nn-section, .nn-section *, .nn-section *::before, .nn-section *::after { box-sizing: border-box; } /* .nn-services uses width:100vw to break out of its column — 100vw counts the scrollbar's own width, which the page's real content area doesn't, so it renders a few px wider than the viewport and exposes a sliver of background at the right edge unless something upstream clips it. The mockup did this on its page-level wrapper; here that's . */ body { overflow-x: hidden; } .nn-section { --section-pad: clamp(1.5rem, 5vw, 6.6rem); --ink-on-paper: #12211a; --ink-on-paper-muted: #5c6d64; --line-light: #dfe8e2; /* --jade stays FIXED across both themes on purpose (unlike --jade-accent below) — it's used as a SOLID button-style background with white icon text on the row-hover arrow further down, and the dark-mode-appropriate accent tone (jade-light, #b7e5ba) is too pale for white text to stay readable on. --jade-accent is for text/border accents only (kicker, hover text, arrow's resting border/icon colour), where the paler tone reads fine and pops better against a dark background. */ --jade: #288760; --jade-accent: #288760; padding: clamp(3rem, 9vh, 10.06rem) var(--section-pad); max-width: 2200px; margin: 0 auto; color: var(--ink-on-paper); } /* Nutzer-Vorgabe: kleineres Top-Padding NUR hier auf der Startseite (ID statt der .nn-section-Klasse, die auch andere Sections/Seiten trägt) — schließt den Weißraum zwischen "Unser Ansatz" und dieser Section, ohne die generische Klasse anzufassen. */ #leistungen { padding-top: clamp(1.5rem, 4vh, 4rem); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nn-section { --ink-on-paper: #e7e9ec; --ink-on-paper-muted: #b0b5bf; --line-light: #22362c; --jade-accent: #288760; } } html[data-theme="dark"] .nn-section { --ink-on-paper: #e7e9ec; --ink-on-paper-muted: #b0b5bf; --line-light: #22362c; --jade-accent: #288760; } .nn-section-head { justify-content: space-between; align-items: flex-end !important; gap: 2rem; margin-bottom: clamp(2rem, 5vh, 5.66rem); } /* the kicker+h2 wrapper is itself flex-vertical, and WP's default block gap (2rem/32px) otherwise adds ON TOP of the kicker's own margin-bottom below (it doesn't get reset to 0 here) — zeroed so the kicker's margin-bottom is the only spacing, matching every other kicker on the site */ .nn-section-head > .wp-block-group { gap: 0; } /* scoped to .nn-section, not a bare .nn-kicker — this stylesheet is enqueued globally on every page (see functions.php), and an unscoped rule here was winning the cascade over team-teaser.css's own bare .nn-kicker rule by enqueue order alone, breaking that kicker's colour (var(--jade-accent) isn't defined outside .nn-section, so it fell back to inherited/black there) */ .nn-section .nn-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade-accent); margin: 0 0 0.75rem; } .nn-h2 { font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; text-transform: uppercase; font-size: clamp(2rem, 4.5vw, 5.34rem); color: var(--ink-on-paper); margin: 0; max-width: 22ch; } /* breaks .nn-services out of .nn-section's max-width:1400px column so a hovered row's background can span the full browser width — the padding that realigns the actual content (numbers, names, arrow) with the h2/lede above has to live on each ROW, not on .nn-services, since a hover background painted on the row only ever reaches as far as the row's own box. */ .nn-services { border-top: 1px solid var(--line-light); width: 100vw; margin-left: calc(50% - 50vw); } .nn-service-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1rem, 3vw, 3.27rem); padding: clamp(1.5rem, 3.5vh, 3.77rem) max(var(--section-pad), calc((100vw - 2200px) / 2 + var(--section-pad))); border-bottom: 1px solid var(--line-light); text-decoration: none; color: inherit; transition: background 0.25s ease, padding-left 0.25s ease; } .nn-service-row:hover, .nn-service-row:focus-visible { background: linear-gradient(90deg, rgba(40, 135, 96, 0.09), transparent); padding-left: calc(max(var(--section-pad), calc((100vw - 2200px) / 2 + var(--section-pad))) + 1rem); } /* * ============================================================================ * Konvention: `transition: color` NIE auf der Basis-Regel eines Elements, dessen Farbe aus * einem theme-abhängigen Token (var(--…)) kommt — sondern immer nur auf der :hover/ * :focus-visible-Regel. * * Grund: Schaltet der Light/Dark-Switcher zur Laufzeit um, ändert sich der Token-Wert, weil * plötzlich eine ANDERE Vorfahren-Regel greift (html[data-theme="dark"] .nn-section). Steht * auf der Basis-Regel eine color-Transition, bleibt die Farbe dabei auf dem alten Wert * hängen und wird erst beim nächsten Seitenaufruf korrekt — sichtbar z. B. als dunkle * Leistungs-Überschriften auf dunklem Grund. Ohne Transition auf der Basis-Regel löst der * neue Token sofort auf. * * Auf der Hover-Regel ist die Transition unproblematisch und erhält den Effekt: Hover-in * animiert, Hover-out schaltet hart zurück. * ============================================================================ */ .nn-service-num { font-weight: 300; font-size: clamp(1.5rem, 3.6vw, 4.53rem); letter-spacing: -0.02em; color: var(--ink-on-paper-muted); font-variant-numeric: tabular-nums; } .nn-service-row:hover .nn-service-num, .nn-service-row:focus-visible .nn-service-num { color: var(--jade-accent); transition: color 0.25s ease; } /* .nn-service-main splits into two columns: the name (+ optional subtitle) stays on the left, the description sits in its own column starting roughly at the row's horizontal midpoint instead of stacking directly under the name. */ .nn-service-main { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: clamp(1rem, 3vw, 3.27rem); } .nn-service-heading { display: flex; flex-direction: column; gap: 0.4rem; } /* Transition nur auf der Hover-Regel — siehe Konventions-Kommentar bei .nn-service-num. */ /* Einheitlich für alle sechs Leistungen (statt einzelner Ausnahmen) auf eine Größe verkleinert, die auch den längsten Namen ("Google/ChatGPT Ads") einzeilig hält. Engpass ist nicht die breiteste Ansicht, sondern der schmale Bereich direkt oberhalb des Mobile-Breakpoints (siehe @media max-width:560px unten): .nn-service-main ist dort noch zweispaltig, die Namensspalte entsprechend schmal, während clamp() dort schon auf ihren Minimalwert läuft. Alter Wert clamp(1.6rem,3.8vw,4.27rem) riss "Google/ChatGPT Ads" in diesem Fenster auf zwei Zeilen; der ganze clamp() ist jetzt um denselben Faktor (~0.78) verkleinert — nicht nur die Obergrenze — weil genau der Minimalwert der Engpass war. */ .nn-service-name { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1rem, 2.96vw, 3.33rem); color: var(--ink-on-paper); } .nn-service-row:hover .nn-service-name, .nn-service-row:focus-visible .nn-service-name { color: var(--jade-accent); transition: color 0.25s ease; } .nn-service-subtitle { color: var(--ink-on-paper-muted); font-size: 0.95rem; font-weight: 400; } .nn-service-desc { color: var(--ink-on-paper-muted); font-size: 0.98rem; } .nn-service-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-light); display: flex; align-items: center; justify-content: center; color: var(--jade-accent); flex-shrink: 0; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .nn-service-row:hover .nn-service-arrow, .nn-service-row:focus-visible .nn-service-arrow { transform: rotate(45deg); background: var(--jade); color: #fff; border-color: var(--jade); } @media (max-width: 560px) { .nn-service-row { grid-template-columns: 1fr; } .nn-service-arrow { display: none; } /* below this width the two-column split has no room to sit side-by-side — stack name/subtitle above the description instead of squeezing them into two thin columns. .nn-service-heading is already its own flex column (name above subtitle), so this just stacks it above the description too. */ .nn-service-main { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; } /* Mobile bekommt hier die Namensspalte für sich allein (siehe .nn-service-main oben, einspaltig statt geteilt) — der Engpass, der die Schrift oberhalb dieses Breakpoints verkleinert hat (siehe Kommentar bei .nn-service-name), existiert hier gar nicht, darum zurück auf die ursprüngliche, größere Mobile-Größe statt der seitenweiten Verkleinerung. */ .nn-service-name { font-size: 1.6rem; } }