ohne motion.path) - nur die Linse (Kreis) bekommt die
Vorlagen-Animation: scale [1, 0.45, 1.15, 1] bei times [0, .3, .65, 1],
0.8s, dieselbe Kurve wie die Vorlage (cubic-bezier(.34,1.4,.64,1)) statt
der Standardkurve der Seite - der kurze Uebersprung ist hier bewusst
staerker als sonst (Kamera "schnappt" zu, wie ein Verschluss). */
.nav-dd-icon-cam__lens { transform-box: fill-box; transform-origin: center; transition: transform .3s ease; }
.nav-dd-item:hover .nav-dd-icon-cam__lens { animation: nav-dd-cam-snap .8s cubic-bezier(.34,1.4,.64,1) both; }
@keyframes nav-dd-cam-snap {
0% { transform: scale(1); }
30% { transform: scale(.45); }
65% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-cam__lens { animation: none; }
}
/* ── MOBILE-MENÜ (Hamburger) ─────────────────────────────────────────────
Unter 899px sind .header-nav und .header-cta per display:none ausgeblendet
- ohne Ersatz waeren Navigation und der CTA-Knopf auf dem Handy nicht
erreichbar. Der Burger oeffnet ein Panel von rechts mit denselben Punkten.
Farblogik des Burgers folgt derselben Kaskade wie .nav-btn (Basis dunkel,
.over-dark hell, Dark-Mode-Override per --dm-*), sonst waere er auf dem
hellen Hero-Bild oder ueber dunklen Sektionen unsichtbar. */
.nav-burger {
display: none;
width: 44px; height: 44px; padding: 0; border: none; background: none;
border-radius: 10px;
cursor: pointer; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; color: #111827; -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
#site-header.over-dark .nav-burger { color: #fff; filter: drop-shadow(0 1px 5px rgba(0,0,0,.46)); }
/* Burger zu X (verfeinert 25.08.2026).
Geometrie: drei 2px-Linien mit 5px Abstand liegen mittig bei y=1/8/15, die
aeusseren muessen also genau 7px auf die Mitte zuwandern. Die mittlere
verschwindet nicht nur, sie zieht sich zur Mitte zusammen - das laesst die
beiden Bewegungen wie eine wirken statt wie zwei nebeneinander. .26s auf
der Standardkurve des Projekts, bewusst ohne Ueberschwingen. */
.nav-burger__line {
width: 22px; height: 2px; border-radius: 2px; background: currentColor;
transition: transform .26s cubic-bezier(.23,1,.32,1), opacity .18s ease;
}
.nav-burger.active .nav-burger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.active .nav-burger__line:nth-child(2) { opacity: 0; transform: scaleX(.25); }
.nav-burger.active .nav-burger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
.nav-burger__line { transition: opacity .18s ease; }
}
/* Panel liegt unterhalb der Kopfzeile (top:var(--nav-height)), nicht ueber
ihr - so bleiben Logo und der zu X gewordene Burger im Kopf immer klickbar,
ohne mit dem Stapelkontext der Kopfzeile (z-index:50) ringen zu muessen. */
/* Umbau 25.08.2026 (Julian): das Panel kam vorher als volle Spalte von
rechts herein (translateX(100%), top:0 bis bottom:0). Jetzt faehrt es als
kompakte Lade von oben herunter, nur so hoch wie seine Punkte.
overflow:hidden am Overlay ist dabei der Trick: das Panel steht mit
translateY(-100%) exakt eine Panelhoehe ueber der Oberkante des Overlays -
also hinter der Kopfzeile - und wird dort abgeschnitten. Es schiebt sich
beim Oeffnen sichtbar unter der Kopfzeile hervor, ohne sie zu ueberdecken.
Nebeneffekt, der die Mobilpruefung mit betrifft: seitlich ragt gar nichts
mehr hinaus, das geschlossene Panel stand vorher als 86vw breite Flaeche
rechts ausserhalb des Fensters.
Ton: bewusst fest dunkel statt var(--bg), in beiden Themes. Das Panel
haengt direkt an der Kopfzeile, die im offenen Zustand denselben Ton
bekommt (.menu-open weiter unten) - zusammen eine durchgehende dunkle
Flaeche statt zweier verschiedener Helligkeiten. Die Schriftfarben unten
sind entsprechend auf hell gestellt. */
.mobile-menu-overlay {
position: fixed; inset: var(--nav-height) 0 0; z-index: 8500;
overflow: hidden;
background: rgba(3,6,12,.72);
-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s ease, visibility 0s linear .2s;
}
.mobile-menu-overlay.open {
opacity: 1; visibility: visible; pointer-events: all;
transition: opacity .2s ease, visibility 0s linear 0s;
}
.mobile-menu {
position: absolute; top: 0; left: 0; right: 0; bottom: auto;
max-height: 100%;
/* Volldeckend statt rgba(10,15,26,.98) (Julian, 26.08.2026): bei 98% Deckkraft
blendet backdrop-filter darunter noch 2% von dem durch, was hinter dem Panel
liegt - und dahinter liegt an dieser Stelle das helle Hero-Foto. Die 2% reichen,
um das Panel sichtbar heller/blaeulicher wirken zu lassen als die Kopfzeile
direkt darueber, obwohl beide denselben rgba-Wert eintragen: die Kopfzeile
blendet mit einem anderen Bildausschnitt (mal hell, mal dunkel, je nach
Scrollposition) - der Ton "wandert" dadurch und trifft die Kopfzeile nie exakt.
Mit voller Deckkraft bleibt hinter beiden nichts mehr sichtbar, der Ton ist
dadurch garantiert identisch, unabhaengig vom Hintergrund. backdrop-filter faellt
deshalb ganz weg - es haette ohnehin nichts mehr zu weichzeichnen. */
background: #0A0F1A;
color: #F3F5F8;
border-bottom: 1px solid rgba(255,255,255,.08);
box-shadow: 0 26px 50px -22px rgba(0,0,0,.7);
display: flex; flex-direction: column;
transform: translateY(-100%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
overscroll-behavior: contain;
}
.mobile-menu-overlay.open .mobile-menu { transform: none; }
/* min-height:0 ohne flex:1 (bewusst): der Bereich ist nur so hoch wie seine
Punkte, scrollt aber bei kleinen Fenstern. Opacity-Fade mit Verzoegerung:
die Punkte kommen einen Tick nach dem Panel, damit das Aufklappen gefuehrt
wirkt statt alles auf einmal. */
.mobile-menu__body {
min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 10px 12px 14px;
display: flex; flex-direction: column; gap: 2px;
opacity: 0; transition: opacity .18s ease .04s;
}
.mobile-menu-overlay.open .mobile-menu__body { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.mobile-menu, .mobile-menu__body { transition: none; }
}
.mobile-menu__link, .mobile-menu__group-btn {
flex: none;
display: flex; align-items: center; justify-content: space-between; width: 100%;
text-align: left; background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: 16.5px; font-weight: 700; color: #F3F5F8;
padding: 13px 12px; border-radius: 10px;
transition: background-color .16s ease;
}
.mobile-menu__link:active, .mobile-menu__group-btn:active { background: rgba(255,255,255,.09); }
.mobile-menu__link:hover, .mobile-menu__group-btn:hover { background: rgba(255,255,255,.07); }
.mobile-menu__group-btn .chev { font-size: 15px; transition: transform .22s cubic-bezier(.22,.61,.36,1); }
.mobile-menu__group-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* Akkordeon: hoch genug fuer alle 8 Leistungspunkte (8x44 + Polster ~= 380).
Der Opacity-Fade fuehrt das Auge, der max-height-Rest-Weg faellt dadurch
nicht als Ruckler auf. Ist die Summe groesser als der Schirm, scrollt
.mobile-menu__body. flex:none, sonst quetscht der Flex-Container den offenen
Submenu-Block unter seine Inhaltshoehe (overflow:hidden hebt min-height:auto auf). */
.mobile-submenu {
flex: none;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .24s cubic-bezier(.4,0,.2,1), opacity .16s ease;
display: flex; flex-direction: column; padding-left: 8px;
}
.mobile-submenu.open { max-height: 440px; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.mobile-submenu { transition: opacity .16s ease; }
}
.mobile-submenu a {
display: block; padding: 11px 12px; border-radius: 8px; text-decoration: none;
font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.3; color: #9FB0C8;
}
.mobile-submenu a:active { background: rgba(255,255,255,.09); color: #F3F5F8; }
.mobile-submenu a:hover { background: rgba(255,255,255,.07); color: #F3F5F8; }
.mobile-menu__foot { padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,.10); flex-shrink: 0; }
.mobile-menu__foot .btn-primary { width: 100%; justify-content: center; }
/* Kopfzeile traegt den Ton des Panels, solange es offen ist - sonst haengt
eine dunkle Lade unter einer hellen oder durchsichtigen Leiste.
Der zweite Selektor ist kein Versehen: assets/css/scrolly-hero.css setzt
#site-header:not(.scrolled) auf transparent. Das ist gleich spezifisch wie
#site-header.menu-open und wird als externe Datei NACH diesem Block
geladen - es gewinnt also, solange oben am Seitenanfang nicht gescrollt
wurde, und genau dort ist die Leiste durchsichtig. Mit dem :not() steigt
die Spezifitaet um eine Klasse und schlaegt die Regel, ohne dass hier
!important stehen muss. Die erste Zeile deckt weiterhin den gescrollten
Fall ab. */
#site-header.menu-open,
#site-header.menu-open:not(.scrolled) {
/* Volldeckend statt rgba(10,15,26,.98), aus demselben Grund wie bei .mobile-menu
direkt darunter (siehe Kommentar dort): sonst bleibt der Ton der Kopfzeile vom
durchscheinenden Hero-Bild abhaengig und trifft den des Panels nie exakt. */
background: #0A0F1A;
border-bottom-color: transparent;
box-shadow: none;
}
#site-header.menu-open .nav-burger { color: #fff; filter: none; }
@media (min-width: 900px) {
.mobile-menu-overlay, .nav-burger { display: none !important; }
}
/* Responsive */
@media (max-width: 980px) {
.about-inner { grid-template-columns: 1fr; align-items: start; }
.about-grid { height: auto; grid-template-rows: auto auto; }
.about-grid-img { height: auto; aspect-ratio: 3 / 2; }
.features-grid { grid-template-columns: repeat(2,1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) and (max-width: 1180px) {
.header-inner { gap: 16px; padding: 0 24px; height: 80px; }
.header-logo img { height: 56px; }
.header-nav { gap: 2px; }
.nav-btn, .nav-dropdown-btn { font-size: 14px; padding: 8px 11px; }
.header-cta .btn-primary { font-size: 14px; padding: 11px 18px; }
}
@media (max-width: 899px) {
.header-nav { display: none; }
.nav-burger { display: flex; }
.features-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.header-inner {
grid-template-columns: minmax(0, 1fr) auto;
height: 72px;
gap: 8px;
padding: 0 12px;
}
.header-logo { min-width: 0; }
.header-logo img { height: 42px; max-width: 100%; }
.header-cta .btn-primary {
padding: 10px 12px;
font-size: 12px;
white-space: nowrap;
}
.features-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
/* ── DWC PALETTE — GOLD & PREMIUM ACCENTS ── */
.ps-card.problem .ps-card-title { color: var(--muted); }
.ps-card.problem .ps-badge { background: #ECEDF1; color: var(--muted); }
.ps-card.problem .ps-list li { color: var(--muted); font-weight: 500; }
.ps-card.problem .ps-ico { background: #ECEDF1; color: var(--muted-fg); }
.project-card { border-color: var(--border); }
.nav-dd-item:hover { background: rgba(36,114,232,0.05); }
/* ═══════════ DWC REDESIGN 2026 · Sektionen 2–9 · rev2 ═══════════ */
:root{ --rd-primary:#0F1B2D; --rd-blue:#2563EB; --rd-muted:#5F5E5A; --rd-border:#E5E7EB; --rd-gold:#CA8A04; }
.ti{ font-size:20px; line-height:1; display:inline-flex; }
/* Eyebrow badges (unified) */
.rd-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; padding:5px 14px; border-radius:20px; font-weight:500; white-space:nowrap; }
.rd-eyebrow.blue{ background:#EFF6FF; color:#2563EB; }
.rd-eyebrow.red { background:#FFE4E6; color:#DC2626; }
.rd-eyebrow .ti{ font-size:13px; }
/* harmonise legacy eyebrow in kept sections (Kontakt) */
/* Two-line section sub (S4 + S5) */
.rd-sub2{ margin:14px auto 0; text-align:center; max-width:680px; font-size:16px; line-height:1.6; color:var(--rd-muted); }
.rd-sub2 b{ display:block; color:var(--rd-primary); font-weight:600; margin-bottom:4px; }
/* Neutralise legacy decorations on kept sections */
.about-section::before{ display:none !important; }
.about-section{ overflow:visible; }
/* Editorial-Label (Linie + Sperrschrift) — von Seite 3 (“Was uns ausmacht”) verwendet. */
.rd-diag-label{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--rd-blue); }
/* ─── S3 · ÜBER DWC (recolor) ─── */
.about-section .section-h2{ color:var(--rd-primary); font-weight:500; font-size:clamp(34px,3.8vw,48px); letter-spacing:-0.02em; }
.about-section .section-body{ color:#3D3C38; font-size:16px; line-height:1.75; max-width:520px; margin-top:20px; }
.about-section .about-value{ background:#fff; border:1px solid var(--rd-border); box-shadow:0 1px 2px rgba(15,27,45,0.03); border-radius:10px; }
.about-section .about-value:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.07); border-color:var(--rd-border); }
.about-section .av-title{ color:var(--rd-primary); font-weight:700; }
.about-section .av-desc{ color:var(--rd-muted); }
/* ─── S4 · PROZESS (stacked steps) ─── */
.rd-process-section{ background:var(--bg-3); padding:clamp(56px,7vw,80px) 24px; }
/* ─── SEITE 4 · ABLAUF ─── */
.s4-ablauf{ position:relative; overflow:hidden; z-index:2;
padding: clamp(60px,6vw,92px) var(--gutter) clamp(28px,2.6vw,40px);
}
.s4-inner{ max-width:var(--content-max); margin:0 auto; }
/* Kopf ueber die gestrichelte Linie gelegt (27.08.2026).
Karte 1 sitzt bewusst neben der Ueberschrift, ihre Verbindung zu Karte 2
laeuft dadurch quer durch das Kopfband. Seit die Spalten weiter
auseinanderstehen (13%/87%) ist dieser Bogen flacher und traf den
Fliesstext mittig - die Linie kreuzte sichtbar durch "Von der ersten Idee
bis zur fertigen Website...".
z-index statt Umleitung: die Linie ist ein Hintergrundelement, hinter dem
Text gelesen wirkt sie wie eine Ebene darunter statt wie ein Kreuzen.
Ein Ausweichbogen haette sie stattdessen unter den Text ziehen muessen und
dort den gleichmaessigen Schwung der anderen drei Boegen gebrochen.
Gefahrlos, weil sich Karten und Kopftext nicht ueberlappen: die Karten
stehen bei 293-607px, Ueberschrift und Unterzeile mittig ab 630px. */
.s4-head{ text-align:center; position:relative; z-index:2; }
/* Overline blau statt gold (27.08.2026, Leo). Nimmt --dwc-action-blue, also
denselben Ton wie die Overline der Bewertungs-Sektion (.s6-label) und der
CTA am Sektionsende - Gold bleibt in dieser Sektion jetzt ausschliesslich
der Unterschrift vorbehalten. */
.s4-eyebrow{ display:inline-block; font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--dwc-action-blue,#0757F7); }
.s4-h{ margin-top:8px; font-family:"Inter",system-ui,-apple-system,sans-serif; font-weight:600; font-size:clamp(38px,4.2vw,58px); line-height:1.05; letter-spacing:-0.03em; text-wrap:balance; color:#122344; }
.s4-sub{ margin:12px auto 0; max-width:660px; font-family:"Inter",system-ui,-apple-system,sans-serif; font-weight:600; font-size:16.5px; line-height:1.75; letter-spacing:-0.015em; color:#4C5A70; }
/* Einspaltig seit 26.08.2026 (Julian): das Kontaktblatt rechts ist raus, der
Zeitstrahl bekommt die volle Sektionsbreite. War bis dahin ein
Zwei-Spalten-Grid (Zeitstrahl links, feste 300-380px rechts fuers
Kontaktblatt) - alter Stand samt allen .s4-collab-*-Regeln in
_backup/2026-08-26-ablauf-kontaktblatt-entfernt/index.html.
Kein Grid mehr noetig, nur noch ein einzelnes Kind (#dwc-howitworks-root). */
.s4-layout{
position:relative;
/* 72px -> 44px am 03.09.2026 (Julian, Runde 8b): Kettenabstand ist auf
seinen Wunsch wieder auf 46px pro Reihe gelockert, der Ausgleich dafuer
kommt aus reinem Weissraum hier und bei .s4-h/.s4-sub - kein Text
gekuerzt, siehe how-it-works.tsx Runde 8b fuer den Kartenteil. */
margin:clamp(28px,3.2vw,44px) auto 0;
}
/* Hier stand bis 27.08.2026 eine Zentrier-Korrektur: die Buehne der
Komponente wurde per transform:translateX(6.9%) nach rechts geschoben,
weil die fuenf Karten damals bewusst linkslastig in ihr sassen (rechts
daneben stand bis 26.08.2026 das Kontaktblatt).
Die Regel ist ersatzlos entfernt, aus zwei Gruenden:
1. Sie war seit dem Breiten-Umbau ohnehin wirkungslos. Ihr Selektor hing
an der Klasse .max-w-[1000px]; die Buehne in how-it-works.tsx traegt
seit Runde 2 aber max-w-[1360px]. Nachgemessen: kein Element auf der
Seite trifft den Selektor mehr.
2. Sie waere jetzt auch sachlich falsch. Die Karten stehen seit Runde 4
spiegelbildlich bei 13% und 87% - der Cluster ist in seiner Buehne
damit von sich aus mittig, jede zusaetzliche Verschiebung wuerde ihn
wieder aus der Mitte holen. */
/* Cluster unterhalb 1150px verkleinern (27.08.2026).
Die Karten sind 280px breit, gedreht rund 314-321px. Die Buehne skaliert
mit dem Fenster, die Karten nicht - unterhalb von etwa 1150px ragen sie
deshalb ueber deren Rand hinaus und wurden von body{overflow-x:clip}
lautlos abgeschnitten. Nachgemessen VOR dieser Regel: 1280px sauber
(29-32px Luft), 1024px 6-9px abgeschnitten, 768px 41-45px.
Warum skalieren statt die Karten nach innen ruecken: die gestrichelte
Linie steckt in einer viewBox mit preserveAspectRatio="none", ihre
Endpunkte haengen also an denselben Prozentwerten wie die Karten. Ein
Verschieben per Media Query wuerde die Karten bewegen, die Linie aber
nicht - die Boegen endeten dann neben den Nadeln. Ein transform auf der
gemeinsamen Buehne nimmt beide zusammen mit, die Zuordnung bleibt exakt.
Die Hoehe muss mitskaliert werden: transform veraendert den Platzbedarf
im Layout nicht, sonst bliebe unter dem verkleinerten Cluster genau der
fehlende Rest als Leerraum stehen. --md-height setzt die Komponente
selbst als Inline-Variable.
Drei Stufen statt fliessend: eine Skalierung, die stufenlos an der
Fensterbreite haengt, laesst sich in CSS nicht ausdruecken - calc() kann
eine Laenge nicht durch eine Laenge teilen, und scale() braucht eine
Zahl. Ab 1150px greift keine der Regeln, dort steht der Cluster
unveraendert in Originalgroesse. */
@media (min-width:768px) and (max-width:1149px){
#dwc-howitworks-root .max-w-\[1360px\] .max-w-\[1360px\]{
transform:scale(var(--dwc-cluster-scale));
transform-origin:top center;
height:calc(var(--md-height) * var(--dwc-cluster-scale));
}
}
@media (min-width:1024px) and (max-width:1149px){
#dwc-howitworks-root .max-w-\[1360px\] .max-w-\[1360px\]{ --dwc-cluster-scale:.94; }
}
@media (min-width:900px) and (max-width:1023px){
#dwc-howitworks-root .max-w-\[1360px\] .max-w-\[1360px\]{ --dwc-cluster-scale:.87; }
}
@media (min-width:768px) and (max-width:899px){
#dwc-howitworks-root .max-w-\[1360px\] .max-w-\[1360px\]{ --dwc-cluster-scale:.80; }
}
/* Schritt-Felder: fünf ruhige Karten, große Gold-Nummern, keine Icons.
Alle Maße hängen an diesen vier Variablen — die Verbindungsstriche zwischen den
Karten rechnen ihre Position daraus, damit sie exakt auf Nummernhöhe sitzen. */
.s4-steps{
--s4-gap: clamp(16px, 2.1vw, 36px);
--s4-num: clamp(48px, 4.4vw, 70px);
--s4-pad-t: clamp(26px, 2.3vw, 34px);
position:relative; margin:clamp(48px,5vw,72px) auto 0;
display:grid; grid-template-columns:1fr 1.1fr 1fr 1fr 1fr; gap:0 var(--s4-gap);
align-items:stretch;
}
.s4-step{
position:relative; text-align:left;
padding:var(--s4-pad-t) clamp(16px,1.4vw,23px) clamp(22px,2vw,29px);
border:1px solid rgba(18,35,68,0.16); border-radius:12px;
}
/* Gestrichelte Verbindung in der Rasterlücke, exakt auf halber Nummernhöhe.
Alle fünf Karten sind über align-items:stretch im Grid gleich hoch, dadurch
liegen alle vier Segmente exakt auf einer Linie — kein durchgehender Strich,
die Karten bleiben die Struktur. top:50% + translateY(-50%) zentriert auf der
gesamten Kartenhöhe (nicht mehr nur auf der Nummer), unabhängig von Strichdicke
oder unterschiedlich langem Karteninhalt. */
.s4-step:not(:last-child)::after{
content:''; position:absolute; left:100%; width:var(--s4-gap);
top:50%;
transform:translateY(-50%);
border-top:3px dashed rgba(176,134,47,0.72);
}
/* 01 tritt zurück: gleiche Geometrie, nur leiser in Kontur und Nummer. */
.s4-step--optional{ border-color:rgba(18,35,68,0.11); }
.s4-step--optional .s4-no{ opacity:.72; }
/* 02 ist der Einstieg. Bewusst dieselbe Zeilenhöhe wie die anderen vier — die
Hervorhebung trägt allein Kontur, Marke und Aktionselement, kein Höhenversatz.
(Bis 22.08.2026 ragte die Karte per margin-block heraus; dadurch lag das
Verbindungssegment 02→03 zwölf Pixel höher als die übrigen drei.) */
.s4-step--start{
border-color:rgba(176,134,47,0.58);
background:rgba(255,255,255,0.5);
box-shadow:0 1px 2px rgba(18,35,68,0.03);
}
/* Hover: nur für echte Zeiger — auf Touch bliebe der Zustand nach dem Tippen
kleben. scale() verändert kein Layout, die Nachbarkarten bleiben stehen.
Der Ursprung liegt bewusst auf dem Ansatzpunkt der Verbindungslinie (rechte
Kante, Kartenmitte): die Linie ist ein Kind der Karte und würde sonst
mitskaliert — gemessen 1,85 px zur Seite und 1,55 px senkrecht, womit die
gemeinsame Achse der vier Segmente beim Überfahren wieder bräche. Muss mit
dem top:50% der Linie oben mitgehen, sonst reißt der Ursprung wieder ab. */
@media (hover:hover) and (pointer:fine){
.s4-step{
transition:transform .3s cubic-bezier(.22,1,.32,1);
transform-origin:100% 50%;
}
.s4-step:hover{ transform:scale(1.015); z-index:1; }
}
@media (prefers-reduced-motion:reduce){
.s4-step{ transition:none; }
.s4-step:hover{ transform:none; }
}
/* Marken oben auf der Kante: „Optional" grau zurückgenommen, „Direkt hier starten" gold gefüllt. */
.s4-flag{
position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
padding:5px 14px; border-radius:999px; white-space:nowrap;
font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
background:#E4DDCE; color:#68624F;
}
.s4-step--start .s4-flag{ background:#A98230; color:#FBF7EF; }
.s4-no{ display:block; font-family:var(--font-serif); font-style:italic; font-weight:600; font-size:var(--s4-num); line-height:1; color:#B0862F; }
.s4-rule{ display:block; height:1px; margin:clamp(20px,1.9vw,27px) 0 clamp(14px,1.3vw,19px); background:rgba(176,134,47,0.42); }
/* Zwei Zeilen Mindesthöhe: die Titel sind mal ein-, mal zweizeilig ("Umsetzung"
gegen "Feedback & Feinschliff"). Ohne das starten die Beschreibungen der fünf
Karten auf zwei verschiedenen Höhen und die Reihe wirkt unruhig. */
.s4-t{ font-family:var(--font-serif); font-weight:600; font-size:clamp(17.5px,1.35vw,20px); line-height:1.32; min-height:2.64em; color:#122344; }
/* 13px statt 13.5: bei 13.5 kippten „Feedback & Feinschliff" und „Livegang &
Begleitung" um jeweils eine Zeile mehr um als in der Vorlage. */
.s4-d{ margin:clamp(10px,1vw,14px) 0 0; font-size:13px; line-height:1.7; color:#54617A; }
/* Aktionselement im Feld: dezent umrandet statt gefüllte Fläche. Der Text nennt
bewusst das Ziel und nicht noch einmal den Wortlaut der Marke darüber. */
.s4-start{
margin-top:clamp(14px,1.4vw,20px); display:inline-flex; align-items:center; gap:8px;
padding:9px 14px; border:1px solid rgba(176,134,47,0.45); border-radius:999px;
background:rgba(255,255,255,0.62); text-decoration:none; white-space:nowrap;
font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#A87A22;
transition:background .15s ease, border-color .15s ease;
}
.s4-start .ti{ font-size:14px; transition:transform .15s ease; }
.s4-start:hover{ background:#fff; border-color:rgba(176,134,47,0.75); }
.s4-start:hover .ti{ transform:translateX(2px); }
.s4-start:focus-visible{ outline:2px solid #A87A22; outline-offset:3px; }
/* Kompakter persönlicher Abschluss: Der Testimonial-Switcher schließt den
Ablauf bewusst allein ab. Der Anfrage-CTA folgt erst nach den echten
Kundenstimmen; dort ist der inhaltliche Übergang zur Kontaktaufnahme klarer.
Der kleinere Abstand kürzt die Ablaufsektion zusätzlich, ohne das Zitat an
die Timeline zu drücken. */
.s4-pledge{ margin:0 auto; max-width:720px; text-align:center; }
/* Testimonial-Switcher (30.08.2026) - ersetzt Zitat+Signatur 1:1 nach
vorgegebener React-Referenzkomponente, nachgebaut in normalem HTML/CSS/JS
(kein React/Tailwind im Projekt, JS siehe Skriptteil). Die shadcn-Tokens
der Vorlage sind auf die bereits hier verwendeten DWC-Farben gemappt:
foreground -> #030D1F (wie .s4-h/.s4-t), muted-foreground -> #4B5563 (der
alte .s4-quote/.s4-sigrole-Ton), background -> #fff, die 6%-Anfuehrungs-
zeichen und die Hover-Flaeche rechnen beide von #030D1F aus (die Vorlage
macht genau das mit text-foreground/[0.06]). Kein Dark-Override noetig:
.s4-ablauf ist per Farbdramaturgie weiter unten ohnehin in beiden Themes
hell (galt schon fuer das alte Zitat, s. Kommentar dort). */
.s4t{ max-width:1300px; } /* dritte Veredelungsrunde (13.09.2026): breiter Container, damit das Zitat auf 2 statt 4 Zeilen laeuft - ueberschreibt .s4-pledge (720px) nur fuer diese eine Section, per Kaskade (steht spaeter im Stylesheet) */
.s4t-quote-wrap{ position:relative; padding:0 64px; }
.s4t-mark{ position:absolute; font-family:var(--font-serif); font-size:148px; line-height:1; color:#D5D8E0; pointer-events:none; user-select:none; } /* dritte Veredelungsrunde: noch etwas praesenter + weiter aussen zum breiteren Zitat, weiterhin ohne Einfluss auf die Sektionshoehe (absolut positioniert) */
.s4t-mark--l{ left:-40px; top:-48px; }
.s4t-mark--r{ right:-40px; bottom:-60px; }
.s4t-quote{ margin:0; font-family:var(--font-serif); font-size:clamp(27px,3.24vw,50px); font-weight:500; line-height:1.12; color:#111A2E; transition:opacity .4s ease-out, filter .4s ease-out, transform .4s ease-out; }
.s4t-quote.is-swapping{ opacity:0; filter:blur(4px); transform:scale(.98); }
.s4t-role{ margin:26px 0 0; font-size:11.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:#6F7787; transition:opacity .5s ease-out, transform .5s ease-out; }
.s4t-role.is-swapping{ opacity:0; transform:translateY(8px); }
.s4t-avatars{ margin-top:22px; display:flex; align-items:center; justify-content:center; gap:8px; }
.s4t-pill{
display:inline-flex; align-items:center;
padding:2px; border:0; border-radius:999px; background:transparent; cursor:pointer;
transition:background-color .5s cubic-bezier(.4,0,.2,1), padding .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1);
}
.s4t-pill:hover:not(.is-active){ background:rgba(3,13,31,.06); }
.s4t-pill.is-active{ background:#030D1F; box-shadow:0 6px 16px -8px rgba(3,13,31,.5); }
.s4t-pill.is-active, .s4t-pill:hover:not(.is-active){ padding:8px 16px 8px 8px; }
.s4t-avatar{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; transition:box-shadow .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1); }
.s4t-pill.is-active .s4t-avatar{ box-shadow:0 0 0 2px rgba(255,255,255,.3); }
.s4t-pill:hover:not(.is-active) .s4t-avatar{ transform:scale(1.05); }
.s4t-name-wrap{ display:grid; grid-template-columns:0fr; opacity:0; margin-left:0; overflow:hidden; transition:grid-template-columns .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1), margin-left .5s cubic-bezier(.4,0,.2,1); }
.s4t-pill.is-active .s4t-name-wrap, .s4t-pill:hover:not(.is-active) .s4t-name-wrap{ grid-template-columns:1fr; opacity:1; margin-left:8px; }
.s4t-name{ display:block; min-width:0; overflow:hidden; white-space:nowrap; font-size:14px; font-weight:500; color:#030D1F; transition:color .3s ease; }
.s4t-pill.is-active .s4t-name{ color:#fff; }
@media (prefers-reduced-motion: reduce){
.s4t-quote, .s4t-role, .s4t-pill, .s4t-avatar, .s4t-name-wrap, .s4t-name{ transition:none; }
}
.s4-transition-bar.is-dark .s4t-quote{ color:#FFFFFF; }
.s4-transition-bar.is-dark .s4t-role{ color:rgba(255,255,255,.66); }
.s4-transition-bar.is-dark .s4t-mark{ color:rgba(255,255,255,.28); }
.s4-transition-bar.is-dark .s4t-pill:hover:not(.is-active){ background:rgba(255,255,255,.1); }
.s4-transition-bar.is-dark .s4t-pill.is-active{ background:#FFFFFF; }
.s4-transition-bar.is-dark .s4t-pill.is-active .s4t-name{ color:#030D1F; }
.s4t-quote, .s4t-role, .s4t-mark, .s4t-pill.is-active, .s4t-name{ transition-property:color, background-color, opacity, filter, transform, padding, box-shadow; }
@media(min-width:1025px){
/* Übergang S3→S4 kompakter (−~30%): S4 rückt hoch, Crossfade bleibt */
.about-section{ padding-bottom:clamp(64px,5.6vw,81px); }
.s4-ablauf{ padding-top:clamp(36px,3.6vw,52px); }
}
/* Fünf Spalten brauchen echte Breite: unterhalb davon reicht die Kartenbreite nicht
mehr für die Startmarkierung in Schritt 02 (Text bricht um) und die Beschreibungen
zerfallen in Vierzeiler. Deshalb hier stapeln statt quetschen — eigener Grenzwert,
weil der Papierhintergrund weiter unten bei 1024px seinen eigenen hat. */
@media(max-width:1279px){
.s4-steps{ grid-template-columns:1fr; gap:12px; max-width:620px; }
.s4-step{
display:grid; grid-template-columns:58px minmax(0,1fr); column-gap:16px;
padding:20px 20px 22px;
}
.s4-step:not(:last-child)::after{ display:none; }
/* Marke sitzt links auf der Kante — mittig wirkt sie über linksbündigem Text verrutscht */
.s4-flag{ left:20px; transform:translateY(-50%); }
.s4-no{ grid-column:1; grid-row:1 / -1; align-self:center; font-size:34px; text-align:right; }
.s4-rule{ display:none; }
/* Gestapelt steht jede Karte für sich — die Mindesthöhe wäre hier nur Leerraum. */
.s4-t{ grid-column:2; font-size:18px; min-height:0; }
.s4-d{ grid-column:2; margin-top:6px; }
/* justify-self: sonst zieht das Grid die Markierung auf die volle Spaltenbreite */
.s4-start{ grid-column:2; justify-self:start; margin-top:13px; }
}
/* Mobile/Tablet: vertikale Liste */
@media(max-width:1024px){
.s4-ablauf{ padding-bottom:clamp(28px,6vw,40px); }
.s4-pledge{ text-align:center; }
}
.rd-proc{ max-width:1080px; margin:clamp(34px,4vw,52px) auto 0; position:relative; padding-left:34px; }
/* Scroll-Fortschrittslinie: Spur + Füllung (Höhe via --proc-progress aus JS) */
.rd-proc::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--rd-border); border-radius:2px; }
.rd-proc::after{ content:''; position:absolute; left:0; top:0; width:2px; height:var(--proc-progress,0%); background:var(--rd-blue); border-radius:2px; transition:height .25s ease-out; }
.rd-step{ position:relative; padding:34px 0; border-bottom:1px solid var(--rd-border); overflow:visible; display:grid; grid-template-columns:88px 1fr 340px; gap:clamp(20px,3vw,44px); align-items:center; }
.rd-step:last-child{ border-bottom:none; }
/* Zahl versetzt: ungerade Schritte links (01,03,05), gerade rechts (02,04) — Zahl ist eigene Spalte, liegt NIE hinter dem Text */
.rd-step.num-right .rd-step-num{ order:1; }
.rd-step.num-right .rd-step-content{ order:2; }
.rd-step.num-right .rd-step-visual{ order:3; }
.rd-step.num-left{ grid-template-columns:340px 1fr 88px; }
.rd-step.num-left .rd-step-visual{ order:1; }
.rd-step.num-left .rd-step-content{ order:2; }
.rd-step.num-left .rd-step-num{ order:3; }
.rd-step-num{ font-size:clamp(48px,5vw,64px); font-weight:800; line-height:1; color:rgba(202,138,4,0.4); text-align:center; user-select:none; transition:color .3s ease, transform .3s ease; }
.rd-step.is-active .rd-step-num{ color:#CA8A04; transform:scale(1.06); }
.rd-step-content{ position:relative; z-index:1; }
.rd-step-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rd-step-head .ti{ font-size:24px; color:var(--rd-blue); flex-shrink:0; }
.rd-step-title{ font-size:18px; font-weight:600; color:var(--rd-primary); }
.rd-step-badge{ display:inline-flex; align-items:center; background:#EFF6FF; color:#2563EB; font-size:11px; font-weight:500; padding:2px 8px; border-radius:10px; }
.rd-step-body{ margin-top:11px; font-size:15px; line-height:1.75; color:var(--rd-muted); max-width:580px; }
.rd-step-body b{ color:var(--rd-primary); font-weight:600; }
@media(max-width:860px){
.rd-proc{ padding-left:22px; }
.rd-step, .rd-step.num-left{ grid-template-columns:1fr; gap:16px; }
.rd-step .rd-step-num, .rd-step.num-left .rd-step-num{ order:1; text-align:left; font-size:40px; }
.rd-step .rd-step-content, .rd-step.num-left .rd-step-content{ order:2; }
.rd-step .rd-step-visual, .rd-step.num-left .rd-step-visual{ order:3; max-width:360px; }
}
/* ─── Prozess-Mini-Visuals (pv-*) — reine CSS-Mockups, dark-mode-fähig ─── */
.rd-step-visual{ position:relative; z-index:1; }
.pv{ background:#fff; border:1px solid var(--rd-border); border-radius:12px; padding:16px; box-shadow:0 10px 30px -14px rgba(15,27,45,0.16); }
.pv-chrome{ display:flex; align-items:center; gap:5px; padding-bottom:10px; border-bottom:1px solid var(--rd-border); margin-bottom:12px; }
.pv-dot{ width:8px; height:8px; border-radius:50%; background:#E2E8F0; }
.pv-url{ flex:1; height:12px; border-radius:6px; background:#F1F5F9; margin-left:6px; }
.pv-line{ height:8px; border-radius:4px; background:#EDF1F7; margin-top:7px; }
.pv-line.s{ width:62%; }
.pv-line.xs{ width:40%; }
.pv-hero{ border-radius:8px; background:#EFF6FF; padding:14px; }
.pv-hero .pv-line{ background:#D8E6FB; }
.pv-cta{ display:inline-block; margin-top:9px; width:74px; height:16px; border-radius:9px; background:var(--rd-blue); }
/* 01 Chat */
.pv-bubble{ max-width:78%; border-radius:11px; padding:9px 12px; font-size:11.5px; line-height:1.45; }
.pv-bubble.left{ background:#F1F5F9; color:#3D4A5C; border-top-left-radius:3px; }
.pv-bubble.right{ background:var(--rd-blue); color:#fff; border-top-right-radius:3px; margin-left:auto; margin-top:9px; }
.pv-input{ margin-top:12px; display:flex; align-items:center; gap:8px; border:1px solid var(--rd-border); border-radius:9px; padding:8px 11px; font-size:11px; color:#94A3B8; }
.pv-input::after{ content:''; width:18px; height:18px; border-radius:50%; background:var(--rd-blue); margin-left:auto; flex-shrink:0; }
/* 02 Entwurf-Badge */
.pv-float-badge{ position:absolute; top:-11px; right:14px; background:var(--rd-blue); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 11px; border-radius:12px; box-shadow:0 4px 12px rgba(37,99,235,0.35); }
/* 03 Kommentar-Pins */
.pv-pin{ position:absolute; width:22px; height:22px; border-radius:50% 50% 50% 3px; background:var(--rd-blue); border:2.5px solid #fff; box-shadow:0 3px 8px rgba(15,27,45,0.28); }
.pv-pin.p2{ background:#CA8A04; }
/* 04 Responsive-Duo */
.pv-duo{ display:flex; gap:12px; align-items:flex-end; }
.pv-desk{ flex:1; }
.pv-phone{ width:64px; border:1px solid var(--rd-border); border-radius:10px; padding:7px 6px 9px; background:#fff; }
.pv-phone .pv-line{ margin-top:5px; height:6px; }
.pv-phone .pv-hero{ padding:8px; }
/* 05 Live */
.pv-live-row{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pv-live-pill{ display:inline-flex; align-items:center; gap:6px; background:rgba(22,163,74,0.1); color:#16A34A; font-size:11px; font-weight:700; padding:4px 11px; border-radius:12px; }
.pv-live-pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:#16A34A; }
.pv-check{ width:26px; height:26px; border-radius:50%; background:rgba(37,99,235,0.12); display:flex; align-items:center; justify-content:center; color:var(--rd-blue); font-size:13px; margin-left:auto; }
/* ─── S5 · WAS SIE ERWARTET (2×2 grid) ─── */
.rd-expect-section{ background:var(--bg); padding:clamp(56px,7vw,80px) 24px; }
.rd-expect-inner{ max-width:1220px; margin:clamp(34px,4vw,52px) auto 0; display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(24px,4vw,56px); align-items:center; }
.rd-lanyard-wrap{ width:100%; height:640px; overflow:hidden; }
.rd-lanyard-iframe{ width:100%; height:100%; border:none; background:transparent; display:block; }
.rd-exp{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:860px){ .rd-expect-inner{ grid-template-columns:1fr; } .rd-lanyard-wrap{ height:460px; order:-1; } }
.rd-exp-card{ background:#fff; border:1px solid var(--rd-border); border-radius:10px; padding:28px 26px; transition:all .15s ease; }
.rd-exp-card:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.07); }
.rd-exp-ico{ width:44px; height:44px; border-radius:11px; background:#EFF6FF; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.rd-exp-ico .ti{ font-size:22px; color:var(--rd-blue); }
.rd-exp-title{ font-size:17px; font-weight:700; color:var(--rd-primary); letter-spacing:-0.01em; }
.rd-exp-body{ margin-top:9px; font-size:14px; line-height:1.6; color:var(--rd-muted); }
@media(max-width:680px){ .rd-exp{ grid-template-columns:1fr; } }
/* ─── S6 · REFERENZEN (badges + 5th card) ─── */
.projects-section .projects-grid{ max-width:1120px; }
@media(min-width:769px){ .projects-section .projects-grid{ grid-template-columns:repeat(auto-fit,minmax(300px,356px)); justify-content:center; } }
.project-card{ position:relative; }
.rd-proj-badge{ position:absolute; top:12px; left:12px; z-index:4; font-size:10px; font-weight:500; padding:2px 8px; border-radius:10px; letter-spacing:0.03em; }
.rd-proj-badge.konzept{ background:#E5E7EB; color:#6B7280; }
.rd-proj-badge.referenz{ background:#FEF9C3; color:#854D0E; }
.rd-proj-soon{ pointer-events:none; opacity:0.75; }
.rd-proj-ph{ background:#E5E7EB; border-radius:8px; min-height:172px; display:flex; align-items:center; justify-content:center; color:#9CA3AF; font-size:14px; }
.rd-proj-cat{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#9CA3AF; }
/* ─── SEITE 6 · KUNDENSTIMMEN ────────────────────────────────────────────
Umbau 30.08.2026 (Leo, nach Designvorschlag aus Downloads / Chat):
6 Karten sichtbar in sauberem 3x2-Raster, Button "Mehr anzeigen" klappt
3 weitere Karten auf. Endet dort seit demselben Tag (Julian): der Google-
Trust-Block (.cf-trust, CSS-Regeln blieben hier stehen) und der CTA-Button
sind raus und sitzen jetzt im Hero unter den Zertifikaten - nur verschoben,
kein Redesign, das kommt separat.
KEIN [data-theme="dark"]-Block: die Sektion traegt in beiden Themes ihr
klares Weiß als Gegenpol zum warmen Angebots-Beige (Farbdramaturgie weiter
unten). Karten bringen ihre eigenen Farben mit. Kein Backup dieses Umbaus -
auf ausdrueckliche Anweisung. */
.s6-inner{ position:relative; z-index:1; max-width:var(--content-max); margin:0 auto; }
#bewertungen .s6-inner{ max-width:none; }
/* Reveal-Vorgabe fuer Kundenstimmen (Blur+Drop von oben) statt des sonst
genutzten .reveal-up - bewusst eigene Klasse. Gleicher IntersectionObserver
beobachtet sie mit (Selektor am Skriptende), nur eigene Timings. */
.s6-tc-reveal{ opacity:0; transform:translateY(-20px); filter:blur(10px); transition:opacity .5s cubic-bezier(.23,1,.32,1), transform .5s cubic-bezier(.23,1,.32,1), filter .5s cubic-bezier(.23,1,.32,1); }
.s6-tc-reveal.in{ opacity:1; transform:translateY(0); filter:blur(0px); }
.s6-tc-r1{ transition-delay:.4s; }
.s6-tc-r2{ transition-delay:.8s; }
.s6-tc-r3{ transition-delay:1.2s; }
.s6-tc-r4{ transition-delay:1.6s; }
.s6-tc-r5{ transition-delay:2s; }
.s6-tc-r6{ transition-delay:2.4s; }
@media (prefers-reduced-motion: reduce){
.s6-tc-reveal{ opacity:1; transform:none; filter:none; transition:none; }
}
/* Flaechenfarbe kommt aus der Farbdramaturgie weiter unten (ein Ort fuer alle
Sektionsfarben), hier nur Layout. */
.cf-section{
position:relative;
padding:clamp(44px,4vw,60px) 24px clamp(48px,4.5vw,68px);
}
.cf-intro{ max-width:none; margin:0; text-align:left; }
/* Kopf im Standard-Sektionsstil der Landingpage (Schrift/Groesse wie .s4-*). */
.cf-eyebrow{ display:block; font-family:"Inter",system-ui,-apple-system,sans-serif; font-size:12.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; color:var(--dwc-action-blue,#0757F7); }
.cf-h1{ margin:0; font-family:var(--font); font-weight:800; font-size:clamp(40px,4.45vw,64px); line-height:.94; letter-spacing:-.045em; color:var(--bw-heading,#030D1F); text-align:left; text-wrap:balance; transition:color .6s ease; }
.cf-h1 em{ font-style:normal; color:var(--dwc-action-blue,#0757F7); }
.cf-sub{ margin:18px auto 0; max-width:620px; font-family:"Inter",system-ui,-apple-system,sans-serif; font-weight:600; font-size:clamp(16px,1.25vw,19px); line-height:1.55; letter-spacing:-0.015em; color:var(--bw-body,#5B6472); transition:color .6s ease; }
/* Kundenstimmen-Abschluss (20.09.2026, Julian): "Echte Kunden · Echte
Ergebnisse" sitzt am UNTEREN Rand der Sektion statt am oberen wie in der
Referenz-Vorlage - der obere Rand (border-top oben an #bewertungen.cf-
section) bleibt bewusst nur der reine Strich. Der untere Strich ist dafuer
kein eigenes border-bottom mehr, sondern dieser Flex-Streifen: Text mittig,
Linie links/rechts davon unterbrochen - genau die vom Kunden verlangte
"Strich kurz unterbrochen, Text mittig drin"-Optik. Farbe folgt --bw-* wie
Ueberschrift/Body: weiss auf Schwarz, dunkel auf Weiss. */
#bewertungen .cf-outro{
display:flex; align-items:center; gap:20px;
margin-top:clamp(32px,4vw,48px);
}
#bewertungen .cf-outro__line{ flex:1 1 auto; height:1px; background:var(--bw-rule); transition:background-color .6s ease; }
#bewertungen .cf-outro .cf-eyebrow{ margin:0; white-space:nowrap; color:var(--bw-heading); transition:color .6s ease; }
/* Karussell statt Grid (19.09.2026, spaeter am selben Tag von Embla-Autoscroll
auf reine CSS-Marquee umgebaut - Marquee-Komponente aus ui/marquee.tsx):
Kartenfarben (cf-card, dessen Varianten, cf-quote usw.) bleiben unveraendert,
nur die Anordnung drumherum aendert sich. Der Track (.cf-marquee-track)
enthaelt zwei identische .cf-marquee-group-Kopien der 6 Karten; @keyframes
verschiebt exakt um -50% (= Breite einer Gruppe), dadurch nahtlose
Endlosschleife ohne JS-Ticker.
.cf-marquee-wrap geht bewusst ueber die volle Bildschirmbreite (100vw statt
an .s6-inner/var(--content-max) gebunden) - gleiches Ausbruch-Muster wie die
Footer-Trennlinien (siehe .footer-cta::after) und stuetzt sich auf das dort
bereits gesetzte body{overflow-x:clip}, kein neuer Sonderfall. */
.cf-marquee-wrap{
position:relative;
left:50%;
width:100vw;
margin-left:-50vw;
margin-top:clamp(24px,2.8vw,36px);
}
/* Nur waagerecht abschneiden (20.09.2026). Vorher overflow:hidden mit 8px
Polster (padding-block) und -8px Gegen-Margin auf dem Track: beides hob sich
auf, die Karten sassen also direkt an der Schnittkante. Der Hover-Lift auf
.cf-card (translateY(-4px) + scale(1.02), oben ~7px, siehe
.cf-marquee-item:hover .cf-card unten) und sein Schatten wurden deshalb oben
und unten hart abgeschnitten. overflow-y:visible laesst die Senkrechte frei;
die Hoehe der Reihe aendert sich nicht (Polster und Margin waren netto 0). */
.cf-marquee{ overflow-x:clip; overflow-y:visible; }
/* Endlosschleife ohne Sprung (20.09.2026). Der Track war width:100% - so breit
wie der Bildschirm -, translateX(-50%) fuhr deshalb ~ eine halbe
Bildschirmbreite statt einer Gruppenbreite und sprang danach sichtbar zurueck.
Jetzt ist der Track so breit wie sein Inhalt: --groups (3) identische Gruppen,
jede mit padding-right als Abstand zur naechsten (kein gap zwischen den
Gruppen, sonst waere die Schleife 24px zu kurz). Die Verschiebung um eine
Gruppe ergibt exakt denselben Bildausschnitt wie bei 0. --duration setzt
ui/marquee.tsx so, dass die Geschwindigkeit (px/s) wie vor dem Umbau bleibt. */
.cf-marquee-track{
display:flex;
width:max-content;
animation:cf-marquee var(--duration,42s) linear infinite;
}
.cf-marquee-track--reverse{ animation-direction:reverse; }
.cf-marquee-track--pause-hover:hover{ animation-play-state:paused; }
.cf-marquee-group{ display:flex; flex-shrink:0; gap:24px; padding-right:24px; }
@keyframes cf-marquee{ to{ transform:translateX(calc(-100% / var(--groups, 3))); } }
.cf-marquee-item{ flex:0 0 auto; width:280px; }
@media(min-width:640px){ .cf-marquee-item{ width:330px; } }
@media(min-width:900px){ .cf-marquee-item{ width:372px; } }
@media(min-width:900px){ .cf-extra-reveal{ margin-top:20px; } }
.cf-card{
position:relative;
display:flex;
min-height:224px;
padding:24px 24px 20px;
border-radius:16px;
border:1px solid transparent;
overflow:hidden;
transition:transform .25s ease, box-shadow .25s ease;
}
/* Karte hebt sich beim Hovern minimal ab, ohne den Marquee-Lauf zu stoppen
(Julian, 20.09.2026: pauseOnHover war vorher an, siehe Marquee-Aufruf in
reviews-carousel-demo.tsx - jetzt aus, dafuer eigener, dezenter
Hover-Zustand pro Karte statt der Pause). */
.cf-marquee-item:hover .cf-card{
transform:translateY(-4px) scale(1.02);
box-shadow:0 14px 30px rgba(13,34,72,.18);
}
.cf-card--light{ background:#FFFFFF; border-color:rgba(13,34,72,.1); color:#26303F; }
.cf-card--dark{ background:#0E1420; color:#E7EEF7; }
.cf-card--blue{ background:var(--dwc-action-blue,#0757F7); color:#fff; }
.cf-card-body{ position:relative; z-index:1; display:flex; flex-direction:column; flex:1; }
.cf-quote{ display:block; font-family:var(--font-serif); font-weight:700; font-size:66px; line-height:1; height:24px; margin-bottom:16px; user-select:none; }
.cf-card--light .cf-quote{ color:var(--dwc-action-blue,#0757F7); }
.cf-card--dark .cf-quote{ color:#4C9DFB; }
.cf-card--blue .cf-quote{ color:#fff; }
.cf-card--quote-muted .cf-quote{ color:#5A6F8C; }
.cf-card-text{ flex:1; font-size:15px; line-height:1.6; }
/* Feste Kartenhoehe nur auf Desktop (01.09.2026, Julian): ohne sie richtet
sich jede Grid-Zeile nach ihrem laengsten Zitat - die obere Reihe (Julians
Zitat, 349 Zeichen) wurde dadurch ~100px hoeher als die untere (kuerzere
Zitate). Alle sechs Karten jetzt so gross wie die untere Reihe vorher war
(276px, per Messung im Browser). Der Text bekommt dafuer eine etwas
kompaktere Schrift (14px/20px statt 15px/1.6) und einen Zeilen-Clip
(line-clamp:6 = exakt die 120px, die nach Zitatzeichen/Fuss uebrig
bleiben) statt zu ueberlaufen. Struktur/Klassen/Animation unveraendert -
nur Groesse und Textdichte. Muss NACH der Basisregel .cf-card-text stehen,
sonst gewinnt die spaeter deklarierte Basisregel trotz Media Query
(gleiche Spezifitaet, Reihenfolge entscheidet). Mobil (1 Spalte, unter
900px) bleibt bei der natuerlichen Hoehe, dort ist kein Zeilenclip noetig. */
@media(min-width:900px){
.cf-card{ height:276px; }
.cf-card-text{
font-size:14px; line-height:20px;
display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
overflow:hidden;
}
}
.cf-card-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:18px; }
.cf-card-name{ font-weight:700; font-size:17px; line-height:1.25; letter-spacing:-0.005em; }
.cf-card-role{ margin-top:3px; font-size:13px; opacity:.68; }
.cf-card--light .cf-card-role{ color:#6B7480; opacity:1; }
.cf-card-foot img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex:none; }
/* Rasterhintergrund nur auf den hellen Karten, nach unten weich aus. */
.cf-grid-bg{
position:absolute; inset:0; pointer-events:none;
background-image:
linear-gradient(to right, rgba(13,34,72,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(13,34,72,.055) 1px, transparent 1px);
background-size:46px 52px;
-webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 55%, transparent 100%);
mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, #000 55%, transparent 100%);
}
/* Platzhalter-Karten im Dropdown - sichtbar als Platzhalter gekennzeichnet
(echte Bewertungstexte/Namen liegen noch nicht vor, erfunden wird nichts). */
.cf-card--ph{ background:#F1ECE1; border:1px dashed rgba(13,34,72,.3); color:#8A8474; min-height:196px; }
.cf-card--ph .cf-quote{ display:none; }
.cf-ph-badge{ align-self:flex-start; margin-bottom:16px; padding:3px 8px; border:1px solid rgba(13,34,72,.22); border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#978F7B; }
/* Ruhiger Accordion-Reveal fuer die drei Zusatzkarten. Der Wrapper animiert
die intrinsische Kartenhoehe ueber einen 0fr -> 1fr-Track; dadurch gibt es
keinen Sprung im Dokumentfluss und der Trust-Block darunter faehrt sauber
mit. Die Karten selbst behalten ihre bestehende Blur/Fade-Einblendung. */
/* Volle Bildschirmbreite (20.09.2026): vorher min(1180px,100%) - der
overflow:hidden von __inner schnitt die 100vw breite Reihe darin auf 1180px
ab, das zweite Karussell reichte nicht bis an die Fensterraender. Jetzt
dasselbe Ausbruch-Muster wie .cf-marquee-wrap (100vw, um -50vw versetzt),
die Reihe darin bleibt damit deckungsgleich. Der Abstand nach oben (18px)
kommt erst aufgeklappt dazu: der Knopf steht jetzt UNTER diesem Bereich und
soll zugeklappt genau dort sitzen wie bisher. */
.cf-extra-reveal{
display:grid;
grid-template-rows:0fr;
position:relative;
left:50%;
width:100vw;
margin:0 0 0 -50vw;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
grid-template-rows .42s cubic-bezier(.23,1,.32,1),
margin-top .42s cubic-bezier(.23,1,.32,1),
opacity .24s ease,
visibility 0s linear .42s;
}
.cf-extra-reveal__inner{
min-height:0;
overflow:hidden;
}
/* Hover-Platz unten fuer das zweite Karussell (20.09.2026): __inner schneidet
senkrecht ab (das braucht das Auf-/Zuklappen). Oben liegt der Reihenabstand
(24-36px) im Schnittbereich, unten sass die Reihe direkt an der Kante - der
Hover-Ueberstand und der Schatten der Karten wurden dort abgeschnitten.
14px Luft unten; der Knopf rueckt aufgeklappt um genau diese 14px naeher
(siehe .cf-morewrap unten), der Abstand Karten -> Knopf bleibt wie bei der
ersten Reihe. */
.cf-extra-reveal .cf-marquee-wrap{ margin-bottom:14px; }
.cf-extra-reveal.is-open{
grid-template-rows:1fr;
margin-top:18px;
opacity:1;
visibility:visible;
pointer-events:auto;
transition:
grid-template-rows .42s cubic-bezier(.23,1,.32,1),
margin-top .42s cubic-bezier(.23,1,.32,1),
opacity .24s ease,
visibility 0s linear 0s;
}
/* padding-bottom statt margin (20.09.2026): der Knopf steht jetzt nach dem
Aufklapp-Bereich. Dessen frueherer 18px-Abstand nach oben lag zugeklappt
zwischen Knopf und der Zeile "Echte Kunden" - er wird hier als Polster
erhalten, damit sich zugeklappt nichts verschiebt. Ein margin wuerde mit
dem margin-top der Zeile darunter zusammenfallen und nichts bewirken. */
.cf-morewrap{
display:flex; justify-content:center; margin-top:14px; padding-bottom:18px;
transition:margin-top .42s cubic-bezier(.23,1,.32,1);
}
.cf-extra-reveal.is-open + .cf-morewrap{ margin-top:0; }
/* Schlichter Text-Link statt Pillen-Button (19.09.2026) - keine Umrandung,
nur Unterstreichung; Farbe bleibt das bestehende Aktions-Blau. */
.cf-more{
display:inline-block;
padding:0; border:0; background:none; cursor:pointer;
font:inherit; font-size:14px; font-weight:600; color:var(--dwc-action-blue,#0757F7);
text-decoration:underline; text-underline-offset:3px;
}
.cf-more:focus-visible{ outline:2px solid var(--dwc-action-blue,#0757F7); outline-offset:3px; border-radius:2px; }
/* .cf-trust* und .cf-cta* (Google-Trust-Block + CTA-Button) standen hier bis
30.08.2026 - beide sind aus dieser Section raus (Trust-Block in den Hero
verschoben und dort neu als .hero-trust* gebaut, s. scrolly-hero.css; CTA
erstmal komplett entfernt, Julian). Keine Verwendung mehr im HTML, deshalb
samt ihrer Media-Queries geloescht statt tot stehen zu lassen. */
@media (prefers-reduced-motion: reduce){
.cf-more{ transition:none; }
.cf-extra-reveal{ transition:none; }
.cf-morewrap{ transition:none; }
.cf-marquee-track{ animation:none; }
}
/* ─── SEITE 7 · PREISE (R4, offene Preisorientierung) ─── */
.s7-preise{
position:relative;
overflow:hidden;
min-height:941px;
/* Seitenpadding 24px->clamp(32,3.2vw,64)px (30.08.2026, Leonhards Wunsch):
Headline/Karten sassen zu buendig am Bildschirmrand. */
padding:clamp(44px,4.5vw,64px) clamp(32px,3.2vw,64px) clamp(48px,5vw,72px);
background:
radial-gradient(circle at 10% 13%, rgba(255,255,255,.72), transparent 27%),
radial-gradient(circle at 91% 34%, rgba(201,154,61,.10), transparent 26%),
#F8F2EB;
}
.s7-inner{
position:relative;
z-index:1;
width:min(100%, 1380px);
margin:0 auto;
/* Linkes Drittel (Angebot+Preiskarte) und mittleres Drittel (Wizard) auf
gleicher Starthöhe nebeneinander, nicht mehr gestapelt mit Lücke
darunter. Rechtes Drittel (Visitenkarte) folgt später als dritte Spalte. */
display:grid;
grid-template-columns:minmax(0,430px) minmax(0,1fr);
column-gap:clamp(40px,5vw,88px);
align-items:start;
}
/* Name "--three-column" stimmt seit dem dritten Anlauf am Angebots-Umbau
(30.08.2026, Leo) wieder woertlich UND strukturell: drei echte
Geschwister-Spalten (Angebot-Karte, Immer-inklusive-Karte, Marke/Karte),
kein verschachteltes Grid mehr. Das Qualitätsversprechen ist ein eigener React-
Mount-Punkt (#dwc-included-root, siehe main.tsx), kein Kind des Angebots-
Blocks - dadurch ist es ein echtes drittes Grid-Kind hier.
1fr | minmax(230px,380px) | 1fr: die beiden Aussenspalten sind IMMER
gleich breit (beide 1fr), der Inhalt links/rechts sitzt am jeweiligen
Aussenrand (justify-self:start bzw. :end auf .s7-physical-placeholder).
Die Mittelspalte sitzt dadurch rechnerisch exakt in der Mitte des
GESAMTEN Blocks. Mittelspalte bewusst minmax(...,380px) statt `auto`
(30.08.2026, vierter Anlauf, im Browser nachgemessener Bug): `auto` misst
die Spur anhand des UNGEBROCHENEN Fliesstexts in
.dwc-pconf__included-head und blies sie auf ~600px auf, das drueckte
beide Aussenspalten fast auf 0px. minmax(...,380px) deckelt die Spur
direkt in der Spaltendefinition (kein width auf dem Grid-Kind noetig, das
wirkt fuers Grid-Messen ohnehin nicht zuverlaessig, siehe PROJEKTSTAND
(31)). Untergrenze 220px statt 0 (im Browser nachgemessen): darunter
ueberlaufen die Leistungs-Icons+Labels selbst; 220px ist ihr echter
Mindestbedarf.
KEIN max-width/kein Linksruecken mehr (vierter Anlauf, nach Leonhards
Screenshots vom eigenen Breitbildschirm): width:min(...,1680px) plus
linkem margin liess auf breiten Monitoren rechts eine grosse Luecke
entstehen - "Mitte"/"rechts" bezog sich dann nur auf die Mitte/den
Rand dieses gedeckelten, verschobenen Blocks, nicht auf die Sektion bzw.
den Bildschirm, wie gefordert. Jetzt fuellt der Block die volle
Sektionsbreite (width:100%, margin:0) - Mittelspalte ist dadurch bei
jeder Bildschirmbreite automatisch in der echten Bildschirmmitte, die
Marke-Spalte reicht bis zum echten rechten Sektionsrand. Einzelne Inhalte
(Angebots-Karte, Marke-Karte) bekommen stattdessen ihre eigene
Maximalbreite (.dwc-pconf, .s7-physical-placeholder), damit auf sehr
breiten Bildschirmen nicht die Karten selbst absurd breit werden. */
/* Aussenspalten-Mindestbreite 560px (30.08.2026, im Browser durchgemessen):
.dwc-pconf braucht laut grid-template-columns:min-content-Test min. 275px
fuer Umfang + 257px fuer Preis (~550px zusammen mit Innenabstand) - ohne
eigene Mindestbreite hier drueckte die Aussenspalte bei ca. 1200-1680px
Bildschirmbreite (haeufige Laptop-Groessen!) auf ~440px zusammen und
"Professioneller" ueberlief selbst bei kleinster vertretbarer Schrift.
Rechte Spalte bekommt denselben Mindestwert, sonst waeren beide
Aussenspalten nicht mehr gleich breit und die Mittelspalte nicht mehr
exakt zentriert (siehe Kommentar oben). */
/* Gap-Formeln bewusst niedrig gehalten (30.08.2026, im Browser
durchgerechnet): bei 1440px Bildschirmbreite bleiben nach den drei
Mindestbreiten (560+560+220px) nur noch wenig Platz fuer beide Luecken
zusammen, sonst reisst der Block bei genau dieser (haeufigen Laptop-)
Breite wieder ueber den Sektionsrand hinaus.
Zwei eigene Luecken-Spuren statt einheitlichem column-gap (30.08.2026,
Leonhards Wunsch: Angebot naeher an Immer-inklusive, Marke unveraendert
auf Abstand) - CSS Grid kennt nur EINEN column-gap-Wert fuer alle
Zwischenraeume, darum stattdessen zwei echte, unbenutzte Spalten als
Abstandshalter im Template und explizites grid-column an den drei
Inhalts-Elementen (siehe dort), sonst wuerde die Auto-Platzierung sie in
die Abstands-Spuren stecken statt sie zu ueberspringen. */
/* Zwei statt drei Spalten (03.09.2026, Julian): die VerticalTabs-Vorlage in
der linken Spalte ist als Sektion ueber die volle Breite gebaut (eigenes
12er-Grid, 5 Spalten Text + 7 Spalten Bildergalerie). In einem Drittel
(536px bei 1400px Fensterbreite) brauchte ihr Innengrid 704px und die
Galerie ragte nachgemessen 212px in die Mittelspalte. Die frueheren 1.5fr
und 1.07fr sind darum zu 2.57fr zusammengelegt - die Vorlage bekommt jetzt
~950px. Die rechte Spalte (Marke + Visitenkartenhalter) behaelt ihre
.83fr-Spur unveraendert.
Die Mittelspalte mit dem Qualitätsversprechen ist damit aus der
Sektion raus. Die Komponente dazu (AlwaysIncluded in
react-stack/src/components/pricing-configurator.tsx) bleibt liegen; zum
Zurueckholen braucht es das im Markup, den mount()-Aufruf in
main.tsx und hier wieder eine dritte Spur. */
.s7-inner--three-column{
grid-template-columns:minmax(0,2.57fr) minmax(0,.68fr);
column-gap:0;
width:calc(100% - clamp(80px,5vw,144px));
max-width:none;
margin:0 auto;
}
.s7-inner--three-column > .s7-config{ grid-column:1; }
.s7-inner--three-column > .s7-physical-placeholder{
grid-column:2;
min-width:0;
padding-left:clamp(28px,2.8vw,58px);
}
/* Als eigenes Element NACH dem Dreispaltenraster ist diese Reihe nicht an
dessen asymmetrische Spalten gebunden: ihre Mitte bleibt die Seitenmitte. */
.s7-quality-wrap{
position:relative;
z-index:1;
width:min(100%,760px);
margin:-20px auto 0;
}
/* Abschlussband unter den Spalten: ruhige Navy-Buehne, darauf hebt sich der
eine Aktionsknopf klar ab. Kein Verlauf und keine zusaetzliche Bildsprache -
die Wertigkeit entsteht aus Abstand, Materialruhe und Typografie. */
.s7-band{
position:relative;
isolation:isolate;
display:flex;
align-items:center;
gap:clamp(20px,2.2vw,38px);
width:calc(100% - clamp(80px,5vw,144px));
margin:clamp(56px,5vw,76px) auto 0;
padding:clamp(22px,2vw,28px) clamp(24px,2.4vw,36px);
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
/* Hochwertiger statt Flaechenfarbe (13.09.2026, Julian): sanfter
Tiefenverlauf + oben ein haarfeiner Lichtrand (inset), dazu ein
zweistufiger Schatten fuer echtes Schweben statt nur eines weichen
Randschattens. */
background:linear-gradient(155deg,#15316B 0%,#0F2854 46%,#081A38 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 30px 54px -28px rgba(3,13,31,.62),
0 10px 22px -14px rgba(3,13,31,.4);
color:#fff;
}
.s7-band::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:radial-gradient(circle at 88% -10%, rgba(201,154,61,.16), transparent 46%);
}
.s7-band__lead{
flex:1 1 auto;
min-width:0;
}
.s7-band__eyebrow{
display:block;
color:var(--gold);
font-size:11.5px;
font-weight:800;
letter-spacing:.19em;
line-height:1.3;
text-transform:uppercase;
}
.s7-band__h{
margin:9px 0 0;
font-family:var(--font-serif);
/* max 27px->23.5px (03.09.2026, im Browser nachgemessen): bei 27px brauchte
"Lassen Sie uns Ihr Projekt gemeinsam realisieren." ~590px, die linke
Spalte des Streifens hat bei 1400px Fensterbreite aber nur 547px - die
Zeile brach um und machte das Band 151px statt der ~100px der Vorlage. */
font-size:clamp(19px,1.65vw,23.5px);
font-weight:600;
letter-spacing:-.02em;
line-height:1.2;
color:#fff;
text-wrap:balance;
}
.s7-band__cta{
display:inline-flex;
flex:none;
align-items:center;
justify-content:center;
gap:12px;
min-height:56px;
padding:0 clamp(20px,2vw,30px);
border:1px solid rgba(255,255,255,.16);
border-radius:11px;
background:linear-gradient(160deg,#2E7BFF 0%,var(--dwc-action-blue) 62%,#0644C4 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 16px 32px -14px rgba(7,87,247,.85);
color:#fff;
font-size:14.5px;
font-weight:700;
line-height:1.2;
text-decoration:none;
transition:background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.s7-band__cta svg{ flex:none; width:17px; height:17px; }
.s7-band__cta:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.32),
0 20px 38px -14px rgba(7,87,247,.95);
transform:translateY(-1px);
}
.s7-band__cta:focus-visible{ outline:3px solid rgba(255,255,255,.55); outline-offset:3px; }
.s7-band__trust{
display:flex;
flex:none;
align-items:center;
padding-left:clamp(8px,1vw,16px);
border-left:1px solid rgba(255,255,255,.2);
}
.s7-band__trust-title{ color:rgba(255,255,255,.72); font-size:12.5px; font-weight:600; line-height:1.35; }
/* Umbruchstufen: erst wandert die Vertrauenszeile unter Text+Knopf, dann
stapelt alles. Reihenfolge bleibt dabei Text -> Knopf -> Vertrauen. */
@media(max-width:1180px){
.s7-band{ flex-wrap:wrap; row-gap:22px; }
.s7-band__lead{ flex:1 1 100%; }
}
@media(max-width:760px){
.s7-band{
width:100%;
flex-direction:column;
align-items:stretch;
text-align:left;
}
.s7-band__cta{ width:100%; }
}
.s7-head{
max-width:760px;
margin:0 auto;
text-align:center;
}
.s7-h{
font-family:var(--font-serif);
font-weight:600;
font-size:clamp(58px,4.25vw,72px);
line-height:1.06;
letter-spacing:-.026em;
color:#10285A;
text-wrap:balance;
}
.s7-h em{
font-style:italic;
font-weight:500;
color:#2472E8;
}
/* Konfigurator-Modul, ersetzt linkes + mittleres Drittel (30.08.2026, Leo,
nach Referenzbild). Vorherige Regeln (.s7-offer, .s7-price-card*) lagen
hier bis zum Umbau — Stand gesichert in
_intern/_backup/2026-08-30-preise-konfigurator-umbau/index.html.
.s7-config-head ist weiterhin reines HTML (wie zuvor .s7-offer), weil auch
jede andere Sektionsüberschrift der Seite statisches HTML ist — nur der
interaktive Teil darunter (Toggle/Slider/Preis/Liste) ist die neue
React-Insel #dwc-pricing-config-root. */
.s7-config{
width:100%;
}
/* max-width 720px→820px (30.08.2026, dritter Anlauf): Headline lief auf 3
Zeilen statt 2, weil die linke Spalte durch das verschachtelte Grid vorher
schmaler war als noetig. Jetzt stretcht die Spalte selbst auf ihre volle
1fr-Breite (kein eigenes justify-self hier) - der breitere Rahmen gibt
text-wrap:balance unten mehr Raum fuer 2 statt 3 Zeilen. Exakte Zeilenzahl
haengt an der tatsaechlich gerenderten Spaltenbreite, dort bitte pruefen. */
.s7-config-head{
max-width:820px;
margin:0;
text-align:left;
}
.s7-config-eyebrow,
.s7-physical-eyebrow{
margin:0;
color:var(--gold);
font-size:12px;
font-weight:800;
letter-spacing:.14em;
line-height:1.3;
text-transform:uppercase;
}
.s7-config-h{
max-width:11.5em;
margin:19px 0 0;
font-family:var(--font-serif);
font-weight:700;
font-size:clamp(46px,4.1vw,68px);
line-height:1.02;
letter-spacing:-.034em;
color:#030D1F;
text-wrap:balance;
}
.s7-config-sub{
margin:25px 0 0;
max-width:34rem;
font-size:17px;
line-height:1.62;
color:var(--muted);
}
/* Rechtes Drittel: ruhiger Markenblock mit statischem GLB-Kartenhalter. Das
Modell selbst bleibt unverändert; nur sein Kontext wird verständlicher.
width begrenzt + justify-self:end (30.08.2026, dritter Anlauf): die
Aussenspalte ist jetzt genauso breit wie die linke (1fr), aber der Inhalt
braucht diese Breite nicht - ohne Begrenzung wuerde er ueber die volle
Spalte stretchen und landete dadurch wieder mittig statt am rechten
Rand. 480px reicht fuer die Notiz (max-width 290px) und das Kartenmodell
inklusive seines gewollten Ueberstands (width:min(118%,420px)). */
.s7-physical-placeholder{
position:relative;
width:min(100%,480px);
justify-self:end;
/* Der Kartenhalter ist ein ruhiger, haptischer Abschluss der Sektion und
kein zweiter Einstieg. Er sitzt darum bewusst in deren unterer Haelfte. */
padding-top:clamp(410px,25vw,470px);
color:#10285A;
}
.s7-physical-note{
max-width:290px;
margin:0;
}
.s7-physical-rule{
display:block;
width:40px;
height:1px;
margin-top:15px;
background:var(--gold);
}
.s7-physical-note-title{
max-width:13.5em;
margin:24px 0 0;
font-family:var(--font-serif);
font-size:clamp(26px,2.15vw,34px);
font-weight:600;
line-height:1.05;
letter-spacing:-.032em;
text-wrap:balance;
}
.s7-physical-note-title em{
display:block;
margin-top:4px;
color:var(--gold);
font-style:italic;
font-weight:500;
}
.s7-physical-sub{
max-width:29em;
margin:15px 0 0;
color:#5B6A79;
font-size:13.5px;
line-height:1.62;
}
.s7-card-holder-model{
display:block;
width:min(118%,420px);
height:280px;
margin:-16px auto 0;
background:transparent;
pointer-events:none;
user-select:none;
--poster-color:transparent;
/* model-viewer blendet beim Laden von sich aus einen 5px hohen, dunklen
Ladebalken ueber die volle Breite oben im Element ein (#default-progress-bar
im Shadow DOM) und laesst ihn danach noch gut eine Sekunde stehen - das
war der graue Strich ueber der Visitenkarte. Beide Variablen sind der
vorgesehene Weg, ihn abzuschalten; Hoehe 0 allein reicht nicht, weil die
Bibliothek einen Fallback-Wert setzt. */
--progress-bar-height:0px;
--progress-bar-color:transparent;
}
.s7-card-holder-stage{
position:relative;
isolation:isolate;
width:100%;
margin-top:4px;
padding:22px 0 12px;
}
.s7-card-holder-stage::before{ display:none; }
.s7-card-holder-stage::after{
content:"";
position:absolute;
z-index:-1;
right:3%;
bottom:17px;
width:92%;
height:22px;
border-radius:50%;
background:rgba(55,39,21,.16);
filter:blur(13px);
}
@media(min-width:761px){
.s7-card-holder-model{
width:min(112%,360px);
height:286px;
margin:18px auto 0;
}
.s7-card-holder-stage{ margin-top:14px; }
.s7-card-holder-stage::before{ height:150px; bottom:31px; }
}
/* Angebotssektion-Feinschliff (30.08.2026): Die rechte Marke ist bewusst
redaktionell offen statt eine weitere Kachel. Modell und Drehansicht bleiben
unverändert; nur ihr Raum und die visuelle Führung werden neu gesetzt. */
@media(min-width:1025px){
.s7-inner--three-column .s7-physical-placeholder{
align-self:stretch;
transform:none;
}
.s7-inner--three-column .s7-card-holder-stage{ margin-top:18px; padding-top:4px; transform:none; }
}
@media(max-width:1180px){
.s7-preise{ min-height:0; }
.s7-inner--three-column{
grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
row-gap:68px;
}
.s7-inner--three-column > .s7-config{ grid-column:1 / -1; }
.s7-inner--three-column > .s7-physical-placeholder{
grid-column:1 / -1;
justify-self:end;
width:min(100%,480px);
}
.s7-quality-wrap{ margin:48px auto 0; }
}
/* Die Desktop-Staffelung richtet die unteren Kanten von Auswahl, Karte und
Qualitätsreihe bewusst aneinander aus. Die Transforms liegen ausschliesslich
auf statischen Hüllen – Click, Auto-Play und Framer-Motion bleiben unberührt. */
@media(min-width:1181px){
/* Der kompakte Neuaufbau ab 06.09.2026 richtet alle Bereiche ueber das
gemeinsame Grid aus. Kuenstliche Y- und X-Verschiebungen sind nicht mehr
noetig und wuerden die responsive Reihenfolge wieder auseinanderziehen. */
}
@media(max-width:600px){
.s7-offer{ max-width:none; }
.s7-offer-h{ font-size:clamp(38px,11.2vw,47px); }
.s7-price-card{ padding:24px 22px; }
.s7-card-holder-model{ height:240px; }
}
.s7-sub{
margin-top:20px;
font-size:17px;
line-height:1.5;
color:#19366D;
}
.s7-layout{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:96px;
align-items:start;
margin-top:52px;
}
.s7-eyebrow{
display:block;
margin-bottom:14px;
color:#2472E8;
font-size:12px;
font-weight:700;
letter-spacing:.02em;
text-transform:uppercase;
}
.s7-price-label{
font-family:var(--font-serif);
font-size:30px;
font-weight:600;
line-height:1.15;
color:#10285A;
}
.s7-price{
margin-top:8px;
font-family:var(--font-serif);
font-size:clamp(96px,7.8vw,128px);
font-weight:500;
line-height:.98;
letter-spacing:-.005em;
color:#08225A;
white-space:nowrap;
}
.s7-vat{
margin-top:12px;
color:#173468;
font-size:13px;
}
.s7-packages-cta{
width:100%;
min-height:54px;
margin-top:22px;
padding:14px 22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
border:1px solid #2472E8;
border-radius:4px;
background:#1465F3;
color:#fff;
font-size:15px;
font-weight:500;
line-height:1.3;
text-decoration:none;
box-shadow:0 10px 26px -18px rgba(20,101,243,.55);
}
.s7-packages-cta[aria-disabled="true"]{ cursor:default; }
.s7-packages-cta i{ flex:none; font-size:18px; }
.s7-package-names{
margin-top:12px;
color:#173468;
font-size:13px;
letter-spacing:.005em;
}
.s7-factors-title{
margin:0 0 14px;
font-family:var(--font-serif);
font-size:25px;
font-weight:600;
line-height:1.25;
color:#10285A;
}
.s7-factor{
display:grid;
grid-template-columns:36px minmax(0,1fr);
column-gap:14px;
padding:16px 0 18px;
border-bottom:1px solid rgba(16,40,90,.25);
}
.s7-factor:last-child{ border-bottom:0; }
.s7-factor-no{
padding-top:1px;
font-family:var(--font-serif);
font-size:19px;
font-weight:500;
color:rgba(36,114,232,.72);
}
.s7-factor-copy h4{
font-family:var(--font-serif);
font-size:19px;
font-weight:600;
line-height:1.25;
color:#10285A;
}
.s7-factor-copy p{
margin-top:7px;
font-size:13px;
line-height:1.45;
color:#173468;
}
.s7-kalk{
display:grid;
grid-template-columns:74px minmax(0,1fr) auto;
align-items:center;
gap:22px;
margin-top:38px;
padding:33px 0 35px;
border-top:1px solid rgba(16,40,90,.25);
border-bottom:1px solid rgba(16,40,90,.25);
}
.s7-kalk-ico{
width:54px;
height:62px;
display:flex;
align-items:center;
justify-content:center;
color:#1465F3;
font-size:48px;
}
.s7-kalk-ico i{
display:block;
font-size:48px;
line-height:1;
}
.s7-kalk-h{
font-family:var(--font-serif);
font-size:20px;
font-weight:600;
line-height:1.3;
color:#10285A;
}
.s7-kalk-p{
margin-top:6px;
font-size:12.5px;
line-height:1.45;
color:#173468;
}
.s7-kalk-btn{
min-width:306px;
min-height:54px;
padding:13px 26px;
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:24px;
border:1px solid #2472E8;
border-radius:6px;
background:rgba(255,255,255,.44);
color:#1465F3;
font-size:15px;
font-weight:500;
text-decoration:none;
transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease;
}
.s7-kalk-btn i{ flex:none; font-size:18px; }
.s7-hosting{
min-height:52px;
padding:15px 80px 0;
display:flex;
align-items:flex-start;
justify-content:center;
gap:14px;
color:#173468;
font-size:12.5px;
line-height:1.45;
}
.s7-hosting > i{
flex:none;
margin-top:1px;
color:#173468;
font-size:25px;
}
.s7-hosting a{
color:#1465F3;
font-weight:500;
text-decoration:none;
white-space:nowrap;
}
.s7-hosting a:focus-visible,
.s7-kalk-btn:focus-visible{
outline:3px solid rgba(36,114,232,.34);
outline-offset:3px;
}
@media(hover:hover) and (pointer:fine){
.s7-kalk-btn:hover{
border-color:#0F58D4;
background:rgba(255,255,255,.72);
color:#0F58D4;
transform:translateY(-1px);
}
.s7-hosting a:hover{ text-decoration:underline; }
}
@media(max-width:1024px){
.s7-preise{
min-height:auto;
padding:68px 30px 34px;
}
.s7-h{ font-size:clamp(50px,6vw,64px); }
.s7-layout{
grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
gap:48px;
}
.s7-kalk-btn{ min-width:250px; }
.s7-hosting{ padding-inline:34px; }
}
@media(max-width:760px){
.s7-preise{ padding-inline:24px; }
.s7-inner--three-column{
grid-template-columns:1fr;
row-gap:48px;
}
.s7-inner--three-column > .s7-config,
.s7-inner--three-column > .s7-physical-placeholder{
grid-column:1;
width:100%;
justify-self:stretch;
padding-left:0;
border-left:0;
}
.s7-inner--three-column > .s7-physical-placeholder{
padding-top:42px;
}
.s7-quality-wrap{ width:100%; margin:42px auto 0; }
.s7-config-h{ font-size:clamp(42px,11.4vw,58px); }
.s7-physical-placeholder{ max-width:420px; }
.s7-physical-note{ max-width:360px; }
/* Visitenkartenstaender mittig (Julian, 26.08.2026) - stand vorher immer
buendig links, komplett unabhaengig vom eigenen margin:auto.
.s7-card-holder-model ist absichtlich breiter als seine Spalte
(width:min(118%,420px), siehe Begruendung oben bei "Medien nie breiter
als ihr Platz") - auf Desktop schneidet die Sektion den Ueberstand rechts
sauber ab, das bleibt unveraendert. Mobil sollte derselbe Ueberstand
gleichmaessig auf beide Seiten verteilt sein, tat es aber nicht: die
Basisregel setzt margin:-16px auto 0, doch bei model-viewer (Custom
Element mit eigenem Resize-Handling) greift margin:auto nachweislich
nicht - nachgemessen per DevTools blieb das Element bei margin-left/
-right:auto trotzdem exakt buendig am linken Rand, sogar mit !important
erzwungen und selbst ueber display:flex+justify-content:center am
Elternelement. Vermutlich ueberschreibt die Bibliothek eigene
Stil-Eigenschaften bei jedem Render-Frame.
left:50% + transform statt margin: verschiebt die Box relativ zu ihrer
eigenen (unveraenderten) Normalposition, ohne dass margin oder Breite
eine Rolle spielen - genau das umgeht die Bibliothek nicht. Getestet:
Ueberstand jetzt gleich gross links wie rechts. */
.s7-card-holder-model{ left:50%; transform:translateX(-50%); }
.s7-layout{
grid-template-columns:1fr;
gap:42px;
margin-top:42px;
}
.s7-price-block{ max-width:430px; }
.s7-kalk{
grid-template-columns:56px minmax(0,1fr);
gap:16px;
}
.s7-kalk-btn{
grid-column:1 / -1;
width:100%;
min-width:0;
}
.s7-hosting{
padding-inline:0;
justify-content:flex-start;
}
}
@media(max-width:600px){
.s7-preise{
padding:56px 20px 28px;
}
.s7-head{ text-align:left; }
.s7-h{
font-size:clamp(40px,11.8vw,54px);
line-height:1.02;
text-wrap:initial;
}
.s7-sub{
margin-top:16px;
font-size:15px;
}
.s7-layout{ margin-top:38px; }
.s7-price-label{ font-size:27px; }
.s7-price{ font-size:clamp(82px,25vw,104px); }
.s7-packages-cta{
padding-inline:18px;
font-size:14px;
}
.s7-factors-title{ font-size:23px; }
.s7-factor{
grid-template-columns:32px minmax(0,1fr);
column-gap:10px;
}
.s7-kalk{
margin-top:26px;
padding-block:24px;
}
.s7-kalk-h{ font-size:19px; }
.s7-kalk-p{ font-size:12px; }
.s7-hosting{
gap:10px;
font-size:12px;
}
.s7-hosting > i{ font-size:22px; }
}
/* ─── S9 · KONTAKT (WhatsApp) ─── */
/* ─── S3 · FOTO-PLATZHALTER (grau, beschriftet — später durch echtes Foto ersetzen) ─── */
.rd-photo-ph{ position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:repeating-linear-gradient(135deg,#ECEDF0 0 13px,#E4E6EA 13px 26px); color:#9CA3AF; }
.rd-photo-ph span{ font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; font-size:12px; letter-spacing:0.18em; text-transform:uppercase; font-weight:700; }
.rd-photo-ph .rd-photo-ph-sub{ font-size:11px; letter-spacing:0.06em; font-weight:500; color:#AEB4BC; text-transform:none; }
/* ═══════════ HERO R5 · finale Desktop-Vorlage 23.07.2026 ═══════════ */
/* Navbar ~14% groesser (15.09.2026, Leo: "10 bis 15% groesser, ohne Animationen
zu aendern") - alle Groessen-Werte unten (Hoehe, Logo, Nav-Schrift, CTA-
Button) proportional um denselben Faktor skaliert, Farben/Uebergaenge/
Animationen unangetastet. --nav-height (var, siehe :root oben) war 88px,
jetzt 100px - zieht scroll-padding-top und die Anker-Offsets weiter unten
automatisch mit (siehe deren eigene Kommentare). */
#site-header {
height: var(--nav-height);
}
#site-header .header-inner {
width: var(--shell);
max-width: none;
height: var(--nav-height);
padding: 0;
gap: clamp(27px, 3.42vw, 59px);
}
#site-header .header-logo {
width: clamp(251px, 17.73vw, 296px);
height: 64px;
position: relative;
flex-shrink: 0;
}
#site-header .header-logo img {
position: absolute;
left: 0;
/* Sichtbares Logo senkrecht mittig in der Leiste, gleich viel Luft oben wie
unten (10.10.2026, Leo). Ersetzt "Logo-Oberkante = Knopf-Oberkante" vom
06.10.: das liess bei 1920px 19,5px Luft ueber und nur 11,2px unter der
Zeichnung, weil das Bild oben mehr Leerraum hat als unten.
32px Boxmitte (64px-Box) = Mitte der Leiste
- 62px * .52295 Mitte der Zeichnung im Bild: oben 6,02 %, unten
1,43 % Leerraum -> (6,02 + 98,57) / 2 = 52,295 %
(logo-header.png und logo-header-dark-r6.png, beide
2352x698 ausgemessen)
Haengt nur noch an der Logohoehe, nicht mehr am CTA-Knopf. Eine
Skalierung um die senkrechte Mitte (Vorschau-Block in index.html,
transform-origin left center) laesst die Mitte stehen. */
top: calc(32px - 62px * .52295);
width: auto;
/* Früher 58px plus scale(1.008, .931) — eine ungleichmäßige Skalierung
staucht das Logo und macht die Kanten unscharf. Jetzt die effektive Höhe
direkt gesetzt, Seitenverhältnis bleibt erhalten. */
height: 62px;
margin: 0;
object-fit: contain;
object-position: left center;
}
#site-header .header-logo-dark { display: none; }
#site-header .header-nav {
gap: clamp(2px, .57vw, 11px);
/* Reiner optischer Feinschliff (2px hoch/links) - bewusst per margin statt
transform (23.09.2026, Leo: gleiche Regel in subpage-nav.css verursachte
dort ein zu schmales Leistungen-Dropdown, siehe Kommentar dort. Hier zur
Konsistenz identisch nachgezogen, obwohl auf dieser Seite nicht
nachgemessen fehlerhaft - dieselbe Regel soll nicht an zwei Stellen
unterschiedlich funktionieren.) Keine Transition haengt an dieser
Eigenschaft, es aendert sich also keine Animation. */
margin: 2px 0 0 -2px;
}
#site-header .nav-btn,
#site-header .nav-dropdown-btn {
color: #111827;
font-size: clamp(16px, 1.14vw, 19px);
font-weight: 500;
padding: 11px clamp(14px, 1.25vw, 20px);
text-shadow: none;
}
#site-header .nav-btn:hover,
#site-header .nav-dropdown-btn:hover,
#site-header .nav-dropdown-btn.open {
color: #061B3A;
background: rgba(6,27,58,.06);
}
#site-header .header-cta .btn-primary {
width: 287px;
min-height: 55px;
padding: 14px 20px;
border-radius: 9px;
background: #0757F7;
border: 1px solid rgba(255,255,255,.24);
box-shadow: 0 10px 24px -12px rgba(7,87,247,.6);
font-size: clamp(16px, 1.03vw, 17px);
font-weight: 500;
white-space: nowrap;
}
#site-header .header-cta .btn-primary:hover {
background: #004CE0;
}
#site-header .header-cta {
transform: translate3d(-9px, 3px, 0);
}
.mobile-language {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 38px;
padding: 0 11px;
border: 1px solid rgba(6, 27, 58, .24);
border-radius: 999px;
background: rgba(255, 255, 255, .7);
color: #526176;
font-family: var(--font);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
line-height: 1;
white-space: nowrap;
appearance: none;
cursor: pointer;
}
.mobile-language .chev {
width: 13px; height: 13px; font-size: 13px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .28s cubic-bezier(.23, 1, .32, 1);
}
.mobile-language.open .chev { transform: rotate(180deg); }
.language-dropdown__option {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: 39px;
padding: 9px 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: #526176;
cursor: pointer;
font: 600 13px/1 var(--font);
text-align: left;
}
.language-dropdown__option:hover,
.language-dropdown__option.is-selected { background: #F0F6FF; color: #061B3A; }
.language-dropdown__option span { color: #8290A4; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.mobile-language-wrap { position: relative; }
.mobile-language {
display: flex;
width: max-content;
margin: 0 0 14px;
border-color: rgba(255, 255, 255, .24);
background: rgba(255, 255, 255, .06);
color: rgba(255, 255, 255, .58);
}
.mobile-language:hover,
.mobile-language.open { background: rgba(255, 255, 255, .12); color: #fff; }
.mobile-language-dropdown {
display: grid;
max-height: 0;
margin: -6px 0 10px;
overflow: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: max-height .2s ease, opacity .2s ease, transform .2s ease;
}
.mobile-language-dropdown.open { max-height: 100px; opacity: 1; pointer-events: all; transform: translateY(0); }
.mobile-language-dropdown .language-dropdown__option { color: #D9E2F2; }
.mobile-language-dropdown .language-dropdown__option:hover,
.mobile-language-dropdown .language-dropdown__option.is-selected { background: rgba(255, 255, 255, .09); color: #fff; }
.mobile-language-dropdown .language-dropdown__option span { color: #9FB0C8; }
@media (min-width: 900px) and (max-width: 1199px) {
#site-header .header-cta { gap: 8px; }
#site-header .header-cta .btn-primary { width: auto; min-height: 44px; padding-inline: 14px; }
}
/* Seit 06.10.2026 (Leo) bewegt sich in der Leiste beim Scrollen nichts mehr:
die Logo-Box behaelt ihre 64px auch gescrollt (frueher 58px, das Logo
rutschte dadurch 3px tiefer). Menue und CTA: siehe [data-nav-fest] in
scrolly-hero.css. */
#site-header:not(.scrolled) .header-inner {
transform: translateY(8px);
}
/* Navbar ueber die gesamte Seite auf voller Breite (Leo, 19.09.2026, erweitert
19.09.2026 auf Julians Wunsch: sprang beim Verlassen der Hero-Section
zurueck auf den zentrierten --shell-Container - jetzt bleibt sie fuer die
komplette Seite bei voller Breite). Logo links, CTA rechts, je mit
--gutter Abstand zum Fensterrand statt dem zentrierten --shell-Container.
Bis 06.10.2026 rutschte sie nach dem ersten Scroll (.scrolled, ab 10px) um
~3vw nach innen. Das ist entfallen (Leo): Logo und CTA bleiben auf ihrer
Position aus dem Ruhemodus, beim Scrollen wird nur noch der Hintergrund
zur ganzen Leiste. */
#site-header .header-inner {
width: 100%;
max-width: none;
padding-inline: var(--gutter);
}
/* Hero-Section bleibt beim Scrollen hell statt auf .over-dark umzuschalten
(Julian, 19.09.2026): sobald man 10px scrollt, verschwindet sonst der
diagonale weisse Keil (scrolly-hero.css, #site-header.scrolled::before) UND
.scrolled.over-dark faerbt in derselben Bewegung die GESAMTE Leiste dunkel -
ein harter Sprung von "halb weiss/halb transparent" zu "komplett schwarz"
nach nur 10px. Diese Overrides halten die helle Keil-Optik (weisser
Hintergrund, dunkle Logo/Nav-Farben) auch mit .scrolled, solange .on-hero
noch aktiv ist. Verlaesst die Leiste die Hero-Section (.on-hero faellt weg),
greift die normale #site-header.scrolled.over-dark-Regel unten unveraendert
fuer #projekte/Fusszeile. */
#site-header.on-hero.scrolled.over-dark {
background: #FFFFFF;
backdrop-filter: blur(14px) saturate(115%);
-webkit-backdrop-filter: blur(14px) saturate(115%);
border-bottom-color: var(--border);
box-shadow: 0 2px 14px rgba(6,27,58,0.07);
}
#site-header.on-hero.scrolled .header-logo-light { display: block; }
#site-header.on-hero.scrolled .header-logo-dark { display: none; }
#site-header.on-hero.scrolled .nav-btn,
#site-header.on-hero.scrolled .nav-dropdown-btn {
color: #14233d;
text-shadow: none;
}
#site-header.on-hero.scrolled .nav-btn:hover,
#site-header.on-hero.scrolled .nav-dropdown-btn:hover,
#site-header.on-hero.scrolled .nav-dropdown-btn.open {
color: #14233d;
background: rgba(20,35,61,0.07);
}
/* ─── KOPFZEILE UEBER DUNKLEN FLAECHEN (23.08.2026) ────────────────────────
Vorher haing das Aussehen allein an .scrolled, also an window.scrollY > 10.
Zehn Pixel nach dem Seitenanfang klappte damit die weisse Leiste auf - und
die stand dann ueber der schwarzen Scrolly-Buehne und der schwarzen Seite 2,
also weiss auf schwarz mitten im Bild.
Jetzt gibt es zwei getrennte Zustaende:
.scrolled - Leiste ist ueberhaupt sichtbar (Geometrie, Schatten)
.over-dark - hinter der Leiste liegt gerade eine dunkle Sektion
Die Trennung ist Absicht: .scrolled steuert weiterhin die 8px Versatz der
Kopfzeile, sonst wuerde der Inhalt beim Wechsel hell/dunkel springen.
Welche Sektionen dunkel sind, steht als data-nav-dunkel am Element - nicht
als Liste im Skript, damit beides zusammen umzieht.
Hier steht nur der dunkle Balken. Weisses Logo und weisse Schrift haengen in
assets/css/scrolly-hero.css, wo sie vorher schon standen - dort nur von
:not(.scrolled) auf .over-dark umgestellt, statt sie in zwei Dateien doppelt
zu pflegen. */
#site-header.scrolled.over-dark {
/* Voll opak statt 74% (Julian, 30.08.2026, gleicher Grund wie
header.scrolled oben): ueber #projekte schimmerte durch den Rest-
Durchschein noch Helles von der Section davor durch die Leiste. Farbton
unveraendert (unser dunkler Navbar-Ton), nur die Deckkraft auf 100%. */
background: #060A12;
backdrop-filter: blur(14px) saturate(115%);
-webkit-backdrop-filter: blur(14px) saturate(115%);
border-bottom-color: rgba(255,255,255,.10);
box-shadow: 0 2px 14px rgba(0,0,0,.38);
}
/* Die Textfarben-Overrides fuer die Scroll-Expand-Insel (.scrolly-hero
#dwc-hero-root h2/p.text-blue-200) standen bis 29.08.2026 hier. Die Insel
ist raus (Archiv: _intern/_bausteine/scroll-expand-hero/), der statische
Hero .hero-split bringt seine Textfarben selbst mit
(assets/css/scrolly-hero.css). */
.hero-viewport {
--hero-surface: #ffffff;
--hero-heading: #090D16;
--hero-copy: #101827;
--hero-rule: rgba(6,27,58,.17);
--hero-blue: #0757F7;
margin-top: calc(-1 * var(--nav-height));
padding-top: 0;
min-height: 0;
/* Höhe hängt bewusst NUR an der Fensterbreite, nie an der Fensterhöhe.
Früher stand hier max(calc(100vh + 48px), …). Das koppelte die gesamte
vertikale Komposition an den Viewport — und weil jeder Browser
unterschiedlich viel Platz für seine eigenen Leisten abzieht (Chrome mit
Lesezeichenleiste rund 1034px, Firefox ohne rund 1072px auf demselben
Monitor), rechnete dieselbe Regel pro Browser ein anderes Ergebnis aus.
Bei 1440px Breite wanderte die Trustbar dadurch um 65px.
min(calc(26vw + 680px), 1160px): der Inhalt braucht Höhe proportional zur
Breite (die Mockups werden breiter) und hört bei 1160px auf, weil die
Mockups ab ihrer nativen Größe nicht weiter wachsen.
Minus clamp(69px, 5vw, 96px): das ist das Band der Folge-Headline
(„Verliert Ihre Website gerade Kunden?"), das früher absolut am unteren
Hero-Rand hing und jetzt zu Sektion 2 gehört. Alle übrigen Elemente behalten
dadurch exakt ihre bisherige Position — der Hero endet nur früher, mit der
Trustbar als letztem Element. */
height: calc(min(calc(26vw + 680px), 1160px) - clamp(69px, 5vw, 96px));
background:
linear-gradient(180deg, #fff 0%, #fff 43%, #FBFDFF 52%, #F7FAFE 82%, #fff 100%);
color: var(--hero-copy);
/* Spalte statt Block: Inhalt oben, Trustbar als letztes Element im Fluss. */
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero-viewport::after {
display: none;
}
.hero-picture {
position: absolute;
inset: 0 0 auto;
/* Gilt nur bis 1199px (ab 1200px greift aspect-ratio, siehe unten). Von 44,4%
auf 47,92% angehoben, weil der Hero um das Band der Folge-Headline kürzer
geworden ist: 44,4% × 940px = 417px, dieselben 417px sind an 871px jetzt
47,92%. Das Bildband behält damit exakt seine bisherige Höhe. */
height: 47.92%;
z-index: 1;
overflow: hidden;
}
/* Weicher, hoher Ausklang nach unten: mehrstufig statt einer kurzen Kante,
damit die Wasserlinie ohne sichtbaren Schnitt ins Weiß läuft. */
.hero-picture::after {
content: '';
position: absolute;
inset: auto 0 0;
height: 32%;
pointer-events: none;
background: linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.05) 18%,
rgba(255,255,255,.25) 40%,
rgba(255,255,255,.60) 62%,
rgba(255,255,255,.88) 82%,
#fff 100%);
}
.hero-picture img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: 100% 10%;
image-rendering: auto;
}
.hero-photo-overlay {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(90deg,
#fff 0%,
#fff 35%,
rgba(255,255,255,.99) 43%,
rgba(255,255,255,.90) 51%,
rgba(255,255,255,.50) 61%,
rgba(255,255,255,.10) 73%,
rgba(255,255,255,0) 84%);
opacity: 1;
}
.hero-r5__section {
position: relative;
z-index: 3;
/* Wächst in die verbleibende Hero-Höhe; die Trustbar darunter behält ihre
eigene Höhe. Vorher height:100% plus absolut positionierte Trustbar. */
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
width: var(--shell);
max-width: none;
margin: 0 auto;
/* Vorher clamp(216px, 20vh, 284px). 20vh lag im gesamten realen Fensterbereich
ohnehin an der Untergrenze und hätte oberhalb davon je nach Browserleiste
einen anderen Wert ergeben. */
padding: 216px 0 0;
}
.hero-r5__main {
position: relative;
flex: 1 1 auto;
min-height: 0;
}
/* Anteil am Raster statt fester 900px-Deckel: die Textspalte behält damit über
alle Desktopbreiten dasselbe Verhältnis zur Gesamtbreite. */
.hero-r5__copy {
width: 58%;
}
.hero-r5__copy h1 {
margin: 0;
max-width: 100%;
font-family: var(--font-serif);
font-size: clamp(52px, 4.0vw, 66px);
font-weight: 700;
line-height: 1.18;
letter-spacing: -.042em;
color: var(--hero-heading);
text-wrap: balance;
/* Kein transform: eine eigene Compositing-Ebene schaltet das Subpixel-
Antialiasing der Schrift ab und lässt die Headline weich wirken. */
margin-top: -10px;
margin-left: 1px;
}
.hero-r5__copy h1 span {
color: var(--hero-blue);
/* Nutzt jetzt den echten Playfair-Kursivschnitt (siehe @font-face oben) statt
einer vom Browser errechneten Schrägstellung — spürbar geringere Neigung
und korrekte Strichstärken. Laufweite an die Headline angeglichen, vorher
-.075em und dadurch gedrängt. */
font-style: italic;
font-weight: 700;
letter-spacing: -.048em;
font-synthesis: none;
}
/* Breite folgt dem Inhalt statt einer erzwungenen Mindestbreite — dadurch
sitzt der Pfeil in konstantem Abstand hinter dem Text, statt an eine ferne
rechte Kante geschoben zu werden. */
.hero-process-link {
width: fit-content;
min-height: 46px;
margin-top: 28px;
padding: 12px 20px;
display: inline-flex;
align-items: center;
gap: 16px;
color: var(--hero-copy);
border: 1.5px solid var(--hero-blue);
border-radius: 4px;
font-size: clamp(15px, 1.05vw, 17px);
font-weight: 500;
letter-spacing: -.004em;
line-height: 1;
text-decoration: none;
background: rgba(255,255,255,.14);
transition: background .18s ease, transform .18s ease;
}
.hero-process-link:hover {
background: rgba(7,87,247,.07);
transform: translateY(-1px);
}
.hero-process-link:focus-visible,
.hero-reference-card:focus-visible,
.hero-reference-link:focus-visible {
outline: 3px solid rgba(7,87,247,.45);
outline-offset: 4px;
}
.hero-process-link svg,
.hero-reference-link svg {
flex: 0 0 auto;
}
.hero-r5__lower {
margin-top: 37px;
display: grid;
grid-template-columns: minmax(300px, 378px) minmax(0, 1fr);
gap: 64px;
align-items: start;
}
.hero-benefits {
padding-top: 0;
}
.hero-benefits h2 {
margin: 0 0 clamp(18px, 1.9vw, 34px);
width: fit-content;
position: relative;
font-family: var(--font-serif);
/* Obergrenze 43px ist an die Spaltenbreite gekoppelt: darüber passt
"Dann entscheiden." nicht mehr in eine Zeile. */
font-size: clamp(33px, 2.26vw, 38px);
font-weight: 700;
/* line-height ersetzt das frühere scaleY(1.095): eine ungleichmäßige
Skalierung verzerrt die Serif-Glyphen und macht sie unscharf. */
line-height: 1.03;
letter-spacing: -.025em;
color: var(--hero-heading);
margin-top: -4px;
}
.hero-benefits h2::after {
content: '';
position: absolute;
right: -3px;
bottom: -15px;
width: 66%;
height: 7px;
background: url("../images/hero-marker-r6.png") center / 100% 100% no-repeat;
filter: brightness(1.28) saturate(1.3);
}
.hero-benefit-list {
max-width: 245px;
margin-top: clamp(22px, 2.6vw, 48px);
list-style: none;
}
.hero-benefit-list li {
padding: 0 4px clamp(8px, 1vw, 17px);
margin-bottom: clamp(8px, 1vw, 17px);
border-bottom: 1px solid var(--hero-rule);
}
.hero-benefit-list li:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.hero-benefit-list strong,
.hero-benefit-list span {
display: block;
}
.hero-benefit-list strong {
color: var(--hero-copy);
font-size: clamp(14px, 1.02vw, 16.5px);
font-weight: 600;
line-height: 1.25;
}
.hero-benefit-list span {
margin-top: 2px;
color: var(--hero-blue);
font-size: clamp(13px, .92vw, 15px);
line-height: 1.25;
}
.hero-references {
min-width: 0;
}
/* Obergrenzen = native Pixelmaße der beiden PNGs (555×290 und 476×252).
Darüber hinaus vergrößert skaliert der Browser hoch und die Mockups werden
unscharf. Kleiner werden dürfen sie (Verkleinern bleibt scharf), deshalb
minmax(0, …). */
.hero-reference-grid {
display: grid;
grid-template-columns: minmax(0, 600px) minmax(0, 514px);
gap: 34px;
align-items: center;
}
.hero-reference-card {
min-width: 0;
display: block;
overflow: hidden;
color: #07162E;
background: transparent;
border: 0;
border-radius: 8px;
box-shadow: 0 18px 38px -24px rgba(6,27,58,.24);
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease;
}
.hero-reference-card img {
width: 100%;
height: auto;
display: block;
}
.hero-reference-card:hover {
/* Nur Verschiebung, kein scale() — Hochskalieren macht das PNG unscharf. */
transform: translateY(-4px);
box-shadow: 0 26px 50px -26px rgba(6,27,58,.31);
}
.hero-reference-card--secondary {
position: relative;
top: 1px;
}
.hero-reference-link {
width: fit-content;
margin: 23px auto 0;
display: flex;
align-items: center;
gap: 10px;
color: var(--hero-blue);
font-size: clamp(13px, .95vw, 16px);
font-weight: 500;
line-height: 1;
text-decoration: none;
transform: translateX(-17px);
}
.hero-reference-link:hover { text-decoration: underline; }
.hero-trustbar {
/* Letztes Element des Hero im normalen Fluss — vorher position:absolute mit
bottom-Offset, wodurch sie an der Hero-Höhe hing statt sie zu bilden.
position:relative bleibt nur, damit z-index über dem Bildband greift. */
position: relative;
z-index: 3;
flex: 0 0 auto;
min-height: clamp(62px, 4.8vw, 92px);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding-inline: calc((100% - var(--shell)) / 2);
background: rgba(255,255,255,.86);
border-top: 1px solid var(--hero-rule);
border-bottom: 1px solid var(--hero-rule);
backdrop-filter: blur(7px);
}
.hero-trustbar__item {
min-width: 0;
padding: 7px 28px;
}
.hero-trustbar__item:first-child {
padding-left: 28px;
}
.hero-trustbar__item:nth-child(2) {
padding-left: clamp(70px, 7vw, 117px);
}
.hero-trustbar__item + .hero-trustbar__item {
border-left: 1px solid var(--hero-rule);
}
.hero-trustbar strong,
.hero-trustbar span {
display: block;
}
.hero-trustbar strong {
color: var(--hero-copy);
font-size: clamp(13px, 1vw, 16px);
font-weight: 700;
line-height: 1.25;
}
.hero-trustbar span {
margin-top: 3px;
color: #455269;
font-size: clamp(12px, .9vw, 14.5px);
line-height: 1.3;
}
@media (min-width: 1200px) {
/* Das Bildband übernimmt exakt das Seitenverhältnis des Bildausschnitts
(3840 × 1280). Dadurch beschneidet object-fit nichts mehr: auf jeder
Desktopbreite ist derselbe Bildausschnitt vollständig zu sehen — Himmel,
Skyline, Elbe und Anleger — und die Komposition bleibt identisch, statt
je nach Fensterproportion einen anderen Teil zu zeigen.
Tablet und Mobile behalten ihre prozentualen Höhen. */
.hero-picture{
height: auto;
/* Schmaler als das Quellverhältnis (2,985) — dadurch beschneidet
object-fit unten. Oben verankert, damit Türme und Skyline stehen
bleiben und Elbe/Spiegelungen kürzer ausfallen. */
aspect-ratio: 161 / 50;
}
/* Der Weiß-Verlauf bekommt exakt die Geometrie des Bildbands, damit seine
Prozentwerte sich auf das Bild beziehen und nicht auf die Hero-Höhe. */
.hero-photo-overlay {
inset: 0 0 auto;
height: auto;
aspect-ratio: 161 / 50;
/* Keine vertikale Abstufung mehr. Sie sollte die Elbe vor dem Ausbleichen
schützen, senkte aber die Deckkraft über die ganze Breite — auch links,
wo unten Ufer, Boote und Wasser hinter „Erst sehen. Dann entscheiden."
durchschienen. Der Schutz der Elbe läuft jetzt über die horizontale
Achse: der Verlauf ist bei 64% vollständig durchsichtig und rührt den
rechten Bildteil gar nicht mehr an. */
-webkit-mask-image: none;
mask-image: none;
}
}
/* Entfernt 20.08.2026: Dieser Block hat zwischen 1200px und 1500px eine eigene
vertikale Rhythmik gefahren und ist bei exakt 1501px hart umgesprungen
(Trustbar 62→92px, Info-Band 69→96px, Überschrift 40→46px). Die Werte sind
jetzt als clamp() in den Basisregeln hinterlegt und laufen stufenlos durch. */
@media (max-width: 1199px) {
#leistungen-dropdown {
left: 24px;
right: 24px;
width: auto;
transform: translateY(-6px);
}
#leistungen-dropdown.open { transform: translateY(0); }
/* Unter 1200px gilt weiter das bisherige Verhalten: volle Breite plus eigenes
Padding statt des --shell-Rasters. Tablet/Mobile bleiben damit unverändert. */
#site-header .header-inner,
.hero-r5__section { width: 100%; }
.hero-trustbar { padding-inline: 0; }
#site-header .header-inner { padding-inline: 24px; }
#site-header .header-logo { width: 215px; }
#site-header .header-nav { gap: 0; }
#site-header .nav-btn,
#site-header .nav-dropdown-btn { padding-inline: 9px; font-size: 13.5px; }
#site-header .header-cta .btn-primary { padding-inline: 16px; font-size: 13px; }
.hero-viewport {
height: auto;
/* 940px minus das Band der Folge-Headline, das jetzt zu Sektion 2 gehört.
Der Hero endet dadurch genau dort, wo die Trustbar endet. */
min-height: 871px;
}
.hero-r5__section {
/* Unterer Wert ist nur noch der Mindestabstand zur Trustbar. Vorher 180px,
weil dort Trustbar und Folge-Headline absolut darüber lagen. Die genaue
Position steuert weiterhin min-height des Hero: die Sektion wächst per
flex:1 in den Rest hinein, die Trustbar bleibt unten. */
padding: 130px 28px 40px;
}
.hero-r5__copy { width: min(720px, 72vw); }
.hero-r5__copy h1 { font-size: clamp(45px, 4.95vw, 60px); max-width: 900px; }
.hero-picture img { object-position: 100% 18%; }
.hero-r5__lower {
grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
gap: 30px;
}
.hero-benefits h2 {
font-size: 34px;
}
.hero-reference-grid { gap: 20px; }
}
/* 900-1199px (Tablet quer/kleines Notebook): Logo + 5 Nav-Punkte + Sprache +
CTA passen dort selbst nach dem obigen Block noch nicht nebeneinander - der
CTA-Knopf ragt rechts über den Rand hinaus (Julian, 22.09.2026). Nur noch
enger gestellt, keine neuen Elemente/Umbrueche. */
@media (min-width: 900px) and (max-width: 1199px) {
#site-header .header-inner { gap: 14px; padding-inline: 16px; }
#site-header .nav-btn,
#site-header .nav-dropdown-btn { padding-inline: 6px; font-size: 12.5px; }
#site-header .header-cta .btn-primary { padding-inline: 8px; font-size: 12px; }
}
/* 1200-1599px (Notebook/Tablet quer, z.B. MacBook): ohne Verkleinerung reicht
"Preise" bei voller Nav-Groesse ueber die weisse Diagonalflaeche in
scrolly-hero.css hinaus auf den schwarzen Grund und wird unlesbar (Leo,
22.09.2026, Julian-Screenshot). Dieselbe kompakte Groesse wie unter 1199px
fortgesetzt, bis ab 1600px wieder genug Eigenraum fuer die volle Groesse da
ist (siehe scrolly-hero.css, dortiger Nav-Versatz). Nur Schriftgroesse/
Innenabstand der Navigation - Logo, CTA-Knopf-Groesse und Hero-Layout
bleiben unveraendert. */
/* 900-1599px (Tablet quer / MacBook): Logo, Menue und CTA-Knopf skalieren
stufenlos mit der Fensterbreite (Leo, 24.09.2026). Vorher standen Logo
(62px hoch) und CTA (287px breit) fest in Desktop-Groesse, waehrend das
Menue auf 12.5-13.5px schrumpfte - die Leiste wirkte dadurch gequetscht.
Alle Werte laufen bei 1600px in die Desktop-Groessen darueber ein (Logo
62px, Knopf 55px hoch); Desktop ab 1600px und Mobil bleiben unveraendert.
--hdr-logo-h nutzt auch scrolly-hero.css (Menue-Position im Hero-Zustand). */
@media (min-width: 900px) and (max-width: 1599px) {
#site-header {
--hdr-logo-h: clamp(44px, 3.875vw, 62px);
}
/* Box = Bildbreite (Seitenverhaeltnis logo-header.png 2352x698 = 3.37).
top: sichtbares Logo senkrecht mittig, gleiche Rechnung wie oben bei
#site-header .header-logo img (10.10.2026), mit der hier gueltigen
Logohoehe. (Die Hilfsvariable --hdr-cta-h fuer die alte Ausrichtung an
der Knopf-Oberkante ist damit entfallen.) */
#site-header .header-logo { width: calc(var(--hdr-logo-h) * 3.37); }
#site-header .header-logo img {
height: var(--hdr-logo-h);
top: calc(32px - var(--hdr-logo-h) * .52295);
}
/* 12.5px/7px bei 1024px bis 15.5px/12px bei 1599px. */
#site-header .nav-btn,
#site-header .nav-dropdown-btn {
font-size: clamp(12.5px, 0.52vw + 7.17px, 15.5px);
padding-inline: clamp(6px, 0.87vw - 1.9px, 12px);
}
#site-header .header-cta .btn-primary {
width: auto;
min-height: clamp(40px, 3.44vw, 55px);
padding-inline: clamp(12px, 1.25vw, 20px);
font-size: clamp(12.5px, 1.03vw, 16.5px);
}
}
@media (max-width: 899px) {
#site-header .header-nav,
#site-header .header-cta { display: none; }
#site-header .header-inner {
display: flex;
justify-content: space-between;
}
#site-header .header-logo { width: min(245px, 68vw); }
.hero-viewport {
min-height: 1031px;
}
/* 37% × 1100px = 407px; dieselben 407px sind an 1031px jetzt 39,48%. */
.hero-picture { height: 39.48%; }
.hero-r5__section {
padding: 120px 22px 40px;
}
.hero-r5__copy { width: 100%; max-width: 670px; }
.hero-r5__copy h1 { font-size: clamp(43px, 7.2vw, 58px); }
.hero-r5__lower {
grid-template-columns: 1fr;
gap: 28px;
}
.hero-benefits h2 { font-size: 40px; }
.hero-benefit-list {
max-width: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.hero-benefit-list li {
margin: 0;
border: 0;
border-left: 1px solid var(--hero-rule);
padding: 0 14px;
}
.hero-reference-link { margin-right: 28%; }
.hero-trustbar__item { padding-inline: 28px; }
}
/* Leistungen-Dropdown der Startseite: nur noch der Hero-Keil. Panel, Farben,
Beratungszeile, Hover und Sprachwahl stehen seit 10.10.2026 fuer alle
Seiten gemeinsam in assets/css/dwc-navbar.css (Leo: "Navbar ueberall
gleich"). Hier bleibt, was es nur auf der Startseite gibt: der weisse Keil
(scrolly-hero.css, #site-header::before) im Ruhemodus.
- Solange das Panel offen ist, faehrt der Keil zur ganzen Leiste aus -
gleiche Kurve wie beim ersten Scroll -, damit ueber dem Panel keine
schwarze Luecke steht. bottom:-1px: der Keil fuellt sonst nur die
Innenhoehe (84px), durch den durchsichtigen 1px-Rand der Leiste schien
rechts das Hero-Schwarz als Strich ueber dem Panel.
- Beim Schliessen faehrt der Keil erst zurueck, wenn das Panel weitgehend
eingerollt ist (0,3 s Verzoegerung); sein 1px-Ueberstand faellt erst
danach weg. .dd-schliesst setzt assets/js/dwc-navbar.js nur fuer die
Dauer des Schliessens (750 ms) - beim Scrollen laeuft der Keil sofort.
Spezifischer als die Regel in scrolly-hero.css, die nach dieser Datei laedt. */
@media (min-width: 900px) {
#site-header:not(.scrolled):has(#leistungen-dropdown.dwc-dd-voll.open)::before {
bottom: -1px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
html #site-header::before {
transition:
clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
bottom 0s linear 0.42s;
}
html #site-header.dd-schliesst:not(.scrolled)::before {
transition:
clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
opacity 0.25s ease,
bottom 0s linear 0.72s;
}
html #site-header:has(#leistungen-dropdown.dwc-dd-voll.open)::before {
transition:
clip-path 0.42s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.25s ease,
bottom 0s linear 0s;
}
}
@media (max-width: 620px) {
.hero-viewport { min-height: 1144px; }
/* 30% × 1230px = 369px; dieselben 369px sind an 1144px jetzt 32,26%. */
.hero-picture { height: 32.26%; }
.hero-r5__section { padding-top: 112px; padding-bottom: 24px; }
.hero-r5__copy h1 { font-size: clamp(37px, 10.5vw, 50px); }
.hero-process-link { min-width: min(100%, 312px); }
.hero-benefit-list { grid-template-columns: 1fr; }
.hero-benefit-list li {
border-left: 0;
border-bottom: 1px solid var(--hero-rule);
padding: 0 0 10px;
}
.hero-reference-grid { grid-template-columns: 1fr; }
.hero-reference-card--secondary { display: none; }
.hero-reference-link { margin-right: 12%; }
.hero-trustbar {
grid-template-columns: 1fr;
}
.hero-trustbar__item {
padding: 8px 22px;
}
.hero-trustbar__item + .hero-trustbar__item {
border-left: 0;
border-top: 1px solid var(--hero-rule);
}
}
/* ═══ Hero R5.1 · mehr Weißraum/Präsenz auf Desktop (≥1200px), Vorlage seite-1-hero angeglichen · 20.08.2026 ═══ */
@media (min-width: 1200px) {
.hero-process-link {
min-height: 52px;
/* Vorher clamp(44px, 4.6vh, 62px) — realer Wert lag zwischen 44 und 49px
und verschob sich mit jeder Browserleiste. */
margin-top: 48px;
padding: 14px 24px;
gap: 18px;
font-size: clamp(15.5px, 1.08vw, 18px);
}
/* Die Vorteilsspalte bleibt eine bewusst schmale Textspalte; ihre Breite ist
an die Serif-Überschrift gekoppelt (siehe .hero-benefits h2). Die Mockups
bekommen ihren Zuwachs stattdessen daraus, dass die Sektion jetzt die volle
Rasterbreite nutzt statt zusätzlich innen zu paddieren. */
/* Überschüssige Hero-Höhe gleichmäßig verteilen: die Textspalte hält den
Mindestabstand, die auto-Ränder der unteren Zeile teilen den Rest zu
gleichen Teilen über und unter die Mockups auf — statt alles als eine
große Lücke vor dem Info-Band zu sammeln. */
.hero-r5__main {
display: flex;
flex-direction: column;
box-sizing: border-box;
/* Nur noch der Mindestabstand der Mockups zur Trustbar. Die Zuschläge für
Info-Band und Folge-Headline entfallen, weil beide nicht mehr absolut
über dieser Fläche liegen, sondern eigene Höhe im Fluss haben. */
padding-bottom: 140px;
}
.hero-r5__copy {
flex: 0 0 auto;
/* Vorher clamp(68px, 7vh, 96px) — realer Wert lag zwischen 68 und 75px. */
margin-bottom: 72px;
}
.hero-r5__lower {
margin-top: auto;
margin-bottom: auto;
grid-template-columns: minmax(300px, 378px) minmax(0, 1fr);
gap: clamp(40px, 3vw, 56px);
}
/* Mockups an der rechten Rasterkante ausrichten wie in der Designvorlage. */
.hero-reference-grid {
justify-content: end;
}
/* Drei Zonen statt eines langen Verlaufs:
0–40% deckend weiß, dort steht der Text
40–64% weicher Übergang, mit vielen Stützpunkten gegen Streifenbildung
ab 64% Deckkraft 0, das Foto bleibt vollständig unangetastet
Vorher lief der Verlauf bis 83% und legte damit noch einen Schleier über
die rechten Schiffe und deren Spiegelungen. */
.hero-photo-overlay {
background: linear-gradient(90deg,
#fff 0%,
#fff 40%,
rgba(255,255,255,.99) 45%,
rgba(255,255,255,.95) 48%,
rgba(255,255,255,.84) 51%,
rgba(255,255,255,.64) 54%,
rgba(255,255,255,.40) 57%,
rgba(255,255,255,.20) 60%,
rgba(255,255,255,.09) 62%,
rgba(255,255,255,0) 64%);
}
/* Unterer Ausklang, jetzt seitenabhängig: links und mittig voll wirksam,
nach rechts hin stark zurückgenommen, damit Wasser und Spiegelungen unter
den rechten Schiffen nicht ausgewaschen werden. */
.hero-picture::after {
height: 14%;
-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0,0,0,.74) 58%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.24) 82%, rgba(0,0,0,.18) 100%);
mask-image: linear-gradient(90deg, #000 0%, #000 46%, rgba(0,0,0,.74) 58%, rgba(0,0,0,.42) 70%, rgba(0,0,0,.24) 82%, rgba(0,0,0,.18) 100%);
}
/* Schmaler Abschluss über die volle Breite, ungemaskt. Er sorgt dafür, dass
die Unterkante des Bildbands auch rechts sauber ins Weiß läuft, obwohl der
große Ausklang dort zurückgenommen ist — sonst entstünde dort eine Kante. */
.hero-picture::before {
content: '';
position: absolute;
inset: auto 0 0;
height: 5%;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.30) 45%,
rgba(255,255,255,.72) 75%,
#fff 100%);
}
.hero-reference-link {
margin-top: 40px;
}
.hero-trustbar__item {
padding-block: 17px;
}
/* Einzüge prozentual zur Rasterspalte statt an feste Pixelmarken gekoppelt
(vorher 50vw - 497px bzw. clamp(70px,7vw,117px) — beide landeten je nach
Bildschirmbreite auf einer ganz anderen relativen Position). Die Prozente
rechnen gegen die 1fr-Spalte, also gegen das halbe Raster. */
.hero-trustbar__item:first-child {
padding-left: 40.4%;
}
.hero-trustbar__item:nth-child(2) {
padding-left: 14%;
}
}
/* Bühne für die React-Insel in #preise: nur Zentrierung.
Die Breite bringt die Komponente selbst mit. Kein margin-top mehr — die
Spalte sitzt jetzt neben .s7-offer statt darunter, siehe .s7-inner. */
.s7-wizard {
margin-top: 0;
}
/* Kein Flex-Container: die Komponente bringt mx-auto und max-w-[420px] selbst mit.
Als Flex-Item wuerde sie stattdessen auf Inhaltsbreite zusammenschrumpfen. */
#dwc-wizard-root {
display: block;
width: 100%;
text-align: left;
}
/* ─── DWC FARBDRAMATURGIE · Freigabe 23.08.2026 ────────────────────────────
Hero + Trustbar bleiben weiß. Danach führt die Seite bewusst durch
Schwarz → Weiß → Schwarz → Weiß → Beige → Weiß → Schwarz → Schwarz.
Fotos und Mockups bleiben Inhaltsmedien; dekorative Sektions-Hintergründe
werden entfernt, damit die Farbflächen die Führung übernehmen. */
:root{
--dwc-black:#000000;
--dwc-standard-black:#0D0B0A;
/* Zitatkachel im Dunkelzustand. 06.10.2026 (Leo) von #171311 auf #231E1B
aufgehellt: gegen das Schwarz darunter (#0D0B0A) war die Kachel kaum als
eigene Flaeche zu erkennen. Gleicher warmer Farbton, nur heller. */
--dwc-quote-black:#231E1B;
--dwc-white:#FFFFFF;
--dwc-action-blue:#0757F7;
--dwc-gold:#C99A3D;
--dwc-price-surface:#EDF2FA;
--primary:var(--dwc-black);
--primary-deep:var(--dwc-black);
--accent:var(--dwc-action-blue);
--accent-sky:#E8F0FF;
--bg:var(--dwc-white);
--bg-2:var(--dwc-white);
--bg-3:var(--dwc-white);
--bg-4:var(--dwc-white);
--bg-5:var(--dwc-white);
--gold:var(--dwc-gold);
--rd-primary:var(--dwc-black);
--rd-blue:var(--dwc-action-blue);
--rd-gold:var(--dwc-gold);
}
/* Seite 2 · Was uns ausmacht — reine schwarze Bühne, ohne Wellenbild. */
.about-section{
background:var(--dwc-standard-black) !important;
isolation:isolate;
}
.about-section .s3-inner{ z-index:1; }
/* .s6-bgframe stand hier mit drin und ist beim Karussell-Umbau (23.08.2026)
ersatzlos entfallen - das Hintergrundbild der Bewertungssektion war ohnehin
per display:none abgeschaltet. */
.about-section::before{ display:none !important; }
.about-section .s3-h,
.about-section .s3-item-h{ color:#FFFFFF; }
.about-section .s3-h{
font-size:clamp(33px,3.2vw,54px);
}
.about-section .s3-h em{ color:#FFFFFF; }
/* Over-Headline blau statt weiss (30.08.2026, Leo): Eyebrows nutzen nur Blau
oder Gold, nie Weiss - hier Blau, wie in Leistungen/Ablauf/Kundenstimmen. */
.about-section .s3-head .rd-diag-label{ color:var(--dwc-action-blue); }
.about-section .s3-sub,
.about-section .s3-body p,
.about-section .s3-item-d,
.about-section .s3-band-item{ color:rgba(255,255,255,.72); }
.about-section .s3-item + .s3-item,
.about-section .s3-band,
.about-section .s3-band-item + .s3-band-item{ border-color:rgba(255,255,255,.18); }
.about-section .s3-item-h .ti,
.about-section .s3-band-item .ti,
.about-section .s3-links path,
.about-section .s3-links circle{ color:var(--dwc-action-blue); stroke:var(--dwc-action-blue); fill:var(--dwc-action-blue); }
/* Seite 3 · Ablauf — bewusst hell für leichte Erfassbarkeit. */
.s4-ablauf{ background:#FFFFFF !important; }
/* Übergangs-Section Weiß -> Schwarz zwischen Ablauf und Beispiele (13.09.2026,
Julian: das Zitat samt Namen/Avataren gehört sichtbar auf diesen weißen
Grund, kein schmaler Streifen mehr - grosszuegiges eigenes Padding oben/unten
statt fixer Hoehe, damit die Flaeche mit dem Zitat mitwaechst). Eigene
Section statt Teil von .s4-ablauf, damit deren Ende unveraendert bleibt. */
.s4-transition-bar{
background:#FFFFFF;
box-shadow:0 0 0 0 transparent;
transition:background-color .6s ease, box-shadow .6s ease;
position:relative;
z-index:1;
margin-top:clamp(-36px,-2.4vw,-18px);
border-radius:clamp(20px,2.4vw,36px) clamp(20px,2.4vw,36px) 0 0;
padding:calc(clamp(55px,5.3vw,85px) + clamp(18px,2.4vw,36px)) var(--gutter) clamp(59px,5.6vw,88px);
}
.s4-transition-bar.is-dark{
background:var(--dwc-quote-black);
border-radius:clamp(20px,2.4vw,36px);
box-shadow:0 0 0 2px var(--dwc-standard-black);
}
/* Der transparente Hauptgrund darf an den unteren Rundungen der dunklen
Zitatkarte nicht den weissen Body durchscheinen lassen. */
#inhalt:has(.s4-transition-bar.is-dark){ background:var(--dwc-standard-black); }
/* Dunkle Headlines seitenweit auf die Schwarz-Zonen-Farbe #030D1F (30.08.2026,
Leo) - vorher #000000 / #0E1B33 / #10285A gemischt. */
.s4-h,
.s4-t{ color:#030D1F !important; }
.s4-sub,
.s4-d{ color:#4B5563 !important; }
/* Seite 5 · Beispiele & Konzepte — offene weiße Coverflow-Bühne, faerbt sich
beim Scrollen zu Schwarz um und wieder zurueck (Julian, 19.09.2026, gleicher
Mechanismus wie bei "Was Kunden ueber die Zusammenarbeit..." direkt danach -
beide bilden zusammen einen durchgehenden dunklen Scroll-Abschnitt, siehe
Scroll-Beobachter in index.html). #projekte-Praefix erhoeht die Spezifitaet
gegen die alte .s5-beispiele-Wandbild-Regel weiter oben, macht das
background-!important hier ueberfluessig. */
#projekte.s5-concepts{
--pj-bg:#FFFFFF;
--pj-heading:#030D1F;
--pj-body:#4B5563;
background:var(--pj-bg);
transition:background-color .6s ease;
}
#projekte.s5-concepts.is-dark{
--pj-bg:var(--dwc-standard-black);
--pj-heading:#FFFFFF;
--pj-body:rgba(255,255,255,.72);
}
.s5-concepts{
background-image:none !important;
margin-top:0 !important;
min-height:auto !important;
padding:clamp(32px,3vw,56px) 0 clamp(72px,7vw,110px) !important;
color:#030D1F;
overflow:hidden;
isolation:isolate;
}
.s5-concepts::before,
.s5-concepts::after{
display:none !important;
content:none !important;
}
/* Kopfzeile der Sektion (__header, __label, __title) am 26.08.2026 entfernt,
am 27.08.2026 als einzelne Headline wieder eingebaut (Julian: "wirklich
groß, nach unserem Headline-Modell") — kein Eyebrow-Label diesmal, nur der
große Titel. Gleiche Schrift/Schnitt wie .hc-h weiter oben, nur größer und
in Schwarz für die weiße Bühne. padding-top von .s5-concepts oben dafür
etwas angehoben, damit die Sektion für die Headline nicht enger wirkt. */
/* max-width 760px -> 960px (30.08.2026, Leo: Headline soll 2 statt 3 Zeilen
sein). .s5-h deckelt seine Schrift bei clamp(...,66px) - ab ~1404px
Fensterbreite bleibt die Schrift konstant bei 66px, waehrend 760px gleich
breit blieb. Ab dort brach "was ein Unternehmen kann." hinter dem
manuellen
ein zweites Mal um (3 Zeilen statt der gewollten 2). Bei
1920px nachgemessen: 960px reicht, die Zeile bleibt am breitesten
Referenzpunkt (66px-Deckel) einzeilig. */
.s5-head{ text-align:center; margin-bottom:clamp(24px,2.8vw,40px); max-width:960px; margin-left:auto; margin-right:auto; }
.s5-label{ display:block; margin-bottom:18px; color:#d9bb79; font-size:12px; font-weight:700; letter-spacing:.42em; text-transform:uppercase; }
.s5-h{
margin:0; font-family:var(--font-serif); font-weight:600;
font-size:clamp(38px,4.7vw,66px); line-height:1.04; letter-spacing:-0.025em;
color:#FFFFFF;
}
#dwc-radial-projects-root .rcs__title{ color:var(--pj-heading,#030D1F); transition:color .6s ease; }
#dwc-radial-projects-root .rcs__subtitle{ color:var(--pj-body,#4B5563); transition:color .6s ease; }
.s5-sub{ margin:20px auto 0; max-width:590px; color:rgba(255,255,255,.66); font-size:clamp(15px,1.35vw,18px); line-height:1.6; }
@media(max-width:700px){
.s5-concepts{ padding-top:76px !important; }
}
/* Seite 5 · Kundenstimmen — klares Weiß als Gegenpol zum warmen Angebot
darunter (30.08.2026, Leo). Die frühere eigene Trust-Sektion (Arbeitsname
"ABC") ist restlos entfallen, ihr Inhalt sitzt jetzt mit in dieser Sektion
(.cf-trust). Karten bringen ihre Farben selbst mit (unangetastet).
Faerbt sich seit 19.09.2026 (Julian) beim Scrollen zusammen mit #projekte
davor zu Schwarz und zurueck, siehe Scroll-Beobachter in index.html. */
#bewertungen.cf-section{
box-sizing:border-box;
min-height:0;
--bw-bg:#FFFFFF;
--bw-heading:#030D1F;
--bw-body:#5B6472;
--bw-rule:rgba(13,34,72,.12);
background:var(--bw-bg);
border-top:1px solid var(--bw-rule);
transition:background-color .6s ease, border-color .6s ease;
}
#bewertungen.cf-section.is-dark{
--bw-bg:var(--dwc-standard-black);
--bw-heading:#FFFFFF;
--bw-body:rgba(255,255,255,.66);
--bw-rule:rgba(255,255,255,.14);
}
/* Seite 6 · Preisrechner — eigene, ruhige Blaugrau-Zone zwischen den weißen Nachbarn. */
.s7-preise{
background:
radial-gradient(circle at 10% 13%, rgba(255,255,255,.72), transparent 27%),
radial-gradient(circle at 91% 34%, rgba(201,154,61,.10), transparent 26%),
var(--dwc-price-surface) !important;
border-top:1px solid rgba(13,34,72,.12);
}
/* Die Karte ist auf der Landingpage ein unterstützendes Detail und bekommt
deshalb eine kompakte, untere Bühne statt eines eigenen Textdrittels. */
.s7-preise .s7-physical-placeholder--card-only{
width:auto;
padding-top:0;
}
/* Preise auf der Landingpage, kompakter Referenzaufbau (06.09.2026).
Nur diese eine Sektion nutzt das Grid. Die React-Mountpunkte reichen ihre
beiden Inhaltsbereiche per display:contents als echte Grid-Kinder durch;
Zustand und Animation bleiben vollstaendig in React. */
.s7-preise{
min-height:0;
scroll-margin-top:86px;
/* Section ca. 10% laenger (13.09.2026, Julian) - gibt der sauberen
Ausrichtung von Ueberschrift und Textfeld Luft. */
padding:clamp(73px,5.1vw,90px) clamp(28px,6vw,130px) clamp(53px,3.85vw,68px);
}
.s7-stage{
position:relative;
z-index:1;
display:grid;
grid-template-columns:minmax(360px,.9fr) minmax(430px,1.08fr);
grid-template-areas:
"navigation detail"
"quality quality";
width:100%;
margin:0;
column-gap:clamp(36px,3vw,56px);
row-gap:clamp(44px,3.3vw,59px);
/* 528px statt der testweise +10% (13.09.2026 zurueckgenommen): der Wert
muss die Eigenhoehe von Navigation/Textfeld treffen, nicht groesszuegig
druebergreifen - jede zusaetzliche Zeilenhoehe ist Luft, in der die
mittig ausgerichtete Visitenkarte (align-self:center) tiefer als
Ueberschrift und Textfeld zu sitzen kommt. Deckt sich mit der festen
Boxhoehe lg:h-[528px] in vertical-tabs.tsx. */
grid-template-rows:minmax(528px,1fr) auto;
align-items:center;
}
.s7-config,
#dwc-vertical-tabs-root,
.s7-stage .dwc-service-shell,
.s7-stage .dwc-service-shell__inner,
.s7-stage .dwc-service-shell__grid{
display:contents;
}
#preise .dwc-service-navigation{
grid-area:navigation;
order:initial;
/* start statt center (13.09.2026, Julian: "Unsere Leistungen" sass zu hoch) -
Ueberschrift links und Textfeld rechts unterschieden sich in ihrer
Eigenhoehe; center zentrierte beide Bloecke unabhaengig voneinander in der
Zeile und riss ihre Oberkanten damit auseinander. start laesst beide an
derselben Zeilenoberkante beginnen. */
align-self:start;
min-width:0;
padding-left:0;
}
#preise .dwc-service-heading{
max-width:440px;
margin:0 0 clamp(24px,2vw,34px);
}
#preise .dwc-service-heading__title{
font-family:var(--font-serif);
font-weight:600;
font-size:clamp(48px,3.2vw,54px);
line-height:1.06;
color:#111D3A;
}
/* Zweite Headline-Zeile kam aus der Komponente in Markenblau - Vorlage zeigt
beide Zeilen im gleichen dunklen Navy wie ueberall sonst (13.09.2026). */
#preise .dwc-service-heading__title span{ color:inherit; }
#preise .dwc-service-heading > p{ color:#5B6A79; }
#preise .dwc-service-tabs{
position:relative;
width:min(100%,430px);
}
#preise .dwc-service-tab{
min-height:72px;
padding:14px 16px;
gap:12px;
border-radius:12px;
}
#preise .dwc-service-tab__title{
font-size:clamp(21px,1.35vw,23px);
line-height:1.12;
}
#preise .dwc-service-tab__arrow{
display:inline-flex;
flex:0 0 36px;
place-items:center;
justify-content:center;
width:36px;
height:36px;
align-self:center;
border:1px solid rgba(7,87,247,.14);
border-radius:50%;
background:linear-gradient(145deg,#F8FBFF,#EAF2FF);
color:#0757F7;
box-shadow:inset 0 1px rgba(255,255,255,.92), 0 7px 16px -14px rgba(7,87,247,.55);
}
#preise .dwc-service-tab__arrow-line{
width:16px;
height:16px;
overflow:visible;
}
#preise .dwc-service-tab .dwc-service-tab__arrow-line path{
stroke:currentColor;
stroke-width:1.55;
stroke-linecap:round;
stroke-linejoin:round;
}
#preise .dwc-service-tab .dwc-service-tab__title + div p{
margin-top:0;
padding-bottom:0;
font-size:13px;
line-height:1.42;
}
#preise .dwc-service-panel{
grid-area:detail;
order:initial;
align-self:start;
min-width:0;
padding-top:0;
}
#preise .dwc-service-panel__viewport{
box-sizing:border-box;
background:#fff;
border-radius:20px;
box-shadow:0 30px 60px -42px rgba(16,40,90,.32);
border:1px solid rgba(16,40,90,.06);
}
/* Der Innenabstand steht bewusst hier auf .dwc-service-detail, nicht auf der
Box selbst (13.09.2026, Julian: Inhalt sass fast ohne Rand links UND
rechts an der Kachel). Grund: der wechselnde Inhalt liegt in einem
`absolute inset-0`-Wrapper (Framer-Motion-Praesenz fuer den Reiterwechsel).
Bei absolut positionierten Kindern zaehlt `inset:0` ab der PADDING-Kante des
positionierten Vorfahren - das ist die AEUSSERE Kante der Padding-Flaeche,
nicht die innere. Padding auf der Box wurde dadurch vom Wrapper komplett
uebersprungen; der Text sass praktisch kantenbuendig. Padding hier auf dem
normal fliessenden Innenelement wirkt dagegen ganz regulaer. */
#preise .dwc-service-detail{
width:100%;
max-width:560px;
padding:clamp(32px,3vw,44px);
box-sizing:border-box;
text-align:left;
}
/* Trennstrich zwischen Erklaertext und Haekchenliste, wie in der Vorlage
(13.09.2026). */
#preise .dwc-service-detail__divider{
width:100%;
height:1px;
border:0;
background:rgba(16,40,90,.10);
}
#preise .dwc-service-detail__title{
max-width:12em;
font-family:var(--font-serif);
font-weight:600;
font-size:clamp(36px,2.7vw,46px);
color:#111D3A;
}
#preise .dwc-service-detail > p{ color:#5B6A79; }
#preise .s7-physical-placeholder{
grid-area:model;
align-self:center;
justify-self:stretch;
min-width:0;
max-width:none;
padding:0;
transform:none;
}
.s7-card-holder-stage{
position:relative;
isolation:isolate;
width:100%;
margin:0;
padding:0 0 18px;
transform:none;
}
.s7-card-holder-stage::before{
display:none;
}
.s7-card-holder-stage::after{
z-index:0;
right:4%;
bottom:28px;
width:92%;
height:20px;
background:rgba(76,54,31,.19);
filter:blur(14px);
}
.s7-card-holder-btn{
position:relative;
z-index:auto;
}
.s7-card-holder-model{
position:relative;
z-index:1;
left:auto;
display:block;
width:min(100%,360px);
height:clamp(220px,15.8vw,262px);
margin:0 auto;
transform:none;
}
.s7-card-holder-hint{
position:relative;
z-index:2;
margin-top:0;
}
.s7-quality-wrap{
grid-area:quality;
align-self:start;
width:100%;
margin:0;
}
#preise .dwc-quality-promise__items{
align-items:start;
margin-top:clamp(32px,3vw,44px) !important;
gap:clamp(28px,3vw,40px) !important;
}
/* Qualitätsversprechen hochwertiger/groesser (13.09.2026, Julian: wirkte zu
klein und billig gegen die Vorlage) - Eyebrow/Headline sowie die vier
Punkte samt Icon-Kreis und Trennstrichen skaliert hoch. Reine Formatierung,
keine Struktur-/Animationsaenderung an der React-Insel. */
#preise .dwc-quality-promise > span:first-child{
font-size:12px !important;
letter-spacing:.24em !important;
}
#preise .dwc-quality-promise > p{
margin-top:10px !important;
font-family:var(--font-serif) !important;
font-weight:600 !important;
font-size:clamp(24px,2vw,30px) !important;
color:#111D3A !important;
}
/* Icon links, Text rechts (13.09.2026, Vorlage): li ist jetzt eine Reihe
statt einer zentrierten Spalte. min-width:0 auf li und Textspanne laesst
den Text im Grid-Feld umbrechen, statt ueber den Rand zu laufen - Flex-Kinder
verweigern das Schrumpfen sonst per default (min-width:auto). */
#preise .dwc-quality-promise__items > li{
gap:16px !important;
min-width:0;
}
#preise .dwc-quality-promise__items > li > span:last-child{
min-width:0;
padding-top:2px;
}
/* Zwei Zeilen je Punkt wie in der Vorlage (13.09.2026, Julian: "immer viel zu
wenig Text"): fette Kernaussage, darunter der erklaerende Satz gedaempft. */
#preise .dwc-quality-promise__label{
font-size:15px !important;
line-height:1.4 !important;
}
#preise .dwc-quality-promise__desc{
display:block;
font-size:13.5px !important;
line-height:1.5 !important;
color:#5B6A79;
}
#preise .dwc-quality-promise__items span[class*="size-9"]{
width:60px !important;
height:60px !important;
}
#preise .dwc-quality-promise__items span[class*="size-9"] svg{
width:26px !important;
height:26px !important;
}
#preise .s7-band{
width:100%;
min-height:106px;
margin:clamp(28px,2.15vw,36px) 0 0;
padding:22px clamp(24px,2.2vw,36px);
}
/* Gleiche linke/rechte Kante wie der Rest der Seite (13.09.2026, Julian:
"Unsere Leistungen" ragte auf breiten Bildschirmen ueber den Seitenabstand
hinaus). Der bisherige seitliche Innenabstand war ein eigener,
viewport-breiten-abhaengiger clamp() mit Deckel bei 130px - auf sehr
breiten Monitoren blieb er bei 130px stehen, waehrend Header & Co. ueber
--shell (Fixbreite 1672px, zentriert) weiter mitwachsen. Ab hier (>1319px,
dem 3-Spalten-Desktop-Layout) uebernimmt dieselbe --shell-Logik wie
.header-inner, damit die Kante bei jeder Fensterbreite identisch bleibt.
Schmalere Breiten bleiben unangetastet - dort war die alte Abstimmung nie
das Problem. */
@media(min-width:1320px){
.s7-preise{ padding-inline:0; }
.s7-stage{ width:var(--shell); max-width:var(--shell); margin-inline:auto; }
#preise .s7-band{ width:var(--shell); max-width:var(--shell); margin-inline:auto; }
}
@media(max-width:1319px){
.s7-stage{
grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr);
grid-template-areas:
"navigation detail"
"quality quality";
grid-template-rows:auto auto;
gap:clamp(36px,4vw,52px);
}
#preise .dwc-service-navigation{ padding-left:clamp(16px,2vw,24px); }
#preise .dwc-service-heading__title{ font-size:clamp(46px,5.1vw,58px); }
#preise .dwc-service-panel{ padding-top:0; }
#preise .s7-physical-placeholder{ padding-top:0; }
.s7-card-holder-model{ height:320px; }
.s7-quality-wrap{ align-self:start; }
#preise .dwc-quality-promise__items{ grid-template-columns:repeat(2,minmax(0,1fr)); }
#preise .dwc-quality-promise__items > li:nth-child(3) > span:first-child{ display:none; }
}
@media(max-width:899px){
.s7-stage{
grid-template-columns:minmax(0,1fr);
grid-template-areas:
"navigation"
"detail"
"quality";
row-gap:40px;
}
#preise .dwc-service-navigation{
width:100%;
max-width:620px;
padding-left:24px;
}
#preise .dwc-service-heading{ max-width:520px; }
#preise .dwc-service-tabs{ width:100%; max-width:560px; }
#preise .dwc-service-panel{
width:100%;
max-width:620px;
padding-top:0;
}
#preise .dwc-service-panel__viewport{ min-height:420px; }
#preise .s7-physical-placeholder{
width:100%;
max-width:560px;
justify-self:center;
}
.s7-quality-wrap{ width:100%; max-width:620px; }
}
@media(max-width:600px){
.s7-preise{ padding:52px 20px 30px; }
.s7-stage{ row-gap:34px; }
#preise .dwc-service-navigation{ padding-left:16px; }
#preise .dwc-service-heading{ margin-bottom:24px; }
#preise .dwc-service-heading__title{ font-size:clamp(40px,11.3vw,48px); }
#preise .dwc-service-tab{ min-height:78px; padding:18px 16px; }
#preise .dwc-service-tab__title{ font-size:clamp(23px,7vw,27px); }
#preise .dwc-service-tab__arrow{ flex-basis:36px; width:36px; height:36px; }
#preise .dwc-service-panel__viewport{ min-height:460px; }
#preise .dwc-service-detail__title{ font-size:clamp(30px,9vw,36px); }
.s7-card-holder-stage{ padding:12px 0 16px; }
.s7-card-holder-model{ width:100%; height:260px; }
.s7-quality-wrap{ margin-top:4px; }
#preise .s7-band{ min-height:0; margin-top:28px; }
}
/* Seite 7 · FAQ. Gilt in beiden Themes. Grauton 19.09.2026 auf #ECECEF
umgestellt (Julian: "gleiche Graufarbe wie die Zitate", = .s4-transition-bar)
- Insel-Text (#dwc-faq-root) ist seitdem durchgehend weiss statt dunkel,
siehe index.css .dwc-faq__title/.dwc-faq2__*. */
.faq-section{ background:#ECECEF !important; }
/* Seite 8 · Footer, jetzt inklusive Kontaktabschluss (23.08.2026). Ton
20.09.2026 von reinem #000 auf #0D0B0A (= --dwc-standard-black, Ton der
uebrigen dunklen Sektionen: Über uns, Rezensionen, Versprechen). */
footer{ background:#0D0B0A !important; }
/* Seite 2 · DWC-Showcase: Inhalt führt links, das dunkle Gerätebild verschmilzt rechts
ohne Rahmen oder eigene Bühne mit der schwarzen Sektion. */
.about-section .s3-inner{ grid-template-columns:44fr 56fr; gap:clamp(36px,4.4vw,78px); align-items:center; }
.about-section .s3-right{ grid-column:1; grid-row:1; }
.about-section .s3-left{ grid-column:2; grid-row:1; padding-top:0; min-width:0; }
.about-section .s3-shot{ width:100%; }
.about-section .s3-dwc-showcase{ display:block; width:100%; height:auto; margin:0; -webkit-mask-image:radial-gradient(ellipse 76% 72% at 52% 48%,#000 30%,rgba(0,0,0,0.92) 48%,rgba(0,0,0,0.65) 66%,rgba(0,0,0,0.28) 82%,transparent 96%); mask-image:radial-gradient(ellipse 76% 72% at 52% 48%,#000 30%,rgba(0,0,0,0.92) 48%,rgba(0,0,0,0.65) 66%,rgba(0,0,0,0.28) 82%,transparent 96%); }
@media(min-width:1025px){
.about-section .s3-dwc-showcase{ width:80%; margin-left:auto; transform:scale(1.11); transform-origin:center; }
}
/* Seite 2 · Editorialer Textblock mit zugänglichem Begriffsglossar. */
.about-section .s3-body{
position:relative;
z-index:5;
max-width:560px;
margin-top:clamp(22px,2vw,30px);
padding-left:0;
}
.about-section .s3-body::before{ content:none; }
.about-section .s3-body p{
margin:0;
max-width:54ch;
color:#fff;
font-size:clamp(15.5px,1.02vw,17px);
line-height:1.76;
letter-spacing:.003em;
}
.about-section .s3-body p + p{ margin-top:clamp(15px,1.35vw,20px); }
.about-section .s3-body .s3-lead{
color:#fff;
font-size:clamp(16px,1.08vw,17.5px);
line-height:1.74;
}
.about-section .s3-body .s3-lead::first-letter{
float:left;
margin:.1em .13em 0 0;
color:#fff;
font-family:var(--font-serif);
font-size:clamp(54px,4vw,66px);
font-weight:800;
line-height:.72;
text-shadow:0 0 28px rgba(7,87,247,.22);
}
.about-section .s3-body .s3-goal{
max-width:54ch;
margin-top:clamp(20px,1.8vw,26px);
padding:0;
border-left:0;
background:none;
color:#fff;
font-weight:600;
}
.s3-term-wrap{ position:relative; display:inline-block; white-space:nowrap; }
.s3-term{
appearance:none;
display:inline;
margin:0;
padding:0 0 1px;
border:0;
border-bottom:1px solid rgba(255,255,255,.52);
border-radius:0;
background:none;
color:inherit;
font:inherit;
line-height:inherit;
text-align:inherit;
cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ctext x='11' y='16' font-family='Arial' font-size='17' font-weight='700' fill='%23000' stroke='%23fff' stroke-width='2' paint-order='stroke' text-anchor='middle'%3E%3F%3C/text%3E%3C/svg%3E") 11 11, help;
transition:color .16s ease,border-color .16s ease;
}
.s3-term:hover,
.s3-term:focus-visible{ color:#fff; border-bottom-color:#fff; }
.s3-term:focus-visible{ outline:2px solid var(--dwc-action-blue); outline-offset:3px; }
.s3-tooltip{
--s3-tip-nudge:0px;
position:absolute;
z-index:60;
left:50%;
bottom:calc(100% + 12px);
width:min(250px,calc(100vw - 32px));
padding:11px 13px 12px;
border:1px solid rgba(7,87,247,.2);
border-radius:6px;
background:#fff;
box-shadow:0 16px 38px rgba(0,0,0,.32);
color:#101827;
font-family:var(--font-sans);
font-size:12.5px;
font-weight:500;
line-height:1.45;
letter-spacing:0;
text-align:left;
white-space:normal;
opacity:0;
pointer-events:none;
transform:translate(calc(-50% + var(--s3-tip-nudge)),6px);
transition:opacity .15s ease,transform .15s ease;
}
.s3-tooltip::after{
content:'';
position:absolute;
top:100%;
left:calc(50% - var(--s3-tip-nudge));
width:9px;
height:9px;
border-right:1px solid rgba(7,87,247,.2);
border-bottom:1px solid rgba(7,87,247,.2);
background:#fff;
transform:translate(-50%,-5px) rotate(45deg);
}
.s3-term-wrap:hover .s3-tooltip,
.s3-term-wrap:focus-within .s3-tooltip,
.s3-term-wrap[data-s3-open="true"] .s3-tooltip{
opacity:1;
transform:translate(calc(-50% + var(--s3-tip-nudge)),0);
}
@media(max-width:1024px){
.about-section .s3-inner{ grid-template-columns:1fr; gap:36px; }
.about-section .s3-left,
.about-section .s3-right{ grid-column:1; grid-row:auto; }
}
@media(max-width:600px){
.about-section .s3-body{ margin-top:18px; padding-left:0; }
.about-section .s3-body p{ max-width:none; font-size:15.5px; line-height:1.72; }
.about-section .s3-body .s3-lead{ font-size:16px; line-height:1.7; }
.about-section .s3-body .s3-lead::first-letter{ font-size:52px; margin-right:.12em; }
.about-section .s3-body .s3-goal{ padding:0; }
.s3-tooltip{ width:min(232px,calc(100vw - 28px)); font-size:12.25px; }
}
@media(prefers-reduced-motion:reduce){
.s3-term,
.s3-tooltip{ transition:none; }
}
/* Headline über der Kartenreihe unter dem Hero (27.08.2026). Eigene Klassen
statt .s3-/.s4-, weil die Sektion keinem der beiden Farbschemata folgt.
.rd-diag-label ist die sitework Editorial-Label-Klasse ohne Sektionsbindung,
wird hier einfach mitgenutzt. Abstand oben eigenständig; unten übernimmt
das vorhandene padding-top von #dwc-hero-cards-root (siehe
react-stack/src/index.css) — deshalb hier keine eigene margin-bottom.
BEWUSST OHNE .container: die Klasse trifft hier zusätzlich eine Regel aus
dem React-Bundle (.container:not(#dwc-hero-root *) in assets/react/*.css),
die per :not() eine ID-Spezifität mitbringt und padding-top wieder auf 0
zieht - .hc-head allein hätte dagegen nie gewonnen. Breite/Gutter deshalb
hier direkt dupliziert statt über .container gezogen. */
.hc-head{ max-width:1360px; margin:0 auto; padding:clamp(56px,7vw,96px) var(--gutter) 0; text-align:center; }
.hc-head .rd-diag-label{
font-family:"Inter",system-ui,-apple-system,sans-serif;
font-size:12.5px;
font-weight:500;
letter-spacing:.26em;
color:var(--dwc-action-blue,#0757F7);
}
.hc-h{
margin-top:16px; font-family:"Inter",system-ui,-apple-system,sans-serif; font-weight:600;
font-size:clamp(34px,4.55vw,68px); line-height:1.05; letter-spacing:-0.03em;
text-wrap:balance;
color:#000;
}
.hc-sub{
margin-top:18px; font-family:"Inter",system-ui,-apple-system,sans-serif; font-weight:600;
font-size:clamp(16px,1.25vw,19px); line-height:1.55; letter-spacing:-0.015em;
color:var(--muted);
}
/* SERVICE EXPLORER · reine Desktop-Navigation, kein Card- oder Bild-Chrome. */
.service-explorer{
background:#fff;
color:#030D1F;
padding:144px 64px 128px;
overflow:hidden;
}
.service-explorer__intro{ max-width:860px; }
.service-explorer__number{
display:block;
margin-bottom:28px;
font-family:var(--font);
font-size:18px;
font-weight:500;
line-height:1;
letter-spacing:-.04em;
}
.service-explorer__title{
margin:0;
font-family:var(--font);
font-size:64px;
font-weight:800;
letter-spacing:-.045em;
line-height:.94;
white-space:nowrap;
}
.service-explorer__rail{
display:flex;
align-items:stretch;
width:100%;
height:560px;
margin-top:136px;
}
.service-explorer__item{
--service-inset:30px;
--service-head-size:clamp(18px, 1.55vw, 24px);
position:relative;
z-index:0;
flex:1 1 0;
min-width:0;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:26px var(--service-inset) 30px;
border-left:0;
color:#030D1F;
text-decoration:none;
transition:flex-grow 520ms cubic-bezier(.65,0,.35,1), background-color 180ms ease;
}
.service-explorer__item::before{
content:"";
position:absolute;
top:0;
bottom:104px;
left:0;
width:1px;
background:#030D1F;
opacity:.72;
pointer-events:none;
}
.service-explorer__rail.is-engaged .service-explorer__item{ flex-grow:.75; }
.service-explorer__rail.is-engaged .service-explorer__item.is-active{ flex-grow:2.25; }
.service-explorer__item-head{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:16px;
font-family:"ABC Repro", "Helvetica Neue", Arial, sans-serif;
font-size:var(--service-head-size);
/* schmale (inaktive) Spalten: langes Wort trennen statt ueber die Nachbarspalte zu laufen */
hyphens:auto;
overflow-wrap:break-word;
font-weight:400;
letter-spacing:-.035em;
line-height:1.05;
color:#111111;
}
.service-explorer__item-head svg{
width:16px;
height:16px;
flex:0 0 16px;
fill:none;
stroke:currentColor;
stroke-width:1.35;
stroke-linecap:round;
stroke-linejoin:round;
opacity:.48;
transform:translateX(0);
transition:opacity 260ms ease, transform 320ms ease;
}
.service-explorer__letter{
position:absolute;
bottom:104px;
left:var(--service-inset);
font-family:var(--font);
font-size:200px;
font-weight:300;
letter-spacing:-.11em;
line-height:.7;
pointer-events:none;
}
/* Drei Leistungszeilen beim Hover (10.10.2026, Leo: "versetzt und smooth
aufbauen statt abgehackt"). Ursache des Ruckelns war, dass die Textbox an
der wachsenden Spalte hing: zu Beginn nur 41px breit (1920px), Zeilen brachen
auf bis zu vier Zeilen um und sprangen waehrend der 520ms flex-grow-Animation
staendig neu. Jetzt bekommt die Liste sofort ihre ENDbreite, berechnet aus
der Rail-Breite (container-type auf .service-explorer__rail, 100cqw = Rail):
aktive Spalte = 2.25/6 der Flaeche ohne Innenabstaende = 37.5cqw - 2.5*Inset.
Wer flex-grow (.75 / 2.25) oder die Spaltenzahl aendert, zieht hier mit.
overflow-x:clip blendet den Teil aus, der waehrend des Aufklappens noch
ueber die Spalte hinausragt (clip statt hidden, damit translateY unten nicht
abgeschnitten wird). Zeitwerte zum Feintunen: die drei --se-in-* Variablen. */
.service-explorer__rail{ container-type:inline-size; }
.service-explorer__details{
--se-end-w:calc(37.5cqw - var(--service-inset) * 2.5);
/* max(): Liste startet bei 44% der aufgeklappten Spalte, rueckt aber hinter das laengste Label (Automatisierungen / Corporate Design, ca. 7.8em), wenn die Spalte dafuer zu schmal ist (Notebook-Breiten). */
--se-left:max(calc(var(--se-end-w) * .44), calc(var(--service-inset) + var(--service-head-size) * 7.8 + 14px));
--se-in-dauer:640ms; /* wie lange eine Zeile zum Aufbauen braucht */
--se-in-start:140ms; /* Vorlauf, damit die Spalte schon aufgeht */
--se-in-versatz:110ms; /* Abstand zwischen Zeile 1, 2 und 3 */
position:absolute;
top:27px;
left:var(--se-left);
right:24px;
z-index:1;
display:flex;
flex-direction:column;
gap:7px;
min-height:0;
overflow-x:clip;
font-family:"ABC Repro", "Helvetica Neue", Arial, sans-serif;
font-size:clamp(17px, 1.3vw, 20px);
font-weight:400;
letter-spacing:-.02em;
line-height:1.08;
color:#999999;
visibility:hidden;
transition:visibility 0s linear 200ms;
}
.service-explorer__details span{
--se-i:0;
position:relative;
flex:none;
width:calc(var(--se-end-w) - var(--se-left) - 24px);
padding-left:16px;
box-sizing:border-box;
opacity:0;
transform:translateY(14px);
/* Ausblenden: kurz und alle drei gleichzeitig, damit beim schnellen
Wechsel zur Nachbarspalte nichts nachzieht. */
transition:opacity 160ms ease-out, transform 200ms ease-in;
}
.service-explorer__details span:nth-child(2){ --se-i:1; }
.service-explorer__details span:nth-child(3){ --se-i:2; }
.service-explorer__details span::before{
content:"";
position:absolute;
left:0;
top:0.58em;
width:5px;
height:5px;
border-radius:50%;
background:#4D4D4D;
transform:translateY(-50%) scale(.2);
transition:transform 160ms ease-in;
}
.service-explorer__item.is-active .service-explorer__details{
visibility:visible;
transition-delay:0s;
}
.service-explorer__item.is-active .service-explorer__details span{
opacity:1;
transform:translateY(0);
transition:
opacity calc(var(--se-in-dauer) * .8) cubic-bezier(.33,1,.68,1),
transform var(--se-in-dauer) cubic-bezier(.22,1,.36,1);
transition-delay:calc(var(--se-in-start) + var(--se-i) * var(--se-in-versatz));
}
/* Der Punkt baut sich mit seiner Zeile auf, minimal elastisch. */
.service-explorer__item.is-active .service-explorer__details span::before{
transform:translateY(-50%) scale(1);
transition:transform calc(var(--se-in-dauer) * .75) cubic-bezier(.34,1.56,.64,1);
transition-delay:calc(var(--se-in-start) + var(--se-i) * var(--se-in-versatz));
}
@media (prefers-reduced-motion: reduce){
.service-explorer__details span,
.service-explorer__item.is-active .service-explorer__details span{
transform:none;
transition:opacity 160ms linear;
transition-delay:0s;
}
.service-explorer__details span::before,
.service-explorer__item.is-active .service-explorer__details span::before{
transform:translateY(-50%);
transition:none;
}
}
.service-explorer__item.is-active .service-explorer__item-head svg{
opacity:.86;
transform:translateX(5px);
}
.service-explorer__item:focus-visible{
z-index:2;
outline:2px solid #0757F7;
outline-offset:-2px;
}
/* Laptop/MacBook-Breiten (1280-1799px, 24.09.2026, Leo): im Grundzustand
brachen "Automatisierungen"/"Corporate Design" auf zwei Zeilen um - das
laengste Label braucht ca. 7.8em (Helvetica-Neue-Fallback auf dem Mac etwas
mehr), die Spalte bot bei 1280px nur 130px Innenbreite. Nur Innenabstand
und Titelgroesse schrumpfen hier; Rail, Spaltenverteilung und alle
Hover-/Expand-Transitions bleiben unveraendert. Beim Aufklappen (schmale
Nachbarspalten) darf weiter umbrochen werden. Ab 1800px Originalwerte. */
@media (min-width:1280px) and (max-width:1799px){
.service-explorer__item{
--service-inset:20px;
--service-head-size:clamp(16px, 1.3vw, 22px);
}
}
/* Tablet/kleine Fenster (<1280px): fuer die Akkordeon-Leiste ist zu wenig Breite da.
Stattdessen Raster mit dauerhaft sichtbaren Leistungen; Buchstabe, Pfeil-Verschiebung
und Typografie bleiben wie am Desktop. */
@media (max-width:1279px){
.service-explorer{ padding:96px 32px 88px; }
.service-explorer__title{ font-size:clamp(32px,5.6vw,64px); white-space:normal; }
.service-explorer__rail{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
height:auto;
margin-top:64px;
row-gap:24px;
}
.service-explorer__item{
--service-inset:20px;
min-height:380px;
justify-content:flex-start;
gap:16px;
}
.service-explorer__item::before{ bottom:0; }
.service-explorer__item{ --service-head-size:20px; }
.service-explorer__letter{ bottom:28px; font-size:128px; }
.service-explorer__details{
position:static;
visibility:visible;
overflow-x:visible;
font-size:16px;
}
.service-explorer__details span{ width:auto; opacity:1; transform:none; transition:none; }
.service-explorer__details span::before{ transform:translateY(-50%); transition:none; }
.service-explorer__rail.is-engaged .service-explorer__item,
.service-explorer__rail.is-engaged .service-explorer__item.is-active{ flex-grow:0; }
}
@media (max-width:700px){
.service-explorer{ padding:72px 20px 64px; }
.service-explorer__rail{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* "Was uns ausmacht" — Editorial-Umbau nach Julians Vorlagenbild
(19.09.2026): Mockup-Bild raus (gesichert in
_intern/_bausteine/about-devices-mockup/), einspaltig, grosse Playfair-
Display-Headline links, Fliesstext mittig zentriert. Section bleibt
schwarz (.about-section{background:#000000!important} oben unveraendert).
.s3-head/.s3-h/.s3-body-Basisregeln weiter oben bleiben unangetastet
stehen. */
.about-section .s3-inner--solo{
display:block;
}
.about-section .s3-inner--solo .s3-head{
text-align:left;
max-width:900px;
}
.about-section .s3-h--editorial{
/* Playfair (var(--font-serif)) auf Inter (var(--font)) umgestellt (22.09.2026,
Julian: einheitliche Schriftart wie im Rest der Headlines), Farbabstufung
(weiss / .55-Weiss ueber .em, siehe unten) bewusst unangetastet. Etwas
kleiner, weil Inter Bold bei gleicher Groesse praesenter wirkt als die
Playfair-Vorgaengerin. */
font-family:var(--font);
font-weight:800;
font-size:clamp(40px,5.6vw,96px);
line-height:.96;
letter-spacing:-0.03em;
text-transform:uppercase;
}
.about-section .s3-h--editorial em{
font-style:normal;
color:rgba(255,255,255,.55);
}
.about-section .s3-body--editorial{
margin:clamp(48px,6vw,96px) auto 0;
max-width:760px;
text-align:left;
}
.about-section .s3-body--editorial .s3-p{
font-family:var(--font-serif);
font-weight:400;
font-size:clamp(22px,2vw,32px);
line-height:1.5;
letter-spacing:0;
max-width:none;
/* Grundfarbe/-Deckkraft kommt von JS ueber --reveal (s. Scroll-Scrub
unten in index.html) - hier nur der Startwert, falls JS aus bleibt
(z.B. deaktiviertes JavaScript). */
color:rgb(255 255 255 / var(--reveal, .35));
}
.about-section .s3-body--editorial .s3-p + .s3-p{
margin-top:clamp(22px,2.2vw,32px);
}
@media (prefers-reduced-motion: reduce){
.about-section .s3-body--editorial .s3-p{ color:#fff; }
}
.about-section .s3-learnmore{
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
width:100%;
max-width:760px;
margin:clamp(28px,3vw,40px) auto 0;
font-family:var(--font-serif);
font-size:clamp(22px,1.8vw,28px);
color:#fff;
text-decoration:none;
transition:opacity .2s ease;
}
.about-section .s3-learnmore span.s3-learnmore__u{
border-bottom:1px solid rgba(255,255,255,.4);
padding-bottom:4px;
transition:border-color .2s ease;
}
.about-section .s3-learnmore:hover span.s3-learnmore__u{ border-bottom-color:#fff; }
.about-section .s3-learnmore:hover{ opacity:.82; }
.about-section .s3-learnmore .ti{ font-size:.85em; }
@media(max-width:1024px){
.about-section .s3-inner--solo .s3-head,
.about-section .s3-body--editorial,
.about-section .s3-learnmore{ max-width:100%; }
}
/* "Unser Versprechen." — 20.09.2026, dreiteilige Scroll-Section nach der
Huge-Mechanik: Die vorhandene GSAP/ScrollTrigger-Bridge pinnt die Section
und übersetzt die reale Track-Strecke 1:1 in horizontale Bewegung. */
.pcta{
--pcta-bg:var(--dwc-white);
--pcta-panel:#121415;
--pcta-panel-alt:#171311;
--pcta-line:rgba(255,255,255,.15);
--pcta-muted:rgba(255,255,255,.62);
--pcta-blue:var(--dwc-action-blue,#0757F7);
/* 20.09.2026 (Leo): Bilder fast randlos und rund 66 % der Fensterhoehe.
--pcta-edge = minimaler Seitenabstand, --pcta-panel-h = Bildhoehe.
Headline deutlich groesser (Leo): --pcta-h-size. Die Bildhoehe ist der
Rest des Fensters nach Abzug von Oben-Abstand, Headline, Luft und
Unterkante - dadurch bleibt alles in einer Bildschirmhoehe (~66 % Bild). */
--pcta-edge:clamp(12px,1.2vw,24px);
--pcta-h-size:clamp(52px,7.4vw,108px);
/* 13vh statt 15.5vh (20.09.2026): Bilder rund 3,5 % hoeher. Die Section bleibt
genau eine Fensterhoehe - die Bildhoehe (--pcta-panel-h) ist der Rest nach
Abzug dieses Wertes, die 2,5vh gehen also 1:1 an die Bilder. Der Platz ueber
der Ueber-Headline schrumpft damit um dieselben ~27px (bei 1067px Fenster);
die Untergrenze 120px haelt die Ueberschrift auch bei kleinen Fenstern unter
der Navbar. */
/* 10.10.2026 (Julian): Kaesten etwas hoeher - Oben-Abstand, Luft unter der
Headline und Unterkante enger, der Gewinn (~27px bei 1067px Fenster) geht
1:1 in --pcta-panel-h. Untergrenze 120px unveraendert (Navbar). */
--pcta-pad-top:clamp(120px,11.8vh,216px);
--pcta-gap:clamp(12px,1.6vh,32px);
--pcta-pad-bottom:clamp(10px,1.1vh,28px);
--pcta-panel-h:clamp(340px,calc(100svh - var(--pcta-pad-top) - .94 * var(--pcta-h-size) - var(--pcta-gap) - var(--pcta-pad-bottom)),1000px);
/* Breite eines Versprechen-Kastens = Bildhoehe x Bildformat, hoechstens die
Track-Breite abzueglich Seitenrand (Prozentwert loest erst am
Verwendungsort auf). */
--pcta-w:min(calc(100% - 2 * var(--pcta-edge)),calc(var(--pcta-panel-h) * 1672 / 941));
box-sizing:border-box;
min-height:100svh;
overflow:hidden;
background:var(--pcta-bg);
color:var(--dwc-standard-black);
transition:background-color .6s ease, color .6s ease;
}
.pcta.is-dark{
--pcta-bg:var(--dwc-standard-black);
color:#FFFFFF;
}
.pcta.is-dark .pcta-h,
.pcta.is-dark .pcta-label{ color:#FFFFFF; }
.pcta-inner{
box-sizing:border-box;
width:100%;
min-height:100svh;
/* Oben mehr Luft (vorher clamp(112px,13vh,164px)): zwischen Kundenstimmen
und Headline kommt noch ein kleines Element hin. */
padding:var(--pcta-pad-top) var(--pcta-edge) var(--pcta-pad-bottom);
display:flex;
flex-direction:column;
}
.pcta-header{
flex:0 0 auto; width:100%; max-width:none; margin:0 0 var(--pcta-gap);
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
/* CTA "Zu unseren Angeboten und Preisen" (20.09.2026, Julian) - React-Insel
dwc-promise-cta-root, siehe main.tsx/promise-cta-demo.tsx. Nur Platzierung
hier, das eigene Aussehen des Buttons kommt komplett aus dem Origin-Button-
Component selbst (Tailwind-Klassen in origin-button.tsx). */
.pcta-header-cta{ flex:0 0 auto; }
/* Ueber-Headline "Unser Qualitaetsversprechen" (20.09.2026, Leo): gleiche
Schrift wie .pcta-h, aber Gewicht 500 statt 800. Liegt absolut ueber der
Headline im reservierten Platz von .pcta-inner (padding-top), schiebt also
weder Header noch Bilder. Linkskante wie .pcta-h. */
.pcta-titles{ position:relative; }
.pcta-label{
position:absolute;
/* + .047 * Headlinegroesse - .046em: Tintenkante des "U" (Label) und des
"I" (Headline) liegen auf einer Linie - die Glyphen haben je nach Groesse
unterschiedlich viel Vorlauf (I bei 107px ~5px, U bei 22px ~1px). */
left:calc(24px - var(--pcta-edge) + .047 * var(--pcta-h-size) - .046em);
bottom:100%;
margin:0 0 clamp(4px,.8vh,10px);
font-family:var(--font);
font-size:clamp(16px,1.5vw,22px);
font-weight:500;
letter-spacing:-.02em;
line-height:1.1;
white-space:nowrap;
color:var(--dwc-standard-black);
transition:color .6s ease;
}
/* Label naeher an die Headline (20.09.2026): zwischen Label-Grundlinie und
Oberkante der Headline-Versalien lagen ~24px (bei 108px Headline) - die Zeile
der Headline (line-height .94) und der Glyphen-Vorlauf schlucken den Abstand
zusaetzlich zum margin. Der negative Anteil skaliert mit der Headline
(.12 * --pcta-h-size, ~13px bei 108px), damit das Verhaeltnis auf jeder
Fenstergroesse gleich bleibt: danach ~11px Grundlinie -> Versalienkante.
Nur oberhalb der Mobil-Breite; darunter setzt .pcta-h eine eigene Groesse. */
@media (min-width:721px){
.pcta-label{ margin-bottom:calc(clamp(4px,.8vh,10px) - .12 * var(--pcta-h-size)); }
}
.pcta-h{
margin:0;
font-family:var(--font);
font-weight:800;
font-size:var(--pcta-h-size);
line-height:.94;
letter-spacing:-.045em;
color:var(--dwc-standard-black);
transition:color .6s ease;
position:relative;
left:calc(24px - var(--pcta-edge));
}
/* Die Qualitätsversprechen enthalten ihre Copy direkt im fertigen 16:9-Bild.
Die Viewport-Breite folgt deshalb exakt diesem Seitenverhältnis: So bleibt
unter jeder Headline derselbe freie Raum sichtbar, statt die Copy durch ein
breiteres Scroll-Panel zu beschneiden. */
.pcta-viewport{
/* Wieder ein festes Fenster in Kopfzeilen-Resthoehe (--pcta-panel-h,
dieselbe Formel wie vorher), diesmal aber NICHT mehr als Bildhoehe
selbst, sondern als Sichtfenster darueber (22.09.2026, Julian: Headline
"Immer Inklusiv." muss beim Scrollen sichtbar bleiben, nicht mit dem
Bild mitrutschen). Das Bild bleibt in voller Breite + echtem
Seitenverhaeltnis (.pcta-panel--image) und damit hoeher als dieses
Fenster - quality-promise-scroll.js schiebt .pcta-track dafuer beim
Scrollen zunaechst vertikal INNERHALB dieses Fensters nach oben (bis der
untere Bildrand zu sehen ist), erst danach horizontal zum naechsten
Panel. Kopfzeile bewegt sich dabei gar nicht mehr mit. */
flex:0 0 auto;
height:var(--pcta-panel-h);
width:100%;
max-width:none;
margin:0 auto;
overflow:hidden;
}
.pcta-track{
display:flex;
flex-direction:row;
align-items:stretch;
gap:clamp(12px,1.4vw,22px);
height:auto;
width:100%;
will-change:transform;
}
.pcta-panel{
box-sizing:border-box;
position:relative;
display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);
align-items:center;
flex:0 0 100%;
min-width:100%;
min-height:0;
padding:clamp(28px,4vw,72px);
overflow:hidden;
border:1px solid var(--pcta-line);
border-radius:clamp(14px,1.2vw,20px);
background:var(--pcta-panel);
}
.pcta-panel--image{
/* Volle Breite, Hoehe aus dem Bildseitenverhaeltnis statt aus der
Fensterhoehen-Formel --pcta-panel-h (22.09.2026, Julian: Bilder wirkten
"wie im Rahmen" - der Panel-Kasten war durch --pcta-panel-h oft breiter
als das Bild bei dieser Hoehe hergibt, object-fit:contain liess darum
die Panel-Hintergrundfarbe links/rechts durchscheinen). Gleiches Muster
wie schon laenger unter 720px (siehe media query weiter unten) - hier
jetzt auch auf Tablet/Desktop. .pcta-viewport/.pcta-track/.pcta-inner
sind ueber min-height (nicht height) gebaut, wachsen bei Bedarf mit;
die horizontale Scroll-Distanz in quality-promise-scroll.js kommt aus
scrollWidth, ist von der Panel-Hoehe unabhaengig. */
/* 10.10.2026 (Julian): Bild sass nicht buendig im Kasten - der Kasten war
voll breit (flex:0 0 100%), durch max-height aber nur so hoch wie
--pcta-panel-h; object-fit:contain liess rechts neben dem Bild einen
Streifen Panel-Farbe stehen. Jetzt hat der Kasten selbst genau das
Bildformat: Breite = Bildhoehe x 1672/941 (hoechstens die Track-Breite),
Hoehe folgt per aspect-ratio. Das Bild fuellt ihn restlos, es wird nichts
beschnitten (Texte liegen nah am unteren Rand, Motive laufen oben/rechts
aus dem Bild). Der erste und letzte Kasten bekommen den halben Restplatz
als Aussenrand, damit der aktive Kasten beim Scrollen mittig steht und
die Nachbarn seitlich anschneiden. Horizontale Strecke fuer das Skript:
scrollWidth - clientWidth, passt sich dadurch von selbst an. */
display:block;
padding:0;
flex:0 0 auto;
min-width:0;
width:var(--pcta-w);
height:auto;
min-height:0;
aspect-ratio:1672/941;
margin:0;
border:0;
}
.pcta-panel--image:first-child{ margin-left:var(--pcta-edge); }
/* Erster Kasten buendig mit der Headline links (Rand = --pcta-edge), der letzte
am Ende der Strecke mit demselben Rand rechts. Der rechte Rand ist ein
Platzhalter statt margin-right: Chrome rechnet den End-Rand eines Flex-Items
nicht in scrollWidth ein, die Scroll-Strecke wuerde sonst genau diesen Rand
zu kurz laufen. Minus gap, weil der Abstand zum Platzhalter selbst schon eine
Luecke ist.
Das Sichtfenster reicht bis an den Fensterrand (negativer Seitenrand gleicht
das Innenpadding von .pcta-inner aus): die Nachbar-Kaesten laufen bis ganz an
den Bildschirmrand, statt ~23px davor als weisser Streifen abgeschnitten zu
werden (10.10.2026, Julian). */
@media (min-width:721px){
.pcta-viewport{ width:auto; margin-left:calc(-1 * var(--pcta-edge)); margin-right:calc(-1 * var(--pcta-edge)); }
.pcta-track::after{ content:""; flex:0 0 max(0px,calc(var(--pcta-edge) - clamp(12px,1.4vw,22px))); }
.pcta.quality-scroll--reduced .pcta-track::after,
.pcta.quality-scroll--stacked .pcta-track::after{ display:none; }
}
.pcta-panel-image{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.pcta-panel--design{ background:#2577E4; }
.pcta-panel--price{ background:#0C4B3D; }
.pcta-panel--individual{ background:#142B33; }
.pcta-panel__copy{
position:relative;
z-index:2;
align-self:stretch;
display:flex;
flex-direction:column;
align-items:flex-start;
max-width:700px;
padding-right:clamp(24px,4vw,80px);
}
.pcta-num{
display:block;
margin-bottom:auto;
font-family:var(--font);
font-size:clamp(15px,1.25vw,20px);
font-weight:700;
letter-spacing:.08em;
color:var(--pcta-blue);
}
.pcta-panel h3{
margin:clamp(26px,6vh,76px) 0 0;
font-family:var(--font);
font-size:clamp(46px,5.8vw,94px);
font-weight:800;
line-height:.91;
letter-spacing:-.065em;
text-wrap:balance;
color:#fff;
}
.pcta-panel p{
max-width:470px;
margin:clamp(22px,3.2vh,38px) 0 0;
font-family:var(--font);
font-size:clamp(16px,1.25vw,20px);
font-weight:500;
line-height:1.45;
color:var(--pcta-muted);
}
.pcta-visual{
position:relative;
z-index:1;
justify-self:end;
width:min(100%,620px);
aspect-ratio:1.18/1;
transition:transform .35s cubic-bezier(.23,1,.32,1);
}
.pcta-panel:hover .pcta-visual{ transform:scale(1.025); }
/* Panel 01: eigener DWC-Designvorschlag als ruhiges Browser-Mockup. */
.pcta-browser{
border:1px solid rgba(255,255,255,.24);
border-radius:14px;
background:#F5F2EC;
box-shadow:0 24px 80px rgba(0,0,0,.28);
transform:rotate(1.4deg);
}
.pcta-browser__chrome{
height:11%;
display:flex;
align-items:center;
gap:7px;
padding:0 18px;
background:#E8E4DC;
border-bottom:1px solid rgba(10,15,26,.12);
color:#7B7A76;
font-size:10px;
letter-spacing:.05em;
}
.pcta-browser__chrome i{ width:7px; height:7px; border-radius:50%; background:#C8C2B8; }
.pcta-browser__chrome span{ margin-left:10px; opacity:.72; }
.pcta-browser__page{ height:89%; padding:clamp(18px,2.6vw,42px); color:#10141A; }
.pcta-browser__nav{ display:flex; align-items:center; gap:clamp(15px,2vw,32px); font-size:10px; letter-spacing:.08em; }
.pcta-browser__nav b{ margin-right:auto; font-size:17px; letter-spacing:-.08em; }
.pcta-browser__nav span{ width:26px; height:2px; background:#C9C3B8; }
.pcta-browser__nav em{ width:48px; height:16px; border-radius:99px; background:var(--pcta-blue); }
.pcta-browser__hero{ margin-top:15%; }
.pcta-browser__hero span{ display:block; width:72%; height:clamp(20px,3vw,44px); background:#10141A; }
.pcta-browser__hero strong{ display:block; width:55%; height:clamp(20px,2.2vw,31px); margin-top:10px; background:var(--pcta-blue); }
.pcta-browser__hero small{ display:block; width:42%; height:6px; margin-top:16px; background:#A5A29B; }
.pcta-browser__hero button{ display:block; width:88px; height:24px; margin-top:24px; border:0; border-radius:99px; background:#10141A; }
.pcta-browser__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12%; }
.pcta-browser__tiles span{ height:clamp(36px,5vw,76px); background:#D4CEC2; }
.pcta-browser__tiles span:nth-child(2){ background:#B3C4B2; }
.pcta-browser__tiles span:nth-child(3){ background:#C7B8A5; }
.pcta-browser__tag{ position:absolute; right:5%; bottom:-4%; padding:12px 18px; background:var(--pcta-blue); color:#fff; font-size:10px; font-weight:800; letter-spacing:.18em; }
/* Panel 02: kein Pricing-Grid, sondern ein einzelnes verbindliches Angebot. */
.pcta-offer{ display:grid; place-items:center; }
.pcta-offer__paper{ position:relative; width:68%; height:82%; padding:clamp(22px,3vw,44px); background:#F4F0E9; color:#10141A; box-shadow:0 28px 70px rgba(0,0,0,.3); transform:rotate(-4deg); }
.pcta-offer__head{ display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:800; letter-spacing:.18em; }
.pcta-offer__head span{ font-size:28px; letter-spacing:-.14em; color:var(--pcta-blue); }
.pcta-offer__line{ width:74%; height:4px; margin-top:14%; background:#C7C4BD; }
.pcta-offer__line--wide{ width:92%; height:7px; margin-top:22%; background:#10141A; }
.pcta-offer__line--short{ width:53%; margin-top:10px; }
.pcta-offer__total{ display:flex; align-items:end; justify-content:space-between; margin-top:18%; padding-top:16px; border-top:1px solid #D4D0C7; }
.pcta-offer__total small{ font-size:9px; font-weight:700; letter-spacing:.12em; }
.pcta-offer__total strong{ font-size:34px; letter-spacing:-.06em; }
.pcta-offer__check{ position:absolute; right:-14px; bottom:-14px; display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--pcta-blue); color:#fff; font-size:28px; box-shadow:0 8px 20px rgba(0,0,0,.24); }
.pcta-offer__stamp{ position:absolute; right:6%; top:4%; display:grid; place-items:center; width:92px; height:92px; border:1px solid rgba(255,255,255,.34); border-radius:50%; color:rgba(255,255,255,.78); font-size:9px; font-weight:800; letter-spacing:.12em; line-height:1.3; text-align:center; transform:rotate(12deg); }
/* Panel 03: wenige große Layout-Auszüge statt einer kleinen Template-Matrix. */
.pcta-canvas{ min-height:100%; }
.pcta-canvas__rail{ position:absolute; top:2%; right:8%; display:flex; gap:8px; }
.pcta-canvas__rail span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.28); }
.pcta-canvas__frame{ position:absolute; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(14px,2vw,28px); overflow:hidden; border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 50px rgba(0,0,0,.2); }
.pcta-canvas__frame span{ position:relative; z-index:1; font-size:clamp(10px,1.1vw,17px); font-weight:800; line-height:.94; letter-spacing:-.04em; text-transform:uppercase; }
.pcta-canvas__frame i{ position:absolute; inset:0; opacity:.72; background:linear-gradient(135deg,transparent 32%,rgba(255,255,255,.18) 33%,transparent 34%),linear-gradient(25deg,#1F4A3A,#B8C889); }
.pcta-canvas__frame--a{ left:4%; top:12%; width:50%; height:57%; background:#E87912; transform:rotate(-7deg); }
.pcta-canvas__frame--a i{ background:linear-gradient(145deg,rgba(255,113,0,.25),rgba(15,66,43,.86)),repeating-linear-gradient(35deg,#D9680B 0 12px,#F19B35 13px 16px); }
.pcta-canvas__frame--b{ right:2%; top:6%; width:45%; height:50%; background:#D8DED0; color:#193326; transform:rotate(5deg); }
.pcta-canvas__frame--b i{ background:radial-gradient(circle at 30% 32%,#E9E2D0 0 13%,transparent 14%),linear-gradient(135deg,#BFCDBA,#677E66); }
.pcta-canvas__frame--c{ right:12%; bottom:3%; width:48%; height:48%; background:#E7E1D6; color:#17233F; transform:rotate(-3deg); }
.pcta-canvas__frame--c i{ background:linear-gradient(135deg,transparent 58%,#0757F7 59% 78%,transparent 79%),linear-gradient(25deg,#E7E1D6,#F8F7F3); }
.pcta-canvas__note{ position:absolute; left:9%; bottom:1%; color:rgba(255,255,255,.55); font-size:9px; font-weight:700; letter-spacing:.16em; line-height:1.4; }
/* Native/reduced fallback: auch ohne GSAP bleibt die Section erreichbar. */
.pcta.quality-scroll--native .pcta-inner{ position:sticky; top:0; height:100svh; }
.pcta.quality-scroll--reduced .pcta-inner,
.pcta.quality-scroll--stacked .pcta-inner{ min-height:auto; }
.pcta.quality-scroll--reduced .pcta-viewport,
.pcta.quality-scroll--stacked .pcta-viewport{ overflow:visible; }
.pcta.quality-scroll--reduced .pcta-track,
.pcta.quality-scroll--stacked .pcta-track{ width:100%; height:auto; flex-direction:column; gap:16px; transform:none !important; }
.pcta.quality-scroll--reduced .pcta-panel,
.pcta.quality-scroll--stacked .pcta-panel{ min-height:clamp(520px,72svh,700px); flex-basis:auto; }
@media (max-width:1000px){
.pcta-panel{ grid-template-columns:minmax(0,1fr) minmax(250px,.8fr); padding:clamp(24px,4vw,48px); }
.pcta-panel h3{ font-size:clamp(42px,6.4vw,72px); }
.pcta-panel p{ font-size:16px; }
}
@media (max-width:720px){
.pcta-inner{ padding:96px 18px 30px; }
.pcta-header{ margin-bottom:34px; }
.pcta-h{ font-size:clamp(40px,4.45vw,64px); left:0; }
.pcta-label{ left:0; }
.pcta-panel--image{ height:auto; }
.pcta-panel{ grid-template-columns:1fr; min-height:580px; padding:26px; }
/* Die Versprechen sind fertig gesetzte 16:9-Motive. Auf Mobilgeraeten
darf die bisherige generische Mindesthoehe sie nicht mit object-fit:cover
beschneiden, sonst verschwinden Headline und Kurztext am linken Rand. */
.pcta-panel.pcta-panel--image{ min-height:0; aspect-ratio:16/9; }
.pcta-panel__copy{ padding-right:0; }
.pcta-panel h3{ margin-top:34px; font-size:clamp(42px,12vw,66px); }
.pcta-panel p{ margin-top:20px; }
.pcta-visual{ width:88%; margin:24px 0 0 auto; }
.pcta.quality-scroll--reduced .pcta-panel,
.pcta.quality-scroll--stacked .pcta-panel{ min-height:580px; }
.pcta.quality-scroll--reduced .pcta-panel.pcta-panel--image,
.pcta.quality-scroll--stacked .pcta-panel.pcta-panel--image{ min-height:0; }
}
@media (prefers-reduced-motion: reduce){
.pcta-panel:hover .pcta-visual{ transform:none; }
.pcta-visual{ transition:none; }
.pcta.quality-scroll .pcta-inner{ min-height:auto; }
.pcta.quality-scroll .pcta-viewport{ overflow:visible; }
.pcta.quality-scroll .pcta-track{ width:100%; height:auto; flex-direction:column; gap:16px; transform:none !important; }
.pcta.quality-scroll .pcta-panel{ min-height:clamp(520px,72svh,700px); flex-basis:auto; }
}
/* TRUST BAR · steht als eigene Fläche direkt unter dem Hero. Die vier Werte
bleiben bewusst auf ihren schwarzen Primärwert und das Label reduziert;
darunter gibt es keine blassgrauen Erklärungssätze. */
.landing-trustbar{
position:relative;
z-index:2;
--trust-icon-size:38px;
--trust-icon-gap:24px;
background:#ECECEF;
color:#080b11;
box-sizing:border-box;
padding:8px 12px;
}
.landing-trustbar__inner{
width:100%;
min-height:126px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
align-items:stretch;
}
.landing-trustbar__item{
position:relative;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:24px clamp(24px,3vw,64px);
}
.landing-trustbar__item + .landing-trustbar__item{
border-left:0;
}
.landing-trustbar__item + .landing-trustbar__item::before{
position:absolute;
top:30px;
bottom:30px;
left:0;
width:1px;
background:rgba(8,11,17,.2);
content:"";
}
.landing-trustbar__copy{ min-width:0; }
.landing-trustbar__metric-row{
display:flex;
align-items:center;
gap:var(--trust-icon-gap);
}
.landing-trustbar__icon{
width:var(--trust-icon-size);
height:var(--trust-icon-size);
flex:0 0 var(--trust-icon-size);
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.landing-trustbar__value{
min-width:0;
font-family:var(--font);
font-size:clamp(40px,3.1vw,50px);
font-weight:800;
letter-spacing:-.07em;
line-height:.84;
white-space:nowrap;
}
.landing-trustbar__label{
display:block;
min-width:0;
margin-top:10px;
margin-left:calc(var(--trust-icon-size) + var(--trust-icon-gap));
font-family:var(--font);
font-size:12px;
font-weight:800;
letter-spacing:.3em;
line-height:1.1;
text-transform:uppercase;
white-space:nowrap;
}
@media (min-width:768px) and (max-width:1100px){
.landing-trustbar{
--trust-icon-size:31px;
--trust-icon-gap:15px;
}
.landing-trustbar__inner{ min-height:108px; }
.landing-trustbar__item{
padding-inline:16px;
}
.landing-trustbar__value{ font-size:clamp(31px,4vw,40px); }
.landing-trustbar__label{ font-size:11px; letter-spacing:.15em; }
}
@media(max-width:900px){
.pcta-grid{ grid-template-columns:repeat(2,1fr); row-gap:32px; }
.pcta-item:nth-child(3){ border-left:0; }
}
@media(max-width:560px){
.pcta-grid{ grid-template-columns:1fr; }
.pcta-item{ border-left:0; padding:0; border-top:1px solid #E9EEF6; padding-top:24px; }
.pcta-item:first-child{ border-top:0; padding-top:0; }
}
/* Footer-Parallax (27.09.2026) - wie auf den Unterseiten (subpage-footer.css),
Wrapper/Inner/Dark-Layer legt assets/js/dwc-footer-parallax.js zur Laufzeit
um den Footer; der Footer selbst bleibt unveraendert. */
[data-footer-parallax] {
position: relative;
overflow: hidden;
}
[data-footer-parallax-dark] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
z-index: 2;
background: #000;
}
ersetzen — gleiche Mechanik. */
.proj-scroll { transition: transform 2.8s cubic-bezier(.33,.62,.61,1); will-change: transform; }
.project-card:hover .proj-scroll { transform: translateY(calc(208px - 100% - 28px)); }
.proj-shot { width: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .proj-scroll { transition: none; } .project-card:hover .proj-scroll { transform: none; } }
.proj-hero {
border-radius: 10px; padding: 18px 14px 14px;
display: flex; flex-direction: column; justify-content: flex-end;
margin-bottom: 12px;
}
.proj-h { height: 10px; border-radius: 5px; background: rgba(12,31,74,0.65); width: 72%; margin-bottom: 6px; }
.proj-p { height: 6px; border-radius: 4px; background: rgba(12,31,74,0.3); width: 50%; margin-bottom: 12px; }
.proj-cta { height: 24px; width: 90px; border-radius: 7px; background: var(--primary); }
.proj-rows { padding: 0 4px; display: flex; flex-direction: column; gap: 7px; }
.proj-line { height: 6px; border-radius: 4px; background: #f1f5f9; }
.proj-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; padding: 0 4px; }
.proj-mini { height: 28px; border-radius: 8px; background: #f8fafc; border: 1px solid #f1f5f9; }
.project-footer { border-top: 1px solid #f1f5f9; padding: 12px 14px; }
.project-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(12,31,74,0.6); }
.project-name { margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--primary); }
.projects-cta { text-align: center; margin-top: 36px; }
/* ── BRANCHEN-BAR (Beispielwebseiten für verschiedene Branchen) ── */
.branchen-bar { max-width: 1280px; margin: clamp(48px,6vw,72px) auto 0; }
.branchen-bar-title {
text-align: center; font-size: clamp(17px,1.6vw,20px); font-weight: 700;
color: var(--primary); letter-spacing: -0.01em;
padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.branchen-bar-row { display: flex; align-items: center; padding-top: 24px; }
.branchen-item {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
padding: 4px 8px;
}
.branchen-item + .branchen-item { border-left: 1px solid var(--border); }
.branchen-item svg { width: 26px; height: 26px; color: var(--primary); flex-shrink: 0; stroke-width: 1.6; }
.branchen-item span { font-size: clamp(14px,1.15vw,16px); font-weight: 600; color: var(--primary); white-space: nowrap; }
@media (max-width: 1080px) {
.branchen-bar-row { flex-wrap: wrap; row-gap: 22px; }
.branchen-item { flex: 0 0 33.33%; }
.branchen-item + .branchen-item { border-left: none; }
}
@media (max-width: 520px) {
.branchen-item { flex: 0 0 50%; gap: 9px; }
.branchen-item span { font-size: 14px; }
}
/* ── FAQ (Seite 8) ──
Inhalt der Sektion ist seit 23.08.2026 die React-Insel #dwc-faq-root
(react-stack/src/components/ui/faq-tabs.tsx). Das frühere zweispaltige
Akkordeon (.faq-2col/.faq-card/.faq-item2/.faq-trigger2/.faq-body2) und sein
Hintergrundbild (.faq-bgframe) sind mitsamt CSS entfernt — die Regeln standen
sonst als tote Selektoren in drei Blöcken verteilt weiter herum. Alter Stand:
_backup/2026-08-23-faq-tabs/index.html. */
/* Ober-/Unterabstand seit 27.08.2026 getrennt (Leo: "oben minimal kuerzen,
unten kann mehr weg, Landing Page kompakter"). Gemessen vor der Aenderung
bei 1920px: 120px oben, unten 120px Padding + 40px Abstand + 44px Knopf =
204px, weil der Kontaktlink damals noch unter der Insel stand.
Oben 120 -> 96 (-20%, "minimal"). Unten 120 -> 64 (-47%, "mehr") - der
Kontaktlink ist komplett raus (Leo: "Kontaktbutton unten raus"), dadurch
faellt neben dem Padding auch dessen 84px automatisch weg. Sichtbarer
Abstand unten damit 872 -> 64px, gegenueber vorher (204px) auf weniger als
ein Drittel. */
.faq-section { position:relative; overflow:hidden; background:#FBF2EA; padding: clamp(56px, 6vw, 96px) 24px clamp(40px, 4vw, 64px); }
/* Bühne für die Insel. Die Sektion bringt Außenabstand und Breite mit, deshalb
wird der eigene py-12/px-4-Rahmen der Komponente auf 0 gesetzt — sonst stünde
der FAQ-Block gut 48px tiefer als jede andere Sektion. Die Spezifität 1,0,1
schlägt die Tailwind-Utility (0,1,0) hier absichtlich. */
#dwc-faq-root { display:block; width:100%; }
#dwc-faq-root > section { padding: 0; }
/* ── CONTACT ── */
/* Vertikaler Abstand waechst bewusst stark mit der Breite. Die Szene ist 16:9;
bei 1920px war die Sektion nur 2,36:1 und cover hat die Lampe oben
abgeschnitten. Mehr Hoehe heisst weniger Beschnitt - bei 1920px sinkt er von
266px auf rund 160px, die Lampe bleibt im Bild. */
/* Die Kontakt-Sektion #kontakt ist am 23.08.2026 in den Footer gewandert
(.footer-cta, siehe FOOTER-Block). Hier stand vorher eine eigene schwarze
Sektion: Hintergrundfoto, zweispaltiges Formular, Info-Karten-Liste
(.contact-info-list/.info-icon/.info-val/.copy-btn waren bereits vor diesem
Umbau tote CSS-Regeln - keine Kachel im Markup nutzte sie). Das Formular
selbst (Name/E-Mail/Nachricht/DSGVO/Absenden) ist ENTFALLEN, nicht nur
verschoben - Leos ausdrueckliche Entscheidung nach Rueckfrage, siehe
PROJEKTSTAND.md. Alter Stand komplett in
_backup/2026-08-23-footer-kontakt-integration/index.html. */
/* ── FEATURES CAROUSEL ── */
.feat-carousel-wrapper {
position: relative; max-width: 1280px; margin: 32px auto 0; padding: 0 24px;
}
.feat-carousel-viewport { overflow: hidden; cursor: grab; user-select: none; }
.feat-carousel-viewport:active { cursor: grabbing; }
.feat-carousel-track {
display: flex; gap: 20px;
transition: transform .45s cubic-bezier(.25,.46,.45,.94);
will-change: transform;
}
.feat-carousel-slide {
flex: 0 0 calc(25% - 15px); min-width: 0;
display: flex;
}
@media (max-width: 1024px) { .feat-carousel-slide { flex: 0 0 calc(50% - 10px); } }
@media (max-width: 560px) { .feat-carousel-slide { flex: 0 0 calc(85%); } }
/* ── TIMELINE ── */
/* ── TIMELINE ── */
.timeline-section {
background: linear-gradient(180deg, #F3EBDC 0%, #F6EFE4 50%, #F4EDE1 100%);
padding: clamp(58px, 6.5vw, 92px) 24px clamp(64px, 7vw, 100px);
position: relative; overflow: hidden;
}
.timeline-section::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(40% 46% at 90% 8%, rgba(201,154,61,0.05) 0%, rgba(201,154,61,0) 72%),
radial-gradient(38% 44% at 6% 96%, rgba(190,138,55,0.05) 0%, rgba(190,138,55,0) 72%);
}
.timeline-section > .container { position: relative; z-index: 1; }
.timeline-section .section-eyebrow { background: rgba(255,255,255,0.72); border-color: var(--border); color: var(--accent); }
.timeline-section .section-h2 { color: #061B3A; }
.timeline-section .section-body { color: #5B6A79; }
/* Roadmap: 5 Schritte in einer Reihe, dezente Verbindungslinie */
.process-flow {
position: relative; max-width: 1240px; margin: clamp(40px,4.2vw,62px) auto 0;
display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.5vw, 22px);
}
.process-flow::before, .process-flow::after {
content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; border-radius: 2px;
}
.process-flow::before { background: linear-gradient(90deg, rgba(12,31,74,0) 0%, rgba(12,31,74,0.13) 12%, rgba(12,31,74,0.13) 88%, rgba(12,31,74,0) 100%); z-index: 0; }
.process-flow::after { background: linear-gradient(90deg, var(--primary) 0%, #1E6DEB 100%); z-index: 1; transform-origin: left center; transform: scaleX(0); transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.timeline-section.animated .process-flow::after { transform: scaleX(1); }
.pstep {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; text-align: center;
opacity: 0; transform: translateY(16px);
transition: opacity .55s ease, transform .55s ease;
}
.timeline-section.animated .pstep { opacity: 1; transform: translateY(0); }
.timeline-section.animated .pstep:nth-child(2) { transition-delay: .08s; }
.timeline-section.animated .pstep:nth-child(3) { transition-delay: .16s; }
.timeline-section.animated .pstep:nth-child(4) { transition-delay: .24s; }
.timeline-section.animated .pstep:nth-child(5) { transition-delay: .32s; }
.pstep-node {
width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
background: var(--primary); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800; letter-spacing: 0.01em;
box-shadow: 0 8px 20px -7px rgba(6,27,58,0.48), 0 0 0 7px #F0EBE2;
margin-bottom: 20px;
}
.pstep-card {
width: 100%; flex: 1 1 auto;
background: #fff; border: 1px solid rgba(12,31,74,0.07); border-radius: 16px;
padding: 24px 20px 22px;
box-shadow: 0 16px 38px -26px rgba(12,31,74,0.26), 0 1px 2px rgba(12,31,74,0.04);
display: flex; flex-direction: column; align-items: center;
}
.pstep-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
background: var(--accent-sky); color: var(--accent);
display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.pstep-icon svg { width: 22px; height: 22px; }
.pstep-title { font-size: clamp(15px,1.15vw,16.5px); font-weight: 800; color: var(--primary); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; }
.pstep-desc { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.pstep-desc .timeline-highlight { font-weight: 700; color: var(--primary); }
@media (max-width: 1024px) {
.process-flow { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; max-width: 660px; }
.process-flow::before, .process-flow::after { display: none; }
.pstep:last-child { grid-column: 1 / -1; }
.pstep:last-child .pstep-card { max-width: 420px; }
}
@media (max-width: 560px) {
.process-flow { grid-template-columns: 1fr; max-width: 420px; gap: 18px; }
.pstep:last-child { grid-column: auto; }
.pstep-node { width: 50px; height: 50px; margin-bottom: 16px; }
.pstep-card { padding: 20px 18px; }
}
/* ── DSGVO Checkbox ── */
/* ── Features expand ── */
.features-extra {
max-height: 0; overflow: hidden;
transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
opacity: 0;
}
.features-extra.open { max-height: 600px; opacity: 1; }
.features-extra .features-grid { margin-top: 20px; }
.btn-mehr {
display: inline-flex; align-items: center; gap: 7px;
background: white; color: var(--primary);
border: 1.5px solid var(--border); border-radius: 12px;
padding: 11px 24px; font-family: var(--font); font-size: 14px; font-weight: 600;
cursor: pointer; margin-top: 32px;
box-shadow: 0 1px 4px rgba(12,31,74,0.06);
transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-mehr:hover { background: #f1f5f9; border-color: rgba(12,31,74,0.25); box-shadow: 0 2px 8px rgba(12,31,74,0.09); }
.btn-mehr svg { transition: transform .3s; }
.btn-mehr.open svg { transform: rotate(180deg); }
/* ── FOOTER ──────────────────────────────────────────────────────────────
Ueberarbeitet 23.08.2026. Schwarz, DWC-Branding und Grundgeruest bleiben;
neu sind Rhythmus, Typo-Stufen und der Glasknopf.
Eigene Farbstufen statt verstreuter rgba-Literale: der Fuss ist per
Farbdramaturgie in beiden Themes #000000, es gibt also nur einen Satz.
Die Werte sind auf Kontrast gerechnet, nicht nach Gefuehl gesetzt -
Fliesstext liegt ueber 4,5:1 gegen Schwarz. */
footer {
--fo-ink: #FFFFFF;
--fo-ink-2: rgba(233,239,250,.66);
--fo-ink-3: rgba(233,239,250,.56);
--fo-line: rgba(255,255,255,.09);
background: var(--primary);
color: var(--fo-ink);
/* Volle Bildschirmbreite fuer die beiden Trennlinien (.footer-cta::after,
.footer-bottom::before) per 100vw, ohne dass die Seite waagerecht
scrollt - UND haelt seit 22.09.2026 das riesige ".footer-watermark"
senkrecht im Footer eingeschlossen (vorher konnte es unten aus der
dunklen Flaeche herausragen: unsichtbar auf Schwarz, aber der Body
dahinter ist weiss, es sah aus wie ein weisser Strich unter dem Footer). */
overflow: hidden;
position: relative;
}
/* Riesiges, dezentes "DWC" im Footer-Hintergrund (22.09.2026, Julian:
Vorbild-Screenshot einer generischen Footer-Vorlage; "viel zu klein,
deutlich groesser"). Liegt HINTER dem ganzen Inhalt (.footer-inner bekommt
darum eine eigene Stapelkontext-Ebene z-index:1), senkrecht mittig und an
den Raendern vom Footer selbst beschnitten (overflow:hidden oben) - genau
die angeschnittene Optik der Vorlage. aria-hidden weil rein dekorativ.
Poppins wie im Hero (.hero-split__stage) fuer denselben fetten
Wortmarken-Look, hier nur als CSS-Text statt Logo-Grafik. */
.footer-watermark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
font-family: 'Poppins', var(--font);
font-weight: 700;
font-size: clamp(220px, 32vw, 620px);
line-height: 1;
letter-spacing: -0.02em;
color: rgba(255,255,255,.05);
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* 1280 -> 1360: der Footer war die schmalste Stelle der Seite (.container laeuft
auf 1360, breite Sektionen bis 1672). Jetzt buendig mit .container.
Padding 22.09.2026 vergroessert (Julian: "Footer ein bisschen groesser"). */
.footer-inner {
width: var(--shell);
margin: 0 auto;
padding: clamp(72px, 7vw, 112px) 0 clamp(40px, 4vw, 56px);
position: relative;
z-index: 1;
}
/* Gemeinsame Haarlinie fuer beide Footer-Trenner: volle Viewport-Breite,
durchgehend deckend (18.09.2026, Leo: der weiche Rand-Verlauf liess die
Linie auf breiten Bildschirmen wirken, als sei sie nur in der Bildschirm-
mitte da statt komplett durchgehend). */
.footer-cta::after,
.footer-bottom::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 1px;
background: var(--fo-line);
}
/* Kontaktbereich (Umbau 30.08.2026, Leo): kein Kasten mehr, sondern ein
flaches Band direkt auf der schwarzen Footer-Flaeche. Eine feine Linie
trennt es von den Navigationsspalten darunter, sodass Kontakt und Footer
als ein Stueck wirken. Deutlich flacher als die vorherige Variante-2-Card:
Rahmen/Rundung/Schatten/Innen-Padding raus, links Kopf + drei Kontaktinfos,
rechts das zweispaltige Kompakt-Formular (Name|E-Mail in einer Zeile,
Nachricht niedrig darunter). Der Footer selbst (.footer-grid,
.footer-bottom) ist unveraendert. #kontakt bleibt die Ankermarke.
Voller Vorher-Stand: _backup/2026-08-30-kontakt-band/. */
.footer-cta {
--fc-accent: #0757F7;
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: clamp(28px, 5vw, 64px);
align-items: center;
padding-bottom: clamp(30px, 3.6vw, 44px);
margin-bottom: clamp(34px, 4.2vw, 52px);
}
/* Trennlinie Kontakt -> Navigationsspalten. Optik/Breite: gemeinsame Regel oben.
bottom:0 = an der Unterkante des padding-box, exakt wo vorher border-bottom sass. */
.footer-cta::after { bottom: 0; }
/* Links: Kopf + Kontaktinfos */
.footer-cta__lead { min-width: 0; }
.footer-cta__eyebrow {
display: block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--fc-accent);
}
.footer-cta__h {
margin: 0;
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(28px, 2.6vw, 40px);
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--fo-ink);
}
.footer-cta__h .accent { color: var(--fc-accent); }
.footer-cta__p {
margin: 10px 0 0;
max-width: 40ch;
font-size: 14px;
line-height: 1.6;
color: var(--fo-ink-2);
}
.footer-cta__p strong { color: var(--fo-ink); font-weight: 600; }
.footer-cta__infos {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: clamp(18px, 2.4vw, 26px);
}
.footer-cta__info {
display: flex;
align-items: center;
gap: 12px;
color: var(--fo-ink);
text-decoration: none;
}
a.footer-cta__info { transition: color .2s ease; }
a.footer-cta__info:hover { color: #fff; }
a.footer-cta__info:hover .footer-cta__info-icon { background: rgba(7,87,247,.22); }
.footer-cta__info-icon {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(7,87,247,.14);
color: #6EA8FF;
transition: background .2s ease;
}
.footer-cta__info-icon svg { width: 16px; height: 16px; }
.footer-cta__info-text { display: flex; flex-direction: column; min-width: 0; }
.footer-cta__info-value { font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.footer-cta__info-label { font-size: 11.5px; color: var(--fo-ink-3); }
/* Rechts: Kompakt-Formular. CI-Blau lokal als --fc-accent. */
.footer-cta__form { display: flex; flex-direction: column; gap: 10px; }
.footer-cta__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.footer-cta__form input,
.footer-cta__form textarea {
width: 100%;
padding: 11px 13px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 9px;
background: rgba(255,255,255,.045);
color: var(--fo-ink);
font: inherit;
font-size: 14px;
line-height: 1.5;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.footer-cta__form input::placeholder,
.footer-cta__form textarea::placeholder { color: rgba(233,239,250,.42); }
.footer-cta__form input:focus,
.footer-cta__form textarea:focus {
outline: none;
border-color: var(--fc-accent);
background: rgba(255,255,255,.07);
box-shadow: 0 0 0 3px rgba(7,87,247,.25);
}
.footer-cta__form textarea { min-height: 78px; resize: vertical; }
.footer-cta__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-cta__err { font-size: 12px; color: #FF6B6B; display: none; }
.footer-cta__err.show { display: block; }
.footer-cta__form-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 2px;
}
.footer-cta__consent {
display: flex;
align-items: flex-start;
gap: 8px;
flex: 1;
min-width: 0;
font-size: 11.5px;
line-height: 1.45;
color: var(--fo-ink-3);
cursor: pointer;
}
.footer-cta__consent input {
margin-top: 1px;
width: 14px;
height: 14px;
flex: none;
accent-color: var(--fc-accent);
cursor: pointer;
}
.footer-cta__consent a { color: var(--fo-ink-2); text-decoration: underline; }
.footer-cta__btn {
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border: 0;
border-radius: 9px;
background: var(--fc-accent);
color: #fff;
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 10px 22px -14px rgba(7,87,247,.45);
transition: background-color .2s ease, transform .2s ease;
}
.footer-cta__btn svg { width: 15px; height: 15px; }
.footer-cta__btn:hover { background: #0649D4; transform: translateY(-1px); }
.footer-cta__btn:disabled { opacity: .7; cursor: wait; transform: none; }
.footer-cta__btn:focus-visible { outline: 2px solid #6EA8FF; outline-offset: 3px; }
.footer-cta__success {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border: 1px solid rgba(7,87,247,.3);
border-radius: 10px;
background: rgba(7,87,247,.1);
color: var(--fo-ink);
font-size: 14px;
line-height: 1.5;
}
.footer-cta__success-icon {
flex: none;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--fc-accent);
color: #fff;
font-size: 14px;
}
/* Tablet / Mobil */
@media (max-width: 860px) {
.footer-cta { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 32px); }
}
@media (max-width: 520px) {
.footer-cta__form-row { grid-template-columns: 1fr; }
.footer-cta__form-foot { flex-direction: column; align-items: stretch; }
.footer-cta__btn { justify-content: center; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.footer-cta__btn,
a.footer-cta__info,
.footer-cta__info-icon,
.footer-cta__form input,
.footer-cta__form textarea { transition: none; }
.footer-cta__btn:hover { transform: none; }
}
.footer-grid {
display: grid;
grid-template-columns: 1.35fr 1fr 1fr 1fr 1.3fr;
gap: clamp(32px, 3.6vw, 56px);
align-items: start;
}
.footer-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* 44 -> 53px (22.09.2026, Julian: "Logo links ca. 20% groesser"). */
.footer-logo img { height: 53px; width: auto; object-fit: contain; }
/* Spaltenkoepfe als kleine Versalzeile - das ist der Griff, der eine
Linkliste nach Agentur aussehen laesst statt nach Sitemap. */
.footer-col-title {
font-size: 11.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.92);
margin-bottom: 18px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a, .footer-links button {
font-size: 14px; line-height: 1.35; color: var(--fo-ink-2);
text-decoration: none; background: none; border: none; cursor: pointer;
font-family: var(--font); padding: 0; text-align: left;
width: fit-content;
transition: color .18s ease;
}
.footer-links a:hover, .footer-links button:hover { color: var(--fo-ink); }
/* Der Zusatz rechts trug bis 23.08.2026 ein Inline-rgba(...,.45) und kam damit
auf 3,56:1 gegen Schwarz - unter dem AA-Minimum. Jetzt dieselbe Farbstufe wie
die Zeile links, nur eine Spur kleiner; die Rangfolge traegt die Groesse. */
.footer-bottom__note { font-size: 12.5px; color: var(--fo-ink-3); }
.footer-bottom {
position: relative;
margin-top: clamp(48px, 5vw, 72px);
padding-top: 26px;
display: flex; align-items: center; justify-content: space-between;
font-size: 13px; color: var(--fo-ink-3);
flex-wrap: wrap; gap: 12px 24px;
}
/* Linie faedet an den Kanten aus statt hart abzuschneiden. Optik/Breite (100vw,
weicher Rand): gemeinsame Regel bei .footer-inner. Hier nur die Position. */
.footer-bottom::before { top: 0; }
/* Rechtliches zog 22.09.2026 aus einer eigenen Spalte hier runter neben das
Copyright (Julian, nach Vorlage). */
.footer-bottom__legal { display: flex; align-items: center; gap: 20px; }
.footer-bottom__legal a {
font-size: 13px; color: var(--fo-ink-3); text-decoration: none;
transition: color .18s ease;
}
.footer-bottom__legal a:hover { color: var(--fo-ink); }
/* Kontakt-Spalte (22.09.2026, ersetzt "Rechtliches" oben): Adresse/Telefon/
E-Mail mit Icon, wie in der Vorlage. Werte kommen ueber die __KONTAKT_*__-
Platzhalter aus content/de/kontakt.json (build.mjs), dieselbe Quelle wie im
JSON-LD im Seitenkopf. */
.footer-contact { display: flex; flex-direction: column; gap: 14px; }
.footer-contact__row {
display: flex;
align-items: flex-start;
gap: 11px;
font-size: 13.5px;
line-height: 1.4;
color: var(--fo-ink-2);
text-decoration: none;
}
a.footer-contact__row { transition: color .18s ease; }
a.footer-contact__row:hover { color: var(--fo-ink); }
.footer-contact__row svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--fo-ink-3); }
/* Newsletter-Box (22.09.2026, Julian: ersetzt die bisherige Tools & Partner-
Spalte 1:1 nach Vorlage). Kein eigenes Versand-Backend - siehe Kommentar
am Markup (index.html); der Knopf oeffnet das bestehende Kontaktformular. */
.footer-news__p {
margin: 0 0 16px;
font-size: 13.5px;
line-height: 1.55;
color: var(--fo-ink-2);
max-width: 32ch;
}
.footer-news__form {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 5px 5px 16px;
border: 1px solid rgba(255,255,255,.16);
border-radius: 999px;
/* Deckend statt rgba(255,255,255,.045/.07): das DWC-Wasserzeichen schien
durch (Julian, 24.09.2026). Gleicher Ton wie vorher auf #0D0B0A. */
background: #181615;
transition: border-color .18s ease, background .18s ease;
}
.footer-news__form:focus-within {
border-color: rgba(255,255,255,.32);
background: #1E1C1B;
}
.footer-news__form input {
flex: 1;
min-width: 0;
border: 0;
background: none;
color: var(--fo-ink);
font: inherit;
font-size: 13.5px;
padding: 8px 0;
}
.footer-news__form input::placeholder { color: var(--fo-ink-3); }
.footer-news__form input:focus { outline: none; }
.footer-news__form button {
flex: none;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: #fff;
color: #0B0D10;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.footer-news__form button:hover { background: var(--fo-ink-2); transform: translateY(-1px); }
.footer-news__form button svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) {
.footer-news__form button:hover { transform: none; }
}
/* Social-Icons haengen unter Logo + Theme-Toggle in .footer-logo, nicht in
.footer-bottom (Leos 22.08.-Korrektur). */
.footer-social-title { margin: 26px 0 14px; }
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.footer-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
color: var(--fo-ink-2); background: rgba(255,255,255,.05);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
transition: color .18s ease, background .18s ease, transform .18s ease;
}
.footer-social a:hover {
color: var(--fo-ink);
background: rgba(255,255,255,.11);
transform: translateY(-1px);
}
.footer-social svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
.footer-social a:hover { transform: none; }
}
/* ── iOS SPINNER OVERLAY ── */
.loading-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(255,255,255,0.88); backdrop-filter: blur(8px);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 18px; opacity: 0; pointer-events: none;
transition: opacity .25s;
}
.loading-overlay.visible { opacity: 1; pointer-events: all; }
.spinner {
position: relative; display: inline-block;
width: 36px; height: 36px;
}
.spinner-blade {
position: absolute;
height: 20%; width: 8%;
background: var(--primary);
border-radius: 2px;
top: 37%; left: 44%;
animation: spinner-blade 1s linear infinite;
will-change: opacity;
}
.spinner-blade:nth-child(1) { transform: rotate(0deg) translateY(-130%); animation-delay: -1.667s; }
.spinner-blade:nth-child(2) { transform: rotate(30deg) translateY(-130%); animation-delay: -1.583s; }
.spinner-blade:nth-child(3) { transform: rotate(60deg) translateY(-130%); animation-delay: -1.5s; }
.spinner-blade:nth-child(4) { transform: rotate(90deg) translateY(-130%); animation-delay: -1.417s; }
.spinner-blade:nth-child(5) { transform: rotate(120deg) translateY(-130%); animation-delay: -1.333s; }
.spinner-blade:nth-child(6) { transform: rotate(150deg) translateY(-130%); animation-delay: -1.25s; }
.spinner-blade:nth-child(7) { transform: rotate(180deg) translateY(-130%); animation-delay: -1.167s; }
.spinner-blade:nth-child(8) { transform: rotate(210deg) translateY(-130%); animation-delay: -1.083s; }
.spinner-blade:nth-child(9) { transform: rotate(240deg) translateY(-130%); animation-delay: -1s; }
.spinner-blade:nth-child(10) { transform: rotate(270deg) translateY(-130%); animation-delay: -0.917s; }
.spinner-blade:nth-child(11) { transform: rotate(300deg) translateY(-130%); animation-delay: -0.833s; }
.spinner-blade:nth-child(12) { transform: rotate(330deg) translateY(-130%); animation-delay: -0.75s; }
@keyframes spinner-blade {
0% { opacity: 0.85; }
50% { opacity: 0.25; }
100% { opacity: 0.25; }
}
.loading-label { font-size: 14px; font-weight: 500; color: var(--primary); letter-spacing: 0.01em; }
/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* ── Erweiterung 30.08.2026: Reveal für bisher statische Kopfzeilen ────────
Ergänzt .reveal oben, fasst keine ihrer Zeilen an — eigene Klassen, damit
an den bereits abgenommenen .reveal-Sections nichts anders läuft als vorher.
Gleicher Mechanismus (ein IntersectionObserver setzt .in, siehe Skriptende,
dessen Selektor lediglich um diese Klassen erweitert wurde).
.reveal-up = Text/Kopfzeilen: Fade + leichtes Hochkommen
.reveal-img = zusätzlich sehr leichter Scale, für Bilder
.reveal-dN = kleiner Versatz für Gruppen (Kopfzeile → Unterzeile → Inhalt) */
.reveal-up{ opacity:0; transform:translateY(20px); transition:opacity .72s cubic-bezier(.23,1,.32,1), transform .72s cubic-bezier(.23,1,.32,1); }
.reveal-up.in{ opacity:1; transform:translateY(0); }
.reveal-img{ opacity:0; transform:translateY(18px) scale(.98); transition:opacity .78s cubic-bezier(.23,1,.32,1), transform .78s cubic-bezier(.23,1,.32,1); }
.reveal-img.in{ opacity:1; transform:translateY(0) scale(1); }
.reveal-d1{ transition-delay:.06s }
.reveal-d2{ transition-delay:.12s }
.reveal-d3{ transition-delay:.18s }
.reveal-d4{ transition-delay:.24s }
.reveal-d5{ transition-delay:.30s }
@media (max-width:640px){
.reveal-up{ transform:translateY(14px); transition-duration:.55s; }
.reveal-img{ transform:translateY(14px) scale(.985); transition-duration:.6s; }
}
@media (prefers-reduced-motion: reduce){
.reveal-up,.reveal-img{ opacity:1; transform:none; transition:none; }
.reveal-d1,.reveal-d2,.reveal-d3,.reveal-d4,.reveal-d5{ transition-delay:0s; }
}
/* ── NAV DROPDOWN ── */
.nav-dropdown-wrap { position: static; display: inline-flex; }
.nav-dropdown-btn {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer;
font-family: var(--font); font-size: 16.5px; font-weight: 700;
color: #ffffff; padding: 10px 16px; border-radius: 999px;
white-space: nowrap;
text-shadow: 0 1px 4px rgba(0,0,0,0.35);
transition: background .15s, color .15s;
}
.nav-dropdown-btn:hover, .nav-dropdown-btn.open { background: rgba(255,255,255,0.12); }
header.scrolled .nav-dropdown-btn { color: #14233D; text-shadow: none; }
header.scrolled .nav-dropdown-btn:hover, header.scrolled .nav-dropdown-btn.open { background: rgba(20,35,61,0.07); color: var(--primary); }
/* Chevron: Glyph exakt in seiner 14px-Box zentriert (font-size == Box, kein
Überstand), damit rotate() um die echte Bildmitte dreht statt um einen
versetzten Punkt zu kreisen. Auf-Zustand kippt ihn an Ort und Stelle nach
oben. */
.nav-dropdown-btn .chev {
width: 14px; height: 14px; font-size: 14px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .28s cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-dropdown-btn.open .chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
.nav-dropdown-btn .chev { transition: none; }
}
.nav-dropdown {
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(-6px);
width: min(980px, calc(100vw - 40px));
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: repeat(4, minmax(0, 1fr));
column-gap: 18px;
row-gap: 4px;
background: white;
border: 1px solid var(--border); border-radius: 16px;
box-shadow: 0 12px 40px rgba(12,31,74,0.12);
padding: 16px 18px 16px; z-index: 500;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav-dropdown::before {
content: '';
position: absolute;
top: 16px;
bottom: 16px;
left: 50%;
width: 1px;
background: var(--border);
pointer-events: none;
}
.nav-dropdown.open {
opacity: 1; visibility: visible; pointer-events: all;
transform: translateX(-50%) translateY(0);
transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
.nav-dd-active-indicator { display:none; position:absolute; z-index:2; left:8px; top:0; width:2px; height:1px; border-radius:999px; background:#2472e8; box-shadow:0 1px 5px rgba(36,114,232,.24); opacity:0; pointer-events:none; transform:translate3d(0,0,0) scaleY(1); transform-origin:top; transition:transform .24s cubic-bezier(.23,1,.32,1),opacity .12s ease; will-change:transform; }
.nav-dropdown--indicator-visible .nav-dd-active-indicator { opacity:1; }
.nav-dd-item {
position:relative;
display:flex;
align-items:flex-start;
gap:12px;
min-height:76px;
padding:10px 10px;
border-radius:10px;
text-decoration:none;
transition:background-color .15s ease;
}
.nav-dd-item:nth-of-type(1) { grid-column:1; grid-row:1; }
.nav-dd-item:nth-of-type(2) { grid-column:1; grid-row:2; }
.nav-dd-item:nth-of-type(3) { grid-column:1; grid-row:3; }
.nav-dd-item:nth-of-type(4) { grid-column:1; grid-row:4; }
.nav-dd-item:nth-of-type(5) { grid-column:2; grid-row:1; }
.nav-dd-item:nth-of-type(6) { grid-column:2; grid-row:2; }
.nav-dd-item:nth-of-type(7) { grid-column:2; grid-row:3; }
.nav-dd-item:hover,.nav-dd-item:focus-visible { background:rgba(36,114,232,0.05); }
.nav-dd-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(12,31,74,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--primary); }
.nav-dd-title { font-size: clamp(14px, .82vw, 16px); font-weight: 700; color: var(--primary); margin-bottom: 3px; }
.nav-dd-desc { font-size: clamp(12px, .68vw, 13px); color: var(--muted); line-height: 1.32; max-width: 27ch; }
/* Pfeil rechts (06.09.2026, Julian, nach Vorlagenbild): reiner Text-Chevron
per ::after, keine Markup-Aenderung noetig. */
.nav-dd-item::after {
content: "\203A"; align-self: center; margin-left: auto; padding-left: 8px;
font-size: 18px; line-height: 1; color: var(--muted); flex-shrink: 0;
transition: color .15s ease;
}
.nav-dd-item:hover::after { color: #2472e8; }
.nav-dd-consult {
grid-column:2;
grid-row:4;
align-self:stretch;
margin:4px 10px 0;
padding:10px 10px 8px 16px;
border-top:1px solid var(--border);
}
.nav-dd-consult-label {
display:flex;
align-items:center;
gap:9px;
color:var(--primary);
font-size:10px;
font-weight:700;
letter-spacing:.23em;
line-height:1.2;
text-transform:uppercase;
}
.nav-dd-consult-dot {
width:7px;
height:7px;
border-radius:50%;
background:#2472e8;
flex:0 0 auto;
}
.nav-dd-consult-link {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:8px;
color:var(--primary);
font-size:clamp(13px, .78vw, 15px);
line-height:1.25;
text-decoration:none;
}
.nav-dd-consult-link span {
color:#2472e8;
font-size:24px;
line-height:1;
transition:transform .15s ease;
}
.nav-dd-consult-link:hover span { transform:translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item, .nav-dd-item::after { transition: none; }
.nav-dd-active-indicator { transition:opacity .12s ease; }
.nav-dd-consult-link span { transition:none; }
}
.nav-dd-item:hover .nav-dd-icon-lp__r1 { animation: nav-dd-lp-y .5s ease both; }
.nav-dd-item:hover .nav-dd-icon-lp__r2 { animation: nav-dd-lp-x-left .5s ease both; animation-delay: .3s; }
.nav-dd-item:hover .nav-dd-icon-lp__r3 { animation: nav-dd-lp-x-right .5s ease both; animation-delay: .4s; }
@keyframes nav-dd-lp-y { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nav-dd-lp-x-left { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nav-dd-lp-x-right { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-lp__r1,
.nav-dd-item:hover .nav-dd-icon-lp__r2,
.nav-dd-item:hover .nav-dd-icon-lp__r3 { animation: none; }
}
/* Icon "Website Redesign" (06.09.2026, Julian: eigene Palette-Line-Vorlage).
In Body + 3 Farbpunkte aufgeteilt, damit sie wie beim Website-Erstellung-
Icon oben einzeln einfliegen koennen - dieselben drei Keyframes, dieselbe
Dauer/Kadenz (0/.3s/.4s). Der vierte Teil (oberer Punkt) hat dort keine
Entsprechung, nutzt darum denselben Keyframe wie der Body, nur einen
Schritt spaeter (.5s), statt einen eigenen Bewegungstyp zu erfinden. */
.nav-dd-item:hover .nav-dd-icon-pal__body { animation: nav-dd-lp-y .5s ease both; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-left { animation: nav-dd-lp-x-left .5s ease both; animation-delay: .3s; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-right { animation: nav-dd-lp-x-right .5s ease both; animation-delay: .4s; }
.nav-dd-item:hover .nav-dd-icon-pal__dot-top { animation: nav-dd-lp-y .5s ease both; animation-delay: .5s; }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-pal__body,
.nav-dd-item:hover .nav-dd-icon-pal__dot-left,
.nav-dd-item:hover .nav-dd-icon-pal__dot-right,
.nav-dd-item:hover .nav-dd-icon-pal__dot-top { animation: none; }
}
/* Icon "Hosting & Wartung" (06.09.2026, Julian: AnimateIcons ServerIcon,
animateicons.in/Avijit Dey, MIT). Vanilla-Nachbau wie beim Sprachen-Icon
oben: die drei Reihen zeichnen sich per stroke-dasharray/-dashoffset nach
(Vorlage: Framer-Motion pathLength [0,1], gestaffelt um 0.08s je Reihe),
die sechs Punkte fliegen danach ein - dafuer keine neuen Keyframes noetig,
das sind dieselben nav-dd-lp-x-left/-right von ganz oben (linke Spalte
von links, rechte Spalte von rechts), nur pro Reihe leicht versetzt statt
die Punkte der Vorlage einzeln neu zu bauen. */
.nav-dd-icon-srv__row1 { --len: 45; }
.nav-dd-icon-srv__row2 { --len: 45; }
.nav-dd-icon-srv__row3 { --len: 45; }
.nav-dd-icon-srv path { stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 1; }
.nav-dd-item:hover .nav-dd-icon-srv__row1 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) 0s both; }
.nav-dd-item:hover .nav-dd-icon-srv__row2 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) .08s both; }
.nav-dd-item:hover .nav-dd-icon-srv__row3 { animation: nav-dd-srv-draw .5s cubic-bezier(.23,1,.32,1) .16s both; }
@keyframes nav-dd-srv-draw {
0% { opacity: 0; stroke-dashoffset: var(--len); }
2% { opacity: 1; }
100% { opacity: 1; stroke-dashoffset: 0; }
}
.nav-dd-item:hover .nav-dd-icon-srv__dot-1 { animation: nav-dd-lp-x-left .5s ease .3s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-2 { animation: nav-dd-lp-x-right .5s ease .32s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-3 { animation: nav-dd-lp-x-left .5s ease .38s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-4 { animation: nav-dd-lp-x-right .5s ease .4s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-5 { animation: nav-dd-lp-x-left .5s ease .46s both; }
.nav-dd-item:hover .nav-dd-icon-srv__dot-6 { animation: nav-dd-lp-x-right .5s ease .48s both; }
@media (prefers-reduced-motion: reduce) {
.nav-dd-item:hover .nav-dd-icon-srv__row1,
.nav-dd-item:hover .nav-dd-icon-srv__row2,
.nav-dd-item:hover .nav-dd-icon-srv__row3,
.nav-dd-item:hover .nav-dd-icon-srv__dot-1,
.nav-dd-item:hover .nav-dd-icon-srv__dot-2,
.nav-dd-item:hover .nav-dd-icon-srv__dot-3,
.nav-dd-item:hover .nav-dd-icon-srv__dot-4,
.nav-dd-item:hover .nav-dd-icon-srv__dot-5,
.nav-dd-item:hover .nav-dd-icon-srv__dot-6 { animation: none; }
}
/* Icon "Corporate Design" (06.09.2026, Julian: gelieferte PencilIcon-Vorlage,
SMIL-