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>
This commit is contained in:
NotPika69andClaude Opus 5.5 committed
1 parent
62916fc179
commit
ba44dc3f0a
31 files changed
+227
-591
No files matched your search
+18
-76
@@ -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);
|
||||
|
||||
Reference in new issue
Block a user