Weniger Text, mehr Bild: Schablonen-Elemente entfernt

Über-uns-Block mit Kennzahlen, Zielgruppen-Leiste, Eyebrow-Labels,
Pillen, Checklisten und reine Textsektionen entfernt. Hero auf
Headline, eine Zeile und zwei Buttons reduziert. Unterseiten mit
Foto im Kopf, Philosophie über Fassadenbild mit Parallax, Layout
breiter (max. 1680px).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

assets/motion.js

@@ -85,37 +85,6 @@
     cmp._set = set;
   });
 
-  /* ---------- Umschalter Privat / Gewerbe (Tabs) ---------- */
-  $$('.switch').forEach((sw) => {
-    const tabs = $$('[role="tab"]', sw);
-    const pill = $('.switch__pill', sw);
-    const place = (t) => { if (pill) { pill.style.width = t.offsetWidth + 'px'; pill.style.transform = `translateX(${t.offsetLeft - 4}px)`; } };
-    const select = (t, focus) => {
-      tabs.forEach((x) => {
-        const on = x === t;
-        x.setAttribute('aria-selected', String(on));
-        x.tabIndex = on ? 0 : -1;
-        const panel = document.getElementById(x.getAttribute('aria-controls'));
-        if (panel) panel.hidden = !on;
-        if (on && panel && window.gsap && !matchMedia('(prefers-reduced-motion: reduce)').matches) {
-          gsap.fromTo(panel.children, { opacity: 0, y: 14 }, { opacity: 1, y: 0, duration: .6, ease: 'expo.out', stagger: .035 });
-        }
-      });
-      place(t);
-      if (focus) t.focus();
-    };
-    tabs.forEach((t, i) => {
-      t.addEventListener('click', () => select(t));
-      t.addEventListener('keydown', (e) => {
-        const d = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
-        if (d) { e.preventDefault(); select(tabs[(i + d + tabs.length) % tabs.length], true); }
-      });
-    });
-    const initial = tabs.find((t) => t.getAttribute('aria-selected') === 'true') || tabs[0];
-    requestAnimationFrame(() => place(initial));
-    addEventListener('resize', () => place(tabs.find((t) => t.getAttribute('aria-selected') === 'true')));
-  });
-
   /* ---------- Notruf-Pille: nach dem Hero sichtbar, am Seitenende weg ---------- */
   const sos = $('.sos');
   if (sos) {
@@ -269,18 +238,6 @@
       if (img) tl.from(img, { scale: 1.18, duration: 1.8, ease: 'expo.out' }, 0);
     });
 
-    /* ---- Zähler ---- */
-    $$('[data-count]').forEach((el) => {
-      const to = el.dataset.count === 'years' ? years : Number(el.dataset.count);
-      const o = { v: 0 };
-      el.textContent = '0';
-      gsap.to(o, {
-        v: to, duration: 1.8, ease: 'expo.out',
-        scrollTrigger: { trigger: el, start: 'top 90%', once: true },
-        onUpdate: () => { el.textContent = Math.round(o.v); },
-      });
-    });
-
     /* ---- Philosophie: Wort für Wort hell (gescrubbt) ---- */
     $$('[data-scrub-words]').forEach((el) => {
       SplitText.create(el, {
@@ -305,6 +262,14 @@
       });
     });
 
+    /* ---- Philosophie: Hintergrundbild läuft langsamer mit ---- */
+    $$('.philosophy__media picture').forEach((el) => {
+      gsap.fromTo(el, { yPercent: -8 }, {
+        yPercent: 8, ease: 'none',
+        scrollTrigger: { trigger: el.closest('section'), start: 'top bottom', end: 'bottom top', scrub: true },
+      });
+    });
+
     /* ---- Parallax für einzelne Elemente ---- */
     $$('[data-parallax]').forEach((el) => {
       const amt = Number(el.dataset.parallax) || 10;

assets/site.css

@@ -62,8 +62,8 @@
   /* Raum — 8px-Skala */
   --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
   --section: clamp(6rem, 12vw, 10rem);
-  --gutter: clamp(1rem, 3vw, 1.5rem);
-  --max: 1320px;
+  --gutter: clamp(1.25rem, 4vw, 4rem);
+  --max: 1680px;
   --radius: 4px;
 
   /* Motion */
@@ -133,7 +133,7 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 .mega { font-size: var(--fs-mega); }
 .display { font-size: var(--fs-display); line-height: .95; }
 .title { font-size: var(--fs-title); line-height: 1.02; letter-spacing: -.025em; }
-.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fog-soft); max-width: 38ch; }
+.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fog-soft); max-width: 48ch; }
 .theme-light .lead, .theme-white .lead { color: var(--ink-soft); }
 .prose p + p { margin-top: 1em; }
 .muted { color: var(--fog-soft); }
@@ -141,18 +141,6 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 .accent { color: var(--kk); }
 .theme-light .accent, .theme-white .accent { color: var(--kk-ink); }
 
