/* ==========================================================================
Ceylan Umzüge & Transporte — Designsystem
Positionierung: "Sie wissen vorher, was drin ist — und was nicht."
Gestaltungsidee: Die Seite liest sich wie eine gut geführte Ladeliste.
Daten, Mengen und Listen stehen in Monospace, Fließtext in Grotesk.
========================================================================== */
/* --------------------------------------------------------------------------
1. TOKENS
Palette abgeleitet aus dem realen Material: Firmenkleidung und Logo (Ink),
Umzugskarton (Kraft), Umzugsdecke (Filz), Packpapier (Paper),
Spanngurt (Signal). Signal ist ausschliesslich Aktionsfarbe.
-------------------------------------------------------------------------- */
:root {
/* Flaechen — warmes Papier statt kaltem Weiss. Helle und dunkle
Abschnitte wechseln sich weiterhin ab; neu ist, dass die hellen warm
sind und die dunklen tief in Navy stehen. */
--paper: #FAF7F0; /* Grundfläche, warmes Creme */
--paper-alt: #F2EADC; /* Ebene 2: Informationsflaechen, minimal tiefer */
--surface: #FFFDF9; /* Karten, fast weiss */
/* Navy traegt die dunklen Abschnitte und zugleich die Schrift. */
--ink: #10233A; /* Firmen-Navy, Überschriften, dunkle Flaechen */
--ink-soft: #4B5768; /* Fließtext */
--ink-faint: #616976; /* Meta, Captions */
--night: #0C1B2E; /* tiefstes Navy: Hero, Fusszeile */
--night-alt: #13273D; /* dunkle Flaeche eine Spur heller */
/* Akzente — Sand loest das Spanngurt-Orange ab. Auf dunklem Grund und als
Knopffuellung steht der helle Ton, als Schrift auf Creme der tiefe:
der helle Sand waere dort nicht lesbar. */
--kraft: #A9885C; /* warme Sekundärfarbe, Holz */
--felt: #8A8378; /* warmes Grau — sekundaere Struktur */
--signal: #8A6229; /* Sand tief — Schrift und Zeichen auf Creme */
--signal-dark: #6F4E1F;
--amber: #D9B77F; /* Sand hell — auf Navy und als Knopffuellung */
--amber-dark: #C9A469;
/* Linien — warm, passend zum Papier */
--line: #E7E0D2;
--line-strong: #D3C9B6;
/* Mineralweiss — nur fuer den Phase-2-Kopf (Header, Hero, Vertrauensleiste).
Dort steht die Referenz auf einem neutralen bis leicht kuehlen Grund,
nicht auf Creme. Der Rest der Seite bleibt warm. */
--mineral: #F5F6F7; /* Hero-Grund */
--mineral-alt: #EFF1F2; /* Vertrauensleiste unter dem Hero */
--mineral-line: #DFE3E6; /* Trennlinien auf Mineralgrund */
--card: #FFFFFF; /* Vertrauenskarte, nahezu weiss */
/* Zustände */
--ok: #3F6B4A; /* enthalten */
--off: #96908A; /* nicht enthalten */
--error: #B3402A; /* Formularfehler — bleibt rot, Signal ist jetzt Sand */
--error-dark: #93321F;
/* Typografie */
/* Die Ueberschriften stehen jetzt in einer Serife: sie traegt den ruhigen,
handwerklichen Ton. Fliesstext bleibt Grotesk, Daten bleiben Mono. */
--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "Archivo", system-ui, sans-serif;
--font-data: "IBM Plex Mono", ui-monospace, monospace;
/* Nur fuer den neuen Hero-Block (Phase 2, Paket 1 Nachtrag): eine
condensed Groteske fuer die grosse Headline, eine Handschrift als
einzige Ausnahme im Skyline-Akzent. Keine Playfair Display hier. */
--font-hero: "Barlow Condensed", "Archivo", sans-serif;
--font-hand: "Caveat", cursive;
/* Typo-Skala — 1.25 auf Mobile, wächst über clamp */
--t-hero: clamp(2.1rem, 1.3rem + 3.6vw, 3.9rem);
--t-h2: clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem);
--t-h3: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
--t-body: 1.02rem;
--t-small: 0.9rem;
--t-label: 0.72rem;
/* Raster */
--wrap: 1140px;
--wrap-narrow: 760px;
--gutter: clamp(20px, 5vw, 40px);
--section: clamp(56px, 9vw, 104px);
/* Form */
--radius: 10px;
--radius-lg: 16px;
--radius-pill: 999px;
/* Kaum sichtbar. Die Karten sollen auf dem Papier liegen, nicht darueber
schweben — der Rand traegt die Abgrenzung, nicht der Schatten. */
--shadow-sm: 0 1px 2px rgba(16,35,58,.04), 0 2px 8px rgba(16,35,58,.05);
--shadow-md: 0 4px 18px rgba(16,35,58,.07);
--shadow-lg: 0 16px 44px rgba(16,35,58,.12);
--ease: cubic-bezier(.2,.7,.3,1);
--dur: .22s;
--tap: 48px; /* Mindestgröße Touch-Ziel */
/* --- Zeichen ---------------------------------------------------------
Ein Vokabular, zwei Praesentationsformen: nackt oder im Navy-Kreis.
Strichstaerke 1.5 gilt fuer JEDES Inline-SVG der Seite. Wer ein neues
Zeichen einsetzt, nimmt diese Werte und erfindet keine eigenen. */
--icon-sm: 18px; /* Pfeile in Knoepfen und Verweisen */
--icon: 22px; /* Standard: neben Text und in Listen */
--icon-lg: 24px; /* im Kreis und in Kartenkoepfen */
--icon-badge: 50px; /* Durchmesser des Navy-Kreises */
/* --- Kontextfarben --------------------------------------------------
Diese vier Tokens sagen, welche Schrift- und Linienfarbe an dieser
Stelle gilt. Voreinstellung ist der dunkle Grund. Jede helle Flaeche
kehrt sie weiter unten in EINEM Block wieder um. Wer eine neue
Komponente baut, benutzt --text / --text-soft / --rule / --accent und
muss dann nie wieder ueberlegen, ob sie hell oder dunkel steht. */
--text: var(--ink);
--text-soft: var(--ink-soft);
--text-faint: var(--ink-faint);
--rule: var(--line);
--rule-strong: var(--line-strong);
--accent: var(--signal);
--accent-dark: var(--signal-dark);
}
/* Dunkle Flaechen kehren die Kontextfarben um. Wer einen neuen dunklen
Abschnitt baut, traegt ihn hier ein — sonst steht dunkler Text auf
dunklem Grund. */
.site-header,
.hero,
.case,
.case-cta,
.trust__note,
.region,
.contact__card,
.site-footer,
.section--ink {
--text: var(--paper);
--text-soft: rgba(250,247,240,.76);
--text-faint: rgba(250,247,240,.52);
--rule: rgba(250,247,240,.16);
--rule-strong: rgba(250,247,240,.30);
--accent: var(--amber);
--accent-dark: var(--amber-dark);
}
/* --------------------------------------------------------------------------
2. BASIS
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Sprungziele nicht unter die klebende Kopfzeile schieben */
scroll-padding-top: clamp(88px, 7vw, 108px);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
body {
margin: 0;
background: var(--paper);
color: var(--text-soft);
font-family: var(--font-body);
font-size: var(--t-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
::selection { background: var(--amber); color: var(--ink); }
/* --------------------------------------------------------------------------
3. TYPOGRAFIE
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
margin: 0 0 .5em;
font-family: var(--font-display);
color: var(--text);
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.01em;
/* Deutsche Komposita sollen nicht zerreissen */
hyphens: auto;
overflow-wrap: break-word;
}
h1 { font-size: var(--t-hero); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
strong { color: var(--ink); font-weight: 600; }
/* Das Label ist ein Datenpunkt, kein Schmuck: es benennt den Abschnitt. */
.label {
display: inline-block;
margin: 0 0 14px;
font-family: var(--font-data);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
/* Kontextfarbe: auf Creme der tiefe Sand, auf Navy der helle. --kraft war
hier zu blass, die Marke ist Mono in 11,5 px und braucht 4,5:1. */
color: var(--accent);
}
.label--felt { color: var(--felt); }
.label--signal { color: var(--signal); }
.label--paper { color: rgba(250,247,240,.62); }
/* Kurzer Strich unter der Abschnittsmarke. Steht bewusst nicht in jedem
Abschnittskopf — er setzt einen Auftakt und verliert seine Wirkung, wenn
er ueberall auftaucht. Klasse ist da, wer ihn woanders braucht. */
.label__rule {
width: 46px; height: 1px; border: 0;
margin: 2px auto clamp(20px, 2.2vw, 28px);
background: var(--accent);
opacity: .6;
}
.section-head .label { margin-bottom: 10px; }
.label__rule--links { margin-left: 0; margin-right: 0; }
/* Fliesstext-Grösse für Einleitungen */
.lead {
font-size: clamp(1.06rem, 1rem + .35vw, 1.2rem);
line-height: 1.6;
}
/* Zahlen, Masse, Mengen — immer in Mono, tabellarisch */
.data {
font-family: var(--font-data);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* --------------------------------------------------------------------------
4. LAYOUT
-------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section); background: var(--paper); }
.section--alt { background: var(--paper-alt); }
.section--ink { background: var(--night); }
.section--ink h2, .section--ink h3 { color: var(--text); }
.section--ink strong { color: var(--text); }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
/* Abschnittsueberschriften stehen in der Serife und in grossem Grad. Dort
zerlegt die automatische Silbentrennung das Wortbild — sie bleibt den
Fliesstexten vorbehalten, die sie in deutschen Komposita wirklich
brauchen. */
.section-head h2 { hyphens: none; }
/* Die Abschnittsmarke ist ebenfalls ein . Ohne das :not() gewinnt diese
Regel gegen .label--signal — sie ist spezifischer — und die Marke stuende
in Fliesstextgrau statt in der Akzentfarbe. */
.section-head > p:not(.label) { color: var(--text-soft); }
/* Einleitung, deren Zeilenfall von Hand gesetzt ist (
). Die uebliche
Deckelung auf 62 Zeichen wuerde zusaetzlich umbrechen und den gesetzten
Fall zerlegen. Breiter, dafuer traegt hier der
die Gliederung. */
.section-head__lines { max-width: min(100%, 68rem); }
/* Hairline als Struktur, nicht als Deko */
.rule {
height: 1px;
background: var(--rule);
border: 0;
margin: 0;
}
/* --------------------------------------------------------------------------
5. BUTTONS
Nur EIN Signal-Button pro Bildschirm. Alles andere ist sekundär.
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: var(--tap);
padding: 13px 26px;
border: 1.5px solid transparent;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-size: .96rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: var(--icon-sm); height: var(--icon-sm); flex: none; }
.btn--primary {
background: var(--amber);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--amber-dark); }
.btn--secondary {
background: transparent;
color: var(--text);
border-color: var(--rule-strong);
}
.btn--secondary:hover { border-color: var(--text); background: rgba(16,35,58,.05); }
.btn--amber {
background: var(--amber);
color: var(--ink);
box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
.btn--amber:hover { background: var(--amber-dark); }
.btn--onink {
background: transparent;
color: var(--paper);
border-color: rgba(250,247,240,.34);
}
.btn--onink:hover { border-color: var(--paper); background: rgba(250,247,240,.09); }
/* Umriss in Signal — fuer den zweiten Weg, der gleichwertig ist, aber nicht
die Hauptaktion sein soll. */
.btn--outline {
background: transparent;
color: var(--accent);
border-color: var(--accent);
}
.btn--outline:hover {
background: rgba(168,123,60,.09);
color: var(--accent-dark);
border-color: var(--accent-dark);
}
.btn--lg { padding: 17px 34px; font-size: 1.02rem; }
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: .86rem; }
.btn--block { width: 100%; }
/* --------------------------------------------------------------------------
6. KARTEN
Pfeil oben rechts signalisiert Klickbarkeit ohne Button-Optik.
-------------------------------------------------------------------------- */
.card {
position: relative;
display: block;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
border-radius: var(--radius-lg);
padding: 28px 26px;
text-decoration: none;
transition: border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
a.card:hover {
border-color: var(--line-strong);
box-shadow: var(--shadow-md);
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: var(--t-small); margin: 0; max-width: 30ch; }
.card__arrow {
position: absolute;
top: 24px;
right: 24px;
width: 32px;
height: 32px;
border: 1px solid var(--line);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--kraft);
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.card:hover .card__arrow { background: var(--kraft); color: #fff; border-color: var(--kraft); }
.card__arrow svg { width: 15px; height: 15px; }
/* Karte mit vorangestelltem Datenpunkt (z. B. "2. OG · kein Aufzug") */
.card__meta {
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--felt);
margin-bottom: 10px;
}
.grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
/* --------------------------------------------------------------------------
7. SIGNATURE: DIE LISTE
Das ist der Kern der Marke. Enthalten / nicht enthalten,
nebeneinander, gleichwertig, in Ladelisten-Optik.
-------------------------------------------------------------------------- */
.ledger {
display: grid;
gap: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
}
@media (min-width: 720px) {
.ledger { grid-template-columns: 1fr 1fr; }
.ledger__col + .ledger__col { border-left: 1px solid var(--line); }
}
.ledger__col { padding: 26px 24px; }
.ledger__col + .ledger__col { border-top: 1px solid var(--line); }
@media (min-width: 720px) {
.ledger__col + .ledger__col { border-top: 0; }
}
.ledger__head {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-data);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
padding-bottom: 14px;
margin-bottom: 16px;
border-bottom: 1px solid var(--line);
}
.ledger__head--in { color: var(--ok); }
.ledger__head--out { color: var(--off); }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
display: grid;
grid-template-columns: 20px 1fr;
gap: 11px;
align-items: start;
padding: 9px 0;
font-size: var(--t-small);
line-height: 1.5;
}
.ledger li + li { border-top: 1px dotted var(--line); }
.ledger li::before {
font-family: var(--font-data);
font-size: .95rem;
line-height: 1.5;
}
.ledger__col--in li { color: var(--ink); }
.ledger__col--in li::before { content: "✓"; color: var(--ok); font-weight: 600; }
.ledger__col--out li { color: var(--ink-soft); }
.ledger__col--out li::before { content: "–"; color: var(--off); }
.ledger__note {
padding: 16px 24px;
background: var(--paper-alt);
border-top: 1px solid var(--line);
font-size: var(--t-small);
grid-column: 1 / -1;
}
/* --------------------------------------------------------------------------
8. FAKTOREN-LISTE (Rechenweg statt Preis)
-------------------------------------------------------------------------- */
.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.factors li {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: baseline;
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
.factors .factors__no {
font-family: var(--font-data);
font-size: var(--t-label);
color: var(--signal-dark);
letter-spacing: .08em;
}
.factors strong { display: block; margin-bottom: 2px; }
.factors span { font-size: var(--t-small); }
/* --------------------------------------------------------------------------
8b. PREIS — vier Karten statt nummerierter Liste
-------------------------------------------------------------------------- */
/* --- Preis: vierstufiger Ablauf mit Verbindern ---------------------------
Vier gleich hohe Karten in einer Reihe. Die Verbinder sind kein eigenes
Element im Markup, sondern ein ::after am Schritt, das in der
Rasterluecke sitzt — so bleibt die Liste eine saubere Aufzaehlung und
die Pfeile verschwinden beim Umbruch von selbst.
-------------------------------------------------------------------------- */
.reckon {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: clamp(20px, 2.4vw, 34px);
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
}
.reckon__step {
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card);
box-shadow: var(--shadow-sm);
padding: clamp(22px, 2.2vw, 30px);
}
/* Verbinder: liegt mittig in der Luecke zur naechsten Karte. */
.reckon__step::after {
content: "";
position: absolute; z-index: 2;
top: 50%; right: calc(-1 * (clamp(20px, 2.4vw, 34px) / 2) - 15px);
width: 30px; height: 30px;
transform: translateY(-50%);
border-radius: 50%;
background: var(--surface)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310233A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E")
center / 15px 15px no-repeat;
border: 1px solid var(--line);
}
.reckon__step:last-child::after { content: none; }
.reckon__num {
margin: 0 0 clamp(14px, 1.6vw, 18px);
max-width: none;
font-family: var(--font-data);
font-size: 1.28rem; font-weight: 600;
color: var(--accent);
}
/* Zeichen in heller Sandscheibe — die Vorlage zeigt sie so; im uebrigen
System stehen Zeichen nackt oder im Navy-Kreis. */
.reckon__icon {
display: inline-flex; align-items: center; justify-content: center;
align-self: flex-start;
width: 58px; height: 58px;
margin: 0 0 clamp(16px, 1.8vw, 22px);
border-radius: 50%;
background: var(--brand-sand);
color: var(--accent);
}
.reckon h3 {
margin: 0 0 10px;
font-size: clamp(1.12rem, .95rem + .4vw, 1.28rem);
line-height: 1.2;
hyphens: none;
color: var(--text);
}
.reckon__text {
margin: 0;
font-size: .95rem;
line-height: 1.6;
color: var(--text-soft);
max-width: none;
}
/* --- Preis: schriftliche Zusage ------------------------------------------
Warme Flaeche als Abschluss, derselbe Sandton wie der Festpreisblock im
Hero. Rechts steht die Handschrift als Markenakzent. Ein Foto fehlt hier
bewusst: die vorhandenen Querformate laufen bereits an anderer Stelle der
Startseite, die uebrigen sind hochkant und wuerden in dieser flachen
Flaeche zerschnitten. Sobald ein passendes Motiv vorliegt, kommt es
rechts neben die Handschrift.
-------------------------------------------------------------------------- */
.pledge {
display: grid;
/* Beide flexiblen Spalten teilen sich den Rest. Stuende hier fuer das
Motiv ein auto, setzte es seine Eigenbreite von 760px durch, quetschte
die Textspalte auf wenige Pixel, der Satz braeche Buchstabe fuer
Buchstabe um, und das Bild wuechse mit der Blockhoehe mit. Das Minimum
an der Textspalte sichert das zusaetzlich ab. */
grid-template-columns: auto minmax(310px, 1fr) minmax(0, 1.15fr) auto;
align-items: center;
gap: clamp(20px, 2.4vw, 34px);
margin: clamp(30px, 3.4vw, 48px) 0 0;
padding: clamp(28px, 3vw, 42px) clamp(28px, 3.2vw, 52px);
background: var(--brand-sand);
border-radius: var(--radius-card);
}
/* Motiv zwischen Zusage und Handschrift. Das Bild bringt seinen eigenen
hellen Grund mit; damit es nicht als Kasten in der Sandflaeche steht,
laeuft es links weich in sie hinein. */
.pledge__media {
position: relative;
align-self: stretch;
min-height: 132px;
border-radius: var(--radius);
overflow: hidden;
}
.pledge__media img {
display: block;
width: 100%; height: 100%;
object-fit: cover; object-position: center right;
}
.pledge__media::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(90deg,
var(--brand-sand) 0%,
rgba(242,234,220,.55) 14%,
rgba(242,234,220,0) 34%);
}
.pledge__icon { flex: none; color: var(--accent); }
.pledge__icon svg { width: 46px; height: 46px; }
.pledge__body h3 {
margin: 0 0 8px;
font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem);
line-height: 1.15;
hyphens: none;
color: var(--ink);
}
.pledge__body p {
margin: 0 0 clamp(18px, 2vw, 24px);
max-width: 56ch;
font-size: 1rem; line-height: 1.6;
color: var(--ink-soft);
}
.pledge__hand {
margin: 0; max-width: none; text-align: right;
font-family: var(--font-hand); font-weight: 600;
font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem);
line-height: 1.2; color: var(--signal-dark);
transform: rotate(-2deg);
}
@media (max-width: 1100px) {
.reckon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Beim zweispaltigen Umbruch zeigt nur noch der Verbinder innerhalb einer
Zeile nach rechts; der am Zeilenende faellt weg. */
.reckon__step:nth-child(2n)::after { content: none; }
}
@media (max-width: 1400px) {
/* Zu schmal fuer vier Spalten: Motiv und Handschrift ruecken unter die
Zusage. Beide brauchen die volle Breite — stuende die Handschrift in
Spalte eins, zoege sie die Spalte des Zeichens auf ihre Breite auf und
risse eine Luecke neben dem Schild. */
.pledge { grid-template-columns: auto minmax(0, 1fr); }
.pledge__media {
grid-column: 1 / -1;
min-height: 128px;
margin-top: clamp(18px, 2vw, 26px);
}
.pledge__media::after { background: none; }
.pledge__hand { grid-column: 1 / -1; margin-top: 14px; }
}
@media (max-width: 900px) {
.pledge__hand { text-align: left; }
}
@media (max-width: 720px) {
.reckon { grid-template-columns: minmax(0, 1fr); }
/* Einspaltig zeigt der Verbinder nach unten statt zur Seite. */
.reckon__step::after {
top: auto; bottom: calc(-1 * (clamp(20px, 2.4vw, 34px) / 2) - 15px);
right: 50%; transform: translateX(50%) rotate(90deg);
}
.pledge { grid-template-columns: minmax(0, 1fr); }
.pledge__icon { align-self: start; }
}
/* --------------------------------------------------------------------------
9. FORMULAR (Umzugscheck)
Grosse Touch-Ziele, Auswahl als Kacheln statt als Radio-Punkte.
-------------------------------------------------------------------------- */
.field { margin-bottom: 22px; }
.field > label,
.fieldset__legend {
display: block;
margin-bottom: 9px;
font-size: var(--t-small);
font-weight: 600;
color: var(--ink);
}
.field__hint {
margin: 6px 0 0;
font-size: .82rem;
color: var(--ink-faint);
}
.input, .select, .textarea {
width: 100%;
min-height: var(--tap);
padding: 12px 14px;
background: var(--surface);
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
font-family: inherit;
font-size: 16px; /* verhindert iOS-Zoom */
color: var(--ink);
transition: border-color var(--dur) var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
border-color: var(--ink);
outline: none;
box-shadow: 0 0 0 3px rgba(16,35,58,.12);
}
.input[aria-invalid="true"] { border-color: var(--error); }
/* Einwilligung: das Haekchen war 18 px gross und damit auf dem Handy kaum
zu treffen. Die ganze Zeile ist jetzt das Ziel. */
.field__consent {
display: flex; gap: 12px; align-items: flex-start;
min-height: var(--tap);
padding: 6px 0;
font-weight: 400; font-size: .86rem; line-height: 1.5;
cursor: pointer;
}
.field__consent input {
flex: none;
width: 24px; height: 24px;
margin: 0;
accent-color: var(--ink);
}
.field__consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.field__error {
display: flex;
gap: 6px;
margin: 7px 0 0;
font-size: .82rem;
color: var(--error-dark);
font-weight: 500;
}
/* Auswahl-Kacheln */
.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%,140px), 1fr)); }
.choice { position: relative; display: flex; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-height: var(--tap);
padding: 12px 14px;
background: var(--surface);
border: 1.5px solid var(--line-strong);
border-radius: var(--radius);
font-size: .93rem;
font-weight: 500;
color: var(--ink);
text-align: center;
cursor: pointer;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice input:hover + span { border-color: var(--felt); }
.choice input:checked + span {
border-color: var(--ink);
background: var(--ink);
color: var(--paper);
}
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Fortschritt */
.progress { margin-bottom: 28px; }
.progress__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 9px;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--felt);
}
.progress__track {
height: 4px;
background: var(--line);
border-radius: 2px;
overflow: hidden;
}
.progress__bar {
height: 100%;
background: var(--ink);
border-radius: 2px;
transition: width .35s var(--ease);
}
/* Vollständigkeit — immer mit Klartext, nie nur Prozent */
.completeness {
background: var(--surface);
border: 1px solid var(--line);
border-left: 3px solid var(--kraft);
border-radius: var(--radius);
padding: 18px 20px;
}
.completeness__value {
font-family: var(--font-data);
font-size: 1.5rem;
font-weight: 600;
color: var(--ink);
line-height: 1;
}
.completeness ul { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-small); }
.completeness li { margin-bottom: 3px; }
/* --------------------------------------------------------------------------
10. BILDER
Echte Einsatzfotos sind Beweis, nicht Dekoration.
-------------------------------------------------------------------------- */
.photo {
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--paper-alt);
}
.photo img { width: 100%; height: auto; object-fit: cover; }
.photo--portrait img { aspect-ratio: 4/5; }
.photo--landscape img { aspect-ratio: 3/2; }
.photo figcaption {
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink-faint);
padding: 10px 2px 0;
}
/* Badges für Orte */
.badges { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.badges li {
padding: 8px 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-pill);
font-size: .88rem;
font-weight: 500;
color: var(--ink);
}
/* --------------------------------------------------------------------------
11. HILFSKLASSEN
-------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--stack-gap, 18px); }
.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--ink); color: var(--paper);
padding: 12px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
/* ==========================================================================
12. SEITENBAUSTEINE
Struktur orientiert an der Referenz ruempelbruedergau.de:
Foto-Hero mit Glaspanel, konkrete Vertrauensleiste, Icon-Karten,
Bildergalerie mit Zähler, FAQ-Akkordeon, geteilter Kontaktblock.
========================================================================== */
/* --- Bild-Platzhalter -----------------------------------------------------
Markiert reservierte Flächen, bis die echten Fotos da sind.
Klasse entfernen, sobald ein Bild eingesetzt wurde.
-------------------------------------------------------------------------- */
.ph {
position: relative;
display: grid;
place-items: center;
padding: 24px;
text-align: center;
background:
repeating-linear-gradient(45deg, #F3EDE1 0 12px, #E9E1D0 12px 24px);
border: 2px dashed var(--line-strong);
border-radius: var(--radius-lg);
color: var(--ink-soft);
}
.ph__label {
font-family: var(--font-data);
font-size: .74rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--kraft);
margin-bottom: 6px;
}
.ph__what { font-size: .92rem; font-weight: 600; color: var(--ink); max-width: 30ch; }
.ph__spec {
font-family: var(--font-data);
font-size: .74rem;
color: var(--ink-faint);
margin-top: 8px;
}
.ph--wide { aspect-ratio: 16/9; }
.ph--land { aspect-ratio: 3/2; }
.ph--port { aspect-ratio: 4/5; }
.ph--square { aspect-ratio: 1/1; }
/* --- Header --------------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: rgba(12,27,46,.88);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--rule); box-shadow: 0 8px 26px rgba(6,14,25,.34); }
.site-header__inner {
display: flex; align-items: center; gap: clamp(18px, 2.6vw, 44px);
min-height: clamp(74px, 6.4vw, 100px);
}
.brand {
display: flex; align-items: center;
gap: clamp(14px, 1.5vw, 24px);
text-decoration: none; margin-right: auto;
}
.brand img {
height: clamp(36px, 3.1vw, 50px); width: auto;
padding-right: clamp(14px, 1.5vw, 24px);
border-right: 1px solid var(--rule);
}
.brand__name {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: clamp(1rem, 1.1vw, 1.22rem); color: var(--text);
line-height: 1.2; white-space: nowrap; letter-spacing: -0.01em;
}
/* Dritte Zeile: wo wir fahren. Steht im Kopf, damit es jeder sofort sieht,
ohne scrollen zu muessen. */
.brand__region {
display: flex; align-items: center; gap: 6px;
margin-top: 6px;
font-size: clamp(.72rem, .74vw, .82rem);
color: var(--text-faint); white-space: nowrap;
}
.brand__region svg { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
.nav__list { display: flex; gap: clamp(16px, 1.9vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav__list a {
text-decoration: none; font-size: clamp(.9rem, .95vw, 1rem); font-weight: 500; color: var(--text-soft);
padding: 6px 0; position: relative; white-space: nowrap;
transition: color var(--dur) var(--ease);
}
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--text); }
.nav__list a[aria-current="page"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 2px; background: var(--accent); border-radius: 2px;
}
.header__actions { display: flex; align-items: center; gap: 12px; }
.burger {
display: none; width: 46px; height: 46px; padding: 0;
background: transparent; border: 1.5px solid var(--rule-strong);
border-radius: var(--radius); cursor: pointer;
}
.burger span { display: block; width: 19px; height: 2px; margin: 4px auto; background: var(--text); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) {
.brand__region { display: none; }
}
@media (max-width: 1080px) {
.burger { display: block; }
.nav {
position: fixed; inset: 72px 0 auto 0;
background: var(--night-alt); border-bottom: 1px solid var(--rule);
box-shadow: 0 18px 40px rgba(6,14,25,.44);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.nav.is-open { opacity: 1; visibility: visible; transform: none; }
.nav__list { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
.nav__list a { display: block; padding: 15px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
.header__cta-text { display: none; }
}
.header__cta-short { display: none; }
/* Schmal: Kopfzeilen-Knopf und Logo auf volle Daumengroesse bringen. */
@media (max-width: 760px) {
.header__actions .btn--sm { min-height: 44px; }
.brand { min-height: 44px; }
}
/* Sehr schmal: der lange Knopftext drueckt sonst das Logo zusammen —
bei 360 px blieben davon 39 px uebrig. */
@media (max-width: 620px) {
.header__cta-long { display: none; }
.header__cta-short { display: inline; }
.brand img { flex: none; }
.header__actions .btn--sm { padding-inline: 16px; }
}
/* --- Hero mit Foto --------------------------------------------------------
Bildausschnitt liegt rechts, damit der Mitarbeiter mit Firmenlogo frei
neben der Karte steht. Der Verlauf dunkelt links stark ab und laeuft nach
rechts aus, statt das ganze Bild gleichmaessig zu ueberdecken.
-------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--night); }
/* picture darf keinen eigenen Kasten aufmachen, sonst verliert das Bild
seinen Bezug zu .hero__media. */
.hero__media picture { display: contents; }
/* Das Motiv sitzt in der Quelle mittig. Ohne Textkarte soll es wie im
Entwurf rechts stehen, damit die beiden frei neben dem Text bleiben und
nicht halb im dunklen Verlauf haengen. Der Rahmen wird dafuer breiter
als die Section gezogen; was rechts hinauslaeuft, schneidet .hero ab.
Die linke Kante liegt ohnehin unter der dichtesten Stelle des Verlaufs. */
.hero__media img, .hero__media .ph {
width: 100%; height: 100%;
object-fit: cover; object-position: center center;
border: 0; border-radius: 0;
}
@media (min-width: 1000px) {
/* Das Motiv nach rechts schieben, damit die vordere Gruppe frei neben dem
Text steht und die hintere unter der dichtesten Stelle des Verlaufs
verschwindet. Der Streifen, der links frei wird, zeigt den Grund von
.hero__media — dasselbe Navy wie der Verlauf, er faellt nicht auf.
Erst ab 1000 px: darunter steht neben dem Text kein Bild mehr frei,
und der Versatz wuerde nur eine leere Flaeche erzeugen. */
.hero__media img { transform: translateX(13%); }
}
.hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(97deg,
rgba(10,22,37,.95) 0%,
rgba(10,22,37,.92) 25%,
rgba(10,22,37,.74) 43%,
rgba(10,22,37,.38) 60%,
rgba(10,22,37,.16) 77%,
rgba(10,22,37,.12) 100%);
}
.hero__inner {
display: flex; align-items: center;
max-width: 1480px;
min-height: clamp(540px, 72vh, 820px);
padding-block: clamp(48px, 6vw, 80px);
}
.hero__panel {
width: 100%;
max-width: 620px;
}
@media (min-width: 1200px) { .hero__panel { max-width: min(660px, 46vw); } }
.hero__badge {
display: flex; align-items: flex-start; gap: clamp(12px, 1.2vw, 17px);
margin: 0 0 clamp(30px, 3.4vw, 46px);
font-size: clamp(.86rem, .9vw, 1rem); font-weight: 400;
color: rgba(250,247,240,.92);
}
.hero__badge svg {
width: var(--icon-lg); height: var(--icon-lg);
flex: none; color: var(--accent); margin-top: 0;
}
/* Der kurze Strich sitzt unter dem Text, nicht unter dem Zeichen — deshalb
haengt er am span und nicht am Absatz. */
.hero__badge span { display: block; }
.hero__badge span::after {
content: ""; display: block;
width: 48px; height: 1px; margin-top: 11px;
background: var(--amber); opacity: .55;
}
.hero h1 {
color: var(--paper);
font-size: clamp(2.1rem, 4.7vw, 4.1rem);
line-height: 1.05;
letter-spacing: -0.035em;
hyphens: none;
margin: 0;
}
.hero h1 span { display: block; }
/* Akzentwort in Ueberschriften. Kursiv nur dort, wo es ein Markensatz ist
— im Hero und in der Vertrauens-Section. Sonst aufrecht, nur in Gold. */
.is-accent { color: var(--accent); }
.hero h1 .is-accent { font-style: italic; }
/* Kurzer Akzentstrich unter der Headline */
.hero__rule {
width: clamp(84px, 7.6vw, 112px); height: 2px;
margin: clamp(24px, 2.6vw, 34px) 0 clamp(26px, 2.8vw, 38px);
background: var(--amber); border: 0; border-radius: 2px; opacity: .7;
}
.hero__sub {
color: rgba(250,247,240,.74);
font-size: clamp(.98rem, 1.02vw, 1.1rem);
line-height: 1.68;
max-width: 44ch;
margin: 0 0 clamp(22px, 2.4vw, 30px);
}
/* Regions- und Leistungszeile */
.hero__region {
display: flex; align-items: flex-start; gap: 12px;
margin: 0 0 clamp(26px, 2.8vw, 36px);
font-size: clamp(.95rem, 1vw, 1.06rem); line-height: 1.5;
}
.hero__region svg { width: var(--icon); height: var(--icon); flex: none; color: var(--text-faint); margin-top: 1px; }
.hero__region span { color: rgba(250,247,240,.72); }
.hero__region strong { display: block; color: var(--paper); font-weight: 600; }
.hero .cluster { gap: 14px; }
.hero .btn { min-height: 56px; }
/* Hero: Tablet und Mobile */
@media (max-width: 1199px) and (min-width: 721px) {
/* Karte schmaler halten, damit der Mitarbeiter rechts sichtbar bleibt */
.hero__panel { max-width: min(600px, 76vw); }
.hero__media img, .hero__media .ph { object-position: 84% center; }
.hero::after {
background: linear-gradient(100deg,
rgba(10,22,37,.94) 0%, rgba(10,22,37,.86) 38%,
rgba(10,22,37,.60) 58%, rgba(10,22,37,.28) 80%,
rgba(10,22,37,.20) 100%);
}
}
@media (max-width: 560px) {
/* Der Wortlaut steckt bereits im Logo — Textblock waere doppelt und
sprengt die Kopfzeile. */
.brand > span { display: none; }
.brand img { padding-right: 0; border-right: 0; }
.site-header__inner { gap: 12px; }
.header__actions { gap: 9px; }
}
@media (max-width: 720px) {
/* Das Hochkant-Motiv hat den Wald oben und das Team darunter. Der
Verlauf laesst nur das obere Drittel sichtbar — ohne Verschiebung
sieht man dort nur Tannen. Bild hoeher ziehen und nach oben
schieben, damit die Personen in den freien Streifen rutschen. */
.hero__media img, .hero__media .ph {
position: absolute;
inset: auto;
left: 50%;
/* Etwas Luft unter der Kopfzeile, sonst schneidet sie den hinteren Kopf an. */
top: 0;
width: 124%;
max-width: none;
height: 155%;
object-fit: cover;
object-position: 50% 54%;
transform: translate(-50%, -29%);
}
/* Foto-Fenster etwas laenger offen halten, damit Koerper und Gesichter
noch lesbar bleiben, bevor der Text darunter den Verlauf braucht. */
.hero::after {
background: linear-gradient(178deg,
rgba(10,22,37,.14) 0%,
rgba(10,22,37,.22) 26%,
rgba(10,22,37,.78) 44%,
rgba(10,22,37,.96) 58%,
rgba(10,22,37,.99) 100%);
}
.hero__inner {
align-items: flex-end;
min-height: min(700px, 92svh);
padding-block: 130px 40px;
}
.hero__panel { max-width: none; }
.hero__sub { max-width: none; }
.hero .cluster { flex-direction: column; align-items: stretch; }
.hero .cluster .btn { width: 100%; }
}
/* --- Waldsaum als Uebergangsmotiv ----------------------------------------
Der Schwarzwald ist ein Markenmotiv, kein Tapetenmuster. Deshalb liegt
die Silhouette NICHT flaechig hinter ganzen Abschnitten, sondern als
schmales Band am FUSS eines Abschnitts — als Uebergang in den naechsten.
Erlaubt sind zwei bis drei Stellen auf der ganzen Startseite; aktuell:
Leistungen → Vertrauen und Vertrauen → Angebotsweg.
Anwenden: `.wald` an die Section, als erstes Kind ein leeres
`
`.
Die Grafik ist eine WAAGERECHT nahtlose Kachel: jeder Baum ist
zusaetzlich eine Kachelbreite links und rechts gesetzt, deshalb ist an
der Wiederholung keine senkrechte Kante zu sehen. Sie ist in Navy
gefuellt — `currentColor` greift bei einem Hintergrundbild nicht.
-------------------------------------------------------------------------- */
.wald {
position: relative;
isolation: isolate;
overflow: hidden;
/* Bewusst OHNE Hintergrund: welche Ebene der Abschnitt traegt, entscheidet
seine eigene Klasse (.section, .section--alt). Sonst liesse sich der
Rhythmus der Hintergruende nicht mehr staffeln. */
}
.wald__media {
position: absolute; inset: 0; z-index: -2;
}
.wald__media::before {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: clamp(88px, 10vw, 148px);
background: url("img/tannen.svg") left bottom / auto 100% repeat-x;
opacity: .16;
pointer-events: none;
}
/* Der Inhalt muss ueber dem Band liegen. */
.wald > .wrap { position: relative; }
/* --- Vertrauensleiste unter dem Hero -------------------------------------
Vier Belege in einer Zeile, direkt unter dem Banner: die Bewertung in
Zahlen und drei Zusagen. Bewusst als eine durchgehende Karte und nicht
als vier einzelne — vier Kaesten nebeneinander waeren wieder
zusammengesetzte UI. Die feinen Striche gliedern, der Rand haelt zusammen.
Kein Google-Logo: die Wortmarke reicht, und ein farbiges Fremdlogo waere
der einzige bunte Fleck der ganzen Seite.
-------------------------------------------------------------------------- */
.proof { background: var(--paper); padding-block: clamp(28px, 3.4vw, 44px); }
.proof__bar {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* stretch, nicht center: sonst sind die Zellen unterschiedlich hoch und
die Trennstriche laufen nicht durch. Der Inhalt wird in der Zelle
zentriert, nicht die Zelle im Raster. */
align-items: stretch;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
/* Damit die Hover-Flaeche der Randfelder an der Rundung abschneidet und
nicht ueber die Ecke hinauslaeuft. */
overflow: hidden;
}
.proof__bar > li {
display: flex; align-items: center; gap: clamp(12px, 1.3vw, 18px);
padding: clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 28px);
font-size: clamp(.9rem, .92vw, 1rem);
line-height: 1.45;
color: var(--text);
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Hover: eine Spur waermer, das Zeichen wechselt nach Gold. Keine
Verschiebung, kein Schatten, kein Schein — die Leiste soll ruhig
bleiben. Beruehrungsgeraete lassen den Zustand aus, dort wuerde er
nach dem Tippen haengen bleiben. */
@media (hover: hover) {
.proof__bar > li:hover {
background: var(--paper);
/* Innen gesetzt, damit die Linie nichts verschiebt. */
box-shadow: inset 0 -2px 0 var(--accent);
}
.proof__bar > li > svg { transition: color var(--dur) var(--ease); }
.proof__bar > li:hover > svg { color: var(--accent); }
}
.proof__bar > li + li { border-left: 1px solid var(--rule); }
.proof__bar > li > svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; color: var(--ink); }
/* Die Bewertung traegt die Zahl, nicht ein Logo. */
.proof__rating { gap: clamp(14px, 1.5vw, 20px); }
.proof__score {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.9rem, 2.4vw, 2.5rem);
line-height: .95; letter-spacing: -0.02em;
color: var(--ink);
}
.proof__stars { display: flex; gap: 2px; margin: 0 0 4px; color: var(--amber); }
.proof__stars svg { width: 14px; height: 14px; }
.proof__label {
margin: 0;
font-family: var(--font-data);
font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase;
color: var(--text-faint);
}
/* Vier nebeneinander brauchen Platz. Darunter zwei mal zwei, ganz schmal
untereinander — die Striche wechseln dabei die Richtung. */
@media (max-width: 1000px) {
.proof__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proof__bar > li + li { border-left: 0; }
.proof__bar > li:nth-child(even) { border-left: 1px solid var(--rule); }
.proof__bar > li:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 600px) {
.proof__bar { grid-template-columns: minmax(0, 1fr); }
.proof__bar > li:nth-child(even) { border-left: 0; }
.proof__bar > li + li { border-top: 1px solid var(--rule); }
}
/* --- Vertrauens-Section (hell, mit Waldsaum) ------------------------------
Zentrierter Kopf, darunter drei helle Karten mit Foto am Fuss, darunter
ein dunkler Balken mit Hinweis und Knopf. Den Hintergrund bringt `.wald`
mit.
ACHTUNG: Diese Section ist hell. Sie steht deshalb NICHT im Umkehr-Block
der Kontextfarben. Nur der Hinweisbalken ist dunkel und steht dort.
-------------------------------------------------------------------------- */
.trust {
padding-block: clamp(52px, 6.2vw, 88px);
background: var(--paper);
color: var(--text-soft);
text-align: center;
}
.trust__inner { position: relative; }
/* Kopf des Abschnitts: Zeichen, Marke, Ueberschrift. Der Schlusspunkt der
Ueberschrift steht in Amber — dieselbe Setzung wie im Hero. */
.trust__mark {
display: block;
margin: 0 auto clamp(14px, 1.6vw, 20px);
color: var(--accent);
}
.trust__mark svg {
width: clamp(52px, 4.6vw, 68px);
height: auto;
margin: 0 auto;
}
.trust .label--amber {
color: var(--accent);
margin-bottom: clamp(8px, 1vw, 12px);
}
.trust h2 {
color: var(--text);
font-size: clamp(1.75rem, 3.2vw, 2.85rem);
line-height: 1.14;
letter-spacing: -0.03em;
hyphens: none;
margin: 0 0 clamp(30px, 3.8vw, 54px);
}
.trust h2 .is-accent { font-style: italic; }
/* Drei Karten, Foto buendig am Fuss. Wie bei den Leistungen sorgt flex:1
im Textteil dafuer, dass die Fotos aller drei auf einer Linie stehen. */
.trust__cols {
list-style: none; margin: 0 0 clamp(24px, 2.8vw, 36px); padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(16px, 1.8vw, 24px);
align-items: stretch;
}
.trust__cols li {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.trust__card {
flex: 1;
padding: clamp(26px, 2.8vw, 34px) clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px);
text-align: left;
}
.trust__head { display: flex; align-items: center; gap: clamp(14px, 1.5vw, 18px); }
/* Kurzer Strich unter der Ueberschrift, buendig mit ihr — nicht unter dem
Zeichen. Deshalb haengt er nicht am Kopf, sondern steht fuer sich und
wird links um Zeichenbreite plus Abstand eingerueckt. */
.trust__rule {
width: 42px; height: 2px; border: 0;
margin: clamp(14px, 1.6vw, 18px) 0 clamp(16px, 1.8vw, 22px);
margin-left: calc(var(--icon-badge) + clamp(14px, 1.5vw, 18px));
background: var(--accent);
}
/* Zeichen im dunklen Kreis — der Kreis traegt den Kontrast, das Zeichen
steht darin in Sand. */
.trust__icon { margin: 0; }
.trust__cols h3 {
color: var(--text);
font-size: clamp(1.12rem, 1.3vw, 1.34rem);
letter-spacing: -0.01em;
hyphens: none;
margin: 0;
}
.trust__cols p {
margin: 0; max-width: 34ch;
font-size: .93rem; line-height: 1.62;
color: var(--text-soft);
}
/* Foto am Fuss der Karte */
.trust__shot {
position: relative; aspect-ratio: 16 / 11;
margin: 0 clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px);
border-radius: 12px; overflow: hidden;
}
.trust__shot img,
.trust__shot .ph {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0; border-radius: 0;
}
.trust__shot img { object-fit: cover; object-position: center; }
.trust__shot .ph { font-size: .7rem; border-width: 0; border-top: 2px dashed var(--line-strong); }
/* Hinweisbalken — traegt jetzt auch den Knopf. Als einzige dunkle Flaeche
in einer hellen Section steht er im Umkehr-Block der Kontextfarben. */
.trust__note {
display: flex; align-items: center; gap: clamp(16px, 2vw, 28px);
margin: 0;
padding: clamp(16px, 1.8vw, 24px) clamp(20px, 2.2vw, 28px);
background: var(--ink);
border-radius: var(--radius-lg);
text-align: left;
}
.trust__note > svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; color: var(--amber); }
.trust__note span {
flex: 1;
padding-left: clamp(16px, 2vw, 28px);
border-left: 1px solid var(--rule);
font-size: .92rem; line-height: 1.5; color: var(--text-soft);
max-width: 56ch;
}
.trust__note strong {
display: block; margin-bottom: 5px;
font-size: 1.02rem; font-weight: 600; color: var(--text);
}
.trust__note .btn { flex: none; }
@media (max-width: 980px) {
.trust__cols { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
/* Text und Knopf nebeneinander sprengen hier die Breite. */
.trust__note { flex-direction: column; text-align: center; gap: 18px; }
.trust__note span { max-width: none; padding-left: 0; border-left: 0; }
.trust__note .btn { width: 100%; }
}
/* --- Team-Section (zweigeteilt: Text links, Foto rechts) -------------------
Die alte Vollbild-Ueberlagerung hat den Text nach unten links geschoben
und dasselbe Motiv wie der Hero benutzt. Jetzt steht der Text auf Navy,
das Foto daneben als eigene Flaeche.
-------------------------------------------------------------------------- */
/* --- Team ----------------------------------------------------------------
Heller Abschnitt nach Referenzentwurf: Foto links, Text rechts, darunter
eine Faktenleiste ueber die volle Achse. Farben, Radien, Schrift und
Zeichen stammen aus dem Hero. Der Abschnitt stand frueher auf Navy und
war deshalb im Umkehr-Block der Kontextfarben eingetragen — dort ist er
jetzt heraus, sonst stuende heller Text auf hellem Grund.
-------------------------------------------------------------------------- */
.team {
position: relative;
background: var(--brand-surface);
padding-block: clamp(56px, 7vw, 104px);
}
.team__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 4vw, 72px);
align-items: center;
}
.team__media {
position: relative;
border-radius: var(--radius-card);
overflow: hidden;
aspect-ratio: 4 / 3;
}
.team__media picture { display: contents; }
.team__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: 52% 20%;
}
.team__text-col { width: 100%; }
/* Marke mit auslaufender Linie, wie im Entwurf */
.team__eyebrow {
display: flex; align-items: center; gap: 18px;
margin: 0 0 clamp(16px, 1.8vw, 22px);
max-width: none;
font-family: var(--font-data);
font-size: var(--t-label);
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--brand-gold);
}
.team__eyebrow-rule {
flex: 1 1 auto;
max-width: 170px;
height: 1px;
background: var(--brand-gold);
opacity: .55;
}
.team h2 {
color: var(--brand-navy);
font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.75rem);
line-height: 1.02;
margin: 0 0 clamp(20px, 2.2vw, 28px);
}
.team h2 span { display: block; }
.team__text + .team__text { margin-top: 1.1em; }
.team__text {
margin: 0;
max-width: 58ch;
font-size: 1rem;
line-height: 1.7;
color: var(--brand-muted);
}
/* Unterschrift im cremefarbenen Feld, Bildunterschrift daneben statt
darunter — das warme Feld ist derselbe Akzent wie der Festpreisblock
im Hero und bleibt die einzige creme Flaeche hier. */
.team__sign {
display: flex; align-items: center; gap: 22px;
margin: clamp(26px, 3vw, 38px) 0 0;
}
.team__sign img {
display: block;
width: 232px; height: auto;
border-radius: 10px;
background: var(--brand-sand);
padding: 6px 10px;
}
.team__sign figcaption {
margin: 0;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* Faktenleiste unter dem Block */
.team__facts {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: clamp(38px, 4vw, 58px) 0 0;
padding: clamp(20px, 2.2vw, 28px) clamp(14px, 1.6vw, 22px);
background: var(--paper);
border-radius: var(--radius-card);
}
.team__facts li {
display: flex; align-items: center; gap: 18px;
padding-inline: clamp(14px, 2vw, 30px);
}
.team__facts li + li { border-left: 1px solid var(--line-strong); }
.team__fact-icon { flex: none; color: var(--brand-gold); }
.team__fact-icon svg { width: 38px; height: 38px; }
.team__fact-title {
margin: 0 0 3px;
font-size: 1.02rem; font-weight: 700; color: var(--brand-navy);
}
.team__fact-text { margin: 0; font-size: .92rem; color: var(--ink-faint); }
@media (max-width: 900px) {
.team__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.team__media { aspect-ratio: 16 / 11; }
.team h2 { font-size: clamp(1.85rem, 6.4vw, 2.4rem); }
.team__sign { flex-wrap: wrap; gap: 14px; }
.team__facts { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
.team__facts li + li {
border-left: 0; border-top: 1px solid var(--line-strong);
padding-top: 18px;
}
}
/* --- Icon in Karte -------------------------------------------------------- */
/* --- Zeichen im Navy-Kreis -----------------------------------------------
Die zweite und einzige weitere Praesentationsform neben dem nackten
Zeichen. Frueher gab es hier vier Behaelter nebeneinander: ein
cremefarbenes Quadrat, zwei goldgetoente Kreise und einen Navy-Kreis.
Wer ein neues Vertrauenszeichen setzt, benutzt diese Klassen mit.
-------------------------------------------------------------------------- */
.card__icon,
.trust__icon,
.offer__aside-icon {
display: grid; place-items: center;
width: var(--icon-badge); height: var(--icon-badge);
flex: none;
background: var(--ink);
border-radius: 50%;
color: var(--amber);
}
.card__icon svg,
.trust__icon svg,
.offer__aside-icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.card__icon { margin-bottom: 16px; }
/* --- Einsaetze: drei Fallkarten -------------------------------------------
Foto mit dunklem Verlauf, Text darauf. Die Karte ist damit eine dunkle
Flaeche und steht deshalb im Umkehr-Block der Kontextfarben.
-------------------------------------------------------------------------- */
.cases {
display: grid;
gap: clamp(14px, 1.6vw, 20px);
grid-template-columns: minmax(0, 1fr);
}
.case {
position: relative;
isolation: isolate;
display: flex;
/* Kein festes Seitenverhaeltnis: mit aspect-ratio bekam die Karte eine
feste Hoehe und der Text lief unten heraus. Die Mindesthoehe haelt das
Format breit, im Raster ziehen sich alle drei auf dieselbe Hoehe. */
min-height: clamp(210px, 17vw, 262px);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.case img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
/* Der Verlauf laeuft waagerecht: links deckt er zu, damit der Text traegt,
rechts laeuft er aus und gibt das Foto frei. */
.case::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(94deg,
rgba(10,22,37,.94) 0%,
rgba(10,22,37,.90) 30%,
rgba(10,22,37,.62) 46%,
rgba(10,22,37,.18) 62%,
rgba(10,22,37,.10) 100%);
}
.case__body {
/* Text steht oben links, das Foto bleibt rechts sichtbar. */
display: flex; flex-direction: column; justify-content: center;
padding: clamp(24px, 2.6vw, 34px) clamp(22px, 2.4vw, 34px);
width: 100%;
max-width: 44%;
}
/* Die Einordnung steht als Marke im Textfluss, nicht als Pille. Dieselbe
Form wie .svc__cat und .label auf der ganzen Seite — die Seite kennt fuer
solche Einordnungen keinen eigenen Behaelter. Nebenbei loest das die
Kollision: als absolut gesetzte Pille stiess sie bei schmalen Karten
gegen die Ueberschrift. */
.case__tag {
display: inline-flex; align-items: center;
align-self: flex-start;
margin: 0 0 clamp(12px, 1.4vw, 16px);
padding: 7px 15px;
border: 1px solid var(--accent);
border-radius: var(--radius-pill);
font-family: var(--font-data);
font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
color: var(--accent);
}
.case h3 {
margin: 0 0 10px;
font-size: clamp(1.3rem, 1.55vw, 1.72rem);
line-height: 1.25; letter-spacing: -0.01em; hyphens: none;
color: var(--text);
}
.case__text {
margin: 0; max-width: 38ch;
font-size: .92rem; line-height: 1.55;
color: var(--text-soft);
}
.case__more { margin: clamp(14px, 1.6vw, 18px) 0 0; max-width: none; }
.case__more a {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap);
font-size: .88rem; font-weight: 600;
color: var(--accent); text-decoration: none;
}
.case__more svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.case__more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.case__more a:hover svg { transform: translateX(3px); }
/* Verweis unter den Karten */
.cases__more { margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: none; text-align: center; }
.cases__more a {
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap);
font-size: .95rem; font-weight: 600;
color: var(--text); text-decoration: none;
}
.cases__more svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.cases__more a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cases__more a:hover svg { transform: translateX(3px); }
@media (max-width: 820px) {
.case__body { max-width: 58%; }
}
@media (max-width: 620px) {
.case { min-height: 240px; }
/* Auf schmalen Breiten reicht die halbe Karte fuer den Text nicht mehr;
dort deckt der Verlauf senkrecht zu. */
.case__body { max-width: none; }
.case::after {
background: linear-gradient(178deg,
rgba(10,22,37,.42) 0%,
rgba(10,22,37,.78) 45%,
rgba(10,22,37,.92) 100%);
}
}
/* --- Aufnahmen-Raster ------------------------------------------------------
Benutzt auf der Uebersichtsseite einsaetze.html.
-------------------------------------------------------------------------- */
.shots {
display: grid;
gap: clamp(12px, 1.4vw, 18px);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.shots figure { margin: 0; }
.shots img {
width: 100%; aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
}
.shots figcaption {
margin-top: 8px;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .06em; text-transform: uppercase;
color: var(--text-faint);
}
.shots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
.shots--pair { grid-template-columns: minmax(0, 1fr); }
}
/* --- Einsatz-Detailseite ---------------------------------------------------
Eigene Seite je Einsatz. Kopf zweigeteilt, darunter Auftrag, Aufnahmen,
Herausforderung, Ablauf, Ergebnis, Bewertung, Fragen, Abschluss.
-------------------------------------------------------------------------- */
/* Kopf: Text links, Foto rechts bis an den Rand. */
.case-hero { background: var(--paper); overflow: hidden; }
.case-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px);
align-items: center;
padding-block: clamp(36px, 5vw, 72px);
}
.case-hero__crumbs {
margin: 0 0 clamp(8px, 1.2vw, 14px); max-width: none;
font-family: var(--font-data);
font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase;
color: var(--accent);
}
/* Als reiner Textverweis war die Brotkrume 15 px hoch und auf dem Handy
kaum zu treffen. Der Innenabstand vergroessert nur die Trefferflaeche. */
.case-hero__crumbs a { display: inline-block; padding-block: 13px; color: inherit; text-decoration: none; }
.case-hero__crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.case-hero__crumbs span { margin: 0 6px; opacity: .6; }
.case-hero h1 {
margin: 0 0 clamp(16px, 2vw, 22px);
font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
line-height: 1.1; hyphens: none;
}
.case-hero__lead {
margin: 0 0 clamp(24px, 3vw, 34px);
font-size: clamp(1rem, .95rem + .3vw, 1.1rem); line-height: 1.65;
color: var(--text-soft); max-width: 46ch;
}
/* Vier Eckdaten als kleine Kacheln */
.case-hero__facts {
list-style: none; margin: 0 0 clamp(24px, 3vw, 34px); padding: 0;
display: grid; gap: clamp(10px, 1.2vw, 14px);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-hero__facts li {
display: flex; flex-direction: column; gap: 10px;
padding: clamp(14px, 1.6vw, 18px) clamp(12px, 1.4vw, 16px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
font-size: .82rem; line-height: 1.35; color: var(--text-soft);
}
.case-hero__facts strong { display: block; color: var(--text); font-weight: 600; }
.case-hero__icon { color: var(--accent); }
.case-hero__icon svg { width: var(--icon); height: var(--icon); }
.case-hero__media { border-radius: var(--radius-lg); overflow: hidden; }
/* Die Aufnahme ist hochkant, das Fenster quer. Der Ausschnitt zeigt damit
nur ein Band aus der Bildmitte — dort stehen die Kartons. */
.case-hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }
/* Fuenf Aufnahmen nebeneinander */
.shots--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Text und Bild nebeneinander */
.case-split {
display: grid;
/* Die Textspalte ist bewusst die breitere: die drei Zustands-Pillen der
Herausforderung brauchen zusammen rund 460 px und sollen nebeneinander
stehen. Wer den Wortlaut verlaengert, muss das nachmessen. */
grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
gap: clamp(20px, 2.6vw, 36px);
align-items: center;
}
.case-split__text h2 {
margin: 0 0 clamp(18px, 2.2vw, 26px);
font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
hyphens: none;
}
/* Die Karte traegt nur noch den Inhalt, nicht mehr die Ueberschrift. */
.challenge__card {
padding: clamp(22px, 2.6vw, 34px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.challenge__card p { font-size: .96rem; line-height: 1.68; margin: 0; }
/* Die Ausgangslage als Umriss-Pillen. */
.challenge__tags {
list-style: none; margin: 0 0 clamp(18px, 2.2vw, 26px); padding: 0;
display: flex; flex-wrap: wrap; gap: 9px;
}
.challenge__tags li {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
font-size: .84rem; font-weight: 500; color: var(--text);
white-space: nowrap;
}
.challenge__tags svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); flex: none; }
.challenge__rule {
width: 34px; height: 1px; border: 0;
margin: clamp(16px, 2vw, 22px) 0;
background: var(--accent); opacity: .55;
}
/* Drei Belege am Fuss, durch feine Striche getrennt. */
.challenge__points {
list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.challenge__points li {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 0 clamp(8px, 1.2vw, 14px);
text-align: center;
font-size: .86rem; font-weight: 600; line-height: 1.35; color: var(--text);
}
.challenge__points li + li { border-left: 1px solid var(--line); }
/* Getoenter Kreis statt Navy: der Navy-Kreis waere an dieser Stelle und in
dieser Groesse zu schwer fuer eine helle Karte. Das Zeichen selbst bleibt
unveraendert — Umriss, 1.5, --icon. */
.challenge__icon {
display: grid; place-items: center;
width: 42px; height: 42px;
background: rgba(168,123,60,.12);
border-radius: 50%;
color: var(--accent);
}
.challenge__icon svg { width: var(--icon); height: var(--icon); }
/* Foto mit schwebendem Schild */
.case-split__media { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.case-split__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.case-split__badge {
position: absolute; right: clamp(14px, 1.8vw, 22px); bottom: clamp(14px, 1.8vw, 22px);
display: inline-flex; align-items: center; gap: 10px;
padding: 11px 18px;
background: var(--surface);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-md);
font-size: .88rem; font-weight: 600; color: var(--text);
}
.case-split__badge svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); flex: none; }
/* Fuenf Schritte */
.case-steps {
list-style: none; margin: 0; padding: 0;
display: grid; gap: clamp(14px, 1.6vw, 20px);
grid-template-columns: repeat(5, minmax(0, 1fr));
counter-reset: schritt;
}
.case-steps li {
padding: clamp(20px, 2.2vw, 26px) clamp(16px, 1.8vw, 20px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
text-align: center;
}
.case-steps__icon {
display: grid; place-items: center;
width: var(--icon-badge); height: var(--icon-badge);
margin: 0 auto clamp(12px, 1.4vw, 16px);
background: var(--ink); border-radius: 50%; color: var(--amber);
}
.case-steps__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.case-steps__no {
margin: 0 0 6px;
font-family: var(--font-data); font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; color: var(--accent);
}
.case-steps h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.3; hyphens: none; }
.case-steps p { margin: 0; max-width: none; font-size: .84rem; line-height: 1.55; color: var(--text-soft); }
/* Ergebnis: vier Belege als Kacheln */
.case-result {
list-style: none; margin: 0 0 clamp(20px, 2.4vw, 28px); padding: 0;
display: grid; gap: clamp(12px, 1.4vw, 18px);
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.case-result li {
display: flex; align-items: center; gap: 12px;
padding: clamp(16px, 1.8vw, 22px) clamp(14px, 1.6vw, 20px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
font-size: .9rem; line-height: 1.35; color: var(--text);
}
.case-result svg { width: var(--icon); height: var(--icon); color: var(--accent); flex: none; }
/* Bewertung als eine Karte: Zahl links, Stimme rechts, feiner Strich
dazwischen. */
.result-review {
display: grid;
grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
align-items: center;
gap: clamp(24px, 3.2vw, 48px);
padding: clamp(26px, 3.2vw, 44px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.result-review__score { text-align: center; }
.result-review__score .reviews__score { font-size: clamp(3rem, 4.4vw, 4.2rem); }
.result-review__score .reviews__stars { justify-content: center; }
.result-review__score .reviews__source { margin-top: 12px; }
.result-review__quote {
margin: 0;
padding-left: clamp(24px, 3.2vw, 48px);
border-left: 1px solid var(--line);
}
/* Das Anfuehrungszeichen ist Zierde und traegt keine Aussage — deshalb
gedaempft und aria-hidden im Markup. */
.result-review__mark {
margin: 0 0 4px; max-width: none;
font-family: var(--font-display); font-weight: 700;
font-size: 3.2rem; line-height: .7;
color: var(--accent); opacity: .5;
user-select: none;
}
.result-review blockquote {
margin: 0 0 clamp(16px, 2vw, 22px);
font-family: var(--font-display);
font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem);
line-height: 1.55; color: var(--text);
max-width: 54ch;
}
.result-review figcaption {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px;
font-size: .88rem; color: var(--text-faint);
}
.result-review figcaption strong { color: var(--text); font-weight: 600; }
.result-review__source { display: inline-flex; align-items: center; gap: 8px; }
.result-review__source svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); }
/* Verwandte Leistungen als Umriss-Pillen */
.chips {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center;
gap: clamp(10px, 1.2vw, 14px);
}
.chips a {
display: inline-flex; align-items: center; gap: 8px;
min-height: var(--tap);
padding: 10px 20px;
border: 1px solid var(--line-strong);
border-radius: var(--radius-pill);
font-size: .9rem; font-weight: 600;
color: var(--text); text-decoration: none;
transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chips svg { width: var(--icon-sm); height: var(--icon-sm); color: var(--accent); }
.chips a:hover { border-color: var(--ink); background: var(--paper-alt); }
/* Abschlussband */
.case-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(20px, 3vw, 44px);
align-items: center;
padding: clamp(26px, 3.4vw, 44px);
background: var(--ink);
border-radius: var(--radius-lg);
}
.case-cta h2 { margin: 0 0 10px; font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); hyphens: none; }
.case-cta p { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--text-soft); }
.case-cta__actions { display: grid; gap: 12px; }
.case-page__back--end { margin-top: clamp(24px, 3vw, 36px); text-align: center; }
/* Rueckweg oben auf den Unterseiten */
.case-page__back { margin: 0 0 clamp(24px, 3vw, 36px); max-width: none; }
.case-page__back a {
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap);
font-size: .92rem; font-weight: 600;
color: var(--text-soft); text-decoration: none;
}
.case-page__back svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.case-page__back a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
.case-page__back a:hover svg { transform: translateX(-3px); }
.case-page h1 {
font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem);
hyphens: none;
margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.case-page__lead {
margin: 0 0 clamp(28px, 3.2vw, 40px);
font-size: clamp(1.02rem, .96rem + .35vw, 1.16rem);
line-height: 1.6; color: var(--text-soft);
}
.case-page__shot { margin: 0 0 clamp(28px, 3.2vw, 40px); }
.case-page__shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); }
.case-page__facts {
display: grid; gap: 0;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 0 0 clamp(28px, 3.2vw, 40px);
border-top: 1px solid var(--rule);
}
.case-page__facts > div { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.case-page__facts > div:nth-child(odd) { padding-right: 20px; }
.case-page__facts dt {
font-family: var(--font-data); font-size: var(--t-label); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
margin-bottom: 5px;
}
.case-page__facts dd { margin: 0; font-size: .98rem; color: var(--text); }
.case-page__text p { font-size: 1rem; line-height: 1.7; }
.case-page__cta { margin: clamp(30px, 3.6vw, 44px) 0 0; max-width: none; text-align: center; }
@media (max-width: 1000px) {
.case-hero__inner { grid-template-columns: minmax(0, 1fr); }
.case-hero__media { order: -1; }
.case-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.shots--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-cta { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.case-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.result-review { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px); }
.result-review__quote { padding-left: 0; padding-top: clamp(20px, 3vw, 28px); border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
.shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-split { grid-template-columns: minmax(0, 1fr); }
.challenge__points { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.challenge__points li { flex-direction: row; text-align: left; padding: 0; }
.challenge__points li + li { border-left: 0; }
.challenge__points br { display: none; }
.case-split__media { order: -1; }
.case-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-page__cta .btn, .case-cta__actions .btn { width: 100%; }
.case-hero .cluster { flex-direction: column; align-items: stretch; }
.case-hero .cluster .btn { width: 100%; }
}
@media (max-width: 460px) {
.case-result { grid-template-columns: minmax(0, 1fr); }
.shots, .shots--five { grid-template-columns: minmax(0, 1fr); }
.case-steps { grid-template-columns: minmax(0, 1fr); }
.case-page__facts { grid-template-columns: minmax(0, 1fr); }
.case-page__facts > div:nth-child(odd) { padding-right: 0; }
}
/* --- Angebotsweg: Fotos senden oder besichtigen lassen --------------------
Zwei Wege zum selben Ziel in einer Karte. Links der Ablauf in drei
Schritten, rechts das Bild — darin liegt das Angebot fuer den, dem eine
Besichtigung lieber ist als Fotos zu schicken.
-------------------------------------------------------------------------- */
.offer {
display: grid;
grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.offer__body {
display: flex; flex-direction: column;
padding: clamp(28px, 3.4vw, 54px);
}
/* Die Schrittnummern stehen in Mono — sie sind Daten, keine Zierde. */
.offer__steps { list-style: none; margin: 0 0 clamp(26px, 3vw, 38px); padding: 0; }
.offer__steps li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0 clamp(14px, 1.6vw, 22px);
padding: clamp(18px, 2.1vw, 26px) 0;
}
.offer__steps li:first-child { padding-top: 0; }
.offer__steps li + li { border-top: 1px solid var(--line); }
.offer__num {
font-family: var(--font-data); font-weight: 600;
font-size: 1.04rem; line-height: 1.35;
color: var(--signal);
font-variant-numeric: tabular-nums;
}
.offer__steps h3 { margin: 0 0 7px; font-size: 1.08rem; line-height: 1.35; hyphens: none; }
.offer__steps p { margin: 0; font-size: var(--t-small); color: var(--ink-soft); max-width: 42ch; }
.offer__cta { margin: auto 0 0; }
/* Bildseite */
.offer__media { position: relative; min-height: 340px; }
.offer__media img, .offer__media .ph {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
/* Zweigeteilte Montage: links das Abfotografieren, rechts die
Besichtigung. Rechtsbuendig ausgerichtet, damit die Diagonale wie in
der Vorlage bei rund 40 Prozent der Bildflaeche steht und die
Besichtigung den groesseren Teil traegt. */
object-position: right center;
border-radius: 0; border-width: 0;
}
/* Das Nebenangebot liegt auf dem Bild, damit beide Wege gleichzeitig
sichtbar sind — nicht einer unter dem anderen. */
.offer__aside {
position: absolute;
left: auto;
right: clamp(14px, 1.8vw, 26px);
bottom: clamp(14px, 1.8vw, 26px);
/* Rund ein Drittel der Bildbreite: die Karte lag vorher links und nahm
die halbe Flaeche ein, damit verdeckte sie die Komposition. */
width: clamp(250px, 35%, 318px);
max-width: none;
padding: clamp(16px, 1.7vw, 21px);
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.offer__aside-head { display: flex; align-items: center; gap: 13px; margin-bottom: 9px; }
.offer__aside h3 { margin: 0; font-size: 1.06rem; hyphens: none; }
.offer__aside p { margin: 0 0 16px; font-size: var(--t-small); color: var(--ink-soft); }
@media (max-width: 900px) {
.offer { grid-template-columns: minmax(0, 1fr); }
.offer__media { min-height: 0; display: flex; flex-direction: column; }
.offer__media img, .offer__media .ph {
/* Eigenes Format des Bildes: bei 4/3 fiele ein Viertel der Breite weg
und damit ein Teil der zweigeteilten Montage. */
position: static; height: auto; aspect-ratio: 16 / 9;
}
/* Die Karte rutscht unter das Bild und ueberlappt es leicht. */
.offer__aside {
position: static;
/* Die Breitenbegrenzung gilt nur fuer die Karte auf dem Bild. */
width: auto;
max-width: none;
margin: -46px clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px);
}
}
@media (max-width: 560px) {
.offer__aside { margin-top: -28px; }
.offer__cta .btn, .offer__aside .btn { width: 100%; }
}
/* --- Bewertungen ----------------------------------------------------------
Asymmetrisch: links die Bewertung in Zahlen, rechts die Stimmen selbst.
Bewusst ruhig gehalten — eine einzelne Bewertung soll tatsaechlich
gelesen werden. Kein Google-Logo, keine Markenfarben, kein Karussell.
Gold traegt hier ausschliesslich die Sterne.
-------------------------------------------------------------------------- */
.reviews {
display: grid;
gap: clamp(28px, 4vw, 64px);
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
align-items: start;
}
/* Linke Spalte — die Zahl traegt den Abschnitt, nicht ein Logo. */
.reviews__summary { position: sticky; top: clamp(96px, 8vw, 116px); }
.reviews__score {
margin: 0;
font-family: var(--font-display);
font-size: clamp(3.6rem, 6vw, 5.4rem);
line-height: .9;
letter-spacing: -0.03em;
color: var(--ink);
}
.reviews__stars {
display: flex; gap: 5px; margin: clamp(14px, 1.6vw, 20px) 0 0;
color: var(--amber);
}
.reviews__stars svg { width: 20px; height: 20px; }
.reviews__source {
margin: 10px 0 0;
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .12em; text-transform: uppercase;
color: var(--text-faint);
}
.reviews__rule {
height: 1px; border: 0; background: var(--rule);
margin: clamp(22px, 2.6vw, 32px) 0;
}
.reviews__often {
margin: 0 0 12px;
font-size: var(--t-small); font-weight: 600; color: var(--text);
}
.reviews__tags {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 8px;
}
/* Bewusst keine Kaesten: das sind Stichworte aus den Bewertungen, keine
eigenen Inhalte. Der feine Strich reicht als Gliederung. */
.reviews__tags li {
position: relative; padding-left: 20px;
font-size: var(--t-small); color: var(--text-soft);
}
.reviews__tags li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 10px; height: 1px; background: var(--accent);
}
.reviews__link {
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap);
margin-top: clamp(18px, 2vw, 26px);
font-size: .92rem; font-weight: 600;
color: var(--accent); text-decoration: none;
}
.reviews__link svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--dur) var(--ease); }
.reviews__link:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 4px; }
.reviews__link:hover svg { transform: translateX(3px); }
/* Rechte Spalte — die Stimmen. */
.reviews__voices { display: grid; gap: clamp(16px, 1.8vw, 22px); }
.quote {
margin: 0;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: clamp(26px, 3vw, 40px) clamp(24px, 2.8vw, 38px);
}
.quote__stars { display: flex; gap: 4px; margin: 0 0 clamp(16px, 1.8vw, 22px); color: var(--amber); }
.quote__stars svg { width: 16px; height: 16px; }
.quote blockquote {
margin: 0 0 clamp(18px, 2vw, 24px);
font-size: .98rem; line-height: 1.68;
color: var(--text);
max-width: 58ch;
}
/* Die erste Stimme ist die ausfuehrlichste und bekommt mehr Gewicht. */
.reviews__voices .quote:first-child blockquote {
font-family: var(--font-display);
font-size: clamp(1.08rem, .98rem + .5vw, 1.32rem);
line-height: 1.5;
letter-spacing: -0.01em;
}
.quote figcaption {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
font-size: .86rem;
}
.quote figcaption strong { color: var(--text); font-weight: 600; }
.quote figcaption span { color: var(--text-faint); font-size: .8rem; }
.quote__note { flex-basis: 100%; margin: 0; font-size: .74rem; color: var(--text-faint); }
@media (max-width: 900px) {
.reviews { grid-template-columns: minmax(0, 1fr); }
.reviews__summary { position: static; }
.reviews__rule { margin: 20px 0; }
}
/* --- Einsatzgebiet (dunkel, Vollbild-Karte) -------------------------------
Gleiche Bauart wie Vertrauen und Team: Foto im Hintergrund, Text links.
Die Karte bringt Boegen, Punkte und Beschriftungen schon mit und laesst
links bewusst Flaeche frei — der Text muss also innerhalb der ersten
47 % bleiben, sonst laeuft er ins Gelaende.
-------------------------------------------------------------------------- */
.region {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
min-height: clamp(420px, 46vw, 620px);
padding-block: clamp(52px, 6vw, 88px);
background: var(--ink);
color: rgba(250,247,240,.76);
}
.region__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
/* Nach oben ausgerichtet: die Section ist breiter als die Karte, beschnitten
wird in der Hoehe. Zentriert rutschte Pforzheim aus dem Bild — unten ist
unterhalb von Reutlingen ohnehin nur leeres Gelaende. */
.region__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
/* Die Karte ist links ohnehin fast schwarz — es braucht nur wenig Deckung,
damit der Text sicher traegt. */
.region::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(94deg,
rgba(9,20,34,.82) 0%,
rgba(9,20,34,.70) 34%,
rgba(9,20,34,.28) 52%,
rgba(9,20,34,.06) 70%,
rgba(9,20,34,.14) 100%);
}
.region__inner { position: relative; width: 100%; }
.region__text { max-width: min(490px, 46%); }
.region .label--amber { color: var(--amber); }
.region h2 {
color: var(--paper);
font-size: clamp(1.65rem, 2.6vw, 2.3rem);
line-height: 1.16;
letter-spacing: -0.03em;
hyphens: none;
margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.region h2 span { display: block; }
.region__lead {
margin: 0 0 clamp(14px, 1.6vw, 20px);
font-size: clamp(.98rem, 1vw, 1.06rem);
line-height: 1.72;
color: rgba(250,247,240,.78);
}
.region__note {
margin: 0 0 clamp(22px, 2.4vw, 30px);
font-size: var(--t-small);
color: rgba(250,247,240,.54);
}
/* Schmal: die Karte traegt keinen Text mehr, sie wird zum Hintergrund.
Rechts ausgerichtet, damit das Gebiet und nicht die leere Flaeche zu
sehen ist. */
@media (max-width: 900px) {
.region { min-height: clamp(400px, 78vw, 520px); }
.region__media img { object-position: 78% center; }
/* Kraeftiger als am Desktop: die Beschriftungen der Karte sind hier zu
klein zum Lesen und wuerden nur halb hinter dem Text hervorlugen. */
.region::after {
background:
linear-gradient(180deg, rgba(9,20,34,.74) 0%, rgba(9,20,34,.88) 45%, rgba(9,20,34,.96) 100%);
}
.region__text { max-width: none; }
}
@media (max-width: 560px) {
.region .btn { width: 100%; }
}
/* --- FAQ ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 19px 2px; cursor: pointer; list-style: none;
font-weight: 600; color: var(--ink); font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; width: 11px; height: 11px;
border-right: 2px solid var(--felt); border-bottom: 2px solid var(--felt);
transform: rotate(45deg) translate(-2px,-2px);
transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
.faq__body { padding: 0 2px 20px; font-size: var(--t-small); }
.faq__body p { margin-bottom: .7em; }
/* --- Kontaktblock --------------------------------------------------------- */
.contact { display: grid; gap: 20px; }
@media (min-width: 900px) { .contact { grid-template-columns: 0.85fr 1.15fr; align-items: start; } }
.contact__card {
background: var(--ink); color: rgba(250,247,240,.8);
border-radius: var(--radius-lg); padding: clamp(26px,4vw,36px);
}
.contact__card h2 { color: var(--paper); font-size: var(--t-h2); }
.contact__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; }
.contact__list a { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--paper); font-size: .94rem; }
.contact__list svg { width: var(--icon); height: var(--icon); flex: none; color: var(--text-faint); }
.contact__list a:hover { text-decoration: underline; }
@media (max-width: 760px) {
.contact__list { gap: 4px; }
.contact__list a { min-height: 44px; }
}
.contact__form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,4vw,32px); }
.form-row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form-row--2 { grid-template-columns: 1fr 1fr; } }
/* --- Sticky WhatsApp ------------------------------------------------------ */
.wa-float {
position: fixed; right: 18px; bottom: 18px; z-index: 90;
display: inline-flex; align-items: center; gap: 9px;
min-height: var(--tap); padding: 12px 20px;
background: #1FA855; color: #fff; text-decoration: none;
border-radius: var(--radius-pill); font-weight: 600; font-size: .93rem;
box-shadow: var(--shadow-md);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.wa-float svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Schmal: nur noch das Zeichen. Die Beschriftung machte den Knopf 136 px
breit, und weil er fest unten rechts klebt, lag er dort auf dem
Telefonknopf im Hero, auf dem Terminfeld im Formular und auf der
Fusszeile. Als Kreis bleibt davon ein Eck uebrig. */
@media (max-width: 760px) {
.wa-float {
right: 14px;
bottom: calc(14px + env(safe-area-inset-bottom));
width: 56px; height: 56px; padding: 0;
border-radius: 50%;
justify-content: center;
}
.wa-float__text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.wa-float svg { width: 24px; height: 24px; }
}
/* Im Kontaktabschnitt ist der Knopf ueberfluessig — dort stehen Telefon,
E-Mail und WhatsApp ohnehin nebeneinander. Er weicht dem Formular. */
.wa-float.is-away {
opacity: 0;
transform: translateY(12px) scale(.9);
pointer-events: none;
}
/* --- Rechtstexte (Impressum, Datenschutz, AGB) ----------------------------
Reine Lesetexte in schmaler Spalte. Jede Zwischenueberschrift bekommt eine
Haarlinie darueber, damit sich der Text wie ein gegliedertes Dokument liest
und nicht wie eine Textwueste. Angaben — Anschrift, Nummern, Kontakt —
stehen in Mono: es sind Daten, kein Fliesstext.
Geteilt von impressum.html, datenschutz.html und agb.html. */
.legal__head { margin-bottom: clamp(30px, 4.5vw, 48px); }
.legal__head h1 { margin-bottom: .35em; }
.legal__head p { color: var(--ink-soft); margin: 0; }
.legal h2 {
font-size: var(--t-h3);
margin: clamp(34px, 4.5vw, 52px) 0 .6em;
padding-top: clamp(20px, 3vw, 28px);
border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 1rem; margin: 26px 0 .5em; }
.legal p, .legal li { max-width: 68ch; }
/* Hostnamen und technische Bezeichner im Fliesstext */
.legal code {
font-family: var(--font-data);
font-size: .88em;
padding: 1px 5px;
background: var(--paper-alt);
border: 1px solid var(--line);
border-radius: 4px;
color: var(--ink);
overflow-wrap: anywhere;
}
.legal ul, .legal ol { margin: 0 0 1.1em; padding-left: 20px; }
.legal li { margin-bottom: .35em; }
.legal p a, .legal li a {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.legal p a:hover, .legal li a:hover { color: var(--ink); }
/* Adress- und Kontaktbloecke */
.legal__data {
font-family: var(--font-data);
font-size: var(--t-small);
line-height: 1.85;
color: var(--ink);
}
.legal__data a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal__data a:hover { color: var(--ink); }
.legal .legal__foot {
max-width: none; /* die Linie soll die volle Spalte fassen, nicht nur den Text */
}
.legal__foot {
margin-top: clamp(40px, 5vw, 60px);
padding-top: 22px;
border-top: 1px solid var(--line);
font-family: var(--font-data);
font-size: var(--t-label);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink-faint);
}
/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(250,247,240,.62); padding-block: 52px 0; }
/* Die Spaltentitel standen als einzige Stelle der Seite noch in der
Serife: die Fusszeile liegt ausserhalb von main und wurde vom
Schriftwechsel der Startseite nicht erfasst. Jetzt tragen sie dieselbe
Condensed wie jede andere Ueberschrift, im Schnitt der kleinen
Kartenkoepfe aus dem Kopfbereich. */
.site-footer h4 {
color: var(--paper);
font-family: var(--font-hero);
font-weight: 800;
font-size: 1.02rem;
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 14px;
}
.site-footer a { color: rgba(250,247,240,.78); text-decoration: none; }
.site-footer a:hover { color: var(--paper); text-decoration: underline; }
.footer__grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); padding-bottom: 40px; }
.footer__grid p { font-size: .88rem; margin-bottom: .5em; }
.footer__bottom { border-top: 1px solid rgba(250,247,240,.12); padding: 18px 0; font-size: .8rem; text-align: center; }
/* Schmal: die Fusszeilen-Verweise waren 15 px hoch und lagen 30 px
auseinander — mit dem Daumen kaum zu treffen. Padding macht daraus
Ziele von 44 px, ohne die Schrift zu vergroessern. */
@media (max-width: 760px) {
.footer__grid p { margin-bottom: 0; }
.footer__grid p a {
display: inline-block;
padding: 14px 0;
line-height: 1.2;
}
/* Die Anschrift ist kein Verweis und braucht ihren Abstand zurueck. */
.footer__grid p:not(:has(a)) { margin-bottom: .5em; padding: 2px 0; }
.footer__bottom { padding-bottom: calc(18px + 68px + env(safe-area-inset-bottom)); }
}
/* --- Sanftes Einblenden --------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }
/* --- Leistungsmodule ------------------------------------------------------
Drei gleichwertige Karten nebeneinander. Aufbau je Karte von oben nach
unten: Zeichen, Marke, Titel, Text, kurzer Strich, Punkte, Verweis —
darunter buendig am Fuss das Bild. Der Textteil ist ein Flex-Kasten mit
flex:1, dadurch stehen die Bilder aller drei Karten auf einer Linie,
auch wenn die Texte unterschiedlich lang sind.
-------------------------------------------------------------------------- */
/* Die Leistungskarten sind auf die dunkle Karte mit Hintergrundfoto
umgestellt; ihre Regeln stehen weiter unten im Stylesheet. Der frueher
hier stehende Satz gehoerte zur hellen Karte mit Zeichen, Trennlinie
und Bild am Fuss. Er wurde vollstaendig ersetzt und ist entfernt:
.svc__media, .svc__rule und .svc__icon haben im Markup gar kein
Gegenstueck mehr, der Rest wurde von den neuen Regeln ueberschrieben.
Eine Ausnahme wirkte noch und war ein sichtbarer Fehler:
.svc__points svg trug opacity .55 und zog die goldenen Haken auf gut
die Haelfte herunter. */
/* Ein Knopf fuer den ganzen Abschnitt, mittig unter den Karten */
.svc__action {
margin: clamp(28px, 3.4vw, 44px) 0 0;
/* Ohne das greift die Grundregel p { max-width: 62ch }: der Absatz waere
schmal und der Knopf stuende links statt in der Mitte. */
max-width: none;
text-align: center;
}
.svc__action .btn { min-height: 60px; padding-inline: clamp(28px, 3.4vw, 46px); }
.svc__action .btn svg:first-child { width: 22px; height: 22px; }
/* Drei Karten nebeneinander brauchen Platz. Darunter gestapelt und in der
Breite begrenzt — eine Karte ueber die volle Zeile liest sich schlecht. */
@media (max-width: 980px) {
.svc__list {
grid-template-columns: minmax(0, 1fr);
max-width: 560px; margin-inline: auto;
}
.svc__action .btn { width: 100%; }
}
/* --- Vorher / Nachher -----------------------------------------------------
Zwei Aufnahmen desselben Raums nebeneinander, getrennt durch eine Fuge.
Bewusst NICHT als fertig beschriftetes Composite-Bild: so passt sich der
Vergleich jeder Slotbreite an, beide Haelften werden identisch
beschnitten, und die Beschriftung kommt aus dem Designsystem statt aus
Photoshop. Fuellt den Elternslot, laeuft daher in .svc__media wie in
der Galerie.
-------------------------------------------------------------------------- */
.ba {
position: absolute; inset: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2px;
background: var(--line-strong); /* die Fuge */
}
.ba__pane { position: relative; overflow: hidden; }
/* Griff in der Fuge — macht lesbar, dass hier zwei Aufnahmen desselben
Raums aneinanderstossen. Beide Pseudo-Elemente sind absolut gesetzt und
damit keine Rasterzellen von .ba. */
.ba::before,
.ba::after {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.ba::before {
content: "";
width: 34px; height: 34px; border-radius: 50%;
background: var(--surface);
box-shadow: 0 2px 10px rgba(16,35,58,.30);
}
.ba::after {
content: "‹ ›";
font-family: var(--font-body); font-size: .82rem; font-weight: 600;
letter-spacing: .04em; color: var(--ink);
line-height: 1;
}
@media (max-width: 400px) {
.ba::before { width: 28px; height: 28px; }
.ba::after { font-size: .72rem; }
}
/* Die Marke ist ein Datenpunkt, kein Bildtitel — daher Mono wie die Labels. */
.ba__tag {
position: absolute; left: 12px; bottom: 12px;
padding: 5px 11px;
background: var(--ink); color: var(--paper);
font-family: var(--font-data);
font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase;
border-radius: 5px;
}
@media (max-width: 400px) {
.ba__tag { left: 8px; bottom: 8px; padding: 4px 8px; letter-spacing: .1em; }
}
/* --- Formular: Spamschutz und Rueckmeldung -------------------------------- */
/* Honeypot: unsichtbar, aber nicht display:none — manche Bots erkennen das. */
.hp {
position: absolute !important;
left: -9999px !important;
width: 1px; height: 1px;
overflow: hidden;
}
.form-note {
margin-top: 18px;
padding: 18px 20px;
border-radius: var(--radius);
font-size: var(--t-small);
line-height: 1.6;
}
.form-note p { margin: 0 0 .6em; max-width: none; }
.form-note p:last-child { margin-bottom: 0; }
.form-note--ok {
background: rgba(63,107,74,.08);
border: 1px solid rgba(63,107,74,.30);
border-left: 3px solid var(--ok);
color: var(--ink-soft);
margin-top: 0;
}
.form-note--ok strong { color: var(--ok); }
.form-note--err {
background: rgba(179,64,42,.07);
border: 1px solid rgba(179,64,42,.28);
border-left: 3px solid var(--error);
color: var(--ink-soft);
}
.form-note--err strong { color: var(--error-dark); }
.btn[disabled] { opacity: .6; cursor: progress; }
/* ==========================================================================
PHASE 2 — NEUER HEADER / HERO / VERTRAUENSKARTE (isoliert)
Eigenes Layoutsystem fuer Desktop, nach Referenzentwurf. Bewusst NICHT auf
.site-header / .hero / .proof aufgesetzt, weil die Referenz einen hellen
Header, eine diagonale Bildmaske und eine breite Vertrauenskarte verlangt,
die den bisherigen dunklen Regeln widersprechen. Andere Abschnitte der
Seite bleiben unberuehrt; diese Klassen alle mit Praefix h2- / hero2 /
trust2 / strip2, damit nichts mit dem bestehenden System kollidiert.
Headline in Barlow Condensed 800, Fliesstext weiter in Archivo. Playfair
Display taucht in diesem Block nicht auf. Die Handschrift (Caveat) ist die
einzige Ausnahme von der serifenlosen Regel — ausschliesslich am
Skyline-Akzent in der Vertrauenskarte.
Das Hero-Foto fehlt noch als Datei — .hero2__media ist geometrisch fertig
(Diagonalschnitt, Facette, Ueberlagerung), zeigt aber bewusst kein
Ersatzbild, keinen Platzhalter-Hinweis und kein Muster. Sobald das echte
Foto vorliegt, kommt ein ![]()
mit object-fit: cover hinein.
========================================================================== */
.hero2, .strip2 { --wrap2: 1560px; }
.hero2 .wrap, .strip2 .wrap { max-width: var(--wrap2); }
/* --- Header --------------------------------------------------------------- */
.h2-header {
position: sticky; top: 0; z-index: 100;
background: rgba(250,247,240,.92);
backdrop-filter: saturate(1.3) blur(10px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.h2-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 8px 26px rgba(16,35,58,.10); }
.h2-header .wrap { max-width: var(--wrap2); }
.h2-header__inner {
display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px);
min-height: clamp(78px, 6.4vw, 104px);
}
.h2-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: clamp(20px, 3vw, 56px); }
.h2-brand__icon { width: 40px; height: 40px; flex: none; color: var(--signal); }
.h2-brand__icon svg { width: 100%; height: 100%; }
.h2-brand__div { width: 1px; align-self: stretch; margin-block: 2px; background: var(--line-strong); }
.h2-brand__text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
.h2-brand__name {
font-family: var(--font-hero); font-weight: 800; font-size: 1.5rem;
letter-spacing: .01em; color: var(--ink);
}
.h2-brand__sub {
font-family: var(--font-body); font-weight: 600; font-size: .66rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
white-space: nowrap;
}
.h2-brand__region {
display: flex; align-items: center; gap: 6px;
font-size: .84rem; color: var(--ink-faint); white-space: nowrap;
padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line);
}
.h2-brand__region svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }
.h2-nav__list { display: flex; gap: clamp(18px, 2vw, 32px); list-style: none; margin: 0; padding: 0; }
.h2-nav__list a {
display: flex; align-items: center; gap: 4px;
text-decoration: none; font-size: .96rem; font-weight: 500; color: var(--ink-soft);
padding: 6px 0; transition: color var(--dur) var(--ease);
}
.h2-nav__list a svg { width: 14px; height: 14px; color: var(--ink-faint); }
.h2-nav__list a:hover { color: var(--ink); }
.h2-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.h2-burger {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; padding: 0; flex: none;
background: var(--surface); border: 1.5px solid var(--line-strong);
border-radius: var(--radius); cursor: pointer; color: var(--ink);
}
.h2-burger svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .h2-brand__region { display: none; } }
@media (max-width: 1120px) {
.h2-nav {
position: fixed; inset: 76px 0 auto 0; z-index: 99;
background: var(--surface); border-bottom: 1px solid var(--line);
box-shadow: 0 18px 40px rgba(16,35,58,.14);
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.h2-nav.is-open { opacity: 1; visibility: visible; transform: none; }
.h2-nav__list { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
.h2-nav__list a { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.h2-cta .h2-cta__long { display: none; }
.h2-cta .h2-cta__short { display: inline; }
}
@media (min-width: 1121px) {
.h2-cta .h2-cta__short { display: none; }
}
@media (max-width: 760px) {
.h2-actions .btn--sm { min-height: 44px; }
}
@media (max-width: 560px) {
.h2-brand > span:not(.h2-brand__text) { display: none; }
.h2-brand__text { display: none; }
}
/* --- Hero ------------------------------------------------------------------ */
.hero2 { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); }
.hero2__media {
position: absolute; inset: 0; z-index: -1;
background-image: url('hero-umzug.jpg');
background-size: cover;
background-position: center;
clip-path: polygon(42% 0, 100% 0, 100% 100%, 22% 100%);
}
/* Die duenne Facette oben — das leichte Ueberlappen zweier Diagonalen aus
der Referenz, kein zweites Bild, nur ein heller Streifen der Grundflaeche. */
.hero2__media::before {
content: "";
position: absolute; inset: 0;
background: var(--paper);
opacity: .4;
clip-path: polygon(42% 0, 58% 0, 36% 16%, 28% 16%);
}
.hero2__inner {
display: flex; align-items: flex-start; justify-content: space-between;
gap: clamp(24px, 3vw, 56px);
padding-block: clamp(40px, 5vw, 64px) 0;
min-height: clamp(560px, 74vh, 800px);
}
.hero2__col { flex: 1 1 480px; max-width: 600px; padding-top: clamp(10px, 2vw, 28px); }
.hero2__eyebrow {
margin: 0 0 clamp(16px, 1.8vw, 22px);
font-family: var(--font-data); font-size: .78rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--signal);
}
.hero2__headline {
margin: 0; color: var(--ink);
font-family: var(--font-hero); font-weight: 800; text-transform: uppercase;
font-size: clamp(2.1rem, 1.1rem + 2.7vw, 3.05rem);
line-height: 1.02; letter-spacing: -0.005em;
white-space: nowrap;
}
.hero2__headline span { display: block; }
.hero2__headline .hero2__accent { color: var(--signal); }
.hero2__sub {
margin: clamp(20px, 2.2vw, 28px) 0 0;
max-width: 46ch; color: var(--ink-soft);
font-size: clamp(.98rem, 1vw, 1.08rem); line-height: 1.65;
}
.hero2__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(26px, 3vw, 36px) 0 0; }
.hero2__cta .btn--secondary { background: var(--surface); }
.hero2 .btn--lg { min-height: 58px; }
.hero2__region {
display: flex; align-items: flex-start; gap: 10px;
margin: clamp(28px, 3.4vw, 44px) 0 0;
font-size: .95rem; line-height: 1.5; color: var(--ink-faint);
}
.hero2__region svg { width: var(--icon); height: var(--icon); flex: none; margin-top: 1px; color: var(--ink-faint); }
.hero2__region strong { display: block; color: var(--ink); font-weight: 600; }
/* --- Vertrauenskarte -------------------------------------------------------- */
.trust2 {
flex: 0 0 clamp(300px, 30vw, 462px);
margin-top: clamp(28px, 3.4vw, 52px);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: clamp(24px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px) clamp(18px, 2vw, 24px);
}
.trust2__title {
margin: 0; font-family: var(--font-hero); font-weight: 800;
font-size: clamp(1.3rem, 1.4vw, 1.55rem); letter-spacing: -0.01em; color: var(--ink);
}
.trust2__rule { width: 46px; height: 3px; margin: 12px 0 clamp(18px, 2vw, 24px); background: var(--signal); border: 0; border-radius: 2px; }
.trust2__main {
display: flex; align-items: center; gap: 16px;
background: var(--paper-alt); border-radius: var(--radius);
padding: clamp(16px, 1.8vw, 20px);
}
.trust2__main-icon {
display: flex; align-items: center; justify-content: center; flex: none;
width: 46px; height: 46px; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--line-strong); color: var(--signal);
}
.trust2__main-icon svg { width: 22px; height: 22px; }
.trust2__main-title { margin: 0 0 3px; font-family: var(--font-hero); font-weight: 800; letter-spacing: .005em; text-transform: uppercase; font-size: clamp(.92rem, .82vw + .5rem, 1.08rem); color: var(--ink); white-space: nowrap; }
.trust2__main-text { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.trust2__cols {
list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
margin: clamp(20px, 2.2vw, 26px) 0 0; padding: clamp(18px, 2vw, 22px) 0 0;
border-top: 1px solid var(--line); gap: 4px;
}
.trust2__cols li { display: flex; flex-direction: column; align-items: flex-start; padding-inline: 4px; }
.trust2__cols li + li { border-left: 1px solid var(--line); padding-left: clamp(14px, 1.6vw, 18px); margin-left: clamp(6px, 1vw, 10px); }
.trust2__icon { display: block; margin-bottom: 12px; color: var(--signal); }
.trust2__icon svg { width: 22px; height: 22px; }
.trust2__col-title { margin: 0 0 5px; font-size: .8rem; font-weight: 700; color: var(--ink); line-height: 1.3; white-space: nowrap; }
.trust2__col-text { margin: 0; font-size: .74rem; line-height: 1.42; color: var(--ink-faint); }
.trust2__skyline {
position: relative; margin-top: clamp(20px, 2.4vw, 28px);
padding-top: clamp(14px, 1.6vw, 18px);
}
.trust2__skyline svg { display: block; width: 100%; height: auto; color: var(--kraft); }
.trust2__skyline-img { display: block; width: 100%; height: auto; }
.trust2__hand {
position: absolute; top: -6px; right: 4px; margin: 0; text-align: right;
font-family: var(--font-hand); font-weight: 600; color: var(--signal-dark);
font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.15; transform: rotate(-2deg);
}
/* --- Vertrauensleiste (4 Spalten) unter dem Hero ---------------------------- */
.strip2 { background: var(--paper-alt); padding-block: clamp(26px, 3vw, 38px); }
.strip2__list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.strip2__list li { display: flex; align-items: center; gap: 14px; padding-inline: clamp(12px, 1.6vw, 22px); }
.strip2__list li + li { border-left: 1px solid var(--line-strong); }
.strip2__icon { flex: none; color: var(--signal); }
.strip2__icon svg { width: 26px; height: 26px; }
.strip2__title { margin: 0; font-size: .92rem; font-weight: 700; color: var(--ink); }
.strip2__text { margin: 2px 0 0; font-size: .8rem; color: var(--ink-faint); }
/* --- Tablet / Mobile -------------------------------------------------------- */
@media (max-width: 1180px) {
.hero2__inner { flex-wrap: wrap; }
.trust2 { flex: 1 1 100%; width: 100%; margin-top: clamp(28px, 4vw, 40px); }
.hero2__media { clip-path: none; opacity: .18; }
.hero2__media::before { display: none; }
.strip2__list { grid-template-columns: repeat(2, 1fr); row-gap: clamp(18px, 3vw, 26px); }
.strip2__list li:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
.trust2__main-title { white-space: normal; }
.trust2__cols { grid-template-columns: 1fr; row-gap: 16px; }
.trust2__cols li + li { border-left: 0; padding-left: 4px; margin-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.trust2__col-title { white-space: normal; }
.strip2__list { grid-template-columns: 1fr; }
.strip2__list li + li { border-left: 0; border-top: 1px solid var(--line-strong); padding-top: 16px; margin-top: 16px; }
}
/* ==========================================================================
PHASE 2 — DESKTOP-GEOMETRIE (Referenzmass 1600 x 900)
Ab 1200px ist der Kopf der Seite kein Spaltenlayout mehr, sondern drei
uebereinanderliegende Ebenen:
Ebene 1 helle Contentflaeche links (.hero2__col)
Ebene 2 diagonale Bildflaeche mittig (.hero2__media)
Ebene 3 Vertrauenskarte rechts, ueber dem Foto liegend (.trust2)
Die Hoehen sind so gesetzt, dass Header (92) + Hero (650) + Leiste (95)
zusammen unter 900px bleiben: die Vertrauensleiste steht bei 1600 x 900
vollstaendig im Bild. Wer hier eine Hoehe aendert, muss diese Rechnung
neu machen.
Das Raster ist auf 1600px Breite zentriert. Deshalb stehen die absoluten
Masse links/rechts am .hero2__inner (max-width 1600) und die Bildflaeche
auf calc(50% - 360px) — bei 1600px Viewport ergibt das exakt left: 440px.
========================================================================== */
@media (min-width: 1200px) {
/* --- Grundton: neutrales Mineralweiss statt Creme ----------------------- */
.h2-header { background: rgba(245,246,247,.92); }
.h2-header.is-stuck { border-bottom-color: var(--mineral-line); }
.hero2 { background: var(--mineral); }
.strip2 { background: var(--mineral-alt); }
/* --- Header: 92px, Navigation einzeilig -------------------------------- */
.h2-header .wrap { max-width: 1600px; padding-inline: 48px 40px; }
.h2-header__inner { min-height: 92px; gap: 28px; }
.h2-brand { gap: 12px; margin-right: 24px; }
.h2-brand__icon { width: 38px; height: 38px; }
.h2-brand__name { font-size: 1.42rem; }
.h2-brand__region { padding-left: 20px; font-size: .82rem; }
.h2-nav__list { gap: 26px; }
.h2-nav__list a { font-size: .94rem; white-space: nowrap; }
.h2-actions { gap: 10px; }
/* --- Hero: feste Buehne ------------------------------------------------ */
/* Doppelte Klasse: schlaegt die allgemeine Regel .hero2 .wrap (1560px),
sonst sitzt die ganze Buehne 20px zu weit innen. */
.hero2 .wrap.hero2__inner {
display: block; position: relative;
width: 100%; max-width: 1600px; margin-inline: auto;
padding: 0; height: 665px; min-height: 0;
}
/* Ebene 1 — Text links */
.hero2__col {
/* top gegen die Referenz eingemessen, nicht geschaetzt: dort liegen
zwischen Kartenoberkante und Headline 75px, zwischen Kartenoberkante
und Knopfoberkante 417px. Mit top: 95 stimmen beide Abstaende. */
position: absolute; left: 48px; top: 95px; z-index: 2;
width: 596px; max-width: none; padding-top: 0;
}
.hero2__eyebrow { margin-bottom: 18px; font-size: .76rem; }
/* 76px statt der zunaechst angesetzten 66: gemessen an der Referenz
stimmt damit die Kappenhoehe (47px). Die Vorlage benutzt eine breiter
laufende Schrift als Barlow Condensed — die Zeile bleibt deshalb
schmaler als dort, die Hoehe stimmt. */
.hero2__headline { font-size: 76px; line-height: .95; }
.hero2__sub { margin-top: 30px; max-width: 370px; font-size: 1rem; line-height: 1.6; }
.hero2__cta { gap: 16px; margin-top: 52px; }
.hero2 .hero2__cta .btn--primary { width: 300px; height: 60px; min-height: 60px; }
.hero2 .hero2__cta .btn--secondary { width: 215px; height: 60px; min-height: 60px; }
.hero2__region { margin-top: 44px; font-size: .93rem; }
/* Ebene 2 — Bildflaeche. Voll sichtbar: keine Deckkraft, kein Filter,
kein Overlay. Die obere linke Kante beginnt deutlich weiter rechts als
die untere — das ist das Leitmerkmal der Vorlage. */
.hero2__media {
inset: 0 auto 0 calc(50% - 360px); z-index: 0;
width: 750px; height: 100%;
opacity: 1; filter: none;
background-image: url('hero-umzug.jpg');
background-size: cover; background-position: center;
/* Gemessen gegen die Referenz: obere Kante bei 729px, untere bei 440px
(Viewport 1600). 38.5% von 750 = 289 → 440 + 289 = 729. */
clip-path: polygon(38.5% 0, 100% 0, 88% 100%, 0 100%);
}
.hero2__media::before { display: none; }
/* Ebene 3 — Vertrauenskarte, liegt rechts ueber dem Foto */
.trust2 {
position: absolute; right: 32px; top: 58px; z-index: 3;
flex: none; width: 490px; height: 600px; margin: 0;
display: flex; flex-direction: column;
background: var(--card); border-color: var(--mineral-line);
padding: 32px;
}
.trust2__title { font-size: 26px; line-height: 1.1; }
.trust2__rule { margin: 12px 0 22px; }
.trust2__main { min-height: 106px; padding: 18px 20px; gap: 14px; }
.trust2__main-icon { width: 44px; height: 44px; }
.trust2__main-title { font-size: 1.02rem; }
.trust2__main-text { font-size: .86rem; }
.trust2__cols { margin-top: 22px; padding-top: 20px; }
.trust2__col-title { font-size: .81rem; }
.trust2__col-text { font-size: .75rem; }
/* Region-Lineart: liegt unten in der Karte auf, die Handschrift
ueberlagert sie oben rechts. margin-top:auto schiebt sie an den
unteren Innenrand, wie in der Referenz. */
.trust2__skyline { margin-top: auto; padding-top: 0; }
.trust2__hand { top: 8px; right: 6px; font-size: 1.16rem; }
/* --- Vertrauensleiste: 95px, vier gleiche Spalten ---------------------- */
.strip2 { padding-block: 25px; }
.strip2 .wrap { max-width: 1600px; padding-inline: 48px 40px; }
.strip2__list li + li { border-left-color: var(--mineral-line); }
}
/* ==========================================================================
PHASE 3 — DESIGNSYSTEM DES HEROS AUF DIE UEBRIGE STARTSEITE
Der Hero ist freigegeben und gilt als Referenz. Alle Werte hier sind aus
ihm ausgelesen, nicht neu erfunden. Der Hero selbst wird von diesem Block
nicht getroffen: jeder Selektor schliesst .hero2 und .strip2 aus, und die
Kopfzeile steht ohnehin ausserhalb von main.
Aus dem Hero gemessen:
Navy #10233A Ueberschriften, Text
Fliesstext #4B5768
Gold Schrift#8A6229 Marken, Zeichen, Akzentwoerter
Gold Flaeche#D9B77F Fuellung des Hauptknopfs
Grund #F5F6F7 Mineralweiss
Grund 2 #EFF1F2
Karte #FFFFFF Rand #DFE3E6, Radius 16, Innenabstand 32
Knopf Pille, Archivo 600
Zeichen Strichstaerke 1.5, Gold
Achse 1600 breit, 48 Innenabstand
========================================================================== */
:root {
/* Marken-Aliase. Bewusst Verweise statt neuer Hexwerte — wer die Palette
aendert, aendert sie an einer Stelle. */
--brand-navy: var(--ink);
--brand-muted: var(--ink-soft);
--brand-gold: var(--signal); /* Schrift und Zeichen */
--brand-gold-fill: var(--amber); /* Flaeche, nur Knoepfe */
--brand-bg: var(--mineral);
--brand-bg-alt: var(--mineral-alt);
--brand-surface: var(--card);
--brand-border: var(--mineral-line);
--brand-border-strong: #CDD5DB;
--radius-card: var(--radius-lg); /* 16px, wie die Vertrauenskarte */
--radius-button: var(--radius-pill);
--wrap-brand: 1600px;
--pad-brand: 48px;
/* Warmer Markenakzent — derselbe Ton wie der Festpreisblock in der
Vertrauenskarte. Als eigenes Token, weil --paper-alt in den
Abschnitten unter dem Hero auf die kuehle Flaeche zeigt. */
--brand-sand: #F2EADC;
}
/* --- 1. Flaechen: Creme raus, Mineralweiss rein --------------------------
Ein Scope statt vieler Einzelregeln. Die Abschnitte unter dem Hero
definieren die Flaechen- und Linientokens fuer sich und ihre Kinder neu;
jede bestehende Komponente darin zieht damit automatisch nach, ohne dass
ihre eigene Regel angefasst werden muss. */
main > section:not(.hero2):not(.strip2) {
--paper: var(--brand-bg);
--paper-alt: var(--brand-bg-alt);
--surface: var(--brand-surface);
--line: var(--brand-border);
--line-strong: var(--brand-border-strong);
--rule: var(--brand-border);
--rule-strong: var(--brand-border-strong);
}
/* Die dunklen Abschnitte behalten ihre Umkehr, bekommen aber denselben
kuehlen Hellton wie der Hero statt des cremefarbenen. */
main > section.region {
--text: #F5F6F7;
--text-soft: rgba(245,246,247,.78);
}
/* --- 2. Achse: dieselbe Breite und derselbe Innenabstand wie im Hero ----- */
main > section:not(.hero2):not(.strip2) > .wrap {
max-width: var(--wrap-brand);
padding-inline: var(--pad-brand);
}
@media (max-width: 900px) {
main > section:not(.hero2):not(.strip2) > .wrap { padding-inline: var(--gutter); }
}
/* --- 3. Typografie: Serife raus, Barlow Condensed rein -------------------
Playfair Display verschwindet aus den Abschnitten der Startseite. Sie
bleibt in Datei und Token erhalten, weil andere Seiten sie noch nutzen. */
main > section:not(.hero2):not(.strip2) h2 {
font-family: var(--font-hero);
font-weight: 800;
font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3rem); /* bis 48px */
line-height: .98;
letter-spacing: 0;
text-transform: uppercase;
color: var(--text);
hyphens: none;
}
main > section:not(.hero2):not(.strip2) h3 {
font-family: var(--font-hero);
font-weight: 800;
font-size: clamp(1.15rem, .95rem + .6vw, 1.4rem);
line-height: 1.12;
letter-spacing: 0;
hyphens: none;
}
/* Kursive Serifen-Akzente in Ueberschriften gab es nur in der alten
Sprache — hier wird daraus ein Goldwort ohne Neigung. */
main > section:not(.hero2):not(.strip2) h2 em,
main > section:not(.hero2):not(.strip2) h2 .is-accent {
font-style: normal;
color: var(--accent);
}
/* Die Abschnittsmarke ist bereits Mono in Gold wie das Eyebrow im Hero —
nur der Sperrsatz wird angeglichen. */
main > section:not(.hero2):not(.strip2) .label { letter-spacing: .18em; }
/* --- 4. Vertikaler Rhythmus --------------------------------------------- */
main > section:not(.hero2):not(.strip2).section { padding-block: clamp(56px, 7vw, 104px); }
main > section:not(.hero2):not(.strip2) .section-head { margin-bottom: clamp(34px, 4vw, 58px); }
main > section:not(.hero2):not(.strip2) .section-head h2 { margin-bottom: 0; }
main > section:not(.hero2):not(.strip2) .section-head h2 + p { margin-top: 24px; }
/* Der Fliesstext unter einer Ueberschrift bleibt lesbar schmal, auch wenn
die Achse breit ist. */
main > section:not(.hero2):not(.strip2) .section-head.center > p:not(.label) {
max-width: 62ch; margin-inline: auto;
}
/* --- 5. Karten: Sprache der Vertrauenskarte ------------------------------ */
main > section:not(.hero2):not(.strip2) .trust__card {
background: var(--brand-surface);
border: 1px solid var(--brand-border);
border-radius: var(--radius-card);
}
/* --- 6. Zeichen: Gold, Strichstaerke 1.5, wie in der Vertrauenskarte ----- */
main > section:not(.hero2):not(.strip2) .trust__icon { color: var(--brand-gold); }
/* --- 7. Korrekturrunde: gegen den Hero gegengelesen ---------------------- */
/* Zeichen wie in der Vertrauenskarte: nackt und in Gold, nicht im Navy-Kreis.
Der Kreis ist im System zwar erlaubt, aber der Hero praesentiert seine
Zeichen nackt — und der Hero ist hier die Referenz. */
main > section:not(.hero2):not(.strip2) .trust__icon,
main > section:not(.hero2):not(.strip2) .offer__aside-icon {
/* Der Kartenkoerper ist ein Flex-Container: ein Kind wird darin
blockifiziert und auf volle Breite gestreckt, das Zeichen rutschte
dadurch in die Mitte. align-self haelt es am linken Rand. */
display: inline-flex; align-self: flex-start;
width: auto; height: auto;
background: none; border-radius: 0;
color: var(--brand-gold);
}
main > section:not(.hero2):not(.strip2) .trust__icon svg,
main > section:not(.hero2):not(.strip2) .offer__aside-icon svg { width: 26px; height: 26px; }
main > section:not(.hero2):not(.strip2) .reckon__icon svg { width: 27px; height: 27px; }
/* Der Waldsaum bleibt als Uebergangsmotiv, tritt aber zurueck: er stand als
fast schwarzweisses Band unter der Vertrauensflaeche. */
main > section.wald .wald__media::before {
opacity: .07;
height: clamp(54px, 5vw, 84px);
}
/* Nur noch zwei Knopfformen. Der goldene Umriss war eine dritte Optik und
wird auf den Sekundaerknopf des Heros gelegt. */
main > section:not(.hero2):not(.strip2) .btn--outline {
background: var(--brand-surface);
color: var(--brand-navy);
border-color: var(--brand-border-strong);
}
main > section:not(.hero2):not(.strip2) .btn--outline:hover {
background: rgba(16,35,58,.05);
border-color: var(--brand-navy);
color: var(--brand-navy);
}
/* Der Knopf auf der dunklen Leiste bleibt der goldene Hauptknopf, nur ohne
den schweren Schlagschatten der alten Variante. */
main > section:not(.hero2):not(.strip2) .btn--amber { box-shadow: var(--shadow-sm); }
/* Weiterfuehrende Verweise treten zurueck: Text in Navy, nur der Pfeil
traegt das Gold. Vorher konkurrierten sie mit den Knoepfen. */
/* Letzte Serifen-Reste der alten Sprache: die grosse Bewertungszahl ist
eine Displayrolle und gehoert damit in die Condensed, das Zitat ist
Fliesstext und gehoert in die Grotesk. */
main > section:not(.hero2):not(.strip2) .reviews__score {
font-family: var(--font-hero); font-weight: 800; letter-spacing: 0;
}
main > section:not(.hero2):not(.strip2) blockquote,
/* Das erste Zitat trug die Serife ueber eine spezifischere Regel; der
Selektor hier muss sie deshalb ueberbieten. */
main > section:not(.hero2):not(.strip2) .reviews__voices .quote blockquote {
font-family: var(--font-body); font-style: normal;
}
/* ==========================================================================
LEISTUNGSKARTEN — dunkle Karte nach Referenzentwurf
Die Karte ist eine Flaeche fuer sich: das Foto liegt hinter dem Text und
laeuft nach unten in Navy aus, der Text steht am Fuss. Deshalb kehrt die
Karte die Kontextfarben um — sie ist ein dunkler Bereich innerhalb eines
hellen Abschnitts.
========================================================================== */
.svc__list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: clamp(14px, 1.4vw, 20px);
}
.svc {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
/* Nicht am Fuss ausrichten: bei unterschiedlich langen Texten saessen die
Nummern sonst auf verschiedenen Hoehen. Der feste Kopfabstand haelt sie
auf einer Linie — in der Vorlage bei 41 Prozent der Kartenhoehe. */
justify-content: flex-start;
min-height: clamp(500px, 38.5vw, 620px);
padding: clamp(200px, 15.9vw, 256px) clamp(24px, 1.9vw, 30px) clamp(24px, 1.9vw, 30px);
background: var(--night);
border: 0;
border-radius: var(--radius-card);
overflow: hidden;
box-shadow: var(--shadow-md);
/* Umkehr der Kontextfarben: dunkle Flaeche im hellen Abschnitt. */
--text: #F5F6F7;
--text-soft: rgba(245,246,247,.80);
--text-faint: rgba(245,246,247,.60);
--rule: rgba(245,246,247,.18);
--accent: var(--amber);
--accent-dark: var(--amber-dark);
}
/* Foto hinter dem Text, mit Verlauf in die Kartenfarbe */
.svc__photo {
position: absolute; inset: 0; z-index: -1;
pointer-events: none;
}
.svc__photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.svc__photo::after {
content: "";
position: absolute; inset: 0;
/* Gegen die Vorlage eingemessen: dort bleibt das Foto bis gut 40 Prozent
der Kartenhoehe klar, die Nummer steht noch auf durchscheinendem Bild,
ab etwa zwei Dritteln ist die Flaeche tief. Der Verlauf ist die einzige
Verdunkelung — kein Filter, keine Deckkraft auf dem Foto. */
background: linear-gradient(180deg,
rgba(12,27,46,0) 0%,
rgba(12,27,46,.03) 30%,
rgba(12,27,46,.35) 38%,
rgba(12,27,46,.68) 44%,
rgba(12,27,46,.88) 50%,
rgba(12,27,46,.97) 58%,
var(--night) 66%);
}
.svc__body { display: contents; }
/* Laufende Nummer mit auslaufender Goldlinie */
.svc__num {
display: flex; align-items: center; gap: 14px;
margin: 0 0 clamp(12px, 1.3vw, 15px);
max-width: none;
font-family: var(--font-data);
font-size: 1.02rem; font-weight: 600;
color: var(--text);
}
.svc__num-rule {
flex: 0 0 auto; width: 46px; height: 1px;
background: var(--amber); opacity: .8;
}
.svc__cat {
margin: 0 0 7px;
font-family: var(--font-data); font-size: .84rem; font-weight: 600;
letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
}
/* Der Kartentitel steht im Entwurf in der Grotesk, nicht in der Condensed —
deshalb hier bewusst gegen die Abschnittsregel gesetzt. */
main > section:not(.hero2):not(.strip2) .svc h3 {
margin: 0 0 clamp(10px, 1.1vw, 13px);
font-family: var(--font-body);
font-weight: 700;
font-size: clamp(1.55rem, 1.1rem + 1vw, 2.05rem);
line-height: 1.1;
letter-spacing: -0.015em;
text-transform: none;
color: var(--text);
}
.svc__text {
margin: 0 0 clamp(16px, 1.6vw, 20px);
max-width: 38ch;
font-size: 1.02rem; line-height: 1.5;
color: var(--text-soft);
}
.svc__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.svc__points li {
display: flex; align-items: center; gap: 13px;
font-size: .98rem; color: var(--text);
}
/* Gefuelltes Zeichen: der Haken sitzt in der Goldscheibe. Die Strichstaerke
2 gilt nur fuer diesen Haken — er ist Teil eines gefuellten Zeichens,
keine freistehende Linienzeichnung. */
.svc__points li svg { width: 22px; height: 22px; flex: none; color: var(--amber); }
/* margin-top:auto statt fester Breiten am Text: die Texte sind
unterschiedlich lang, der Verweis soll aber in allen drei Karten auf
derselben Linie stehen. */
.svc__more { margin: clamp(18px, 1.9vw, 24px) 0 0; padding: 0; margin-top: auto; }
.svc__more a {
display: inline-flex; align-items: center; gap: 10px;
min-height: 0;
font-size: 1rem; font-weight: 700;
color: var(--text); text-decoration: none;
}
.svc__more a svg { width: 20px; height: 20px; color: var(--text); }
.svc__more a:hover { color: var(--amber); text-decoration: none; }
.svc__more a:hover svg { color: var(--amber); transform: translateX(3px); }
@media (max-width: 900px) {
.svc { min-height: 460px; }
}
/* ==========================================================================
MOTION
Die Seite hatte bereits ein Einblenden ueber .reveal und einen
IntersectionObserver, der jedes Element genau einmal ausloest. Dieser
Block baut darauf auf, statt ein zweites System danebenzustellen.
Drei Stufen:
1 Basis jede normale Gruppe: Deckkraft und ein kurzer Weg
2 Charakter Staffelung, Hover an Karten
3 Signature Hero-Bild, Zwei-Wege-Bild, Preisablauf
Alles laeuft ueber transform und opacity; nur die beiden Bildflaechen
nutzen clip-path, und dort ausschliesslich entlang ihrer bereits
vorhandenen Form. Kein Skript im Scrollereignis, keine Dauerbewegung.
========================================================================== */
:root {
--m-fast: .2s;
--m-normal: .5s;
--m-slow: .7s;
/* Weicher Ausklang fuer Reveals, ohne Ueberschwingen. */
--m-ease: cubic-bezier(.22, 1, .36, 1);
--m-shift: 20px; /* Weg fuer normale Gruppen */
--m-shift-sm: 12px; /* Weg innerhalb gestaffelter Reihen */
--m-step: 70ms; /* Abstand zwischen gestaffelten Kindern */
}
/* Der bestehende Block deckelt nur die Dauer. Ohne die Verzoegerungen
mitzunehmen bliebe die Ladefolge im Kopfbereich bis zu einer Sekunde
unsichtbar, obwohl sie gar nicht mehr laeuft. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-delay: 0ms !important;
transition-delay: 0ms !important;
}
}
/* --- Stufe 1: Basis ------------------------------------------------------ */
.reveal {
transform: translateY(var(--m-shift));
transition: opacity var(--m-normal) var(--m-ease),
transform var(--m-normal) var(--m-ease);
}
/* --- Stufe 2: gestaffelte Reihen ----------------------------------------
Der Traeger selbst bleibt stehen, seine Kinder kommen nacheinander. So
entsteht eine Bewegung pro Gruppe statt einer pro Zeile. */
.reveal--seq { opacity: 1; transform: none; transition: none; }
.reveal--seq > * {
opacity: 0;
transform: translateY(var(--m-shift-sm));
transition: opacity var(--m-normal) var(--m-ease),
transform var(--m-normal) var(--m-ease);
}
.reveal--seq.is-in > * { opacity: 1; transform: none; }
.reveal--seq.is-in > *:nth-child(2) { transition-delay: calc(var(--m-step) * 1); }
.reveal--seq.is-in > *:nth-child(3) { transition-delay: calc(var(--m-step) * 2); }
.reveal--seq.is-in > *:nth-child(4) { transition-delay: calc(var(--m-step) * 3); }
.reveal--seq.is-in > *:nth-child(5) { transition-delay: calc(var(--m-step) * 4); }
.reveal--seq.is-in > *:nth-child(6) { transition-delay: calc(var(--m-step) * 5); }
/* Feinere Staffel fuer die Vertrauensleiste unter dem Kopfbereich. */
.strip2 .reveal--seq.is-in > *:nth-child(2) { transition-delay: 50ms; }
.strip2 .reveal--seq.is-in > *:nth-child(3) { transition-delay: 100ms; }
.strip2 .reveal--seq.is-in > *:nth-child(4) { transition-delay: 150ms; }
/* Leistungs- und Vertrauenskarten stehen weiter auseinander. */
.svc__list.is-in > *:nth-child(2),
.trust__cols.is-in > *:nth-child(2) { transition-delay: 80ms; }
.svc__list.is-in > *:nth-child(3),
.trust__cols.is-in > *:nth-child(3) { transition-delay: 160ms; }
/* --- Stufe 3: Ladefolge im Kopfbereich -----------------------------------
Laeuft einmal beim Laden, ohne Skript. Nach gut einer Sekunde steht
alles. Die Bildflaeche oeffnet sich entlang ihrer eigenen Diagonale:
Anfangs- und Endform haben dieselben Eckpunkte, nur die rechten liegen
zu Beginn auf den linken. Die Geometrie aendert sich dadurch nicht. */
@keyframes m-up {
from { opacity: 0; transform: translateY(var(--m-shift)); }
to { opacity: 1; transform: none; }
}
@keyframes m-up-sm {
from { opacity: 0; transform: translateY(var(--m-shift-sm)); }
to { opacity: 1; transform: none; }
}
@keyframes m-hero-media {
from { clip-path: polygon(38.5% 0, 38.5% 0, 0 100%, 0 100%); }
to { clip-path: polygon(38.5% 0, 100% 0, 88% 100%, 0 100%); }
}
@keyframes m-fade { from { opacity: 0; } to { opacity: 1; } }
.hero2__eyebrow { animation: m-up-sm var(--m-normal) var(--m-ease) 60ms both; }
.hero2__headline { animation: m-up var(--m-slow) var(--m-ease) 180ms both; }
.hero2__sub { animation: m-up-sm var(--m-normal) var(--m-ease) 340ms both; }
.hero2__cta { animation: m-up-sm var(--m-normal) var(--m-ease) 440ms both; }
.hero2__region { animation: m-up-sm var(--m-normal) var(--m-ease) 520ms both; }
.trust2 { animation: m-up var(--m-slow) var(--m-ease) 470ms both; }
.hero2__media { animation: m-fade var(--m-normal) var(--m-ease) 120ms both; }
@media (min-width: 1200px) {
/* Nur hier traegt die Flaeche ihre Diagonale — darunter steht clip-path
auf none und ein Aufziehen waere sinnlos. */
.hero2__media {
animation: m-hero-media var(--m-slow) var(--m-ease) 120ms both,
m-fade var(--m-fast) linear 120ms both;
}
}
/* Diese beiden Traeger blenden nicht als Ganzes ein — ihre Teile kommen
einzeln. Die Klasse .reveal bleibt am Element, damit der vorhandene
Beobachter sie weiterhin ausloest. */
.offer.reveal, .reckon.reveal { opacity: 1; transform: none; transition: none; }
/* --- Signature: die beiden Wege zum Angebot ------------------------------
Ein Bild, zwei Aussagen: links das Abfotografieren, rechts die
Besichtigung. Die Maske oeffnet erst den linken Teil, haelt kurz und
gibt dann den rechten frei — die Reihenfolge erklaert das Motiv.
Die Trennung im Bild selbst bleibt unangetastet. */
@keyframes m-offer-media {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
46% { clip-path: polygon(0 0, 44% 0, 44% 100%, 0 100%); }
60% { clip-path: polygon(0 0, 44% 0, 44% 100%, 0 100%); }
100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.offer__media img { will-change: clip-path; }
.offer.is-in .offer__media img { animation: m-offer-media .95s var(--m-ease) both; }
.offer .offer__aside { opacity: 0; transform: translateY(16px);
transition: opacity var(--m-normal) var(--m-ease), transform var(--m-normal) var(--m-ease); }
.offer.is-in .offer__aside { opacity: 1; transform: none; transition-delay: 760ms; }
.offer__steps > li { opacity: 0; transform: translateY(var(--m-shift-sm));
transition: opacity var(--m-normal) var(--m-ease), transform var(--m-normal) var(--m-ease); }
.offer.is-in .offer__steps > li { opacity: 1; transform: none; }
.offer.is-in .offer__steps > li:nth-child(2) { transition-delay: 80ms; }
.offer.is-in .offer__steps > li:nth-child(3) { transition-delay: 160ms; }
.offer.is-in .offer__cta { animation: m-up-sm var(--m-normal) var(--m-ease) 260ms both; }
/* --- Signature: der Preisablauf ------------------------------------------
Karte, Pfeil, Karte, Pfeil — die Kette liest sich als 01 bis 04. Der
Pfeil sitzt jeweils zwischen zwei Karten und kommt eine halbe Stufe
spaeter als die Karte links von ihm. Nach gut 900 ms steht alles. */
.reckon__step {
opacity: 0; transform: translateY(14px);
transition: opacity var(--m-normal) var(--m-ease),
transform var(--m-normal) var(--m-ease);
}
.reckon.is-in .reckon__step { opacity: 1; transform: none; }
.reckon__step::after { opacity: 0; transition: opacity var(--m-fast) linear; }
.reckon.is-in .reckon__step::after { opacity: 1; }
/* Die Staffel gilt nur den Eigenschaften, die das Einblenden traegt:
opacity und transform. Stuende hier ein einzelner Wert, laege er auf
allen Eigenschaften der Karte und bliebe dort dauerhaft liegen — jeder
spaetere Zustandswechsel, auch der unter dem Zeiger, startete dann um
bis zu einer halben Sekunde verspaetet. Die Reihenfolge folgt der
transition-property der Karte:
opacity, transform, translate, scale, box-shadow, border-color, z-index */
.reckon.is-in .reckon__step:nth-child(2) { transition-delay: 160ms, 160ms, 0s, 0s, 0s, 0s, 130ms; }
.reckon.is-in .reckon__step:nth-child(3) { transition-delay: 320ms, 320ms, 0s, 0s, 0s, 0s, 130ms; }
.reckon.is-in .reckon__step:nth-child(4) { transition-delay: 480ms, 480ms, 0s, 0s, 0s, 0s, 130ms; }
/* Beim Verbinder ebenso; seine Reihenfolge ist
opacity, translate, scale, border-color */
.reckon.is-in .reckon__step:nth-child(1)::after { transition-delay: 90ms, 0s, 0s, 0s; }
.reckon.is-in .reckon__step:nth-child(2)::after { transition-delay: 250ms, 0s, 0s, 0s; }
.reckon.is-in .reckon__step:nth-child(3)::after { transition-delay: 410ms, 0s, 0s, 0s; }
/* --- Hover: nur an Geraeten mit echtem Zeiger ---------------------------
Auf Tastgeraeten bleiben solche Zustaende sonst haengen. */
@media (hover: hover) and (pointer: fine) {
/* Navigation: feine Goldlinie statt Farbwechsel allein. Sie waechst aus
der Mitte und schiebt nichts. */
.h2-nav__list a { position: relative; }
.h2-nav__list a::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1.5px; background: var(--signal);
transform: scaleX(0); transform-origin: 50% 50%;
transition: transform var(--m-fast) ease-out;
}
.h2-nav__list a:hover::after,
.h2-nav__list a:focus-visible::after { transform: scaleX(1); }
/* Knoepfe: Ton und Pfeil, sonst nichts. Kein Skalieren, kein Leuchten. */
.btn { transition: background var(--m-fast) ease-out,
border-color var(--m-fast) ease-out,
color var(--m-fast) ease-out,
box-shadow var(--m-fast) ease-out; }
.btn svg:last-child { transition: transform var(--m-fast) ease-out; }
.btn:hover svg:last-child { transform: translateX(3px); }
/* Weiterfuehrende Verweise: nur der Pfeil geht mit. */
.svc__more a svg,
.case__more svg, .cases__more svg, .reviews__link svg {
transition: transform var(--m-fast) ease-out;
}
.svc__more a:hover svg { transform: translateX(4px); }
/* Das Foto in der Leistungskarte atmet leicht, der Textblock steht.
Die Karte selbst hebt sich nicht — sie bleibt liegen. */
.svc__photo img { transition: transform var(--m-slow) var(--m-ease); }
.svc:hover .svc__photo img { transform: scale(1.03); }
/* Belegfotos in der Vertrauensreihe, noch zurueckhaltender. */
.trust__shot img { transition: transform var(--m-slow) var(--m-ease); }
.trust__card:hover + .trust__shot img,
.trust__cols li:hover .trust__shot img { transform: scale(1.02); }
}
/* --- Mobil: kuerzere Wege, kuerzere Dauer, weniger Staffel --------------
Die Masken der beiden Bildflaechen laufen hier nicht: auf schmalen
Geraeten traegt der Kopfbereich ohnehin keine Diagonale, und das
Zwei-Wege-Bild steht dort so klein, dass die Reihenfolge nichts mehr
erklaert. Beide blenden statt dessen einfach ein. */
@media (max-width: 760px) {
:root {
--m-normal: .38s;
--m-slow: .48s;
--m-shift: 12px;
--m-shift-sm: 10px;
--m-step: 45ms;
}
.offer.is-in .offer__media img { animation: m-fade var(--m-normal) linear both; }
.offer.is-in .offer__aside { transition-delay: 220ms; }
.reckon.is-in .reckon__step:nth-child(2) { transition-delay: 90ms, 90ms, 0s, 0s, 0s, 0s, 130ms; }
.reckon.is-in .reckon__step:nth-child(3) { transition-delay: 180ms, 180ms, 0s, 0s, 0s, 0s, 130ms; }
.reckon.is-in .reckon__step:nth-child(4) { transition-delay: 270ms, 270ms, 0s, 0s, 0s, 0s, 130ms; }
.reckon.is-in .reckon__step:nth-child(1)::after { transition-delay: 60ms, 0s, 0s, 0s; }
.reckon.is-in .reckon__step:nth-child(2)::after { transition-delay: 150ms, 0s, 0s, 0s; }
.reckon.is-in .reckon__step:nth-child(3)::after { transition-delay: 240ms, 0s, 0s, 0s; }
.trust2, .hero2__headline { animation-duration: var(--m-normal); }
}
/* --- Bewegung aus: Endzustand sofort ------------------------------------
Der globale Block oben deckelt Dauer und Verzoegerung bereits. Hier
werden zusaetzlich die beiden Masken und die Staffelung stillgelegt,
damit nichts angeschnitten oder unsichtbar stehen bleibt. */
@media (prefers-reduced-motion: reduce) {
.hero2__media,
.offer.is-in .offer__media img { animation: none !important; }
.hero2__eyebrow, .hero2__headline, .hero2__sub, .hero2__cta,
.hero2__region, .trust2, .offer.is-in .offer__cta { animation: none !important; }
.reveal--seq > *, .reckon__step, .offer__steps > li,
.offer .offer__aside { opacity: 1 !important; transform: none !important; }
.reckon__step::after { opacity: 1 !important; }
.svc:hover .svc__photo img,
.trust__cols li:hover .trust__shot img { transform: none; }
}
/* --- Preisablauf: Zustand unter dem Zeiger -------------------------------
Die Karte hebt sich ueber translate, nicht ueber transform: transform
traegt bereits das Einblenden beim Eintritt, und beide Eigenschaften
nebeneinander wuerden sich ueberschreiben. translate liegt eine Ebene
davor und laesst sich unabhaengig takten.
Der Pfeil gehoert als ::after zur Karte links von ihm — beim Zeigen auf
eine Karte reagiert also genau der Pfeil, der von ihr wegfuehrt. Sein
translateY(-50%) bleibt unangetastet, weil translate vor transform
angewendet wird.
Alle Farben stammen aus dem Bestand: das Gold der Marke, hier nur mit
geringerer Deckkraft, und der tiefe Sandton fuer Ziffer und Zeichen.
-------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
.reckon__step {
transform-origin: center center;
/* Die Ebene wird vorab angelegt, damit der erste Zeigerkontakt nicht
noch auf sie warten muss. Vier Karten, kein pauschaler Einsatz. */
will-change: translate, scale;
transition: opacity var(--m-normal) var(--m-ease),
transform var(--m-normal) var(--m-ease),
translate 90ms var(--m-ease),
scale 90ms var(--m-ease),
box-shadow 110ms ease,
border-color 110ms ease,
/* Die Ebene faellt erst zurueck, wenn die Karte wieder
unten ist. Ohne die Verzoegerung schoebe sich beim
schnellen Wechsel kurz die Nachbarkarte darueber. */
z-index 0s linear 110ms;
}
/* scale als eigene Eigenschaft, aus demselben Grund wie translate:
transform traegt hier das Einblenden beim Eintritt. Die Wirkung ist
dieselbe wie transform: translateY(-6px) scale(1.15). */
.reckon__step:hover {
translate: 0 -6px;
scale: 1.15;
z-index: 10;
transition-delay: 0s;
border-color: rgba(217,183,127,.62);
box-shadow: 0 12px 30px rgba(16,35,58,.10),
0 2px 6px rgba(16,35,58,.05);
}
.reckon__step .reckon__icon {
transition: background 110ms ease, color 110ms ease;
}
.reckon__step:hover .reckon__icon {
background: rgba(217,183,127,.42);
color: var(--signal-dark);
}
.reckon__step .reckon__num { transition: color 110ms ease; }
.reckon__step:hover .reckon__num { color: var(--signal-dark); }
/* Der Verbinder ruckt ein Stueck in Laufrichtung mit. */
.reckon__step::after {
transition: opacity var(--m-fast) linear,
translate 90ms var(--m-ease),
scale 90ms var(--m-ease),
border-color 110ms ease;
}
.reckon__step:hover::after {
translate: 3px 0;
border-color: rgba(217,183,127,.62);
}
}
/* Ohne Bewegung bleibt die Karte, wo sie ist; Rahmen, Scheibe und Ziffer
zeigen den Zustand weiterhin an. */
@media (prefers-reduced-motion: reduce) {
.reckon__step:hover { translate: none; }
.reckon__step:hover::after { translate: none; }
}