/* FKM Theme 0.6 – Farben lassen sich im Customizer (FKM Design) ändern. */

/* ---------- Schriften (lokal, keine externen Anfragen) ---------- */
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	--fkm-blue: #2563EB;
	--fkm-black: #0B0F1A;
	--fkm-white: #fff;
	--fkm-grey: #F3F5F8;
	--fkm-line: #DDE2EA;
	--fkm-line-strong: #98A2B3;
	--fkm-text: #0B0F1A;
	--fkm-muted: #5A6475;
	--fkm-blue-soft: color-mix(in srgb, var(--fkm-blue) 10%, #fff);
	--fkm-blue-light: #60A5FA;
	--fkm-silver: #C0C6D1;
	--fkm-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--fkm-font: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
	--fkm-radius: 6px;
	--fkm-max: 1240px;
	--fkm-space: clamp(56px, 7.5vw, 112px);
	--fkm-header: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--fkm-header) + 16px); }
body {
	margin: 0;
	font-family: var(--fkm-font);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--fkm-text);
	background: var(--fkm-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--fkm-blue); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--fkm-blue); outline-offset: 3px; }
.fkm-bg-blue :focus-visible, .fkm-bg-black :focus-visible, .has-media :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
::selection { background: var(--fkm-blue); color: #fff; }

h1, h2, h3 { font-family: var(--fkm-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 0.45em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 3.8vw, 3.25rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
h3 { font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--fkm-text); color: #fff; padding: 12px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

.fkm-wrap { width: 100%; max-width: var(--fkm-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.fkm-wrap--narrow { max-width: 900px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid transparent; transition: border-color 0.2s, box-shadow 0.2s; }
.site-header.is-scrolled { border-bottom-color: var(--fkm-line); box-shadow: 0 6px 24px -18px rgba(10, 12, 16, 0.5); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--fkm-header); }
.site-brand { display: flex; align-items: center; color: var(--fkm-text); text-decoration: none; flex: none; }
.site-brand .brand-logo { display: block; height: 50px; width: auto; }
.site-brand .custom-logo { display: block; max-height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.site-nav li { margin: 0; }
.site-nav a:not(.btn) { position: relative; display: inline-block; padding: 8px 0; color: var(--fkm-text); text-decoration: none; font-size: 0.95rem; }
.site-nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--fkm-blue); transform: scaleX(0); transform-origin: left; transition: transform 0.2s; }
.site-nav a:not(.btn):hover::after, .site-nav .current-menu-item > a::after, .site-nav .current_page_item > a::after { transform: scaleX(1); }
.nav-toggle { display: none; align-items: center; gap: 10px; background: none; border: 1px solid var(--fkm-line-strong); border-radius: var(--fkm-radius); padding: 9px 14px; font: inherit; font-weight: 700; color: var(--fkm-text); cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform 0.2s, background-color 0.2s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.nav-toggle { display: inline-flex; }
	.site-brand .brand-logo { height: 42px; }
	.js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 20px; padding: 8px clamp(20px, 4vw, 48px) 28px; background: #fff; border-bottom: 1px solid var(--fkm-line); box-shadow: 0 24px 40px -30px rgba(10, 12, 16, 0.6); }
	.js .site-nav.is-open { display: flex; }
	.site-nav { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 20px; padding-bottom: 16px; }
	.site-nav ul { flex-direction: column; gap: 0; }
	.site-nav li { border-bottom: 1px solid var(--fkm-line); }
	.site-nav a:not(.btn) { display: block; padding: 15px 0; font-size: 1.15rem; }
	.site-nav a:not(.btn)::after { display: none; }
	.site-header__inner { flex-wrap: wrap; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85em 1.45em; font: inherit; font-size: 0.95rem; font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer; border: 2px solid transparent; border-radius: var(--fkm-radius); transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn--primary { background: var(--fkm-blue); color: #fff; }
.btn--primary:hover { background: color-mix(in srgb, var(--fkm-blue) 82%, #000); }
.btn--ghost { color: inherit; border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: var(--fkm-text); border-color: var(--fkm-text); color: #fff; }
.btn--light { background: #fff; color: var(--fkm-blue); }
.btn--light:hover { background: var(--fkm-grey); }
.fkm-bg-blue .btn--primary { background: #fff; color: var(--fkm-blue); }
.fkm-bg-blue .btn--ghost:hover, .fkm-bg-black .btn--ghost:hover, .has-media .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--fkm-text); }
.fkm-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- Bereiche ---------- */
.fkm-sec { position: relative; padding: var(--fkm-space) 0; }
.fkm-bg-grey { background: var(--fkm-grey); }
.fkm-bg-blue { background: var(--fkm-blue); color: #fff; }
.fkm-bg-black { background: radial-gradient(120% 90% at 85% 0%, #17223D 0%, rgba(23, 34, 61, 0) 60%), linear-gradient(180deg, #0B0F1A 0%, #0E1424 100%); background-color: var(--fkm-black); color: #fff; }

.fkm-bg-blue a:not(.btn), .fkm-bg-black a:not(.btn) { color: #fff; }
.fkm-sec__head { max-width: 64ch; margin-bottom: clamp(36px, 5vw, 64px); }
.fkm-sec__title { margin-bottom: 0.35em; }
.fkm-sec__intro { font-size: 1.075rem; color: var(--fkm-muted); }
.fkm-bg-blue .fkm-sec__intro, .fkm-bg-black .fkm-sec__intro { color: inherit; opacity: 0.85; }
.fkm-sec__intro > :last-child { margin-bottom: 0; }
.fkm-prose { max-width: 64ch; }
.fkm-prose--wide { max-width: 74ch; }
.fkm-prose > :last-child { margin-bottom: 0; }
.fkm-prose ul { padding-left: 1.2em; }
.fkm-prose li { margin-bottom: 0.35em; }
.fkm-prose li::marker { color: var(--fkm-blue); }
.fkm-prose h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); margin-top: 1.6em; }
.fkm-prose h3 { margin-top: 1.4em; }
.fkm-prose > h2:first-child, .fkm-prose > h3:first-child { margin-top: 0; }
.fkm-lead { font-size: clamp(1.04rem, 1.2vw, 1.18rem); line-height: 1.6; max-width: 52ch; }
.fkm-lead > :last-child { margin-bottom: 0; }

/* ---------- Hero ---------- */
.fkm-sec--hero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); }
.fkm-hero__grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.fkm-hero__title { margin-bottom: 0.45em; max-width: 20ch; }
.fkm-hero__media { display: flex; justify-content: flex-end; }
.fkm-hero__img { display: block; width: 100%; height: auto; border-radius: var(--fkm-radius); }

/* Hero mit Bild: Vollbild, dunkel */
.fkm-sec--hero.has-media { display: flex; align-items: center; min-height: min(78vh, 700px); padding: clamp(72px, 10vw, 128px) 0; background: #080B14; color: #fff; overflow: hidden; isolation: isolate; }
.fkm-sec--hero.has-media > .fkm-wrap { position: relative; z-index: 2; }
.fkm-hero__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.fkm-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.fkm-sec--hero.has-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 11, 20, 0.94) 0%, rgba(8, 11, 20, 0.72) 42%, rgba(8, 11, 20, 0.05) 78%), linear-gradient(0deg, rgba(8, 11, 20, 0.7) 0%, rgba(8, 11, 20, 0) 40%); }
.fkm-sec--hero.has-media .fkm-hero__grid { grid-template-columns: 1fr; }
.fkm-sec--hero.has-media .fkm-hero__title { font-size: clamp(2rem, 3.4vw, 3rem); max-width: 18ch; }
.fkm-sec--hero.has-media .fkm-lead { color: #D3DAE6; }
.fkm-sec--hero.has-media a:not(.btn) { color: #fff; }

/* Ein einziger Auftritt beim Laden: Bild setzt sich, Text folgt. */
@media (prefers-reduced-motion: no-preference) {
	.fkm-sec--hero.has-media .fkm-hero__bg img { animation: fkm-settle 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.fkm-sec--hero.has-media .fkm-hero__text > * { animation: fkm-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	.fkm-sec--hero.has-media .fkm-hero__text > :nth-child(2) { animation-delay: 0.12s; }
	.fkm-sec--hero.has-media .fkm-hero__text > :nth-child(3) { animation-delay: 0.24s; }
}
@keyframes fkm-settle { from { transform: scale(1.08); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes fkm-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Feder-Zeichnung, wenn kein Bild gesetzt ist */
.fkm-spring { width: 100%; max-width: 280px; color: var(--fkm-text); }
.fkm-bg-blue .fkm-spring, .fkm-bg-black .fkm-spring { color: #fff; }
.fkm-spring .plate { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.fkm-spring .front, .fkm-spring .back { fill: none; stroke: var(--fkm-blue); stroke-linejoin: round; stroke-linecap: round; }
.fkm-spring .front { stroke-width: 6; }
.fkm-spring .back { stroke-width: 3; opacity: 0.4; }
.fkm-bg-blue .fkm-spring .front, .fkm-bg-blue .fkm-spring .back { stroke: #fff; }
.fkm-spring .dim line { stroke: currentColor; stroke-width: 1; opacity: 0.5; }
.fkm-spring text { fill: currentColor; font: 13px var(--fkm-font); opacity: 0.7; }

@media (max-width: 800px) {
	.fkm-hero__grid { grid-template-columns: 1fr; }
	.fkm-hero__media { justify-content: flex-start; }
	.fkm-spring { max-width: 160px; }
	.fkm-sec--hero.has-media { min-height: 0; padding-top: 58vw; }
	.fkm-hero__bg img { object-position: 62% 20%; height: 75%; }
	.fkm-sec--hero.has-media::after { background: linear-gradient(0deg, #080B14 30%, rgba(8, 11, 20, 0.4) 62%, rgba(8, 11, 20, 0.05) 100%); }
}

/* ---------- Text mit Bild ---------- */
.fkm-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; isolation: isolate; }
.fkm-split.is-left .fkm-split__media { order: -1; }
.fkm-split__media { position: relative; }
.fkm-split__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fkm-radius); }
.fkm-split__media::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border: 2px solid var(--fkm-blue); border-radius: var(--fkm-radius); }
.fkm-split.is-left .fkm-split__media::before { inset: 18px 18px -18px -18px; }
@media (max-width: 800px) {
	.fkm-split { grid-template-columns: 1fr; }
	.fkm-split.is-left .fkm-split__media { order: 0; }
	.fkm-split__media::before { display: none; }
}

/* ---------- Vorteile ---------- */
.fkm-features { counter-reset: feat; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.fkm-features--c2 { grid-template-columns: repeat(2, 1fr); }
.fkm-features--c3 { grid-template-columns: repeat(3, 1fr); }
.fkm-features--c4 { grid-template-columns: repeat(4, 1fr); }
.fkm-feature { counter-increment: feat; position: relative; display: flex; flex-direction: column; padding: var(--pad); background: var(--fkm-grey); border: 1px solid transparent; border-radius: calc(var(--fkm-radius) * 2); overflow: hidden; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, box-shadow 0.3s; }
.fkm-bg-grey .fkm-feature { background: #fff; }
.fkm-feature::before { content: counter(feat, decimal-leading-zero); display: block; margin-bottom: clamp(22px, 2.6vw, 40px); font-family: var(--fkm-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; color: var(--fkm-blue); }
.fkm-feature { --pad: clamp(24px, 2.4vw, 34px); }
.fkm-feature::after { content: ""; position: absolute; left: var(--pad); top: 0; width: 32px; height: 3px; background: var(--fkm-blue); border-radius: 0 0 3px 3px; transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fkm-feature:hover { transform: translateY(-3px); border-color: var(--fkm-line); box-shadow: 0 24px 40px -32px rgba(11, 15, 26, 0.55); }
.fkm-feature:hover::after { width: calc(100% - 2 * var(--pad)); }
.fkm-feature h3 { margin-bottom: 0.5em; font-size: clamp(1.1rem, 1.35vw, 1.25rem); }
.fkm-feature .fkm-prose { color: var(--fkm-muted); font-size: 0.975rem; }
/* Erste Karte als dunkler Akzent */
.fkm-features--c3 .fkm-feature:first-child, .fkm-features--c4 .fkm-feature:first-child { background: var(--fkm-black); color: #fff; }
.fkm-features--c3 .fkm-feature:first-child::before, .fkm-features--c4 .fkm-feature:first-child::before { color: var(--fkm-blue-light); }
.fkm-features--c3 .fkm-feature:first-child .fkm-prose, .fkm-features--c4 .fkm-feature:first-child .fkm-prose { color: #C9D1DE; }
/* Auf dunklem oder blauem Grund: transparente Karten */
.fkm-bg-black .fkm-feature, .fkm-bg-blue .fkm-feature, .fkm-bg-black .fkm-features .fkm-feature:first-child, .fkm-bg-blue .fkm-features .fkm-feature:first-child { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: inherit; }
.fkm-bg-blue .fkm-feature::before, .fkm-bg-black .fkm-feature::before { color: var(--fkm-blue-light); }
.fkm-bg-blue .fkm-feature::before { color: #fff; }
.fkm-bg-blue .fkm-feature::after { background: #fff; }
.fkm-bg-blue .fkm-feature .fkm-prose, .fkm-bg-black .fkm-feature .fkm-prose { color: inherit; opacity: 0.85; }
@media (max-width: 1100px) { .fkm-features--c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .fkm-features--c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fkm-features--c2, .fkm-features--c3, .fkm-features--c4 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fkm-feature, .fkm-feature::after { transition: none; } .fkm-feature:hover { transform: none; } }

/* ---------- Ablauf (echte Reihenfolge, daher nummeriert) ---------- */
.fkm-steps-list { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); row-gap: 24px; border-top: 1px solid var(--fkm-line); }
.fkm-steps-list li { counter-increment: step; padding: 28px 28px 8px 0; position: relative; }
.fkm-steps-list li::before { content: counter(step, decimal-leading-zero); display: block; font-family: var(--fkm-display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; color: var(--fkm-blue); margin-bottom: 18px; }
.fkm-steps-list li::after { content: ""; position: absolute; top: -1px; left: 0; width: 48px; height: 3px; background: var(--fkm-blue); }
.fkm-steps-list .fkm-prose { color: var(--fkm-muted); }
.fkm-bg-black .fkm-steps-list { border-color: rgba(255, 255, 255, 0.18); }
.fkm-bg-black .fkm-steps-list li::before { color: var(--fkm-blue-light); }
.fkm-bg-blue .fkm-steps-list li::before { color: #fff; }
.fkm-bg-blue .fkm-steps-list li::after { background: #fff; }
.fkm-bg-black .fkm-steps-list .fkm-prose, .fkm-bg-blue .fkm-steps-list .fkm-prose { color: inherit; opacity: 0.85; }

/* ---------- Leistungs-Karten ---------- */
.fkm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; }
.fkm-card { display: flex; flex-direction: column; background: #fff; color: var(--fkm-text); text-decoration: none; border: 1px solid var(--fkm-line); border-radius: var(--fkm-radius); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.fkm-card:hover { border-color: var(--fkm-blue); box-shadow: 0 20px 40px -28px rgba(10, 12, 16, 0.6); }
.fkm-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fkm-black); }
.fkm-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.fkm-card:hover .fkm-card__img img { transform: scale(1.04); }
.fkm-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.fkm-card h2, .fkm-card h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.fkm-card p { color: var(--fkm-muted); margin-bottom: 0; }
.fkm-card__more { margin-top: auto; padding-top: 18px; font-weight: 700; color: var(--fkm-blue); }
.fkm-card:hover .fkm-card__more { text-decoration: underline; text-underline-offset: 0.2em; }
.fkm-bg-blue a.fkm-card { color: var(--fkm-text); }

/* Karten auf dunklem Grund: etwas helleres Navy statt Weiß */
.fkm-bg-black .fkm-card { background: #131B2E; border-color: rgba(255, 255, 255, 0.08); color: #fff; }
.fkm-bg-black .fkm-card p { color: #AEB8C8; }
.fkm-bg-black .fkm-card__more { color: var(--fkm-blue-light); }
.fkm-bg-black .fkm-card:hover { border-color: var(--fkm-blue-light); }
.fkm-bg-black a.fkm-card { color: #fff; }

/* ---------- Raster ohne halb leere Reihen (Karten, Ablauf) ---------- */
.fkm-grid--c2 { grid-template-columns: repeat(2, 1fr); }
.fkm-grid--c3 { grid-template-columns: repeat(3, 1fr); }
.fkm-grid--c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .fkm-grid--c4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .fkm-grid--c3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fkm-grid--c2, .fkm-grid--c3, .fkm-grid--c4 { grid-template-columns: 1fr; } }

/* ---------- Federhöhen (maßstäbliche Grafik) ---------- */
.fkm-heights { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(32px, 6vw, 88px); align-items: end; }
.fkm-heights .fkm-sec__head { margin-bottom: 1.2em; }
.fkm-bg-black .fkm-heights .fkm-prose, .fkm-bg-blue .fkm-heights .fkm-prose { opacity: 0.85; }
.fkm-heights .fkm-prose { color: var(--fkm-muted); }
.fkm-bg-black .fkm-heights .fkm-prose, .fkm-bg-blue .fkm-heights .fkm-prose { color: inherit; }
.fkm-heights__chart { overflow-x: auto; }
.fkm-heights__svg { display: block; width: 100%; min-width: 0; height: auto; color: var(--fkm-text); }
.fkm-heights__svg .coil-f { fill: none; stroke: var(--fkm-blue); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fkm-heights__svg .coil-b { fill: none; stroke: var(--fkm-blue); stroke-width: 1.8; stroke-linecap: round; opacity: 0.35; }
.fkm-heights__svg .base { stroke: currentColor; stroke-width: 2; }
.fkm-heights__svg .grid { stroke: currentColor; stroke-width: 1; opacity: 0.12; }
.fkm-heights__svg .val { fill: currentColor; font: 700 16px var(--fkm-display); }
.fkm-heights__svg .unit { fill: currentColor; font: 12px var(--fkm-font); opacity: 0.6; }
.fkm-bg-black .fkm-heights__svg, .fkm-bg-blue .fkm-heights__svg { color: #fff; }
.fkm-bg-black .fkm-heights__svg .coil-f, .fkm-bg-black .fkm-heights__svg .coil-b { stroke: var(--fkm-blue-light); }
.fkm-bg-blue .fkm-heights__svg .coil-f, .fkm-bg-blue .fkm-heights__svg .coil-b { stroke: #fff; }
@media (max-width: 900px) { .fkm-heights { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.fkm-faq { max-width: 860px; border-top: 1px solid var(--fkm-line); }
.fkm-faq__item { border-bottom: 1px solid var(--fkm-line); }
.fkm-faq__item summary { position: relative; padding: 22px 56px 22px 0; font-family: var(--fkm-display); font-weight: 700; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.2; cursor: pointer; list-style: none; }
.fkm-faq__item summary::-webkit-details-marker { display: none; }
.fkm-faq__item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background-color: var(--fkm-blue-soft); background-image: linear-gradient(var(--fkm-blue), var(--fkm-blue)), linear-gradient(var(--fkm-blue), var(--fkm-blue)); background-size: 14px 2px, 2px 14px; background-position: center; background-repeat: no-repeat; transition: transform 0.2s; }
.fkm-faq__item[open] summary::after { transform: rotate(45deg); }
.fkm-faq__item summary:hover { color: var(--fkm-blue); }
.fkm-faq__item .fkm-prose { padding-bottom: 26px; color: var(--fkm-muted); }

/* ---------- Hinweis-Band (Namenswechsel) ---------- */
.fkm-sec--notice { padding: clamp(32px, 4vw, 52px) 0; }
.fkm-notice-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; border-left: 4px solid var(--fkm-blue); padding-left: clamp(18px, 3vw, 32px); }
.fkm-notice-band__title { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-bottom: 0.3em; }
.fkm-notice-band .fkm-prose { color: var(--fkm-muted); }
.fkm-bg-black .fkm-notice-band .fkm-prose, .fkm-bg-blue .fkm-notice-band .fkm-prose { color: inherit; opacity: 0.85; }
.fkm-notice-band .fkm-actions { margin-top: 0; }

/* ---------- Anfrage-Band ---------- */
.fkm-sec--cta { padding: clamp(56px, 7vw, 96px) 0; overflow: hidden; }
.fkm-sec--cta.fkm-bg-blue::before { content: ""; position: absolute; right: -6%; top: 50%; width: min(46vw, 560px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 48px rgba(255, 255, 255, 0.04), 0 0 0 96px rgba(255, 255, 255, 0.03); pointer-events: none; }
.fkm-cta { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 56px; }
.fkm-cta .fkm-actions { margin-top: 0; }
.fkm-cta h2 { margin-bottom: 0.3em; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.fkm-cta .fkm-prose { font-size: 1.05rem; }
.fkm-bg-blue .fkm-cta .fkm-prose { color: rgba(255, 255, 255, 0.88); }

/* ---------- Kontakt / Anfrageformular ---------- */
.fkm-sec[id] { scroll-margin-top: calc(var(--fkm-header) + 12px); }
.fkm-contact { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .fkm-contact { grid-template-columns: 1fr; } }
.fkm-contact__form { background: #fff; border: 1px solid var(--fkm-line); border-radius: calc(var(--fkm-radius) * 2); padding: clamp(22px, 3.4vw, 44px); box-shadow: 0 30px 60px -48px rgba(11, 15, 26, 0.55); }
.fkm-contact__info { position: sticky; top: calc(var(--fkm-header) + 24px); padding: clamp(24px, 3vw, 36px); border-radius: calc(var(--fkm-radius) * 2); color: #fff; background: radial-gradient(120% 90% at 100% 0%, #1B2848 0%, rgba(27, 40, 72, 0) 60%), var(--fkm-black); }
@media (max-width: 900px) { .fkm-contact__info { position: static; } }
.fkm-contact__eyebrow { margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fkm-blue-light); }
.fkm-contact__title { font-size: 1.4rem; margin-bottom: 18px; }
.fkm-contact__list { list-style: none; margin: 0; padding: 0; }
.fkm-contact__list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); line-height: 1.5; color: #D3DAE6; }
.fkm-contact__list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--fkm-blue-light); }
.fkm-contact__list small { display: block; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #8E9AAE; }
.fkm-contact__list a { color: #fff; font-weight: 700; text-decoration: none; }
.fkm-contact__list a:hover { text-decoration: underline; }

.fkm-form p { margin: 0 0 20px; }
.fkm-form label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.95rem; }
.fkm-form abbr { color: var(--fkm-blue); text-decoration: none; }
.fkm-opt { font-weight: 400; color: var(--fkm-muted); font-size: 0.875rem; }
.fkm-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 600px) { .fkm-form__grid { grid-template-columns: 1fr; } }
.fkm-form input[type="text"], .fkm-form input[type="email"], .fkm-form input[type="tel"], .fkm-form textarea { width: 100%; padding: 0.85em 1em; font: inherit; color: var(--fkm-text); background: var(--fkm-grey); border: 1px solid transparent; border-radius: var(--fkm-radius); transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s; }
.fkm-form input:hover, .fkm-form textarea:hover { border-color: var(--fkm-line-strong); }
.fkm-form input:focus-visible, .fkm-form textarea:focus-visible { outline: none; background: #fff; border-color: var(--fkm-blue); box-shadow: 0 0 0 4px var(--fkm-blue-soft); }
.fkm-form textarea { min-height: 150px; resize: vertical; }
.fkm-form ::placeholder { color: #8A93A3; }
.fkm-form__topics { border: 0; margin: 0 0 24px; padding: 0; }
.fkm-form__topics legend { font-weight: 700; margin-bottom: 10px; font-size: 0.95rem; padding: 0; }
.fkm-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fkm-pill { margin: 0 !important; position: relative; }
.fkm-pill input { position: absolute; opacity: 0; inset: 0; }
.fkm-pill span { display: inline-block; padding: 0.55em 1em; border: 1px solid var(--fkm-line-strong); border-radius: 999px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.fkm-pill:hover span { border-color: var(--fkm-blue); }
.fkm-pill input:checked + span { background: var(--fkm-blue); border-color: var(--fkm-blue); color: #fff; }
.fkm-pill input:focus-visible + span { outline: 3px solid var(--fkm-blue-soft); outline-offset: 2px; }
.fkm-drop { margin: 0 0 22px; }
.fkm-drop__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fkm-drop__zone { display: flex !important; flex-direction: column; align-items: center; gap: 4px; margin: 0 !important; padding: 26px 18px; text-align: center; border: 2px dashed var(--fkm-line-strong); border-radius: calc(var(--fkm-radius) * 2); background: var(--fkm-grey); cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.fkm-drop__zone svg { width: 30px; height: 30px; color: var(--fkm-blue); }
.fkm-drop__zone strong { font-size: 1rem; }
.fkm-drop__zone span { font-weight: 400; font-size: 0.85rem; color: var(--fkm-muted); }
.fkm-drop__zone:hover, .fkm-drop__zone.is-over, .fkm-drop__input:focus-visible + .fkm-drop__zone { border-color: var(--fkm-blue); background: var(--fkm-blue-soft); }
.fkm-drop__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fkm-drop__list li { padding: 4px 10px; border-radius: 999px; background: var(--fkm-blue-soft); color: var(--fkm-text); font-size: 0.85rem; }
.fkm-drop__error { margin: 10px 0 0 !important; color: #B3261E; font-weight: 600; font-size: 0.9rem; }
.fkm-consent label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: 0.9rem; color: var(--fkm-muted); }
.fkm-consent input { margin-top: 0.25em; flex: none; width: 1.15em; height: 1.15em; accent-color: var(--fkm-blue); }
.fkm-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 0 !important; }
.fkm-form__submit .btn { padding: 1em 2em; font-size: 1rem; }
.fkm-form__submit .btn:disabled { opacity: 0.6; cursor: wait; }
.fkm-form__note { font-size: 0.875rem; color: var(--fkm-muted); }
.fkm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fkm-bg-blue .fkm-prose a { text-decoration: underline; text-underline-offset: 0.18em; font-weight: 700; }
.fkm-compare-wrap small { color: var(--fkm-muted); }
.fkm-notice { padding: 14px 18px; margin: 0 0 24px; border-left: 4px solid; border-radius: 0 var(--fkm-radius) var(--fkm-radius) 0; }
.fkm-notice--ok { background: #EAF6EF; border-color: #1A7F4B; color: #0E4B2B; }
.fkm-notice--error { background: #FDECEA; border-color: #B3261E; color: #6E1611; }

/* ---------- Seitenkopf, Brotkrumen, Einzelseiten ---------- */
.crumbs-wrap { padding-top: 22px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; color: var(--fkm-muted); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--fkm-line-strong); }
.crumbs a { color: var(--fkm-muted); text-decoration: none; }
.crumbs a:hover { color: var(--fkm-blue); text-decoration: underline; }
.page-head { padding: clamp(32px, 5vw, 64px) 0 clamp(20px, 3vw, 32px); }
.page-head__title { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); }
.page-body { padding-top: 16px; padding-bottom: var(--fkm-space); }
.fkm-single__img { margin-bottom: 36px; }
.fkm-single__img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--fkm-radius); }

/* Platzhalter (Impressum/Datenschutz) bleiben gelb sichtbar, bis sie ersetzt sind */
.fkm-ph { background: #FFF1A8; color: #3D3200; padding: 0.05em 0.3em; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Footer ---------- */
.site-footer { background: var(--fkm-black); color: #C9D2DF; padding: clamp(56px, 7vw, 88px) 0 28px; font-size: 0.98rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr; gap: 40px; }
.site-footer__logo { display: inline-block; }
.site-footer__logo .brand-logo { display: block; height: 60px; width: auto; }
.site-footer__h { font-family: var(--fkm-display); font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 0.7em; }
.site-footer address { font-style: normal; line-height: 1.85; }
.site-footer__hours { margin-top: 1em; }
.footer-menu { list-style: none; margin: 0; padding: 0; line-height: 2; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; color: #8E9AAE; }
.site-footer__bottom p { margin: 0; }
.site-footer__former { margin-top: 1.2em; color: #8E9AAE; max-width: 34ch; }
.site-footer .site-footer__former a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); }
.site-footer .site-footer__former a:hover { color: #fff; }
.site-footer__social { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__about { grid-column: 1 / -1; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Unterseiten: Bild-Hero etwas flacher */
.fkm-sec--hero.has-media.is-compact { min-height: min(56vh, 520px); }
.fkm-sec--hero.has-media.is-compact .fkm-hero__title { font-size: clamp(2rem, 3.4vw, 2.9rem); max-width: 20ch; }

/* ---------- Kontaktleiste über dem Header ---------- */
.topbar { background: var(--fkm-black); color: #AEB8C8; font-size: 0.8125rem; line-height: 1.4; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 38px; }
.topbar__note { margin: 0; }
.topbar__note a { color: inherit; text-decoration: none; }
.topbar__note a:hover { color: #fff; text-decoration: underline; }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 6px 24px; list-style: none; margin: 0; padding: 0; }
.topbar__contact a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; color: #fff; text-decoration: none; }
.topbar__contact a:hover { color: var(--fkm-blue-light); }
.topbar__contact svg { width: 14px; height: 14px; flex: none; color: var(--fkm-blue-light); }
.topbar :focus-visible { outline-color: #fff; }
@media (max-width: 700px) {
	.topbar__note { display: none; }
	.topbar__inner { justify-content: center; }
	.topbar__contact { justify-content: center; gap: 4px 18px; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Bildband (Foto über die volle Breite) ---------- */
.fkm-sec--band { padding: clamp(96px, 14vw, 180px) 0; overflow: hidden; isolation: isolate; color: #fff; }
.fkm-band__bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.fkm-band__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fkm-sec--band.has-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8, 11, 20, 0.92) 0%, rgba(8, 11, 20, 0.6) 55%, rgba(8, 11, 20, 0.25) 100%); }
.fkm-sec--band > .fkm-wrap { position: relative; z-index: 2; }
.fkm-band { max-width: 34rem; }
.fkm-band__title { font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 0.4em; }
.fkm-band .fkm-lead { color: #D3DAE6; }
.fkm-sec--band .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--fkm-text); }

/* ---------- Vorher-Nachher-Regler ---------- */
.fkm-compare-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.fkm-compare-wrap > .fkm-compare:only-child { grid-column: 1 / -1; }
@media (max-width: 800px) { .fkm-compare-wrap { grid-template-columns: 1fr; } }
.fkm-compare { --pos: 50%; position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--fkm-radius) * 2); background: var(--fkm-black); user-select: none; touch-action: pan-y; }
.fkm-single .fkm-compare { margin-bottom: 36px; }
.fkm-compare__after, .fkm-compare__before { position: absolute; inset: 0; }
.fkm-compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.fkm-compare__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fkm-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); pointer-events: none; }
.fkm-compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232563EB' d='M9 6 3 12l6 6V6zm6 0v12l6-6-6-6z'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.fkm-compare__label { position: absolute; top: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(11, 15, 26, 0.72); color: #fff; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; pointer-events: none; }
.fkm-compare__label.is-before { left: 14px; }
.fkm-compare__label.is-after { right: 14px; background: var(--fkm-blue); }
.fkm-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.fkm-compare:focus-within .fkm-compare__handle::after { outline: 3px solid var(--fkm-blue-light); outline-offset: 3px; }

/* Projektkarten */
.fkm-card__img { position: relative; }
.fkm-card__badge { position: absolute; left: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--fkm-blue); color: #fff; font-size: 0.75rem; font-weight: 700; }