-.eyebrow {
-  display: inline-flex; align-items: center; gap: .75rem;
-  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
-  color: var(--fog-mute);
-}
-.theme-light .eyebrow, .theme-white .eyebrow { color: var(--ink-soft); }
-.eyebrow::before {
-  content: ""; width: 14px; height: 14px; flex: none;
-  background: var(--kk);
-  clip-path: polygon(100% 0, 55% 0, 0 50%, 55% 100%, 100% 100%, 45% 50%);
-}
-.theme-light .eyebrow::before, .theme-white .eyebrow::before { background: var(--kk-ink); }
 
 /* Zeilen-Maske für SplitText */
 .line-mask { display: block; overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }
@@ -288,8 +276,8 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 .hero__chevrons path:nth-child(2) { opacity: .55; }
 .hero__chevrons path:nth-child(3) { opacity: .28; }
 .hero__content { display: grid; gap: var(--s4); }
-.hero h1 { max-width: 12ch; }
-.hero .lead { max-width: 44ch; }
+.hero h1 { max-width: none; }
+.hero .lead { max-width: 40ch; }
 .hero__foot {
   margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-dark);
   display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4);
@@ -305,41 +293,18 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 
 /* Unterseiten-Hero */
 .page-hero { position: relative; padding: 180px 0 var(--s6); overflow: clip; isolation: isolate; }
+.page-hero--image { min-height: 78svh; display: grid; align-content: end; }
+.page-hero--small { padding-bottom: var(--s5); }
 .page-hero .hero__chevrons { width: min(48vw, 620px); right: -8vw; opacity: .7; }
 .page-hero__grid { display: grid; gap: var(--s4); align-items: end; }
-.page-hero h1 { max-width: 14ch; }
+.page-hero h1 { max-width: 18ch; font-size: var(--fs-mega); }
+.page-hero--small h1 { font-size: var(--fs-display); }
 @media (min-width: 900px) { .page-hero__grid { grid-template-columns: 1.4fr 1fr; } }
 
-/* ---------- Zielgruppen-Leiste ---------- */
-.audience { border-block: 1px solid var(--line-dark); }
-.audience ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 0; }
-.audience li {
-  padding: var(--s4) var(--s3); display: grid; gap: .35rem; border-left: 1px solid var(--line-dark);
-}
-.audience li:first-child { border-left: 0; padding-left: 0; }
-.audience b { hyphens: auto; -webkit-hyphens: auto; font-weight: 700; font-stretch: 112%; font-size: 1.0625rem; }
-.audience span { color: var(--fog-mute); font-size: .9375rem; }
-@media (max-width: 860px) {
-  .audience ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-  .audience li { padding-inline: var(--s2); }
-  .audience li:nth-child(3) { border-left: 0; padding-left: 0; }
-  .audience li:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
-}
-
-/* ---------- Kennzahlen ---------- */
-.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--gutter); }
-.stat { display: grid; gap: .75rem; align-content: start; padding-top: var(--s3); border-top: 1px solid var(--line-light); }
-.stat__num { font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 800; font-stretch: 125%; letter-spacing: -.05em; line-height: .85; font-variant-numeric: tabular-nums; color: var(--ink); }
-.stat__num sup { font-size: .4em; vertical-align: top; position: relative; top: .15em; margin-left: .05em; color: var(--kk-ink); letter-spacing: 0; }
-.stat__label { color: var(--ink-soft); max-width: 22ch; }
-@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
-
-.intro-split { display: grid; gap: var(--s5); margin-bottom: var(--s7); }
-@media (min-width: 960px) { .intro-split { grid-template-columns: 1.25fr 1fr; align-items: end; } }
-
 /* ---------- Leistungen: horizontale Sektion ---------- */
-.services-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
-@media (min-width: 960px) { .services-head { grid-template-columns: 1.3fr 1fr; align-items: end; } }
+.services-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s3); margin-bottom: var(--s6); }
+.section--flush-bottom { padding-bottom: 0; }
+.hscroll:not(.is-pinned) { padding-bottom: var(--section); }
 .hscroll { position: relative; }
 .hscroll__track { display: grid; gap: var(--s5); }
 .panel { display: grid; gap: var(--s3); }
@@ -351,9 +316,6 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 .panel h3, .service-row h3, .job summary h3, .contact-card strong { hyphens: auto; -webkit-hyphens: auto; }
 .panel h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 800; font-stretch: 120%; letter-spacing: -.03em; line-height: 1; }
 .panel p { color: var(--fog-soft); }
