mit background-image (kein Alt-Text, fuer
Bildersuche/Screenreader unsichtbar) -- jetzt ein echtes ![]()
mit
beschreibendem Alt-Text (Regel A), per object-fit weiterhin volle Flaeche. */
.section-photo-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.section-photo-veil {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 62%, transparent) 0%, color-mix(in srgb, var(--ink) 80%, transparent) 45%, color-mix(in srgb, var(--ink) 94%, transparent) 100%);
}
/* Hellmodus: Verlauf um die Haelfte abgeschwaecht, damit die Fotos originaler
wirken statt fast weiss uebertuencht zu sein (--ink ist im Hellmodus fast weiss). */
:root:not([data-theme="dark"]) .section-photo-veil {
background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 31%, transparent) 0%, color-mix(in srgb, var(--ink) 40%, transparent) 45%, color-mix(in srgb, var(--ink) 47%, transparent) 100%);
}
.section-photo > .container { position: relative; z-index: 2; }
.section-photo .thesis-item, .section-photo .sector {
background: color-mix(in srgb, var(--ink) 90%, transparent); border-color: var(--line-2); border-radius: var(--radius-card); padding: 24px 22px;
}
/* Aus dem .container ausbrechen auf volle Viewportbreite — fuer Foto-Sections,
die nicht als eigenes -Element vorliegen, sondern innerhalb einer
bestehenden Section sitzen (z. B. "Einsatzbereiche" innerhalb "Einsatzgebiet"). */
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-radius: 0; }
.full-bleed .section-photo-bg, .full-bleed .section-photo-veil { border-radius: 0; }
.full-bleed > .container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
/* Reine Foto-Baender ohne Textinhalt darueber -- lockern lange Textseiten
(Ueber uns, Einsatzgebiet) optisch auf, ohne wie .section-photo
selbst Content zu tragen. Kurze Bildunterschrift unten links, gleiche
Monospace-Optik wie die Slider-Hinweise auf /referenzen/. */
.photo-band { position: relative; overflow: hidden; height: 46vh; min-height: 320px; max-height: 560px; }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bewusst fest dunkel statt var(--ink) -- eine Bildunterschrift auf einem Foto
braucht immer denselben dunklen Schleier + helle Schrift, unabhaengig vom
Seiten-Theme (--ink kehrt sich im Hellmodus zu fast-weiss um, das wuerde den
Schleier hier ins Gegenteil verkehren). */
.photo-band-veil {
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(10,11,13,.82) 0%, transparent 42%);
}
.photo-band figcaption {
position: absolute; left: 24px; right: 24px; bottom: 16px; z-index: 1;
font-family: var(--mono); font-size: .78rem; color: rgba(255,255,255,.82);
}
@media (max-width: 640px) { .photo-band { height: 34vh; min-height: 240px; } }
/* Reveal on scroll */
.reveal {
opacity: 0; transform: translateY(18px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
transition-delay: var(--stagger, 0ms);
}
.reveal.in { opacity: 1; transform: translateY(0); }
/* Thesis / problem section */
.thesis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
@media (max-width: 900px) { .thesis-grid { grid-template-columns: 1fr; } }
.thesis-item { border-top: 1px solid var(--line); padding-top: 24px; }
.thesis-item .role { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fg, var(--accent)); margin-bottom: 12px; display: block; }
.thesis-item h3 { font-size: 1.1rem; margin-bottom: 10px; font-weight: 600; }
.thesis-item p { font-size: .92rem; }
/* Delta-E precision section */
.precision { background: var(--ink-2); }
.precision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
@media (max-width: 900px) { .precision-grid { grid-template-columns: 1fr; gap: 50px; } }
/* ============================================================
ΔE-Demonstrator (echt, spielbar) -- ersetzt das fruehere rein
dekorative Rund-Instrument. site.js (initDeltaEDemo) berechnet den
tatsaechlichen CIEDE2000-Abstand zwischen der fixen Bestandsfarbe und
der per Regler verschobenen Reparaturfarbe in Echtzeit.
============================================================ */
.de-demo {
background: linear-gradient(155deg, #2c3034 0%, #1d1f22 100%);
border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-card);
padding: clamp(28px,3.4vw,44px); box-shadow: var(--shadow-lg);
}
.de-demo-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 28px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.de-swatch {
aspect-ratio: 4/3; display: flex; flex-direction: column; justify-content: flex-end;
padding: 14px 16px; position: relative; overflow: hidden;
background: #383e42; /* flache Flaeche, kein Glanz-Overlay (Rueckbau nach Live-Feedback) -- Fallback, wird von site.js sofort per JS gesetzt */
}
.de-swatch-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.95); text-shadow: 0 1px 4px rgba(0,0,0,.7); position: relative; }
.de-swatch-ral { font-family: var(--mono); font-size: .62rem; color: rgba(255,255,255,.68); margin-top: 2px; text-shadow: 0 1px 4px rgba(0,0,0,.7); position: relative; }
#deSwatchRepair { cursor: ew-resize; touch-action: none; }
#deSwatchRepair::after {
content: "⇆"; position: absolute; top: 12px; right: 14px; color: rgba(255,255,255,.6); font-size: .95rem; z-index: 1;
}
.de-demo-readout {
display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; flex-wrap: wrap;
}
.de-demo-readout .val { font-family: var(--mono); font-size: 3.1rem; font-weight: 500; color: #fbfbfa; font-variant-numeric: tabular-nums; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.de-demo-readout .unit { font-size: 1.15rem; color: var(--steel); margin-left: 4px; }
.de-demo-readout.over .unit, .de-demo-readout.over #deVal { color: var(--accent-bright); text-shadow: 0 2px 24px rgba(255,47,61,.45); }
.de-demo-readout .cap { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,245,243,.6); }
.de-demo-control { display: block; margin-bottom: 18px; }
.de-demo-control-label { display: block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(245,245,243,.75); margin-bottom: 12px; }
.de-demo-control input[type="range"] {
width: 100%; appearance: none; -webkit-appearance: none; height: 4px;
background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.1)); border-radius: 4px; outline-offset: 6px;
}
.de-demo-control input[type="range"]::-webkit-slider-thumb {
appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--accent-bright), var(--accent) 70%);
border: 3px solid #f5f5f3; cursor: pointer; box-shadow: 0 6px 18px -2px rgba(0,0,0,.55), 0 0 0 6px rgba(255,47,61,.14);
}
.de-demo-control input[type="range"]::-moz-range-thumb {
width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid #f5f5f3; cursor: pointer;
}
.de-demo-hint { font-size: .82rem; color: rgba(245,245,243,.55); margin: 0; max-width: 60ch; }
@media (max-width: 560px) { .de-demo-swatches { grid-template-columns: 1fr; } }
/* Leistungen */
.service-list { margin-top: 50px; border-top: 1px solid var(--line); }
.service-row {
display: grid; grid-template-columns: 220px 1fr 90px; gap: 30px; align-items: baseline;
padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding-left .25s var(--ease);
}
.service-row:hover { padding-left: 10px; }
.service-row h3 { font-size: 1.1rem; font-weight: 600; }
.service-row p { font-size: .9rem; margin: 0; max-width: 56ch; }
.service-row .idx { font-family: var(--mono); font-size: .78rem; color: var(--text-dim); text-align: right; }
.service-row a.more { font-size: .78rem; color: var(--accent-fg, var(--accent)); white-space: nowrap; }
@media (max-width: 760px) {
.service-row { grid-template-columns: 1fr; gap: 6px; }
.service-row .idx { display: none; }
}
.material-note { margin-top: 30px; font-size: .9rem; }
.material-note b { color: var(--text); font-weight: 600; }
/* Process */
.process { background: var(--ink-2); }
.process-list { margin-top: 56px; display: grid; gap: 0; }
.process-row { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 30px; padding: 30px 0; border-top: 1px solid var(--line); }
.process-row:last-child { border-bottom: 1px solid var(--line); }
.process-row .num { font-family: var(--mono); font-size: 1rem; color: var(--accent-fg, var(--accent)); }
.process-row h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.process-row p { font-size: .88rem; margin: 0; }
.process-row .tag { font-family: var(--mono); font-size: .7rem; color: var(--text-dim); align-self: center; text-align: right; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 760px) {
.process-row { grid-template-columns: 40px 1fr; }
.process-row .tag { display: none; }
}
/* Advantage */
.adv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin-top: 50px; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.adv-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .adv-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .adv-grid, .adv-grid-3 { grid-template-columns: 1fr; } }
.adv-item { background: var(--ink); padding: 34px; }
.adv-item h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; }
.adv-item p { font-size: .9rem; margin: 0; }
/* Referenzen-Teaser auf der Startseite: echte Fallfotos statt reinem Textlink */
.case-teaser-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.case-teaser-item { background: var(--ink); display: block; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: border-color .25s, transform .25s; }
.case-teaser-item:hover { border-color: var(--line-2); transform: translateY(-2px); }
.case-teaser-item img { width: 100%; height: 230px; object-fit: cover; display: block; }
.case-teaser-item .ct-body { padding: 22px 26px; }
.case-teaser-item .ct-tag { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.case-teaser-item h3 { font-size: 1.02rem; font-weight: 600; margin: 8px 0 6px; }
.case-teaser-item p { font-size: .88rem; margin: 0; }
@media (max-width: 760px) { .case-teaser-grid { grid-template-columns: 1fr; } }
/* ===== Ergebnis / Vorher-Nachher (echte Fotos) ===== */
.cmp { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(34px,5vw,80px); align-items: center; }
@media (max-width: 900px) { .cmp { grid-template-columns: 1fr; } .cmp .txt { order: -1; } }
.ba {
position: relative; aspect-ratio: 5/4; border-radius: var(--radius-card); overflow: hidden; user-select: none;
touch-action: none; cursor: ew-resize; border: 1px solid var(--line); box-shadow: 0 50px 80px -40px rgba(0,0,0,.6);
}
/* War frueher ein leeres
je Haelfte mit background-image -- jetzt ein
echtes ![]()
mit Alt-Text (Regel A), Bildinhalt bleibt identisch. */
.ba .surf {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ba .surf-before, .ba .surf-photo.before { -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); transition: clip-path .1s linear; }
.ba.dragging .surf-before, .ba.dragging .surf-photo.before { transition: none; }
/* Safari (macOS) flackerte beim aktiven Ziehen: native Bild-Drags/Markierung
unterbinden und die bewegten Bildebenen stabil komponieren. Nur Slider-Scope. */
.ba, .ba img, .ba picture { -webkit-user-select: none; user-select: none; }
.ba img { -webkit-user-drag: none; }
.ba .surf, .ba .surf-photo { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* .reveal.in laesst sonst dauerhaft transform: translateY(0) stehen -- das haelt
den Slider in Safari in einer eigenen Compositing-Ebene. Nach dem Einblenden
wird der Transform beim Slider auf none gesetzt; die Einblend-Animation
(translateY(18px) -> none) bleibt unveraendert. */
.ba.reveal.in { transform: none; }
/* Echtes Draggen (site.js): .hd.left und der clip-path auf .surf-before
werden per Pointer-/Touch-Events live gesetzt, mit kurzer Transition fuer
Klicks/Tastatur und ohne Transition waehrend des aktiven Ziehens. */
.ba .hd {
position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--accent);
transform: translateX(-50%); z-index: 3; box-shadow: 0 0 16px var(--accent);
transition: left .1s linear;
}
.ba.dragging .hd { transition: none; }
.ba .hd .grip {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, var(--accent-bright), var(--accent) 75%);
display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--mono); font-size: 14px;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
box-shadow: var(--shadow-md), 0 0 0 4px rgba(255,255,255,.14);
}
.ba:hover .hd .grip, .ba.dragging .hd .grip { transform: translate(-50%,-50%) scale(1.12); }
.ba.dragging .hd .grip { box-shadow: var(--shadow-accent), 0 0 0 4px rgba(255,255,255,.2); }
.ba .lbl {
position: absolute; top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
background: rgba(0,0,0,.55); color: #fff; border: 1px solid var(--line-2); padding: 6px 10px; border-radius: 2px; z-index: 4;
}
.ba .lbl.l { left: 16px; } .ba .lbl.r { right: 16px; }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 5; pointer-events: none; }
.chk { display: grid; gap: 12px; margin-top: 20px; }
.chk > div { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--text); }
.chk svg { color: var(--accent); flex-shrink: 0; }
/* ===== Referenzen / Fallseiten — echte Fotos statt CSS-Hintergrund ===== */
.case-grid { display: grid; gap: clamp(56px,7vw,96px); margin-top: 10px; }
/* Fall-Ueberschrift ist semantisch h2 (keine Ebene ueberspringen), behaelt aber
die urspruengliche h3-Groesse — die Faelle sind der H1 untergeordnet, sollen
sie optisch aber nicht ueberstrahlen. */
.case-title { font-size: 1.17rem; }
.case-card { border-top: 1px solid var(--line); padding-top: clamp(34px,4vw,54px); }
.case-card:first-child { border-top: none; padding-top: 0; }
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case-tag {
font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
border: 1px solid var(--line-2); border-radius: 2px; padding: 4px 9px; color: var(--text-dim);
}
.case-tag.case-date { border-color: var(--accent); color: var(--accent-fg, var(--accent)); }
.case-tag.case-date time { text-transform: none; letter-spacing: normal; }
/* Text zuerst, Bilder danach (Nutzerwunsch 06.08.) -- kein Nebeneinander mehr
wie zuvor mit .cmp, sondern gestapelt: Textblock, dann Vergleichsbild(er),
dann ggf. zusaetzliche Detailfotos. Bildbreite gedeckelt, sonst wirken die
Kacheln auf breiten Desktop-Viewports wieder zu dominant. */
.case-card .txt { max-width: 62ch; margin-bottom: 24px; }
.case-card .case-media { max-width: 640px; }
/* Referenzen-Fotos einheitlich 5:4 (Querformat), auf Nutzerwunsch (06.08.) --
vorher 4:5 Hochformat, wirkte auf Desktop zu gross/unruhig. object-fit: cover
schneidet hochkant aufgenommene Fotos (Handyfotos) oben/unten leicht an. */
.ba.case-slider { aspect-ratio: 5/4; }
.case-slider .surf-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.case-slider .surf-photo.before { -webkit-clip-path: inset(0 50% 0 0); clip-path: inset(0 50% 0 0); }
/* Immer zweispaltig und im festen 5:4-Format -- kompakter und einheitlicher als
die vorherige einspaltige Loesung mit natuerlichem Seitenverhaeltnis, die auf
Desktop je nach Fotoformat sehr grosse, uneinheitliche Kacheln erzeugte. */
.case-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; max-width: 640px; }
.case-gallery figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; position: relative; }
.case-gallery img { width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; display: block; }
.case-gallery figcaption {
position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--mono); font-size: .72rem;
padding: 6px 10px; color: #fff; background: rgba(0,0,0,.55);
}
@media (max-width: 640px) { .case-gallery { grid-template-columns: 1fr; } }
.case-note { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--text-dim); }
/* ===== Geo-Map (1:1 übernommen, umgefärbt auf neue Palette) ===== */
.geo-map { max-width: 660px; margin: 34px auto 10px; aspect-ratio: 620/520; }
.geo-map svg { width: 100%; height: 100%; display: block; overflow: visible; }
.geo-sea { fill: #dbe4ea; }
:root[data-theme="dark"] .geo-sea { fill: #1b2124; }
.geo-grid-dot { fill: var(--line); }
.geo-compass-mark { stroke: var(--text-dim); fill: var(--text-dim); }
.geo-coast { fill: none; stroke: #616b70; stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.geo-a1 { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.geo-a1-label { font-family: var(--mono); font-size: 10px; fill: var(--accent-fg, var(--accent)); letter-spacing: .15em; opacity: .85; }
.geo-connector { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: .45; }
.geo-city-dot { fill: var(--ink-2); stroke: var(--text-dim); stroke-width: 1.5; }
.geo-city-label { font-family: var(--mono); font-size: 12px; fill: var(--text-dim); letter-spacing: .02em; }
.geo-hub-glow { fill: url(#hubGlow); }
.geo-hub-dot { fill: var(--accent); }
.geo-hub-pulse { fill: none; stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: geopulse 2.6s ease-out infinite; }
.geo-hub-label { font-family: var(--mono); font-size: 14px; font-weight: 700; fill: #fff; letter-spacing: .05em; }
.geo-sea-label { font-family: var(--mono); font-size: 11px; fill: #4d585d; letter-spacing: .22em; }
.geo-compass-label { font-family: var(--mono); font-size: 10px; fill: var(--text-dim); }
.geo-city-link { cursor: pointer; }
/* unsichtbare Trefferfläche: hebt den Tap-Target auf >= 24px (WCAG 2.5.8) */
.geo-hit { fill: transparent; }
.geo-city-link .geo-city-dot { transition: r .15s ease, fill .15s ease; }
.geo-city-link .geo-city-label { transition: fill .15s ease; }
.geo-city-link:hover .geo-city-dot { r: 6; fill: var(--accent); stroke: var(--accent); }
.geo-city-link:hover .geo-city-label { fill: var(--accent); font-weight: 700; }
@keyframes geopulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .geo-hub-pulse { animation: none; opacity: 0; } }
@media (max-width: 560px) { .geo-city-label, .geo-hub-label { font-size: 14px; } .geo-sea-label { font-size: 13px; } }
.cities { display: flex; flex-wrap: wrap; gap: 10px; }
.cities span { font-family: var(--mono); font-size: 13.5px; color: var(--text); background: var(--ink-2); border: 1px solid var(--line); border-radius: 30px; padding: 9px 18px; }
.cities-note { margin-top: 18px; font-size: 14.5px; color: var(--text-dim); max-width: 70ch; }
.sectors { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
@media (max-width: 900px) { .sectors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sectors { grid-template-columns: 1fr; } }
.sector { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 30px 26px; transition: background .35s, border-color .35s, transform .35s; }
.sector:hover { background: var(--ink-2); border-color: var(--line-2); transform: translateY(-4px); }
.sector .n { font-family: var(--mono); font-size: 12px; color: var(--accent-fg, var(--accent)); margin-bottom: 16px; }
.sector h3 { font-size: 18px; margin-bottom: 8px; }
.sector p { font-size: 14px; color: var(--text-dim); }
/* ===== 3D Panel exploded view (used on /wissen/ subpage) ===== */
.thesis-big { font-size: clamp(1.35rem,2.7vw,2.0rem); font-weight: 600; letter-spacing: -.01em; max-width: 24ch; margin-bottom: 10px; }
.thesis-big .dim { color: var(--text-dim); font-weight: 500; }
.thesis-big .accent { color: var(--accent); }
.thesis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; margin-top: 60px; }
.thesis-row-asym { grid-template-columns: .9fr 1.1fr; }
@media (max-width: 900px) { .thesis-row, .thesis-row-asym { grid-template-columns: 1fr; gap: 40px; } }
.p3-scene { perspective: 1100px; display: flex; flex-direction: column; align-items: center; gap: clamp(70px,9vw,100px); padding-top: 20px; }
.p3-obj {
position: relative; width: min(320px,68vw); height: 210px; transform-style: preserve-3d;
transform: rotateX(58deg) rotateZ(-38deg); animation: p3sway 10s ease-in-out infinite;
}
@keyframes p3sway { 0%,100% { transform: rotateX(58deg) rotateZ(-38deg); } 50% { transform: rotateX(55deg) rotateZ(-34deg); } }
@media (prefers-reduced-motion: reduce) { .p3-obj { animation: none; } }
.p3l { position: absolute; left: 50%; top: 50%; width: 100%; height: 170px; margin: -85px 0 0 -50%; transform-style: preserve-3d; transform: translateZ(var(--tz,0px)); }
.p3l.a { --tz: 105px; background: repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.45) 48px,rgba(255,255,255,.10) 50px,transparent 52px),linear-gradient(150deg,#464e55,#383e42); }
.p3l.a::before { --th: 5px; background: #1f2529; }
.p3l.a::after { --th: 5px; background: #262c31; }
.p3l.c { --tz: 0px; background: linear-gradient(150deg,#eee2a9,#ddcd8d); }
.p3l.c::before { --th: 14px; background: linear-gradient(#c9b87e,#b6a56c); }
.p3l.c::after { --th: 14px; background: linear-gradient(#d8c98a,#c2b06e); }
.p3l.b { --tz: -90px; background: repeating-linear-gradient(90deg,#f0f2f3 0 7px,#c6cbcf 7px 13px,#8f959a 13px 19px,#d6d9db 19px 32px); }
.p3l.b::before { --th: 5px; background: #9aa0a4; }
.p3l.b::after { --th: 5px; background: #a7abac; }
.p3l::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--th,8px); transform-origin: top; transform: rotateX(-90deg); background: rgba(0,0,0,.5); }
.p3l::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: var(--th,8px); transform-origin: left; transform: rotateY(90deg); background: rgba(0,0,0,.42); }
.p3-dot { position: absolute; top: 32%; left: 58%; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); transform: translateZ(2px); }
.p3-legend { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--text-dim); }
.p3-legend span { display: flex; align-items: center; gap: 11px; }
.p3-legend i { width: 15px; height: 15px; border-radius: 3px; flex: 0 0 auto; border: 1px solid var(--line-2); }
.p3-legend .rd { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 0 0 4px var(--accent-soft); }
.p3-legend b { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .p3-obj { height: 180px; } .p3l { height: 145px; margin-top: -72px; } }
/* Coverage secondary list (used alongside map) */
.city-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.city-list li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.city-list li span:last-child { color: var(--text-dim); font-family: var(--mono); font-size: .78rem; }
/* FAQ */
/* Aufzaehlungen im Fliesstext (Wissensartikel) */
.prose-list { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 14px; max-width: 70ch; }
.prose-list li { padding-left: 24px; position: relative; font-size: .95rem; color: var(--text-dim); line-height: 1.6; }
.prose-list li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--accent-fg, var(--accent)); font-family: var(--mono); }
.prose-list li b { color: var(--text); font-weight: 600; }
.prose-list.numbered { counter-reset: pl; }
.prose-list.numbered li { counter-increment: pl; }
.prose-list.numbered li::before { content: counter(pl) "."; font-family: var(--mono); }
.callout { font-size: .82rem; color: var(--text-dim); background: var(--ink-2); border-radius: var(--radius); padding: 14px 18px; margin: 22px 0; max-width: 70ch; border-left: 2px solid var(--accent); }
.compare-table-wrap { overflow-x: auto; margin: 26px 0; max-width: 70ch; }
.compare-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table thead th { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-weight: 600; }
.compare-table tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }
.compare-table tbody tr:last-child td, .compare-table tbody tr:last-child th { border-bottom: none; }
/* Kurzantwort direkt unter der H1 — fuer Mensch und KI-Suche eigenstaendig lesbar */
.article-summary { font-size: 1.05rem; line-height: 1.6; color: var(--text); background: var(--ink-2); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 18px 22px; margin: 24px 0 8px; max-width: 70ch; }
.article-dateline { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--text-dim); margin: 10px 0 0; }
.article-dateline time { color: var(--text-dim); }
.faq-list { margin-top: 40px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 1.02rem; font-weight: 600; color: var(--text); gap: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); font-size: 1.3rem; color: var(--accent-fg, var(--accent)); font-weight: 400; flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .a { padding-bottom: 26px; font-size: .92rem; max-width: 68ch; }
/* Contact */
.contact { background: var(--ink-2); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; margin-top: 50px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-info dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; margin: 0; }
@media (max-width: 900px) { .contact-info dl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .contact-info dl { grid-template-columns: 1fr; } }
.contact-info dt { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 6px; }
.contact-info dd { margin: 0; font-size: 1rem; color: var(--text); }
.contact-info dd a { border-bottom: 1px solid var(--line); display: inline-flex; align-items: center; min-height: 24px; }
.note a { display: inline-flex; align-items: center; min-height: 24px; }
.contact-info dd a:hover { border-color: var(--accent); color: var(--accent-fg, var(--accent)); }
form.lead-form { display: grid; gap: 18px; }
/* Honeypot: aus dem Sichtfeld geschoben statt display:none — einfache Bots
fuellen es trotzdem aus, Screenreader ueberspringen es per aria-hidden. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.field input, .field select, .field textarea {
background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--text);
padding: 10px 2px; font-family: var(--sans); font-size: .96rem; transition: border-color .2s;
}
/* Vormals "outline: none" mit blossem Rahmenfarbwechsel — fuer Tastaturnutzer
kaum erkennbar. Jetzt zusaetzlich ein deutlicher Ring (WCAG 2.4.7). */
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent-fg, var(--accent)); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: 2px solid var(--accent-fg, var(--accent));
outline-offset: 2px;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input[type="file"] { border: 1px dashed var(--line); border-radius: var(--radius); padding: 14px 10px; font-size: .86rem; cursor: pointer; }
.field input[type="file"]::file-selector-button {
background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
padding: 6px 14px; margin-right: 12px; font-family: var(--sans); font-size: .8rem; cursor: pointer;
}
.field-hint { font-size: .74rem; color: var(--text-dim); margin: 0; }
.field-check { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; }
.field-check input[type="checkbox"] {
width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent);
}
.field-check label {
text-transform: none; font-family: var(--sans); font-size: .85rem; letter-spacing: normal;
color: var(--text); font-weight: 400;
}
.field-check label a { color: var(--accent-fg, var(--accent)); border-bottom: 1px solid currentColor; }
.note { font-size: .78rem; color: var(--text-dim); background: var(--ink-3); border-radius: var(--radius); padding: 10px 14px; margin-top: 4px; }
.wa-float {
position: fixed; bottom: 26px; right: 26px; z-index: 200; width: 54px; height: 54px; border-radius: 50%;
background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 1.4rem;
box-shadow: 0 12px 28px rgba(0,0,0,0.35); transition: transform .2s var(--ease);
}
.wa-float:hover { transform: scale(1.06); }
/* Footer ist immer dunkel, unabhaengig vom Hell/Dunkel-Toggle der Seite —
deshalb feste Hex-Werte statt --ink/--text (die sich sonst mit dem
Modus umfaerben wuerden und auf dem dunklen Foto unlesbar waeren). */
footer.site-footer {
position: relative; overflow: hidden; padding: 60px 0 40px; color: #e8e7e4;
background-color: #2b2d30;
background-image: linear-gradient(180deg, rgba(32,33,35,.90) 0%, rgba(32,33,35,.96) 100%), url('img/lackierpistole-explosionszeichnung.jpg');
background-size: cover; background-position: center;
}
footer.site-footer p { color: #a3a6a8; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .logo-full { width: 220px; height: 25.1px; } }
.footer-grid .footer-head { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #a3a6a8; margin: 0 0 16px; font-weight: 600; max-width: none; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* min. 24px Trefferfläche (WCAG 2.5.8 / Google Mobile Usability) */
.footer-grid a { font-size: .88rem; color: #a3a6a8; display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; }
.footer-grid a:hover { color: #e8e7e4; }
.footer-bottom { border-top: 1px solid #3a3d41; margin-top: 40px; padding-top: 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; font-size: .78rem; color: #a3a6a8; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 24px; }
.footer-bottom-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; }
.footer-social { display: flex; justify-content: center; gap: 10px; }
.footer-social .social-icon {
width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
background: #24272a; border: 1px solid #3a3d41; color: #a3a6a8;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.footer-social a.social-icon:hover { background: #e21b23; color: #fff; border-color: #e21b23; }
.footer-social span.social-icon.is-disabled { opacity: .38; cursor: default; }
@media (prefers-reduced-motion: reduce) {
.reveal { transition: none; opacity: 1; transform: none; }
.scroll-cue .line::after { animation: none; }
.hero-canvas { transform: none !important; }
.precision-instrument::before, .precision-instrument.sweep .readout .val { animation: none; opacity: 0; }
.case-teaser-item:hover, .city-card:hover, .sector:hover { transform: none; }
.btn-primary:hover { transform: none; }
}
/* ============================================================
Serie-Index (Stadtseiten / Schadensart-Seiten): macht sichtbar, dass
diese Seiten Teil eines Systems sind ("STADT 03/09") -- Layout-
Differenzierung nach Seitentyp statt eines einzigen Templates.
============================================================ */
.series-index {
display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono);
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
margin-bottom: 14px;
}
.series-index b { color: var(--accent); font-weight: 700; }
.series-index .track {
display: inline-block; width: 60px; height: 3px; background: var(--line); position: relative; border-radius: 2px; overflow: hidden;
}
.series-index .track i { position: absolute; inset: 0; width: var(--p, 0%); background: var(--accent); border-radius: 2px; }
/* Corrosivity indicator (city pages) */
.corrosivity { display: flex; align-items: center; gap: 18px; margin: 26px 0; }
.corrosivity .scale { display: flex; gap: 3px; }
.corrosivity .scale i { width: 22px; height: 10px; border-radius: 2px; background: var(--line); }
.corrosivity .scale i.on { background: var(--accent); }
.corrosivity .label { font-family: var(--mono); font-size: .76rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.corrosivity .label b { color: var(--text); font-weight: 700; }
.city-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 44px; }
@media (max-width: 900px) { .city-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .city-grid { grid-template-columns: 1fr; } }
.city-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; transition: background .3s, border-color .3s, transform .3s; display: block; }
.city-card:hover { background: var(--ink-2); border-color: var(--line-2); transform: translateY(-4px); }
.city-card .dist { font-family: var(--mono); font-size: .7rem; color: var(--text-dim); margin-bottom: 10px; }
.city-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.city-card p { font-size: .86rem; margin: 0; }
.city-card .cat { display: inline-block; margin-top: 12px; font-family: var(--mono); font-size: .68rem; color: var(--accent-fg, var(--accent)); border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; }
/* ============================================================
Tiefe/Materialitaet: weiche, mehrschichtige Schatten + dezenter Lift
beim Hover statt der fruehen harten Pixel-Versatz-Schatten (wirkten wie
Retro-UI/"Windows 98"). Karten heben sich beim Hover leicht an, statt
sich wie ein gedrueckter Button zu verschieben.
============================================================ */
.case-teaser-item, .city-card, .sector, .adv-item, .case-gallery figure {
border-width: 1px; box-shadow: var(--shadow-sm);
transition: box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.ba { border-width: 1px; }
.case-teaser-item:hover, .city-card:hover, .sector:hover {
box-shadow: var(--shadow-md);
border-color: var(--steel);
transform: translateY(-4px);
}
.btn-primary {
border-radius: var(--radius);
box-shadow: var(--shadow-md);
transition: box-shadow .25s var(--ease), transform .25s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn-primary:hover { box-shadow: var(--shadow-accent); transform: translateY(-2px); }
.btn-ghost { border-radius: var(--radius); transition: border-color .2s var(--ease), transform .2s var(--ease); }
.btn-ghost:hover { transform: translateY(-2px); }
.skip-link { border-radius: var(--radius); }
/* Absenden-Button im Schadensformular: dezenter, dauerhafter Puls-Ring statt
echtem Blinken (Opazitaets-Flackern waere ein WCAG-Risiko bei laengerer
Anzeigedauer) -- macht den finalen Schritt trotzdem gut sichtbar. */
#submitBtn { animation: submitPulse 2.4s ease-in-out infinite; }
#submitBtn:hover, #submitBtn:focus-visible { animation-play-state: paused; }
@keyframes submitPulse {
0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(var(--pulse-rgb),.4); }
50% { box-shadow: var(--shadow-md), 0 0 0 9px rgba(var(--pulse-rgb),0); }
}
@media (prefers-reduced-motion: reduce) {
#submitBtn { animation: none; }
}
/* Kennzahlen-Band (#kennzahlen): drei Werte, die beim erstmaligen
Sichtbarwerden einmal hochzaehlen (Logik in site.js, respektiert
prefers-reduced-motion). Die Endwerte stehen vollstaendig im HTML, das
Layout ist rein CSS -- ohne JavaScript bleibt der Block unveraendert
korrekt stehen. Kartenrahmen und Innenabstand entsprechen bewusst
.sector, damit sich der Block in die bestehende Kartensprache einfuegt;
der Hover-Lift entfaellt, weil die Kacheln nicht interaktiv sind. */
.stat-grid {
list-style: none; margin: 30px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.stat-item {
border: 1px solid var(--line); border-radius: var(--radius-card); padding: 30px 26px;
/* Eigene Flaeche statt transparent: hebt die Kennzahlen vom Seiten-
hintergrund ab. --ink-2 ist der bereits etablierte "angehobene" Ton
(u. a. .sector:hover, .callout) und traegt in hell wie dunkel. */
background: var(--ink-2);
}
/* Zahlen in der Display-Schrift der Ueberschriften statt im Mono-Stack: der
breite ExtraBold-Schnitt wirkt plakativ statt technisch-trocken und bindet
den Block an die Typografie der Seite. Die Datei ist bereits fuer die
Ueberschriften geladen (preload im ), also kein zusaetzlicher Request.
Nur wght 800 vorhanden -- deshalb exakt 800, keine synthetische Fettung. */
.stat-num {
display: block;
font-family: 'Archivo Wide Display', var(--sans);
font-variant-numeric: tabular-nums;
font-size: clamp(2.3rem, 4.8vw, 3.3rem); font-weight: 800;
line-height: 1; letter-spacing: -.01em; color: var(--text);
}
.stat-label {
display: block; margin-top: 14px;
font-size: 14px; line-height: 1.5; color: var(--text-dim); text-wrap: balance;
}
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; } }
/* ===== Kontaktformular (vormals eingebettet in /kontakt/, verschoben 03.10.2026) ===== */
/* Schadensmeldungs-Formular: nutzt jetzt konsequent die globalen
Design-Tokens aus assets/styles.css (--text, --ink-2, --line, --accent,
--shadow-*, --radius) statt eines eigenen, invertierten Farbschemas -
damit die Seite optisch zum Rest der Website passt und die volle
Section-Breite tragen kann (kein schmaler "Papier"-Kartenblock mehr). */
.schaden-page{
padding: 8px 0 100px;
}
.schaden-page *{ box-sizing:border-box; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.form-page-title{
font-family:var(--sans); font-weight:800;
font-size:clamp(1.6rem, 3.2vw, 2.3rem);
letter-spacing:-0.02em; line-height:1.1; margin:0 0 10px; color:var(--text);
}
.form-page .sub{ color:var(--text-dim); font-size:1rem; margin:0 0 32px; max-width:62ch; }
/* Ausweg fuer Nutzer mit bereits fertigem PDF: bewusst dezent (gleiche
ruhige Textlink-Optik wie .f-btn-text), aber ganz oben auf Seite 1
platziert - direkt sichtbar, per gestrichelter Trennlinie optisch vom
primären Kachel-Weg abgesetzt, damit beides nicht verwechselt wird. */
.skip-hint{
margin:-8px 0 28px; padding-bottom:18px; border-bottom:1px dashed var(--line);
}
.skip-hint .f-btn-text{ padding:0; }
.form-page.hidden{ display:none; }
/* ---- Schadenskacheln (Seite 1) ---- */
.damage-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
gap:18px;
margin-bottom:36px;
}
.damage-tile{
border:1px solid var(--line); border-radius:var(--radius);
background:var(--ink-2); padding:20px 20px 18px;
box-shadow:var(--shadow-sm);
transition:box-shadow .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.damage-tile:hover{ box-shadow:var(--shadow-md); border-color:var(--steel); transform:translateY(-3px); }
.damage-tile.active{ border-color:var(--accent); box-shadow:var(--shadow-accent); }
.damage-tile-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.damage-tile-top .icon{ width:26px; height:26px; flex:0 0 auto; color:var(--accent-fg, var(--accent)); }
.damage-tile-top .icon svg{ display:block; width:100%; height:100%; }
.damage-tile-label{ font-weight:700; font-size:.96rem; color:var(--text); line-height:1.25; }
.qty-stepper{
display:inline-flex; align-items:stretch; border:1px solid var(--line);
border-radius:999px; overflow:hidden; width:fit-content;
}
.qty-btn{
width:36px; height:36px; border:none; background:transparent; color:var(--text);
font-size:1.15rem; line-height:1; cursor:pointer; display:grid; place-items:center;
transition:background .15s ease, color .15s ease;
}
.qty-btn:hover:not(:disabled){ background:var(--accent-soft); color:var(--accent-fg, var(--accent)); }
.qty-btn:disabled{ opacity:.35; cursor:not-allowed; }
.qty-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.qty-input{
width:48px; text-align:center; border:none; height:36px;
border-left:1px solid var(--line); border-right:1px solid var(--line);
background:transparent; color:var(--text); font-family:var(--mono);
font-size:1rem; font-weight:700; padding:0; -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty-input:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.tile-extra{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.tile-extra.hidden{ display:none; }
.tile-note-toggle{
background:none; border:none; color:var(--text-dim); text-decoration:underline;
font-family:var(--sans); font-size:.82rem; cursor:pointer; padding:4px 0;
}
.tile-note-toggle:hover{ color:var(--text); }
.tile-note-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tile-note-field{ margin-top:10px; }
.tile-note-field.hidden{ display:none; }
.tile-note-field textarea{ min-height:56px; }
/* ---- Allgemeine Höhen-/RAL-Angabe (gilt fuer die ganze Meldung, nicht
mehr pro Kachel) sowie die laufende Zusammenfassung - alle drei nutzen
dieselbe Karten-Optik wie .ticket-summary. ---- */
.option-block{
border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2);
padding:22px 24px; box-shadow:var(--shadow-sm);
display:flex; flex-direction:column;
}
/* Höhe + RAL nebeneinander, gleich breit, gleich hoch - der Container
stretcht beide Karten auf die Höhe des höheren Inhalts (RAL hat durch
die 2 Freitextfelder mehr Inhalt als die reine Höhenangabe). */
.option-grid-2{
display:grid; grid-template-columns:1fr 1fr; gap:24px;
align-items:stretch; margin-bottom:24px;
}
@media (max-width:900px){ .option-grid-2{ grid-template-columns:1fr; gap:16px; } }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.height-chip{
font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
border:1px solid var(--line); background:transparent; color:var(--text-dim);
border-radius:999px; padding:8px 14px; cursor:pointer;
transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.height-chip:hover{ border-color:var(--steel); color:var(--text); }
.height-chip.selected{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-fg, var(--accent)); }
.height-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ral-custom-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.ral-custom-row .f-field{ margin-bottom:0; }
@media (max-width:560px){ .ral-custom-row{ grid-template-columns:1fr; } }
/* ---- Laufende Zusammenfassung ("Ticket") ---- */
.ticket-summary{
border:1px solid var(--line); border-radius:var(--radius); background:var(--ink-2);
padding:22px 24px; margin-bottom:36px; box-shadow:var(--shadow-sm);
}
.ticket-summary-title{
font-family:var(--sans); font-weight:700; font-size:.95rem; margin:0 0 10px; color:var(--text);
}
.ticket-meta{
margin:14px 0 0; font-family:var(--mono); font-size:.78rem; color:var(--text-dim);
}
.ticket-meta.hidden{ display:none; }
.ticket{ border-top:1px solid var(--line); }
.ticket-row{
display:flex; align-items:center; gap:14px; padding:12px 2px;
border-bottom:1px solid var(--line); animation:seam-in .25s ease;
}
@media (prefers-reduced-motion: reduce){ .ticket-row{ animation:none; } }
.ticket-row .left{ flex:1 1 auto; min-width:0; }
.ticket-row .height-tag{
flex:0 0 auto; font-family:var(--mono); font-size:12px; color:var(--text-dim);
text-align:right; white-space:nowrap;
}
@keyframes seam-in{
from{ opacity:0; transform:translateY(-4px); }
to{ opacity:1; transform:translateY(0); }
}
.ticket-row .meta{ font-family:var(--sans); font-weight:700; font-size:15px; color:var(--text); }
.ticket-row .f-note{
display:block; font-family:var(--sans); font-weight:400; font-size:13px;
color:var(--text-dim); margin-top:2px;
}
.ticket-row .qty{ font-family:var(--mono); color:var(--accent-fg, var(--accent)); margin-right:2px; }
.ticket-remove{
border:none; background:none; color:var(--text-dim); font-size:20px; line-height:1;
cursor:pointer; padding:4px 6px;
}
.ticket-remove:hover{ color:var(--accent-fg, var(--accent)); }
.ticket-remove:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ticket-empty{ padding:14px 2px; color:var(--text-dim); font-size:14px; border-bottom:1px solid var(--line); }
/* ---- Formularfelder allgemein (Seite 2) ---- */
.schaden-page label{ display:block; font-size:.82rem; font-weight:600; margin:0 0 6px; color:var(--text); }
.schaden-page input[type="number"],
.schaden-page input[type="text"],
.schaden-page input[type="email"],
.schaden-page input[type="tel"],
.schaden-page textarea{
width:100%; border:1px solid var(--line); border-radius:var(--radius);
padding:12px 12px; font-family:var(--sans); font-size:.95rem;
color:var(--text); background:var(--ink-2);
}
.schaden-page input:focus-visible, .schaden-page textarea:focus-visible{
outline:2px solid var(--accent); outline-offset:1px;
}
.schaden-page textarea{ resize:vertical; min-height:70px; }
.f-field{ margin-bottom:16px; }
.checkbox-field{ display:flex; align-items:flex-start; gap:10px; }
.checkbox-field input[type="checkbox"]{
width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent); flex:0 0 auto;
}
.checkbox-field label{ font-weight:500; font-size:14px; margin:0; cursor:pointer; }
.checkbox-field a{ color:var(--text); }
.f-btn-text{
background:none; border:none; color:var(--text-dim); text-decoration:underline;
font-family:var(--sans); font-weight:500; font-size:14px; cursor:pointer; padding:12px 4px;
}
.f-btn-text:hover{ color:var(--text); }
.f-btn-text:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.f-btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.f-btn-row.page-nav{ margin-top:6px; }
.group-heading{
font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
color:var(--accent-fg, var(--accent)); margin:28px 0 16px; padding-top:20px;
border-top:1px solid var(--line);
}
.group-heading:first-of-type{ margin-top:0; padding-top:0; border-top:none; }
.badge-optional{
display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-dim); border:1px solid var(--line);
border-radius:2px; padding:2px 8px; margin-left:8px; vertical-align:middle;
}
/* ---- Seite 2: zweispaltiges Layout ---- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 48px; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; gap:0; } }
.file-drop{
display:block; width:100%; border:1px dashed var(--line); border-radius:var(--radius);
padding:22px 16px; background:transparent; text-align:center; color:var(--text-dim);
font-family:var(--sans); font-size:14px; cursor:pointer;
}
.file-drop:hover{ border-color:var(--steel); color:var(--text); }
.file-drop:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
#fileInput{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.file-list{ margin-top:10px; font-size:13px; color:var(--text-dim); }
.f-field-hint{ margin:10px 0 0; font-size:12.5px; color:var(--text-dim); }
.f-field-hint a{ color:var(--text); }
.hidden{ display:none !important; }
.upload-progress{ margin-top:20px; }
.upload-progress-label{
display:flex; justify-content:space-between; font-family:var(--mono);
font-size:12.5px; color:var(--text-dim); margin-bottom:8px;
}
.upload-progress-track{ height:6px; background:var(--ink-3); border-radius:3px; overflow:hidden; }
.upload-progress-fill{
height:100%; width:0%; background:var(--accent); border-radius:3px; transition:width .15s linear;
}
.step-desc{ font-size:13.5px; color:var(--text-dim); margin:0 0 16px; max-width:60ch; }
/* ===== Ehemals redesign.css (zusammengeführt 03.10.2026, Reihenfolge unverändert) ===== */
/* Dellta-E · Visuelle Überarbeitung 2026
Inhalte und bestehende Interaktionen bleiben in den Originaldateien. */
:root {
--ink:#fff; --ink-2:#f2f3f2; --ink-3:#e7e9e7;
--text:#252a2b; --text-dim:#616768; --line:#d9ddda; --line-2:#aab2af;
--accent:#da0616; --accent-fg:#c70818; --accent-bright:#b90919;
--accent-soft:rgba(218,6,22,.045); --radius:2px; --radius-card:0px;
--sans:Arial,"Helvetica Neue",Helvetica,sans-serif; --mono:var(--sans);
--shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-accent:none;
--page-gutter:clamp(24px,4.45vw,72px); --page-width:1440px;
}
:root[data-theme="dark"] {
--ink:#202627; --ink-2:#2b3233; --ink-3:#394142;
--text:#f5f5f1; --text-dim:#bac2bf; --line:#48504d; --line-2:#7f8b86;
--accent:#ed2633; --accent-fg:#ff8088; --accent-bright:#ca1c29;
--shadow-sm:none; --shadow-md:none; --shadow-lg:none; --shadow-accent:none;
}
html {scroll-padding-top:110px}
body {font-size:16px;line-height:1.7;overflow-x:clip}
h1,h2,h3 {font-family:var(--sans);font-weight:400;letter-spacing:-.043em;line-height:1.08;text-wrap:pretty}
h3 {letter-spacing:-.025em;line-height:1.2}
p {line-height:1.75}
img:not(.no-grade),video:not(.no-grade) {filter:none}
.container {width:100%;max-width:var(--page-width);padding-inline:var(--page-gutter)}
section {padding:clamp(72px,8vw,124px) 0}
section:not(:last-of-type) {border-bottom:1px solid var(--line)}
h2.section-title {font-size:clamp(2.1rem,3.45vw,3.45rem);max-width:23ch}
.eyebrow {font-size:.8125rem;font-weight:500;letter-spacing:.12em;line-height:1.5;color:var(--text-dim);margin-bottom:24px}
.eyebrow::before {content:"";display:inline-block;width:22px;height:2px;background:var(--accent);margin:0 12px 4px 0}
.reveal,.reveal.in {opacity:1;transform:none;transition:none}
#siteHeader {background:var(--ink);backdrop-filter:none;border-bottom:1px solid var(--line)}
.nav-wrap {max-width:var(--page-width);padding:25px var(--page-gutter);gap:28px;min-height:92px}
.logo {border-radius:0;overflow:visible;flex-shrink:0}
.logo-mark {width:174px;height:auto}
nav.links {gap:clamp(16px,1.8vw,28px);margin-left:auto}
nav.links a {font-size:.875rem;white-space:nowrap}
nav.links a:hover,nav.links a.active {color:var(--accent-fg)}
.nav-cta {border-radius:2px;padding:11px 17px;font-weight:500;margin-left:6px;box-shadow:none}
.nav-cta:hover {transform:none;box-shadow:none}
.nav-right {gap:18px}
.theme-toggle-track {width:32px;height:32px;background:none;border:none;border-radius:0}
.theme-toggle-thumb,:root[data-theme="dark"] .theme-toggle-thumb {top:5px;left:5px;width:22px;height:22px;transform:none;background:none;color:var(--text);border-radius:0}
.burger {border:1px solid var(--line);border-radius:2px;min-width:42px;min-height:42px;font-size:24px;line-height:1}
.btn {font-family:var(--sans);font-size:.9375rem;font-weight:500;padding:14px 22px;min-height:52px;border-radius:2px;letter-spacing:0;line-height:1.4;box-shadow:none;transition:background .2s,border-color .2s,color .2s}
.btn-primary {box-shadow:none;background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover {background:var(--accent-bright);border-color:var(--accent-bright);box-shadow:none;transform:none}
.btn-ghost {background:transparent;border:1px solid var(--line-2)}
.btn-ghost:hover {transform:none;border-color:var(--text)}
#submitBtn {animation:none}
/* Startseite: gesetzte Typografie und eine eigenständige Fotofläche. */
.hero {position:relative;display:block;min-height:0;padding:154px 0 62px;overflow:hidden;background:var(--ink)}
.hero-content {z-index:1}
.hero-grid {display:block;width:55%;padding-right:40px}
.hero-grid>div:first-child {max-width:720px}
.hero-content .eyebrow {border:none;background:none;border-radius:0;padding:0;color:var(--text-dim);font-size:.75rem;letter-spacing:.09em;margin-bottom:34px}
.hero h1 {font-size:clamp(2.85rem,4.65vw,4.55rem);font-weight:400;line-height:1.035;letter-spacing:-.053em;margin-bottom:28px;max-width:17ch}
.hero .lede {font-size:1.0625rem;line-height:1.65;margin-bottom:30px;max-width:46ch}
.hero .actions {gap:14px;align-items:center}
.hero .btn-ghost {border:0;padding:8px 0;min-height:auto;font-size:.875rem;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--line-2)}
.hero-meta {display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:0;margin-top:46px}
.hero-meta .row {padding-top:14px;border-color:var(--line)}
.hero-meta .row .k {font-size:.75rem;letter-spacing:.02em;text-transform:none;margin-bottom:8px}
.hero-meta .row .v {font-size:.875rem;line-height:1.5;display:block}
.hero-canvas {position:absolute;inset:124px var(--page-gutter) 60px 57%;background:#e4e6e3;transform:none!important;will-change:auto;z-index:0}
.hero-photo {object-fit:cover;object-position:58% center}
.hero-veil {display:none}
.hero-video {display:none!important}
.scroll-cue {right:calc(var(--page-gutter) + 22px);left:auto;bottom:78px;transform:none;z-index:2;background:#fff;color:#252a2b;padding:10px 14px;font-size:12px;letter-spacing:.04em;gap:12px}
.scroll-cue .line {width:20px;height:1px;background:#252a2b}
.scroll-cue .line::after {display:none}
/* Bild und Text erhalten jeweils eine ungestörte Fläche. */
#entscheider {max-width:var(--page-width);margin-inline:auto;padding:100px var(--page-gutter);display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(44px,7vw,100px);overflow:visible}
#entscheider>picture {display:block;min-height:640px}
#entscheider .section-photo-bg {position:static;width:100%;height:100%;object-fit:cover;object-position:58% center}
#entscheider .section-photo-bg {object-position:right center}
#entscheider .section-photo-veil {display:none}
#entscheider>.container {padding:10px 0;width:auto}
#entscheider h2 {max-width:18ch!important}
.thesis-grid {display:grid;grid-template-columns:1fr;gap:24px;margin-top:38px}
.thesis-item,.section-photo .thesis-item {border-top:1px solid var(--line);padding:24px 0 0;background:none;backdrop-filter:none}
.thesis-item .role {font-size:.8125rem;text-transform:none;letter-spacing:.01em;color:var(--accent-fg,var(--accent));margin-bottom:12px;font-weight:700}
.thesis-item h3 {font-size:1.4375rem;font-weight:400;margin-bottom:10px}
.thesis-item p {font-size:1rem;margin-bottom:0;line-height:1.65}
#kennzahlen {background:#273031;color:#fff;padding:62px 0 68px}
#kennzahlen .eyebrow {color:#c0cac6}
.stat-grid {gap:0;margin-top:36px}
.stat-item {border:none;border-left:1px solid #53605c;background:none;padding:0 42px;border-radius:0}
.stat-item:first-child {border-left:0;padding-left:0}
.stat-num {font-family:var(--sans);font-weight:400;font-size:clamp(3.3rem,5.5vw,5.25rem);letter-spacing:-.055em;color:#fff}
.stat-label {font-size:1rem;color:#c0cac6;margin-top:18px;max-width:30ch;text-wrap:pretty}
.precision {background:var(--ink-2)}
.precision-grid {gap:clamp(40px,6vw,90px);align-items:start}
.precision-grid p {font-size:1rem}
.detail-photo {margin:0 0 30px;overflow:hidden}
.detail-photo img {width:100%;height:270px;object-fit:cover;object-position:center}
.de-demo {background:var(--ink);border:1px solid var(--line);padding:28px;box-shadow:none;border-radius:0}
.de-demo-swatches {border-radius:0;gap:8px;margin-bottom:24px;box-shadow:none}
.de-swatch {aspect-ratio:1.6;padding:14px 12px}
.de-swatch-tag {font-size:.8125rem;letter-spacing:0;text-transform:none}
.de-swatch-ral {font-size:.75rem;color:#ddd}
.de-demo-readout .val {font-family:var(--sans);font-size:2.5rem;color:var(--text);text-shadow:none;font-weight:400}
.de-demo-readout .unit {color:var(--text-dim);font-size:1rem}
.de-demo-readout.over .unit,.de-demo-readout.over #deVal {color:var(--accent-fg);text-shadow:none}
.de-demo-readout .cap {font-size:.8125rem;letter-spacing:0;text-transform:none;color:var(--text-dim)}
.de-demo-control-label {font-size:.875rem;letter-spacing:0;text-transform:none;color:var(--text)}
.de-demo-control input[type="range"] {height:24px;background:transparent;padding:0}
.de-demo-control input[type="range"]::-webkit-slider-runnable-track {height:4px;border-radius:4px;background:var(--line-2)}
.de-demo-control input[type="range"]::-webkit-slider-thumb {margin-top:-10px;background:var(--accent);box-shadow:none;border:3px solid var(--ink)}
.de-demo-control input[type="range"]::-moz-range-track {height:4px;border-radius:4px;background:var(--line-2)}
.de-demo-hint {color:var(--text-dim);font-size:.875rem}
#leistungen>.container {display:grid;grid-template-columns:1.12fr .88fr;column-gap:clamp(40px,6vw,90px)}
#leistungen>.container>.eyebrow,#leistungen>.container>h2,#leistungen>.container>p:first-of-type {grid-column:1}
#leistungen>.container>.service-visual {grid-column:2;grid-row:1/4;margin:0;align-self:stretch}
.service-visual {position:relative;overflow:hidden;min-height:340px}
.service-visual img {display:block;width:100%;height:100%;max-height:455px;object-fit:cover;object-position:center}
.service-visual figcaption {position:absolute;bottom:12px;right:12px;padding:4px 8px;background:#ffffffe6;color:#343d3b;font-size:.75rem}
#leistungen>.container>.service-list,#leistungen>.container>.material-note,#leistungen>.container>p:last-child {grid-column:1/-1}
.service-list {margin-top:48px}
.service-row {grid-template-columns:1fr 1.7fr 60px;gap:32px;padding:28px 0;transition:background .2s,padding .2s}
.service-row h3 {font-size:1.65rem;font-weight:400}
.service-row p {font-size:1rem;max-width:62ch}
.service-row .idx {font-size:.875rem;color:var(--accent-fg)}
.service-row:hover {padding-left:12px;background:var(--ink-2)}
.material-note {font-size:1rem;line-height:1.7}
#ergebnis {background:var(--ink-2)}
.cmp {grid-template-columns:1.1fr .9fr;gap:clamp(38px,6vw,88px)}
.ba {border:0;border-radius:0;box-shadow:none}
.ba .hd {background:#fff;box-shadow:none}
.ba .hd .grip {background:#fff;color:#252a2b;border:1px solid #d9ddda;box-shadow:none;width:48px;height:48px;font-size:1.25rem}
.ba.dragging .hd .grip {box-shadow:none}
.ba .lbl {font-family:var(--sans);font-size:.75rem;letter-spacing:.02em;text-transform:none;background:#fff;color:#252a2b;border:0;border-radius:0;padding:8px 12px}
.chk {gap:16px;margin-top:26px}
.chk>div {font-size:1rem;align-items:flex-start}
.chk svg {margin-top:4px}
.case-teaser-grid {gap:36px;margin-top:74px}
.case-teaser-item {border:0;border-radius:0;background:transparent;box-shadow:none}
.case-teaser-item img {height:370px;transition:transform .4s;object-position:center}
.case-teaser-item .ct-body {padding:24px 0 12px;border-bottom:1px solid var(--line)}
.case-teaser-item .ct-tag {font-size:.8125rem;letter-spacing:.035em}
.case-teaser-item h3 {font-size:1.5rem;font-weight:400;margin:10px 0}
.case-teaser-item p {font-size:1rem}
.case-teaser-item:hover {transform:none;box-shadow:none}
.case-teaser-item:hover h3 {color:var(--accent-fg)}
.process {background:var(--ink)}
.process-list {grid-template-columns:repeat(4,1fr);gap:32px;margin-top:50px}
.process-row {display:flex;flex-direction:column;padding:24px 0 0;gap:20px;border-top:1px solid var(--line)}
.process-row:last-child {border-bottom:0}
.process-row .num {font-size:2.7rem;font-weight:400;letter-spacing:-.06em;color:var(--text-dim)}
.process-row h3 {font-size:1.3rem;font-weight:400;margin-bottom:16px}
.process-row p {font-size:1rem}
.process-row .tag {display:block;font-size:.75rem;text-transform:none;letter-spacing:.015em;align-self:flex-start;text-align:left;margin-top:auto;padding-top:6px;color:var(--text-dim)}
#vorteile {background:var(--ink-2)}
.adv-grid {border:0;border-radius:0;gap:36px 64px;background:transparent}
.adv-item {background:transparent;border:0;border-top:1px solid var(--line);padding:26px 0 0;box-shadow:none}
.adv-item h3 {font-size:1.45rem;font-weight:400;margin-bottom:14px}
.adv-item p {font-size:1rem}
.site-image-band {margin:0;height:440px;overflow:hidden}
.site-image-band img {width:100%;height:100%;object-fit:cover}
#einsatzgebiet>.container {display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
#einsatzgebiet>.container>.eyebrow,#einsatzgebiet>.container>h2,#einsatzgebiet>.container>p,#einsatzgebiet>.container>.cities {grid-column:1}
#einsatzgebiet>.container>.geo-map {grid-column:2;grid-row:1/7;align-self:center;width:100%;margin:0}
.geo-grid-dot,.geo-hub-glow,.geo-hub-pulse {display:none}
.geo-sea {fill:#edf1ef}
:root[data-theme="dark"] .geo-sea {fill:#303c3b}
.geo-connector {stroke:var(--line-2);stroke-dasharray:none;opacity:.55}
.geo-city-label {font-family:var(--sans);font-size:13px;letter-spacing:0}
.geo-hub-label,.geo-sea-label,.geo-a1-label {font-family:var(--sans);letter-spacing:.035em}
.cities {gap:10px;margin-top:8px}
.cities a {font-size:.875rem;padding:7px 12px;border-radius:0;background:transparent}
.cities-note {font-size:.9375rem;line-height:1.7;margin-top:22px}
#einsatzgebiet .full-bleed {margin-top:94px!important;padding:0 0 92px!important;left:0;width:100%;transform:none;background:#273031;color:#fff}
#einsatzgebiet .full-bleed>picture {display:block;height:440px;margin-bottom:60px}
#einsatzgebiet .full-bleed .section-photo-bg {position:static;width:100%;height:100%;object-fit:cover}
#einsatzgebiet .full-bleed .section-photo-veil {display:none}
#einsatzgebiet .full-bleed h2,#einsatzgebiet .full-bleed h3 {color:#fff}
#einsatzgebiet .full-bleed .eyebrow {color:#ff5260;font-weight:700}
#einsatzgebiet .full-bleed p {color:#c4ccca}
#einsatzgebiet {padding-bottom:0}
.sectors {grid-template-columns:repeat(3,1fr);gap:36px 48px}
.sector,.section-photo .sector {padding:24px 0 0;background:none;border:0;border-top:1px solid #586360;border-radius:0;box-shadow:none;backdrop-filter:none}
.sector:hover {background:none;transform:none;box-shadow:none}
.sector .n {font-size:.875rem;color:#bec7c3;margin-bottom:20px}
.sector h3 {font-size:1.4rem;font-weight:400}
.sector p {font-size:1rem;margin-top:12px}
#faq>.container {max-width:var(--page-width)!important;display:grid;grid-template-columns:.85fr 1.15fr;column-gap:80px;align-content:start}
#faq>.container>.eyebrow,#faq>.container>h2 {grid-column:1;align-self:start}
#faq>.container>h2 {grid-row:2}
#faq .faq-list {grid-column:2;grid-row:1/4;margin-top:0}
.faq-item summary {font-size:1.0625rem;font-weight:400;line-height:1.5;padding:24px 0}
.faq-item .a {font-size:1rem}
.contact {background:var(--ink-2);padding:88px 0}
.contact h2.section-title {font-size:clamp(3.5rem,6.5vw,6rem);max-width:none}
.contact .center {text-align:left;position:relative}
.contact .center p {margin-left:0!important;margin-right:0!important;max-width:60ch!important}
.contact .center>div[style] {justify-content:flex-start!important}
.contact .center .eyebrow {margin-bottom:22px}
.wa-float {width:48px;height:48px;right:20px;bottom:20px;background:#273031;border:1px solid #6c7773;box-shadow:0 3px 12px #0002}
footer.site-footer {background:#202829;background-image:none;padding:74px 0 28px}
footer .logo-mark {width:240px;height:auto}
.footer-grid {grid-template-columns:2fr 1fr 1fr;gap:70px}
.footer-grid p {font-size:1rem!important;line-height:1.7;max-width:430px!important}
.footer-grid .footer-head {font-size:.8125rem!important;color:#aeb8b3;font-weight:400;margin-bottom:20px}
.footer-grid a {font-size:.9375rem;min-height:32px;color:#d9dfdc}
.footer-grid .logo {color:#fff;min-height:0}
.footer-bottom {align-items:flex-start;text-align:left;font-size:.8125rem;margin-top:60px;padding-top:24px}
.footer-bottom-meta {justify-content:flex-start}
/* Unterseiten: dasselbe Raster, klare Hierarchie und zusätzliche Bestandsbilder. */
.page-hero {padding:148px 0 64px;background:var(--ink)}
.page-hero .breadcrumb {font-size:.8125rem;line-height:1.6;margin-bottom:34px}
.page-hero .eyebrow {margin-bottom:20px}
.page-hero h1 {font-size:clamp(2.6rem,4.1vw,4.1rem);line-height:1.06;max-width:24ch;margin-bottom:26px;font-weight:400}
.page-hero .lede {font-size:1.125rem;line-height:1.65;max-width:65ch}
.page-hero.with-photo>.container {display:grid;grid-template-columns:1.1fr .9fr;gap:0 64px;align-items:start}
.page-hero.with-photo>.container>.page-hero-copy {grid-column:1}
.page-hero-photo {grid-column:2;align-self:stretch;min-height:470px;margin:0}
.page-hero-photo img {width:100%;height:100%;min-height:470px;object-fit:cover}
.article-page .page-hero h1 {max-width:28ch}
.article-page .page-hero {padding-bottom:52px}
.article-page .article-summary {padding:24px 28px;max-width:80ch;font-size:1.0625rem;border-radius:0}
.article-dateline {font-size:.8125rem;letter-spacing:0;margin-bottom:24px}
.article-page main>section:not(.page-hero):not(.contact)>.container {max-width:1120px}
.article-page main p,.article-page .prose-list {max-width:76ch}
.prose-list li {font-size:1rem}
.callout,.note {font-size:.9375rem;line-height:1.7}
.photo-band {height:480px;max-height:none;margin:0;min-height:280px}
.photo-band figcaption {font-size:.875rem;left:var(--page-gutter);bottom:24px}
.city-card {border-radius:0;box-shadow:none;background:transparent;padding:24px;border-color:var(--line)}
.city-card:hover {transform:none;box-shadow:none;background:var(--ink-2)}
.city-card h3 {font-size:1.35rem;font-weight:400}
.city-card p {font-size:1rem}
.case-card {padding-top:56px;display:grid;grid-template-columns:.82fr 1.18fr;gap:0 60px}
.case-card .txt {grid-column:1;grid-row:1;max-width:none}
.case-card .case-media {grid-column:2;grid-row:1;max-width:none}
.case-card .case-gallery {grid-column:2;max-width:none;width:100%;gap:16px}
.case-title {font-size:1.85rem;font-weight:400;margin-bottom:20px}
.case-tag {font-size:.75rem;letter-spacing:.01em;text-transform:none;border-radius:0}
.case-gallery figure {border:0;border-radius:0;box-shadow:none}
.case-gallery figcaption {font-size:.8125rem;line-height:1.5}
.compare-table {font-size:1rem}
.compare-table thead th {font-size:.8125rem}
.series-index {font-size:.8125rem;letter-spacing:.03em}
.series-index .track {max-width:110px}
.field label,.contact-info dt {font-size:.875rem;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea {font-size:1rem}
/* Das originale mehrstufige Schadenformular behält Struktur und Funktion. */
.schaden-page {--form-line:var(--line)}
.schaden-page label,.schaden-page .step-label {font-family:var(--sans)}
.schaden-page input,.schaden-page select,.schaden-page textarea {border-radius:2px!important;font-family:var(--sans);font-size:1rem!important}
.schaden-page button {border-radius:2px;box-shadow:none}
.schaden-page h2,.schaden-page h3 {font-weight:400}
/* Tablet / kompakte Navigation */
@media(min-width:901px) and (max-width:1199px) {
.burger {display:block}
nav.links {display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink);padding:24px var(--page-gutter);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:18px;max-height:calc(100svh - 92px);overflow:auto}
nav.links.open {display:flex}
.nav-right {margin-left:auto}
}
@media(min-width:1600px) {
.hero-canvas {right:calc((100vw - 1440px)/2 + 72px);left:calc(50% + 95px)}
.scroll-cue {right:calc((100vw - 1440px)/2 + 94px)}
}
@media(max-width:1100px) {
.hero-grid {width:55%;padding-right:28px}
.hero h1 {font-size:clamp(2.8rem,4.8vw,3.4rem)}
.hero-meta {gap:16px}
#entscheider {gap:42px}
#entscheider>picture {min-height:620px}
.process-list {grid-template-columns:repeat(2,1fr);gap:40px}
#faq>.container {column-gap:44px}
.page-hero.with-photo>.container {gap:0 36px}
}
@media(max-width:900px) {
.nav-wrap {min-height:78px;padding-block:18px}
.nav-right {margin-left:auto}
.logo-mark {width:156px;height:auto}
nav.links {top:100%;background:var(--ink);border-bottom:1px solid var(--line);padding:24px var(--page-gutter);gap:20px;max-height:calc(100svh - 78px);overflow:auto}
nav.links a {font-size:1rem;min-height:28px}
.hero {padding:122px 0 0;display:flex;flex-direction:column}
.hero-content {order:0}
.hero-grid {width:100%;padding:0}
.hero-grid>div:first-child {max-width:720px}
.hero h1 {font-size:clamp(2.6rem,7.3vw,4.5rem);max-width:19ch;line-height:1.05}
.hero-content .eyebrow {margin-bottom:24px;font-size:.75rem}
.hero .lede {font-size:1.0625rem}
.hero-meta {max-width:660px;margin-top:34px;margin-bottom:34px;gap:30px}
.hero-canvas {position:relative;order:1;inset:auto;width:calc(100% - 2*var(--page-gutter));height:460px;margin:0 var(--page-gutter) 44px}
.hero-photo {object-position:center 54%}
.scroll-cue {bottom:62px;right:calc(var(--page-gutter) + 16px)}
#entscheider {padding-block:72px;grid-template-columns:1fr;gap:36px}
#entscheider>picture {min-height:0;height:420px}
#entscheider>.container {padding:0}
#entscheider h2 {max-width:22ch!important}
.thesis-grid {grid-template-columns:repeat(3,1fr);gap:26px}
.thesis-item h3 {font-size:1.25rem}
.precision-grid {grid-template-columns:1fr;gap:36px}
.precision-grid>div:last-child {display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.precision-grid>div:last-child>.detail-photo {height:100%;margin:0}
.detail-photo img {height:100%;min-height:320px}
.de-demo {padding:24px}
#leistungen>.container {column-gap:34px}
#leistungen>.container>.service-visual {grid-row:1/4}
.cmp {grid-template-columns:1fr}
.cmp .txt {order:-1}
.cmp>.ba {max-width:760px;width:100%}
.case-teaser-item img {height:280px}
#einsatzgebiet>.container {grid-template-columns:1fr;gap:0}
#einsatzgebiet>.container>.geo-map {grid-column:1;grid-row:auto;max-width:620px;margin:20px auto}
#einsatzgebiet .full-bleed>picture {height:340px}
.sectors {grid-template-columns:repeat(2,1fr)}
#faq>.container {display:block}
#faq .faq-list {margin-top:36px}
.page-hero {padding-top:122px}
.page-hero.with-photo>.container {grid-template-columns:1fr;gap:36px}
.page-hero-photo {grid-column:1;min-height:0;height:370px}
.page-hero-photo img {min-height:0;height:100%}
.case-card {grid-template-columns:1fr;gap:16px}
.case-card .txt,.case-card .case-media,.case-card .case-gallery {grid-column:1;grid-row:auto}
.case-card .case-media {width:100%;max-width:780px}
.footer-grid {gap:36px;grid-template-columns:1.6fr 1fr 1fr}
}
@media(max-width:600px) {
section {padding:64px 0}
h2.section-title {font-size:2.2rem;line-height:1.08;max-width:22ch!important}
.eyebrow {font-size:.75rem;margin-bottom:20px}
.hero {padding-top:112px}
.hero h1 {font-size:clamp(2.35rem,9.8vw,3.65rem);letter-spacing:-.05em;max-width:19ch;margin-bottom:24px;overflow-wrap:normal}
.hero .lede {font-size:1rem;line-height:1.7}
.hero .actions {gap:22px;align-items:flex-start;flex-direction:column}
.hero .btn-primary {min-width:190px}
.hero-meta {gap:22px}
.hero-meta .row .v {font-size:.8125rem}
.hero-canvas {height:350px;margin-bottom:32px}
.scroll-cue {bottom:48px;font-size:.75rem}
#entscheider {padding-block:56px;gap:32px}
#entscheider>picture {height:360px}
.thesis-grid {grid-template-columns:1fr;gap:26px;margin-top:32px}
.thesis-item h3 {font-size:1.45rem}
#kennzahlen {padding:48px 0}
.stat-grid {grid-template-columns:1fr;gap:30px}
.stat-item,.stat-item:first-child {border:0;border-top:1px solid #53605c;padding:24px 0 0;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:16px}
.stat-num {font-size:3.3rem}
.stat-label {font-size:.9375rem;margin:0}
.precision-grid>div:last-child {display:block}
.precision-grid>div:last-child>.detail-photo {height:280px;margin-bottom:24px}
.detail-photo img {min-height:0}
.de-demo {padding:22px}
.de-demo-swatches {grid-template-columns:1fr 1fr}
.de-swatch {aspect-ratio:1.2;padding:12px 9px}
.de-swatch-tag {font-size:.75rem}
.de-swatch-ral {font-size:.6875rem;line-height:1.5}
#leistungen>.container {display:block}
#leistungen>.container>.service-visual {height:280px;margin:28px 0 0}
.service-list {margin-top:28px}
.service-row {display:grid;grid-template-columns:1fr 36px;gap:12px;padding:24px 0}
.service-row h3 {font-size:1.5rem;grid-column:1;grid-row:1}
.service-row p {font-size:1rem;grid-column:1/-1}
.service-row .idx {display:block;grid-column:2;grid-row:1}
.case-teaser-grid {grid-template-columns:1fr;gap:30px;margin-top:48px}
.case-teaser-item img {height:320px}
.process-list {grid-template-columns:1fr;gap:28px;margin-top:32px}
.process-row {display:grid;grid-template-columns:46px 1fr;gap:16px}
.process-row .num {font-size:2rem}
.process-row .tag {grid-column:2;padding:0}
.adv-grid,.adv-grid-3 {grid-template-columns:1fr;gap:30px;margin-top:32px}
.adv-item h3 {font-size:1.4rem}
.site-image-band {height:290px}
#einsatzgebiet .full-bleed {margin-top:60px!important;padding-bottom:56px!important}
#einsatzgebiet .full-bleed>picture {height:280px;margin-bottom:40px}
.sectors {grid-template-columns:1fr;gap:26px}
.sector {display:grid;grid-template-columns:28px 1fr;gap:8px 14px}
.sector .n {grid-column:1;grid-row:1;margin:4px 0 0}
.sector h3 {grid-column:2;font-size:1.35rem}
.sector p {grid-column:2;margin:0}
.contact {padding:60px 0}
.contact h2.section-title {font-size:3.4rem}
.contact .center>div[style] {gap:12px!important}
.contact .btn {width:100%;max-width:360px}
.footer-grid {grid-template-columns:1fr 1fr;gap:34px}
.footer-grid>div:first-child {grid-column:1/-1}
footer .logo-mark {width:210px}
footer.site-footer {padding:54px 0 28px}
.footer-bottom {margin-top:38px;padding-right:30px}
.wa-float {width:44px;height:44px;right:12px;bottom:12px}
.page-hero {padding:112px 0 44px}
.page-hero h1 {font-size:2.6rem;max-width:100%}
.page-hero .lede {font-size:1.0625rem}
.page-hero .breadcrumb {font-size:.75rem;margin-bottom:24px}
.page-hero-photo {height:310px}
.photo-band {height:320px}
.article-page .article-summary {padding:20px;font-size:1rem}
.case-title {font-size:1.65rem}
.case-gallery {grid-template-columns:1fr}
.ba .lbl {font-size:.6875rem;padding:7px 9px;top:10px}
.ba .lbl.l {left:10px}.ba .lbl.r {right:10px}
.faq-item summary {font-size:1rem}
.compare-table th,.compare-table td {padding:12px}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Bestandsfoto als ruhige Materialstudie im großformatigen Baustellenbild. */
.hero-canvas {overflow:hidden}
.hero-context {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero-canvas>picture {position:absolute;right:24px;bottom:70px;width:30%;height:22%;border:6px solid #fff;z-index:1;background:#ddd}
.hero-photo {object-position:center}
@media(max-width:900px){.hero-context{object-position:center 40%}.hero-canvas>picture{height:29%;width:25%;bottom:66px;right:20px}}
@media(max-width:600px){.hero-canvas>picture{height:28%;width:28%;right:16px;bottom:62px;border-width:4px}}
/* Navigation passt zur neuen Headerhöhe und bleibt bei Textvergrößerung erreichbar. */
@media(max-width:1199px){
nav.links.is-open {display:flex;position:absolute;top:100%;left:0;right:0;margin:0;padding:24px var(--page-gutter);background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:18px;max-height:calc(100svh - 92px);overflow-y:auto}
nav.links.is-open a {text-align:left;min-height:28px}
nav.links.is-open .nav-cta {margin:0;padding:12px 18px}
}
@media(max-width:900px){nav.links.is-open{max-height:calc(100svh - 78px)}}
.schaden-page label {font-size:.875rem}
.schaden-page .damage-tile-label {font-weight:500;font-size:1rem}
.schaden-page .damage-tile:hover {transform:none;box-shadow:none}
.schaden-page .damage-tile,.schaden-page .option-block,.schaden-page .ticket-summary {border-radius:0;box-shadow:none}
.schaden-page .form-page-title {font-weight:400}
.schaden-page .f-btn {font-weight:500}
.contact-page .page-hero {padding-bottom:42px}
.contact-page .page-hero h1 {font-size:clamp(2.6rem,4.1vw,4.1rem)!important}
.inner-page main p[style*="font-size:.9rem"],.inner-page main p[style*="font-size: .9rem"] {font-size:1rem!important}
@media(max-width:380px){
.hero h1{font-size:2.25rem;letter-spacing:-.06em}
.hero-content .eyebrow{font-size:.6875rem;letter-spacing:.035em}
.hero-meta{grid-template-columns:1fr;gap:18px}
.de-demo{padding:18px}
.de-swatch-tag{font-size:.6875rem}
.de-swatch-ral{font-size:.625rem}
}
/* Referenzen: Text und Bildserien stehen nebeneinander, jede Serie bleibt vollständig. */
.case-card {align-items:start}
.case-copy {min-width:0}
.case-visuals {min-width:0;display:flex;flex-direction:column;gap:20px}
.case-copy .txt {margin-bottom:0}
.case-visuals>.case-media,.case-visuals>.case-gallery {width:100%;max-width:none;margin-top:0!important}
.case-visuals>.ba {flex-shrink:0}
.cities a {padding:0;border:0;display:inline-flex}
.cities span {display:block;font-size:.875rem;border:1px solid var(--line);border-radius:0;background:transparent;padding:7px 12px}
.cities a:hover span {border-color:var(--accent);color:var(--accent-fg)}
.city-card .dist,.city-card .cat {font-size:.8125rem;letter-spacing:0}
.city-card .cat {border-radius:0}
/* Abschluss jedes Inhaltsbereichs auf Desktop und Mobilgeraeten zentrieren. */
.contact .center {text-align:center}
.contact .center p {margin-left:auto!important;margin-right:auto!important}
.contact .center>div[style] {justify-content:center!important}
.contact .center .btn {margin-inline:auto}
/* margin-inline:auto auf Flex-Kindern verteilt den freien Platz zwischen den Buttons: sie wandern an die Raender ("schielen"). Der Selektor sucht nur "flex" im style-Attribut, weil der Browser das Attribut nach JS-Zugriffen mit Leerzeichen neu schreibt ("display: flex"). Im Flex-Wrapper mittig per justify-content, daher kein Auto-Margin. */
.contact .center>div[style*="flex"] .btn {margin-inline:0}
.footer-bottom {align-items:center;text-align:center}
.footer-bottom-meta,.footer-social {justify-content:center;text-align:center}
/* Vier dokumentarische Symbolbilder geben dem Arbeitsablauf einen klaren Rhythmus. */
.process-photo {position:relative;margin:0;width:100%;aspect-ratio:8/5;overflow:hidden;background:var(--ink-2)}
.process-photo img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.process-photo figcaption {position:absolute;right:10px;bottom:10px;padding:4px 7px;background:rgba(255,255,255,.91);color:#363d3d;font-size:.6875rem;line-height:1.2;letter-spacing:.02em}
.process-row {align-items:stretch}
.process-row .tag {margin-top:auto}
@media (max-width:600px) {
.process-row .process-photo {grid-column:1/-1;grid-row:1}
.process-row .num {grid-column:1;grid-row:2}
.process-row>div {grid-column:2;grid-row:2}
.process-row .tag {grid-column:2;grid-row:3}
}
/* Four building categories and an explanatory note within the existing grid. */
.asset-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.competence-contexts {grid-template-columns:repeat(2,minmax(0,1fr))}
.asset-context {max-width:72ch;margin-top:32px;color:#dce3e0;font-size:1rem;line-height:1.6}
.asset-context a {color:inherit;text-decoration:underline;text-underline-offset:3px}
.damage-cause {border-top:1px solid var(--line);padding:30px 0;margin:34px 0}
.damage-cause h3 {font-size:clamp(1.25rem,2vw,1.65rem);margin:10px 0}
.damage-cause p {max-width:72ch;line-height:1.65}
@media(max-width:560px){.asset-grid,.competence-contexts{grid-template-columns:1fr}}
/* Compact decision aid immediately after the damage overview. */
.article-visual-wrap {max-width:1120px;margin:0 auto 20px}
.article-visual {margin:0;background:var(--ink-2)}
.article-visual img {display:block;width:100%;height:clamp(230px,34vw,440px);object-fit:cover}
.article-visual figcaption {padding:14px 2px 0;color:var(--text-dim);font-size:.8125rem;line-height:1.5}
.article-visual figcaption a {color:var(--accent-fg,var(--accent));text-decoration:underline;text-underline-offset:3px}
.faq-item .a a {color:var(--accent-fg,var(--accent));text-decoration:underline;text-underline-offset:3px}
.editorial-band {position:relative;width:100%;height:clamp(210px,24vw,310px);margin:0;overflow:hidden;background:#343e3e}
.editorial-band img {display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.editorial-band::after {content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(17,24,23,.63));pointer-events:none}
.editorial-band figcaption {position:absolute;left:max(var(--page-gutter),calc((100vw - var(--page-width))/2));right:var(--page-gutter);bottom:22px;z-index:1;color:#fff;font-size:.8125rem;line-height:1.45;text-shadow:0 1px 3px #0008}
@media(max-width:640px){.editorial-band{height:190px}.editorial-band figcaption{bottom:16px}}
.service-visual {height:455px;min-height:0}
@media(max-width:900px){.service-visual{height:320px}}
/* Inline-Links bleiben ohne Pfeilsymbol klar erkennbar. */
main p a:not(.btn),main li a,main .breadcrumb a,main .faq-item a,.footer-grid a,nav.links a {font-weight:650}
main a.service-row h3,main a.adv-item h3,main a.case-teaser-item h3,main a.city-card h3,main .cities a span,main .geo-city-link text {font-weight:650}
.service-row p,.case-teaser-item p,.adv-item p {font-weight:400}
/* Chrome: picture bildet selbst eine feste Ebene; keine intrinsische Inline-Hoehe. */
.ba {width:100%;min-width:0;isolation:isolate}
.ba>picture {position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden;pointer-events:none}
.ba>picture>img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}