/* Schriften lokal eingebettet — keine Anfrage an Google Fonts (DSGVO).
Für WordPress liegen die Dateien unter fonts/*.woff2 und werden per @font-face
aus dem Theme geladen. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ============================================================
KUHN ARBEITSSICHERHEIT — Design System v2 "Prüfprotokoll"
Technische Präzision: Haarlinien, geteilte Raster, Register-
nummern, Prüfplaketten-Motive. Farben/Schriften unverändert
aus kuhn-design-tokens.md — mappen auf Elementor Globals.
============================================================ */
:root{
--color-primary: #0F3D2E;
--color-primary-hover: #0A2D22;
--color-primary-tint: #E8F2ED;
--color-accent: #FFB900;
--color-accent-hover: #E5A600;
--color-accent-deep: #8F6700; /* Amber auf Weiß: 5.1:1 — nur für Text */
--color-mint: #4CE09D;
--color-ink: #1A1A1A;
--color-body: #333333;
--color-muted: #747373;
--color-border: #E3E8E6;
--color-surface: #FFFFFF;
--color-surface-alt: #F2F2F2;
--color-dark: #1C393D;
--space-section: 5rem;
--space-section-lg: 7.5rem;
--container-max: 1200px;
--container-wide: 1440px;
--container-text: 720px;
--gutter: 1.25rem;
--radius: 14px;
--radius-sm: 8px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
--border: 1px solid var(--color-border);
--rule: 1px solid rgba(15,61,46,.12);
--rule-dark: 1px solid rgba(255,255,255,.14);
--transition: 180ms cubic-bezier(.4,0,.2,1);
--header-h: 88px;
--header-h-scrolled: 68px;
--header-h-mobile: 64px;
--font-head: 'Manrope', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
}
/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html.lenis, html.lenis body{ height: auto; }
/* The rest of what Lenis needs. The static file got away without these because
nothing else on the page touched overflow; inside WordPress a theme or a
plugin can, and then the wheel stops working entirely. */
html.lenis.lenis-stopped{ overflow: hidden; }
html.lenis.lenis-scrolling iframe{ pointer-events: none; }
html.lenis [data-lenis-prevent]{ overscroll-behavior: contain; }
html.lenis.lenis-smooth{ scroll-behavior: auto !important; }
body.kek-scope{
margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7;
color: var(--color-body); background: var(--color-surface);
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.kek-scope img{ max-width: 100%; height: auto; display: block; }
/* Hellgrauer Platzhalter nur für Inhaltsbilder — nie hinter Logos, sonst entsteht dort ein sichtbarer Kasten. */
.kek-scope .fig-media img, .kek-scope .post-media img, .kek-scope .cockpit-fig img, .kek-scope .modell-fig img{ background-color: var(--color-surface-alt); }
.kek-scope .logo img, .kek-scope .logo-mark-img, .kek-scope .logo-box img, .kek-scope .g-mark{ background: none !important; }
.kek-scope ul, .kek-scope ol{ list-style: none; margin: 0; padding: 0; }
.kek-scope button{ font-family: inherit; }
.kek-scope blockquote{ margin: 0; }
.kek-scope a{ color: inherit; }
.kek-scope ::selection{ background: var(--color-accent); color: var(--color-ink); }
.kek-scope :focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 2px; }
.kek-scope .skip-link{
position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-primary);
color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.kek-scope .skip-link:focus{ left: 0; }
body.kek-scope.nav-locked{ overflow: hidden; }
/* ---------- Typo ---------- */
.kek-scope h1, .kek-scope h2, .kek-scope h3, .kek-scope h4{ font-family: var(--font-head); color: var(--color-ink); margin: 0; }
.kek-scope h1{ font-weight: 800; font-size: clamp(2.625rem, 6vw, 4.5rem); line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: break-word; hyphens: auto; }
.kek-scope h2{ font-weight: 800; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.025em; }
.kek-scope h3{ font-weight: 700; font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.01em; }
.kek-scope h4{ font-weight: 600; font-size: 1.25rem; line-height: 1.35; }
.kek-scope p{ margin: 0; }
.kek-scope .lead{ font-size: 1.1875rem; line-height: 1.65; color: var(--color-body); }
.kek-scope .small{ font-size: .875rem; line-height: 1.55; }
/* Amber-Markierung im Titelwort — flächige Unterlegung, umbruchfähig */
.kek-scope .mark{
background-image: linear-gradient(var(--color-accent), var(--color-accent));
background-repeat: no-repeat; background-size: 100% .3em; background-position: 0 84%;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.js body.kek-scope .mark{ background-size: 0% .3em; }
html.js body.kek-scope .mark.in-view{ background-size: 100% .3em; transition: background-size .9s .12s cubic-bezier(.65,0,.35,1); }
/* ---------- Layout ---------- */
.kek-scope .container{ max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.kek-scope .container-text{ max-width: var(--container-text); margin-inline: auto; padding-inline: var(--gutter); }
.kek-scope section{ padding-block: var(--space-section); }
@media (min-width: 1024px) { .kek-scope section{ padding-block: var(--space-section-lg); } }
/* ---------- Protokollkopf: Haarlinie · Kennung · Registernummer ---------- */
.kek-scope .sec-head{ margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.kek-scope .sec-head .sec-meta{
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding-top: 1rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
background: linear-gradient(rgba(15,61,46,.12), rgba(15,61,46,.12)) left top / 100% 1px no-repeat;
}
html.js body.kek-scope .sec-head .sec-meta{ background-size: 0% 1px; transition: background-size 1s cubic-bezier(.65,0,.35,1); }
html.js body.kek-scope .sec-head .sec-meta.in-view{ background-size: 100% 1px; }
.kek-scope .on-dark .sec-head .sec-meta{ background-image: linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)); }
.kek-scope .eyebrow{
display: inline-flex; align-items: center; gap: .625rem;
font-family: var(--font-body); font-weight: 600; font-size: .8125rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-deep); line-height: 1.4;
}
.kek-scope .eyebrow::before{ content: ""; width: .5rem; height: .5rem; background: var(--color-accent); flex: none; }
.kek-scope .on-dark .eyebrow{ color: var(--color-accent); }
.kek-scope .sec-index{
font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em;
color: var(--color-muted); white-space: nowrap;
}
.kek-scope .on-dark .sec-index{ color: rgba(255,255,255,.45); }
.kek-scope .sec-head .sec-cols{ display: grid; gap: 1.25rem 3rem; align-items: end; }
@media (min-width: 1024px) {
.kek-scope .sec-head .sec-cols{ grid-template-columns: 7fr 5fr; }
.kek-scope .sec-head .sec-cols .lead{ padding-bottom: .4rem; }
}
.kek-scope .sec-head .lead{ max-width: 40rem; }
/* ---------- Buttons ---------- */
.kek-scope .btn{
display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
font-family: var(--font-body); font-weight: 600; font-size: 1rem; letter-spacing: .01em; line-height: 1;
padding: 1rem 1.875rem; border-radius: var(--radius-pill); text-decoration: none;
border: 1.5px solid transparent; cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
}
.kek-scope .btn:hover{ transform: translateY(-2px); }
.kek-scope .btn:active{ transform: translateY(0); }
.kek-scope .btn .arr{ transition: transform 200ms cubic-bezier(.4,0,.2,1); }
.kek-scope .btn:hover .arr{ transform: translateX(4px); }
.kek-scope .btn-primary{ background: var(--color-accent); color: var(--color-ink); box-shadow: var(--shadow-sm); }
.kek-scope .btn-primary:hover{ background: var(--color-accent-hover); box-shadow: var(--shadow-md); }
.kek-scope .btn-secondary{ background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.kek-scope .btn-secondary:hover{ background: var(--color-primary); color: #fff; }
.kek-scope .btn-ondark{ background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); }
.kek-scope .btn-ondark:hover{ box-shadow: var(--shadow-md); }
.kek-scope .btn-tertiary{
display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--color-primary);
text-decoration: none; position: relative; padding-bottom: .2rem;
}
.kek-scope .btn-tertiary::after{
content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
background: var(--color-accent); transform: scaleX(0); transform-origin: left;
transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.kek-scope .btn-tertiary:hover::after{ transform: scaleX(1); }
/* Textlinks im Fließtext */
.kek-scope .link-amber{ color: var(--color-primary); font-weight: 600; text-decoration: none; background-image: linear-gradient(var(--color-accent), var(--color-accent)); background-repeat: no-repeat; background-size: 0% 2px; background-position: 0 100%; transition: background-size 220ms cubic-bezier(.4,0,.2,1); padding-bottom: 2px; }
.kek-scope .link-amber:hover{ background-size: 100% 2px; }
/* ---------- Hero ---------- */
.kek-scope .hero{ position: relative; padding-top: calc(var(--header-h-mobile) + 2.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
@media (min-width: 1024px) { .kek-scope .hero{ padding-top: calc(var(--header-h) + 36px + 3.5rem); } }
.kek-scope .hero::before{ /* Blaupausen-Raster hinter der Bildspalte */
content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 100%; z-index: 0;
background:
linear-gradient(rgba(15,61,46,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,61,46,.05) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
mask-image: linear-gradient(90deg, transparent, #000 30%);
}
.kek-scope .hero .container{ position: relative; z-index: 1; }
.kek-scope .hero-mark{
position: absolute; z-index: 0; right: -1%; bottom: 4%; pointer-events: none; user-select: none;
font-family: var(--font-head); font-weight: 800; letter-spacing: .02em;
font-size: clamp(7rem, 15vw, 13rem); line-height: 1;
color: transparent; -webkit-text-stroke: 1.5px rgba(15,61,46,.07);
display: none;
}
@media (min-width: 1024px) { .kek-scope .hero-mark{ display: block; } }
.kek-scope .scroll-cue{
position: absolute; left: var(--gutter); bottom: 1.75rem; z-index: 2;
display: none; flex-direction: column; align-items: center; gap: .75rem;
font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted);
writing-mode: vertical-rl; transition: opacity .5s, transform .5s;
}
@media (min-width: 1024px) { .kek-scope .scroll-cue{ display: flex; } }
.kek-scope .scroll-cue-line{ width: 1px; height: 52px; background: var(--color-border); position: relative; overflow: hidden; }
.kek-scope .scroll-cue-line::after{ content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background: var(--color-accent); animation: cue-drop 2.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cue-drop { 0% { top: -40%; } 60%, 100% { top: 110%; } }
.kek-scope .scroll-cue.is-gone{ opacity: 0; transform: translateY(10px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kek-scope .scroll-cue-line::after{ animation: none; } }
.kek-scope .hero-grid{ display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .kek-scope .hero-grid{ grid-template-columns: 7fr 5fr; gap: 4.5rem; } }
.kek-scope .hero h1{ margin: 1.5rem 0 1.5rem; max-width: 15ch; }
.kek-scope .hero .lead{ max-width: 34rem; margin-bottom: 2.25rem; }
.kek-scope .hero-cta{ display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-bottom: 3rem; }
/* Vertrauensleiste: geteiltes Raster, wie eine Prüfliste */
.kek-scope .trust-strip{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--color-border); border: var(--border);
}
@media (min-width: 768px) { .kek-scope .trust-strip{ grid-template-columns: repeat(4, 1fr); } }
.kek-scope .trust-strip > div{
background: var(--color-surface); padding: 1rem 1.125rem;
font-size: .8125rem; font-weight: 600; line-height: 1.45; color: var(--color-ink);
display: flex; gap: .55rem; align-items: flex-start;
}
.kek-scope .trust-strip svg{ flex: none; margin-top: .1rem; color: var(--color-accent-deep); }
/* Portrait als technische Abbildung: Eckmarken + Bildunterschrift */
.kek-scope .fig{ position: relative; }
.kek-scope .fig-media{ position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.kek-scope .fig-media img{ width: 100%; height: 100%; object-fit: cover; scale: 1; transition: scale .9s cubic-bezier(.2,.6,.2,1); }
.kek-scope .fig:hover .fig-media img{ scale: 1.05; }
.kek-scope .fig .fig-caption{ transition: color var(--transition); }
.kek-scope .fig:hover .fig-caption strong{ color: var(--color-primary); }
.kek-scope .fig-ticks span{ position: absolute; width: 22px; height: 22px; border: 2px solid var(--color-accent); z-index: 2; }
.kek-scope .fig-ticks span:nth-child(1){ top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.kek-scope .fig-ticks span:nth-child(2){ top: -8px; right: -8px; border-left: 0; border-bottom: 0; }
.kek-scope .fig-ticks span:nth-child(3){ bottom: -8px; left: -8px; border-right: 0; border-top: 0; }
.kek-scope .fig-ticks span:nth-child(4){ bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.kek-scope .fig-caption{
display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
border-bottom: var(--rule); padding: .875rem 2px .625rem;
font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted);
}
.kek-scope .fig-caption strong{ color: var(--color-ink); letter-spacing: .1em; }
.kek-scope .hero-fig{ max-width: 460px; margin-inline: auto; width: 100%; }
.kek-scope .hero-fig .fig-media{ aspect-ratio: 4 / 5; }
.kek-scope .play-btn{
position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; z-index: 3;
display: flex; align-items: center; justify-content: center; border-radius: 50%;
background: var(--color-accent); color: var(--color-ink); border: none; cursor: pointer;
box-shadow: 0 8px 32px rgba(0,0,0,.28); text-decoration: none;
transition: transform 200ms cubic-bezier(.4,0,.2,1), background-color var(--transition);
}
.kek-scope .play-btn{ scale: 1; }
.kek-scope .hero-v4 .play-btn{ top: auto; left: auto; bottom: 14px; right: 14px; transform: none; width: 3.25rem; height: 3.25rem; }
@media (max-width: 480px) { .kek-scope .hero-v4 .play-btn{ width: 2.875rem; height: 2.875rem; } }
.kek-scope .play-btn:hover{ scale: 1.07; background: var(--color-accent-hover); }
.kek-scope .play-btn svg{ margin-left: 4px; }
/* ---------- Laufband (Ticker) ---------- */
.kek-scope .ticker{ background: var(--color-primary); padding: 1.1rem 0; overflow: hidden; border-block: 1px solid var(--color-primary-hover); }
.kek-scope .ticker-track{ display: flex; gap: 3rem; width: max-content; animation: ticker-scroll 36s linear infinite; }
.kek-scope .ticker:hover .ticker-track{ animation-play-state: paused; }
.kek-scope .ticker-item{
display: flex; align-items: center; gap: 3rem; flex: none;
font-family: var(--font-head); font-weight: 800; font-size: clamp(1.125rem, 2vw, 1.5rem);
letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.62);
}
.kek-scope .ticker-item .tick-sep{ color: var(--color-accent); -webkit-text-stroke: 0; font-size: 1em; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Logo-Wand ---------- */
.kek-scope .logo-wall{ padding-block: 3.5rem; border-bottom: var(--rule); }
.kek-scope .logo-wall .wall-label{ text-align: center; margin-bottom: 2rem; }
.kek-scope .marquee{ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.kek-scope .marquee-track{ display: flex; gap: 3.5rem; width: max-content; animation: marquee-scroll 42s linear infinite; }
.kek-scope .marquee:hover .marquee-track{ animation-play-state: paused; }
.kek-scope .logo-box{
flex: none; display: flex; align-items: center; justify-content: center;
font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--color-ink);
padding: .5rem 0; letter-spacing: .01em; white-space: nowrap;
transition: opacity var(--transition), filter var(--transition);
}
.kek-scope .logo-box:hover{ opacity: 1; }
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ---------- Register (Problemliste 01–05) ---------- */
.kek-scope .split-2{ display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .kek-scope .split-2{ grid-template-columns: 5fr 7fr; gap: 4.5rem; } .kek-scope .split-2.rev{ grid-template-columns: 7fr 5fr; } }
.kek-scope .ledger{ border-top: var(--rule); }
.kek-scope .ledger-row{
display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.25rem; align-items: baseline;
padding: 1.375rem 0; border-bottom: var(--rule);
transition: padding-left 220ms cubic-bezier(.4,0,.2,1);
}
.kek-scope .ledger-row:hover{ padding-left: .625rem; }
.kek-scope .ledger-num{
font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; line-height: 1;
color: transparent; -webkit-text-stroke: 1.25px var(--color-accent-deep);
transition: color .45s cubic-bezier(.4,0,.2,1);
}
.kek-scope .ledger-row.is-read .ledger-num{ color: var(--color-accent-deep); }
.kek-scope .ledger-row .ledger-ico{ transition: color .45s; }
.kek-scope .ledger-row.is-read .ledger-ico{ color: var(--color-accent-deep); }
.kek-scope .ledger-row p{ font-size: 1.125rem; line-height: 1.55; color: var(--color-ink); font-weight: 500; }
.kek-scope .sticky-col{ position: sticky; top: 120px; }
@media (max-width: 1023px) { .kek-scope .sticky-col{ position: static; } }
/* ---------- Dunkles Pflicht-Band mit §-Wasserzeichen ---------- */
.kek-scope .band-dark{ position: relative; background: var(--color-primary); color: #fff; overflow: hidden; }
.kek-scope .band-dark.teal{ background: var(--color-dark); }
.kek-scope .band-dark h2, .kek-scope .band-dark h3{ color: #fff; }
.kek-scope .band-dark .band-bg{
position: absolute; inset: -12% 0; z-index: 0; pointer-events: none;
background-size: cover; background-position: center; opacity: .08;
}
.kek-scope .band-dark .container{ position: relative; z-index: 2; }
.kek-scope .band-dark .lead{ color: rgba(255,255,255,.8); }
.kek-scope .band-mark{
position: absolute; z-index: 1; right: -2%; top: 50%; transform: translateY(-50%);
font-family: var(--font-head); font-weight: 800; font-size: clamp(18rem, 34vw, 30rem); line-height: 1;
color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.07);
user-select: none; pointer-events: none;
}
/* Statistikzeile: Haarlinien statt Karten */
.kek-scope .stat-row{ display: grid; gap: 2.5rem; margin: clamp(2.5rem, 5vw, 3.5rem) 0; }
@media (min-width: 768px) { .kek-scope .stat-row{ grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.kek-scope .stat{ border-top: 2px solid var(--color-accent); padding-top: 1.375rem; }
.kek-scope .stat-num{
font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 5.5vw, 4.75rem);
line-height: 1; letter-spacing: -0.03em; color: var(--color-accent); display: flex; align-items: baseline; gap: .25rem;
}
.kek-scope .stat-num .unit{ font-size: .45em; font-weight: 800; letter-spacing: 0; }
.kek-scope .stat-label{ font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; color: #fff; margin-top: .875rem; }
.kek-scope .stat-ctx{ font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.68); margin-top: .5rem; max-width: 30ch; }
/* ---------- Checkliste (Entlastung) ---------- */
.kek-scope .check-list{ display: grid; gap: 0; border-top: var(--rule); }
.kek-scope .check-item{ display: flex; gap: 1.125rem; padding: 1.375rem 0; border-bottom: var(--rule); align-items: flex-start; }
.kek-scope .check-item svg{ flex: none; margin-top: .2rem; color: var(--color-accent-deep); }
.kek-scope .check-item p{ font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink); }
/* ---------- Geteiltes Raster (Leistungen, Vorteile, Stimmen) ---------- */
.kek-scope .tgrid{ display: grid; gap: 1px; background: var(--color-border); border: var(--border); }
.kek-scope .tgrid > *{ background: var(--color-surface); }
.kek-scope .tgrid-3{ grid-template-columns: 1fr; }
@media (min-width: 768px) { .kek-scope .tgrid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kek-scope .tgrid-3{ grid-template-columns: repeat(3, 1fr); } }
.kek-scope .tgrid-2{ grid-template-columns: 1fr; }
@media (min-width: 768px) { .kek-scope .tgrid-2{ grid-template-columns: repeat(2, 1fr); } }
/* Leistungszelle — Hover flutet tiefgrün */
.kek-scope .svc-cell{
position: relative; padding: 2.25rem 2rem 2rem; display: flex; flex-direction: column; gap: 1.125rem;
text-decoration: none; overflow: hidden; isolation: isolate;
}
.kek-scope .svc-cell::before{
content: ""; position: absolute; inset: 0; background: var(--color-primary); z-index: -1;
transform: scaleY(0); transform-origin: bottom; transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.kek-scope .svc-cell:hover::before, .kek-scope .svc-cell:focus-visible::before{ transform: scaleY(1); }
.kek-scope .svc-top{ display: flex; align-items: center; justify-content: space-between; }
.kek-scope .svc-icon{ color: var(--color-primary); transition: color 260ms; }
.kek-scope .svc-code{ font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; color: var(--color-muted); transition: color 260ms; }
.kek-scope .svc-cell h3{ font-size: 1.375rem; transition: color 260ms; }
.kek-scope .svc-cell ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.kek-scope .svc-cell li{ position: relative; padding-left: 1.125rem; font-size: .9375rem; line-height: 1.5; color: var(--color-body); transition: color 260ms; }
.kek-scope .svc-cell li::before{ content: ""; position: absolute; left: 0; top: .5em; width: .375rem; height: .375rem; background: var(--color-accent); }
.kek-scope .svc-more{ margin-top: auto; padding-top: 1rem; font-weight: 600; font-size: .9375rem; color: var(--color-primary); display: inline-flex; gap: .5rem; align-items: center; transition: color 260ms, gap 200ms; }
.kek-scope .svc-cell:hover .svc-icon, .kek-scope .svc-cell:hover .svc-more{ color: var(--color-accent); }
.kek-scope .svc-cell:hover h3{ color: #fff; }
.kek-scope .svc-cell:hover li, .kek-scope .svc-cell:hover .svc-code{ color: rgba(255,255,255,.82); }
.kek-scope .svc-cell:hover .svc-more{ gap: .875rem; }
.kek-scope .svc-cell::after{
content: ""; position: absolute; top: 12px; right: 12px; width: 14px; height: 14px;
border: 2px solid var(--color-accent); border-left: 0; border-bottom: 0;
opacity: 0; transform: translate(-5px, 5px); transition: opacity .25s, transform .25s;
}
.kek-scope .svc-cell:hover::after, .kek-scope .svc-cell:focus-visible::after{ opacity: 1; transform: translate(0, 0); }
/* Vorteilszelle */
.kek-scope .ben-cell{ padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: .875rem; }
.kek-scope .ben-cell .ben-idx{ font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; color: var(--color-accent-deep); }
.kek-scope .ben-cell h3{ font-size: 1.3125rem; }
.kek-scope .ben-cell p{ font-size: .9855rem; line-height: 1.65; }
/* ---------- Prozess ---------- */
.kek-scope .steps{ display: grid; gap: 2.75rem; counter-reset: step; margin-top: clamp(2rem,4vw,3rem); }
@media (min-width: 768px) { .kek-scope .steps{ grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.kek-scope .step{ border-top: var(--rule-dark); padding-top: 1.5rem; position: relative; }
.kek-scope .step-num{
font-family: var(--font-head); font-weight: 800; font-size: clamp(4rem, 7vw, 6rem); line-height: .95;
color: transparent; -webkit-text-stroke: 1.5px var(--color-accent); display: block; margin-bottom: 1rem;
transition: color .5s cubic-bezier(.4,0,.2,1);
}
.kek-scope .step.is-read .step-num{ color: var(--color-accent); }
.kek-scope .step h3{ color: #fff; font-size: 1.375rem; margin-bottom: .625rem; }
.kek-scope .step p{ color: rgba(255,255,255,.72); font-size: .9855rem; line-height: 1.65; }
/* ---------- Über mich ---------- */
.kek-scope .chip-row{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0; }
.kek-scope .chip{
font-size: .78125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--color-primary); border: 1px solid rgba(15,61,46,.28); padding: .45rem .8rem;
transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.kek-scope .chip:hover{ background: var(--color-primary); color: #fff; }
.kek-scope .about-fig{ max-width: 480px; }
.kek-scope .about-fig .fig-media{ aspect-ratio: 4 / 5; }
/* ---------- Kundenstimmen ---------- */
.kek-scope .rating-line{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.5rem; margin-bottom: 2.25rem; }
.kek-scope .rating-num{ font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -0.03em; color: var(--color-ink); }
.kek-scope .rating-meta{ font-size: .9375rem; color: var(--color-muted); font-weight: 600; }
.kek-scope .stars{ color: var(--color-accent-deep); letter-spacing: .15em; font-size: 1rem; }
.kek-scope .quote-cell{ padding: 2.25rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: inset 0 0 0 0 var(--color-accent); transition: box-shadow .3s cubic-bezier(.4,0,.2,1); }
.kek-scope .quote-cell:hover{ box-shadow: inset 3px 0 0 0 var(--color-accent); }
.kek-scope .quote-glyph{ transition: transform .3s cubic-bezier(.4,0,.2,1); }
.kek-scope .quote-cell:hover .quote-glyph{ transform: translateX(6px); }
.kek-scope .quote-glyph{ font-family: var(--font-head); font-weight: 800; font-size: 3.25rem; line-height: .6; color: var(--color-accent); }
.kek-scope .quote-cell blockquote{ margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.1875rem; line-height: 1.5; color: var(--color-ink); letter-spacing: -0.01em; }
.kek-scope .quote-who{ margin-top: auto; padding-top: .5rem; border-top: var(--rule); }
.kek-scope .quote-who strong{ display: block; font-family: var(--font-head); font-weight: 700; color: var(--color-ink); }
.kek-scope .quote-who span{ font-size: .875rem; color: var(--color-muted); }
/* ---------- Regionen ---------- */
.kek-scope .region-grid{ display: grid; gap: 1px; background: var(--color-border); border: var(--border); grid-template-columns: repeat(2, 1fr); }
.kek-scope .region-card{
background: var(--color-surface); padding: 1.5rem 1.375rem; text-decoration: none;
display: flex; flex-direction: column; gap: .25rem; position: relative; overflow: hidden; isolation: isolate;
}
.kek-scope .region-card::before{ content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-primary); transform: scaleY(0); transform-origin: bottom; transition: transform 280ms cubic-bezier(.4,0,.2,1); }
.kek-scope .region-card:hover::before{ transform: scaleY(1); }
.kek-scope .region-card strong{ font-family: var(--font-head); font-weight: 800; font-size: 1.1875rem; color: var(--color-ink); transition: color 240ms; }
.kek-scope .region-card span{ font-size: .8125rem; color: var(--color-muted); font-weight: 600; letter-spacing: .04em; transition: color 240ms; }
.kek-scope .region-card .arr{ position: absolute; right: 1.25rem; top: 1.5rem; color: var(--color-primary); transition: color 240ms, transform 240ms; }
.kek-scope .region-card:hover strong{ color: #fff; }
.kek-scope .region-card:hover span{ color: rgba(255,255,255,.75); }
.kek-scope .region-card:hover .arr{ color: var(--color-accent); transform: translateX(3px); }
.kek-scope .city-links{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.kek-scope .city-links a{
font-size: .8125rem; font-weight: 600; color: var(--color-body); text-decoration: none;
border: 1px solid var(--color-border); padding: .4rem .75rem;
transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.kek-scope .city-links a:hover{ border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-tint); }
.kek-scope .region-map{ position: relative; }
/* ---------- FAQ: nur Linien ---------- */
.kek-scope .faq{ border-top: var(--rule); }
.kek-scope .faq-item{ border-bottom: var(--rule); }
.kek-scope .faq-q{
width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: 1.5rem 0; font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem;
color: var(--color-ink); line-height: 1.35; letter-spacing: -0.01em;
transition: color var(--transition);
overflow-wrap: break-word; hyphens: auto;
}
@media (max-width: 480px) { .kek-scope .faq-q{ font-size: 1.0625rem; gap: .75rem; } }
.kek-scope .faq-q:hover{ color: var(--color-primary); }
.kek-scope .faq-ind{ flex: none; width: 2.25rem; height: 2.25rem; border: 1.5px solid rgba(15,61,46,.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background-color var(--transition), color var(--transition), border-color var(--transition); }
.kek-scope .faq-item.is-open .faq-ind{ background: var(--color-primary); color: var(--color-accent); border-color: var(--color-primary); }
.kek-scope .faq-ind svg{ transition: transform 320ms cubic-bezier(.4,0,.2,1); }
.kek-scope .faq-item.is-open .faq-ind svg{ transform: rotate(180deg); }
.kek-scope .faq-a{ height: 0; overflow: hidden; }
.kek-scope .faq-a-inner{ padding: 0 0 1.75rem; max-width: 46rem; color: var(--color-body); line-height: 1.7; }
html:not(.js) .faq-a{ height: auto; }
/* ---------- Blog ---------- */
.kek-scope .post-grid{ display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .kek-scope .post-grid{ grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.kek-scope .post-card{ text-decoration: none; display: flex; flex-direction: column; gap: 1rem; }
.kek-scope .post-card .fig-media{ aspect-ratio: 16 / 9; }
.kek-scope .post-card img{ transition: transform 600ms cubic-bezier(.4,0,.2,1); }
.kek-scope .post-card:hover img{ transform: scale(1.04); }
.kek-scope .post-meta{ display: flex; align-items: center; gap: .75rem; font-size: .78125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); border-top: var(--rule); padding-top: .875rem; }
.kek-scope .post-meta .cat{ color: var(--color-accent-deep); }
.kek-scope .post-card h3{ font-size: 1.25rem; line-height: 1.3; transition: color var(--transition); }
.kek-scope .post-card:hover h3{ color: var(--color-primary); }
.kek-scope .post-card p{ font-size: .9375rem; line-height: 1.6; color: var(--color-body); }
/* ---------- Abschluss-CTA ---------- */
.kek-scope .final-cta{ background: var(--color-surface-alt); }
.kek-scope .final-cta .cta-inner{ display: grid; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .kek-scope .final-cta .cta-inner{ grid-template-columns: 7fr 5fr; gap: 4rem; } }
.kek-scope .final-cta h2{ max-width: 16ch; }
.kek-scope .final-cta .cta-side{ display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 1024px) { .kek-scope .final-cta .cta-side{ align-items: flex-end; text-align: right; } }
.kek-scope .cta-phone{ font-size: 1rem; color: var(--color-body); }
.kek-scope .cta-phone a{ font-weight: 700; color: var(--color-primary); text-decoration: none; }
.kek-scope .cta-phone a:hover{ text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
/* ---------- Header ---------- */
.kek-scope .site-header{
position: fixed; inset: 0 0 auto 0; z-index: 100;
transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.kek-scope .site-header.is-hidden{ transform: translateY(-100%); }
/* Scroll-Fortschritt: dünne Amber-Messlinie am oberen Rand */
.kek-scope .scroll-progress{
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
}
.kek-scope .scroll-progress span{
display: block; height: 100%; background: var(--color-accent);
transform: scaleX(0); transform-origin: left;
}
.kek-scope .utility-bar{
height: 36px; background: var(--color-primary);
color: rgba(255,255,255,.72);
font-size: .71875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,.1);
display: none;
transition: opacity .3s, transform .3s;
}
@media (min-width: 1024px) { .kek-scope .utility-bar{ display: block; } }
.kek-scope .utility-bar .container{ height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kek-scope .utility-bar .util-label{ display: inline-flex; align-items: center; gap: .625rem; }
.kek-scope .utility-bar .util-label::before{ content: ""; width: .4375rem; height: .4375rem; background: var(--color-accent); flex: none; }
.kek-scope .utility-bar a{ color: rgba(255,255,255,.72); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; letter-spacing: .06em; transition: color var(--transition); }
.kek-scope .utility-bar a:hover{ color: var(--color-accent); }
.kek-scope .utility-bar .util-links{ display: flex; align-items: center; gap: 1.25rem; }
.kek-scope .utility-bar .util-links a + a{ border-left: 1px solid rgba(255,255,255,.16); padding-left: 1.25rem; }
.kek-scope .is-scrolled .utility-bar{ opacity: 0; transform: translateY(-100%); pointer-events: none; position: absolute; width: 100%; }
.kek-scope .main-bar{
height: var(--header-h-mobile);
background: var(--color-surface);
border-bottom: var(--rule);
transition: height .3s cubic-bezier(.4,0,.2,1), background-color .3s, box-shadow .3s;
display: flex; align-items: center;
}
@media (min-width: 1024px) { .kek-scope .main-bar{ height: var(--header-h); } }
body.kek-scope.header-transparent .site-header:not(.is-scrolled) .main-bar{ background: transparent; border-bottom-color: transparent; }
.kek-scope .site-header.is-scrolled .main-bar{ background: var(--color-surface); box-shadow: var(--shadow-sm); border-bottom-color: transparent; }
@media (min-width: 1024px) { .kek-scope .site-header.is-scrolled .main-bar{ height: var(--header-h-scrolled); } }
.kek-scope .main-bar .container{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.kek-scope .logo{ display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.kek-scope .logo-mark{ width: 42px; height: 42px; flex: 0 0 42px; }
.kek-scope .logo-word{ font: 800 1.1875rem/1 'Manrope', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--color-ink); }
.kek-scope .logo-word small{ display: block; margin-top: .3rem; font: 600 0.59375rem/1 'Inter', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted); }
.kek-scope .main-nav{ display: none; }
@media (min-width: 1024px) { .kek-scope .main-nav{ display: flex; align-items: center; gap: 2.25rem; } }
.kek-scope .main-nav > li{ position: relative; }
.kek-scope .main-nav > li#mega-parent{ position: static; } /* Panel verankert sich am Header, nicht am Listenelement */
.kek-scope .nav-link{
position: relative; display: inline-flex; align-items: center; gap: .4rem;
font: 600 0.8125rem/1 'Inter', sans-serif; letter-spacing: .1em; text-transform: uppercase;
color: var(--color-ink);
text-decoration: none; padding: .75rem 0; background: none; border: 0; cursor: pointer;
transition: color var(--transition);
}
.kek-scope .nav-link:hover{ color: var(--color-primary); }
.kek-scope .nav-link::after{
content: ""; position: absolute; left: 0; bottom: 4px; height: 2px; width: 100%;
background: var(--color-accent); transform: scaleX(0); transform-origin: left;
transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.kek-scope .nav-link:hover::after, .kek-scope .nav-link:focus-visible::after, .kek-scope .nav-link[aria-current="page"]::after{ transform: scaleX(1); }
.kek-scope .nav-link .chev{ transition: transform 200ms; }
.kek-scope .main-nav li.mega-open > .nav-link .chev{ transform: rotate(180deg); }
.kek-scope .header-actions{ display: none; align-items: center; gap: 1.5rem; }
@media (min-width: 1024px) { .kek-scope .header-actions{ display: flex; } }
.kek-scope .header-phone{
display: inline-flex; align-items: center; gap: .55rem;
font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums;
color: var(--color-ink); text-decoration: none;
border-left: 1px solid rgba(15,61,46,.16); padding-left: 1.5rem;
transition: color var(--transition);
}
.kek-scope .header-phone svg{ color: var(--color-accent-deep); }
.kek-scope .header-phone:hover{ color: var(--color-primary); }
.kek-scope .header-actions .btn{ padding: .8125rem 1.5rem; font-size: .9375rem; }
/* Mega menu */
.kek-scope .mega-panel{
position: absolute; top: 100%; left: 0; right: 0;
background: var(--color-surface); box-shadow: var(--shadow-md);
border-top: 2px solid var(--color-primary);
border-bottom: var(--rule);
padding: 2.25rem 0 2.5rem;
overflow: hidden;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .25s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1), visibility .25s;
}
.kek-scope .site-header .mega-open .mega-panel, .kek-scope .mega-panel:focus-within{ opacity: 1; visibility: visible; transform: translateY(0); }
.kek-scope .mega-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 280px; gap: 0; align-items: stretch; }
.kek-scope .mega-col{ display: flex; flex-direction: column; gap: .75rem; padding: 0 1.75rem; border-left: var(--rule); min-width: 0; }
.kek-scope .mega-col:first-child{ padding-left: 0; border-left: 0; }
.kek-scope .mega-item{
position: relative; display: flex; gap: .875rem; align-items: flex-start; text-decoration: none;
padding: 1rem 1rem 1rem 1.125rem; border-radius: 0; overflow: hidden; isolation: isolate;
flex: 1;
}
.kek-scope .mega-item::before{
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: var(--color-accent); transform: scaleY(0); transform-origin: bottom;
transition: transform 220ms cubic-bezier(.4,0,.2,1);
}
.kek-scope .mega-item::after{
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--color-primary-tint);
opacity: 0; transition: opacity 180ms;
}
.kek-scope .mega-item:hover::before, .kek-scope .mega-item:focus-visible::before{ transform: scaleY(1); }
.kek-scope .mega-item:hover::after, .kek-scope .mega-item:focus-visible::after{ opacity: 1; }
.kek-scope .mega-item svg{ flex: 0 0 24px; color: var(--color-primary); margin-top: 2px; }
.kek-scope .mega-item strong{ display: flex; align-items: baseline; justify-content: space-between; gap: .625rem; font: 700 1.0625rem/1.3 'Manrope', sans-serif; color: var(--color-ink); }
.kek-scope .mega-item > span{ min-width: 0; flex: 1; }
.kek-scope .mega-item span span{ display: block; margin-top: .25rem; font-size: 0.875rem; line-height: 1.5; color: var(--color-muted); }
.kek-scope .mega-code{ display: inline-block; margin: 0; font: 800 .625rem/1 'Manrope', sans-serif; letter-spacing: .12em; color: var(--color-accent-deep); flex: none; }
.kek-scope .mega-cta{
position: relative; background: var(--color-primary); border-radius: 0;
padding: 1.75rem 1.5rem; margin-left: 1.75rem;
display: flex; flex-direction: column; gap: .75rem; justify-content: center;
}
.kek-scope .mega-cta::before, .kek-scope .mega-cta::after{
content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-accent);
}
.kek-scope .mega-cta::before{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.kek-scope .mega-cta::after{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.kek-scope .mega-cta h4{ font-size: 1.0625rem; color: #fff; }
.kek-scope .mega-cta p{ font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.75); }
.kek-scope .mega-cta .btn-secondary{ border-color: var(--color-accent); color: var(--color-accent); align-self: flex-start; padding: .7rem 1.25rem; font-size: .9rem; }
.kek-scope .mega-cta .btn-secondary:hover{ background: var(--color-accent); color: var(--color-ink); }
/* Mobile controls */
.kek-scope .mobile-controls{ display: flex; align-items: center; gap: .75rem; }
@media (min-width: 1024px) { .kek-scope .mobile-controls{ display: none; } }
.kek-scope .icon-btn{
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: var(--radius-sm);
background: none; border: 0; color: var(--color-ink); cursor: pointer;
}
.kek-scope .icon-btn:hover{ background: var(--color-surface-alt); }
/* Mobile overlay */
.kek-scope .mobile-overlay{
position: fixed; inset: 0; z-index: 150; background: var(--color-primary);
display: flex; flex-direction: column;
padding: 1rem 1.25rem 2rem;
opacity: 0; visibility: hidden; transform: translateY(-2%);
overflow-y: auto;
}
.kek-scope .mobile-overlay.is-open{ opacity: 1; visibility: visible; transform: none; }
.kek-scope .mobile-overlay-head{ display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h-mobile); }
.kek-scope .mobile-nav{ margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(255,255,255,.14); }
.kek-scope .mobile-nav > li{ border-bottom: 1px solid rgba(255,255,255,.14); }
.kek-scope .m-idx{ font: 800 .6875rem/1 'Manrope', sans-serif; letter-spacing: .12em; color: var(--color-accent); margin-right: .875rem; }
.kek-scope .mobile-nav-link{
font: 700 1.625rem/1.2 'Manrope', sans-serif; color: #fff; text-decoration: none;
padding: .875rem 0; background: none; border: 0; text-align: left; cursor: pointer;
display: flex; align-items: center; width: 100%;
}
.kek-scope .mobile-nav-link .chev{ margin-left: auto; }
.kek-scope .mobile-sub{ overflow: hidden; height: 0; }
.kek-scope .mobile-sub a{ display: block; color: rgba(255,255,255,.8); text-decoration: none; font: 600 1.0625rem/1.4 'Inter', sans-serif; padding: .5rem 0 .5rem 1rem; }
.kek-scope .mobile-sub a:hover{ color: #fff; }
.kek-scope .mobile-overlay .btn{ margin-top: 2rem; width: 100%; }
.kek-scope .mobile-contact{ margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; }
.kek-scope .mobile-contact a{ color: #fff; font-weight: 600; font-size: 1.125rem; text-decoration: none; display: inline-flex; gap: .6rem; align-items: center; padding: .4rem 0; }
.kek-scope .mobile-overlay .thin-rule{ border: 0; border-top: 1px solid rgba(255,255,255,.15); margin: 1.5rem 0 1rem; }
.kek-scope .mobile-overlay .addr{ color: rgba(255,255,255,.7); font-size: .9375rem; }
body.kek-scope.nav-locked{ overflow: hidden; }
/* ---------- Footer ---------- */
.kek-scope .site-footer{ background: var(--color-primary); color: rgba(255,255,255,.75); padding-top: 1rem; padding-bottom: 2rem; margin-top: 4rem; }
.kek-scope .prefooter-wrap{ transform: translateY(-40%); }
.kek-scope .prefooter{
background: var(--color-dark); border-radius: var(--radius); box-shadow: var(--shadow-md);
padding: 2.5rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between;
}
.kek-scope .prefooter h3{ color: #fff; }
.kek-scope .prefooter p{ color: rgba(255,255,255,.8); margin-top: .5rem; }
.kek-scope .prefooter-cta{ display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.kek-scope .prefooter-cta small{ color: rgba(255,255,255,.7); font-size: .9rem; }
.kek-scope .footer-cols{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1rem; }
@media (min-width: 640px) { .kek-scope .footer-cols{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kek-scope .footer-cols{ grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 2rem; } }
.kek-scope .footer-h{
font: 600 .8125rem/1.4 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase;
color: var(--color-accent); margin-bottom: 1.25rem;
}
.kek-scope .footer-col ul{ display: flex; flex-direction: column; gap: .625rem; }
.kek-scope .footer-col a{ color: rgba(255,255,255,.75); text-decoration: none; transition: color 180ms; }
.kek-scope .footer-col a:hover{ color: #fff; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.kek-scope .footer-brand p{ margin-top: 1rem; font-size: .9375rem; line-height: 1.65; }
.kek-scope .footer-rating{ margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: #fff; font-size: .9375rem; }
.kek-scope .footer-rating .star{ color: var(--color-accent); }
.kek-scope .legal-bar{
margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12);
display: flex; flex-direction: column; gap: 1rem; font-size: .875rem;
}
@media (min-width: 768px) { .kek-scope .legal-bar-row{ display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } }
.kek-scope .legal-links{ display: flex; gap: 1.5rem; flex-wrap: wrap; }
.kek-scope .legal-links a, .kek-scope .legal-links button{ color: rgba(255,255,255,.75); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.kek-scope .legal-links a:hover, .kek-scope .legal-links button:hover{ color: #fff; }
.kek-scope .footer-seo-line{ font-size: .8125rem; color: rgba(255,255,255,.5); line-height: 1.6; }
/* ---------- Cookie stub ---------- */
.kek-scope .cookie-bar{
position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
background: var(--color-ink); color: rgba(255,255,255,.9);
padding: 1rem 1.25rem; font-size: .875rem;
display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center;
}
.kek-scope .cookie-bar .btn{ padding: .55rem 1.25rem; font-size: .875rem; }
.kek-scope .cookie-bar.is-hidden{ display: none; }
/* ---------- Anim prep (Endzustand ist der No-JS-Standard) ---------- */
/* Promoted for the whole session, as the design has it.
*
* Toggling this near the viewport instead looked like the textbook fix — 87
* layers became 37 — and made the site measurably worse on the client's
* machine: the 95th percentile frame went from 50ms to 67ms. Creating and
* destroying layers while the page scrolls costs more than keeping them.
* Reverted, and left alone. */
html.js body.kek-scope [data-anim]{ will-change: transform, opacity; }
/* Wortmaske für die Überschriften-Animation.
Der Ausschnitt braucht unten Luft, sonst werden Unterlängen (g, j, p, q, y)
abgeschnitten — die Maske bleibt trotzdem wirksam, weil der Zuschlag unten
per negativem Außenabstand wieder ausgeglichen wird. */
.kek-scope .split-headline .word-wrap{
display: inline-block; overflow: hidden; vertical-align: bottom;
padding-bottom: .22em; margin-bottom: -.22em;
}
.kek-scope .split-headline .word{ display: inline-block; padding-bottom: .02em; }
@media (prefers-reduced-motion: reduce) {
html{ scroll-behavior: auto; }
.kek-scope .marquee-track, .kek-scope .ticker-track{ animation: none; }
*, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* ============================================================
Seitenspezifische Bausteine (Über mich) — teilen das System
============================================================ */
/* Heldenbereich-Variante: Bild links, Blaupausen-Raster links */
.kek-scope .hero--about::before{ right: auto; left: 0;
-webkit-mask-image: linear-gradient(270deg, transparent, #000 30%);
mask-image: linear-gradient(270deg, transparent, #000 30%); }
.kek-scope .hero--about .hero-grid{ grid-template-columns: 1fr; }
@media (min-width: 1024px) { .kek-scope .hero--about .hero-grid{ grid-template-columns: 5fr 7fr; } }
.kek-scope .hero--about .hero-fig{ max-width: 440px; margin-inline: 0; }
@media (max-width: 1023px) { .kek-scope .hero--about .hero-fig{ display: none; } } /* mobil: Text zuerst, Porträt folgt im Anspruch */
/* Aktiver Menüpunkt pro Seite (Markup bleibt global identisch) */
body.kek-scope.page-ueber-mich .main-nav .nav-link[href="/ueber-mich/"]::after{ transform: scaleX(1); }
/* Wort-Statistiken (»Tausende«, »Hunderte«) neben Zähler-Statistiken */
.kek-scope .stat-word{
font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 3.2vw, 2.875rem);
line-height: 1.1; letter-spacing: -0.02em; color: var(--color-accent); min-height: 1em;
display: flex; align-items: flex-end;
}
@media (min-width: 768px) { .kek-scope .stat-num, .kek-scope .stat-word{ min-height: clamp(3rem, 5.5vw, 4.75rem); } }
/* Leitsatz — großes editoriales Statement */
.kek-scope .pull{
font-family: var(--font-head); font-weight: 800; letter-spacing: -0.025em;
font-size: clamp(1.75rem, 3.6vw, 2.875rem); line-height: 1.18; color: var(--color-ink);
max-width: 22ch;
}
.kek-scope .pull-note{ font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--color-ink); }
/* Signatur-Block */
.kek-scope .sig{ display: flex; align-items: center; gap: 1.25rem; margin-top: 2.25rem; }
.kek-scope .sig-rule{ width: 3.5rem; height: 3px; background: var(--color-accent); flex: none; }
.kek-scope .sig strong{ display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.0625rem; color: var(--color-ink); }
.kek-scope .sig span{ font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
/* Befund-Zeilen: Warn-Icon statt Ziffer möglich */
.kek-scope .ledger-ico{ color: var(--color-accent-deep); display: flex; align-items: center; }
/* Bild-Duo: zwei Abbildungen nebeneinander (Über mich, Branchen) */
.kek-scope .fig-duo{ display: grid; gap: 2rem; margin-top: 3rem; }
@media (min-width: 768px) { .kek-scope .fig-duo{ grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
/* ============================================================
Kontakt-Seite: Formular, Terminpanel, Direkter Draht
============================================================ */
body.kek-scope.page-kontakt .main-nav .nav-link[href="/kontakt/"]::after{ transform: scaleX(1); }
body.kek-scope.page-kontakt .prefooter-wrap{ display: none; } /* CTA-Strip nicht direkt unter dem Formular wiederholen */
body.kek-scope.page-kontakt .site-footer{ padding-top: 5rem; }
/* Formular im Prüfprotokoll-Stil */
.kek-scope .form-grid{ display: grid; gap: 1.5rem; }
.kek-scope .form-row-2{ display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .kek-scope .form-row-2{ grid-template-columns: 1fr 1fr; } }
.kek-scope .field label{
display: block; margin-bottom: .5rem;
font-size: .78125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink);
}
.kek-scope .field .req{ color: var(--color-accent-deep); }
.kek-scope .field input, .kek-scope .field textarea{
width: 100%; padding: .9375rem 1rem; font: 400 1rem/1.5 var(--font-body); color: var(--color-ink);
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0;
transition: border-color var(--transition), box-shadow var(--transition);
}
.kek-scope .field input:hover, .kek-scope .field textarea:hover{ border-color: rgba(15,61,46,.35); }
.kek-scope .field input:focus, .kek-scope .field textarea:focus{
outline: none; border-color: var(--color-primary);
box-shadow: inset 0 -2px 0 var(--color-accent);
}
.kek-scope .field textarea{ min-height: 160px; resize: vertical; }
.kek-scope .field-hint{ margin-top: .4rem; font-size: .8125rem; color: var(--color-muted); }
.kek-scope .consent{ display: flex; gap: .875rem; align-items: flex-start; padding: 1.125rem; border: var(--rule); background: var(--color-surface); }
.kek-scope .consent input{ width: 1.125rem; height: 1.125rem; margin-top: .2rem; accent-color: var(--color-primary); flex: none; }
.kek-scope .consent label{ font-size: .9375rem; line-height: 1.55; color: var(--color-body); }
.kek-scope .form-note{ font-size: .8125rem; color: var(--color-muted); }
.kek-scope .form-success{ display: none; border: var(--rule); border-left: 3px solid var(--color-accent); padding: 1.125rem 1.25rem; background: var(--color-primary-tint); font-weight: 600; color: var(--color-primary); }
.kek-scope .form-success.is-visible{ display: block; }
/* Direkter Draht — dunkles Kontaktpanel mit Eckmarken */
.kek-scope .contact-panel{ position: relative; background: var(--color-primary); color: #fff; padding: 2.25rem 2rem; }
.kek-scope .contact-panel::before, .kek-scope .contact-panel::after{ content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-accent); }
.kek-scope .contact-panel::before{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.kek-scope .contact-panel::after{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.kek-scope .contact-panel h3{ color: #fff; margin-bottom: 1.5rem; }
.kek-scope .contact-list{ display: grid; }
.kek-scope .contact-list a, .kek-scope .contact-list > div{ display: flex; gap: .875rem; align-items: flex-start; padding: .875rem 0; border-top: var(--rule-dark); color: #fff; text-decoration: none; }
.kek-scope .contact-list svg{ flex: none; margin-top: .15rem; color: var(--color-accent); }
.kek-scope .contact-list strong{ display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; }
.kek-scope .contact-list span{ display: block; font-size: .8125rem; color: rgba(255,255,255,.65); letter-spacing: .04em; }
.kek-scope .contact-list a:hover strong{ color: var(--color-accent); }
.kek-scope .promise{ margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--color-accent); font-size: .9375rem; line-height: 1.6; color: rgba(255,255,255,.85); }
/* Calendly Zwei-Klick-Panel */
.kek-scope .cal-embed{ position: relative; border: var(--border); background: var(--color-surface); min-height: 560px; display: flex; }
.kek-scope .cal-placeholder{ margin: auto; text-align: center; padding: 3rem 2rem; max-width: 26rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.kek-scope .cal-placeholder .cal-ico{ color: var(--color-primary); }
.kek-scope .cal-placeholder p{ font-size: .9375rem; color: var(--color-body); }
.kek-scope .cal-embed iframe{ width: 100%; min-height: 640px; border: 0; }
/* ============================================================
Leistungsseiten-Template
============================================================ */
body.kek-scope.page-leistung #mega-trigger::after{ transform: scaleX(1); }
.kek-scope .crumbs{ display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; margin-bottom: 1.5rem;
font-size: .78125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.kek-scope .crumbs a{ color: var(--color-muted); text-decoration: none; transition: color var(--transition); }
.kek-scope .crumbs a:hover{ color: var(--color-primary); }
.kek-scope .crumbs .sep{ color: var(--color-accent-deep); }
.kek-scope .crumbs [aria-current]{ color: var(--color-ink); }
/* Umfangsliste: zweispaltige Checkliste */
.kek-scope .scope-grid{ display: grid; gap: 0 3rem; border-top: var(--rule); }
@media (min-width: 768px) { .kek-scope .scope-grid{ grid-template-columns: 1fr 1fr; } }
.kek-scope .scope-grid .check-item{ border-bottom: var(--rule); }
/* Preisfaktoren */
.kek-scope .price-note{ margin-top: 2rem; padding: 1.25rem 1.5rem; border: var(--rule); border-left: 3px solid var(--color-accent); background: var(--color-surface); font-size: .9855rem; line-height: 1.65; }
/* ============================================================
STARTSEITE v3 — Cinematic Layer (nur index.html)
============================================================ */
/* ---------- Intro-Vorhang ---------- */
.kek-scope .intro-curtain{ position: fixed; inset: 0; z-index: 200; display: flex; pointer-events: none; }
.kek-scope .intro-curtain span{ flex: 1; background: var(--color-primary-hover); }
html:not(.js) .intro-curtain{ display: none; }
html.js body.kek-scope .intro-curtain span{ transition: transform .85s cubic-bezier(.76,0,.24,1); }
html.js body.kek-scope .intro-curtain span:nth-child(2){ transition-delay: .07s; }
html.js body.kek-scope .intro-curtain span:nth-child(3){ transition-delay: .14s; }
body.kek-scope.is-revealed .intro-curtain span{ transform: translateY(-101%); }
@media (prefers-reduced-motion: reduce) { .kek-scope .intro-curtain{ display: none; } }
/* ---------- Held v3: dunkel, volle Höhe ---------- */
.kek-scope .hero-v3{
position: relative; display: flex; flex-direction: column;
background: var(--color-primary); color: #fff; overflow: hidden;
/* Höhe folgt dem Inhalt; nach unten kein zusätzlicher Abstand, damit die
Vertrauenszeile direkt an das Laufband anschließt. */
min-height: auto;
padding-top: calc(var(--header-h-mobile) + .75rem);
padding-bottom: 0;
}
@media (min-width: 1024px) {
.kek-scope .hero-v3{
padding-top: calc(var(--header-h) + 14px);
min-height: min(100svh, 880px);
}
}
@media (min-width: 1440px) { .kek-scope .hero-v3{ min-height: min(100svh, 920px); } }
.kek-scope .hero-v3::before{
content: ""; position: absolute; inset: 0; z-index: 0;
background:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 75%);
mask-image: radial-gradient(120% 90% at 70% 40%, #000 30%, transparent 75%);
}
.kek-scope .hero-v3 .hero-mark{
display: block; right: -3%; top: 9%; bottom: auto;
font-size: clamp(8rem, 19vw, 18rem);
-webkit-text-stroke: 1.5px rgba(255,255,255,.055);
}
@media (max-width: 1023px) { .kek-scope .hero-v3 .hero-mark{ display: none; } }
.kek-scope .hero-v3-inner{ flex: 1; display: flex; align-items: center; position: relative; z-index: 1; padding-block: clamp(1rem, 2.2vh, 1.75rem); width: 100%; min-width: 0; }
.kek-scope .hero-v3-inner > .container{ min-width: 0; width: 100%; }
.kek-scope .hero-v3-grid{ display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: end; width: 100%; min-width: 0; }
.kek-scope .hero-v3-grid > *{ min-width: 0; }
@media (min-width: 1024px) { .kek-scope .hero-v3-grid{ grid-template-columns: 6.4fr 5.6fr; gap: 2.5rem; align-items: center; } }
@media (min-width: 1440px) { .kek-scope .hero-v3-grid{ grid-template-columns: 6fr 6fr; gap: 3.5rem; } }
.kek-scope .hero-v3 .eyebrow{ color: var(--color-accent); }
.kek-scope .hero-v3 h1{
color: #fff; font-size: clamp(1.9rem, 4.55vw, 4.05rem); line-height: 1.08; letter-spacing: -.035em;
margin: 1.125rem 0 1.25rem; max-width: none; hyphens: none; overflow-wrap: normal; word-break: keep-all;
}
.kek-scope .hero-v3 h1 .h1-line{ display: block; }
@media (min-width: 480px) { .kek-scope .hero-v3 h1{ font-size: clamp(2.1rem, 4.55vw, 4.05rem); } }
.kek-scope .hero-v3 .lead{ color: rgba(255,255,255,.78); max-width: 33rem; margin-bottom: 2.5rem; }
.kek-scope .hero-v3 .btn-tertiary{ color: #fff; }
.kek-scope .hero-v3 .hero-fig{ position: relative; max-width: 452px; margin-left: auto; margin-right: 0; padding: 0 clamp(6px, 2vw, 30px); }
@media (min-width: 1440px) { .kek-scope .hero-v3 .hero-fig{ max-width: 500px; } }
@media (max-width: 767px) { .kek-scope .hero-v3 .hero-fig{ max-width: 330px; margin-inline: 0; } }
/* Hochformat-Tablets: gestapelter Held bleibt kompakt */
@media (min-width: 768px) and (max-width: 1023px) {
.kek-scope .hero-v3 .hero-fig{ max-width: 306px; margin-inline: 0; }
.kek-scope .hero-v3-inner{ padding-block: .75rem; }
.kek-scope .hero-v3-grid{ gap: 1.5rem; }
.kek-scope .hero-v3-meta .meta-cell{ padding-block: .6875rem; font-size: .78125rem; }
.kek-scope .hero-v3 .lead{ font-size: 1rem; line-height: 1.55; }
.kek-scope .hero-v3 .fig-caption{ margin-top: .625rem; padding-top: .625rem; font-size: .6875rem; }
}
@media (max-width: 1023px) { .kek-scope .hero-v3 .hero-fig{ margin-inline: 0; max-width: 380px; } }
.kek-scope .hero-v3 .fig-caption{ border-bottom-color: rgba(255,255,255,.16); color: rgba(255,255,255,.5); }
.kek-scope .hero-v3 .fig-caption strong{ color: #fff; }
.kek-scope .hero-v3 .scroll-cue{ color: rgba(255,255,255,.5); }
.kek-scope .hero-v3 .scroll-cue-line{ background: rgba(255,255,255,.18); }
/* Meta-Leiste am Heldenfuß */
.kek-scope .hero-v3-meta{ position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.kek-scope .hero-v3-meta .container{ display: grid; grid-template-columns: 1fr 1fr; }
@media (min-width: 1024px) { .kek-scope .hero-v3-meta .container{ grid-template-columns: repeat(4, 1fr); } }
.kek-scope .hero-v3-meta .meta-cell{
display: flex; gap: .6rem; align-items: center; padding: .875rem 1.25rem .875rem 0;
font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.4;
}
.kek-scope .hero-v3-meta .meta-cell + .meta-cell{ border-left: 1px solid rgba(255,255,255,.14); padding-left: 1.25rem; }
@media (max-width: 1023px) { .kek-scope .hero-v3-meta .meta-cell:nth-child(3){ border-left: 0; padding-left: 0; } }
.kek-scope .hero-v3-meta svg{ flex: none; color: var(--color-accent); }
/* Header über dunklem Held: helle Zustände bis zum Scrollen */
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .logo-word{ color: #fff; }
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .logo-word small{ color: rgba(255,255,255,.55); }
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .nav-link{ color: #fff; }
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .nav-link:hover{ color: var(--color-accent); }
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .header-phone{ color: #fff; border-left-color: rgba(255,255,255,.25); }
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .header-phone svg{ color: var(--color-accent); }
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .main-bar{ border-bottom-color: rgba(255,255,255,.12); }
/* ---------- Ängste: große Aussagen, die sich beim Lesen füllen ---------- */
.kek-scope .fears .fear{
display: grid; grid-template-columns: 4.25rem 1fr; gap: 1.5rem; align-items: baseline;
padding: 1.75rem 0; border-bottom: var(--rule);
transition: opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
}
html.js body.kek-scope .fears .fear{ opacity: .28; }
html.js body.kek-scope .fears .fear.is-read{ opacity: 1; }
.kek-scope .fears .fear:first-child{ border-top: var(--rule); }
.kek-scope .fears .fear-num{
font-family: var(--font-head); font-weight: 800; font-size: 2rem; line-height: 1;
color: transparent; -webkit-text-stroke: 1.25px var(--color-accent-deep);
transition: color .45s cubic-bezier(.4,0,.2,1);
}
.kek-scope .fears .fear p{ font-family: var(--font-head); font-weight: 600; font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.35; letter-spacing: -.015em; color: var(--color-ink); }
.kek-scope .fears .fear.is-read{ transform: translateX(.75rem); }
.kek-scope .fears .fear.is-read .fear-num{ color: var(--color-accent-deep); }
/* ---------- Leistungen: horizontale Fahrt (Desktop) ---------- */
.kek-scope .svc-progress{ height: 2px; background: var(--color-border); margin-top: 2rem; display: none; }
.kek-scope .svc-progress span{ display: block; height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
@media (min-width: 1024px) {
/* Die gepinnte Sektion füllt genau einen Bildschirm, damit Fortschrittslinie,
Zähler und Pfeile während der gesamten Fahrt sichtbar bleiben. */
html.js body.kek-scope .svc-pin{
overflow: hidden; min-height: 100svh; padding-top: 0; padding-bottom: 0;
display: flex; align-items: center;
}
html.js body.kek-scope .svc-pin > .container{
display: flex; flex-direction: column; width: 100%;
height: 100svh;
/* oben Platz für den eingeblendeten Kopfbereich lassen */
padding-top: calc(var(--header-h-scrolled, 68px) + clamp(.5rem, 1.6vh, 1.25rem));
padding-bottom: clamp(.75rem, 2.2vh, 1.75rem);
}
html.js body.kek-scope .svc-pin .sec-head{ flex: 0 0 auto; }
html.js body.kek-scope .svc-pin .svc-progress-row{ flex: 0 0 auto; }
/* Die Kartenreihe nimmt genau den verbleibenden Platz ein */
html.js body.kek-scope .svc-pin .svc-track{ flex: 1 1 auto; min-height: 0; align-items: stretch; }
html.js body.kek-scope .svc-pin .sec-head{ margin-bottom: clamp(1rem, 2.4vh, 2rem); }
html.js body.kek-scope .svc-pin .svc-track{ display: flex; gap: 1px; width: max-content; }
html.js body.kek-scope .svc-pin .svc-track .svc-cell{
width: clamp(320px, 27vw, 420px);
min-height: 0; height: 100%; flex: none; overflow: hidden;
}
html.js body.kek-scope .svc-pin .svc-progress{ display: block; }
/* Steuerleiste bleibt unten in der Sektion stehen */
html.js body.kek-scope .svc-pin .svc-progress-row{ margin-top: clamp(1rem, 2.4vh, 2rem); }
}
/* Auf niedrigen Fenstern die Kopfzeile der Sektion knapper setzen */
@media (min-width: 1024px) and (max-height: 760px) {
html.js body.kek-scope .svc-pin .sec-head .lead{ display: none; }
html.js body.kek-scope .svc-pin .svc-track .svc-cell{ padding: 1.25rem 1.25rem 1.375rem; }
}
/* ---------- Kundenstimmen: rotierende Großzitate ---------- */
.kek-scope .quotes-stage{ position: relative; min-height: 340px; border-top: var(--rule); padding-top: 2.5rem; }
@media (min-width: 768px) { .kek-scope .quotes-stage{ min-height: 300px; } }
.kek-scope .q-slide{ position: absolute; inset: 2.5rem 0 0 0; opacity: 0; visibility: hidden; }
html:not(.js) .q-slide{ position: static; opacity: 1; visibility: visible; margin-bottom: 2.5rem; }
.kek-scope .q-slide blockquote{ margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.375rem); line-height: 1.3; letter-spacing: -.02em; color: var(--color-ink); max-width: 24ch; }
.kek-scope .q-who{ margin-top: 1.75rem; display: flex; align-items: center; gap: 1rem; }
.kek-scope .q-who .sig-rule{ width: 2.5rem; }
.kek-scope .q-who strong{ font-family: var(--font-head); font-weight: 700; color: var(--color-ink); display: block; }
.kek-scope .q-who span{ font-size: .8125rem; color: var(--color-muted); }
.kek-scope .quotes-ui{ display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.5rem; }
.kek-scope .q-index{ font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; color: var(--color-muted); }
.kek-scope .q-bar{ flex: 1; max-width: 220px; height: 2px; background: var(--color-border); overflow: hidden; }
.kek-scope .q-bar span{ display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
html:not(.js) .quotes-ui{ display: none; }
/* ---------- Abschluss-CTA: Wasserzeichen ---------- */
.kek-scope .final-cta{ position: relative; overflow: hidden; }
.kek-scope .cta-mark{
position: absolute; right: -2%; bottom: -6%; z-index: 0; pointer-events: none; user-select: none;
font-family: var(--font-head); font-weight: 800; font-size: clamp(6rem, 14vw, 12rem); line-height: 1;
color: transparent; -webkit-text-stroke: 1.5px rgba(15,61,46,.07);
}
.kek-scope .final-cta .container{ position: relative; z-index: 1; }
/* ---------- Button-Labelwechsel ---------- */
.kek-scope .btn-swap{ position: relative; display: inline-block; overflow: hidden; }
.kek-scope .btn-t{ display: block; transition: transform .38s cubic-bezier(.65,0,.35,1); }
.kek-scope .btn-t.b{ position: absolute; inset: 0; transform: translateY(130%); }
.kek-scope .btn:hover .btn-t.a{ transform: translateY(-130%); }
.kek-scope .btn:hover .btn-t.b{ transform: translateY(0); }
/* ---------- Individueller Cursor ---------- */
.kek-scope .cursor-dot, .kek-scope .cursor-ring{ position: fixed; top: 0; left: 0; pointer-events: none; z-index: 300; transform: translate(-50%,-50%); }
.kek-scope .cursor-dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.kek-scope .cursor-ring{
width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(15,61,46,.3);
display: flex; align-items: center; justify-content: center;
font: 600 .5625rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: transparent;
transition: width .28s, height .28s, background-color .28s, border-color .28s, color .28s;
}
.kek-scope .cursor-ring.is-label{ width: 68px; height: 68px; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-accent); }
@media (pointer: coarse) { .kek-scope .cursor-dot, .kek-scope .cursor-ring{ display: none; } }
@media (prefers-reduced-motion: reduce) {
.kek-scope .cursor-dot, .kek-scope .cursor-ring{ display: none; }
.kek-scope .fears .fear, html.js body.kek-scope .fears .fear{ opacity: 1; transform: none; }
.kek-scope .q-slide{ position: static; opacity: 1 !important; visibility: visible !important; margin-bottom: 2.5rem; transform: none !important; }
.kek-scope .quotes-ui{ display: none; }
}
/* ============================================================
v3.1 — Abschnitts-Signaturen für jede Sektion
============================================================ */
/* Abschnitts-Anzeige rechts unten */
.kek-scope .sec-rail{
position: fixed; right: 1rem; bottom: calc(1rem + var(--cookie-h, 0px)); z-index: 90;
display: flex; align-items: center; gap: .625rem;
background: var(--color-surface); border: var(--rule);
padding: .4rem; box-shadow: var(--shadow-sm);
opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s;
pointer-events: none;
}
.kek-scope .sec-rail.is-on{ pointer-events: auto; }
/* Kompakt auf kleinen Schirmen: nur der Ring mit Pfeil = »Nach oben« */
@media (max-width: 1279px) {
.kek-scope .sec-rail-label, .kek-scope .sec-rail-num{ display: none; }
.kek-scope .sec-rail{ border-radius: 50%; padding: .5rem; }
.kek-scope .sec-rail .ring-ico{ opacity: 1; }
}
@media (min-width: 1280px) {
.kek-scope .sec-rail{ right: 1.25rem; bottom: calc(1.25rem + var(--cookie-h, 0px)); align-items: baseline; padding: .55rem .875rem; }
.kek-scope .sec-rail .sec-rail-ring{ align-self: center; }
}
.kek-scope .sec-rail.is-on{ opacity: 1; transform: translateY(0); }
.kek-scope .sec-rail{ transition: opacity .4s, transform .4s, bottom .4s ease, border-color .25s; }
.kek-scope .sec-rail-label{ font: 600 .59375rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted); }
.kek-scope .sec-rail-num{ font: 800 .9375rem/1 var(--font-head); letter-spacing: .08em; color: var(--color-accent-deep); min-width: 3.2ch; }
/* Ängste-Zähler */
.kek-scope .fear-count{ display: flex; align-items: baseline; gap: .5rem; margin-top: 2rem; }
.kek-scope .fear-count #fear-now, .kek-scope .fear-count .js-fear-now{ font: 800 3.5rem/1 var(--font-head); letter-spacing: -.02em; color: var(--color-accent-deep); font-variant-numeric: tabular-nums; }
.kek-scope .fear-count .fear-total{ font: 800 1rem/1 var(--font-head); letter-spacing: .1em; color: var(--color-muted); }
/* Leistungsfahrt: Fortschritt + Zähler */
.kek-scope .svc-progress-row{ display: none; align-items: center; gap: 1.5rem; margin-top: 2rem; }
@media (min-width: 1024px) { html.js body.kek-scope .svc-pin .svc-progress-row{ display: flex; } }
.kek-scope .svc-progress{ flex: 1; margin-top: 0; display: block; }
.kek-scope .svc-readout{ font: 800 .9375rem/1 var(--font-head); letter-spacing: .1em; color: var(--color-muted); white-space: nowrap; }
.kek-scope .svc-readout #svc-now, .kek-scope .svc-readout .js-svc-now{ color: var(--color-accent-deep); }
/* Prozess: durchgezogene Zeichenlinie über den Schritten */
.kek-scope .steps{ position: relative; }
.kek-scope .steps-line{ position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
/* Rotierendes Kreisabzeichen (Über mich) */
.kek-scope .orbit-badge{
position: absolute; top: -34px; right: -34px; width: 118px; height: 118px; z-index: 3;
background: var(--color-surface); border-radius: 50%; border: var(--rule); box-shadow: var(--shadow-sm);
display: flex; align-items: center; justify-content: center;
}
.kek-scope .orbit-badge svg{ position: absolute; inset: 6px; overflow: visible; animation: orbit-spin 18s linear infinite; }
.kek-scope .orbit-text{ font: 600 9.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase; fill: var(--color-primary); }
.kek-scope .orbit-core{ width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-ink); display: flex; align-items: center; justify-content: center; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) { .kek-scope .orbit-badge{ width: 96px; height: 96px; top: -24px; right: -12px; } }
@media (prefers-reduced-motion: reduce) { .kek-scope .orbit-badge svg{ animation: none; } }
.kek-scope .about-fig{ position: relative; }
/* Karte: pulsierende Punkte + Kopplung an die Stadtkarten */
.kek-scope .map-dot{ transform-box: fill-box; transform-origin: center; animation: dot-pulse 2.8s ease-in-out infinite; transition: transform .3s, opacity .3s; }
.kek-scope .map-dot:nth-of-type(2){ animation-delay: .5s; }
.kek-scope .map-dot:nth-of-type(3){ animation-delay: 1s; }
.kek-scope .map-dot:nth-of-type(4){ animation-delay: 1.5s; }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.kek-scope .region-map.has-hot .map-dot{ opacity: .3; animation-play-state: paused; }
.kek-scope .region-map .map-dot.is-hot{ opacity: 1; transform: scale(2); }
@media (prefers-reduced-motion: reduce) { .kek-scope .map-dot{ animation: none; } }
/* Blog: Graustufe → Farbe */
.kek-scope .post-card img{ filter: grayscale(1); }
.kek-scope .post-card:hover img{ filter: grayscale(0); }
.kek-scope .post-card img{ transition: transform 600ms cubic-bezier(.4,0,.2,1), filter .5s ease; }
/* Vorteile: 3D-Neigung (JS-gesteuert) */
.kek-scope .tilt-wrap{ perspective: 900px; }
.kek-scope .ben-cell{ transform-style: preserve-3d; will-change: transform; }
/* Fußzeile: Wortmarke in Konturschrift */
.kek-scope .footer-wordmark{
font: 800 min(6.7vw, 7.5rem)/1 var(--font-head); letter-spacing: .01em; text-transform: uppercase;
color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.12);
white-space: nowrap; text-align: center; margin: 3.5rem 0 2.5rem; user-select: none;
overflow: hidden; max-width: 100%;
}
/* ============================================================
HELD v4 — Luxusschicht
============================================================ */
/* Lichtkegel folgt dem Zeiger */
.kek-scope .hero-spot{
position: absolute; top: 0; left: 0; width: 1100px; height: 1100px; z-index: 0;
border-radius: 50%; pointer-events: none; will-change: transform;
background: radial-gradient(circle, rgba(76,224,157,.13) 0%, rgba(76,224,157,.05) 34%, transparent 62%);
transform: translate(-50%, -50%) translate(70vw, 30vh);
}
/* Zweite Rasterebene leuchtet um den Zeiger auf */
.kek-scope .hero-grid-glow{
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
background-size: 56px 56px;
-webkit-mask-image: radial-gradient(300px at var(--gx, 70%) var(--gy, 35%), #000, transparent 72%);
mask-image: radial-gradient(300px at var(--gx, 70%) var(--gy, 35%), #000, transparent 72%);
}
@media (max-width: 1023px), (pointer: coarse) { .kek-scope .hero-spot, .kek-scope .hero-grid-glow{ display: none; } }
/* Filmkorn */
.kek-scope .hero-grain{
position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px;
}
/* Protokoll-Stempel + Verfügbarkeit */
.kek-scope .hero-coords{
font: 600 .6875rem/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.42); margin-bottom: 1.5rem;
}
.kek-scope .hero-avail{ display: inline-flex; align-items: center; gap: .625rem; margin-bottom: 1.25rem;
font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.78); }
.kek-scope .avail-dot{ width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-mint); position: relative; flex: none; }
.kek-scope .avail-dot::after{ content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(76,224,157,.55); animation: avail-ping 2s cubic-bezier(.2,.6,.2,1) infinite; }
@keyframes avail-ping { 0% { transform: scale(.6); opacity: 1; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
/* Schwebende Beleg-Chips */
.kek-scope .float-chip{
position: absolute; z-index: 4; background: var(--color-surface); border-radius: 10px;
box-shadow: 0 10px 34px rgba(0,0,0,.32); padding: .8rem 1rem;
display: flex; align-items: center; gap: .7rem; will-change: transform;
font-size: .71875rem; font-weight: 600; line-height: 1.35; color: var(--color-muted);
animation: chip-bob 5.5s ease-in-out infinite;
}
.kek-scope .float-chip strong{ font: 800 1.25rem/1 var(--font-head); color: var(--color-primary); letter-spacing: -.01em; }
.kek-scope .float-chip .chip-stars{ color: var(--color-accent-deep); letter-spacing: .1em; font-size: .8125rem; }
.kek-scope .chip-a{ top: 26px; left: -52px; }
.kek-scope .chip-b{ bottom: 74px; right: -40px; animation-delay: 1.2s; }
@keyframes chip-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@media (max-width: 1023px) { .kek-scope .float-chip{ display: none; } }
@media (prefers-reduced-motion: reduce) { .kek-scope .float-chip{ animation: none; } .kek-scope .avail-dot::after{ animation: none; } }
/* Glanzstreifen über der Haupt-CTA */
.kek-scope .hero-v4 .btn-primary{ position: relative; isolation: isolate; }
.kek-scope .hero-v4 .btn-primary .sheen{ position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.kek-scope .hero-v4 .btn-primary .sheen::after{
content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.65), transparent);
transform: skewX(-18deg); animation: sheen-sweep 5.6s ease-in-out infinite;
}
@keyframes sheen-sweep { 0%, 62% { left: -60%; } 80% { left: 140%; } 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) { .kek-scope .hero-v4 .btn-primary .sheen::after{ animation: none; } }
/* Porträt: 3D-Bühne */
.kek-scope .hero-v4 .hero-fig{ perspective: 1000px; }
.kek-scope .hero-v4 .hero-fig .fig-media{ transform-style: preserve-3d; will-change: transform; }
/* ============================================================
v3.2 — Interaktive Luxusschicht für alle Sektionen
============================================================ */
/* Cursor-folgende Glühkante (Leistungen, Vorteile, Regionen) */
.kek-scope .glow-cell::after{
content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
padding: 1.5px; border-radius: inherit; opacity: 0; transition: opacity .35s;
background: radial-gradient(200px at var(--px, 50%) var(--py, 50%), var(--color-accent), transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
}
.kek-scope .glow-cell{ position: relative; }
.kek-scope .glow-cell:hover::after{ opacity: 1; }
/* Dunkle Bänder: Lichtkegel */
.kek-scope .band-spot{
position: absolute; top: 0; left: 0; width: 820px; height: 820px; z-index: 0;
border-radius: 50%; pointer-events: none; will-change: transform;
background: radial-gradient(circle, rgba(76,224,157,.10) 0%, transparent 60%);
transform: translate(-50%,-50%) translate(-9999px,-9999px);
}
@media (max-width: 1023px), (pointer: coarse) { .kek-scope .band-spot{ display: none; } }
/* Ängste: Textmarker-Hover */
.kek-scope .fears .fear p{
background-image: linear-gradient(rgba(255,185,0,.4), rgba(255,185,0,.4));
background-repeat: no-repeat; background-size: 0% 42%; background-position: 0 80%;
transition: background-size .5s cubic-bezier(.65,0,.35,1);
}
.kek-scope .fears .fear:hover p{ background-size: 100% 42%; }
.kek-scope .fears .fear:hover .fear-num{ color: var(--color-accent-deep); }
/* Entlastung: Häkchen invertiert bei Hover */
.kek-scope .check-item svg{ transition: background-color .25s, color .25s; }
.kek-scope .check-item:hover svg{ background: var(--color-accent); color: var(--color-ink); }
/* Prozess: Schritt reagiert */
.kek-scope .step{ transition: transform .35s cubic-bezier(.4,0,.2,1); }
.kek-scope .step:hover{ transform: translateY(-6px); }
.kek-scope .step:hover .step-num{ color: var(--color-accent); }
/* FAQ: Registernummern */
.kek-scope .faq{ counter-reset: faq; }
.kek-scope .faq-q::before{
counter-increment: faq; content: "F.0" counter(faq);
font: 800 .6875rem/1 var(--font-head); letter-spacing: .12em; color: var(--color-muted);
margin-right: 1.125rem; flex: none; transition: color .3s;
}
.kek-scope .faq-q:hover::before, .kek-scope .faq-item.is-open .faq-q::before{ color: var(--color-accent-deep); }
/* Kundenstimmen: Navigation + Ziehen */
.kek-scope .quotes-stage{ cursor: grab; touch-action: pan-y; user-select: none; }
.kek-scope .quotes-stage.is-drag{ cursor: grabbing; }
.kek-scope .q-nav{ display: flex; gap: .5rem; margin-left: auto; }
.kek-scope .q-btn{
width: 2.625rem; height: 2.625rem; border-radius: 50%; border: 1.5px solid rgba(15,61,46,.3);
background: none; color: var(--color-primary); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.kek-scope .q-btn:hover{ background: var(--color-primary); border-color: var(--color-primary); color: var(--color-accent); transform: translateY(-2px); }
/* Blog: Lese-Chip */
.kek-scope .post-card .fig-media{ overflow: hidden; }
.kek-scope .read-chip{
position: absolute; top: 10px; left: 10px; z-index: 2;
background: var(--color-surface); color: var(--color-ink);
font: 600 .625rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
padding: .5rem .7rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.kek-scope .post-card:hover .read-chip{ opacity: 1; transform: translateY(0); }
/* Regionen: Karte steuert rückwärts die Karten */
.kek-scope .map-dot{ cursor: pointer; }
.kek-scope .region-card.is-hot-card::before{ transform: scaleY(1); }
.kek-scope .region-card.is-hot-card strong{ color: #fff; }
.kek-scope .region-card.is-hot-card span{ color: rgba(255,255,255,.75); }
.kek-scope .region-card.is-hot-card .arr{ color: var(--color-accent); transform: translateX(3px); }
/* CTA: Glanz auch hier */
.kek-scope .final-cta .btn-primary{ position: relative; isolation: isolate; }
.kek-scope .final-cta .btn-primary .sheen{ position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.kek-scope .final-cta .btn-primary .sheen::after{
content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
transform: skewX(-18deg); animation: sheen-sweep 6.4s ease-in-out infinite;
}
/* Fußzeile: Buchstabenwelle */
.kek-scope .footer-wordmark .wm-ch{ display: inline-block; will-change: transform; }
/* Cursor-Zustände */
.kek-scope .cursor-ring.is-link{ width: 58px; height: 58px; border-color: var(--color-accent-deep); }
.kek-scope .cursor-ring.is-down{ transform: translate(-50%,-50%) scale(.82); }
.kek-scope .cursor-dot.is-down{ transform: translate(-50%,-50%) scale(.5); }
@media (prefers-reduced-motion: reduce) { .kek-scope .final-cta .btn-primary .sheen::after{ animation: none; } }
/* ============================================================
v3.3 — Abschnittsübergänge, Erzählfaden, Vertrauens-Mikro
============================================================ */
/* Erzählfaden: Amber-Linie zeichnet von Problem zu Pflicht zu Lösung */
.kek-scope .flow-bridge{ display: flex; justify-content: center; padding-top: 3.5rem; }
.kek-scope .flow-bridge span{ display: block; width: 2px; height: 110px; background: var(--color-accent); transform: scaleY(0); transform-origin: top; }
.kek-scope .flow-gap{ display: flex; justify-content: center; background: var(--color-surface); }
.kek-scope .flow-gap .flow-bridge{ padding: 0; margin-top: -55px; position: relative; z-index: 5; }
@media (max-width: 767px) { .kek-scope .flow-bridge span{ height: 70px; } .kek-scope .flow-gap .flow-bridge{ margin-top: -35px; } }
/* Vertrauensleiste im Held: Mikro-Hover */
.kek-scope .hero-v3-meta .meta-cell{ transition: color .25s; cursor: default; }
.kek-scope .hero-v3-meta .meta-cell:hover{ color: #fff; }
.kek-scope .hero-v3-meta .meta-cell svg{ transition: transform .25s; }
.kek-scope .hero-v3-meta .meta-cell:hover svg{ transform: scale(1.2); }
/* Statistiken: Hover hebt und hellt den Kontext */
.kek-scope .stat{ transition: transform .3s cubic-bezier(.4,0,.2,1); }
.kek-scope .stat:hover{ transform: translateY(-5px); }
.kek-scope .stat:hover .stat-ctx{ color: rgba(255,255,255,.95); }
.kek-scope .stat:hover .stat-num{ color: var(--color-accent); }
/* ============================================================
v3.4 — Kino-Schicht: Ladeanzeige, Seitenübergang, Odometer,
Entschlüsselung, Trägheits-Neigung, Prüfstrahl
============================================================ */
/* Ladeanzeige im Vorhang */
.kek-scope .intro-curtain{ overflow: hidden; }
.kek-scope .curtain-hud{
position: absolute; inset: auto 0 0 0; z-index: 1; max-width: 100%;
display: flex; align-items: center; gap: 1rem;
padding: 0 var(--gutter) 2.25rem; color: #fff;
transition: opacity .35s;
}
.kek-scope .curtain-hud > *{ min-width: 0; }
@media (max-width: 560px) {
.kek-scope .hud-mark{ font-size: .625rem; letter-spacing: .14em; overflow: hidden; text-overflow: ellipsis; }
.kek-scope .hud-count{ font-size: .6875rem; letter-spacing: .1em; }
}
@media (min-width: 768px) { .kek-scope .curtain-hud{ padding-inline: 3rem; } }
.kek-scope .hud-mark{ font: 800 .8125rem/1 var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7); white-space: nowrap; }
.kek-scope .hud-line{ flex: 1; height: 1px; background: rgba(255,255,255,.18); overflow: hidden; }
.kek-scope .hud-line span{ display: block; height: 100%; width: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
.kek-scope .hud-count{ font: 800 .8125rem/1 var(--font-head); letter-spacing: .16em; color: var(--color-accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.kek-scope.is-revealed .curtain-hud{ opacity: 0; }
/* Vorhang bleibt für den Seitenübergang bestehen */
.kek-scope .intro-curtain{ transition: none; }
.kek-scope .intro-curtain.is-exiting span{ transform: translateY(0) !important; transition: transform .55s cubic-bezier(.76,0,.24,1); }
.kek-scope .intro-curtain.is-exiting span:nth-child(2){ transition-delay: .06s; }
.kek-scope .intro-curtain.is-exiting span:nth-child(3){ transition-delay: .12s; }
/* Odometer-Ziffern */
.kek-scope .odo{ display: inline-flex; align-items: flex-start; font-variant-numeric: tabular-nums; line-height: 1; }
.kek-scope .odo-col{ display: block; overflow: hidden; height: 1em; line-height: 1; }
.kek-scope .odo-strip{ display: block; height: auto; line-height: 1; will-change: transform; }
.kek-scope .odo-strip > span{ display: block; height: 1em; line-height: 1; text-align: center; }
.kek-scope .odo-fix{ display: block; height: 1em; line-height: 1; }
.kek-scope .odo-fix{ display: inline-block; }
/* Prüfstrahl über Abbildungen */
.kek-scope .fig-scan{
position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 3; pointer-events: none; opacity: 0;
background: linear-gradient(to bottom, transparent, rgba(255,185,0,.16) 55%, rgba(255,185,0,.85) 82%, transparent 84%);
mix-blend-mode: screen;
}
/* Trägheits-Neigung */
.kek-scope main > section > .container{ will-change: transform; }
@media (prefers-reduced-motion: reduce) {
.kek-scope .curtain-hud{ display: none; }
.kek-scope .fig-scan{ display: none; }
}
/* ============================================================
v3.5 — Feinschliff: Textfokus, adaptiver Kopf, Ringnavigation,
Bild-Schimmer, Atmosphäre, Auswahlfarbe
============================================================ */
/* Auswahlfarbe und Bildlaufleiste */
.kek-scope ::selection{ background: var(--color-accent); color: var(--color-ink); }
body.kek-scope.home{ scrollbar-color: rgba(15,61,46,.45) transparent; scrollbar-width: thin; }
body.kek-scope.home::-webkit-scrollbar{ width: 10px; }
body.kek-scope.home::-webkit-scrollbar-track{ background: var(--color-surface-alt); }
body.kek-scope.home::-webkit-scrollbar-thumb{ background: rgba(15,61,46,.35); border-radius: 999px; border: 3px solid var(--color-surface-alt); }
body.kek-scope.home::-webkit-scrollbar-thumb:hover{ background: var(--color-primary); }
/* Textfokus: Wörter treten beim Scrollen einzeln hervor */
.kek-scope .focus-text .fw{ transition: none; }
html.js body.kek-scope .focus-text .fw{ opacity: .22; }
@media (prefers-reduced-motion: reduce) { html.js body.kek-scope .focus-text .fw{ opacity: 1 !important; } }
/* Adaptiver Kopf über dunklen Bändern */
body.kek-scope.header-on-dark .site-header.is-scrolled .main-bar{
background: rgba(15,61,46,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom-color: rgba(255,255,255,.12); box-shadow: none;
}
body.kek-scope.header-on-dark .site-header.is-scrolled .logo-word{ color: #fff; }
body.kek-scope.header-on-dark .site-header.is-scrolled .logo-word small{ color: rgba(255,255,255,.55); }
body.kek-scope.header-on-dark .site-header.is-scrolled .nav-link{ color: #fff; }
body.kek-scope.header-on-dark .site-header.is-scrolled .nav-link:hover{ color: var(--color-accent); }
body.kek-scope.header-on-dark .site-header.is-scrolled .header-phone{ color: #fff; border-left-color: rgba(255,255,255,.25); }
body.kek-scope.header-on-dark .site-header.is-scrolled .header-phone svg{ color: var(--color-accent); }
.kek-scope .site-header .main-bar{ transition: background-color .45s ease, backdrop-filter .45s ease, border-color .45s ease, box-shadow .3s; }
.kek-scope .site-header .logo-word, .kek-scope .site-header .nav-link, .kek-scope .site-header .header-phone{ transition: color .35s ease; }
/* Abschnitts-Anzeige wird zur Ringnavigation */
.kek-scope .sec-rail{ cursor: pointer; border-radius: var(--radius-pill); }
.kek-scope .sec-rail:hover{ border-color: rgba(15,61,46,.35); }
.kek-scope .sec-rail-ring{ position: relative; width: 1.75rem; height: 1.75rem; flex: none; }
.kek-scope .sec-rail-ring svg{ position: absolute; inset: 0; transform: rotate(-90deg); }
.kek-scope .sec-rail-ring circle{ fill: none; stroke-width: 2; }
.kek-scope .sec-rail-ring .ring-bg{ stroke: var(--color-border); }
.kek-scope .sec-rail-ring .ring-fg{ stroke: var(--color-accent); stroke-linecap: round; }
.kek-scope .sec-rail-ring .ring-ico{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-primary); opacity: 0; transition: opacity .25s; }
.kek-scope .sec-rail:hover .sec-rail-ring .ring-fg{ stroke: var(--color-accent-deep); }
.kek-scope .sec-rail:hover .ring-ico{ opacity: 1; }
.kek-scope .sec-rail:hover .sec-rail-num, .kek-scope .sec-rail:hover .sec-rail-label{ opacity: .35; transition: opacity .25s; }
/* Bild-Schimmer bis zum Laden */
.kek-scope .fig-media{ background: var(--color-surface-alt); }
.kek-scope .fig-media.is-loading::before{
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
background-size: 220% 100%; animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.kek-scope .fig-media img{ opacity: 0; transition: opacity .6s ease; }
.kek-scope .fig-media img.is-ready, html:not(.js) .fig-media img{ opacity: 1; }
@media (prefers-reduced-motion: reduce) { .kek-scope .fig-media.is-loading::before{ animation: none; } .kek-scope .fig-media img{ opacity: 1 !important; transition: none; } }
/* Atmosphäre: langsam wanderndes Licht in den dunklen Bändern */
.kek-scope .band-aura{
position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
background: radial-gradient(45% 45% at 20% 30%, rgba(76,224,157,.075), transparent 70%),
radial-gradient(40% 40% at 80% 70%, rgba(255,185,0,.05), transparent 70%);
animation: aura-drift 22s ease-in-out infinite alternate;
}
@keyframes aura-drift { from { transform: translate3d(-2%, -1.5%, 0) scale(1); } to { transform: translate3d(2%, 1.5%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .kek-scope .band-aura{ animation: none; } }
/* ============================================================
v3.6 — Scroll- und Interaktionsschicht
============================================================ */
/* Prozess: aktiver Schritt tritt hervor, die anderen treten zurück */
.kek-scope .steps.has-focus .step{ opacity: .34; transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.kek-scope .steps.has-focus .step.is-active{ opacity: 1; transform: translateY(-6px); }
.kek-scope .steps.has-focus .step.is-active .step-num{ color: var(--color-accent); }
.kek-scope .step-bar{ display: block; height: 2px; width: 100%; background: rgba(255,255,255,.16); margin-top: 1.25rem; overflow: hidden; }
.kek-scope .step-bar span{ display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.kek-scope .step.is-active .step-bar span, .kek-scope .step.is-done .step-bar span{ transform: scaleX(1); }
/* Navigation: aktiver Abschnitt */
.kek-scope .main-nav .nav-link.is-current::after{ transform: scaleX(1); }
/* Leistungsfahrt: Ziehen möglich */
html.js body.kek-scope .svc-pin{ cursor: grab; }
html.js body.kek-scope .svc-pin.is-dragging{ cursor: grabbing; }
/* Hinweis-Toast (Nummer kopiert) */
.kek-scope .toast{
position: fixed; left: 50%; bottom: 2rem; z-index: 120; transform: translate(-50%, 16px);
background: var(--color-primary); color: #fff; padding: .8rem 1.25rem; border-radius: var(--radius-pill);
font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-md);
opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
display: flex; align-items: center; gap: .6rem;
}
.kek-scope .toast.is-on{ opacity: 1; transform: translate(-50%, 0); }
.kek-scope .toast svg{ color: var(--color-accent); }
/* Ruhe-Impuls: Scroll-Hinweis meldet sich nach Untätigkeit */
.kek-scope .scroll-cue.is-nudge .scroll-cue-line::after{ animation-duration: 1.1s; }
/* Leistungsfahrt: Pfeilnavigation */
.kek-scope .svc-nav{ display: flex; gap: .5rem; }
.kek-scope .svc-progress-row .svc-readout{ margin-left: auto; }
/* Zurück-Navigation: Vorhang hebt sich ohne Inszenierung */
body.kek-scope.is-revealed .intro-curtain span{ transition-duration: .35s; }
/* ============================================================
Analyse & Organisation — Prozess + Dokumenten-Cockpit
============================================================ */
.kek-scope .proc{ display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .kek-scope .proc{ grid-template-columns: 5fr 7fr; gap: 3rem; } }
/* Phasenliste */
.kek-scope .proc-steps{ position: relative; padding-left: 1.5rem; }
.kek-scope .proc-rail{ position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 2px; background: var(--color-border); }
.kek-scope .proc-rail-fill{ display: block; width: 100%; height: 16.6%; background: var(--color-accent); transition: transform .45s cubic-bezier(.4,0,.2,1); transform: translateY(0); }
.kek-scope .proc-step{
display: flex; align-items: flex-start; gap: 1rem; width: 100%; text-align: left;
background: none; border: 0; border-bottom: var(--rule); padding: 1.125rem .25rem 1.125rem 0;
cursor: pointer; color: var(--color-body); transition: color var(--transition), padding-left var(--transition);
}
.kek-scope .proc-step:first-child{ border-top: var(--rule); }
.kek-scope .proc-num{ font: 800 .8125rem/1.5 var(--font-head); letter-spacing: .1em; color: var(--color-muted); flex: none; transition: color var(--transition); }
.kek-scope .proc-txt{ flex: 1; min-width: 0; }
.kek-scope .proc-txt strong{ display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--color-ink); letter-spacing: -.01em; }
.kek-scope .proc-txt span{ display: block; font-size: .875rem; color: var(--color-muted); margin-top: .2rem; line-height: 1.5; }
.kek-scope .proc-arr{ flex: none; color: var(--color-accent-deep); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .25s; margin-top: .2rem; }
.kek-scope .proc-step:hover{ padding-left: .5rem; }
.kek-scope .proc-step:hover .proc-num{ color: var(--color-accent-deep); }
.kek-scope .proc-step.is-active{ padding-left: .5rem; }
.kek-scope .proc-step.is-active .proc-num{ color: var(--color-accent-deep); }
.kek-scope .proc-step.is-active .proc-arr{ opacity: 1; transform: translateX(0); }
/* Cockpit */
.kek-scope .cockpit{ position: relative; background: var(--color-primary); color: #fff; padding: 2rem 1.75rem 1.5rem; overflow: hidden; }
@media (min-width: 768px) { .kek-scope .cockpit{ padding: 2.25rem 2.25rem 1.75rem; } }
.kek-scope .cockpit::before, .kek-scope .cockpit::after{ content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-accent); }
.kek-scope .cockpit::before{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.kek-scope .cockpit::after{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.kek-scope .cockpit-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: var(--rule-dark); }
.kek-scope .cockpit-label{ font: 600 .625rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.kek-scope .cockpit-title{ color: #fff; font-size: 1.375rem; margin-top: .5rem; }
.kek-scope .cockpit-count{ font: 800 .875rem/1 var(--font-head); letter-spacing: .1em; color: rgba(255,255,255,.45); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kek-scope .cockpit-count #ck-now, .kek-scope .cockpit-count .js-ck-now{ color: var(--color-accent); }
.kek-scope .cockpit-body{ padding-top: 1.25rem; }
.kek-scope .cockpit-desc{ font-size: .9375rem; line-height: 1.7; color: rgba(255,255,255,.8); margin-bottom: 1.5rem; }
.kek-scope .cockpit-list{ list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
@media (min-width: 640px) { .kek-scope .cockpit-list{ grid-template-columns: 1fr 1fr; gap: .5rem 1.25rem; } }
.kek-scope .cockpit-list li{ display: flex; align-items: flex-start; gap: .625rem; font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.kek-scope .cockpit-list li svg{ flex: none; margin-top: .15rem; color: var(--color-accent); }
.kek-scope .cockpit-foot{ display: flex; align-items: center; gap: .625rem; margin-top: 1.75rem; padding-top: 1rem; border-top: var(--rule-dark); }
.kek-scope .cockpit-foot p{ font-size: .8125rem; color: rgba(255,255,255,.6); margin: 0; }
.kek-scope .ck-dot{ width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-mint); flex: none; position: relative; }
.kek-scope .ck-dot::after{ content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid rgba(76,224,157,.5); animation: avail-ping 2.4s cubic-bezier(.2,.6,.2,1) infinite; }
@media (prefers-reduced-motion: reduce) { .kek-scope .ck-dot::after{ animation: none; } }
/* Digitaler Einstieg */
.kek-scope .digital-start{ display: grid; gap: 1px; background: var(--color-border); border: var(--border); margin-top: 3rem; }
@media (min-width: 768px) { .kek-scope .digital-start{ grid-template-columns: repeat(3, 1fr); } }
.kek-scope .ds-cell{ background: var(--color-surface); padding: 1.75rem 1.5rem; }
.kek-scope .ds-ico{ display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: var(--rule); color: var(--color-primary); margin-bottom: 1.125rem; }
.kek-scope .ds-cell h4{ font-size: 1.0625rem; margin-bottom: .5rem; }
.kek-scope .ds-cell p{ font-size: .9375rem; color: var(--color-body); line-height: 1.6; }
/* Abschluss-Aussage */
.kek-scope .analyse-cta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 2px solid var(--color-accent); }
.kek-scope .analyse-cta p{ max-width: 46rem; font-size: 1.0625rem; line-height: 1.65; }
/* ============================================================
Problem-Auswahl — interaktive Fallauswahl
============================================================ */
.kek-scope .pw-chips{ display: flex; flex-wrap: wrap; gap: .625rem; margin-bottom: 2.5rem; }
.kek-scope .pw-chip{
border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer;
padding: .75rem 1.125rem; font: 600 .875rem/1.3 var(--font-body); color: var(--color-body);
border-radius: var(--radius-pill); text-align: left;
transition: border-color var(--transition), color var(--transition), background-color var(--transition), transform var(--transition);
}
.kek-scope .pw-chip:hover{ border-color: rgba(15,61,46,.4); color: var(--color-primary); transform: translateY(-2px); }
.kek-scope .pw-chip.is-active{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kek-scope .pw-chip.is-active::before{ content: "▸ "; color: var(--color-accent); }
.kek-scope .pw-panel{ display: grid; gap: 0; border: var(--border); background: var(--color-surface); }
@media (min-width: 900px) { .kek-scope .pw-panel{ grid-template-columns: 1fr 1fr; } }
.kek-scope .pw-col{ padding: 2rem 1.75rem; }
@media (min-width: 900px) {
.kek-scope .pw-col{ padding: 2.25rem 2.25rem; }
.kek-scope .pw-loesung{ border-left: var(--rule); }
}
@media (max-width: 899px) { .kek-scope .pw-loesung{ border-top: var(--rule); } }
.kek-scope .pw-befund{ background: var(--color-surface-alt); }
.kek-scope .pw-block + .pw-block{ margin-top: 1.75rem; padding-top: 1.5rem; border-top: var(--rule); }
.kek-scope .pw-label{ display: block; font: 600 .625rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent-deep); margin-bottom: .75rem; }
.kek-scope .pw-lead{ font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.45; color: var(--color-ink); letter-spacing: -.01em; }
.kek-scope .pw-block p{ font-size: .9375rem; line-height: 1.7; color: var(--color-body); }
.kek-scope .pw-tags{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.kek-scope .pw-tag{ font: 600 .6875rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink);
background: var(--color-accent); padding: .45rem .65rem; }
.kek-scope .pw-steps{ list-style: none; counter-reset: pw; margin: 0; padding: 0; display: grid; gap: .875rem; }
.kek-scope .pw-steps li{ counter-increment: pw; display: flex; gap: .875rem; align-items: flex-start; font-size: .9375rem; line-height: 1.6; color: var(--color-body); }
.kek-scope .pw-steps li::before{
content: counter(pw, decimal-leading-zero); flex: none;
font: 800 .75rem/1.5 var(--font-head); letter-spacing: .08em;
color: transparent; -webkit-text-stroke: 1px var(--color-accent-deep);
}
.kek-scope .pw-meta{ display: grid; gap: 1px; background: var(--color-border); border: var(--rule); margin: 1.75rem 0 1.5rem; }
@media (min-width: 480px) { .kek-scope .pw-meta{ grid-template-columns: 1fr 1fr; } }
.kek-scope .pw-meta-cell{ background: var(--color-surface); padding: .875rem 1rem; }
.kek-scope .pw-meta-cell span{ display: block; font: 600 .625rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); margin-bottom: .4rem; }
.kek-scope .pw-meta-cell strong, .kek-scope .pw-meta-cell a{ font-family: var(--font-head); font-weight: 700; font-size: .9375rem; color: var(--color-primary); text-decoration: none; }
.kek-scope .pw-meta-cell a:hover{ color: var(--color-accent-deep); }
.kek-scope .pw-note{ font-size: .8125rem; color: var(--color-muted); margin-top: 1rem; }
/* ============================================================
Held: Inspektionssequenz (Rahmen, Prüfstrahl, Befunde, Plakette)
============================================================ */
.kek-scope .insp-frame{ position: absolute; inset: 12px; z-index: 4; pointer-events: none; }
.kek-scope .insp-frame i{ position: absolute; width: 26px; height: 26px; border: 2px solid var(--color-accent); opacity: 0; }
.kek-scope .insp-frame i:nth-child(1){ top: 0; left: 0; border-right: 0; border-bottom: 0; }
.kek-scope .insp-frame i:nth-child(2){ top: 0; right: 0; border-left: 0; border-bottom: 0; }
.kek-scope .insp-frame i:nth-child(3){ bottom: 0; left: 0; border-right: 0; border-top: 0; }
.kek-scope .insp-frame i:nth-child(4){ bottom: 0; right: 0; border-left: 0; border-top: 0; }
.kek-scope .insp-beam{
position: absolute; left: 0; right: 0; top: 0; height: 30%; z-index: 5; pointer-events: none; opacity: 0;
background: linear-gradient(to bottom, transparent, rgba(255,185,0,.14) 60%, rgba(255,185,0,.9) 86%, rgba(255,185,0,0) 88%);
mix-blend-mode: screen;
}
.kek-scope .insp-checks{
position: relative; margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
padding-top: .625rem; border-top: 1px solid rgba(255,255,255,.14);
}
.kek-scope .insp-check{ display: flex; align-items: center; gap: .5rem; font: 600 .78125rem/1.35 var(--font-body); color: rgba(255,255,255,.9); opacity: 0; }
.kek-scope .ic-box{ flex: none; width: 1.125rem; height: 1.125rem; border: 1.5px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; color: var(--color-accent); }
.kek-scope .ic-box svg{ width: 12px; height: 12px; }
.kek-scope .ic-box svg path{ stroke-dasharray: 24; stroke-dashoffset: 24; }
html:not(.js) .insp-check{ opacity: 1; }
html:not(.js) .ic-box svg path{ stroke-dashoffset: 0; }
.kek-scope .insp-badge{
position: absolute; z-index: 7; right: -10px; bottom: 21%; width: 104px; height: 104px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
background: var(--color-primary); border: 2px solid var(--color-accent); border-radius: 50%;
box-shadow: 0 10px 30px rgba(0,0,0,.3); text-align: center; opacity: 0; will-change: transform;
}
.kek-scope .ib-top{ font: 700 .5625rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--color-accent); }
.kek-scope .ib-year{ font: 800 1.625rem/1 var(--font-head); letter-spacing: -.02em; color: #fff; }
.kek-scope .ib-foot{ font: 600 .5rem/1.25 var(--font-body); letter-spacing: .06em; color: rgba(255,255,255,.62); max-width: 84%; }
@media (max-width: 640px) { .kek-scope .insp-badge{ width: 82px; height: 82px; right: -10px; bottom: 14%; } .kek-scope .ib-year{ font-size: 1.25rem; } .kek-scope .ib-foot{ font-size: .4375rem; } }
html:not(.js) .insp-badge{ opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.kek-scope .insp-frame i, .kek-scope .insp-check, .kek-scope .insp-badge{ opacity: 1 !important; }
.kek-scope .ic-box svg path{ stroke-dashoffset: 0 !important; }
.kek-scope .insp-beam{ display: none; }
}
/* ============================================================
Vorher / Nachher — Schieberegler
============================================================ */
.kek-scope .vn-tabs{ display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.kek-scope .vn-tab{
border: 1.5px solid var(--color-border); background: var(--color-surface); cursor: pointer;
padding: .625rem 1rem; font: 600 .8125rem/1.2 var(--font-body); color: var(--color-body);
transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.kek-scope .vn-tab:hover{ border-color: rgba(15,61,46,.4); color: var(--color-primary); }
.kek-scope .vn-tab.is-active{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kek-scope .vn-wrap{ border: var(--border); background: var(--color-surface); }
/* Bühne: exakt das Seitenverhältnis der Aufnahmen, keine Hochskalierung über die
Originalbreite hinaus, oben ausgerichtet — so bleibt der obere Bildbereich sichtbar. */
.kek-scope .vn-stage{
position: relative; overflow: hidden; user-select: none; touch-action: pan-y;
background: var(--color-surface-alt);
aspect-ratio: var(--vn-ratio, 832 / 543);
max-width: var(--vn-native, 832px);
margin-inline: auto;
}
.kek-scope .vn-img{
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top center;
}
/* Beide Aufnahmen liegen exakt übereinander; die Vorher-Ebene wird beschnitten,
nicht in der Breite verändert — dadurch sind Zuschnitt und Ausrichtung identisch. */
.kek-scope .vn-clip{
position: absolute; inset: 0; width: 100%;
clip-path: inset(0 calc(100% - var(--vn-pos, 50%)) 0 0);
will-change: clip-path;
}
.kek-scope .vn-tag{
position: absolute; top: 12px; z-index: 3; padding: .4rem .7rem;
font: 700 .625rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: #fff;
}
.kek-scope .vn-tag-before{ left: 12px; background: rgba(178,32,32,.92); }
.kek-scope .vn-tag-after{ right: 12px; background: rgba(15,61,46,.92); }
.kek-scope .vn-handle{ position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; z-index: 4; transform: translateX(-50%); cursor: ew-resize; }
.kek-scope .vn-line{ position: absolute; inset: 0; background: var(--color-accent); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.kek-scope .vn-knob{
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-accent); color: var(--color-ink);
display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.28);
transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.kek-scope .vn-handle:hover .vn-knob, .kek-scope .vn-handle:focus-visible .vn-knob{ transform: translate(-50%,-50%) scale(1.1); }
.kek-scope .vn-handle:focus-visible{ outline: none; }
.kek-scope .vn-handle:focus-visible .vn-knob{ box-shadow: 0 0 0 3px var(--color-primary), 0 6px 20px rgba(0,0,0,.28); }
.kek-scope .vn-legend{ display: grid; gap: 1px; background: var(--color-border); border-top: var(--rule); }
@media (min-width: 768px) { .kek-scope .vn-legend{ grid-template-columns: 1fr 1fr; } }
.kek-scope .vn-side{ background: var(--color-surface); padding: 1.5rem 1.5rem 1.625rem; }
.kek-scope .vn-side-before{ background: var(--color-surface-alt); }
.kek-scope .vn-side-label{ display: block; font: 600 .625rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.kek-scope .vn-side-before .vn-side-label{ color: #B22020; }
.kek-scope .vn-side-after .vn-side-label{ color: var(--color-primary); }
.kek-scope .vn-side ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kek-scope .vn-side li{ display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--color-body); }
.kek-scope .vn-side li::before{ content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .45rem; }
.kek-scope .vn-side-before li::before{ background: #B22020; }
.kek-scope .vn-side-after li::before{ background: var(--color-accent); }
/* Abgrenzungshinweis unter den Leistungen */
.kek-scope .svc-note{
margin-top: 2rem; padding: 1.125rem 1.375rem; border: var(--rule); border-left: 3px solid var(--color-accent);
background: var(--color-surface); font-size: .9375rem; line-height: 1.65; color: var(--color-body);
}
/* ============================================================
Übergang Problem → Lösung: enger führen (Kundenwunsch)
============================================================ */
.kek-scope .sec-tight-bottom{ padding-bottom: 2.75rem; }
.kek-scope .sec-tight-top{ padding-top: 2.75rem; }
@media (min-width: 1024px) {
.kek-scope .sec-tight-bottom{ padding-bottom: 4rem; }
.kek-scope .sec-tight-top{ padding-top: 4rem; }
}
/* Abstand zwischen Rubrik, Trennlinie, Überschrift und Bild etwas straffen */
.kek-scope .sec-head .sec-meta{ margin-bottom: clamp(1.125rem, 2.2vw, 1.75rem); }
@media (max-width: 767px) {
.kek-scope .sec-head{ margin-bottom: 1.75rem; }
.kek-scope .sec-head .sec-cols h2 + .lead{ margin-top: .875rem; }
}
/* ============================================================
Kundenstimmen: erkennbare Google-Herkunft
============================================================ */
.kek-scope .q-person{ display: grid; gap: .3rem; }
.kek-scope .q-person strong{ font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; color: var(--color-ink); }
.kek-scope .q-stars{ color: var(--color-accent-deep); letter-spacing: .12em; font-size: .9375rem; line-height: 1; }
.kek-scope .q-source{ display: flex; align-items: center; gap: .45rem; font-size: .8125rem; color: var(--color-muted); }
.kek-scope .q-source .g-mark{ flex: none; }
.kek-scope .q-link{
display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
font: 600 .875rem/1 var(--font-body); color: var(--color-primary); text-decoration: none;
border-bottom: 1px solid rgba(15,61,46,.25); padding-bottom: .3rem;
transition: color var(--transition), border-color var(--transition), gap var(--transition);
}
.kek-scope .q-link:hover{ color: var(--color-accent-deep); border-color: var(--color-accent); gap: .65rem; }
.kek-scope .q-link svg{ transition: transform var(--transition); }
.kek-scope .q-link:hover svg{ transform: translateX(2px); }
@media (max-width: 560px) { .kek-scope .q-who{ align-items: flex-start; } .kek-scope .q-link{ margin-top: 1rem; } }
/* ============================================================
Einsatzgebiet: zwei Betreuungsmodelle
============================================================ */
.kek-scope .modelle{ display: grid; gap: 1.25rem; margin-bottom: 1.75rem; }
@media (min-width: 900px) { .kek-scope .modelle{ grid-template-columns: 1fr 1.15fr; gap: 1.5rem; align-items: stretch; } }
.kek-scope .modell{ position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.625rem 1.875rem; background: var(--color-surface); border: var(--border); }
@media (min-width: 768px) { .kek-scope .modell{ padding: 2.125rem 2rem 2.25rem; } }
.kek-scope .modell-top{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.125rem; border-bottom: var(--rule); margin-bottom: 1.25rem; }
.kek-scope .modell-ico{ display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border: var(--rule); color: var(--color-primary); }
.kek-scope .modell-code{ font: 600 .625rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted); text-align: right; }
.kek-scope .modell h3{ font-size: 1.375rem; margin-bottom: .375rem; }
.kek-scope .modell-scope{ font-size: .875rem; color: var(--color-muted); margin-bottom: 1.25rem; }
.kek-scope .modell-list{ list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .625rem; }
.kek-scope .modell-list li{ display: flex; gap: .625rem; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: var(--color-body); }
.kek-scope .modell-list li::before{ content: ""; flex: none; width: .5rem; height: .5rem; margin-top: .45rem; background: var(--color-accent); }
.kek-scope .modell .btn, .kek-scope .modell .btn-tertiary{ margin-top: auto; align-self: flex-start; }
/* Digitale Betreuung deutlich hervorgehoben */
.kek-scope .modell-digital{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kek-scope .modell-digital::before, .kek-scope .modell-digital::after{ content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-accent); }
.kek-scope .modell-digital::before{ top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.kek-scope .modell-digital::after{ bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.kek-scope .modell-digital .modell-top{ border-bottom-color: rgba(255,255,255,.16); }
.kek-scope .modell-digital .modell-ico{ border-color: rgba(255,255,255,.24); color: var(--color-accent); }
.kek-scope .modell-digital .modell-code{ color: var(--color-accent); }
.kek-scope .modell-digital h3{ color: #fff; }
.kek-scope .modell-digital .modell-scope{ color: rgba(255,255,255,.62); }
.kek-scope .modell-digital .modell-list li{ color: rgba(255,255,255,.9); }
.kek-scope .modell-hinweis{
padding: 1.125rem 1.375rem; border: var(--rule); border-left: 3px solid var(--color-accent);
background: var(--color-surface); font-size: .9375rem; line-height: 1.65; color: var(--color-body);
}
/* Steuerleiste der Leistungsfahrt: Abstand zum »Nach oben«-Knopf halten */
@media (min-width: 1024px) {
.kek-scope .svc-progress-row{ padding-right: clamp(78px, 7vw, 200px); }
}
@media (min-width: 1280px) {
.kek-scope .svc-progress-row{ padding-right: 200px; }
}
/* Abgrenzungshinweis als eigener, schmaler Block unter den Leistungen */
.kek-scope .abgrenzung{ padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 0; }
/* Sehr flache Fenster: Karten kompakter setzen, damit nichts abgeschnitten wird */
@media (min-width: 1024px) and (max-height: 760px) {
html.js body.kek-scope .svc-pin .svc-track .svc-cell{ padding: 1.125rem 1.25rem 1.25rem; }
html.js body.kek-scope .svc-pin .svc-track .svc-cell h3{ font-size: 1.125rem; margin-bottom: .5rem; }
html.js body.kek-scope .svc-pin .svc-track .svc-cell li, html.js body.kek-scope .svc-pin .svc-track .svc-cell p{ font-size: .8125rem; line-height: 1.45; }
html.js body.kek-scope .svc-pin .svc-track .svc-cell ul{ gap: .3rem; }
html.js body.kek-scope .svc-pin .sec-head{ margin-bottom: .75rem; }
html.js body.kek-scope .svc-pin .svc-icon{ display: none; }
}
@media (min-width: 1024px) and (max-height: 660px) {
html.js body.kek-scope .svc-pin .svc-track .svc-cell li:nth-child(n+6){ display: none; }
}
/* ============================================================
Typografie-Schutz global: Unterlängen (g, j, p, q, y) dürfen
nirgends abgeschnitten werden, Überschriften nie seitlich klippen
============================================================ */
.kek-scope h1, .kek-scope h2, .kek-scope h3, .kek-scope h4, .kek-scope blockquote, .kek-scope .fear p, .kek-scope .pw-lead, .kek-scope .cockpit-title{
padding-bottom: .06em; /* Luft für Unterlängen */
overflow: visible; /* nie am eigenen Kasten klippen */
max-width: 100%;
overflow-wrap: break-word; /* kein waagerechtes Überlaufen */
}
.kek-scope h1{ line-height: 1.08; }
.kek-scope h2{ line-height: 1.18; }
.kek-scope h3{ line-height: 1.3; }
.kek-scope .sec-head, .kek-scope .sec-cols, .kek-scope .hero-v3-grid > *, .kek-scope .split-2 > *{ overflow: visible; }
/* Wortmasken der Überschriften-Animation: großzügiger Ausschnitt */
.kek-scope .split-headline .word-wrap{ padding-bottom: .26em; margin-bottom: -.26em; }
/* Bild in der Analyse-Sektion: unterstützt den Inhalt, wirkt nicht wie eine Galerie */
.kek-scope .cockpit-fig{ margin: 1.5rem 0 0; }
.kek-scope .cockpit-fig img{ display: block; width: 100%; height: auto; border-radius: 2px; }
.kek-scope .cockpit-fig figcaption{ margin-top: .625rem; font-size: .8125rem; color: rgba(255,255,255,.6); }
/* Kleines Foto im Modell »vor Ort« */
.kek-scope .modell-fig{ margin: 0 0 1.25rem; }
.kek-scope .modell-fig img{ display: block; width: 100%; height: auto; }
/* ============================================================
Kundenlogos: einheitliche Höhe, dezent grau, Farbe beim Überfahren
============================================================ */
.kek-scope .logo-wall .logo-box{
display: flex; align-items: center; justify-content: center;
padding: 0 clamp(.875rem, 2.2vw, 1.75rem);
background: none; border: 0; min-width: 0;
transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.kek-scope .logo-wall .logo-box img{
display: block; width: auto; height: 46px; max-width: none;
/* dezent grau, aber klar lesbar */
filter: grayscale(calc(1 - var(--logo-color, 0))) contrast(1.3) brightness(.78);
opacity: calc(.92 + .08 * var(--logo-color, 0));
transition: filter .35s ease, opacity .35s ease;
}
@media (min-width: 768px) { .kek-scope .logo-wall .logo-box img{ height: 50px; } }
@media (max-width: 560px) {
.kek-scope .logo-wall .logo-box{ padding: 0 .875rem; }
.kek-scope .logo-wall .logo-box img{ height: 40px; filter: grayscale(.55) contrast(1.25) brightness(.8); opacity: 1; }
}
.kek-scope .logo-wall .logo-box:hover img{ filter: none; opacity: 1; }
@media (hover: none) {
.kek-scope .logo-wall .logo-box img{ filter: grayscale(.3) contrast(1.05); opacity: .95; }
}
@media (prefers-reduced-motion: reduce) { .kek-scope .logo-wall .logo-box{ transition: none; } }
/* Kurzer Abgrenzungshinweis in der Leistungskarte */
.kek-scope .svc-hint{
font-size: .78125rem; line-height: 1.45; color: var(--color-muted);
margin: -.375rem 0 .875rem; padding-bottom: .625rem; border-bottom: var(--rule);
}
/* Originalmarke im Kopf- und Fußbereich */
.kek-scope .logo{ display: flex; align-items: center; gap: .625rem; }
.kek-scope .logo-mark-img{ display: block; height: 36px; width: auto; flex: none; }
@media (min-width: 1024px) { .kek-scope .logo-mark-img{ height: 40px; } }
.kek-scope .site-footer .logo-mark-img{ height: 42px; }
/* ============================================================
Bedienelemente im mobilen Kopf: klar sichtbar und gut treffbar
============================================================ */
@media (max-width: 1023px) { .kek-scope .mobile-controls{ display: flex; align-items: center; gap: .625rem; } }
@media (min-width: 1024px) { .kek-scope .mobile-controls{ display: none; } }
@media (min-width: 420px) and (max-width: 1023px) { .kek-scope .mobile-controls{ gap: .875rem; } }
.kek-scope .mobile-controls .icon-btn{
width: 46px; height: 46px; flex: none; border-radius: 12px;
background: rgba(15,61,46,.08); border: 1px solid rgba(15,61,46,.14);
color: var(--color-primary);
transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.kek-scope .mobile-controls .icon-btn:active{ transform: scale(.94); }
.kek-scope .mobile-controls .icon-btn:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Über dunklem Held: helle Symbole auf leicht aufgehelltem Grund */
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .mobile-controls .icon-btn, body.kek-scope.header-on-dark .site-header.is-scrolled .mobile-controls .icon-btn{
background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff;
}
body.kek-scope.hero-dark .site-header:not(.is-scrolled) .mobile-controls .icon-btn svg, body.kek-scope.header-on-dark .site-header.is-scrolled .mobile-controls .icon-btn svg{ color: #fff; }
/* Menüsymbol: drei kräftige Striche, die sich zum Kreuz drehen */
.kek-scope .burger-lines{ position: relative; display: block; width: 22px; height: 16px; }
.kek-scope .burger-lines i{
position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px;
background: currentColor; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s ease;
}
.kek-scope .burger-lines i:nth-child(1){ top: 0; }
.kek-scope .burger-lines i:nth-child(2){ top: 6.75px; }
.kek-scope .burger-lines i:nth-child(3){ top: 13.5px; }
.kek-scope .burger[aria-expanded="true"] .burger-lines i:nth-child(1){ top: 6.75px; transform: rotate(45deg); }
.kek-scope .burger[aria-expanded="true"] .burger-lines i:nth-child(2){ opacity: 0; transform: scaleX(.2); }
.kek-scope .burger[aria-expanded="true"] .burger-lines i:nth-child(3){ top: 6.75px; transform: rotate(-45deg); }
/* Marke auf dem Handy etwas größer, ohne den Kopf höher zu machen */
@media (max-width: 1023px) {
.kek-scope .site-header .logo-mark-img{ height: 42px; }
.kek-scope .site-header .logo-word{ font-size: 1.0625rem; }
.kek-scope .site-header .logo-word small{ font-size: .5625rem; letter-spacing: .16em; }
}
@media (max-width: 400px) {
.kek-scope .site-header .logo-mark-img{ height: 38px; }
.kek-scope .mobile-controls .icon-btn{ width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .kek-scope .burger-lines i{ transition: none; } }
/* Schließen-Symbol im mobilen Menü: gleiche Größe und Deutlichkeit wie das Menüsymbol */
.kek-scope .nav-close-btn{
width: 46px; height: 46px; border-radius: 12px; color: #fff;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
transition: background-color .25s ease, transform .2s ease;
}
.kek-scope .nav-close-btn:hover{ background: rgba(255,255,255,.22); }
.kek-scope .nav-close-btn:active{ transform: scale(.94); }
.kek-scope .nav-close-btn:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Erfahrungs-Chip am Porträt: links, tief genug, damit das Gesicht frei bleibt */
.kek-scope .hero-v4 .float-chip.chip-a{
position: absolute; z-index: 7; left: -14px; top: auto; bottom: 30%;
display: flex; align-items: center; gap: .75rem;
padding: .75rem 1rem; background: #fff; box-shadow: var(--shadow-md);
border-radius: 2px; max-width: 62%;
}
.kek-scope .hero-v4 .float-chip.chip-a strong{ font: 800 1.5rem/1 var(--font-head); color: var(--color-primary); }
.kek-scope .hero-v4 .float-chip.chip-a span{ font: 600 .8125rem/1.3 var(--font-body); color: var(--color-body); }
@media (max-width: 640px) {
.kek-scope .hero-v4 .float-chip.chip-a{ left: -12px; bottom: 24%; padding: .55rem .75rem; gap: .5rem; }
.kek-scope .hero-v4 .float-chip.chip-a strong{ font-size: 1.1875rem; }
.kek-scope .hero-v4 .float-chip.chip-a span{ font-size: .6875rem; }
}
/* Held: vertikale Abstände gestrafft, ohne die Wirkung zu verlieren */
.kek-scope .hero-v3 .lead{ margin-bottom: clamp(1rem, 2.2vh, 1.5rem); }
.kek-scope .hero-v3 .hero-avail{ margin-block: clamp(.75rem, 1.8vh, 1.125rem); }
.kek-scope .hero-v3 .fig-caption{ margin-top: .75rem; padding-top: .75rem; }
@media (max-width: 767px) {
.kek-scope .hero-v3 .lead{ font-size: 1rem; line-height: 1.55; }
.kek-scope .hero-v3-inner{ padding-block: .875rem; }
.kek-scope .hero-v3-meta .meta-cell{ padding-block: .75rem; font-size: .75rem; }
}
/* Bilder füllen ihren Rahmen vollständig — kein heller Rand, kein Innenabstand */
.kek-scope .cockpit-fig, .kek-scope .modell-fig, .kek-scope .fig-media, .kek-scope .post-media, .kek-scope .about-fig, .kek-scope .fig{ background: none; }
.kek-scope .cockpit-fig, .kek-scope .modell-fig{ padding: 0; border: 0; line-height: 0; }
.kek-scope .cockpit-fig img, .kek-scope .modell-fig img, .kek-scope .post-media img, .kek-scope .fig-media img{
display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.kek-scope .cockpit-fig img{ height: auto; }
.kek-scope .cockpit-fig figcaption, .kek-scope .modell-fig figcaption{ line-height: 1.4; }
/* ============================================================
Schaltflächen: Unterlängen (g, j, p, q, y) vollständig sichtbar,
Beschriftung bricht auf schmalen Schirmen nicht ab
============================================================ */
.kek-scope .btn, .kek-scope .btn-primary, .kek-scope .btn-ondark, .kek-scope .btn-ghost, .kek-scope .btn-tertiary{
line-height: 1.25; /* statt 1 — Platz für Unterlängen */
padding-block: .875rem;
overflow: visible;
white-space: normal;
text-wrap: balance;
}
.kek-scope .btn > span, .kek-scope .btn-primary > span{ display: inline-block; padding-bottom: .06em; }
@media (max-width: 480px) {
.kek-scope .btn, .kek-scope .btn-primary{ font-size: .9375rem; padding-inline: 1.25rem; max-width: 100%; }
.kek-scope .hero-cta .btn, .kek-scope .hero-v3 .btn-primary{ width: 100%; }
}
/* 3) Fußzeilen-Schriftzug: vollständig sichtbar, bewusst gesetzt statt beschnitten.
Die Schriftgröße folgt der Fensterbreite, sodass der Zug immer hineinpasst. */
.kek-scope .footer-wordmark{
font-size: clamp(1.125rem, 5.35vw, 5.5rem);
letter-spacing: -.005em;
margin: clamp(2rem, 5vw, 3.25rem) 0 clamp(1.5rem, 3.5vw, 2.5rem);
white-space: nowrap; overflow: hidden; max-width: 100%;
display: block; width: 100%; text-align: center;
}
@media (max-width: 767px) { .kek-scope .footer-wordmark{ -webkit-text-stroke-width: 1px; } }
/* 4) Auf Tablet und Handy sitzen Chip und Plakette höher — sie bleiben am
Porträt und überlagern weder Berufsbezeichnung noch die Inhalte darunter. */
@media (max-width: 1279px) {
.kek-scope .hero-v4 .float-chip.chip-a{ bottom: 34%; left: -8px; }
.kek-scope .insp-badge{ bottom: 34%; right: -6px; width: 82px; height: 82px; }
.kek-scope .insp-badge .ib-year{ font-size: 1.25rem; }
.kek-scope .insp-badge .ib-foot{ font-size: .4375rem; }
}
@media (max-width: 767px) {
.kek-scope .hero-v4 .float-chip.chip-a{ bottom: 38%; }
.kek-scope .insp-badge{ bottom: 38%; width: 76px; height: 76px; }
}
@media (max-width: 420px) {
.kek-scope .hero-v4 .float-chip.chip-a{ bottom: 40%; max-width: 58%; }
.kek-scope .insp-badge{ bottom: 40%; width: 70px; height: 70px; }
}
/* Kurze Beschriftung auf schmalen Schirmen */
.kek-scope .cta-kurz{ display: none; }
@media (max-width: 480px) { .kek-scope .cta-lang{ display: none; } .kek-scope .cta-kurz{ display: inline-block; } }
/* Kopfbereich zwischen 1024 und 1150 px: CTA etwas schmaler, damit nichts überläuft */
@media (min-width: 1024px) and (max-width: 1150px) {
.kek-scope .site-header .btn-primary{ font-size: .875rem; padding: .75rem 1.125rem; }
.kek-scope .site-header .header-phone{ display: none; }
.kek-scope .site-header .main-nav{ gap: 1.125rem; }
}
/* ============================================================
KORREKTUREN — Kundenrückmeldung vom 13.08.2026
============================================================ */
/* 1) Prüfplakette „Geprüft 2026" und Play-Knopf überlagerten sich.
Ursache: Der Play-Knopf sitzt fest unten rechts in der Bildfläche,
die Plakette war ebenfalls von unten her verankert (bottom in Prozent).
Je nach Bildhöhe wanderte sie damit genau auf den Knopf — auf allen
üblichen Desktop-Breiten lag sie vollständig darüber.
Lösung: Die Plakette wird jetzt von oben verankert. Dadurch können sich
beide Elemente konstruktionsbedingt nicht mehr treffen, unabhängig
davon, wie hoch das Bild bei einer Bildschirmbreite gerade ist. */
.kek-scope .insp-badge{ top: 30%; bottom: auto; }
@media (max-width: 1279px) { .kek-scope .insp-badge{ top: 30%; bottom: auto; } }
@media (max-width: 767px) { .kek-scope .insp-badge{ top: 29%; bottom: auto; } }
@media (max-width: 640px) { .kek-scope .insp-badge{ top: 29%; bottom: auto; } }
@media (max-width: 420px) { .kek-scope .insp-badge{ top: 27%; bottom: auto; } }
/* 2) Zahlenkacheln ohne absolute Aussagen.
Auf Kundenwunsch stehen dort jetzt Begriffe statt Zahlen: die konkrete
Bußgeldhöhe und die Angabe „100 % persönliche Haftung" sind entfallen. */
.kek-scope .stat-wort{ font-size: clamp(1.9rem, 3.1vw, 2.9rem); letter-spacing: -.025em; }
/* ============================================================
KUHN ELEMENTOR KIT — widget wrappers and opt-out flags
------------------------------------------------------------
The original page used bare elements whose padding
came from the `section` element rule. The widgets keep that
rule and add a namespaced class purely as a styling target
for the Elementor panel, so nothing here changes the design
by itself — it only implements the toggles the panel exposes.
============================================================ */
/* The design set this inline on the figure. A control default only produces
CSS once Elementor renders it, so the baseline lives here and the control
overrides it — otherwise clearing the field collapses the layout. */
.kek-scope .kek-relief-fig{ max-width: 480px; }
/* Namespaced wrappers inherit the base section rhythm. */
.kek-scope .kek-relief, .kek-scope .kek-about, .kek-scope .kek-blog, .kek-scope .kek-quotes, .kek-scope .kek-benefits, .kek-scope .kek-regions, .kek-scope .kek-faq-section{ position: relative; }
.kek-scope .kek-benefits{ background: var(--color-surface-alt); }
.kek-scope .kek-regions{ background: var(--color-surface-alt); }
/* --- Ticker -------------------------------------------------- */
.kek-scope .ticker.is-reverse .ticker-track{ animation-direction: reverse; }
/* The skew toggle is handled in home.js, not here. The marquee travel is
itself a transform, so switching it off in CSS would stop the strip dead. */
/* --- Logo wall ----------------------------------------------- */
/* Pausing is opt-in: without the flag the loop keeps running. */
.kek-scope .logo-wall:not(.pause-on-hover) .marquee:hover .marquee-track{ animation-play-state: running; }
/* Static fallback for the noscript row. */
.kek-scope .marquee-track.is-static{
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
row-gap: 1.5rem;
}
/* --- Services: plain grid instead of the pinned ride ---------- */
@media (min-width: 1024px) {
html.js body.kek-scope .svc-pin.is-static{ height: auto; min-height: 0; overflow: visible; }
html.js body.kek-scope .svc-pin.is-static > .container{ display: block; height: auto; }
html.js body.kek-scope .svc-pin.is-static .svc-track{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
width: auto;
}
html.js body.kek-scope .svc-pin.is-static .svc-track .svc-cell{ width: auto; }
html.js body.kek-scope .svc-pin.is-static .sec-head .lead{ display: block; }
html.js body.kek-scope .svc-pin.is-static .svc-progress-row{ display: none; }
}
/* --- Regions: highlighted model card -------------------------- */
.kek-scope .modell.is-featured{ color: #fff; }
.kek-scope .modell.is-featured h3, .kek-scope .modell.is-featured .modell-scope, .kek-scope .modell.is-featured .modell-list li{ color: inherit; }
/* --- Effect opt-outs ------------------------------------------
These effects are applied by the motion system. The widgets
emit the flag class when the toggle is on, so the rules below
only need to neutralise the visual side when it is off. */
.kek-scope .final-cta:not(.has-sheen)::after{ display: none; }
.kek-scope .band-dark:not(.has-clip){ clip-path: none !important; }
/* ============================================================
ÜBER MICH — page-specific styles (.abt- prefix)
------------------------------------------------------------
Extracted from ueber-mich.html with a real CSS parser
(build2/extract.py). The page shares 799 of its 903 selectors
with the design above, so only its own namespace is here —
including the rules nested inside media queries, which an
earlier hand-rolled extractor silently dropped.
Scoped like everything else in this file.
============================================================ */
.kek-scope .abt-section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.kek-scope .abt-section.is-tight { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.kek-scope .abt-hero { padding-top: calc(var(--header-h) + clamp(2.75rem, 6.5vw, 5rem)); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.kek-scope .abt-hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) {
.kek-scope .abt-hero-grid { grid-template-columns: 7fr 5fr; }
}
.kek-scope .abt-hero h1 { font-size: clamp(2rem, 4.6vw, 3.55rem); letter-spacing: -.03em; max-width: 17ch; margin-top: 1.125rem; }
.kek-scope .abt-hero .abt-lead { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.7; color: var(--color-body); max-width: 34rem; margin-top: 1.5rem; }
.kek-scope .abt-hero .abt-copy { margin-top: 1.125rem; max-width: 34rem; color: var(--color-body); line-height: 1.7; }
.kek-scope .abt-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 2.25rem; }
.kek-scope .abt-hero-tel { font-weight: 600; color: var(--color-ink); text-decoration: none; border-bottom: 2px solid var(--color-accent); padding-bottom: .1em; }
.kek-scope .abt-hero-tel:hover { color: var(--color-primary); }
.kek-scope .abt-card { position: relative; max-width: 26.5rem; margin-inline: auto; }
@media (min-width: 1024px) {
.kek-scope .abt-card { margin-inline: 0 0; justify-self: end; }
}
.kek-scope .abt-card-media { position: relative; border: var(--rule); background: var(--color-surface-alt); }
.kek-scope .abt-card-media img { display: block; width: 100%; height: auto; }
.kek-scope .abt-card-media::before, .kek-scope .abt-card-media::after { content: ""; position: absolute; width: 1.375rem; height: 1.375rem; border: 2.5px solid var(--color-accent); z-index: 2; }
.kek-scope .abt-card-media::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.kek-scope .abt-card-media::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }
.kek-scope .abt-card-proto { border: var(--rule); border-top: 0; background: var(--color-surface); }
.kek-scope .abt-card-proto > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 1.05rem; border-top: var(--rule); font-size: .8125rem; line-height: 1.5; }
.kek-scope .abt-card-proto > div:first-child { border-top: 0; }
.kek-scope .abt-card-proto dt { font-family: var(--font-body); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem; color: var(--color-muted); padding-top: .1em; }
.kek-scope .abt-card-proto dd { margin: 0; color: var(--color-ink); font-weight: 600; }
.kek-scope .abt-card-proto dd small { display: block; font-weight: 400; color: var(--color-muted); margin-top: .15rem; }
.kek-scope .abt-values { background: var(--color-surface); }
.kek-scope .abt-values-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1024px) {
.kek-scope .abt-values-grid { grid-template-columns: 5fr 7fr; }
}
.kek-scope .abt-values-media { position: relative; }
@media (min-width: 1024px) {
.kek-scope .abt-values-media { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.kek-scope .abt-fig { margin: 0; overflow: hidden; border-radius: var(--radius-sm); }
.kek-scope .abt-fig img { display: block; width: 100%; height: auto; }
.kek-scope .abt-figline { display: flex; align-items: baseline; gap: .75rem; margin-top: .8rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }
.kek-scope .abt-figline::before { content: ""; flex: none; width: 1.75rem; height: 2px; background: var(--color-accent); transform: translateY(-.2em); }
.kek-scope .abt-principles { display: grid; }
.kek-scope .abt-principle { display: grid; grid-template-columns: auto 1fr; gap: 1.15rem; align-items: start; padding-block: 1.35rem; border-top: var(--rule); }
.kek-scope .abt-principle:last-child { border-bottom: var(--rule); }
.kek-scope .abt-principle-tick { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .15rem; background: var(--color-primary-tint); display: grid; place-items: center; }
.kek-scope .abt-principle-tick svg { width: .9rem; height: .9rem; stroke: var(--color-primary); stroke-width: 3; fill: none; }
.kek-scope .abt-principle p { font-size: clamp(1rem, 1.45vw, 1.125rem); line-height: 1.6; color: var(--color-ink); font-weight: 500; }
.kek-scope .abt-qual { padding-block: clamp(4.5rem, 8.5vw, 8rem); }
.kek-scope .abt-roles { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-block: var(--rule-dark); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) {
.kek-scope .abt-roles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.kek-scope .abt-roles { grid-template-columns: repeat(4, 1fr); }
}
.kek-scope .abt-role { background: var(--color-primary); padding: 1.6rem 1.5rem 1.75rem; }
.kek-scope .abt-qual.teal .abt-role { background: var(--color-dark); }
.kek-scope .abt-role-idx { font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; color: var(--color-mint); display: block; margin-bottom: .9rem; }
.kek-scope .abt-role h3 { color: #fff; font-size: 1.125rem; line-height: 1.35; }
.kek-scope .abt-focus { margin-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.kek-scope .abt-focus-label { font-family: var(--font-body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .35rem; }
.kek-scope .abt-focus-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding-block: 1.05rem; border-top: var(--rule-dark); }
.kek-scope .abt-focus-row:last-child { border-bottom: var(--rule-dark); }
.kek-scope .abt-focus-row .abt-principle-tick { background: rgba(76,224,157,.14); }
.kek-scope .abt-focus-row .abt-principle-tick svg { stroke: var(--color-mint); }
.kek-scope .abt-focus-row p { color: rgba(255,255,255,.85); font-size: 1rem; line-height: 1.6; }
.kek-scope .abt-flow-grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 1024px) {
.kek-scope .abt-flow-grid { grid-template-columns: 7fr 5fr; }
}
.kek-scope .abt-flow-media { order: -1; }
@media (min-width: 1024px) {
.kek-scope .abt-flow-media { order: 2; position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.kek-scope .abt-steps { position: relative; display: grid; gap: clamp(1.75rem, 3.5vw, 2.5rem); padding-left: clamp(1.9rem, 4vw, 2.6rem); }
.kek-scope .abt-steps::before { content: ""; position: absolute; left: .55rem; top: .6rem; bottom: .6rem; width: 1px; background: rgba(15,61,46,.16); }
.kek-scope .abt-step { position: relative; }
.kek-scope .abt-step::before { content: ""; position: absolute; left: calc(-1 * clamp(1.9rem, 4vw, 2.6rem) + .32rem); top: .48em; width: .5rem; height: .5rem; background: var(--color-accent); }
.kek-scope .abt-step-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: .95; color: transparent; -webkit-text-stroke: 1.5px var(--color-accent); display: block; margin-bottom: .55rem; }
.kek-scope .abt-step h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--color-ink); }
.kek-scope .abt-step p { margin-top: .5rem; color: var(--color-body); line-height: 1.65; max-width: 32rem; }
.kek-scope .abt-region { padding-block: clamp(4.5rem, 8.5vw, 8rem); }
.kek-scope .abt-region .abt-region-copy { color: rgba(255,255,255,.82); line-height: 1.75; max-width: 44rem; font-size: clamp(1rem, 1.5vw, 1.125rem); }
.kek-scope .abt-modes { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-block: var(--rule-dark); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 768px) {
.kek-scope .abt-modes { grid-template-columns: 1fr 1fr; }
}
.kek-scope .abt-mode { background: var(--color-dark); padding: 1.7rem 1.6rem 1.9rem; }
.kek-scope .abt-mode-tag { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-weight: 600; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-mint); margin-bottom: .8rem; }
.kek-scope .abt-mode-tag::before { content: ""; width: .5rem; height: .5rem; background: currentColor; }
.kek-scope .abt-mode h3 { color: #fff; font-size: 1.2rem; }
.kek-scope .abt-mode p { color: rgba(255,255,255,.72); line-height: 1.65; margin-top: .55rem; font-size: .96rem; }
.kek-scope .abt-cta { text-align: center; }
.kek-scope .abt-cta .container { max-width: 46rem; }
.kek-scope .abt-cta h2 { font-size: clamp(1.75rem, 3.6vw, 2.7rem); letter-spacing: -.02em; }
.kek-scope .abt-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.25rem; }
.kek-scope .abt-cta-actions small { color: var(--color-muted); font-size: .95rem; }
.kek-scope .abt-cta-actions small a { color: var(--color-ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--color-accent); padding-bottom: .08em; }
@media (max-width: 480px) {
.kek-scope .abt-hero h1 { font-size: clamp(1.75rem, 8.4vw, 2.25rem); hyphens: auto; }
}
/* ============================================================
KONTAKT — page-specific styles
------------------------------------------------------------
Namespaces: .kt- (sections), .cal- (the two-click Calendly
embed), .contact- (the details list), and the form's own
.field / .form- / .consent / .req.
Extracted with test/extract-page-css.py; the page shares 799
of its 862 selectors with the design above.
============================================================ */
.kek-scope .form-grid { display: grid; gap: 1.5rem; }
.kek-scope .form-row-2 { display: grid; gap: 1.5rem; }
@media (min-width: 640px) {
.kek-scope .form-row-2 { grid-template-columns: 1fr 1fr; }
}
.kek-scope .field label { display: block; margin-bottom: .5rem; font-size: .78125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink); }
.kek-scope .field .req { color: var(--color-accent-deep); }
.kek-scope .field input, .kek-scope .field textarea { width: 100%; padding: .9375rem 1rem; font: 400 1rem/1.5 var(--font-body); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0; transition: border-color var(--transition), box-shadow var(--transition); }
.kek-scope .field input:hover, .kek-scope .field textarea:hover { border-color: rgba(15,61,46,.35); }
.kek-scope .field input:focus, .kek-scope .field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-accent); }
.kek-scope .field textarea { min-height: 160px; resize: vertical; }
.kek-scope .field-hint { margin-top: .4rem; font-size: .8125rem; color: var(--color-muted); }
.kek-scope .consent { display: flex; gap: .875rem; align-items: flex-start; padding: 1.125rem; border: var(--rule); background: var(--color-surface); }
.kek-scope .consent input { width: 1.125rem; height: 1.125rem; margin-top: .2rem; accent-color: var(--color-primary); flex: none; }
.kek-scope .consent label { font-size: .9375rem; line-height: 1.55; color: var(--color-body); }
.kek-scope .form-note { font-size: .8125rem; color: var(--color-muted); }
.kek-scope .form-success { display: none; border: var(--rule); border-left: 3px solid var(--color-accent); padding: 1.125rem 1.25rem; background: var(--color-primary-tint); font-weight: 600; color: var(--color-primary); }
.kek-scope .form-success.is-visible { display: block; }
.kek-scope .contact-panel { position: relative; background: var(--color-primary); color: #fff; padding: 2.25rem 2rem; }
.kek-scope .contact-panel::before, .kek-scope .contact-panel::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--color-accent); }
.kek-scope .contact-panel::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.kek-scope .contact-panel::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.kek-scope .contact-panel h3 { color: #fff; margin-bottom: 1.5rem; }
.kek-scope .contact-list { display: grid; }
.kek-scope .contact-list a, .kek-scope .contact-list > div { display: flex; gap: .875rem; align-items: flex-start; padding: .875rem 0; border-top: var(--rule-dark); color: #fff; text-decoration: none; }
.kek-scope .contact-list svg { flex: none; margin-top: .15rem; color: var(--color-accent); }
.kek-scope .contact-list strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; }
.kek-scope .contact-list span { display: block; font-size: .8125rem; color: rgba(255,255,255,.65); letter-spacing: .04em; }
.kek-scope .contact-list a:hover strong { color: var(--color-accent); }
.kek-scope .cal-embed { position: relative; border: var(--border); background: var(--color-surface); min-height: 560px; display: flex; }
.kek-scope .cal-placeholder { margin: auto; text-align: center; padding: 3rem 2rem; max-width: 26rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.kek-scope .cal-placeholder .cal-ico { color: var(--color-primary); }
.kek-scope .cal-placeholder p { font-size: .9375rem; color: var(--color-body); }
.kek-scope .cal-embed iframe { width: 100%; min-height: 640px; border: 0; }
.kek-scope .kt-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.kek-scope .kt-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.kek-scope .kt-hero h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.03em; max-width: 18ch; margin-top: 1.125rem; }
.kek-scope .kt-hero .kt-lead { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.7; color: var(--color-body); max-width: 40rem; margin-top: 1.5rem; }
.kek-scope .kt-contact-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1024px) {
.kek-scope .kt-contact-grid { grid-template-columns: 5fr 7fr; }
.kek-scope .kt-contact-grid > .kt-panel-col { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.kek-scope .kt-first { margin-bottom: 1.5rem; }
.kek-scope .kt-first h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); letter-spacing: -.02em; }
.kek-scope .kt-first p { margin-top: .75rem; color: var(--color-body); line-height: 1.7; max-width: 38rem; }
.kek-scope .kt-person { display: flex; align-items: center; gap: .9rem; margin-top: 1.25rem; }
.kek-scope .kt-person img { width: 3.25rem; height: 3.25rem; border-radius: 50%; display: block; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent); }
.kek-scope .kt-person strong { display: block; font-family: var(--font-head); font-size: .9855rem; color: var(--color-ink); }
.kek-scope .kt-person span { display: block; font-size: .8125rem; color: var(--color-muted); }
.kek-scope .cal-placeholder .btn { align-self: center; }
.kek-scope .cal-consent-note { font-size: .8125rem; color: var(--color-muted); max-width: 24rem; }
.kek-scope .kt-form-wrap { max-width: 46rem; }
.kek-scope .field select { width: 100%; padding: .9375rem 2.75rem .9375rem 1rem; font: 400 1rem/1.5 var(--font-body); color: var(--color-ink); background-color: var(--color-surface); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F3D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; border: 1px solid var(--color-border); border-radius: 0; appearance: none; transition: border-color var(--transition), box-shadow var(--transition); }
.kek-scope .field select:hover { border-color: rgba(15,61,46,.35); }
.kek-scope .field select:focus { outline: none; border-color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-accent); }
.kek-scope .consent a { color: var(--color-primary); font-weight: 600; }
.kek-scope .kt-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.kek-scope .kt-faq .faq { max-width: 46rem; }
@media (max-width: 480px) {
.kek-scope .kt-hero h1 { hyphens: auto; }
.kek-scope .contact-panel { padding: 1.75rem 1.4rem; }
}
.kek-scope .contact-panel h2.kt-panel-h { color: #fff; margin-bottom: 1.5rem; font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; }
.kek-scope .contact-list a, .kek-scope .contact-list > div { min-width: 0; }
.kek-scope .contact-list a > span, .kek-scope .contact-list > div > span { min-width: 0; }
.kek-scope .contact-list strong { overflow-wrap: anywhere; }
.kek-scope .cal-embed { min-width: 0; }
@media print {
.kek-scope .kt-hero { padding-top: 0; }
.kek-scope .contact-panel { background: #fff !important; color: var(--color-ink) !important; border: 1px solid #999; }
.kek-scope .contact-panel h2.kt-panel-h, .kek-scope .contact-list strong, .kek-scope .contact-list a { color: var(--color-ink) !important; }
.kek-scope .contact-list span { color: #555 !important; }
.kek-scope .cal-embed { display: none; }
}
.kek-scope .kt-person { min-width: 0; flex-wrap: wrap; }
.kek-scope .kt-person > span { min-width: 0; }
.kek-scope .kt-person strong, .kek-scope .kt-person span { overflow-wrap: anywhere; }
.kek-scope .form-grid, .kek-scope .form-row-2 { min-width: 0; }
.kek-scope .form-row-2 > .field { min-width: 0; }
.kek-scope .field input, .kek-scope .field select, .kek-scope .field textarea { min-width: 0; }
.kek-scope .field label { overflow-wrap: anywhere; }
.kek-scope .form-grid { grid-template-columns: minmax(0, 1fr); }
.kek-scope .form-row-2 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
.kek-scope .form-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* The design's success note only ever showed one message. A form that really
sends can also fail, and saying so in the same green would be misleading. */
.kek-scope .form-success.is-error{
border-left-color: #B3261E;
color: #B3261E;
}
/* ============================================================
LEISTUNGEN — page-specific styles (.sv- prefix)
------------------------------------------------------------
Extracted with test/extract-page-css.py. The page shares the
rest of its stylesheet with the design above.
============================================================ */
@media print {
.kek-scope .sv-hero { padding-top: 0; }
.kek-scope .band-dark, .kek-scope .sv-tool { background: #fff !important; color: var(--color-ink) !important; border: 1px solid #999; }
.kek-scope .band-dark h2, .kek-scope .band-dark h3, .kek-scope .sv-tool h3 { color: var(--color-ink) !important; }
.kek-scope .sv-tool p, .kek-scope .sv-tools-note { color: #444 !important; }
}
.kek-scope .sv-section { padding-block: clamp(4rem, 7.5vw, 7rem); }
.kek-scope .sv-section.is-tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.kek-scope .sv-hero { padding-top: calc(var(--header-h) + clamp(2.75rem, 6.5vw, 5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
.kek-scope .sv-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.3rem); letter-spacing: -.03em; max-width: 22ch; margin-top: 1.125rem; }
.kek-scope .sv-hero .sv-lead { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); line-height: 1.7; color: var(--color-body); max-width: 44rem; margin-top: 1.5rem; }
.kek-scope .sv-hero .sv-sub { color: var(--color-body); line-height: 1.7; max-width: 44rem; margin-top: 1rem; }
.kek-scope .sv-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.25rem; }
.kek-scope .sv-jump { font-weight: 600; color: var(--color-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; border-bottom: 2px solid var(--color-accent); padding-bottom: .12em; }
.kek-scope .sv-jump svg { transition: transform var(--transition); }
.kek-scope .sv-jump:hover svg { transform: translateY(3px); }
.kek-scope .sv-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
.kek-scope .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.kek-scope .sv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kek-scope .sv-card { position: relative; display: flex; flex-direction: column; border: var(--rule); background: var(--color-surface); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
.kek-scope .sv-card:hover { border-color: rgba(15,61,46,.4); box-shadow: 0 10px 30px rgba(15,61,46,.08); }
.kek-scope .sv-card-media { position: relative; overflow: hidden; }
.kek-scope .sv-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2,.6,.2,1); scale: 1.02; }
.kek-scope .sv-card:hover .sv-card-media img { scale: 1.07; }
.kek-scope .sv-card-idx { position: absolute; top: .9rem; left: .9rem; z-index: 2; font-family: var(--font-head); font-weight: 800; font-size: .78125rem; letter-spacing: .1em; color: var(--color-ink); background: var(--color-accent); padding: .3rem .55rem; }
.kek-scope .sv-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem 1.4rem 1.5rem; }
.kek-scope .sv-card h3 { font-size: 1.28rem; letter-spacing: -.01em; }
.kek-scope .sv-card p { margin-top: .6rem; color: var(--color-body); line-height: 1.6; font-size: .95rem; flex: 1; }
.kek-scope .sv-card .sv-note { flex: 0; font-size: .8125rem; color: var(--color-muted); border-left: 3px solid var(--color-accent); padding: .35rem 0 .35rem .75rem; margin-top: .8rem; }
.kek-scope .sv-card-cta { margin-top: 1.1rem; font-weight: 700; font-size: .9375rem; color: var(--color-primary); display: inline-flex; align-items: center; gap: .45rem; }
.kek-scope .sv-card-cta svg { transition: transform var(--transition); }
.kek-scope .sv-card:hover .sv-card-cta svg { transform: translateX(4px); }
.kek-scope .sv-card-link::after { content: ""; position: absolute; inset: 0; z-index: 3; }
.kek-scope .sv-card-link { color: inherit; text-decoration: none; }
.kek-scope .sv-card:focus-within { border-color: var(--color-primary); box-shadow: inset 0 -3px 0 var(--color-accent); }
.kek-scope .sv-card-link:focus { outline: none; }
@media (min-width: 1024px) {
.kek-scope .sv-card.is-feature { grid-column: span 3; flex-direction: row; }
.kek-scope .sv-card.is-feature .sv-card-media { width: 52%; flex: none; }
.kek-scope .sv-card.is-feature .sv-card-body { justify-content: center; padding: 2rem 2.25rem; }
.kek-scope .sv-card.is-feature h3 { font-size: 1.7rem; }
.kek-scope .sv-card.is-feature p { flex: 0; font-size: 1.02rem; }
}
@media (min-width: 720px) and (max-width: 1023.9px) {
.kek-scope .sv-card.is-feature { grid-column: span 2; }
}
@media (min-width: 1024px) {
.kek-scope .sv-card.is-wide { grid-column: span 2; flex-direction: row; }
.kek-scope .sv-card.is-wide .sv-card-media { width: 46%; flex: none; }
}
.kek-scope .sv-card.is-flash { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
.kek-scope .sv-card { scroll-margin-top: calc(var(--header-h) + 2rem); }
}
.kek-scope .sv-card { scroll-margin-top: calc(var(--header-h) + 2rem); }
.kek-scope .sv-anliegen { background: var(--color-surface); }
.kek-scope .sv-anliegen-list { display: grid; gap: .75rem; max-width: 52rem; }
@media (min-width: 720px) {
.kek-scope .sv-anliegen-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.kek-scope .sv-anliegen-btn { display: flex; align-items: flex-start; gap: .875rem; text-align: left; width: 100%; padding: 1rem 1.125rem; border: var(--rule); background: #fff; font: 500 .96rem/1.5 var(--font-body); color: var(--color-ink); cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); }
.kek-scope .sv-anliegen-btn:hover { border-color: rgba(15,61,46,.45); }
.kek-scope .sv-anliegen-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kek-scope .sv-anliegen-btn .sv-arr { flex: none; margin-top: .2rem; color: var(--color-accent-deep); transition: transform var(--transition); }
.kek-scope .sv-anliegen-btn:hover .sv-arr { transform: translateX(3px); }
.kek-scope .sv-anliegen-hint { margin-top: 1rem; font-size: .8125rem; color: var(--color-muted); }
.kek-scope .sv-chain { border-block: var(--rule); padding-block: clamp(2.5rem, 5vw, 4rem); }
.kek-scope .sv-chain-track { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; }
.kek-scope .sv-chain-node { font-family: var(--font-head); font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.05rem); color: var(--color-ink); padding: .55rem .9rem; border: var(--rule); background: var(--color-surface); }
.kek-scope .sv-chain-arr { color: var(--color-accent-deep); flex: none; font-weight: 800; }
.kek-scope .sv-chain p { margin-top: 1.5rem; color: var(--color-body); line-height: 1.7; max-width: 46rem; }
.kek-scope .sv-tools-grid { display: grid; gap: 1px; background: rgba(255,255,255,.14); border-block: var(--rule-dark); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 640px) {
.kek-scope .sv-tools-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px) {
.kek-scope .sv-tools-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.kek-scope .sv-tool { background: var(--color-primary); padding: 1.6rem 1.4rem 1.7rem; display: flex; flex-direction: column; gap: .7rem; }
.kek-scope .sv-tool-chip { align-self: flex-start; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-mint); border: 1px solid rgba(76,224,157,.4); padding: .3rem .55rem; }
.kek-scope .sv-tool h3 { color: #fff; font-size: 1.1rem; line-height: 1.35; }
.kek-scope .sv-tool p { color: rgba(255,255,255,.7); font-size: .9rem; line-height: 1.55; flex: 1; }
.kek-scope .sv-tools-note { margin-top: 1.5rem; color: rgba(255,255,255,.65); font-size: .875rem; max-width: 44rem; }
.kek-scope .sv-models { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 900px) {
.kek-scope .sv-models { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.kek-scope .sv-model { border: var(--rule); background: var(--color-surface); display: flex; flex-direction: column; }
.kek-scope .sv-model-media { overflow: hidden; }
.kek-scope .sv-model-media img { display: block; width: 100%; height: auto; }
.kek-scope .sv-model-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.kek-scope .sv-model-tag { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; color: var(--color-primary); margin-bottom: .7rem; }
.kek-scope .sv-model-tag::before { content: ""; width: .5rem; height: .5rem; background: var(--color-accent); }
.kek-scope .sv-model h3 { font-size: 1.3rem; }
.kek-scope .sv-model ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; }
.kek-scope .sv-model li { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; border-top: var(--rule); font-size: .95rem; color: var(--color-ink); line-height: 1.5; }
.kek-scope .sv-model li svg { flex: none; margin-top: .25rem; width: .85rem; height: .85rem; stroke: var(--color-primary); stroke-width: 3; fill: none; }
.kek-scope .sv-models-note { margin-top: 1.5rem; color: var(--color-body); line-height: 1.65; }
.kek-scope .sv-models-cta { margin-top: 1rem; }
.kek-scope .sv-models-cta a { font-weight: 700; color: var(--color-primary); text-decoration: none; display: inline-flex; gap: .5rem; align-items: center; border-bottom: 2px solid var(--color-accent); padding-bottom: .12em; }
.kek-scope .sv-steps { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); counter-reset: none; }
@media (min-width: 720px) {
.kek-scope .sv-steps { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px) {
.kek-scope .sv-steps { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
.kek-scope .sv-step { border-top: 3px solid var(--color-border); padding-top: 1rem; transition: border-color .4s ease; }
.kek-scope .sv-step .sv-step-num { font-family: var(--font-head); font-weight: 800; font-size: .8125rem; letter-spacing: .12em; color: var(--color-accent-deep); display: block; margin-bottom: .5rem; }
.kek-scope .sv-step h3 { font-size: 1.08rem; }
.kek-scope .sv-step p { margin-top: .45rem; color: var(--color-body); font-size: .92rem; line-height: 1.6; }
.kek-scope .sv-usp-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 720px) {
.kek-scope .sv-usp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.kek-scope .sv-usp { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem 0; border-top: var(--rule); }
.kek-scope .sv-usp .abt-principle-tick { background: var(--color-primary-tint); }
.kek-scope .sv-usp h3 { font-size: 1.1rem; }
.kek-scope .sv-usp p { margin-top: .35rem; color: var(--color-body); font-size: .95rem; line-height: 1.6; }
.kek-scope .sv-trust { background: var(--color-surface); border-block: var(--rule); }
.kek-scope .sv-trust .logo-wall { border-bottom: 0; padding-block: 0 2.5rem; }
.kek-scope .sv-quotes { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (min-width: 900px) {
.kek-scope .sv-quotes { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.kek-scope .sv-quote { border: var(--rule); background: #fff; padding: 1.4rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.kek-scope .sv-quote blockquote { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--color-ink); flex: 1; }
.kek-scope .sv-quote .q-person strong { display: block; font-family: var(--font-head); font-size: .95rem; }
.kek-scope .sv-quote .q-stars { color: var(--color-accent-deep); letter-spacing: .12em; font-size: .8rem; }
.kek-scope .sv-quote .q-source { display: inline-flex; align-items: center; gap: .45rem; font-size: .78125rem; color: var(--color-muted); margin-top: .3rem; }
.kek-scope .sv-qual-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.kek-scope .sv-qual-chip { font-weight: 600; font-size: .8125rem; letter-spacing: .04em; color: var(--color-ink); border: var(--rule); background: #fff; padding: .5rem .8rem; }
.kek-scope .sv-trust-link { margin-top: 1.25rem; }
.kek-scope .sv-trust-link a { font-weight: 700; color: var(--color-primary); text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.kek-scope .sv-cta { text-align: center; }
.kek-scope .sv-cta .container { max-width: 46rem; }
.kek-scope .sv-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.02em; }
.kek-scope .sv-cta p { margin-top: 1rem; color: var(--color-body); line-height: 1.7; }
.kek-scope .sv-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; }
.kek-scope .sv-hero h1 { hyphens: manual; }
@media (max-width: 480px) {
.kek-scope .sv-hero h1 { hyphens: auto; }
.kek-scope .sv-chain-track { gap: .5rem; }
}
.kek-scope .sv-model-media-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-border); overflow: hidden; }
.kek-scope .sv-model-media-split img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The design marks the services page so the mega-menu trigger stays
underlined. Its own file says `page-leistung`; the page is published at
/leistungen/, so the class the plugin adds is `page-leistungen`. Both are
listed rather than picking one — an editor renaming the page should not
silently un-highlight the navigation. */
body.kek-scope.page-leistung #mega-trigger::after,
body.kek-scope.page-leistungen #mega-trigger::after { transform: scaleX(1); }
/* ============================================================
SICHERHEITSTECHNISCHE BETREUUNG — service detail page
------------------------------------------------------------
Namespace .sp-, plus the band variant and text weights the
page introduces. Extracted with test/extract-page-css.py.
============================================================ */
/* The dots on the interactive placeholder pulse. Keyframes are named rather
than selected — their inner rules are `0%` and `100%`, which carry no page
prefix — so the namespace extraction dropped this one and the dots simply
sat still. */
@keyframes sp-pulse { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.16); opacity: 1; } }
.kek-scope .band-dark.teal { background: var(--color-dark); }
.kek-scope .crumbs .sep { color: var(--color-accent-deep); }
.kek-scope .sp-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.kek-scope .sp-section.is-tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.kek-scope .sp-hero { padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.kek-scope .sp-hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.kek-scope .sp-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.kek-scope .sp-hero h1 { font-size: clamp(1.9rem, 4vw, 3.15rem); letter-spacing: -.03em; margin-top: 1rem; max-width: 20ch; }
.kek-scope .sp-lead { font-size: clamp(1.0625rem, 1.55vw, 1.1875rem); line-height: 1.72; color: var(--color-body); max-width: 42rem; margin-top: 1.5rem; }
.kek-scope .sp-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 2rem; }
.kek-scope .sp-hero-fig { position: relative; margin: 0; }
.kek-scope .sp-hero-fig::before, .kek-scope .sp-hero-fig::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--color-accent); z-index: 1; }
.kek-scope .sp-hero-fig::before { top: -8px; left: -8px; border-right: 0; border-bottom: 0; }
.kek-scope .sp-hero-fig::after { bottom: -8px; right: -8px; border-left: 0; border-top: 0; }
.kek-scope .sp-hero-media { overflow: hidden; }
.kek-scope .sp-hero-fig img { width: 100%; height: auto; display: block; }
.kek-scope .sp-signals { display: grid; gap: 0; border-top: var(--rule); margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
.kek-scope .sp-signals { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
}
.kek-scope .sp-signal { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem 0; border-bottom: var(--rule); }
.kek-scope .sp-signal-idx { flex: none; font-family: var(--font-head); font-size: .78125rem; font-weight: 800; letter-spacing: .06em; color: var(--color-accent-deep); padding-top: .2rem; min-width: 2.2rem; }
.kek-scope .sp-signal p { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--color-body); }
.kek-scope .sp-areas { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); margin-top: 2.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
.kek-scope .sp-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.kek-scope .sp-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kek-scope .sp-area { position: relative; display: flex; flex-direction: column; min-width: 0; border: var(--border); background: var(--color-surface); transition: transform var(--transition), box-shadow var(--transition); }
.kek-scope .sp-area:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,61,46,.10); }
@media (prefers-reduced-motion: reduce) {
.kek-scope .sp-area:hover { transform: none; }
}
.kek-scope .sp-area-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-primary-tint); }
.kek-scope .sp-area-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kek-scope .sp-area-idx { position: absolute; left: 0; bottom: 0; z-index: 2; padding: .4rem .7rem; background: var(--color-primary); color: var(--color-accent); font-family: var(--font-head); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.kek-scope .sp-area-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.35rem 1.4rem 1.5rem; flex: 1; }
.kek-scope .sp-area h3 { font-size: 1.1875rem; letter-spacing: -.01em; }
.kek-scope .sp-area p { font-size: .9855rem; line-height: 1.62; color: var(--color-body); margin: 0; }
.kek-scope .sp-flow { display: grid; gap: 0; margin-top: 2.5rem; border-top: var(--rule); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
.kek-scope .sp-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; gap: 2rem; }
}
.kek-scope .sp-step { padding: 1.5rem 0; border-bottom: var(--rule); min-width: 0; }
@media (min-width: 980px) {
.kek-scope .sp-step { padding: 1.75rem 0 0; border-bottom: 0; border-top: 2px solid var(--color-accent); }
}
.kek-scope .sp-step-idx { font-family: var(--font-head); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--color-accent-deep); letter-spacing: -.02em; }
.kek-scope .sp-step h3 { margin-top: .65rem; font-size: 1.0625rem; letter-spacing: -.005em; }
.kek-scope .sp-step p { margin-top: .5rem; font-size: .9855rem; line-height: 1.6; color: var(--color-body); }
.kek-scope .sp-interactive { position: relative; overflow: hidden; border: var(--border); background: var(--color-primary); color: #fff; }
.kek-scope .sp-interactive-grid { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
.kek-scope .sp-interactive-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.kek-scope .sp-interactive-copy { padding: clamp(2rem, 4vw, 3.25rem); min-width: 0; }
.kek-scope .sp-interactive h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2.15rem); letter-spacing: -.02em; }
.kek-scope .sp-interactive p { margin-top: 1rem; color: rgba(255,255,255,.84); line-height: 1.7; max-width: 40rem; }
.kek-scope .sp-interactive-media { position: relative; min-height: 260px; }
.kek-scope .sp-interactive-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kek-scope .sp-hotspot { position: absolute; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--color-accent); background: rgba(255,185,0,.22); }
.kek-scope .sp-hotspot::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
.kek-scope .sp-hotspot { animation: sp-pulse 2.6s ease-in-out infinite; }
.kek-scope .sp-hotspot:nth-of-type(2) { animation-delay: .55s; }
.kek-scope .sp-hotspot:nth-of-type(3) { animation-delay: 1.1s; }
}
.kek-scope .sp-tiles { display: grid; gap: 1.125rem; margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
.kek-scope .sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
.kek-scope .sp-tiles.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
.kek-scope .sp-tiles.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.kek-scope .sp-tile { display: flex; flex-direction: column; gap: .55rem; min-width: 0; padding: 1.25rem 1.3rem 1.4rem; border: var(--rule-dark); background: rgba(255,255,255,.05); }
.kek-scope .sp-tile h3 { color: #fff; font-size: 1.03125rem; letter-spacing: -.005em; }
.kek-scope .sp-tile p { font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.72); margin: 0; }
.kek-scope .sp-tile-media { margin: -1.25rem -1.3rem .35rem; aspect-ratio: 16 / 10; overflow: hidden; background: rgba(255,255,255,.06); }
.kek-scope .sp-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kek-scope .sp-soon { align-self: flex-start; margin-top: auto; padding: .28rem .6rem; border: 1px solid rgba(255,185,0,.5); color: var(--color-accent); font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.kek-scope .sp-tiles.is-light .sp-tile { border: var(--rule); background: var(--color-surface); }
.kek-scope .sp-tiles.is-light .sp-tile h3 { color: var(--color-ink); }
.kek-scope .sp-tiles.is-light .sp-tile p { color: var(--color-body); }
.kek-scope .sp-tiles.is-light .sp-soon { border-color: var(--color-accent-deep); color: var(--color-accent-deep); }
.kek-scope .sp-praxis { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
.kek-scope .sp-praxis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kek-scope .sp-praxis-card { display: flex; flex-direction: column; min-width: 0; border: var(--border); background: var(--color-surface); }
.kek-scope .sp-praxis-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-primary-tint); }
.kek-scope .sp-praxis-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kek-scope .sp-praxis-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kek-scope .sp-praxis h3 { font-size: 1.0625rem; }
.kek-scope .sp-praxis p { font-size: .9375rem; line-height: 1.6; color: var(--color-body); margin: 0; }
.kek-scope .sp-reach { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
.kek-scope .sp-reach { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}
.kek-scope .sp-reach-copy p { color: rgba(255,255,255,.85); line-height: 1.72; }
.kek-scope .sp-digital-list { display: grid; gap: 0; margin-top: 1.75rem; border-top: var(--rule-dark); }
.kek-scope .sp-digital-list li { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-bottom: var(--rule-dark); color: rgba(255,255,255,.88); font-size: .9855rem; line-height: 1.55; }
.kek-scope .sp-digital-list svg { flex: none; margin-top: .2rem; color: var(--color-accent); }
.kek-scope .sp-reach-media { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; min-width: 0; }
.kek-scope .sp-reach-media figure { margin: 0; min-width: 0; }
.kek-scope .sp-reach-media img { width: 100%; height: auto; display: block; }
.kek-scope .sp-reach-cap { margin-top: .55rem; font-size: .78125rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.kek-scope .sp-cta { text-align: center; }
.kek-scope .sp-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); letter-spacing: -.025em; max-width: 22ch; margin-inline: auto; }
.kek-scope .sp-cta p { margin-top: 1.125rem; color: var(--color-body); line-height: 1.7; max-width: 44rem; margin-inline: auto; }
.kek-scope .sp-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
@media print {
.kek-scope .sp-hero { padding-top: 0; }
.kek-scope .faq-ind, .kek-scope .sp-hotspot { display: none; }
.kek-scope .sp-interactive, .kek-scope .sp-tile, .kek-scope .sp-tiles { background: #fff !important; color: var(--color-ink) !important; }
.kek-scope .sp-interactive h2, .kek-scope .sp-tile h3, .kek-scope .sp-tile p, .kek-scope .sp-interactive p { color: var(--color-ink) !important; }
.kek-scope .sp-area, .kek-scope .sp-praxis-card { break-inside: avoid; }
}
.kek-scope .sp-hero-fig img, .kek-scope .sp-area-media img, .kek-scope .sp-praxis-media img, .kek-scope .sp-tile-media img, .kek-scope .sp-reach-media img, .kek-scope .sp-interactive-media img { max-width: 100%; }
.kek-scope .sp-tile-media-blank { background: rgba(255,255,255,.07); display: grid; place-items: center; }
.kek-scope .sp-tile-media-blank svg { width: 100%; height: 100%; display: block; }
.kek-scope .sp-ph-plate { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.kek-scope .sp-ph-line { fill: rgba(255,255,255,.28); }
.kek-scope .sp-ph-line.is-strong { fill: var(--color-accent); }
.kek-scope .sp-ph-keys { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.16); stroke-width: 1; }
.kek-scope .sp-ph-key rect { fill: rgba(255,255,255,.24); }
.kek-scope .sp-ph-eq { fill: rgba(255,185,0,.55); }
.kek-scope .sp-signal { min-width: 0; }
.kek-scope .sp-signal p, .kek-scope .sp-area p, .kek-scope .sp-area h3, .kek-scope .sp-step p, .kek-scope .sp-step h3, .kek-scope .sp-tile p, .kek-scope .sp-tile h3, .kek-scope .sp-praxis p, .kek-scope .sp-praxis h3, .kek-scope .sp-digital-list li, .kek-scope .sp-reach-cap, .kek-scope .sp-lead, .kek-scope .sp-cta p, .kek-scope .sp-interactive p, .kek-scope .sec-cols h2, .kek-scope .sp-hero h1, .kek-scope .sp-cta h2 { overflow-wrap: anywhere; hyphens: auto; }
.kek-scope .sp-area-body, .kek-scope .sp-praxis-body, .kek-scope .sp-tile, .kek-scope .sp-interactive-copy, .kek-scope .sp-reach-copy { min-width: 0; }
.kek-scope .sp-area[id], .kek-scope section[id], .kek-scope .sp-interactive[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
/* The service detail page tightens the section head and lets the rubric row
wrap. Both sit on shared classes rather than the page's own namespace, so
the namespace-filtered extraction skipped them — the eyebrow then ran onto a
second line at 390px where the design keeps it on one. */
/* Scoped to the service detail page, which is where it came from. Each of the
design's pages is a standalone file with its own stylesheet, so a rule found
in one applies only there — applying this globally let the home page's
rubric row stay on one line where the design wraps it, and made that section
10px short. */
.kek-scope .sp-section .sec-head .sec-meta{ margin-bottom: clamp(1.125rem, 2.2vw, 1.75rem); flex-wrap: wrap; gap: .35rem 1rem; }
@media (max-width: 767px){
.kek-scope .sp-section .sec-head{ margin-bottom: 1.75rem; }
.kek-scope .sp-section .sec-head .sec-cols h2 + .lead{ margin-top: .875rem; }
}
/* ============================================================
NEWS & BLOG — listing page (.bl- prefix)
------------------------------------------------------------
Extracted with test/extract-page-css.py.
============================================================ */
.kek-scope .bl-section { padding-block: clamp(3.5rem, 6.5vw, 6rem); }
.kek-scope .bl-hero { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4rem)); padding-bottom: clamp(2rem, 4vw, 3rem); }
.kek-scope .bl-hero h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); letter-spacing: -.03em; max-width: 22ch; margin-top: 1.125rem; }
.kek-scope .bl-hero .bl-lead { font-size: clamp(1.0625rem, 1.55vw, 1.1875rem); line-height: 1.72; color: var(--color-body); max-width: 46rem; margin-top: 1.5rem; overflow-wrap: anywhere; hyphens: auto; }
.kek-scope .bl-controls { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2.25rem; }
.kek-scope .bl-chips { display: flex; flex-wrap: wrap; gap: .55rem; min-width: 0; }
.kek-scope .bl-chip { padding: .5rem .95rem; border: 1px solid var(--color-border); background: var(--color-surface); font: 600 .8125rem/1 var(--font-body); letter-spacing: .04em; color: var(--color-body); cursor: pointer; transition: border-color var(--transition), background var(--transition), color var(--transition); }
.kek-scope .bl-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.kek-scope .bl-chip[aria-pressed="true"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.kek-scope .bl-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kek-scope .bl-search { position: relative; flex: 0 1 18rem; min-width: 0; max-width: 100%; }
.kek-scope .bl-search input { width: 100%; padding: .7rem 1rem .7rem 2.6rem; font: 400 .9375rem/1.4 var(--font-body); color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0; min-width: 0; }
.kek-scope .bl-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-accent); }
.kek-scope .bl-search svg { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; color: var(--color-muted); pointer-events: none; }
html:not(.js) .bl-controls { display: none; }
.kek-scope .bl-featured { display: grid; gap: 0; border: var(--border); background: var(--color-surface); overflow: hidden; }
@media (min-width: 900px) {
.kek-scope .bl-featured { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
}
.kek-scope .bl-featured-media { position: relative; min-height: 260px; background: var(--color-primary-tint); }
.kek-scope .bl-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kek-scope .bl-featured-body { padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.kek-scope .bl-featured-body h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.02em; overflow-wrap: anywhere; hyphens: auto; }
.kek-scope .bl-featured-body p { color: var(--color-body); line-height: 1.68; margin: 0; overflow-wrap: anywhere; }
.kek-scope .bl-featured-cta { margin-top: auto; padding-top: 1rem; }
.kek-scope .bl-meta { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; font-size: .78125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--color-muted); min-width: 0; }
.kek-scope .bl-meta .bl-cat { color: var(--color-accent-deep); font-weight: 700; }
.kek-scope .bl-meta .bl-dot { color: var(--color-border); }
.kek-scope .bl-meta time { white-space: normal; }
.kek-scope .bl-demo { align-self: flex-start; padding: .22rem .55rem; border: 1px dashed var(--color-border); color: var(--color-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.kek-scope .bl-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 1.75rem); margin-top: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
.kek-scope .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
.kek-scope .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kek-scope .bl-card { display: flex; flex-direction: column; min-width: 0; border: var(--border); background: var(--color-surface); transition: transform var(--transition), box-shadow var(--transition); }
.kek-scope .bl-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,61,46,.10); }
@media (prefers-reduced-motion: reduce) {
.kek-scope .bl-card:hover { transform: none; }
}
.kek-scope .bl-card.is-hidden { display: none; }
.kek-scope .bl-featured.is-hidden { display: none; }
.kek-scope .bl-card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-primary-tint); }
.kek-scope .bl-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kek-scope .bl-card-body { padding: 1.25rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; min-width: 0; }
.kek-scope .bl-card h3 { font-size: 1.09375rem; line-height: 1.35; letter-spacing: -.005em; overflow-wrap: anywhere; hyphens: auto; }
.kek-scope .bl-card p { font-size: .9375rem; line-height: 1.62; color: var(--color-body); margin: 0; overflow-wrap: anywhere; }
.kek-scope .bl-card .bl-demo { margin-top: auto; }
.kek-scope .bl-empty { display: none; margin-top: 2rem; padding: 1.5rem 1.75rem; border: var(--rule); border-left: 3px solid var(--color-accent); background: var(--color-surface); color: var(--color-body); }
.kek-scope .bl-empty.is-visible { display: block; }
.kek-scope .bl-atlas { position: relative; overflow: hidden; border: var(--border); background: var(--color-primary); color: #fff; }
.kek-scope .bl-atlas-media { position: relative; }
.kek-scope .bl-atlas-media img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .38; }
.kek-scope .bl-atlas-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(1.75rem, 4vw, 3rem); }
.kek-scope .bl-atlas h2 { color: #fff; font-size: clamp(1.4rem, 2.8vw, 2.1rem); letter-spacing: -.02em; max-width: 24ch; }
.kek-scope .bl-atlas p { margin-top: .9rem; color: rgba(255,255,255,.86); line-height: 1.65; max-width: 38rem; overflow-wrap: anywhere; }
.kek-scope .bl-atlas .sp-soon-like { align-self: flex-start; margin-top: 1.25rem; padding: .3rem .65rem; border: 1px solid rgba(255,185,0,.55); color: var(--color-accent); font-size: .6875rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
@media (max-width: 640px) {
.kek-scope .bl-atlas-media { min-height: 340px; }
.kek-scope .bl-atlas-media img { position: absolute; inset: 0; }
}
.kek-scope .bl-cta { text-align: center; }
.kek-scope .bl-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); letter-spacing: -.025em; max-width: 24ch; margin-inline: auto; }
.kek-scope .bl-cta p { margin-top: 1.125rem; color: var(--color-body); line-height: 1.7; max-width: 44rem; margin-inline: auto; overflow-wrap: anywhere; }
.kek-scope .bl-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
@media print {
.kek-scope .site-header, .kek-scope .sec-rail, .kek-scope #mobile-overlay, .kek-scope .prefooter-wrap, .kek-scope .skip-link, .kek-scope .bl-controls { display: none !important; }
.kek-scope .bl-hero { padding-top: 0; }
.kek-scope .bl-card.is-hidden { display: flex; }
.kek-scope .bl-featured.is-hidden { display: grid; }
.kek-scope .bl-atlas { background: #fff !important; border: 1px solid #999; }
.kek-scope .bl-atlas h2, .kek-scope .bl-atlas p { color: var(--color-ink) !important; }
.kek-scope .bl-atlas-media img { display: none; }
.kek-scope .bl-atlas-overlay { position: static; }
.kek-scope .bl-card, .kek-scope .bl-featured { break-inside: avoid; }
}
.kek-scope .bl-sr-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 767px) {
.kek-scope .bl-chip { padding-block: .95rem; }
.kek-scope .bl-search input { padding-block: .8rem; }
}
/* ============================================================
The WordPress admin bar
------------------------------------------------------------
A logged-in visitor gets a 32px bar fixed across the very top.
The design's header is fixed at top: 0, so the bar covers its
upper half — which reads as the header never quite reaching
the top, most obviously when it slides back down on scroll-up.
WordPress's own convention is that fixed chrome sits below the
bar, so that is what happens here. Below 600px the bar scrolls
with the page rather than staying fixed, and the header goes
back to the top where it belongs.
============================================================ */
body.kek-scope.admin-bar .site-header{ top: 32px; }
@media screen and (max-width: 782px){
body.kek-scope.admin-bar .site-header{ top: 46px; }
}
@media screen and (max-width: 600px){
body.kek-scope.admin-bar .site-header{ top: 0; }
}
/* ============================================================
Headlines are never hyphenated (see below for why !important)
------------------------------------------------------------
The design sets `hyphens: auto` on headings so a long German
compound cannot overflow a narrow column. On a phone the
browser took that as licence to break ordinary words, and
"Was drückt bei dir gerade?" arrived with a hyphen in it.
Long words may still be broken where there is genuinely no
room — `overflow-wrap` stays — but the automatic hyphenation
of ordinary text is off. The FAQ questions are headings too,
and read the same way.
`!important` is deliberate. Four of the pages set
`hyphens: auto` on their own headings with a page-prefixed
selector, which outranks anything written here by class count;
a sweep across six pages and five widths found sixteen places
where hyphenation was still on. Matching each of those
selectors would leave the next page to reintroduce it. The
instruction is categorical — headlines are never hyphenated —
so the rule is too.
============================================================ */
.kek-scope h1,
.kek-scope h2,
.kek-scope h3,
.kek-scope h4,
.kek-scope .faq-q,
.kek-scope .split-headline,
.kek-scope .split-headline *,
.kek-scope .sec-head h2{
hyphens: none !important;
-webkit-hyphens: none !important;
}
/* ============================================================
Grid and flex children may shrink
------------------------------------------------------------
A grid or flex item defaults to `min-width: auto`, which means
it refuses to become narrower than its own content. On a 360px
phone the process rail then stood 97px past the window and
took the page sideways with it — the client's "cut off on the
right".
The design never meets this because its own text happens to
fit; a client rewording one line is enough to bring it back.
So the containers that lay out in columns let their children
shrink, and the text wraps instead of pushing.
Deliberately not a blanket rule: the marquees and the
horizontal services ride are *meant* to exceed their box, and
`min-width: 0` on those would collapse them.
============================================================ */
.kek-scope .proc > *,
.kek-scope .proc-steps,
.kek-scope .proc-step,
.kek-scope .faq > *,
.kek-scope .faq-item,
.kek-scope .cockpit > *,
.kek-scope .sec-head > *,
.kek-scope .sec-cols > *{
min-width: 0;
}
/* And the text wraps rather than reaching for its widest word.
*
* `anywhere`, not `break-word`. They break a long word the same way once the
* line is being laid out, but only `anywhere` reduces the element's *min-content*
* size — and that is what a flex or grid item is measured by. With
* `break-word` the FAQ question still claimed the width of its longest
* compound, so the row could not fit and the chevron beside it was pushed 229px
* off the side of the phone.
*
* It became visible when hyphenation was turned off: until then the browser
* could hyphenate the compound and the row happened to fit. */
.kek-scope .proc-txt,
.kek-scope .proc-txt strong,
.kek-scope .proc-txt span,
.kek-scope .faq-q,
.kek-scope .faq-a,
.kek-scope .faq-a-inner{
min-width: 0;
overflow-wrap: anywhere;
}
/* The chevron is not text and must keep its own width. */
.kek-scope .faq-ind{
flex: 0 0 auto;
min-width: auto;
}
/* And the question's text must wrap.
*
* Reproduced exactly: force the text not to wrap and the chevron lands 229px
* off the side of a 360px phone — the client's number, to the pixel. The text
* is an anonymous flex item, so no rule can give it `min-width: 0`; the only
* lever is whether it wraps at all, and that is inherited from the button.
*
* Stated here rather than left to the cascade, because something on the live
* site was setting it otherwise. Clipping the button was tried first and
* rejected: it hides the chevron instead of placing it. */
body.kek-scope .faq-q{
white-space: normal;
overflow-wrap: anywhere;
word-break: normal;
}
/* ============================================================
The page never scrolls sideways
------------------------------------------------------------
The rules above stop the known offenders from pushing, but one
reworded line in a widget nobody is watching can always start
it again — and once the document is wider than the window the
fixed header stretches to match it, so a small overflow
anywhere becomes a visibly broken page.
`clip` rather than `hidden`: `overflow-x: hidden` on the
document silently turns every `position: sticky` inside it
into static, which would take the analysis column with it.
`clip` cuts the overflow and leaves sticky alone.
============================================================ */
html:has(> body.kek-scope){
overflow-x: clip;
}
body.kek-scope{
overflow-x: clip;
}
/* ============================================================
The "Geprüft 2026" badge on small screens
------------------------------------------------------------
Requested by the client, and a change to the design rather
than a correction of it: the build matched the prototype
exactly here — a 70px circle holding a 54px word at 9px, with
"ArbSchG · DGUV V2" beneath it at 7px. That is legible on a
drawing and cramped on a phone, and the ring cut the last
letter of GEPRÜFT.
The circle grows, the labels grow with it, and it is brought
fully inside the frame instead of hanging 6px off the edge.
Nothing above 640px changes.
============================================================ */
@media (max-width: 640px){
.kek-scope .insp-badge{
width: 96px;
height: 96px;
right: 6px;
}
.kek-scope .insp-badge .ib-top{ font-size: .625rem; letter-spacing: .12em; }
.kek-scope .insp-badge .ib-year{ font-size: 1.5rem; }
.kek-scope .insp-badge .ib-foot{ font-size: .5rem; max-width: 68%; }
}
@media (max-width: 420px){
.kek-scope .insp-badge{
width: 88px;
height: 88px;
right: 4px;
}
.kek-scope .insp-badge .ib-top{ font-size: .625rem; letter-spacing: .09em; }
.kek-scope .insp-badge .ib-year{ font-size: 1.4375rem; }
.kek-scope .insp-badge .ib-foot{ font-size: .5rem; max-width: 66%; }
}