/* * Team-Teaser — ported from the standalone mockup (home-mockup.BACKUP-liked-version.html). * Since 2026-08-24 follows the site-wide Light/Dark switcher (see the "Light/Dark- * Konvention" comment in nav.css) like every other pattern — sets no background of its own * (relies on 's, see style.css), only its text/accent tokens switch here. * * Grosse Screens (ab ca. 1900px, z. B. 2560x1440): alle clamp()-Obergrenzen (Padding, * Ueberschrift, Abstaende) sowie die feste Container-Maximalbreite und die ch-basierten * Textbreiten wurden angehoben, der vw/vh-Koeffizient blieb dabei jeweils unveraendert — * gleiche Technik wie in cro.css (siehe dessen Kommentarblock oben), damit der Teaser auf * sehr breiten Screens weiter mitwaechst statt fruehzeitig einzufrieren. * * 2026-08-28: nochmals angehoben, um mit den CRO-Familien-Seiten (cro.css/google-ads.css/ * social-ads.css) gleichzuziehen — deren eigenes .wrap deckelt bei 2200px. Max-width * 1750px auf 2200px (Faktor ~1,257), jede darunterliegende clamp()-Obergrenze um denselben * Faktor skaliert, Minimum und vw/vh-Koeffizient unveraendert. */ .nn-team, .nn-team *, .nn-team *::before, .nn-team *::after { box-sizing: border-box; } .nn-team { --ink-on-paper: #12211a; --ink-on-paper-muted: #5c6d64; --paper-2: #ffffff; --line-light: #dfe8e2; /* --line stays fixed across both themes on purpose — it's already the dark tone (#22362c) the rest of the site uses specifically for a subtle border ON a dark background (see ueber-uns-team.css), so it reads fine as a thin underline against white AND is the same "line visible on dark bg" tone other patterns already reuse. */ --line: #22362c; --jade: #288760; padding: clamp(3rem, 9vh, 10.06rem) clamp(1.5rem, 5vw, 6.6rem); max-width: 2200px; margin: 0 auto; color: var(--ink-on-paper); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .nn-team { --ink-on-paper: #e7e9ec; --ink-on-paper-muted: #b0b5bf; --paper-2: #14201a; --line-light: #22362c; --jade: #288760; } } html[data-theme="dark"] .nn-team { --ink-on-paper: #e7e9ec; --ink-on-paper-muted: #b0b5bf; --paper-2: #14201a; --line-light: #22362c; --jade: #288760; } /* scoped to .nn-team, not a bare .nn-kicker — every pattern's CSS is enqueued globally on every page (see functions.php), so an unscoped .nn-kicker rule here would only win the cascade by enqueue order against leistungen.css's own bare .nn-kicker rule, and lose that coin flip the moment enqueue order changes (which is exactly what silently broke this kicker's colour: it was inheriting leistungen.css's `color: var(--jade-accent)`, a variable that isn't defined in .nn-team's scope, so it fell back to inherited/black). */ .nn-team .nn-kicker { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jade); margin: 0 0 0.75rem; } .nn-team-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 0 clamp(2.5rem, 6vh, 6.6rem); max-width: 20ch; } .nn-team-body { display: grid !important; grid-template-columns: minmax(260px, 1.55fr) 1fr; gap: clamp(2.5rem, 6vw, 8.17rem); align-items: start; } /* taped photo pair, slightly rotated and overlapping — --a (landscape, real 2000x1333 shot) sits behind, top-left, z-index 1; --b (portrait, real 1333x2000 group shot) sits in front, bottom-right, z-index 2. Different aspect-ratio per slot on purpose: --a is genuinely wider than tall, --b genuinely taller than wide — object-fit:cover crops each photo to its box rather than distorting it (same non-distortion approach as the square favicon fix). */ /* height tracks the container's own width instead of a fixed min-height clamp — a magic px/vw number can't reliably stay taller than the absolutely-positioned photo--b inside it (absolutely positioned children don't contribute to a parent's height at all) across every grid-column width, and a mismatch there is exactly what let photo--b's tall 2:3 box poke up above the container into the heading. photo--b's own height at width:40% works out to container-width × 0.6 (40% × 1.5 from its aspect-ratio:2/3), so aspect-ratio:5/3 here (width:height = 1:0.6) makes the container always exactly tall enough, at any viewport, with no overflow possible. */ .nn-team-photos { position: relative; aspect-ratio: 5 / 3; } .nn-team-photo { position: absolute; background: var(--paper-2); box-shadow: 0 14px 30px rgba(18, 33, 26, 0.12); } /* border-radius lives on the itself, not on .nn-team-photo with overflow:hidden — the tape (positioned at top:-14px, i.e. outside the box) needs to protrude past the photo's top edge, which a clipping ancestor would cut off */ .nn-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } /* photo--a only: a scale()'d img needs an overflow:hidden ancestor to crop the excess, but that ancestor can't be .nn-team-photo itself (same "tape must protrude" constraint as above) — .nn-team-photo-frame is a second, inner wrapper scoped to just the image, so the tape sitting outside it is untouched. */ .nn-team-photo-frame { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; } .nn-team-photo-frame img { border-radius: 0; /* 2026-08-31: Foto ausgetauscht (Sofa-Szene, 1200×800 = exakt dasselbe 3:2-Seitenverhältnis wie der Frame) — der alte scale(1.35)/transform-origin-Zoom war auf die Bildkomposition des VORHERIGEN Fotos (2000×1333, andere Personen-Position) abgestimmt und schnitt bei diesem hier links/rechts Köpfe bzw. den Tisch an. Kein Zoom mehr nötig: Seitenverhältnis passt exakt, object-fit:cover (siehe .nn-team-photo img) zeigt das ganze Foto unbeschnitten. */ } /* --a (landscape, 3:2) and --b (portrait, 2:3) are inverse ratios, so equal WIDTH would make the portrait one look far bigger (taller) than the landscape one. Sized instead so both cover roughly the same AREA — width_a = 1.5 × width_b, which cancels out exactly against the 1.5×-inverse aspect ratios (60% × 40% here). */ .nn-team-photo--a { top: 0; /* nudged further past the container's left edge (small intentional bleed) */ left: -2.5rem; width: 60%; aspect-ratio: 3 / 2; transform: rotate(-5deg); z-index: 1; } .nn-team-photo--b { /* was bottom:0 — after the photo column got wider (bigger .nn-team-photos, so photo--b's own height grew too) and the heading got smaller (uppercase + matched to the other sections' size), the old rise-above-the-container amount started eating into "Draht" on the heading's second line instead of just grazing its line box. Shifted down so it clears the heading with room to spare, at the cost of poking a bit further below .nn-team-photos' own bottom edge (harmless — nothing else sits directly under it). */ bottom: -1rem; /* pulled further in from the right edge so it overlaps photo--a's right side more */ right: 13%; /* Matches the real photo's own ratio (1333x2000 = 2/3), so object-fit:cover crops next to nothing, everyone in the group shot stays visible. */ width: 46%; aspect-ratio: 2 / 3; transform: rotate(4deg); z-index: 2; } .nn-team-tape { position: absolute; top: -14px; left: 50%; width: 74px; height: 26px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transform: translateX(-50%) rotate(-3deg); } .nn-team-text { display: flex; flex-direction: column; gap: 1.1rem; padding-top: 0.25rem; margin: 0; } .nn-team-text p { color: var(--ink-on-paper-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 58ch; } /* button itself uses the shared .nn-cta style (hero.css) — same fixed jade background + dark text as every other CTA button on the site, in both Light and Dark Mode. */ .nn-team-actions.wp-block-buttons { align-self: flex-start; margin-top: 0.5rem !important; } @media (max-width: 760px) { .nn-team-body { grid-template-columns: 1fr; } /* .nn-team-photo--a/--b sind absolut positioniert (left:-2.5rem bzw. right:13%) — auf Desktop bewusst asymmetrisch, weil rechts daneben noch der Text steht. Im gestapelten Mobile-Layout steht .nn-team-photos jetzt aber allein über dem Text, wodurch dieselbe Asymmetrie nur noch wie ein Linksversatz wirkt. Eine schmalere, zentrierte Box gibt den (weiterhin prozentual positionierten) Kindern ein neues, mittiges Koordinatensystem, ohne deren Werte einzeln anfassen zu müssen. */ /* width (nicht nur max-width) + justify-self:center statt margin:auto: .nn-team-photos ist ein Grid-Item von .nn-team-body (grid-template-columns:1fr, siehe oben) — mit justify-items:stretch (Grid-Default) plus einer reinen max-width-Bremse kollabierte die Box in Kombination mit margin-inline:auto auf 0px Breite, statt die Restbreite symmetrisch zu verteilen. Eine feste width gibt der Box eine eindeutige Größe, justify-self:center übernimmt die Zentrierung direkt über die Grid-Engine. */ .nn-team-photos { margin-bottom: 2.5rem; width: min(420px, 82%); justify-self: center; } /* Die Box selbst war schon zentriert, aber die beiden Fotos darin nicht: --a bleedet mit festen -2.5rem über den linken Rand hinaus, --b endet schon bei 87% (right:13%) — zusammen liegt die sichtbare Bildmasse spürbar links von der Boxmitte, nicht nur die Box selbst zählt fürs Auge. Bleed hier entfernt und --b etwas weiter nach rechts gezogen, damit die sichtbare Foto-Gruppe (nicht nur ihr unsichtbarer Rahmen) mittig sitzt. */ .nn-team-photo--a { left: 0; } .nn-team-photo--b { right: 4%; } }