-.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
-.tags li { font-size: .8125rem; padding: .35rem .7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--fog-soft); }
-.theme-light .tags li, .theme-white .tags li { box-shadow: inset 0 0 0 1px var(--line-light); color: var(--ink-soft); }
 .hscroll__progress { display: none; }
 .hscroll:not(.is-pinned) .hscroll__track { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
 
@@ -382,10 +344,6 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 .feature { display: grid; gap: var(--s5); align-items: center; }
 @media (min-width: 960px) { .feature { grid-template-columns: 1fr 1.15fr; gap: var(--s6); } }
 .feature__copy { display: grid; gap: var(--s3); }
-.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
-.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: .9rem; align-items: baseline; }
-.checklist li::before { content: ""; width: 12px; height: 12px; background: var(--kk-ink); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); transform: translateY(1px); }
-.theme-deep .checklist li::before, body > .section:not([class*="theme-"]) .checklist li::before { background: var(--kk); }
 
 .compare {
   --pos: 50%;
@@ -418,21 +376,19 @@ ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
 
 /* ---------- Philosophie ---------- */
 .philosophy { text-align: left; }
+.philosophy--image { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(9rem, 20vw, 18rem); }
+.philosophy__media { position: absolute; inset: 0; z-index: -1; }
+.philosophy__media picture { position: absolute; left: 0; right: 0; top: -12%; height: 124%; }
+.philosophy__media img { width: 100%; height: 100%; object-fit: cover; }
+.philosophy__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,20,36,.9) 0%, rgba(10,20,36,.62) 100%); }
 .philosophy__words { font-size: var(--fs-mega); font-weight: 800; font-stretch: 125%; letter-spacing: -.045em; line-height: .95; }
 .philosophy__words .word { display: inline-block; }
 .philosophy__words .dot { color: var(--kk); }
-.philosophy__sub { margin-top: var(--s5); display: grid; gap: var(--s4); }
-@media (min-width: 900px) { .philosophy__sub { grid-template-columns: repeat(3, 1fr); } }
-.philosophy__sub div { border-top: 1px solid var(--line-dark); padding-top: var(--s3); display: grid; gap: .5rem; }
-.philosophy__sub b { font-weight: 700; font-stretch: 112%; font-size: 1.125rem; }
-.philosophy__sub p { color: var(--fog-soft); }
 
 /* ---------- Karriere-Band ---------- */
 .band { background: var(--kk); color: var(--night-950); position: relative; overflow: clip; isolation: isolate; }
 .band__inner { display: grid; gap: var(--s4); padding-block: clamp(4rem, 9vw, 7rem); }
 @media (min-width: 900px) { .band__inner { grid-template-columns: 1.4fr auto; align-items: end; } }
-.band .eyebrow { color: var(--night-950); }
-.band .eyebrow::before { background: var(--night-950); }
 .band p { max-width: 50ch; font-size: var(--fs-lead); line-height: 1.5; }
 .band .btn { --bg: var(--night-950); --fg: var(--fog); }
 .band .btn::before { background: var(--white); }
@@ -508,15 +464,6 @@ html.has-intro .intro {
 .intro__word small { display: block; font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fog-soft); margin-top: .5rem; }
 
 /* ---------- Leistungsseite ---------- */
-.switch { display: inline-flex; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-light); background: var(--white); position: relative; }
-.switch__btn { position: relative; z-index: 1; padding: .7rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .9375rem; color: var(--ink-soft); transition: color var(--t-mid) var(--ease); }
-.switch__btn[aria-selected="true"] { color: var(--white); }
-.switch__pill { position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 999px; background: var(--night-950); transition: transform var(--t-mid) var(--ease), width var(--t-mid) var(--ease); }
-.scope-lists { margin-top: var(--s5); }
-.scope-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--line-light); }
-.scope-list li { display: flex; align-items: center; gap: .9rem; padding: var(--s3) var(--s2) var(--s3) 0; border-bottom: 1px solid var(--line-light); font-weight: 600; font-stretch: 108%; font-size: 1.125rem; }
-.scope-list li::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--kk-ink); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }
-.scope-list[hidden] { display: none; }
 
 .service-rows { display: grid; gap: var(--s7); }
 .service-row { display: grid; gap: var(--s4); align-items: center; }
@@ -587,11 +534,6 @@ html.has-intro .intro {
 .map__pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--kk); box-shadow: 0 0 0 6px rgba(91,138,214,.25); }
 
 /* ---------- Karriere ---------- */
-.benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
-@media (min-width: 900px) { .benefits { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
-.benefits li { padding: var(--s3) 0; border-bottom: 1px solid var(--line-dark); display: grid; gap: .25rem; }
-.benefits b { font-weight: 700; font-stretch: 112%; font-size: 1.125rem; }
-.benefits span { color: var(--fog-soft); }
 
 .jobs { display: grid; border-top: 1px solid var(--line-light); }
 .job { border-bottom: 1px solid var(--line-light); }
@@ -622,7 +564,7 @@ html.has-intro .intro {
 .contact-grid { display: grid; gap: var(--gutter); }
 @media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
 .contact-card {
-  position: relative; display: grid; gap: var(--s2); align-content: start; padding: var(--s4); min-height: 240px;
+  position: relative; display: grid; gap: var(--s2); align-content: start; padding: var(--s4); min-height: 220px;
   border-radius: var(--radius); background: var(--night-900); box-shadow: inset 0 0 0 1px var(--line-dark);
   overflow: hidden; isolation: isolate;
   transition: box-shadow var(--t-mid) var(--ease);