Denise Krölling
1a63f66463
Statische Website ohne Build-Schritt: reines HTML, CSS und Vanilla-JS, lauffaehig auf beliebigem Webspace. Neun Seiten: Startseite, Dienstleistungen, Projekte, Ueber uns, Kontakt sowie Impressum, Datenschutz, Danke-Seite und 404. Kernstueck der Startseite ist die Stueckzahl-Achse: ein logarithmischer Regler von 1 bis 100.000 Stueck, der zur gewaehlten Menge Verfahren, Werkzeugkosten, Lieferzeit und Anwendungsfall ausgibt. Die dritte Zone ist optisch zurueckgenommen, weil Serienspritzguss ueber Partnerbetriebe laeuft und nicht zum eigenen Leistungsumfang gehoert. Der Leistungsumfang ist durchgehend auf FDM, SLA und SLA-gedruckte Formeinsaetze beschraenkt. Gestaltung nach Vorgabe: Anthrazit, Salbeigruen und Flieder als Akzent. Archivo, Public Sans und IBM Plex Mono werden lokal ausgeliefert statt ueber die Google-CDN eingebunden. Kontaktformular ueber Web3Forms mit Client-Validierung; der Access-Key ist noch ein Platzhalter. Alle Firmen- und Projektinhalte sind sichtbar als Platzhalter markiert, die Uebergabe-Checkliste steht in der README. Geprueft: WCAG-AA-Kontraste auf allen Seiten, kein horizontaler Ueberlauf von 320 bis 1920 px, Tastaturbedienung der Achse, feste Zeilenzahl der Hero-Headline. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2144 lines
43 KiB
CSS
2144 lines
43 KiB
CSS
/* ==========================================================================
|
||
Purinto GmbH — Stylesheet
|
||
Aufbau: Reset · Layout · Typografie · Komponenten · Seiten · Utilities
|
||
Konvention: eine Klasse pro Komponente, Abstände gehören dem Container.
|
||
========================================================================== */
|
||
|
||
/* --------------------------------------------------------------------------
|
||
1 · Reset und Basis
|
||
-------------------------------------------------------------------------- */
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
-webkit-text-size-adjust: 100%;
|
||
scroll-behavior: smooth;
|
||
scroll-padding-top: 6rem;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--f-text);
|
||
font-size: var(--t-md);
|
||
line-height: var(--lh-normal);
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
/* Sicherheitsnetz gegen lange Fachbegriffe und E-Mail-Adressen auf
|
||
schmalen Displays. */
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
p,
|
||
ul,
|
||
ol,
|
||
dl,
|
||
dd,
|
||
figure,
|
||
blockquote {
|
||
margin: 0;
|
||
}
|
||
|
||
ul,
|
||
ol {
|
||
padding: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
img,
|
||
svg {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
a {
|
||
color: var(--flieder-700);
|
||
text-decoration-thickness: 1px;
|
||
text-underline-offset: 0.18em;
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--flieder-900);
|
||
}
|
||
|
||
button,
|
||
input,
|
||
select,
|
||
textarea {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
:focus-visible {
|
||
outline: 2px solid var(--fokus);
|
||
outline-offset: 3px;
|
||
border-radius: var(--r-1);
|
||
}
|
||
|
||
.sprungmarke {
|
||
position: absolute;
|
||
left: var(--s-4);
|
||
top: var(--s-4);
|
||
z-index: 200;
|
||
padding: var(--s-3) var(--s-5);
|
||
background: var(--anthrazit-900);
|
||
color: var(--text-invers);
|
||
border-radius: var(--r-2);
|
||
text-decoration: none;
|
||
transform: translateY(-160%);
|
||
transition: transform var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.sprungmarke:focus {
|
||
transform: translateY(0);
|
||
color: var(--text-invers);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
2 · Layout
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.huelle {
|
||
width: 100%;
|
||
max-width: var(--breite);
|
||
margin-inline: auto;
|
||
padding-inline: var(--rand);
|
||
}
|
||
|
||
.huelle--eng {
|
||
max-width: calc(var(--breite-eng) + var(--rand) * 2);
|
||
}
|
||
|
||
.sektion {
|
||
padding-block: var(--sektion-y);
|
||
}
|
||
|
||
.sektion--knapp {
|
||
padding-block: calc(var(--sektion-y) * 0.6);
|
||
}
|
||
|
||
.sektion--dunkel {
|
||
background: var(--bg-dunkel);
|
||
color: var(--text-invers);
|
||
}
|
||
|
||
.sektion--salbei {
|
||
background: var(--bg-salbei);
|
||
}
|
||
|
||
.sektion--linie {
|
||
border-top: 1px solid var(--linie);
|
||
}
|
||
|
||
.sektion__kopf {
|
||
max-width: 62ch;
|
||
margin-bottom: var(--s-7);
|
||
}
|
||
|
||
.sektion__kopf--breit {
|
||
max-width: 78ch;
|
||
}
|
||
|
||
.raster {
|
||
display: grid;
|
||
gap: var(--s-5);
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.raster--2 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 900px) {
|
||
.raster--3 {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
.raster--4 {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 640px) and (max-width: 899px) {
|
||
.raster--3,
|
||
.raster--4 {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
/* Grid-Kinder haben implizit min-width:auto und schrumpfen nicht unter ihre
|
||
min-content-Breite. Lange deutsche Komposita ("Konstruktionsbegleitung")
|
||
und <select>-Elemente, die sich nach ihrer breitesten Option bemessen,
|
||
sprengen damit auf schmalen Displays das Raster. min-width:0 hebt das auf. */
|
||
.raster > *,
|
||
.feld-paar > *,
|
||
.formular > *,
|
||
.leistung__raster > *,
|
||
.kontakt-raster > *,
|
||
.achse__werte > *,
|
||
.nachhaltig > *,
|
||
.nachhaltig__punkt > *,
|
||
.ablauf > *,
|
||
.fuss__raster > *,
|
||
.profil > *,
|
||
.datenzeile > *,
|
||
.zeitstrahl > *,
|
||
.seitenspalte > * {
|
||
min-width: 0;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
3 · Typografie
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.display {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 118%;
|
||
line-height: var(--lh-kopf);
|
||
letter-spacing: var(--ls-display);
|
||
text-wrap: balance;
|
||
/* Deutsche Komposita wie "Datenschutzerklärung" passen auf 375px nicht in
|
||
eine Zeile und ragen sonst aus dem Layout. hyphens greift nur, wenn das
|
||
Wort tatsächlich zu lang ist — lang="de-AT" liefert die Trennmuster. */
|
||
overflow-wrap: break-word;
|
||
hyphens: auto;
|
||
}
|
||
|
||
.t-hero {
|
||
font-size: var(--t-3xl);
|
||
line-height: var(--lh-eng);
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
.t-2xl {
|
||
font-size: var(--t-2xl);
|
||
}
|
||
|
||
.t-xl {
|
||
font-size: var(--t-xl);
|
||
}
|
||
|
||
.t-lg {
|
||
font-size: var(--t-lg);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.eyebrow {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--s-3);
|
||
margin-bottom: var(--s-4);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
/* salbei-700 ergäbe auf .sektion--salbei nur 4,24:1 — knapp unter AA. */
|
||
color: var(--salbei-800);
|
||
}
|
||
|
||
.eyebrow::before {
|
||
content: "";
|
||
flex: none;
|
||
width: 1.75rem;
|
||
height: 2px;
|
||
background: var(--salbei-500);
|
||
}
|
||
|
||
.sektion--dunkel .eyebrow {
|
||
color: var(--salbei-300);
|
||
}
|
||
|
||
.sektion--dunkel .eyebrow::before {
|
||
background: var(--salbei-500);
|
||
}
|
||
|
||
.lead {
|
||
max-width: 58ch;
|
||
font-size: var(--t-lg);
|
||
line-height: 1.55;
|
||
color: var(--anthrazit-700);
|
||
}
|
||
|
||
/* Überschrift und Lead brauchen Luft. Die Randzusammenfassung mit dem
|
||
margin-bottom der .eyebrow ist gewollt — dort bleibt der Abstand gleich. */
|
||
.sektion__kopf .lead,
|
||
.achse-band__kopf .lead {
|
||
margin-top: var(--s-5);
|
||
}
|
||
|
||
.sektion--dunkel .lead {
|
||
color: var(--text-invers-leise);
|
||
}
|
||
|
||
.fliess {
|
||
max-width: 66ch;
|
||
}
|
||
|
||
.fliess > * + * {
|
||
margin-top: var(--s-4);
|
||
}
|
||
|
||
.leise {
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
.mono {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-xs);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
/* Überschriften in der Display-Schrift, die nicht .display tragen, brauchen
|
||
dieselbe Silbentrennung — sonst stehen Komposita über den Rand. */
|
||
.karte__titel,
|
||
.projekt__titel,
|
||
.etappe__titel,
|
||
.branche__titel,
|
||
.ablauf__titel,
|
||
.leistung__nummer {
|
||
hyphens: auto;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
/* Ein einziger Akzent in der Leitheadline: Flieder-Unterstreichung.
|
||
Bewusst als eigener Hintergrund statt z-index:-1 gelöst — sonst
|
||
verschwindet der Strich hinter dem Verlauf der Hero-Sektion. */
|
||
.hervor {
|
||
padding-inline: 0.05em;
|
||
background-image: linear-gradient(var(--flieder-400), var(--flieder-400));
|
||
background-repeat: no-repeat;
|
||
background-position: 0 92%;
|
||
background-size: 100% 0.15em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
4 · Kopfzeile und Navigation
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.kopf {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
background: color-mix(in srgb, var(--dunst) 88%, transparent);
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid transparent;
|
||
transition: border-color var(--dauer) var(--kurve),
|
||
background var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.kopf.ist-gescrollt {
|
||
border-bottom-color: var(--linie);
|
||
background: color-mix(in srgb, var(--dunst) 96%, transparent);
|
||
}
|
||
|
||
.kopf__innen {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--s-5);
|
||
min-height: 4.5rem;
|
||
}
|
||
|
||
.marke {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
color: var(--text);
|
||
text-decoration: none;
|
||
flex: none;
|
||
}
|
||
|
||
.marke__zeichen {
|
||
flex: none;
|
||
width: 1.4rem;
|
||
height: 1.4rem;
|
||
}
|
||
|
||
.marke__wort {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 118%;
|
||
font-size: 1.12rem;
|
||
letter-spacing: 0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--s-6);
|
||
}
|
||
|
||
.nav__liste {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--s-5);
|
||
}
|
||
|
||
.nav__link {
|
||
display: inline-block;
|
||
padding-block: var(--s-2);
|
||
color: var(--anthrazit-700);
|
||
font-size: var(--t-sm);
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
border-bottom: 2px solid transparent;
|
||
}
|
||
|
||
.nav__link:hover {
|
||
color: var(--text);
|
||
border-bottom-color: var(--salbei-400);
|
||
}
|
||
|
||
.nav__link[aria-current="page"] {
|
||
color: var(--text);
|
||
border-bottom-color: var(--flieder-600);
|
||
}
|
||
|
||
.nav__schalter {
|
||
display: none;
|
||
align-items: center;
|
||
gap: var(--s-3);
|
||
padding: var(--s-2) var(--s-3);
|
||
background: none;
|
||
border: 1px solid var(--linie);
|
||
border-radius: var(--r-2);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.nav__balken {
|
||
position: relative;
|
||
display: block;
|
||
width: 1rem;
|
||
height: 1px;
|
||
background: currentColor;
|
||
}
|
||
|
||
.nav__balken::before,
|
||
.nav__balken::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: currentColor;
|
||
transition: transform var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.nav__balken::before {
|
||
top: -5px;
|
||
}
|
||
|
||
.nav__balken::after {
|
||
top: 5px;
|
||
}
|
||
|
||
@media (max-width: 899px) {
|
||
.nav__schalter {
|
||
display: inline-flex;
|
||
}
|
||
|
||
.nav {
|
||
position: fixed;
|
||
inset: 4.5rem 0 auto 0;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
padding: var(--s-4) var(--rand) var(--s-6);
|
||
background: var(--dunst);
|
||
border-bottom: 1px solid var(--linie);
|
||
box-shadow: var(--schatten-2);
|
||
transform: translateY(-8px);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity var(--dauer) var(--kurve),
|
||
transform var(--dauer) var(--kurve), visibility var(--dauer);
|
||
}
|
||
|
||
.nav.ist-offen {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.nav__liste {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
}
|
||
|
||
.nav__link {
|
||
padding-block: var(--s-4);
|
||
font-size: var(--t-lg);
|
||
border-bottom: 1px solid var(--linie-zart);
|
||
}
|
||
|
||
.nav__link:hover,
|
||
.nav__link[aria-current="page"] {
|
||
border-bottom-color: var(--linie-zart);
|
||
color: var(--flieder-800);
|
||
}
|
||
|
||
.nav .knopf {
|
||
margin-top: var(--s-5);
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
5 · Knöpfe
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.knopf {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--s-3);
|
||
padding: 0.8rem 1.5rem;
|
||
border: 1px solid transparent;
|
||
border-radius: var(--r-2);
|
||
font-size: var(--t-sm);
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
text-decoration: none;
|
||
cursor: pointer;
|
||
transition: background var(--dauer) var(--kurve),
|
||
border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve),
|
||
transform var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.knopf:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.knopf--primaer {
|
||
background: var(--akzent);
|
||
color: #fff;
|
||
}
|
||
|
||
.knopf--primaer:hover {
|
||
background: var(--akzent-hover);
|
||
color: #fff;
|
||
}
|
||
|
||
.knopf--sekundaer {
|
||
background: transparent;
|
||
border-color: var(--anthrazit-300);
|
||
color: var(--text);
|
||
}
|
||
|
||
.knopf--sekundaer:hover {
|
||
border-color: var(--anthrazit-700);
|
||
color: var(--text);
|
||
}
|
||
|
||
.knopf--hell {
|
||
background: transparent;
|
||
border-color: rgba(255, 255, 255, 0.34);
|
||
color: var(--text-invers);
|
||
}
|
||
|
||
.knopf--hell:hover {
|
||
border-color: var(--text-invers);
|
||
background: rgba(255, 255, 255, 0.07);
|
||
color: var(--text-invers);
|
||
}
|
||
|
||
.knopf--voll {
|
||
width: 100%;
|
||
}
|
||
|
||
.knopf[disabled] {
|
||
opacity: 0.55;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
}
|
||
|
||
.knopf-reihe {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
/* Textlink mit Pfeil, für Karten und Teaser */
|
||
.pfeil-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.45rem;
|
||
font-size: var(--t-sm);
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.pfeil-link::after {
|
||
content: "→";
|
||
transition: transform var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.pfeil-link:hover::after {
|
||
transform: translateX(3px);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
6 · Hero
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.hero {
|
||
position: relative;
|
||
padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) clamp(2.5rem, 1rem + 5vw, 5rem);
|
||
overflow: hidden;
|
||
/* Das Logo ist so groß wie der Headline-Block: Schriftgröße x Zeilenhöhe x
|
||
Zeilenanzahl. Alles über dieselben Token gebunden, damit beide bei einer
|
||
Änderung im Gleichschritt bleiben. Gestapelt über der Headline reichen
|
||
zwei Zeilen — drei wären auf einem Telefon erschlagend. */
|
||
--logo-groesse: calc(var(--t-3xl) * var(--lh-eng) * 2);
|
||
}
|
||
|
||
@media (min-width: 700px) {
|
||
.hero {
|
||
--logo-groesse: calc(var(--t-3xl) * var(--lh-eng) * 3);
|
||
}
|
||
}
|
||
|
||
.hero::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(
|
||
120% 80% at 88% 0%,
|
||
var(--salbei-100) 0%,
|
||
transparent 62%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.hero__innen {
|
||
position: relative;
|
||
}
|
||
|
||
/* Logo-Platzhalter im Hero. Bewusst ruhig gehalten: Der Blickfang der Seite
|
||
ist die Stückzahl-Achse, nicht die Wortmarke.
|
||
Auf schmalen Displays steht das Logo im Fluss über der Eyebrow-Zeile, ab
|
||
760px rückt es in die obere rechte Ecke des Hero. */
|
||
.hero__logo {
|
||
display: grid;
|
||
place-items: center;
|
||
/* Auf schmalen Displays über der Headline, quadratisch. */
|
||
order: -1;
|
||
justify-self: start;
|
||
width: var(--logo-groesse);
|
||
aspect-ratio: 1;
|
||
background: var(--anthrazit-700);
|
||
color: var(--dunst);
|
||
border-radius: var(--r-3);
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 118%;
|
||
font-size: calc(var(--logo-groesse) * 0.62);
|
||
line-height: 1;
|
||
/* Versalien sitzen in der Mitte optisch zu tief. */
|
||
padding-bottom: 0.06em;
|
||
}
|
||
|
||
@media (min-width: 700px) {
|
||
.hero__logo {
|
||
order: 0;
|
||
/* Breite aus der Spalte, Höhe aus der Zeile — und die Zeile ist die
|
||
Headline. Damit ist das Logo immer exakt so hoch wie sie. */
|
||
justify-self: stretch;
|
||
align-self: stretch;
|
||
width: auto;
|
||
height: auto;
|
||
aspect-ratio: auto;
|
||
font-size: calc(var(--logo-groesse) * 0.62);
|
||
}
|
||
}
|
||
|
||
/* Ersetzt jemand das <div> durch ein <img>, soll die Kachel-Optik weichen.
|
||
Die Breite folgt der Höhe, damit das Seitenverhältnis eines querformatigen
|
||
Logos erhalten bleibt. */
|
||
img.hero__logo {
|
||
display: block;
|
||
width: auto;
|
||
height: var(--logo-groesse);
|
||
max-width: 100%;
|
||
aspect-ratio: auto;
|
||
object-fit: contain;
|
||
object-position: right center;
|
||
background: none;
|
||
border-radius: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* Headline und Logo teilen sich eine Grid-Zeile. Dadurch stretcht das Logo
|
||
auf die tatsächliche Headline-Höhe — egal ob sie drei oder vier Zeilen
|
||
läuft. Eine feste Zeilenannahme wäre zirkulär: Das Logo verengt die
|
||
Textspalte und verändert damit die Höhe, an die es gebunden ist. */
|
||
.hero__kopf {
|
||
display: grid;
|
||
gap: var(--s-5);
|
||
margin-bottom: var(--s-5);
|
||
}
|
||
|
||
/* Keine max-width: Die Zeilenaufteilung steuern die festen Umbrüche im HTML.
|
||
Eine zusätzliche Breitengrenze würde nur weitere Umbrüche erzwingen. */
|
||
.hero__titel {
|
||
max-width: none;
|
||
}
|
||
|
||
/* Unter 500px die festen Umbrüche aufheben: Ein ausgeblendetes <br> erzeugt
|
||
keinen Zeilenumbruch mehr, die Headline bricht dann frei und ausgewogen auf
|
||
vier Zeilen um. Mit den Umbrüchen entstünde stattdessen "Zwischen" /
|
||
"Prototyp" — zwei kurze Zeilen über zwei langen. */
|
||
@media (max-width: 499px) {
|
||
.hero__umbruch {
|
||
display: none;
|
||
}
|
||
|
||
/* Ohne Ausgleich bliebe "Zwischen" als Einzelwort auf Zeile 1 stehen —
|
||
"Zwischen Prototyp" ist hier um Haaresbreite zu lang für eine Zeile.
|
||
balance verteilt die vier Zeilen gleichmäßig. */
|
||
.hero__titel {
|
||
text-wrap: balance;
|
||
}
|
||
}
|
||
|
||
/* Ab 700px steht das Logo rechts neben der Headline und ist über align-self:
|
||
stretch exakt so hoch wie sie. Darunter wird gestapelt: Ein Quadrat in
|
||
Headline-Höhe verengt die Textspalte, die Headline bricht dadurch weiter um
|
||
und macht das Logo noch größer. Ab 700px pendelt sich das ein, bei 600px
|
||
nicht mehr (dort wächst die Headline auf acht Zeilen). */
|
||
@media (min-width: 700px) {
|
||
.hero__kopf {
|
||
/* Die Logospalte bekommt eine feste Breite. Mit "auto" bemisst sie sich am
|
||
Buchstaben statt am gestreckten Quadrat — das Logo ragte dann nach links
|
||
über die Headline. */
|
||
grid-template-columns: minmax(0, 1fr) var(--logo-groesse);
|
||
align-items: stretch;
|
||
column-gap: var(--s-6);
|
||
}
|
||
}
|
||
|
||
.hero__lead {
|
||
margin-bottom: var(--s-6);
|
||
}
|
||
|
||
.hero__spektrum {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-3) var(--s-5);
|
||
margin-top: var(--s-8);
|
||
padding-top: var(--s-5);
|
||
border-top: 1px solid var(--linie);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
.hero__spektrum li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.hero__spektrum li::before {
|
||
content: "";
|
||
width: 5px;
|
||
height: 5px;
|
||
background: var(--salbei-500);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
7 · Stückzahl-Achse — das Signature-Element
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.achse-band {
|
||
position: relative;
|
||
background: var(--bg-dunkel);
|
||
color: var(--text-invers);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.achse-band::before {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--schichten);
|
||
opacity: 0.6;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.achse-band__innen {
|
||
position: relative;
|
||
}
|
||
|
||
.achse-band__kopf {
|
||
max-width: 60ch;
|
||
margin-bottom: var(--s-8);
|
||
}
|
||
|
||
.achse {
|
||
--zone-a: 40%;
|
||
--zone-b: 60%;
|
||
--marke: 12%;
|
||
margin-bottom: var(--s-7);
|
||
}
|
||
|
||
.achse__zonen {
|
||
position: relative;
|
||
display: flex;
|
||
height: 2.5rem;
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.achse__zone {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 0 0 var(--s-2) var(--s-3);
|
||
border-left: 1px solid var(--linie-invers);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--text-invers-leise);
|
||
transition: color var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.achse__zone:last-child {
|
||
border-right: 1px solid var(--linie-invers);
|
||
}
|
||
|
||
.achse__zone.ist-aktiv {
|
||
color: var(--flieder-300);
|
||
}
|
||
|
||
/* Die dritte Zone ist Partnerleistung, kein Kerngeschäft:
|
||
Kontur statt Fläche, gedämpft. Das ist eine inhaltliche Aussage. */
|
||
.achse__zone--partner {
|
||
color: var(--text-invers-schwach);
|
||
}
|
||
|
||
.achse__spur {
|
||
position: relative;
|
||
height: 0.75rem;
|
||
background: var(--anthrazit-800);
|
||
border-radius: var(--r-1);
|
||
cursor: pointer;
|
||
touch-action: none;
|
||
}
|
||
|
||
.achse__flaeche {
|
||
position: absolute;
|
||
inset-block: 0;
|
||
border-radius: var(--r-1);
|
||
}
|
||
|
||
.achse__flaeche--druck {
|
||
left: 0;
|
||
right: calc(100% - var(--zone-a));
|
||
background: var(--salbei-600);
|
||
}
|
||
|
||
.achse__flaeche--bridge {
|
||
left: var(--zone-a);
|
||
right: calc(100% - var(--zone-b));
|
||
background: var(--salbei-400);
|
||
}
|
||
|
||
.achse__flaeche--partner {
|
||
left: var(--zone-b);
|
||
right: 0;
|
||
background: repeating-linear-gradient(
|
||
-45deg,
|
||
rgba(174, 181, 183, 0.32) 0 2px,
|
||
transparent 2px 7px
|
||
);
|
||
border: 1px solid rgba(174, 181, 183, 0.36);
|
||
}
|
||
|
||
.achse__griff {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: var(--marke);
|
||
width: 1.65rem;
|
||
height: 1.65rem;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: var(--flieder-300);
|
||
border: 3px solid var(--anthrazit-700);
|
||
border-radius: 50%;
|
||
transform: translate(-50%, -50%);
|
||
cursor: grab;
|
||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
|
||
transition: box-shadow var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.achse__griff:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.achse__griff:hover,
|
||
.achse__griff:focus-visible {
|
||
box-shadow: 0 0 0 6px rgba(198, 181, 227, 0.22);
|
||
}
|
||
|
||
/* Die Skala wird absolut positioniert, nicht gleichverteilt: Auf einer
|
||
logarithmischen Achse müssen die Beschriftungen exakt über ihren
|
||
Zonengrenzen sitzen, sonst zeigt das Instrument etwas Falsches an. */
|
||
.achse__skala {
|
||
position: relative;
|
||
height: 1.2rem;
|
||
margin-top: var(--s-3);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
color: var(--text-invers-schwach);
|
||
}
|
||
|
||
.achse__skala li {
|
||
position: absolute;
|
||
top: 0;
|
||
transform: translateX(-50%);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.achse__skala li:first-child {
|
||
transform: none;
|
||
}
|
||
|
||
.achse__skala li:last-child {
|
||
transform: translateX(-100%);
|
||
}
|
||
|
||
.achse__tafel {
|
||
display: grid;
|
||
gap: var(--s-6);
|
||
padding: var(--s-6);
|
||
background: rgba(255, 255, 255, 0.045);
|
||
border: 1px solid var(--linie-invers);
|
||
border-radius: var(--r-3);
|
||
}
|
||
|
||
@media (min-width: 900px) {
|
||
.achse__tafel {
|
||
grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
|
||
gap: var(--s-8);
|
||
padding: var(--s-7);
|
||
}
|
||
}
|
||
|
||
.achse__ausgabe {
|
||
display: block;
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 118%;
|
||
font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.4rem);
|
||
line-height: 1.05;
|
||
letter-spacing: var(--ls-display);
|
||
}
|
||
|
||
/* Absolute Größe, nicht em: Die Einheit steht als Geschwister neben
|
||
.achse__ausgabe, nicht darin — em würde gegen die 17px des Containers
|
||
rechnen und die Angabe auf 7px schrumpfen. */
|
||
.achse__ausgabe-einheit {
|
||
display: inline-block;
|
||
margin-top: var(--s-2);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-sm);
|
||
font-weight: 500;
|
||
letter-spacing: 0.04em;
|
||
color: var(--text-invers-leise);
|
||
}
|
||
|
||
.achse__verfahren {
|
||
margin-top: var(--s-4);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--flieder-300);
|
||
}
|
||
|
||
.achse__hinweis {
|
||
margin-top: var(--s-4);
|
||
font-size: var(--t-sm);
|
||
color: var(--text-invers-leise);
|
||
}
|
||
|
||
.achse__werte {
|
||
display: grid;
|
||
gap: var(--s-5);
|
||
margin: 0;
|
||
}
|
||
|
||
@media (min-width: 560px) {
|
||
.achse__werte {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
.achse__wert dt {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
/* Die Tafel liegt auf einer leicht aufgehellten Fläche; --text-invers-schwach
|
||
käme dort nur auf 4,26:1. */
|
||
color: var(--text-invers-leise);
|
||
}
|
||
|
||
.achse__wert dd {
|
||
margin: var(--s-2) 0 0;
|
||
font-size: var(--t-sm);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.achse__fussnote {
|
||
margin-top: var(--s-6);
|
||
max-width: 74ch;
|
||
font-size: var(--t-xs);
|
||
color: var(--text-invers-schwach);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
8 · Karten
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.karte {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-3);
|
||
padding: var(--s-6);
|
||
background: var(--bg-karte);
|
||
border: 1px solid var(--linie-zart);
|
||
border-radius: var(--r-3);
|
||
transition: border-color var(--dauer) var(--kurve),
|
||
box-shadow var(--dauer) var(--kurve), transform var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.karte:hover {
|
||
border-color: var(--salbei-400);
|
||
box-shadow: var(--schatten-1);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.karte__marke {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--salbei-800);
|
||
}
|
||
|
||
.karte__titel {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: 1.16rem;
|
||
line-height: 1.25;
|
||
letter-spacing: -0.012em;
|
||
}
|
||
|
||
.karte__text {
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
.karte__fuss {
|
||
margin-top: auto;
|
||
padding-top: var(--s-3);
|
||
}
|
||
|
||
.karte--flach:hover {
|
||
transform: none;
|
||
box-shadow: none;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
9 · Verfahrensmatrix
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.matrix-huelle {
|
||
overflow-x: auto;
|
||
border: 1px solid var(--linie);
|
||
border-radius: var(--r-3);
|
||
background: var(--bg-karte);
|
||
}
|
||
|
||
.matrix {
|
||
width: 100%;
|
||
min-width: 46rem;
|
||
border-collapse: collapse;
|
||
font-size: var(--t-sm);
|
||
}
|
||
|
||
.matrix th,
|
||
.matrix td {
|
||
padding: var(--s-4) var(--s-4);
|
||
text-align: left;
|
||
vertical-align: top;
|
||
border-bottom: 1px solid var(--linie-zart);
|
||
}
|
||
|
||
.matrix thead th {
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--anthrazit-100);
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: var(--t-sm);
|
||
letter-spacing: -0.008em;
|
||
border-bottom: 1px solid var(--linie);
|
||
}
|
||
|
||
.matrix tbody th {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.matrix tbody tr:last-child th,
|
||
.matrix tbody tr:last-child td {
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* Partnerleistung optisch abgesetzt – gleiche Aussage wie in der Achse. */
|
||
.matrix .ist-partner {
|
||
background: color-mix(in srgb, var(--anthrazit-100) 45%, transparent);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
.matrix__partnermarke {
|
||
display: block;
|
||
margin-top: var(--s-1);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
font-weight: 400;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
10 · Branchen, Nachhaltigkeit, Ablauf
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.branche {
|
||
padding: var(--s-6) 0 0;
|
||
border-top: 2px solid var(--salbei-400);
|
||
}
|
||
|
||
.branche__titel {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: 1.08rem;
|
||
line-height: 1.25;
|
||
margin-bottom: var(--s-3);
|
||
}
|
||
|
||
.branche__text {
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
.nachhaltig {
|
||
display: grid;
|
||
gap: var(--s-5);
|
||
}
|
||
|
||
@media (min-width: 700px) {
|
||
.nachhaltig {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
.nachhaltig__punkt {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: var(--s-4);
|
||
align-items: start;
|
||
}
|
||
|
||
.nachhaltig__zeichen {
|
||
flex: none;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
margin-top: 0.15rem;
|
||
color: var(--salbei-700);
|
||
}
|
||
|
||
.nachhaltig__titel {
|
||
font-weight: 700;
|
||
margin-bottom: var(--s-1);
|
||
}
|
||
|
||
.nachhaltig__text {
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
/* Nummerierung nur hier – der Ablauf ist eine echte Reihenfolge. */
|
||
.ablauf {
|
||
counter-reset: schritt;
|
||
display: grid;
|
||
gap: var(--s-6);
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.ablauf {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1000px) {
|
||
.ablauf {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
.ablauf__schritt {
|
||
counter-increment: schritt;
|
||
padding-top: var(--s-5);
|
||
border-top: 1px solid var(--linie);
|
||
}
|
||
|
||
.ablauf__schritt::before {
|
||
content: counter(schritt, decimal-leading-zero);
|
||
display: block;
|
||
margin-bottom: var(--s-3);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
color: var(--flieder-700);
|
||
}
|
||
|
||
.ablauf__titel {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: 1.05rem;
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
|
||
.ablauf__text {
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
11 · CTA-Band
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.cta-band {
|
||
background: var(--bg-dunkel-tief);
|
||
color: var(--text-invers);
|
||
}
|
||
|
||
.cta-band__innen {
|
||
display: grid;
|
||
gap: var(--s-6);
|
||
align-items: center;
|
||
}
|
||
|
||
@media (min-width: 900px) {
|
||
.cta-band__innen {
|
||
grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: var(--s-8);
|
||
}
|
||
}
|
||
|
||
.cta-band__text {
|
||
max-width: 52ch;
|
||
margin-top: var(--s-4);
|
||
color: var(--text-invers-leise);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
12 · Dienstleistungen
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.sprungnav {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
padding-block: var(--s-5);
|
||
border-block: 1px solid var(--linie);
|
||
}
|
||
|
||
.sprungnav__link {
|
||
padding: 0.45rem 0.85rem;
|
||
border: 1px solid var(--linie);
|
||
border-radius: 999px;
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-600);
|
||
text-decoration: none;
|
||
transition: border-color var(--dauer) var(--kurve),
|
||
color var(--dauer) var(--kurve), background var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.sprungnav__link:hover {
|
||
background: var(--salbei-100);
|
||
border-color: var(--salbei-400);
|
||
color: var(--anthrazit-900);
|
||
}
|
||
|
||
.leistung {
|
||
padding-block: var(--sektion-y);
|
||
border-top: 1px solid var(--linie);
|
||
}
|
||
|
||
.leistung__kopf {
|
||
margin-bottom: var(--s-6);
|
||
}
|
||
|
||
.leistung__nummer {
|
||
display: block;
|
||
margin-bottom: var(--s-3);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
color: var(--salbei-700);
|
||
}
|
||
|
||
.leistung__raster {
|
||
display: grid;
|
||
gap: var(--s-6);
|
||
}
|
||
|
||
@media (min-width: 900px) {
|
||
.leistung__raster {
|
||
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
|
||
gap: var(--s-8);
|
||
}
|
||
}
|
||
|
||
.block__titel {
|
||
margin-bottom: var(--s-3);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
.block + .block {
|
||
margin-top: var(--s-6);
|
||
}
|
||
|
||
.haken {
|
||
display: grid;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.haken li {
|
||
position: relative;
|
||
padding-left: 1.6rem;
|
||
font-size: var(--t-sm);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.haken li::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0.55em;
|
||
width: 0.6rem;
|
||
height: 1px;
|
||
background: var(--salbei-600);
|
||
}
|
||
|
||
.datenzeile {
|
||
display: grid;
|
||
gap: var(--s-4);
|
||
margin-top: var(--s-6);
|
||
padding: var(--s-5);
|
||
background: var(--salbei-100);
|
||
border-left: 2px solid var(--salbei-500);
|
||
border-radius: 0 var(--r-2) var(--r-2) 0;
|
||
}
|
||
|
||
@media (min-width: 560px) {
|
||
.datenzeile {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
.datenzeile dt {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--salbei-800);
|
||
}
|
||
|
||
.datenzeile dd {
|
||
margin: var(--s-1) 0 0;
|
||
font-size: var(--t-sm);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Abgesetzter Hinweiskasten, u. a. für die Partnerleistung Stahlwerkzeug */
|
||
.hinweis {
|
||
padding: var(--s-5);
|
||
background: var(--bg-karte);
|
||
border: 1px dashed var(--anthrazit-300);
|
||
border-radius: var(--r-3);
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
.hinweis__titel {
|
||
display: block;
|
||
margin-bottom: var(--s-2);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
13 · Projekte
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.filter {
|
||
display: grid;
|
||
gap: var(--s-4);
|
||
padding-block: var(--s-5);
|
||
border-block: 1px solid var(--linie);
|
||
}
|
||
|
||
@media (min-width: 700px) {
|
||
.filter {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: var(--s-6);
|
||
}
|
||
}
|
||
|
||
.filter__gruppe {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.filter__titel {
|
||
margin-right: var(--s-2);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
.filter__knopf {
|
||
padding: 0.4rem 0.8rem;
|
||
background: none;
|
||
border: 1px solid var(--linie);
|
||
border-radius: 999px;
|
||
font-size: var(--t-xs);
|
||
color: var(--anthrazit-600);
|
||
cursor: pointer;
|
||
transition: background var(--dauer) var(--kurve),
|
||
border-color var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.filter__knopf:hover {
|
||
border-color: var(--salbei-500);
|
||
color: var(--text);
|
||
}
|
||
|
||
.filter__knopf[aria-pressed="true"] {
|
||
background: var(--flieder-800);
|
||
border-color: var(--flieder-800);
|
||
color: #fff;
|
||
}
|
||
|
||
.projekt {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--bg-karte);
|
||
border: 1px solid var(--linie-zart);
|
||
border-radius: var(--r-3);
|
||
overflow: hidden;
|
||
transition: border-color var(--dauer) var(--kurve),
|
||
box-shadow var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.projekt:hover {
|
||
border-color: var(--salbei-400);
|
||
box-shadow: var(--schatten-1);
|
||
}
|
||
|
||
.projekt.ist-versteckt {
|
||
display: none;
|
||
}
|
||
|
||
.projekt__bild {
|
||
aspect-ratio: 4 / 3;
|
||
background: var(--anthrazit-100);
|
||
border-bottom: 1px solid var(--linie-zart);
|
||
}
|
||
|
||
.projekt__bild img,
|
||
.projekt__bild svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.projekt__innen {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--s-3);
|
||
padding: var(--s-5);
|
||
}
|
||
|
||
.projekt__meta {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.tag {
|
||
padding: 0.2rem 0.55rem;
|
||
border-radius: var(--r-1);
|
||
background: var(--salbei-100);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: 0.05em;
|
||
text-transform: uppercase;
|
||
color: var(--salbei-800);
|
||
}
|
||
|
||
.tag--branche {
|
||
background: var(--flieder-100);
|
||
color: var(--flieder-900);
|
||
}
|
||
|
||
.projekt__titel {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: 1.12rem;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.projekt__block {
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
.projekt__block b {
|
||
display: block;
|
||
color: var(--anthrazit-800);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.projekt__ergebnis {
|
||
margin-top: auto;
|
||
padding-top: var(--s-4);
|
||
border-top: 1px solid var(--linie-zart);
|
||
font-size: var(--t-sm);
|
||
}
|
||
|
||
.projekt__kennzahl {
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 118%;
|
||
font-size: 1.45rem;
|
||
line-height: 1.1;
|
||
color: var(--flieder-800);
|
||
}
|
||
|
||
.leer-hinweis {
|
||
padding: var(--s-7) 0;
|
||
text-align: center;
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
14 · Über uns — Zeitstrahl
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.zeitstrahl {
|
||
position: relative;
|
||
display: grid;
|
||
gap: var(--s-7);
|
||
padding-left: var(--s-6);
|
||
}
|
||
|
||
.zeitstrahl::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 3px;
|
||
top: 0.6rem;
|
||
bottom: 0.6rem;
|
||
width: 1px;
|
||
background: var(--linie);
|
||
}
|
||
|
||
.etappe {
|
||
position: relative;
|
||
}
|
||
|
||
.etappe::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: calc(-1 * var(--s-6));
|
||
top: 0.55rem;
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 50%;
|
||
background: var(--salbei-500);
|
||
}
|
||
|
||
.etappe--jetzt::before {
|
||
background: var(--flieder-700);
|
||
box-shadow: 0 0 0 4px var(--flieder-100);
|
||
}
|
||
|
||
.etappe__jahr {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
color: var(--flieder-700);
|
||
}
|
||
|
||
.etappe__titel {
|
||
margin: var(--s-2) 0 var(--s-2);
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: 1.16rem;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.etappe__text {
|
||
max-width: 60ch;
|
||
font-size: var(--t-sm);
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
.profil {
|
||
display: grid;
|
||
gap: var(--s-6);
|
||
align-items: start;
|
||
}
|
||
|
||
@media (min-width: 700px) {
|
||
.profil {
|
||
grid-template-columns: 15rem minmax(0, 1fr);
|
||
gap: var(--s-8);
|
||
}
|
||
}
|
||
|
||
.profil__bild {
|
||
aspect-ratio: 4 / 5;
|
||
background: var(--anthrazit-100);
|
||
border-radius: var(--r-3);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.profil__bild img,
|
||
.profil__bild svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
15 · Formular
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.kontakt-raster {
|
||
display: grid;
|
||
gap: var(--s-8);
|
||
align-items: start;
|
||
}
|
||
|
||
@media (min-width: 900px) {
|
||
.kontakt-raster {
|
||
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
|
||
gap: var(--s-9);
|
||
}
|
||
}
|
||
|
||
.formular {
|
||
display: grid;
|
||
gap: var(--s-5);
|
||
}
|
||
|
||
.feld-paar {
|
||
display: grid;
|
||
gap: var(--s-5);
|
||
}
|
||
|
||
@media (min-width: 560px) {
|
||
.feld-paar {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
}
|
||
|
||
.feld {
|
||
display: grid;
|
||
gap: var(--s-2);
|
||
}
|
||
|
||
.feld__label {
|
||
font-size: var(--t-sm);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.feld__pflicht {
|
||
color: var(--flieder-700);
|
||
}
|
||
|
||
.feld__eingabe {
|
||
width: 100%;
|
||
padding: 0.72rem 0.9rem;
|
||
background: var(--papier);
|
||
border: 1px solid var(--anthrazit-300);
|
||
border-radius: var(--r-2);
|
||
font-size: var(--t-sm);
|
||
transition: border-color var(--dauer) var(--kurve),
|
||
box-shadow var(--dauer) var(--kurve);
|
||
}
|
||
|
||
.feld__eingabe:hover {
|
||
border-color: var(--anthrazit-500);
|
||
}
|
||
|
||
.feld__eingabe:focus {
|
||
outline: none;
|
||
border-color: var(--flieder-700);
|
||
box-shadow: 0 0 0 3px var(--flieder-200);
|
||
}
|
||
|
||
.feld__eingabe[aria-invalid="true"] {
|
||
border-color: #a4402f;
|
||
background: #fdf6f5;
|
||
}
|
||
|
||
textarea.feld__eingabe {
|
||
min-height: 9rem;
|
||
resize: vertical;
|
||
}
|
||
|
||
select.feld__eingabe {
|
||
appearance: none;
|
||
background-image: linear-gradient(45deg, transparent 50%, var(--anthrazit-600) 50%),
|
||
linear-gradient(135deg, var(--anthrazit-600) 50%, transparent 50%);
|
||
background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - 0.75rem) 1.15rem;
|
||
background-size: 6px 6px, 6px 6px;
|
||
background-repeat: no-repeat;
|
||
padding-right: 2.5rem;
|
||
}
|
||
|
||
.feld__fehler {
|
||
display: none;
|
||
font-size: var(--t-xs);
|
||
color: #a4402f;
|
||
}
|
||
|
||
.feld__fehler.ist-sichtbar {
|
||
display: block;
|
||
}
|
||
|
||
.feld__hilfe {
|
||
font-size: var(--t-xs);
|
||
color: var(--text-leise);
|
||
}
|
||
|
||
.zustimmung {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr;
|
||
gap: var(--s-3);
|
||
align-items: start;
|
||
}
|
||
|
||
.zustimmung input {
|
||
width: 1.15rem;
|
||
height: 1.15rem;
|
||
margin-top: 0.2rem;
|
||
accent-color: var(--flieder-800);
|
||
}
|
||
|
||
.zustimmung__text {
|
||
font-size: var(--t-xs);
|
||
line-height: 1.55;
|
||
color: var(--anthrazit-600);
|
||
}
|
||
|
||
/* Honeypot: für Menschen unsichtbar, für Bots verlockend. */
|
||
.honigtopf {
|
||
position: absolute;
|
||
left: -9999px;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.meldung {
|
||
display: none;
|
||
padding: var(--s-5);
|
||
border-radius: var(--r-3);
|
||
font-size: var(--t-sm);
|
||
}
|
||
|
||
.meldung.ist-sichtbar {
|
||
display: block;
|
||
}
|
||
|
||
.meldung--erfolg {
|
||
background: var(--salbei-100);
|
||
border: 1px solid var(--salbei-400);
|
||
color: var(--salbei-800);
|
||
}
|
||
|
||
.meldung--fehler {
|
||
background: #fdf6f5;
|
||
border: 1px solid #d9a79e;
|
||
color: #8c3527;
|
||
}
|
||
|
||
.meldung__titel {
|
||
display: block;
|
||
margin-bottom: var(--s-2);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.seitenspalte {
|
||
display: grid;
|
||
gap: var(--s-7);
|
||
padding: var(--s-6);
|
||
background: var(--bg-karte);
|
||
border: 1px solid var(--linie-zart);
|
||
border-radius: var(--r-3);
|
||
}
|
||
|
||
.kontaktliste {
|
||
display: grid;
|
||
gap: var(--s-4);
|
||
}
|
||
|
||
.kontaktliste dt {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
.kontaktliste dd {
|
||
margin: var(--s-1) 0 0;
|
||
font-size: var(--t-sm);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
16 · Fußzeile
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.fuss {
|
||
padding-block: var(--s-8) var(--s-6);
|
||
background: var(--anthrazit-900);
|
||
color: var(--text-invers-leise);
|
||
font-size: var(--t-sm);
|
||
}
|
||
|
||
.fuss__raster {
|
||
display: grid;
|
||
gap: var(--s-7);
|
||
padding-bottom: var(--s-7);
|
||
border-bottom: 1px solid var(--linie-invers);
|
||
}
|
||
|
||
@media (min-width: 700px) {
|
||
.fuss__raster {
|
||
grid-template-columns: 1.4fr 1fr 1fr;
|
||
gap: var(--s-8);
|
||
}
|
||
}
|
||
|
||
.fuss__marke {
|
||
color: var(--text-invers);
|
||
}
|
||
|
||
.fuss__text {
|
||
max-width: 34ch;
|
||
margin-top: var(--s-4);
|
||
}
|
||
|
||
.fuss__titel {
|
||
margin-bottom: var(--s-4);
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--text-invers-schwach);
|
||
}
|
||
|
||
.fuss__liste {
|
||
display: grid;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.fuss a {
|
||
color: var(--text-invers-leise);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.fuss a:hover {
|
||
color: var(--text-invers);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.fuss__unten {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
gap: var(--s-4);
|
||
padding-top: var(--s-5);
|
||
font-size: var(--t-xs);
|
||
color: var(--text-invers-schwach);
|
||
}
|
||
|
||
.fuss__rechtlich {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--s-5);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
17 · Seitenkopf für Unterseiten
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.seitenkopf {
|
||
padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
|
||
border-bottom: 1px solid var(--linie);
|
||
}
|
||
|
||
.seitenkopf__titel {
|
||
max-width: 20ch;
|
||
margin-bottom: var(--s-5);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
18 · Platzhalter-Kennzeichnung
|
||
Alles, was die Auftraggeberin noch ersetzen muss, ist sichtbar markiert.
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.platzhalter {
|
||
background: var(--flieder-100);
|
||
border-bottom: 1px dashed var(--flieder-600);
|
||
padding: 0 0.15em;
|
||
color: var(--flieder-900);
|
||
}
|
||
|
||
/* Auf dunklem Grund muss die Markierung umgedreht werden: sonst trifft die
|
||
helle Linkfarbe der Fußzeile auf den hellen Flieder-Hintergrund und der
|
||
Text wird unlesbar (gemessen 1,58:1). */
|
||
.fuss .platzhalter,
|
||
.sektion--dunkel .platzhalter,
|
||
.cta-band .platzhalter {
|
||
background: rgba(198, 181, 227, 0.15);
|
||
border-bottom-color: var(--flieder-400);
|
||
color: var(--flieder-300);
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
19 · Rechtstexte (Impressum, Datenschutz)
|
||
Höhere Spezifität bei den Überschriften als beim Fluss-Abstand, damit
|
||
die Abstände sich nicht gegenseitig aufheben.
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.rechtstext {
|
||
max-width: 68ch;
|
||
}
|
||
|
||
.rechtstext > * + * {
|
||
margin-top: var(--s-4);
|
||
}
|
||
|
||
.rechtstext h2 {
|
||
margin-top: var(--s-8);
|
||
font-family: var(--f-display);
|
||
font-weight: 700;
|
||
font-stretch: 112%;
|
||
font-size: 1.28rem;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.rechtstext h3 {
|
||
margin-top: var(--s-6);
|
||
font-size: 1.02rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.rechtstext ul {
|
||
display: grid;
|
||
gap: var(--s-2);
|
||
padding-left: 1.15rem;
|
||
list-style: disc;
|
||
}
|
||
|
||
.rechtstext dl {
|
||
display: grid;
|
||
gap: var(--s-3);
|
||
}
|
||
|
||
.rechtstext dt {
|
||
font-family: var(--f-mono);
|
||
font-size: var(--t-2xs);
|
||
letter-spacing: var(--ls-mono);
|
||
text-transform: uppercase;
|
||
color: var(--anthrazit-500);
|
||
}
|
||
|
||
.rechtstext dd {
|
||
margin: 0;
|
||
}
|
||
|
||
/* --------------------------------------------------------------------------
|
||
20 · Utilities und Motion
|
||
-------------------------------------------------------------------------- */
|
||
|
||
.nur-sr {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
padding: 0;
|
||
margin: -1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.stapel-4 > * + * {
|
||
margin-top: var(--s-4);
|
||
}
|
||
|
||
.stapel-5 > * + * {
|
||
margin-top: var(--s-5);
|
||
}
|
||
|
||
.stapel-6 > * + * {
|
||
margin-top: var(--s-6);
|
||
}
|
||
|
||
.mt-6 {
|
||
margin-top: var(--s-6);
|
||
}
|
||
|
||
.mt-7 {
|
||
margin-top: var(--s-7);
|
||
}
|
||
|
||
/* Dezente Einblendung beim Scrollen. JS setzt .ist-sichtbar. */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(14px);
|
||
transition: opacity 620ms var(--kurve), transform 620ms var(--kurve);
|
||
}
|
||
|
||
.reveal.ist-sichtbar {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* Orchestrierte Hero-Sequenz beim Laden — die einzige Ladeanimation der Seite */
|
||
.anlauf > * {
|
||
animation: anlauf 720ms var(--kurve) backwards;
|
||
}
|
||
|
||
.anlauf > *:nth-child(1) {
|
||
animation-delay: 60ms;
|
||
}
|
||
.anlauf > *:nth-child(2) {
|
||
animation-delay: 150ms;
|
||
}
|
||
.anlauf > *:nth-child(3) {
|
||
animation-delay: 240ms;
|
||
}
|
||
.anlauf > *:nth-child(4) {
|
||
animation-delay: 330ms;
|
||
}
|
||
.anlauf > *:nth-child(5) {
|
||
animation-delay: 420ms;
|
||
}
|
||
|
||
@keyframes anlauf {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(16px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html {
|
||
scroll-behavior: auto;
|
||
}
|
||
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
|
||
.reveal {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
.knopf:hover {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
@media print {
|
||
.kopf,
|
||
.cta-band,
|
||
.sprungmarke {
|
||
display: none;
|
||
}
|
||
|
||
body {
|
||
background: #fff;
|
||
}
|
||
}
|