/* ============================================================
BAUM — Shared components: navigation, mega menu, mobile menu,
emergency dock, footer
============================================================ */
/* ---------------- Navigation ---------------- */
.site-nav {
position: fixed;
inset: 0 0 auto 0;
z-index: var(--z-nav);
transition: background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease;
border-bottom: 1px solid transparent;
}
.site-nav.is-solid {
background: rgba(7, 26, 51, 0.86);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-bottom-color: var(--c-border-dark);
}
/* Pages with light heroes force solid from start via .nav-always-solid on */
/* Full-width three-zone bar: logo (left) · nav (center) · CTAs (right).
1fr auto 1fr keeps the nav truly centered in the viewport regardless of side widths. */
.nav-inner {
width: 100%;
padding-inline: clamp(var(--gutter), 3vw, 56px);
height: var(--nav-h);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
column-gap: var(--sp-6);
}
/* Brand */
.nav-brand {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-shrink: 0;
grid-column: 1;
justify-self: start;
}
.nav-brand img {
height: 40px;
width: auto;
}
.nav-brand-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.nav-brand-name {
font-size: 17px;
font-weight: 650;
letter-spacing: .06em;
color: #fff;
}
.nav-brand-sub {
font-size: 10px;
font-weight: 500;
letter-spacing: .08em;
color: var(--c-on-navy-muted);
text-transform: uppercase;
}
/* Primary links */
.nav-links {
display: flex;
align-items: center;
gap: clamp(16px, 2vw, 30px);
grid-column: 2;
justify-self: center;
}
.nav-links>li {
position: relative;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: var(--sp-6) 2px;
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, .85);
transition: color var(--t-fast) ease;
position: relative;
}
.nav-link:hover,
.nav-link[aria-expanded="true"] {
color: var(--c-primary);
}
.nav-link .chev {
transition: transform var(--t-fast) ease;
}
.nav-link[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
/* Right side */
.nav-side {
display: flex;
align-items: center;
gap: var(--sp-6);
flex-shrink: 0;
grid-column: 3;
justify-self: end;
}
/* keep nav items on one line — the grid squeezes zones between 1100 and ~1470px */
.nav-link,
.nav-notdienst,
.nav-cta {
white-space: nowrap;
}
.nav-notdienst {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: 13px;
font-weight: 500;
letter-spacing: .04em;
color: var(--c-on-navy-2);
transition: color var(--t-fast) ease;
}
.nav-notdienst:hover {
color: #fff;
}
.nav-notdienst .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-alert);
box-shadow: 0 0 0 0 rgba(226, 92, 92, .5);
animation: notpulse 2.6s ease-out infinite;
}
@keyframes notpulse {
0% {
box-shadow: 0 0 0 0 rgba(226, 92, 92, .45);
}
60% {
box-shadow: 0 0 0 7px rgba(226, 92, 92, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(226, 92, 92, 0);
}
}
.nav-cta {
min-height: 44px;
padding: var(--sp-2_5) 22px;
font-size: 14px;
}
/* tighten the bar on narrow desktop widths instead of wrapping */
@media (max-width: 1470px) {
.nav-inner {
column-gap: var(--sp-4);
}
.nav-links {
gap: var(--sp-3_5);
}
.nav-side {
gap: var(--sp-4);
}
.nav-cta {
padding: var(--sp-2_5) var(--sp-4);
}
}
@media (max-width: 1520px) {
/* 1330 -> 1400 -> 1520: die Leiste hat jetzt SIEBEN Top-Level-Punkte (Bestellung neu,
Kundenbereich -> Downloadbereich laenger). Der "24h Notdienst"-Link faellt deshalb
frueher weg, damit das Band ab dem Burger-Breakpoint (1300) durchgehend passt —
ohne das wuerde die Leiste bei 1301-1520 ueberlaufen.
Notdienst bleibt ueber die fixe Kontakt-Leiste, den Footer und das Mobil-Menue erreichbar. */
.nav-notdienst {
display: none;
}
/* still reachable via dock + footer + hero CTAs */
}
/* Hamburger */
.nav-burger {
display: none;
width: 44px;
height: 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.nav-burger span {
display: block;
width: 24px;
height: 1.5px;
background: #fff;
transition: transform .25s var(--ease-out), opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
}
/* ---------------- Mega menu (Leistungen) ---------------- */
.mega {
position: fixed;
left: 0;
right: 0;
top: var(--nav-h);
z-index: var(--z-mega);
background: linear-gradient(180deg, #081E3C 0%, var(--c-navy-deep) 100%);
border-bottom: 1px solid var(--c-border-dark);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .25s ease, transform .25s var(--ease-out), visibility 0s linear .25s;
}
.mega.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .25s ease, transform .25s var(--ease-out), visibility 0s;
}
.mega-inner {
max-width: var(--container);
margin-inline: auto;
padding: 36px var(--gutter);
}
.mega-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
gap: 44px;
align-items: stretch;
}
/* categories — all six shown at once, no icons */
.mega-cols {
display: grid;
grid-template-columns: repeat(6, 1fr); /* Leistungen; Branchen overrides via .mega-cols-flat */
gap: 2px var(--sp-2_5);
align-content: start;
}
/* Leistungen mega ONLY (not the Branchen flat grid): 3-top (span 2 = ⅓) / 2-bottom (span 3 = ½) */
.mega-cols:not(.mega-cols-flat) { gap: 28px var(--sp-2_5); }
.mega-cols:not(.mega-cols-flat) > .mega-catblock { grid-column: span 2; }
.mega-cols:not(.mega-cols-flat) > .mega-catblock:nth-child(n+4) { grid-column: span 3; }
.mega-catblock {
padding: var(--sp-5);
border-radius: var(--r-md);
opacity: 0;
transform: translateY(10px);
transition: opacity .3s ease, transform .3s var(--ease-out), background-color var(--t-fast) ease;
}
.mega.is-open .mega-catblock {
opacity: 1;
transform: none;
}
.mega.is-open .mega-catblock:nth-child(1) {
transition-delay: .04s, .04s, 0s;
}
.mega.is-open .mega-catblock:nth-child(2) {
transition-delay: .08s, .08s, 0s;
}
.mega.is-open .mega-catblock:nth-child(3) {
transition-delay: .12s, .12s, 0s;
}
.mega.is-open .mega-catblock:nth-child(4) {
transition-delay: .16s, .16s, 0s;
}
.mega.is-open .mega-catblock:nth-child(5) {
transition-delay: .20s, .20s, 0s;
}
.mega.is-open .mega-catblock:nth-child(6) {
transition-delay: .24s, .24s, 0s;
}
/* column (mega-catblock) hover box removed — per-item row highlight handles it (v2) */
.mega-catname {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-3);
margin-bottom: var(--sp-2_5);
color: #fff;
}
/* mega/mobile menu icon chips (ICON-EXPERIMENT) — small, dark-tinted, inline */
.mega-ico {
display: inline-flex;
flex-shrink: 0;
}
.mega-ico .icon-chip,
.mm-sub-cat .icon-chip,
.mm-sub a .icon-chip {
width: 36px;
height: 36px;
margin: 0;
border-radius: var(--r-md);
background: rgba(255, 255, 255, .08);
color: var(--c-accent);
}
.mega-ico .icon-chip svg,
.mm-sub-cat .icon-chip svg,
.mm-sub a .icon-chip svg {
width: 19px;
height: 19px;
}
/* mobile menu keeps small inline chips */
.mm-sub-cat .icon-chip,
.mm-sub a .icon-chip {
width: 30px;
height: 30px;
border-radius: var(--r-sm);
}
.mm-sub-cat .icon-chip svg,
.mm-sub a .icon-chip svg {
width: 17px;
height: 17px;
}
.mm-sub-cat {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.mm-sub a {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.mega-catname .name {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.mega-services {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: var(--sp-2);
}
/* Sub-item: icon left · label · arrow right (on hover) + row highlight (v2) */
.mega-service {
font-size: 14px;
padding: var(--sp-2) var(--sp-2_5);
margin-inline: -10px;
border-radius: var(--r-sm);
color: rgba(255, 255, 255, .7);
display: flex;
gap: 11px;
align-items: center;
transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.mega-service .icon-chip {
flex-shrink: 0;
display: inline-flex;
width: 18px;
height: 18px;
background: none;
border-radius: 0;
margin: 0;
color: rgba(255, 255, 255, .5);
transition: color var(--t-fast) ease;
}
.mega-service .icon-chip svg { width: 18px; height: 18px; }
.mega-service .ms-name { flex: 1 1 auto; }
.mega-service .ms-arr {
flex-shrink: 0;
display: inline-flex;
color: #fff;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.mega-service .ms-arr svg { width: 14px; height: 10px; }
.mega-service:hover {
background: rgba(255, 255, 255, .07);
color: #fff;
}
.mega-service:hover .icon-chip { color: #fff; }
.mega-service:hover .ms-arr { opacity: 1; transform: none; }
/* featured conversion tile (right) */
.mega-featured {
position: relative;
overflow: hidden;
min-height: 300px;
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 26px;
}
.mega-featured img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.06);
transition: transform 1.1s var(--ease-out);
}
.mega-featured:hover img {
transform: scale(1);
}
.mega-featured::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 26, 51, .25) 0%, rgba(5, 15, 30, .55) 46%, rgba(5, 15, 30, .9) 100%);
}
.mega-featured>* {
position: relative;
z-index: 1;
}
.mega-featured .mf-eyebrow {
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--c-on-navy-2);
}
.mega-featured .mf-title {
font-size: 20px;
font-weight: 600;
color: #fff;
margin: var(--sp-2) 0 var(--sp-4);
max-width: 20ch;
line-height: 1.22;
}
.mega-featured .mf-cta {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: 14px;
font-weight: 550;
color: #fff;
}
.mega-featured .mf-cta .arr {
transition: transform var(--t-fast) var(--ease-out);
}
.mega-featured:hover .mf-cta .arr {
transform: translateX(4px);
}
.mega-featured .coords {
position: absolute;
top: 16px;
left: 16px;
z-index: 1;
font-size: 10px;
letter-spacing: .14em;
color: rgba(255, 255, 255, .85);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
padding: var(--sp-1) var(--sp-2);
background: rgba(7, 26, 51, .55);
}
/* footer action row */
.mega-foot {
display: flex;
align-items: center;
gap: clamp(20px, 2.4vw, 32px);
margin-top: var(--sp-5);
padding-top: var(--sp-2);
}
.mega-foot a {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-size: 14px;
font-weight: 500;
color: var(--c-on-navy-2);
transition: color var(--t-fast) ease;
}
.mega-foot a:hover {
color: #fff;
}
.mega-foot a .arr {
transition: transform var(--t-fast) var(--ease-out);
}
.mega-foot a:hover .arr {
transform: translateX(4px);
}
.mega-foot .mega-foot-not {
margin-left: auto;
}
.mega-foot .mega-foot-not .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-alert);
}
/* ---------------- Mega menu (Branchen) — flat list, no sub-services ---------------- */
.mega-cols-flat {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
align-content: center;
}
.mega-catblock-flat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-radius: var(--r-md);
color: #fff;
opacity: 0;
transform: translateY(10px);
transition: opacity .3s ease, transform .3s var(--ease-out), background-color var(--t-fast) ease;
}
.mega-branchen.is-open .mega-catblock-flat {
opacity: 1;
transform: none;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(1) {
transition-delay: .04s, .04s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(2) {
transition-delay: .07s, .07s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(3) {
transition-delay: .10s, .10s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(4) {
transition-delay: .13s, .13s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(5) {
transition-delay: .16s, .16s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(6) {
transition-delay: .19s, .19s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(7) {
transition-delay: .22s, .22s, 0s;
}
.mega-branchen.is-open .mega-catblock-flat:nth-child(8) {
transition-delay: .25s, .25s, 0s;
}
.mega-catblock-flat:hover,
.mega-catblock-flat:focus-within {
background: rgba(255, 255, 255, .05);
}
.mega-catblock-flat .name {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
}
.mega-catblock-flat:hover .name,
.mega-catblock-flat:focus-within .name {
color: var(--c-on-navy-2);
}
@media (prefers-reduced-motion: reduce) {
.mega-catblock,
.mega-catblock-flat {
opacity: 1 !important;
transform: none !important;
transition: background-color var(--t-fast) ease;
}
.mega-featured img {
transform: none;
}
}
/* Scrim below mega */
.mega-scrim {
position: fixed;
inset: 0;
z-index: calc(var(--z-mega) - 1);
background: rgba(5, 15, 30, .45);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility 0s linear .25s;
}
.mega-scrim.is-open {
opacity: 1;
visibility: visible;
transition: opacity .25s ease, visibility 0s;
}
/* ---------------- Mobile full-screen menu ---------------- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: var(--z-mobile-menu);
background: linear-gradient(165deg, #081E3C 0%, var(--c-navy-ink) 90%);
display: flex;
flex-direction: column;
padding: 96px var(--gutter) 32px;
opacity: 0;
visibility: hidden;
transform: translateY(-3%);
transition: opacity .3s ease, transform .35s var(--ease-out), visibility 0s linear .35s;
overflow-y: auto;
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity .3s ease, transform .35s var(--ease-out), visibility 0s;
}
.mobile-menu nav {
display: flex;
flex-direction: column;
}
.mm-item {
border-bottom: 1px solid rgba(201, 216, 236, .08);
}
.mm-link,
.mm-toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 15px 2px;
/* USER v=84 (Screenshot 08): feste 20px statt clamp(19px,5vw,25px) — die Skalierung lief auf
breiten Handys/Tablets bis 25px hoch. USER v=182: 20 -> 18px. */
font-size: 18px;
font-weight: 550;
letter-spacing: -0.02em;
color: #fff;
text-align: left;
}
.mm-toggle .chev {
transition: transform .25s ease;
color: var(--c-accent);
}
.mm-toggle[aria-expanded="true"] .chev {
transform: rotate(180deg);
}
.mm-sub {
display: none;
padding: 6px 0 var(--sp-5);
}
.mm-sub.is-open {
display: block;
}
/* USER v=84 (Screenshot 09): Zuordnung Kind→Eltern war unklar. Mehr Luft ÜBER der
Kategoriezeile (Gruppentrenner), dafür die Kinder enger zusammen. */
.mm-sub-cat {
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--c-on-navy-muted);
margin: 38px 0 6px;
}
.mm-sub-cat:first-of-type {
margin-top: 22px;
}
/* USER v=84 (Screenshot 10): MUSS flex bleiben. Diese Regel stand nach .mm-sub a{display:flex;gap:8px}
(Icon-Chips, v=63) und hat sie mit display:block überschrieben — dadurch war das gap wirkungslos
und Chip und Text klebten aneinander. NICHT auf block zurücksetzen. */
.mm-sub a {
display: flex;
align-items: center;
gap: var(--sp-2_5);
padding: var(--sp-2) 0;
font-size: 15px;
color: var(--c-on-navy);
}
.mm-sub a:active {
color: #fff;
}
.mm-foot {
margin-top: auto;
padding-top: var(--sp-8);
display: flex;
flex-direction: column;
gap: var(--sp-3_5);
}
.mm-foot .btn {
width: 100%;
}
.mm-notdienst {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-2_5);
font-size: 14px;
color: var(--c-on-navy-2);
padding: var(--sp-2_5);
}
/* ---------------- Emergency dock (mobile) ---------------- */
.notdienst-dock {
position: fixed;
right: 14px;
bottom: 14px;
z-index: var(--z-notdienst);
display: none;
align-items: center;
gap: 9px;
background: rgba(7, 26, 51, .92);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid var(--c-border-dark);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 11px var(--sp-4);
border-radius: var(--r-sm);
}
.notdienst-dock .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-alert);
}
/* ---------------- Footer — Kunden-Mockup (v=175) ----------------------------
Aufbau: Text-Wortmarke + Tagline + Beschreibung + Koordinaten links, rechts drei
Link-ZEILEN (Label oben, Links nebeneinander mit Trennstrichen), darunter die
Skyline full-bleed und eine SOLIDE ©-Leiste im Fluss.
Vorher (bis v=174): Emblem-![]()
+ drei Link-Spalten, und die ©-Leiste schwebte als
Glas-Pille absolut IN der Skyline-Bande. Jetzt ist sie ein Geschwister der Bande —
damit entfaellt die Desktop-absolut/Mobil-statisch-Weiche komplett. */
.site-footer {
position: relative;
background: var(--c-surface);
color: var(--c-body);
overflow: hidden;
}
/* asymmetrisch 2-spaltig -> FLEXBOX (Layout-Regel 8) */
.footer-top {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
/* Brand-Spalte und Luecke bewusst schmal: bei 1920 muss die Leistungen-Zeile (5 Links) auf
EINE Zeile passen — mit 27 % / 104px brach „Warum wir?" allein in eine zweite. */
gap: clamp(48px, 4.6vw, 80px);
padding-block: clamp(72px, 6vw, 96px) clamp(40px, 4vw, 64px);
}
.footer-brand {
flex: 0 0 clamp(300px, 25%, 360px);
min-width: 0;
}
.footer-rows {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: clamp(28px, 2.6vw, 40px);
/* das erste Label sitzt im Mockup auf Hoehe der Wortmarken-Mitte, nicht an ihrer Oberkante */
padding-top: clamp(0px, 1.6vw, 30px);
}
/* Wortmarke als TEXT — das Emblem steht jetzt in der Skyline-Grafik */
.footer-wordmark {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
color: var(--c-navy);
text-decoration: none;
}
.fw-name {
/* USER v=178: 36–46px (war 40–56) — erreicht 46 ab ~1640px */
font-size: clamp(36px, 2.8vw, 46px);
font-weight: 800;
letter-spacing: .06em;
line-height: .9;
}
.fw-sub {
margin-top: 10px;
font-size: clamp(11px, .78vw, 13px);
font-weight: 600;
letter-spacing: .34em;
text-transform: uppercase;
line-height: 1;
}
.footer-tagline,
.footer-row h3 {
font-size: 13.5px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
/* --c-primary-text (#1F5C96), nicht --c-primary: kleine Schrift braucht 4.5:1 */
color: var(--c-primary-text);
}
.footer-tagline {
margin-top: clamp(22px, 2vw, 32px);
}
.footer-brand-desc {
margin-top: var(--sp-6);
/* USER v=177: Footer-Text max. 14px */
font-size: 14px;
line-height: 1.75;
color: var(--c-body);
max-width: 40ch;
}
.footer-coords {
display: flex;
align-items: center;
gap: var(--sp-2_5);
margin-top: var(--sp-6);
font-size: 11.5px;
letter-spacing: .16em;
color: var(--c-muted);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.footer-coords svg {
flex-shrink: 0;
color: var(--c-primary);
}
.footer-row h3 {
margin-bottom: var(--sp-3_5);
}
/* Links nebeneinander mit Trennstrichen, die NIE eine Zeile anfuehren.
Navigation hat 10 Eintraege und bricht um. Ein `li + li::before`-Strich stuende dann
am Anfang der zweiten Zeile. Trick: jedes li zieht sich mit margin-left:-1px um einen
Pixel nach links und traegt den Strich an seiner linken Kante — beim ERSTEN Eintrag
jeder Zeile liegt diese Kante damit 1px links der ul-Innenkante und wird von
`overflow:hidden` weggeschnitten; bei allen anderen sitzt er mittig in der Luecke.
Die ul zieht sich um die halbe Luecke nach links, damit der Text auf der Rail steht.
⚠️ padding-block auf der ul, sonst schneidet overflow:hidden den Fokusring oben/unten. */
.footer-inline {
--fi-gap: clamp(26px, 2.2vw, 42px);
display: flex;
flex-wrap: wrap;
row-gap: var(--sp-2);
margin: 0 0 0 calc(var(--fi-gap) / -2);
padding: 4px 0;
list-style: none;
overflow: hidden;
}
.footer-inline li {
position: relative;
margin-left: -1px;
padding-inline: calc(var(--fi-gap) / 2);
}
/* USER v=178: Desktop padding-inline 14px je Link. Über --fi-gap gesetzt (28px = 2 × 14), damit der
negative ul-Versatz (−gap/2) mitzieht und der erste Link weiter exakt auf der Rail steht. */
@media (min-width: 901px) {
.footer-inline {
--fi-gap: 28px;
}
}
.footer-inline li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 1.15em;
transform: translateY(-50%);
background: var(--c-border);
}
.footer-inline a {
display: inline-block;
/* USER v=176: 16px war zu gross; v=177: Footer-Text max. 14px */
font-size: 14px;
line-height: 1.6;
color: var(--c-text);
transition: color var(--t-fast) ease;
}
.footer-inline a:hover {
color: var(--c-primary);
}
.footer-inline a:focus-visible {
outline-offset: 1px;
}
/* Skyline-Band — kachelt in x, unten verankert, OHNE Inhalt (die ©-Leiste ist ein Geschwister).
Grafik v=175: footer-dark-blue-v2.svg — gleiche Geometrie wie v=140 (2464×704, Basis-Rect
y=474 in #0A2343), nur die Beschriftung ist neu („SEIT 1990 / IN DRESDEN", zweizeilig).
Deshalb gelten Kachelfaktor 3.5 und mobil 28.5714% unveraendert.
⚠️ KEIN negatives margin-top (v=139): die Grafik hat nur 4 % Himmel, ein negatives Margin
zoege Gebaeude ueber die Links. */
.footer-skyline-band {
/* --sky-h ist die EINE Quelle für die Bandhöhe; --sky-tile leitet die Kachelbreite daraus ab.
Mockup: Kachel ≈1244px bei 1915px Viewport → 355px hoch. */
--sky-h: clamp(170px, 18.5vw, 356px);
--sky-tile: calc(var(--sky-h) * 3.5);
position: relative;
height: var(--sky-h);
background-image: url('/assets/img/global/footer-dark-blue-v2.svg');
background-repeat: repeat-x;
background-position: bottom center;
background-size: auto 100%;
}
/* ===== Skyline driftet langsam nach rechts (v=97, unveraendert) =============================
`transform` statt `background-position` (compositor-fähig). Verschoben wird um --sky-shift =
GENAU eine Kachel → sprungfreier Loop. `linear` ist Pflicht.
⚠️ `background-image: none` MUSS im Block bleiben: greift er nicht (reduced-motion), behält
die Bande ihr eigenes Bild und steht still — rutscht es heraus, ist sie dort LEER. */
@keyframes footer-skyline-drift {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(var(--sky-shift), 0, 0);
}
}
@media (prefers-reduced-motion: no-preference) {
.footer-skyline-band {
overflow: hidden;
background-image: none;
}
.footer-skyline-band::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * var(--sky-tile));
right: 0;
--sky-shift: var(--sky-tile);
background-image: url('/assets/img/global/footer-dark-blue-v2.svg');
background-repeat: repeat-x;
background-position: left bottom;
background-size: auto 100%;
/* --sky-drift = Dauer für EINE Kachel (Tempo-Regler). */
animation: footer-skyline-drift var(--sky-drift, 210s) linear infinite;
will-change: transform;
}
}
/* ---- Mobil (≤540): Grafik auf volle Breite, Höhe per Prozent-PADDING (v=92) ----------------
Prozent-Padding bezieht sich auf die BREITE des Containing Block — dieselbe Referenz wie
`background-size: 100% auto`, also scrollbar-fest. NICHT auf vw zurückbauen (v=92: 4px Spalt).
Pseudo `left:-100%; right:0` = 2 W breit → `translateX(50%)` = genau eine Kachel. */
/* USER v=179: Grafik mobil 10 % GRÖSSER — Kachel 1.1 W statt W.
Höhe 28.5714 % × 1.1 = 31.4286 % (Kachelbreite = 3.5 × 0.314286 W = 1.1 W).
Drift: das Pseudo ist mit `left:-110%; right:0` genau 2.1 W breit; eine Kachel (1.1 W) sind davon
1.1/2.1 = 52.381 % der EIGENEN Breite → translateX(52.381%). Wer die 110 % ändert, muss alle drei
Zahlen mitziehen, sonst springt der Loop. */
@media (max-width: 540px) {
.footer-skyline-band {
height: 0;
padding-top: 31.4286%;
background-size: 110% auto;
background-position: 50% 0;
}
}
@media (max-width: 540px) and (prefers-reduced-motion: no-preference) {
.footer-skyline-band::before {
bottom: auto;
height: 0;
padding-top: 31.4286%;
left: -110%;
--sky-shift: 52.381%;
}
}
/* ©-Leiste: solide, full-bleed, IM FLUSS direkt unter der Bande.
−2px Überlappung gegen Sub-Pixel-Rundung (v=92) — die untersten Pixel der Grafik sind ohnehin
durchgehend #0A2343. Die helle Kante ist ein inset-Schatten, kein Border zwischen Sektionen. */
.footer-bar-wrap {
position: relative;
margin-top: -2px;
background: #0A2343;
/* = Basisblau der Skyline-Grafik (Rect y=474, fill #0A2343) */
box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
}
.footer-bar {
display: flex;
align-items: center;
gap: var(--sp-6);
padding-block: clamp(22px, 2.4vw, 38px);
/* Seit v=232 ohne Social-Icons (nur der ©-Text links) — die Reserve ist damit wirkungslos,
aber unschädlich und greift wieder, falls rechts etwas dazukommt.
⚠️ USER v=176: der fixe `.to-top`-Button (rechts clamp(16,2.4vw,26) + 48px) lag auf dem
LinkedIn-Icon. Die Icons enden auf der Rail = Seitenrand (Container-Margin) + Gutter; ist
das weniger als Button + Luft, wird die Differenz rechts freigehalten. Ab ~1560px ist der
Rand breit genug → 0, die Icons bleiben auf der Rail. 80px statt 64 (48 + 16 Luft) deckt
ab, dass 100vw die Scrollbar mitzaehlt. ≤900 greift stattdessen padding-bottom (s. unten). */
padding-right: max(0px, calc(clamp(16px, 2.4vw, 26px) + 80px - var(--gutter) - max(0px, (100vw - var(--container)) / 2)));
font-size: 14px;
/* Weiss 85 % auf #0A2343 = 10.8:1 */
color: rgb(255 255 255 / 85%);
}
.footer-bar .spacer {
flex: 1;
}
.footer-bar-sep {
flex-shrink: 0;
width: 1px;
height: 40px;
background: rgb(255 255 255 / 14%);
}
/* .footer-socials: seit v=232 ohne Markup (keine Social-Profile), fuer spaetere Profile stehen gelassen */
.footer-socials {
display: flex;
gap: var(--sp-4);
}
.footer-socials a {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgb(255 255 255 / 10%);
color: rgb(253 253 253 / 92%);
transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.footer-socials a:hover {
background: #fff;
color: var(--c-primary);
}
@media (max-width: 1100px) {
.footer-top {
flex-direction: column;
align-items: stretch;
}
/* ⚠️ in `column` bezieht sich flex-basis auf die HÖHE (v=152) */
.footer-brand,
.footer-rows {
flex: 0 1 auto;
}
.footer-rows {
padding-top: 0;
}
}
/* ⚠️ ≤900 sitzt der fixe `.to-top`-Button unten rechts (bis ~78px ueber der Unterkante). Am
Seitenende laege er sonst auf den Social-Icons. (Bis v=179 dockte hier auch die Kontakt-Leiste
unten an; seit v=180 steht sie rechts mittig.) Die Polsterung sitzt auf der Hülle, damit das
Navy bis zur Unterkante durchläuft. */
@media (max-width: 900px) {
.footer-bar-wrap {
padding-bottom: 64px;
}
/* hier klaert die Unterkante — die rechte Reserve wuerde die Leiste nur verschieben
(≤540 sogar aus der Mitte der gestapelten Leiste) */
.footer-bar {
padding-right: 0;
}
}
@media (max-width: 540px) {
/* USER v=179: +40 % Abstand zwischen den Gruppen (gemessen 48 → 67px Brand→Navigation,
28 → 39px zwischen Navigation/Leistungen/Rechtliches) */
.footer-top {
gap: 67px;
}
.footer-rows {
gap: 39px;
}
.footer-bar {
flex-direction: column;
text-align: center;
gap: var(--sp-4);
padding-block: 22px 28px;
}
.footer-bar .spacer,
.footer-bar-sep {
display: none;
}
}
/* ---------------- Responsive ---------------- */
/* ⚠️ Burger-Breakpoint 1099 -> 1299 (Kundenfeedback: 7. Menuepunkt "Bestellung").
GEMESSEN, nicht geschaetzt: "Downloadbereich" ist 17px breiter als "Kundenbereich",
"Bestellung" kostet weitere 75px + 14px Luecke = 106px. Bei 1227px Viewport waren
aber nur 75px frei -> 31px Ueberlauf, und nach unten wurde es schlimmer. Sieben
Punkte passen erst ab ~1290px neben Logo und CTA.
Die Alternative (Labels kuerzen) schied aus: beide Woerter sind die des Kunden. */
@media (max-width: 1299px) {
.nav-links,
.nav-cta,
.nav-notdienst {
display: none;
}
.nav-burger {
display: flex;
}
.nav-side {
margin-left: auto;
}
/* push burger to the right edge */
.nav-inner {
height: var(--nav-h);
}
.mega {
display: none;
}
/* USER v=84 (Screenshot 01): schwebendes 24h-Notdienst-Dock auf Mobil ENTFERNT — es überlagerte
den Inhalt und machte den Screen unruhig. Die Nummer bleibt im Mobil-Menü (.mm-notdienst),
im Footer und auf /kontakt/ erreichbar. `.notdienst-dock` ist per Default display:none,
hier wurde es nur mobil eingeschaltet — die Regel ist damit ersatzlos raus. */
}
@media (max-width: 540px) {
.nav-brand img {
height: 34px;
}
.nav-brand-name {
font-size: 15px;
}
}
/* ================= Google Maps click-to-load (DSGVO) ================= */
.mapembed {
position: relative;
width: 100%;
height: 100%;
min-height: 320px;
overflow: hidden;
}
.mapembed-preview {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Das geladene Embed füllt den Slot per ABSOLUTER Positionierung — also exakt so, wie es
.mapembed-preview darüber schon macht. Vorher setzte main.js dem iframe inline height:100%,
und das kollabierte es auf 150px:
`min-height` macht eine Höhe NICHT definit. Die Kette ist .laden-map (height:auto + min-height)
→ .mapembed (height:100% → kein definiter Bezug → auto, mit min-height als Boden). Die BOX ist
dadurch korrekt ~627px hoch, aber für ein prozentuales height eines KINDES ist sie indefinit.
Das iframe fiel also auf `auto` zurück = 150px, der Default-Höhe ersetzter Elemente. Weil der
Container weiterhin richtig hoch blieb, sah nur die Karte aus wie ein Streifen — die Sektion
selbst mass sich sauber. Absolute Positionierung löst sich dagegen gegen die USED height des
Containing Block auf und ist damit unabhängig von der min-height-Kette.
⚠️ Höhe hier lassen, nicht zurück ins JS: eine Inline-Style-Höhe würde diese Regel wieder
schlagen. Betrifft alle drei Karten-Seiten (index, home-v2, kontakt). */
.mapembed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.mapembed-btn {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-2);
width: 100%;
height: 100%;
padding: var(--sp-6);
border: 0;
cursor: pointer;
text-align: center;
color: #fff;
background: linear-gradient(180deg, rgba(11, 37, 71, .34), rgba(11, 37, 71, .54));
transition: background var(--t-fast) ease;
}
.mapembed-btn:hover {
background: linear-gradient(180deg, rgba(11, 37, 71, .44), rgba(11, 37, 71, .64));
}
.mapembed-title {
font-size: 15px;
font-weight: 600;
padding: var(--sp-2_5) 18px;
border: 1px solid rgba(255, 255, 255, .72);
}
.mapembed-note {
font-size: 12px;
color: rgba(255, 255, 255, .86);
max-width: 34ch;
line-height: 1.5;
}
.mapembed-note a {
color: #fff;
text-decoration: underline;
}
.mapembed.is-loaded {
background: #fff;
}
/* ================= Kontakt-Rail (fixiert rechts, vertikal zentriert) =================
USER v=87: ersetzt den aufklappbaren Kontakt-FAB (Chat-Bubble unten). Vorbild felgner.de:
immer sichtbar, kein Toggle, kein JS. Eine weisse Leiste am rechten Rand, mittig zur
Viewport-Hoehe; die Buttons sind gestapelt und tragen nur Icons (Text = .sr-only).
Reihenfolge: E-Mail, Anrufen, Sicherheitscheck. */
.crail {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 200;
display: flex;
flex-direction: column;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-right: 0;
border-radius: var(--r-md) 0 0 var(--r-md);
box-shadow: 0 6px 24px rgba(11, 37, 71, .16);
/* KEIN overflow:hidden! Das lag hier zuerst, damit der Hover-Hintergrund an den runden Ecken
abgeschnitten wird — es hat aber auch den Tooltip weggeschnitten, der links AUSSERHALB der
Leiste ausfaehrt (gemessen: Tooltip bei x 1777–1845, Leiste ab 1852). Stattdessen runden die
Ecken jetzt die Buttons selbst (unten). */
}
/* Bei offenem Mobil-Menue verschwindet die Leiste: sie steht sonst mit z-index 200
ueber dem Menue (z-index 95) und blockiert dessen rechte Seite — sichtbar UND
klickbar. Das Menue hoeher zu legen ist keine Option, es muss unter der Nav (100)
bleiben, sonst ist der Schliessen-Button nicht mehr erreichbar. */
body.mm-open .crail {
display: none;
}
/* Back-to-top button: unten rechts, blendet nach ~500px Scroll ein. Liegt unter der
Kontakt-Leiste (z 200) und verschwindet — wie sie — bei offenem Mobil-Menue. */
.to-top {
position: fixed;
right: clamp(16px, 2.4vw, 26px);
bottom: clamp(18px, 4vh, 30px);
width: 48px;
height: 48px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--c-primary);
color: #fff;
cursor: pointer;
box-shadow: 0 8px 24px rgba(5, 15, 30, .22);
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: opacity .25s ease, transform .25s ease, background var(--t-fast) ease;
z-index: 150;
}
.to-top.is-visible {
opacity: 1;
visibility: visible;
transform: none;
}
.to-top:hover { background: var(--c-primary-hover); }
.to-top:active { background: var(--c-primary-active); }
.to-top:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.to-top svg { width: 22px; height: 22px; }
body.mm-open .to-top { display: none; }
@media (prefers-reduced-motion: reduce) {
.to-top { transition: opacity .2s ease; transform: none; }
}
.crail-btn {
position: relative;
width: 52px;
height: 52px;
display: grid;
place-items: center;
color: var(--c-navy);
transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.crail-btn+.crail-btn {
border-top: 1px solid var(--c-border);
}
/* ersetzt das fruehere overflow:hidden der Leiste (siehe dort) */
.crail-btn:first-child {
border-top-left-radius: var(--r-md);
}
.crail-btn:last-child {
border-bottom-left-radius: var(--r-md);
}
.crail-btn:hover,
.crail-btn:focus-visible {
background: var(--c-primary);
color: #fff;
}
.crail-btn svg {
width: 19px;
height: 19px;
}
/* Tooltip: faehrt links aus der Leiste aus. pointer-events:none, damit er den Klick
auf den Button nie abfaengt. */
.crail-tip {
position: absolute;
right: calc(100% + 8px);
top: 50%;
transform: translateY(-50%) translateX(6px);
padding: 6px var(--sp-2_5);
border-radius: var(--r-sm);
background: var(--c-navy);
color: #fff;
font-size: 12.5px;
font-weight: 550;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.crail-btn:hover .crail-tip,
.crail-btn:focus-visible .crail-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* Mobil: gleiche Rail, nur kleiner (USER-Entscheid). Tooltips raus — auf Touch gibt es kein
Hover, sie wuerden beim Tap kurz aufblitzen. Der .sr-only-Text bleibt fuer Screenreader. */
@media (max-width: 900px) {
/* v=160 — Leiste wandert mobil an den UNTEREN Rand.
Grund (gemessen bei 375px): als senkrechte Leiste rechts stand sie bei x 330–375,
der Inhalt reicht aber bis 355 → 25 px Ueberlappung. Sie hat damit auf JEDER Seite
Text verdeckt, sichtbar z. B. das „g" in „Videoueberwachung". Auf der Startseite
allein 91 Glyphen-Kollisionen, davon 86 AUSSERHALB des Heros — es war also kein
Hero-Problem, sondern ein seitenweites.
⚠️ Die naheliegende Alternative — rechts Platz schaffen — wurde verworfen: eine
asymmetrische Polsterung an `.container` haette JEDE zentrierte Sektion sichtbar
aus der Mitte geschoben und die Lesebreite um 42 px (12 %) gekuerzt.
Unten links, weil `.to-top` unten RECHTS sitzt (kein Ueberlapp, gemessen). */
/* ⚠️ USER v=180: die Leiste steht mobil wieder RECHTS MITTIG wie auf dem Desktop (die untere
Andockung von v=160 ist raus) — nur schmaler, 40px statt 52px. Bewusst in Kauf genommen:
Inhalt, der bis an den rechten Gutter reicht, wird am Rand um ~20px ueberdeckt (bei 375px:
Leiste x 335–375, Inhalt bis 355). Position/Achse/Radien erbt sie vom Desktop-Block. */
.crail-btn {
width: 40px;
height: 40px;
}
.crail-btn svg {
width: 17px;
height: 17px;
}
.crail-tip {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.crail-btn,
.crail-tip {
transition: none;
}
}
/* ================= Nav search + search overlay ================= */
.nav-search {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid transparent;
background: transparent;
color: inherit;
cursor: pointer;
display: grid;
place-items: center;
flex-shrink: 0;
transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.nav-search:hover {
border-color: currentColor;
color: var(--c-primary);
}
.search-overlay {
position: fixed;
inset: 0;
z-index: 300;
display: none;
background: rgba(6, 18, 38, .55);
padding: clamp(60px, 12vh, 140px) 20px 20px;
}
.search-overlay.is-open {
display: block;
}
.search-box {
max-width: 640px;
margin: 0 auto;
background: #fff;
border-radius: var(--r-md);
overflow: hidden;
box-shadow: 0 24px 60px rgba(6, 18, 38, .4);
}
.search-field {
display: flex;
align-items: center;
gap: var(--sp-2_5);
padding: var(--sp-3_5) var(--sp-4);
border-bottom: 1px solid var(--c-border);
}
.search-field>svg {
color: var(--c-muted);
flex-shrink: 0;
}
#searchInput {
flex: 1;
border: 0;
outline: 0;
font: inherit;
font-size: 16px;
color: var(--c-navy);
background: transparent;
}
.search-close {
border: 0;
background: transparent;
color: var(--c-muted);
font-size: 13px;
cursor: pointer;
padding: 6px var(--sp-2);
}
.search-close:hover {
color: var(--c-primary);
}
.search-results {
list-style: none;
margin: 0;
padding: 6px;
max-height: 52vh;
overflow-y: auto;
}
.search-results a {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-4);
padding: 11px var(--sp-3);
border-radius: var(--r-sm);
color: var(--c-navy);
}
.search-results a:hover {
background: var(--c-bg-alt);
}
.sr-t {
font-weight: 550;
}
.sr-s {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-muted);
flex-shrink: 0;
}
.sr-empty {
padding: var(--sp-3_5) var(--sp-3);
color: var(--c-muted);
}
/* ================= Minimalist hover-lift (client brief: leichtes animiertes Anheben) ================= */
.chapter,
.ref-story,
.rowitem,
.catrow {
transition: transform var(--t-fast) var(--ease-out);
}
/* keep the lift snappy even after the reveal system sets a 0.6s transform transition */
.chapter.is-inview,
.ref-story.is-inview,
.rowitem.is-inview,
.catrow.is-inview {
transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) {
a.rowitem:hover,
.chapter:hover,
.ref-story:hover,
.catrow:hover {
transform: translateY(-4px);
}
}
@media (prefers-reduced-motion: reduce) {
a.rowitem:hover,
.chapter:hover,
.ref-story:hover,
.catrow:hover {
transform: none;
}
}
/* ---------------- Icon chips (ICON-VERSION EXPERIMENT) ----------------
Injected by main.js into [data-icon] elements. Remove with the JS block. */
.icon-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: var(--r-md);
background: var(--c-bg-alt);
color: var(--c-primary);
margin-bottom: var(--sp-3_5);
}
.icon-chip svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.on-dark .icon-chip,
.duel-problem .icon-chip {
background: rgba(255, 255, 255, .08);
color: var(--c-on-navy-2);
}
/* small inline variant (trust rows, quick infos) */
.icon-chip--sm,
.quickrows .icon-chip,
.hv2-trust .icon-chip {
width: 34px;
height: 34px;
margin-bottom: 0;
border-radius: var(--r-sm);
}
/* USER v=185: im hellen /kontakt/-Hero war der Chip unsichtbar — Default `--c-bg-alt` (#EEF2F7)
auf dem hellen Wash (~#F4F7FB). Primaerton-Tint wie `.rail .rail-item .icon-chip` (v=174). */
.quickrows .icon-chip {
background: rgba(38, 114, 185, .12);
}
.icon-chip--sm svg,
.quickrows .icon-chip svg,
.hv2-trust .icon-chip svg {
width: 18px;
height: 18px;
}
/* cards on bg-alt sections need surface-colored chips for contrast */
.section--alt .icon-chip,
.catnote .bene .icon-chip,
.partners .icon-chip,
.ub-jobs .icon-chip {
background: var(--c-surface);
}
/* ============================================================
SVC-CARD — reusable image-card grid (ICON-CARD EXPANSION)
Used by: Leistungen overview (--3), category pages (--2),
Branchen overview (--4). Whole card is an .
============================================================ */
.svc-card-grid {
display: grid;
gap: var(--sp-8);
}
.svc-card-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.svc-card-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.svc-card-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.svc-card {
display: flex;
flex-direction: column;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-lg);
overflow: hidden;
transition: border-color var(--t-fast) ease, transform var(--t-fast) var(--ease-out);
}
.svc-card:hover {
border-color: var(--c-primary);
transform: translateY(-3px);
}
.svc-card-media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.svc-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s var(--ease-out);
}
.svc-card:hover .svc-card-media img {
transform: scale(1.04);
}
.svc-card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(7, 26, 51, .72) 100%);
}
.svc-card-chip {
position: absolute;
top: 12px;
left: 12px;
z-index: 1;
display: inline-flex;
}
.svc-card-chip .icon-chip {
width: 40px;
height: 40px;
margin: 0;
background: rgba(255, 255, 255, .94);
color: var(--c-primary);
border: 1px solid rgba(15, 23, 42, .06);
}
.svc-card-name {
position: absolute;
left: 16px;
right: 16px;
bottom: 14px;
z-index: 1;
color: #fff;
font-size: clamp(17px, 1.5vw, 20px);
font-weight: 600;
letter-spacing: -0.01em;
}
.svc-card-body {
padding: clamp(18px, 1.8vw, 24px);
display: flex;
flex-direction: column;
flex: 1;
}
.svc-card-desc {
font-size: 14px;
line-height: 1.6;
color: var(--c-muted);
}
.svc-card-foot {
margin-top: auto;
padding-top: var(--sp-4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.svc-card-count {
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-muted);
font-variant-numeric: tabular-nums;
}
.svc-card .link-arrow {
font-size: 14px;
}
/* branchen checklist inside card body */
.svc-card-checks {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: var(--sp-3_5);
}
.svc-card-checks span {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
color: var(--c-body);
}
.svc-card-checks span .icon-chip {
width: 18px;
height: 18px;
margin: 0;
border-radius: 0;
background: transparent;
color: var(--c-primary);
}
.svc-card-checks span .icon-chip svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
@media (max-width: 1100px) {
.svc-card-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
.svc-card-grid--3 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
/* USER v=181: einspaltig 20 -> 40px zwischen den Karten (gleicher Wert wie .bento-grid mobil) */
.svc-card-grid {
gap: var(--sp-10);
}
.svc-card-grid--2,
.svc-card-grid--3,
.svc-card-grid--4 {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.svc-card:hover {
transform: none;
}
.svc-card:hover .svc-card-media img {
transform: none;
}
}
/* Kategorie-Kopf ohne Seite (IA v2): Label, nicht klickbar */
.mega-catname-label{cursor:default;pointer-events:none}