/* ==========================================================================
INFRA-GRUPPE – zentrales Design-System
Gestaltungssprache nach K2-Systems-Referenz: durchgehend helle Flächen,
große Headlines in normaler Schreibung, runde Pill-Buttons, Haarlinien
statt schwerer Rahmen, diagonale Bildkanten. Primärfarbe INFRA-Türkis.
Änderungen an Farben/Abständen nur über die Variablen in :root.
========================================================================== */
/* ---------- Designvariablen ---------- */
:root {
/* Farbsystem */
--c-primary: #099999; /* Primärfarbe (Markenvorgabe) */
--c-primary-hover: #087f7f; /* Interaktion */
--c-primary-active: #066b6b; /* gedrückter Zustand */
--c-dark: #071919; /* dunkle Grundfarbe (Text, Akzente) */
--c-ink: #101616; /* Fließtext – nahezu schwarz für harten Kontrast */
--c-muted: #45514f; /* Nebentext */
--c-faint: #667372; /* Eyebrows, Metatext – AA-konform auf Weiß */
--c-line: #d9e0e0; /* Haarlinien */
--c-surface: #f5f7f7; /* helle Fläche */
--c-white: #ffffff;
/* Typografie */
--font-main: "Hubot Sans Wide", "Arial Narrow", Arial, sans-serif;
--fs-h1: clamp(2rem, 1.15rem + 3vw, 3.4rem);
--fs-h2: clamp(1.9rem, 1.1rem + 2.9vw, 3.3rem);
--fs-h3: clamp(1.15rem, 1rem + .6vw, 1.4rem);
--fs-body: 1.06rem;
--fs-small: .9rem;
--lh-tight: 1.08;
--lh-body: 1.65;
/* Raster und Abstände */
--container: 1240px;
--gutter: clamp(16px, 2.2vw, 32px);
--space-section: clamp(36px, 2.2vw + 14px, 56px);
--space-block: clamp(18px, 2vw, 26px);
/* Form */
--radius: 10px; /* Bilder, Karten */
--radius-pill: 999px; /* Buttons */
--shadow-soft: 0 16px 44px rgba(7, 25, 25, .08);
/* Bewegung */
--ease: cubic-bezier(.22, .68, .18, 1);
--t-fast: .18s;
--t-med: .3s;
/* Header */
--header-h: 84px;
--utility-h: 44px;
}
/* ---------- Schriften (lokal, WOFF2) ---------- */
@font-face {
font-family: "Hubot Sans Wide";
src: url("assets/fonts/Hubot-Sans-RegularWide.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Hubot Sans Wide";
src: url("assets/fonts/Hubot-Sans-SemiBoldWide.woff2") format("woff2");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Hubot Sans Wide";
src: url("assets/fonts/Hubot-Sans-BoldWide.woff2") format("woff2");
font-weight: 700; font-style: normal; font-display: swap;
}
/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
margin: 0;
font-family: var(--font-main);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--c-ink);
background: var(--c-white);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
line-height: var(--lh-tight);
margin: 0 0 .55em;
font-weight: 700;
letter-spacing: -.02em;
text-wrap: balance;
overflow-wrap: break-word;
hyphens: manual;
color: var(--c-dark);
}
@media (max-width: 650px) {
/* Nur lange Komposita trennen – kurze Wörter ("An-gaben") bleiben ganz */
h1, h2, h3, h4 {
hyphens: auto;
-webkit-hyphenate-limit-before: 5;
-webkit-hyphenate-limit-after: 4;
hyphenate-limit-chars: 12 5 4;
}
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
/* Zwischenstufen der Headline-Skala – statt Inline-Größen */
.h2-md { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.h2-sm { font-size: 1.4rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }
p, li, dd, td { overflow-wrap: break-word; }
/* Grid-/Flex-Spalten dürfen unter Min-Content schrumpfen (lange Komposita). */
.split > *, .card-grid > *, .compare-grid > *, .tab-panel-cols > *,
.cta-box > *, .form-grid > *, .checkpoints > *, .process > *,
.stats > *, .data-grid > *, .footer-cols > *, .mainbar .container > * {
min-width: 0;
}
a { color: var(--c-primary-hover); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-active); }
strong { font-weight: 700; }
:focus-visible {
outline: 3px solid var(--c-primary-active);
outline-offset: 2px;
border-radius: 3px;
}
::selection { background: var(--c-primary); color: var(--c-white); }
.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;
}
.skip-link {
position: fixed; top: -100px; left: 16px; z-index: 200;
background: var(--c-dark); color: var(--c-white);
padding: 10px 20px; border-radius: var(--radius-pill);
transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 12px; color: var(--c-white); }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-block); }
.section--surface { background: var(--c-surface); }
/* Abschnittsköpfe generell mittig (User 22.08.: "generell die Texte mittig") */
.section-head { max-width: 860px; margin-inline: auto; margin-bottom: var(--space-block); text-align: center; }
.section-head .lede { margin-inline: auto; }
.section-head--row { text-align: left; margin-inline: 0; max-width: none;
max-width: none;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
}
.section-head--row h2 { margin-bottom: 0; max-width: 16em; }
.lede { font-size: 1.12rem; color: var(--c-muted); max-width: 60ch; }
/* ---------- Buttons (Pills nach K2-Vorbild) ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
padding: .78em 1.55em;
border: 2px solid transparent;
border-radius: var(--radius-pill);
font: 600 .98rem/1.25 var(--font-main);
text-decoration: none;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease);
}
.btn .arr { transition: translate var(--t-fast) var(--ease); }
.btn:hover .arr { translate: 3px 0; }
/* Farbig hinterlegte Buttons: weiße Schrift in jedem Zustand. */
.btn--primary,
.btn--primary:visited { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.btn--primary:hover,
.btn--primary:focus-visible { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-white); }
.btn--primary:active { background: var(--c-primary-active); border-color: var(--c-primary-active); color: var(--c-white); }
.btn--dark,
.btn--dark:visited { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-white); }
.btn--dark:hover,
.btn--dark:focus-visible { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-white); }
.btn--dark:active { background: var(--c-primary-active); border-color: var(--c-primary-active); color: var(--c-white); }
/* Kontur-Pill auf hellem Grund */
.btn--outline,
.btn--outline:visited { background: var(--c-white); border-color: var(--c-dark); color: var(--c-dark); }
.btn--outline:hover,
.btn--outline:focus-visible { background: var(--c-dark); border-color: var(--c-dark); color: var(--c-white); }
.btn--outline:active { background: var(--c-primary-active); border-color: var(--c-primary-active); color: var(--c-white); }
/* Kontur-Pill auf Bildern (weiß) */
.btn--outline-light,
.btn--outline-light:visited { background: transparent; border-color: var(--c-white); color: var(--c-white); }
.btn--outline-light:hover,
.btn--outline-light:focus-visible { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-white); }
.btn--outline-light:active { background: var(--c-primary-active); border-color: var(--c-primary-active); color: var(--c-white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.arrow-link {
display: inline-flex; align-items: center; gap: .45em;
font-weight: 600; font-size: .98rem;
color: var(--c-primary-hover); text-decoration: none;
}
.arrow-link::after { content: "→"; transition: translate var(--t-fast) var(--ease); }
.arrow-link:hover { color: var(--c-primary-active); }
.arrow-link:hover::after { translate: 4px 0; }
/* ---------- Header (weiß, zweizeilig nach K2-Vorbild) ---------- */
.site-header {
position: sticky; top: 0; z-index: 100;
background: var(--c-white);
}
.site-header.is-scrolled { box-shadow: 0 6px 26px rgba(7, 25, 25, .09); }
/* Kompakt beim Scrollen: Kontaktzeile klappt weg, Logo wird kleiner */
.utility-row { overflow: hidden; max-height: var(--utility-h); transition: max-height .28s var(--ease), opacity .2s; }
.site-header.is-scrolled .utility-row { max-height: 0; opacity: 0; }
.site-header.is-scrolled .mainbar .container { min-height: 64px; }
.mainbar .container { transition: min-height .28s var(--ease); }
.site-header.is-scrolled .brand img { width: 128px; }
.utility-row { font-size: .86rem; }
.utility-row .container {
display: flex; justify-content: flex-end; align-items: center;
gap: 26px; min-height: var(--utility-h); padding-top: 8px;
}
.utility-row a {
color: var(--c-ink); text-decoration: none;
display: inline-flex; align-items: center; gap: .45em;
}
.utility-row a:hover { color: var(--c-primary-hover); }
.utility-row .ico { width: 15px; height: 15px; color: var(--c-muted); }
.utility-fault { font-weight: 700; color: var(--c-primary-hover) !important; }
.utility-fault .ico { color: var(--c-primary-hover); }
.utility-fault:hover { color: var(--c-primary-active) !important; }
.mainbar .container {
display: flex; align-items: center; gap: 28px;
min-height: var(--header-h);
}
.brand { flex: none; display: inline-flex; }
.brand img { width: 172px; height: auto; transition: width .28s var(--ease); }
.main-nav { margin-left: auto; }
.main-nav > ul {
display: flex; align-items: center; gap: clamp(6px, 1.6vw, 26px);
list-style: none; margin: 0; padding: 0;
}
.main-nav li { position: relative; margin: 0; }
.main-nav a,
.main-nav .nav-toggle {
position: relative;
display: inline-flex; align-items: center; gap: .4em;
padding: 10px 4px;
font: 600 1.02rem/1.2 var(--font-main);
color: var(--c-dark); text-decoration: none;
background: none; border: 0; cursor: pointer;
white-space: nowrap;
transition: color var(--t-fast) var(--ease);
}
.main-nav a::before,
.main-nav .nav-toggle::before {
content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px;
height: 2px; background: currentColor; border-radius: 1px;
scale: 0 1; transform-origin: left center;
transition: scale var(--t-med) var(--ease);
}
.main-nav a:hover,
.main-nav .nav-toggle:hover { color: var(--c-primary-hover); }
.main-nav a:hover::before,
.main-nav .nav-toggle:hover::before { scale: 1 1; }
.main-nav a[aria-current="page"],
.main-nav li.is-active > a,
.main-nav li.is-active > .nav-toggle { color: var(--c-primary-hover); }
.main-nav a[aria-current="page"]::before,
.main-nav li.is-active > a::before,
.main-nav li.is-active > .nav-toggle::before { scale: 1 1; }
.nav-toggle .caret { width: 11px; height: 11px; transition: rotate var(--t-fast) var(--ease); }
.nav-toggle[aria-expanded="true"] .caret { rotate: 180deg; }
.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.header-cta .btn { padding: .68em 1.35em; font-size: .95rem; white-space: nowrap; }
/* Störungs-Pill nur, wenn die Utility-Zeile nicht sichtbar ist */
.btn--fault-mobile { display: none; }
/* ---------- Megamenü ---------- */
.mega {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--c-white);
border-top: 1px solid var(--c-line);
box-shadow: 0 30px 60px rgba(7, 25, 25, .12);
display: none;
}
.mega.is-open { display: block; }
.mega-inner {
max-width: var(--container); margin-inline: auto;
padding: 32px var(--gutter) 40px;
}
.mega-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.mega-head h2 {
font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--c-faint); margin: 0; font-weight: 600;
}
.mega-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 28px 40px; }
.mega-side h3 {
font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--c-faint); margin: 10px 0 10px; font-weight: 600;
}
.mega-side h3 + .mega-feature, .mega-side h3:first-child { margin-top: 0; }
.mega-branches { list-style: none; margin: 0 0 22px; padding: 0; }
.mega-branches li { margin: 0; }
.mega-branches a {
display: block; padding: 8px 10px; border-radius: var(--radius);
text-decoration: none; color: var(--c-ink); font-weight: 600;
transition: background-color var(--t-fast) var(--ease), color var(--t-fast);
}
.mega-branches a:hover { background: var(--c-surface); color: var(--c-primary-hover); }
.mega-branches a.arrow-link { font-weight: 600; color: var(--c-primary-hover); }
.mega-feature {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--c-surface); border-radius: var(--radius);
padding: 12px 14px; margin-bottom: 8px;
text-decoration: none; color: var(--c-ink); font-weight: 600; font-size: .92rem;
transition: background-color var(--t-fast) var(--ease);
}
.mega-feature b { color: var(--c-primary); font-weight: 700; flex: none; }
.mega-feature:hover { background: #e9f5f5; color: var(--c-ink); }
.mega-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 28px;
list-style: none; margin: 0; padding: 0;
}
.mega-grid li { margin: 0; }
.mega-item a {
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 10px; border-radius: var(--radius);
text-decoration: none; color: var(--c-ink);
transition: background-color var(--t-fast) var(--ease);
}
.mega-item a:hover { background: var(--c-surface); }
.mega-item a:hover strong { color: var(--c-primary-hover); }
.mega-item a[aria-current="page"] strong { color: var(--c-primary-hover); }
.mega-item .ico { width: 34px; height: 34px; flex: none; color: var(--c-dark); margin-top: 2px; }
.mega-item strong { display: block; font-size: 1rem; transition: color var(--t-fast); }
.mega-item span { display: block; font-size: .86rem; color: var(--c-muted); margin-top: 2px; }
/* Dropdown Branchen */
.dropdown {
position: absolute; top: 100%; left: 50%; translate: -50% 0; min-width: 310px;
background: var(--c-white);
border: 1px solid var(--c-line);
border-radius: var(--radius);
box-shadow: 0 24px 50px rgba(7, 25, 25, .12);
padding: 10px;
display: none;
list-style: none; margin: 0;
}
.dropdown.is-open { display: block; }
.dropdown li { margin: 0; }
.dropdown a {
display: block; padding: 11px 14px; border-radius: 8px;
text-decoration: none; color: var(--c-ink);
font-weight: 600; font-size: .95rem;
}
.dropdown a:hover { background: var(--c-surface); color: var(--c-primary-hover); }
.dropdown a[aria-current="page"] { color: var(--c-primary-hover); }
/* ---------- Mobile Navigation ---------- */
.nav-burger {
display: none;
flex-direction: column; justify-content: center; gap: 5px;
width: 46px; height: 46px; padding: 11px;
background: none; border: 0; cursor: pointer;
}
.nav-burger span {
display: block; height: 2px; width: 100%;
background: var(--c-dark); border-radius: 2px;
transition: translate var(--t-fast) var(--ease), rotate var(--t-fast) var(--ease), opacity var(--t-fast);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
/* Ruhiges Öffnen und Schließen (User 22.08.: Keyframes wirkten "stressig"):
eine einzige Bewegung - das Blatt gleitet von rechts herein, die Abdunklung
blendet mit; beim Schließen läuft dieselbe Bewegung rückwärts statt eines
harten Abschaltens. Kein Blur-Filter (ruckelt auf iPhone), kein
Doppel-Fade. Sichtbarkeit schaltet erst nach dem Ausgleiten um. */
.mobile-nav {
position: fixed; inset: 0; z-index: 150;
visibility: hidden;
}
.mobile-nav.is-open { visibility: visible; }
.mobile-nav-backdrop {
position: absolute; inset: 0;
background: rgba(7, 25, 25, .5);
border: 0; padding: 0; cursor: pointer;
touch-action: none;
opacity: 0;
}
.mobile-nav.is-open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-panel {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 100%);
background: var(--c-white);
box-shadow: -16px 0 48px rgba(7, 25, 25, .16);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
padding: 18px 22px 34px;
display: flex; flex-direction: column; gap: 6px;
transform: translateX(100%);
}
.mobile-nav.is-open .mobile-nav-panel { transform: none; }
@media (prefers-reduced-motion: no-preference) {
.mobile-nav { transition: visibility 0s linear .34s; }
.mobile-nav.is-open { transition-delay: 0s; }
.mobile-nav-backdrop { transition: opacity .34s ease-out; }
.mobile-nav-panel { transition: transform .34s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.mobile-nav.is-open .mobile-nav-panel { transition-duration: .42s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
.mobile-nav.is-open .mobile-nav-backdrop { transition-duration: .42s; }
.mobile-nav .acc-panel:not([hidden]) { animation: menu-drop .35s cubic-bezier(.2, .8, .25, 1) both; }
.mega.is-open, .dropdown.is-open { animation: menu-drop .4s cubic-bezier(.2, .8, .25, 1) both; }
}
@keyframes menu-item { from { opacity: 0; transform: translateY(12px); } }
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } }
.mobile-nav-head {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.mobile-nav-head img { width: 128px; }
.mobile-nav-close {
width: 44px; height: 44px; border: 1px solid var(--c-line); background: var(--c-white);
border-radius: 50%; cursor: pointer; font-size: 1.15rem; line-height: 1;
color: var(--c-dark);
}
.mobile-nav-close:hover { border-color: var(--c-primary-hover); color: var(--c-primary-hover); }
html.nav-open body { overflow: hidden; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { margin: 0; }
.mobile-nav nav > ul > li { border-bottom: 1px solid var(--c-line); }
.mobile-nav nav a,
.mobile-nav .acc-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
width: 100%;
padding: 15px 4px;
font: 700 1.05rem/1.3 var(--font-main);
color: var(--c-dark); text-decoration: none;
background: none; border: 0; cursor: pointer; text-align: left;
}
.mobile-nav nav a[aria-current="page"] { color: var(--c-primary-hover); }
.mobile-nav .acc-toggle .caret { width: 12px; height: 12px; flex: none; transition: rotate var(--t-fast) var(--ease); }
.mobile-nav .acc-toggle[aria-expanded="true"] .caret { rotate: 180deg; }
.mobile-nav .acc-panel { padding: 0 4px 12px; }
.mobile-nav .acc-panel a {
font-size: .96rem; font-weight: 600;
/* 13px vertikal ergibt ≥43px Tippfläche (Touch-Richtwert 44px) */
padding: 13px 10px; justify-content: flex-start; gap: 12px;
border-radius: 8px;
}
.mobile-nav .acc-panel a:hover { background: var(--c-surface); }
.mobile-nav .acc-panel .ico { width: 22px; height: 22px; flex: none; color: var(--c-dark); }
.mobile-nav-cta { display: grid; gap: 10px; margin-top: 20px; }
.mobile-nav-contact { margin-top: 16px; font-size: .92rem; color: var(--c-muted); }
/* Telefon/E-Mail als eigene Tippflächen (≥40px), Optik bleibt Textzeile */
.mobile-nav-contact a { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-dark); text-decoration: none; font-weight: 600; }
.mobile-nav-contact a:hover { color: var(--c-primary-hover); }
/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .84rem; padding-block: 16px 0; }
.breadcrumbs ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 4px;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--c-faint); padding-inline: 5px; }
.breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-primary-hover); text-decoration: underline; }
/* ---------- Seitenkopf: Icon-Badge + Fakten-Chips ---------- */
.page-head { padding-top: clamp(18px, 2.6vw, 34px); }
.page-head-grid {
display: grid; grid-template-columns: minmax(0, 860px) auto;
gap: clamp(24px, 5vw, 90px); align-items: center; justify-content: space-between;
}
.page-head-badge {
width: clamp(150px, 15vw, 200px); aspect-ratio: 1;
border-radius: 50%; background: rgba(9, 153, 153, .1);
display: grid; place-items: center; color: var(--c-primary);
}
.page-head-badge svg { width: 52%; height: 52%; }
@media (max-width: 900px) {
.page-head-grid { grid-template-columns: 1fr; }
.page-head-badge { display: none; }
}
.fact-chips {
list-style: none; display: flex; flex-wrap: wrap; gap: 10px;
padding: 0; margin: 22px 0 0;
}
.fact-chips li {
display: inline-flex; align-items: center; gap: 9px; min-width: 0;
background: var(--c-surface); border-radius: 999px;
padding: 9px 16px; font-size: .9rem; font-weight: 600; color: var(--c-ink);
}
.fact-chips li::before { content: "✓"; color: var(--c-primary-hover); font-weight: 800; flex: none; }
/* Einsatzbereiche / Themen als Tag-Pills */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.tag-row .tag {
border: 1px solid var(--c-line); border-radius: 999px;
padding: 6px 14px; font-size: .85rem; font-weight: 600; color: var(--c-ink);
background: var(--c-white); white-space: nowrap;
}
.tag-row a.tag { text-decoration: none; transition: border-color var(--t-fast), color var(--t-fast); }
.tag-row a.tag:hover { border-color: var(--c-primary-hover); color: var(--c-primary-hover); }
/* Hersteller-/Systemkacheln (Unternehmen) */
.brand-grid {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(14px, 1.6vw, 22px);
}
.brand-grid li {
min-width: 0;
background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius);
padding: clamp(20px, 2.2vw, 28px);
display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
}
.brand-grid img {
height: auto; width: auto; max-height: 40px; max-width: 150px;
object-fit: contain; object-position: left center; align-self: flex-start;
}
.brand-grid span { color: var(--c-muted); font-size: .92rem; }
@media (max-width: 860px) { .brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .brand-grid { grid-template-columns: 1fr; } }
/* Chip-Variante auf Bildflächen (Hero) */
.fact-chips--onimage { margin-top: 18px; }
.fact-chips--onimage li {
background: rgba(255, 255, 255, .16); color: var(--c-white);
}
.fact-chips--onimage li::before { color: var(--c-white); }
.breadcrumbs [aria-current="page"] { color: var(--c-dark); font-weight: 600; }
/* ---------- Diagonale Bildkante (K2-Signatur) ---------- */
.clip-diagonal { clip-path: url(#infra-clip-hero); }
@media (max-width: 650px) {
.clip-diagonal { clip-path: url(#infra-clip-hero-m); }
}
/* ---------- Hero (Startseite) ---------- */
/* Randlos (K2-Signatur): Bild läuft ohne Rahmen bis an die Header-Kante,
nur die diagonale Unterkante bleibt */
.hero-home { padding-top: 14px; }
.hero-home > .container { max-width: none; padding-inline: 0; position: relative; }
/* Türkise Signaturkante: echtes Element (kein Pseudo-Element!) mit
derselben .clip-diagonal-Klasse wie das Bild – iOS-Safari rendert
url()-clip-paths auf ::before/::after nicht zuverlässig */
.hero-line-wrap { position: absolute; inset: 0 0 -12px 0; pointer-events: none; }
.hero-line {
position: absolute; inset: 0 0 12px 0;
translate: 0 10px;
background: var(--c-primary);
}
/* Hero-Inhalte steigen beim Laden gestaffelt ein */
@media (prefers-reduced-motion: no-preference) {
.hero-panel > * { animation: hero-rise .8s cubic-bezier(.2, .8, .25, 1) both; }
.hero-panel > :nth-child(1) { animation-delay: .08s; }
.hero-panel > :nth-child(2) { animation-delay: .22s; }
.hero-panel > :nth-child(3) { animation-delay: .36s; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } }
/* Die Linie wird beim Laden sauber von links nach rechts freigelegt –
sie liegt dabei fest an ihrem Platz (kein Hereinschieben) */
@media (prefers-reduced-motion: no-preference) {
.hero-line-wrap {
animation: accent-reveal 1.2s cubic-bezier(.3, .6, .25, 1) .3s backwards;
}
}
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
.hero-line-wrap {
animation-duration: 1.5s;
}
}
@keyframes accent-reveal {
from { clip-path: inset(0 100% 0 0); }
to { clip-path: inset(0 0 0 0); }
}
.hero-home .hero-frame {
position: relative;
z-index: 1;
border-radius: 0;
overflow: hidden;
}
.hero-home .hero-content {
width: 100%; max-width: var(--container);
margin-inline: auto;
}
.hero-home .hero-media { position: absolute; inset: 0; }
.hero-home .hero-media picture { width: 100%; height: 100%; }
.hero-home .hero-media img {
width: 100%; height: 100%; object-fit: cover;
/* Maximal herausgezoomt, Bild nach unten geschoben:
der Ausschnitt zeigt den oberen Bildbereich */
object-position: 50% 12%;
filter: contrast(1.02) saturate(.94);
}
/* Icon-Leiste: Symbole reagieren aufs Überfahren */
.service-strip .ico { transition: translate var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); }
.service-strip a:hover .ico { translate: 0 -3px; scale: 1.08; }
.hero-home .hero-media::after {
content: ""; position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(7, 16, 16, .72) 0%, rgba(7, 16, 16, .56) 32%, rgba(7, 16, 16, .16) 64%, transparent 82%),
linear-gradient(0deg, rgba(7, 16, 16, .22), transparent 45%);
}
.hero-home .hero-content {
position: relative; z-index: 2;
display: flex; align-items: center;
min-height: clamp(430px, 52svh, 560px);
padding: clamp(26px, 4.5vw, 60px);
/* gleichmäßige Polster oben/unten = Text echt mittig */
padding-bottom: clamp(38px, 5vw, 72px);
}
.hero-home .hero-panel { max-width: 610px; color: var(--c-white); }
.hero-home h1 {
color: var(--c-white);
/* Auf die längste Claim-Zeile "Gewerkeübergreifend." kalibriert –
sie muss auf jeder Breite ohne Umbruch in den Panel passen */
font-size: clamp(2rem, 1.15rem + 2.4vw, 3rem);
margin-bottom: .4em;
}
.hero-home .btn-row { margin-top: 26px; }
.concept-label {
position: absolute; z-index: 3; right: clamp(18px, 3vw, 38px); bottom: 32%;
padding: .48em .8em;
border: 1px solid rgba(255, 255, 255, .38);
color: rgba(255, 255, 255, .82);
font-size: .66rem; font-weight: 600; letter-spacing: .12em;
text-transform: uppercase;
}
/* ---------- Service-Band (einziger dunkler Akzent der Startseite) ---------- */
.home-service-band { padding-block: var(--space-section); }
.service-band {
display: grid; grid-template-columns: 1fr 1fr;
border-radius: var(--radius); overflow: hidden;
background: linear-gradient(100deg, var(--c-dark) 0%, #0d3a3d 48%, var(--c-primary) 100%);
color: var(--c-white);
}
.service-band-copy {
padding: clamp(28px, 4vw, 52px);
display: flex; flex-direction: column; justify-content: center;
}
.service-band-copy h2 { color: var(--c-white); margin-bottom: .4em; }
.service-band-copy p { color: rgba(255, 255, 255, .86); max-width: 44ch; margin-bottom: 22px; }
.service-band-copy .btn-row { margin: 0; }
.service-band-media { position: relative; min-height: 300px; }
.service-band-media picture, .service-band-media img {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.service-band-media img { object-fit: cover; }
@media (max-width: 980px) {
.mega-cols { grid-template-columns: 1fr; }
.mega-grid { grid-template-columns: repeat(2, 1fr); }
.service-band { grid-template-columns: 1fr; }
.service-band-media { min-height: 220px; order: -1; }
}
/* ---------- Gewerke-Leiste (Icon-Reihe mit Haarlinien) ---------- */
.service-strip { padding-block: clamp(22px, 3vw, 38px) 0; }
.service-strip ul {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
.service-strip li {
margin: 0; padding-inline: clamp(16px, 2.2vw, 30px);
}
.service-strip a {
display: flex; flex-direction: column; align-items: center; gap: 16px;
text-align: center;
min-height: 118px; padding: 10px 0 20px;
text-decoration: none; color: var(--c-dark);
font: 700 1rem/1.25 var(--font-main);
transition: color var(--t-fast) var(--ease);
}
.service-strip .ico { width: 44px; height: 44px; color: var(--c-dark); transition: color var(--t-fast); }
.service-strip a:hover { color: var(--c-primary-hover); }
.service-strip a:hover .ico { color: var(--c-primary-hover); }
/* ---------- Startseite: emotionale, ruhige Bilddramaturgie ---------- */
.home-audiences,
.home-vision,
.home-projects,
.home-project-cta { padding-block: var(--space-section); }
.home-audience-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 18px);
}
.home-audience-card {
position: relative; display: block; overflow: hidden;
/* Feste Bildhöhe: sonst bestimmt das hochformatige Foto die Kachelhöhe
und zieht auch die Nachbarkachel mit in die Länge. */
aspect-ratio: 4 / 3;
min-height: clamp(300px, 30vw, 420px);
/* width/min-width müssen gesetzt sein: sonst leitet der Browser die Breite
aus min-height × Seitenverhältnis ab und sprengt die Rasterspalte. */
width: 100%; min-width: 0;
color: var(--c-white); text-decoration: none;
}
.home-audience-card picture,
.home-audience-card img {
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.home-audience-card img { object-fit: cover; }
.home-audience-card--private img { object-position: left center; }
.home-audience-shade {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 42%, rgba(7, 16, 16, .78) 100%);
}
.home-audience-copy {
position: absolute; inset: auto clamp(24px, 4vw, 54px) clamp(28px, 4vw, 54px);
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 22px;
}
.home-audience-copy small {
grid-column: 1 / -1; color: rgba(255, 255, 255, .78);
font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.home-audience-copy strong {
font-size: clamp(1.7rem, 1.1rem + 2vw, 3rem); line-height: 1.06;
}
.home-audience-copy b { font-size: 2rem; line-height: 1; }
.home-audience-card:focus-visible { outline-color: var(--c-white); outline-offset: -5px; }
/* Text auf Bildflächen bleibt beim Hover weiß – Feedback über Bild-Zoom */
.home-audience-card:hover,
.home-audience-card:hover .home-audience-copy { color: var(--c-white); }
.home-audience-card img { transition: scale .5s ease; }
.home-audience-card:hover img { scale: 1.04; }
.home-vision-head {
margin-bottom: var(--space-block);
}
.home-vision-head h2 { margin-bottom: 0; max-width: 18ch; }
.home-vision-media {
position: relative; overflow: hidden; border-radius: 0;
min-height: clamp(380px, 42vw, 560px);
}
.home-vision-media picture,
.home-vision-media img {
/* Absolut füllend: sonst bekommt das Bild nur seine natürliche Höhe und
unter ihm bleibt die per min-height reservierte Fläche weiß (Mobil-Bug). */
position: absolute; inset: 0;
width: 100%; height: 100%;
}
.home-vision-media img { object-fit: cover; }
.home-vision-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(7, 25, 25, .26));
pointer-events: none;
}
.home-vision-media .btn {
position: absolute; z-index: 2; left: 50%; bottom: clamp(26px, 5vw, 60px);
translate: -50% 0; white-space: nowrap;
}
.home-projects > .container > h2 { margin-bottom: var(--space-block); }
.home-project-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.home-project-card {
min-width: 0; padding-right: clamp(22px, 3vw, 42px);
color: var(--c-dark); text-decoration: none;
}
.home-project-card + .home-project-card {
padding-right: 0; padding-left: clamp(22px, 3vw, 42px);
}
.home-project-media {
display: block; overflow: hidden; border-radius: 0;
aspect-ratio: 4 / 3;
}
.home-project-media picture,
.home-project-media img { width: 100%; height: 100%; }
.home-project-media img { object-fit: cover; }
.home-project-copy {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding-top: 16px;
}
.home-project-copy strong { font-size: clamp(1.35rem, 1rem + 1vw, 2rem); }
.home-project-copy b { font-size: 1.55rem; }
.home-project-media img { transition: scale .5s ease; }
.home-project-card:hover .home-project-media img { scale: 1.04; }
.home-project-card:hover .home-project-copy { color: var(--c-dark); }
.home-project-card:hover .home-project-copy b { color: var(--c-primary-hover); }
.home-clients-line {
display: grid; grid-template-columns: 1fr;
gap: clamp(24px, 3vw, 34px);
margin-top: clamp(40px, 5vw, 68px);
}
.home-clients-line > span {
color: var(--c-faint); font-size: .74rem; font-weight: 700;
letter-spacing: .15em; text-transform: uppercase;
}
.home-clients-line .logos {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: clamp(20px, 3vw, 36px);
}
.home-clients-line .logos img {
width: auto; height: auto; max-height: 56px; max-width: 150px; object-fit: contain;
filter: grayscale(1) brightness(.35); opacity: .6;
transition: opacity var(--t-fast), filter var(--t-fast);
}
.home-clients-line .logos img:hover { filter: grayscale(0) brightness(1); opacity: 1; }
/* Weiße Logo-Dateien: invertiert auf das Grau der übrigen Logos */
.home-clients-line .logos img.logo-white { filter: invert(.65); }
.home-clients-line .logos img.logo-white:hover { filter: invert(.85); opacity: 1; }
/* Hochformatiges Badge (Coffee Fellows) braucht mehr Höhe zum Lesen */
.home-clients-line .logos img.logo-portrait { max-height: 76px; }
.home-project-prompt {
display: grid; grid-template-columns: 1fr auto;
gap: clamp(30px, 6vw, 90px); align-items: center;
padding-block: clamp(30px, 4vw, 56px);
}
.home-project-prompt h2 {
margin: 0; max-width: 24ch;
font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem);
}
.home-prompt-tags { grid-column: 1 / -1; margin: 0; justify-content: center; }
/* ---------- Split-Sektionen ---------- */
.split {
display: grid; grid-template-columns: 1fr 1.15fr;
gap: clamp(26px, 3.5vw, 56px); align-items: center;
}
.split--reverse .split-media { order: -1; }
.split-media { border-radius: var(--radius); overflow: hidden; }
.split-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split-copy .btn-row { margin-top: 20px; }
ul.checklist { list-style: none; padding: 0; margin: 20px 0 0; }
.checklist li { padding-left: 32px; position: relative; margin-bottom: 12px; }
.checklist li::before {
content: ""; position: absolute; left: 0; top: .2em;
width: 19px; height: 19px; border-radius: 50%;
background: var(--c-dark);
-webkit-mask: url('data:image/svg+xml;utf8,') center/100% no-repeat;
mask: url('data:image/svg+xml;utf8,') center/100% no-repeat;
}
/* ---------- Zeilenliste (K2 „Base/DocuApp“) ---------- */
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list li { margin: 0; background: var(--c-surface); border-radius: var(--radius); }
.row-list li + li { margin-top: 10px; }
.section--surface .row-list li { background: var(--c-white); }
.row-list a {
display: flex; align-items: center; gap: 24px;
padding: 20px 22px;
text-decoration: none; color: var(--c-dark);
transition: background-color var(--t-fast) var(--ease);
}
.row-list a:hover { background: var(--c-surface); }
.row-list .row-title { font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); font-weight: 700; flex: 1; min-width: 0; }
.row-list .row-note { color: var(--c-muted); font-size: .95rem; flex: 1.2; }
.row-list .ico { width: 46px; height: 46px; color: var(--c-dark); flex: none; }
.row-list .row-arrow {
flex: none; font-size: 1.5rem; font-weight: 700; color: var(--c-dark);
transition: translate var(--t-fast) var(--ease), color var(--t-fast);
}
.row-list a:hover .row-title,
.row-list a:hover .row-arrow { color: var(--c-primary-hover); }
.row-list a:hover .row-arrow { translate: 4px 0; }
/* ---------- Karten & Spalten (Haarlinien statt Rahmen) ---------- */
.card-grid { display: grid; gap: clamp(16px, 1.8vw, 24px); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
position: relative;
background: var(--c-surface);
border-radius: var(--radius);
padding: clamp(20px, 2.2vw, 28px);
display: flex; flex-direction: column; gap: 12px;
transition: translate var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.section--surface .card { background: var(--c-white); }
.card--link:hover { translate: 0 -3px; box-shadow: var(--shadow-soft); }
.card .ico { width: 42px; height: 42px; color: var(--c-dark); }
.card h3 { font-size: 1.15rem; margin: 0; }
.card p { color: var(--c-muted); font-size: .97rem; margin: 0; flex: 1; }
.card .card-tag {
font-size: .74rem; font-weight: 600; letter-spacing: .16em;
text-transform: uppercase; color: var(--c-faint);
}
.card .arrow-link { margin-top: 8px; font-size: .95rem; }
.card--link .card-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.card--link:hover h3 { color: var(--c-primary-hover); }
.card--link:hover .ico { color: var(--c-primary-hover); }
/* Bildkarte (Bild oben) */
.card--media { padding: 0; background: none; border-radius: 0; }
.section--surface .card--media { background: none; }
.card--media .card-img {
border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 22px;
}
.card--media .card-img img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-med) var(--ease); }
.card--media:hover .card-img img { scale: 1.04; }
.card--media .card-body {
display: flex; flex-direction: column; gap: 12px; flex: 1;
}
/* ---------- Startseite: klare Kundeneinstiege ---------- */
.audience-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 30px);
}
.audience-tile {
position: relative; isolation: isolate; overflow: hidden;
min-height: clamp(280px, 31vw, 390px);
padding: clamp(26px, 4vw, 48px);
border-radius: var(--radius);
display: flex; flex-direction: column; align-items: flex-start;
color: var(--c-dark); text-decoration: none;
transition: translate var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.audience-tile:hover { translate: 0 -4px; box-shadow: var(--shadow-soft); }
.audience-tile--private { background: #edf4f3; }
.audience-tile--business { background: var(--c-dark); color: var(--c-white); }
.audience-no {
position: absolute; z-index: -1; right: clamp(16px, 3vw, 38px); top: -18px;
font-size: clamp(6rem, 11vw, 10rem); font-weight: 700; line-height: 1;
color: var(--c-primary); opacity: .12;
}
.audience-tile--business .audience-no { color: var(--c-white); opacity: .08; }
.audience-kicker {
font-size: .76rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; opacity: .72;
}
.audience-tile h3 {
margin: .55em 0 .8em; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1;
color: inherit;
}
.audience-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.audience-tags > span {
padding: .48em .85em; border-radius: var(--radius-pill);
background: var(--c-white); color: var(--c-dark);
font-size: .82rem; font-weight: 600;
}
.audience-tile--business .audience-tags > span {
background: rgba(255,255,255,.1); color: var(--c-white);
border: 1px solid rgba(255,255,255,.2);
}
.audience-link {
margin-top: auto; padding-top: 28px; font-weight: 700; color: inherit;
display: inline-flex; align-items: center; gap: .55em;
}
.audience-link span { transition: translate var(--t-fast) var(--ease); }
.audience-tile:hover .audience-link span { translate: 5px 0; }
/* ---------- Startseite: bildhafte Leistungswahl ---------- */
.visual-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2.5vw, 30px);
}
.visual-card { min-width: 0; }
.visual-card a {
position: relative; display: block; overflow: hidden;
min-height: 430px; aspect-ratio: 4 / 5;
border-radius: var(--radius); color: var(--c-white); text-decoration: none;
}
.visual-card img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: scale .55s var(--ease);
}
.visual-card a::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(7,25,25,.04) 30%, rgba(7,25,25,.88) 100%);
}
.visual-card-overlay {
position: absolute; z-index: 2; inset: auto 0 0;
padding: clamp(22px, 3vw, 34px);
display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 18px;
}
.visual-card .card-tag {
grid-column: 1 / -1; color: rgba(255,255,255,.78);
font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
}
.visual-card strong { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; }
.visual-arrow { font-size: 1.7rem; line-height: 1; transition: translate var(--t-fast) var(--ease); }
.visual-card a:hover img { scale: 1.045; }
.visual-card a:hover .visual-arrow { translate: 5px 0; }
/* ---------- Kennzahlen ---------- */
.stats {
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px);
list-style: none; margin: 0; padding: 0;
}
.stats li { padding: 8px 0; margin: 0; }
.stats strong {
display: block; font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem);
line-height: 1.1; color: var(--c-dark);
}
.stats span { color: var(--c-muted); font-size: .92rem; }
/* ---------- Vergleich ---------- */
.compare-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.compare-card {
border-radius: var(--radius); padding: clamp(22px, 2.5vw, 34px);
display: flex; flex-direction: column;
}
.compare-card h3 { font-size: 1.05rem; padding-bottom: 14px; margin-bottom: 16px; }
.compare-card ul { list-style: none; margin: 0; padding: 0; font-size: .96rem; }
.compare-card li { padding: 9px 0 9px 28px; position: relative; margin: 0; }
.compare-card--muted { background: var(--c-surface); color: var(--c-muted); }
.compare-card--muted h3 { color: var(--c-muted); }
.compare-card--muted li::before { content: "–"; position: absolute; left: 6px; top: 8px; color: var(--c-faint); }
.compare-card--highlight { background: var(--c-white); border: 2px solid var(--c-primary); }
.compare-card--highlight h3 { color: var(--c-primary-hover); }
.compare-card--highlight li::before {
content: ""; position: absolute; left: 0; top: .72em;
width: 17px; height: 17px; border-radius: 50%; background: var(--c-primary);
-webkit-mask: url('data:image/svg+xml;utf8,') center/100% no-repeat;
mask: url('data:image/svg+xml;utf8,') center/100% no-repeat;
}
/* ---------- Prozess / Ablauf (Riesenziffern nach K2-News-Vorbild) ---------- */
.process {
display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px);
list-style: none; margin: 0; padding: 0;
}
.process--4 { grid-template-columns: repeat(4, 1fr); }
.process li {
margin: 0;
background: var(--c-surface);
border-radius: var(--radius);
padding: clamp(18px, 2vw, 24px);
text-align: center;
}
.section--surface .process li { background: var(--c-white); }
.process .step-no {
display: inline-grid; place-items: center;
width: 46px; height: 46px; border-radius: 50%;
background: var(--c-primary); color: var(--c-white);
font-size: 1.35rem; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
.process h3 { font-size: 1.05rem; }
.process p { font-size: .92rem; color: var(--c-muted); margin: 0; hyphens: auto; }
/* Prüfpunkte (Leistungsseiten) */
.checkpoints { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 22px); list-style: none; margin: 0; padding: 0; }
.checkpoints li { margin: 0; }
.checkpoint {
height: 100%;
background: var(--c-surface);
border-radius: var(--radius);
padding: clamp(20px, 2.2vw, 26px);
display: flex; flex-direction: column; gap: 10px;
text-align: center;
}
.section--surface .checkpoint { background: var(--c-white); }
.checkpoint .step-no {
display: inline-grid; place-items: center; flex: none; align-self: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--c-primary); color: var(--c-white);
font-size: 1.15rem; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums;
}
.checkpoint h3 { font-size: 1.12rem; margin: 0; }
.checkpoint p { font-size: .95rem; color: var(--c-muted); margin: 0; }
/* ---------- Logo-Leiste ---------- */
.logo-wall { }
.logo-wall .logos {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: clamp(28px, 5vw, 60px);
}
.logo-wall img {
height: 40px; width: auto; max-width: 140px; object-fit: contain;
filter: grayscale(1) brightness(0.35);
opacity: .6; transition: opacity var(--t-fast), filter var(--t-fast);
}
.logo-wall img:hover { opacity: 1; filter: grayscale(0) brightness(1); }
/* ---------- Zitat ---------- */
.quote blockquote {
margin: 0; max-width: 980px;
font-size: clamp(1.4rem, 1rem + 1.9vw, 2.4rem);
font-weight: 700; line-height: 1.3; color: var(--c-dark);
}
.quote cite {
display: block; margin-top: 22px; font-style: normal;
font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--c-faint); font-weight: 600;
}
/* ---------- FAQ ---------- */
/* FAQ mittig auf der Seite, Texte zentriert (User 22.08.) */
.section-head--center { margin-inline: auto; text-align: center; }
.faq { max-width: 900px; margin-inline: auto; }
.faq details { background: var(--c-surface); border-radius: var(--radius); }
.faq details + details { margin-top: 10px; }
.section--surface .faq details { background: var(--c-white); }
.faq summary {
display: flex; align-items: center; justify-content: center; gap: 16px;
position: relative; text-align: center;
padding: 15px 52px; cursor: pointer;
font-weight: 700; font-size: 1.08rem; list-style: none;
color: var(--c-dark);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; font-size: 1.5rem; line-height: 1; color: var(--c-primary-hover);
position: absolute; right: 20px; top: 50%; translate: 0 -50%;
transition: rotate var(--t-fast) var(--ease);
}
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--c-primary-hover); }
.faq details > div { padding: 0 24px 18px; color: var(--c-muted); max-width: 70ch; margin-inline: auto; text-align: center; }
@media (max-width: 650px) { .faq summary { padding: 14px 44px 14px 18px; } }
/* ---------- CTA-Box (umrandete Karte nach K2-Vorbild) ---------- */
/* CTA-Box als dunkles Verlaufsband (gleiche Familie wie das Service-Band der Startseite) */
.cta-box {
border-radius: var(--radius);
padding: clamp(28px, 4vw, 52px);
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
background: linear-gradient(100deg, var(--c-dark) 0%, #0d3a3d 48%, var(--c-primary) 100%);
color: var(--c-white);
}
.cta-box h2 { margin: 0 0 .35em; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); max-width: 22ch; color: var(--c-white); }
.cta-box p { margin: 0; color: rgba(255, 255, 255, .86); max-width: 52ch; }
.cta-box .btn-row { flex: none; }
.cta-box .btn--primary { background: var(--c-white); border-color: var(--c-white); color: var(--c-dark); }
.cta-box .btn--primary:hover, .cta-box .btn--primary:focus-visible { background: var(--c-surface); border-color: var(--c-surface); color: var(--c-dark); }
.cta-box a[href^="tel"]:not(.btn) { color: var(--c-white); font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.cta-box a[href^="tel"]:not(.btn):hover { color: var(--c-white); text-decoration: underline; }
/* ---------- Bild-CTA mit Diagonalkante (Vorfußbereich) ---------- */
.image-cta .container { position: relative; }
.image-cta .image-cta-media { position: relative; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.image-cta img { width: 100%; height: min(60vh, 560px); object-fit: cover; }
.image-cta .image-cta-media::after {
content: ""; position: absolute; inset: 0;
background: rgba(7, 25, 25, .38);
}
.image-cta .image-cta-content {
position: absolute; inset: 0 var(--gutter) 18% var(--gutter); z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 22px; text-align: center; padding: clamp(20px, 4vw, 48px);
}
.image-cta h2 {
color: var(--c-white); margin: 0;
font-size: clamp(1.4rem, 1rem + 1.9vw, 2.4rem);
max-width: 30ch;
text-shadow: 0 2px 18px rgba(7, 25, 25, .45);
}
/* ---------- Formular ---------- */
.form-wrap {
background: var(--c-white); border: 1px solid var(--c-line);
border-radius: var(--radius);
padding: clamp(24px, 3.5vw, 48px);
max-width: 900px;
}
.form-head { margin-bottom: 26px; }
.form-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: .92rem; }
.form-field label small { font-weight: 400; color: var(--c-muted); }
.form-field input,
.form-field textarea {
font: 400 1rem/1.4 var(--font-main);
padding: 13px 16px;
border: 1px solid #7d8a89; border-radius: 8px;
background: var(--c-white); color: var(--c-ink);
width: 100%;
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--c-primary-hover);
box-shadow: 0 0 0 3px rgba(8, 127, 127, .24);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: #b3261e; }
.form-note { font-size: .85rem; color: var(--c-muted); margin: 4px 0 0; grid-column: 1 / -1; }
.form-error { display: none; font-size: .84rem; color: #b3261e; font-weight: 600; }
.form-error.is-visible { display: block; }
.interest-fieldset > .form-error { margin: 9px 0 0; }
.interest-fieldset { border: 0; padding: 0; margin: 8px 0 0; grid-column: 1 / -1; }
.interest-fieldset legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: 12px; }
.interest-fieldset legend small { font-weight: 400; color: var(--c-muted); }
.pill-group { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { position: relative; }
.pill input {
position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
width: 100%; height: 100%;
}
.pill span {
display: inline-block;
padding: .58em 1.15em;
border: 1px solid #7d8a89; border-radius: var(--radius-pill);
font-size: .92rem; font-weight: 600;
color: var(--c-dark); background: var(--c-white);
transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pill:hover span { border-color: var(--c-primary-hover); color: var(--c-primary-hover); }
/* Ausgewählte Pill: farbige Fläche, weiße Schrift – auch bei Hover/Fokus. */
.pill input:checked + span { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.pill:hover input:checked + span { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-white); }
.pill input:checked:active + span { background: var(--c-primary-active); border-color: var(--c-primary-active); color: var(--c-white); }
.pill input:focus-visible + span { outline: 3px solid var(--c-primary-active); outline-offset: 2px; }
.pill-group-label { font-size: .82rem; color: var(--c-muted); margin: 14px 0 8px; display: block; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; align-items: flex-start; }
.form-privacy { font-size: .82rem; color: var(--c-muted); margin: 0; }
.form-status {
margin: 0; font-weight: 600; font-size: .95rem; display: none;
padding: 12px 18px; border-radius: 8px;
}
.form-status.is-error { display: block; background: #fdecea; color: #8c1d18; }
.form-status.is-success { display: block; background: #e6f4f1; color: #0b5345; }
.form-status.is-sending { display: block; background: var(--c-surface); color: var(--c-muted); }
/* ---------- Preis-/Produktkarten (Klimaanlagen) ---------- */
.price-card { border-left: 0; }
.price-card .price-tier {
font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
color: var(--c-faint);
}
.price-card .price-img {
position: relative; aspect-ratio: 16 / 9;
background: var(--c-white); border-radius: var(--radius);
margin-block: 8px; overflow: hidden;
}
/* Bild absolut in der Box verankert: kann in keinem Browser ausbrechen,
alle Geräte gleich groß und mittig (iOS-Safari-Fix 21.08.) */
.price-card .price-img img {
position: absolute; inset: 12px;
width: calc(100% - 24px); height: calc(100% - 24px);
max-width: none; object-fit: contain; object-position: center;
}
.price-card .price { font-size: 1.5rem; font-weight: 700; margin-top: 4px; color: var(--c-dark); }
.price-card .price small { display: block; font-size: .74rem; font-weight: 400; color: var(--c-muted); }
.price-card ul { list-style: none; margin: 12px 0 0; padding: 0; font-size: .93rem; color: var(--c-muted); }
.price-card li { padding-left: 22px; position: relative; margin-bottom: 7px; }
.price-card li::before {
content: ""; position: absolute; left: 0; top: .5em;
width: 10px; height: 2px; background: var(--c-primary);
}
.price-legal { font-size: .8rem; color: var(--c-faint); max-width: 940px; margin-top: 28px; }
/* ---------- Firmendaten / Legal ---------- */
.data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.data-grid section { background: var(--c-white); border-radius: var(--radius); padding: clamp(18px, 2vw, 24px); }
.data-grid h3 {
font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--c-faint); margin-bottom: .9em;
}
.data-grid p { margin: 0; font-size: .95rem; }
.legal-page { max-width: 840px; }
.legal-page h1 { margin-bottom: .8em; }
.legal-page h2 { font-size: 1.15rem; margin-top: 2.2em; }
.legal-page h2:first-of-type { margin-top: 0; }
.legal-page p, .legal-page li { color: var(--c-ink); font-size: .98rem; }
/* ---------- 404 ---------- */
.error-hero { text-align: center; padding-block: clamp(80px, 10vw, 150px); }
.error-hero .error-code {
font-size: clamp(4.5rem, 11vw, 9rem); font-weight: 700; line-height: 1;
color: var(--c-primary); display: block;
}
.error-hero h1 { margin-top: .25em; }
.error-hero .lede { margin-inline: auto; }
.error-hero .btn-row { justify-content: center; margin-top: 28px; }
.error-links {
display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
margin-top: 34px; padding: 0; list-style: none;
}
.error-links li { margin: 0; }
/* ---------- Footer (dunkel nach CTA-Vorbild, 22.08.) ---------- */
/* Einfarbiger Hintergrund (kein Verlauf/Bild): iOS-Safari hatte einen
dunklen Footer früher nicht gezeichnet – bei Problemen hier ansetzen */
.site-footer {
background: var(--c-dark);
background-color: #071919;
color: rgba(255, 255, 255, .72);
padding-block: clamp(40px, 4.5vw, 64px) 28px;
}
.footer-grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
gap: 36px 40px; align-items: start;
}
.footer-brand img { width: 260px; height: auto; display: block; }
.footer-ident address { margin-top: 18px; font-style: normal; font-size: .86rem; letter-spacing: .01em; color: rgba(255, 255, 255, .55); }
.footer-col h2 {
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--c-white); margin: 6px 0 14px; font-weight: 600;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; }
.footer-col a {
display: inline-flex; align-items: center; min-height: 36px;
color: rgba(255, 255, 255, .82); font-size: .93rem; font-weight: 600;
text-decoration: none; transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--c-primary); }
.footer-bottom {
margin-top: clamp(28px, 3vw, 44px); padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, .14);
display: flex; justify-content: space-between; align-items: center;
gap: 16px 32px; flex-wrap: wrap;
}
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; }
.footer-contact a {
display: inline-flex; align-items: center; gap: 9px;
min-height: 40px; padding: 0 14px 0 6px;
border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius-pill);
color: var(--c-white); font-size: .88rem; font-weight: 600; text-decoration: none;
transition: border-color var(--t-fast), background-color var(--t-fast);
}
.footer-contact a:hover { border-color: var(--c-primary); background: rgba(9, 153, 153, .18); color: var(--c-white); }
.footer-contact .ico {
width: 30px; height: 30px; padding: 7px; flex: none;
border-radius: 50%; background: var(--c-primary); color: var(--c-white);
}
.footer-contact .footer-fault .ico { background: var(--c-white); color: var(--c-dark); }
.footer-legal { margin: 0; font-size: .8rem; color: rgba(255, 255, 255, .55); display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.footer-legal a:hover { color: var(--c-primary); }
@media (max-width: 980px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-ident { grid-column: 1 / -1; }
}
@media (max-width: 650px) {
.footer-grid { grid-template-columns: 1fr; gap: 26px; }
.footer-col a { min-height: 40px; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
.footer-contact a span { font-size: .84rem; }
}
/* ---------- Mobile Schnellkontakt-Leiste ---------- */
.mobile-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
display: none;
grid-template-columns: 1fr 1.2fr; gap: 8px;
/* Bewusst zurückhaltend: durchscheinend statt massiv, keine Schattenkante */
background: rgba(255, 255, 255, .9);
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--c-line);
padding: 7px 12px calc(7px + env(safe-area-inset-bottom, 0px));
}
.mobile-cta .btn { width: 100%; padding: .66em 1em; font-size: .88rem; white-space: nowrap; }
@media (max-width: 820px) {
.mobile-cta { display: grid; }
/* Platz nur reservieren, wenn die Leiste auf der Seite existiert
(Kontakt- und Danke-Seite haben keine) */
body:has(.mobile-cta) { padding-bottom: 58px; }
}
.form-trust {
font-size: .8rem; color: var(--c-faint); margin: 0;
letter-spacing: .02em;
}
/* ---------- Scroll-Reveal (ruhiges Einblenden ohne spielerische Bewegung) ---------- */
.reveal { opacity: 0; transform: none; }
.js .reveal.is-visible {
opacity: 1; transform: none;
transition: opacity .45s ease-out;
}
html:not(.js) .reveal { opacity: 1; transform: none; }
/* Auch am Handy aktiv (User-Wunsch 18.08.): reines, schnelles
Einblenden ohne Versatz – kein Layoutrisiko */
.js .card-grid.reveal, .js .process.reveal, .js .checkpoints.reveal,
.js .stats.reveal, .js .data-grid.reveal {
opacity: 1; transform: none;
}
.js .card-grid.reveal > *, .js .process.reveal > *, .js .checkpoints.reveal > *,
.js .stats.reveal > *, .js .data-grid.reveal > * {
opacity: 0; transform: none;
}
.js .card-grid.reveal.is-visible > *, .js .process.reveal.is-visible > *,
.js .checkpoints.reveal.is-visible > *, .js .stats.reveal.is-visible > *,
.js .data-grid.reveal.is-visible > * {
opacity: 1; transform: none;
transition: opacity .45s ease-out;
}
html:not(.js) .card-grid.reveal > *, html:not(.js) .process.reveal > *,
html:not(.js) .checkpoints.reveal > *, html:not(.js) .stats.reveal > *,
html:not(.js) .data-grid.reveal > * { opacity: 1; transform: none; }
/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
transition-delay: 0s !important;
}
.reveal, .reveal > * { opacity: 1 !important; transform: none !important; }
.card--media:hover .card-img img { scale: 1; }
.home-audience-card:hover img,
.home-project-card:hover .home-project-media img { scale: 1; }
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1360px) {
.main-nav a, .main-nav .nav-toggle { font-size: .93rem; }
.main-nav > ul { gap: clamp(4px, 1vw, 16px); }
}
@media (max-width: 1180px) {
.brand img { width: 128px; }
.mainbar .container { gap: 16px; }
.main-nav a, .main-nav .nav-toggle { font-size: .85rem; }
.main-nav > ul { gap: 4px; }
.header-cta .btn { padding: .6em 1.05em; font-size: .85rem; }
}
@media (max-width: 1100px) {
.mega-grid { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(2, 1fr); }
.stats { grid-template-columns: repeat(2, 1fr); }
.process, .process--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
.utility-row { display: none; }
.compare-grid { grid-template-columns: 1fr; }
.card-grid--3 { grid-template-columns: repeat(2, 1fr); }
/* Ungerade Kartenzahl im 2-Spalten-Zustand: letzte Karte volle Breite */
.card-grid--3 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
.visual-grid { grid-template-columns: 1fr 1fr; }
.visual-card:last-child { grid-column: 1 / -1; }
.visual-card:last-child a { aspect-ratio: 16 / 8; min-height: 340px; }
.data-grid { grid-template-columns: 1fr 1fr; }
/* Ungerade Kachelzahl: letzte Kachel läuft über die volle Breite */
.data-grid > section:last-child:nth-child(odd) { grid-column: 1 / -1; }
.row-list .row-note { display: none; }
.cta-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 820px) {
.main-nav { display: none; }
.nav-burger { display: flex; }
.header-cta { margin-left: auto; }
.split, .split--reverse { grid-template-columns: 1fr; }
.split--reverse .split-media { order: 0; }
.service-strip .container { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.service-strip .container::-webkit-scrollbar { display: none; }
.service-strip ul {
width: max-content; min-width: 100%;
grid-template-columns: none; grid-auto-flow: column;
/* 28vw statt 32vw: das vierte Icon bleibt angeschnitten sichtbar
(Wisch-Hinweis, nachdem der Scrollbalken ausgeblendet wurde) */
grid-auto-columns: minmax(155px, 28vw);
}
.service-strip li { scroll-snap-align: start; }
.home-project-prompt { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
:root { --header-h: 68px; }
.brand img { width: 128px; }
.card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; }
.audience-grid, .visual-grid { grid-template-columns: 1fr; }
.audience-tile { min-height: 270px; }
.visual-card:last-child { grid-column: auto; }
.visual-card a, .visual-card:last-child a { aspect-ratio: 4 / 5; min-height: 380px; }
.card-grid { gap: 30px; }
.form-grid { grid-template-columns: 1fr; }
.process, .process--4 { grid-template-columns: 1fr 1fr; }
.checkpoints { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr 1fr; gap: 18px; }
.service-strip ul { grid-auto-columns: minmax(150px, 45vw); }
.service-strip a { min-height: 108px; }
.home-audiences, .home-vision, .home-projects, .home-project-cta {
padding-block: clamp(28px, 8vw, 40px);
}
.home-audience-grid { grid-template-columns: 1fr; }
.home-audience-card { aspect-ratio: 3 / 2; min-height: min(46vh, 340px); }
.home-project-grid { grid-template-columns: 1fr; gap: 24px; }
.home-project-card { padding-right: 0; }
.home-project-card + .home-project-card { padding: 0; }
.home-vision-media { min-height: min(52vh, 440px); }
.home-clients-line { grid-template-columns: 1fr; margin-top: 28px; text-align: center; }
.home-clients-line .logos { justify-content: center; }
.home-clients-line .logos img { max-width: 118px; max-height: 44px; height: auto; }
.home-clients-line .logos img.logo-portrait { max-height: 72px; }
.data-grid { grid-template-columns: 1fr; }
.row-list .ico { display: none; }
.row-list a { gap: 14px; padding-block: 20px; }
.hero-home .hero-media::after {
background: linear-gradient(180deg, rgba(7, 16, 16, .68) 0%, rgba(7, 16, 16, .38) 52%, rgba(7, 16, 16, .14) 78%);
}
.hero-home .hero-content {
min-height: 430px; padding: 30px 20px;
padding-bottom: 44px;
}
.hero-home h1 { font-size: clamp(1.4rem, 6.2vw, 2.2rem); }
.concept-label { right: 18px; bottom: 30%; font-size: .58rem; }
.image-cta img { height: 70vh; }
}
@media (max-width: 560px) {
/* Auf schmalen Displays übernimmt die mobile Navigation den Projekt-CTA. */
.header-cta .btn--primary,
.header-cta .btn--fault-mobile { display: none; }
}
@media (max-width: 430px) {
:root { --gutter: 16px; }
.brand img { width: 128px; }
.mainbar .container { gap: 10px; }
.header-cta { gap: 6px; }
.header-cta .btn { padding: .6em 1.05em; font-size: .82rem; }
.nav-burger { width: 42px; height: 42px; }
}
@media (max-width: 400px) {
.process, .process--4 { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr; }
.btn { width: 100%; }
.btn-row { flex-direction: column; align-items: stretch; }
.header-cta .btn { width: auto; }
}
/* Der Markenclaim trennt ausschließlich an gesetzten weichen Trennstellen. */
.hero-home h1, .footer-claim-line { hyphens: manual; }
/* ---------- Druck ---------- */
@media print {
.site-header, .site-footer, .mobile-nav, .skip-link, .image-cta { display: none !important; }
body { color: #000; }
}
/* ---------- Mobiler Feinschliff: kompaktere Abstände und Größen ---------- */
@media (max-width: 700px) {
/* Engerer Seitenrhythmus: weniger Luft zwischen den Sektionen */
:root { --space-section: 26px; }
/* Text: eine Stufe kleiner, damit Absätze nicht ganze Bildschirme füllen */
.lede { font-size: 1.02rem; }
.checklist li { margin-bottom: 10px; }
/* Häkchen-Chips: schlanker, damit mehr in eine Zeile passt */
.fact-chips { gap: 8px; margin-top: 16px; }
.fact-chips li { font-size: .84rem; padding: 7px 13px; gap: 7px; }
/* Tag-Pills: am Handy volle Tippfläche (≥40px) */
.tag-row .tag { min-height: 40px; display: inline-flex; align-items: center; }
.footer-brand img { width: 200px; }
}
/* ---------- Feinschliff: sanfte Tiefe und Mikro-Reaktionen ---------- */
.btn {
transition-property: background-color, border-color, color, translate, box-shadow;
}
.btn--primary { box-shadow: 0 6px 16px rgba(9, 153, 153, .24); }
.btn--primary:hover { box-shadow: 0 10px 22px rgba(9, 153, 153, .32); translate: 0 -1px; }
.btn--dark { box-shadow: 0 6px 16px rgba(7, 25, 25, .16); }
.btn--dark:hover, .btn--outline:hover, .btn--outline-light:hover { translate: 0 -1px; }
.btn:active { translate: 0 0; box-shadow: none; }
/* Karten heben sich beim Überfahren dezent an (nur Zeigegeräte) */
@media (hover: hover) {
.card--link:hover, .checkpoint:hover, .process li:hover, .price:hover {
translate: 0 -3px;
box-shadow: var(--shadow-soft);
}
}
.checkpoint, .process li, .price {
transition: translate var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
/* Inhaltliche Bilder mit ganz weichem Schatten */
.split-media img, .home-vision-media img, .home-project-media {
box-shadow: 0 10px 30px rgba(7, 25, 25, .10);
}
/* ---------- Internes Whiteboard (/intern/) ---------- */
.wb-buehne { position: relative; }
.wb-flaeche {
height: calc(100svh - var(--header-h) - 44px);
min-height: 480px;
overflow: hidden; cursor: grab; touch-action: none;
background:
radial-gradient(rgba(7, 25, 25, .10) 1px, transparent 1px) 0 0 / 26px 26px,
var(--c-surface);
}
.wb-flaeche:active { cursor: grabbing; }
.wb-welt { position: relative; width: 1600px; height: 1000px; transform-origin: 0 0; }
.wb-linien { position: absolute; inset: 0; }
.wb-linien path { fill: none; stroke: var(--c-primary); stroke-width: 2.5; opacity: .5; }
.wb-knoten {
position: absolute; translate: -50% -50%;
display: inline-flex; align-items: center; justify-content: center;
text-align: center; text-decoration: none;
font: 600 .95rem/1.3 var(--font-main);
background: var(--c-white); color: var(--c-dark);
border: 1px solid var(--c-line); border-radius: 12px;
padding: 12px 18px;
box-shadow: 0 6px 18px rgba(7, 25, 25, .08);
transition: translate var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease);
}
a.wb-knoten:hover { border-color: var(--c-primary-hover); box-shadow: 0 10px 24px rgba(9, 153, 153, .2); translate: -50% calc(-50% - 2px); }
.wb-zentrum {
background: var(--c-primary); color: var(--c-white); border: 0;
font-size: 1.25rem; font-weight: 800; padding: 20px 30px;
box-shadow: 0 14px 34px rgba(9, 153, 153, .35);
}
.wb-sparte {
background: var(--c-dark); color: var(--c-white); border: 0;
font-weight: 700; letter-spacing: .04em;
}
.wb-blatt { font-weight: 600; }
/* Brotkrume oben links in der Kontaktzeile (Desktop) statt eigener Zeile */
.breadcrumbs--kopf { margin-right: auto; padding: 0; min-width: 0; overflow: hidden; }
.breadcrumbs--kopf ol {
margin: 0; padding: 0; list-style: none;
display: flex; flex-wrap: nowrap; white-space: nowrap;
}
/* Handy/Tablet: Brotkrume neben dem Logo in der Kopfzeile */
.breadcrumbs--mobil {
flex: 1 1 auto; min-width: 0; overflow: hidden;
padding: 0; margin: 0 4px; font-size: .78rem;
}
.breadcrumbs--mobil ol {
margin: 0; padding: 0; list-style: none;
display: flex; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumbs--mobil li { flex: none; }
/* Mobil nur die letzten zwei Stufen: Elternseite / aktuelle Seite */
.breadcrumbs--mobil li:not(:nth-last-child(-n+2)) { display: none; }
.breadcrumbs--mobil li:nth-last-child(2)::before { content: none; padding: 0; }
.breadcrumbs--mobil li:last-child { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs--mobil li:last-child span { display: inline; }
@media (min-width: 1001px) {
.breadcrumbs--mobil { display: none; }
}
/* ---------- Whiteboard-Oberfläche (App-Logik) ---------- */
/* Keine weiße Leiste mehr: die Knöpfe schweben direkt über der Fläche */
.wb-top {
position: absolute; top: 10px; left: 0; right: 0; z-index: 6;
--wb-rand: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
padding: 0 var(--wb-rand);
display: flex; align-items: center; justify-content: space-between; gap: 10px;
pointer-events: none;
}
.wb-top > * { pointer-events: auto; }
.wb-title:empty { display: none; }
@media (max-width: 650px) {
/* Hinweis-Chip auf dem Handy in eigener Zeile unter den Pillen */
.wb-title { position: absolute; left: 50%; translate: -50% 0; top: 44px; max-width: 86%; margin: 0; }
}
.wb-buehne { --wb-rand: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.wb-title {
margin-inline: auto; max-width: 46%;
font: 600 .8rem/1.2 var(--font-main); color: var(--c-dark);
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
background: rgba(255, 255, 255, .94); border: 1px solid var(--c-line);
border-radius: var(--radius-pill); padding: 8px 12px;
}
.wb-top-actions { display: flex; gap: 6px; flex: none; margin-left: auto; }
.wb-chipbtn {
box-shadow: 0 4px 12px rgba(7, 25, 25, .1);
white-space: nowrap;
height: 34px; padding: 0 13px; border-radius: var(--radius-pill);
border: 1px solid var(--c-line); background: var(--c-white);
font: 600 .82rem/1 var(--font-main); color: var(--c-dark); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.wb-chipbtn:hover { border-color: var(--c-primary-hover); color: var(--c-primary-hover); }
.wb-chipbtn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.wb-chipbtn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-white); }
.wb-panel {
position: absolute; top: 52px; z-index: 7;
display: flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: calc(100% - 24px);
background: var(--c-white); border: 1px solid var(--c-line); border-radius: 12px;
padding: 6px; box-shadow: 0 14px 34px rgba(7, 25, 25, .14);
}
.wb-panel--links { left: var(--wb-rand); }
.wb-panel--rechts { right: var(--wb-rand); }
.wb-panel-item, .wb-board-chip {
display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px;
border: 0; background: none; text-align: left; width: 100%;
font: 600 .88rem/1.2 var(--font-main); color: var(--c-dark); text-decoration: none; cursor: pointer;
}
.wb-panel-item:hover, .wb-board-chip:hover { background: var(--c-surface); color: var(--c-primary-hover); }
.wb-board-aktiv { color: var(--c-primary-hover); }
.wb-board-aktiv::before { content: "●"; font-size: .6em; margin-right: 8px; }
.wb-board-neu { color: var(--c-muted); border-top: 1px solid var(--c-line); border-radius: 0; margin-top: 4px; padding-top: 6px; }
.wb-panel-item--gefahr { color: #b4231f; }
.wb-zoomdock {
position: absolute; right: var(--wb-rand); bottom: 88px; z-index: 6;
display: flex; flex-direction: column; gap: 6px;
}
.wb-rund {
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--c-line); background: rgba(255, 255, 255, .96);
font: 700 1.05rem/1 var(--font-main); color: var(--c-dark); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(7, 25, 25, .1);
}
.wb-rund:hover { border-color: var(--c-primary-hover); color: var(--c-primary-hover); }
.wb-dock {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
display: grid; grid-template-columns: repeat(6, 1fr);
background: rgba(255, 255, 255, .97); border-top: 1px solid var(--c-line);
padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.wb-dock button {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 54px; border: 0; background: none; border-radius: 10px; cursor: pointer;
font: 600 .66rem/1 var(--font-main); color: var(--c-dark);
}
.wb-dock button svg { width: 22px; height: 22px; }
.wb-dock button:hover { background: var(--c-surface); color: var(--c-primary-hover); }
.wb-dock .wb-dock-primary { background: var(--c-primary); color: var(--c-white); }
.wb-dock .wb-dock-primary:hover { background: var(--c-primary-hover); color: var(--c-white); }
.wb-gewaehlt { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.wb-flaeche { height: calc(100svh - var(--header-h)); min-height: 420px; }
/* Beim Verschieben darf der Browser nichts markieren */
.wb-flaeche, .wb-flaeche * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* hidden-Attribut muss gegen die display-Regeln gewinnen */
.wb-panel[hidden], .wb-dock[hidden], .wb-chipbtn[hidden] { display: none; }
@media (min-width: 1001px) {
.wb-dock { left: 50%; right: auto; translate: -50% 0; bottom: 16px; width: min(560px, 100%); border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 14px 34px rgba(7, 25, 25, .14); padding: 6px; }
.wb-zoomdock { bottom: 20px; }
}
/* ==========================================================================
KLIMA BAYERN – Ergänzungen zum INFRA-Designsystem
Wortmarke (statt Bildlogo), Zuschlags-Tabelle, Footer-Zusätze.
========================================================================== */
/* ---------- Wortmarke ---------- */
.brand-word {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--c-dark);
}
.brand-flake {
width: 42px;
height: 42px;
color: var(--c-primary);
flex: none;
transition: width .28s var(--ease), height .28s var(--ease);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
font-weight: 700;
font-size: 1.42rem;
letter-spacing: .02em;
white-space: nowrap;
transition: font-size .28s var(--ease);
}
.brand-text small {
color: var(--c-muted);
font-size: .72rem;
font-weight: 600;
letter-spacing: .03em;
margin-top: 4px;
white-space: nowrap;
}
.site-header.is-scrolled .brand-flake { width: 32px; height: 32px; }
.site-header.is-scrolled .brand-text strong { font-size: 1.18rem; }
.site-header.is-scrolled .brand-text small { display: none; }
@media (max-width: 1240px) {
.brand-flake { width: 34px; height: 34px; }
.brand-text strong { font-size: 1.18rem; }
}
@media (max-width: 420px) {
.brand-text small { display: none; }
}
/* Wortmarke im dunklen Footer und im Mobilmenü-Kopf */
.footer-brand { text-decoration: none; }
.footer-brand .brand-word { color: #fff; }
.footer-brand .brand-text small { color: rgba(255, 255, 255, .68); }
.footer-note {
margin-top: 16px;
color: rgba(255, 255, 255, .78);
font-size: .95rem;
line-height: 1.6;
max-width: 34ch;
}
.footer-note a { color: #fff; }
.footer-plain { color: rgba(255, 255, 255, .55); font-size: .98rem; }
.mobile-nav-head .brand-word .brand-flake { width: 30px; height: 30px; }
.mobile-nav-head .brand-word .brand-text strong { font-size: 1.1rem; }
.mobile-nav-head .brand-word .brand-text small { display: none; }
/* ---------- Zuschlags-Tabelle ---------- */
.table-wrap { overflow-x: auto; }
.price-table {
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
background: var(--c-white);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
overflow: hidden;
font-size: .98rem;
}
.price-table th, .price-table td {
text-align: left;
vertical-align: top;
padding: 16px 20px;
}
.price-table thead th {
background: var(--c-dark);
color: #fff;
font-size: .82rem;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
}
.price-table tbody th { font-weight: 700; color: var(--c-dark); }
.price-table tbody td:nth-child(2) { font-weight: 700; color: var(--c-primary-active); white-space: nowrap; }
.price-table tbody td:nth-child(3) { color: var(--c-muted); }
.price-table tbody tr:nth-child(even) { background: var(--c-surface); }
/* ---------- Marken-Hero ohne Foto: dunkler Verlauf wie CTA-Band ---------- */
.hero-home .hero-frame--brand {
background: linear-gradient(115deg, var(--c-dark) 0%, #0a3535 58%, var(--c-primary) 135%);
}
.hero-product {
margin-left: auto;
flex: none;
width: min(330px, 30vw);
background: var(--c-white);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
padding: 26px 26px 22px;
text-align: center;
}
.hero-product img { width: 100%; height: auto; }
.hero-product strong { display: block; font-size: .95rem; color: var(--c-dark); margin-top: 10px; }
.hero-product .hero-price {
display: block;
color: var(--c-primary-active);
font-weight: 700;
font-size: 1.25rem;
margin-top: 4px;
}
.hero-product small { display: block; color: var(--c-muted); font-size: .76rem; margin-top: 4px; }
@media (max-width: 980px) {
.hero-product { display: none; }
}