/* Schriften eingebettet (keine externe Abhängigkeit */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(schrift/archivo-black-400.woff2) format("woff2");}@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(schrift/archivo-500.woff2) format("woff2");}@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(schrift/archivo-600.woff2) format("woff2");}@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url(schrift/archivo-700.woff2) format("woff2");}@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(schrift/inter-400.woff2) format("woff2");}@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(schrift/inter-500.woff2) format("woff2");}/* ========================================================================== VAN ALPHEN SICHERHEIT) Plakat Schwarz auf Weiß. Riesige Typo,harte Kanten,keine Karten,keine Icons.
   Kontrast entsteht durch Größe,nicht durch Farbe.
   Archivo Black (Display) · Archivo (Etiketten) · Inter (Text) ========================================================================== */:root{ --paper: #FFFFFF; --plate: #F1F1F1; --ink: #0A0A0A; --body: #3A3A3A; --mute: #757575; --rule: rgba(10,10,10,.16); --rule-s: rgba(10,10,10,.09); --on-ink: #FFFFFF; --on-ink-dim: rgba(255,255,255,.72); --on-ink-mute: rgba(255,255,255,.44); --rule-ink: rgba(255,255,255,.18); --disp: "Archivo Black", "Archivo", Helvetica, Arial, sans-serif; --ui: "Archivo", Helvetica, Arial, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --wrap: 1360px; --gut: clamp(20px, 4vw, 56px); --nav-h: 86px; --e: cubic-bezier(.16, 1,.3, 1); --e2: cubic-bezier(.65, 0,.35, 1);
}
@media (max-width: 900px) {:root{ --nav-h: 62px; } }*,*::before,*::after{ box-sizing: border-box; }html{ scroll-behavior: smooth; background: var(--paper); }body{ margin: 0; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: 16.5px; line-height: 1.62; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}img{ display: block; max-width: 100%; }a{ color: inherit; text-decoration: none; }::selection{ background: var(--ink); color: var(--paper); }.wrap{ width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }.wrap--narrow{ max-width: 940px; }/* --- Abschnitte ------------------------------------------------------- */.sec{ padding: clamp(62px, 6.4vw, 108px) 0; position: relative; }.sec--tight{ padding: clamp(46px, 4.6vw, 76px) 0; }.sec--grey{ background: var(--plate); }.sec--line{ border: 0; }.sec--navy,.sec--surface,.sec--dark{ background: var(--ink); color: var(--on-ink-dim); }/* --- Typografie: alles linksbündig,nichts zentriert ------------------ */
h1,h2,h3,h4{ margin: 0; color: var(--ink); }.mega,.h1,.h2{ font-family: var(--disp); font-weight: 400; letter-spacing: -0.028em; line-height: 1.04;
}.mega{ font-size: clamp(29px, 3.6vw, 52px); }.h1{ font-size: clamp(27px, 3.2vw, 44px); }.h2{ font-size: clamp(23px, 2.5vw, 35px); }.h3{ font-family: var(--ui); font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; }.sec--navy .mega,.sec--dark .mega,.sec--navy .h1,.sec--dark .h1,.sec--navy .h2,.sec--dark .h2,.sec--navy .h3,.sec--dark .h3,.sec--navy h1,.sec--dark h1,.sec--navy h2,.sec--dark h2,.sec--navy h3,.sec--dark h3,.sec--navy h4,.sec--dark h4{ color: var(--on-ink); }.say{ font-family: var(--disp); font-weight: 400; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -0.024em; color: var(--ink);
}.sec--navy .say,.sec--dark .say{ color: var(--on-ink); }.lead{ font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.62; color: var(--body); }.sec--navy .lead,.sec--dark .lead{ color: var(--on-ink-dim); }p{ margin: 0 0 1.1em; }p:last-child{ margin-bottom: 0; }.prose{ max-width: 60ch; }.prose p{ color: var(--body); }.muted{ color: var(--mute); }.todo{ color: var(--mute); font-style: italic; }/* Etikett (sitzt in der linken Randspalte,ohne Schmuck */.eyebrow,.two__label{ display: block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing:.22em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px;
}.sec--navy .eyebrow,.sec--dark .eyebrow,.sec--navy .two__label,.sec--dark .two__label{ color: var(--on-ink); }/* Abschnittskopf: Etikett links oben,Headline darunter,nie zentriert */.sechead{ max-width: 26ch; margin: 0 0 clamp(30px, 3.4vw, 52px); }.sechead .lead{ max-width: 52ch; margin-top: 22px; }.sechead--left{ margin-inline: 0; }.sechead--wide{ max-width: 30ch; }/* Kopf + Beitext nebeneinander */.head2{ display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(22px, 4vw, 70px); align-items: end; margin-bottom: clamp(30px, 3.4vw, 54px); }
@media (max-width: 860px) {.head2{ grid-template-columns: 1fr; gap: 20px; align-items: start; } }.head2 .lead{ max-width: 46ch; }/* --- Kopfzeile -------------------------------------------------------- */.topbar{ display: none; }.hdr{ position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--nav-h); display: flex; align-items: center; transition: transform .5s var(--e), background .35s var(--e), height .35s var(--e), box-shadow .35s var(--e);
}.hdr.is-stuck{ background: var(--paper); height: 68px; box-shadow: 0 1px 0 var(--rule); }.hdr.is-hidden{ transform: translateY(-105%); }.hdr__in{ display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; }.brand{ display: flex; align-items: center; }.brand img{ height: 36px; width: auto; transition: height .35s var(--e); }.hdr.is-stuck .brand img{ height: 30px; }.brand__txt{ display: none; }.brand .lg-light{ display: none; }.hdr--over:not(.is-stuck) .brand .lg-dark{ display: none; }.hdr--over:not(.is-stuck) .brand .lg-light{ display: block; }.hdr--over:not(.is-stuck) .menu > li > a,.hdr--over:not(.is-stuck) .hdr__tel b{ color: #fff; }.hdr--over:not(.is-stuck) .menu > li > a::after{ background: #fff; }.hdr--over:not(.is-stuck) .hdr__tel small{ color: rgba(255,255,255,.6); }.hdr--over:not(.is-stuck) .btn--sm{ background: #fff; color: var(--ink); }.hdr--over:not(.is-stuck) .burger{ color: #fff; }.menu{ display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); list-style: none; margin: 0; padding: 0; height: var(--nav-h); }.menu > li{ position: relative; display: flex; align-items: center; height: 100%; }.menu > li > a{ position: relative; display: inline-flex; align-items: center; gap: 7px; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing:.16em; text-transform: uppercase; color: var(--ink); padding: 4px 0;
}.menu > li > a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--e);
}.menu > li > a:hover::after,.menu > li > a[aria-current]::after{ transform: scaleX(1); }.menu .caret{ width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2.4; opacity:.55; transition: transform .3s var(--e); }.menu > li:hover .caret{ transform: rotate(180deg); }.menu .sub{ position: absolute; top: calc(100% - 14px); left: -18px; min-width: 320px; background: var(--ink); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .26s var(--e), transform .26s var(--e), visibility .26s;
}.menu > li:hover .sub,.menu > li:focus-within .sub{ opacity: 1; visibility: visible; transform: none; }.menu .sub::before{ content: ""; position: absolute; top: -20px; left: 0; right: 0; height: 24px; }.menu .sub a{ display: block; padding: 11px 18px; font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing:.1em; text-transform: uppercase; color: var(--on-ink-dim); transition: background .2s var(--e2), color .2s var(--e2);
}.menu .sub a:hover{ background: #fff; color: var(--ink); }.hdr__side{ display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }.hdr__tel{ text-align: right; display: grid; gap: 3px; }.hdr__tel small{ display: block; font-family: var(--ui); font-size: 9px; line-height: 1; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--mute); }.hdr__tel b{ display: block; font-family: var(--ui); font-size: 15px; line-height: 1; font-weight: 700; color: var(--ink); }
@media (max-width: 1150px) {.hdr__tel{ display: none; } }.burger{ display: none; width: 40px; height: 40px; margin-right: -8px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--ink); }
@media (max-width: 1000px) {.menu{ display: none; }.hdr__side .btn{ display: none; }.burger{ display: flex; } }.mnav{ position: fixed; inset: 0; z-index: 400; background: var(--ink); padding: 0 var(--gut) 34px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s var(--e), visibility .3s; overflow-y: auto; }.mnav.is-open{ opacity: 1; visibility: visible; }.mnav__top{ display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); flex: none; }.mnav .brand .lg-dark{ display: none; }.mnav .brand .lg-light{ display: block; }.mnav .burger{ color: #fff; }.mnav__list{ display: flex; flex-direction: column; padding: 24px 0 0; border-top: 1px solid var(--rule-ink); }.mnav__list a{ font-family: var(--disp); font-size: 22px; line-height: 1; letter-spacing: -0.02em; color: #fff; padding: 16px 0; border-bottom: 1px solid var(--rule-ink); }.mnav__list .sub-a{ font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing:.14em; color: var(--on-ink-mute); padding: 11px 0; border-bottom: 0; }.mnav__foot{ margin-top: auto; padding-top: 30px; display: grid; gap: 10px; font-size: 16px; color: var(--on-ink-dim); }/* --- Schaltflächen ---------------------------------------------------- */.btn{ position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 50px; padding: 0 26px; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font-family: var(--ui); font-size: 11.5px; font-weight: 700; letter-spacing:.13em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: color .35s var(--e2);
}.btn > *{ position: relative; z-index: 1; }.btn::before{ content: ""; position: absolute; inset: 0; background: var(--mute); transform: translateY(101%); transition: transform .45s var(--e);
}.btn:hover::before{ transform: translateY(0); }.btn .ar{ transition: transform .35s var(--e); }.btn:hover .ar{ transform: translateX(5px); }.btn--sm{ height: 44px; padding: 0 22px; font-size: 11px; }.btn--outline,.btn--light,.btn--ghost-light{ background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink);
}.btn--outline::before{ background: var(--ink); }.btn--outline:hover{ color: var(--paper); }.sec--navy .btn,.sec--dark .btn{ background: #fff; color: var(--ink); }.sec--navy .btn::before,.sec--dark .btn::before{ background: var(--on-ink-mute); }.sec--navy .btn--outline,.sec--dark .btn--outline,.hero .btn--outline{ background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}.sec--navy .btn--outline::before,.sec--dark .btn--outline::before,.hero .btn--outline::before{ background: #fff; }.sec--navy .btn--outline:hover,.sec--dark .btn--outline:hover,.hero .btn--outline:hover{ color: var(--ink); }.hero .btn{ background: #fff; color: var(--ink); }.hero .btn::before{ background: rgba(255,255,255,.55); }.alink,.tlink{ display: inline-flex; align-items: center; gap: 10px; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing:.16em; text-transform: uppercase; color: var(--ink); padding-bottom: 5px; border-bottom: 1.5px solid var(--ink); transition: gap .3s var(--e);
}.alink:hover,.tlink:hover{ gap: 16px; }.sec--navy .alink,.sec--dark .alink,.sec--navy .tlink,.sec--dark .tlink{ color: #fff; border-color: #fff; }/* --- Bühne: Text unten links,Meta unten rechts ----------------------- */.hero{ position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); }.hero__img{ position: absolute; inset: 0; }.hero__img img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transform: scale(1.08); animation: heroZoom 3.4s var(--e) .05s forwards;
}
@keyframes heroZoom {to{ transform: scale(1); } }.hero__veil{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.66) 0%, rgba(10,10,10,.14) 16%, rgba(10,10,10,0) 34%, rgba(10,10,10,.34) 56%, rgba(10,10,10,.80) 78%, rgba(10,10,10,.94) 100%);
}.hero__in{ position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: 1.5fr minmax(300px, 1fr); align-items: end; gap: 28px clamp(24px, 5vw, 72px); padding-block: calc(var(--nav-h) + 36px) clamp(40px, 5vh, 64px);
}.hero__lockup,.hero__trust,.hero__status{ display: none; }.hero h1{ color: #fff; }.hero h1 .ln{ display: block; overflow: hidden; }.hero h1 .ln > span{ display: block; transform: translateY(105%); animation: lineUp 1.05s var(--e) forwards; }.hero h1 .ln:nth-child(1) > span{ animation-delay:.25s; }.hero h1 .ln:nth-child(2) > span{ animation-delay:.38s; }
@keyframes lineUp {to{ transform: none; } }.hero__side{ max-width: 40ch; opacity: 0; animation: fadeUp 1s var(--e) .7s forwards; }.hero .lead{ color: rgba(255,255,255,.86); }.hero__act{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
@keyframes fadeUp {from{ opacity: 0; transform: translateY(16px); }to{ opacity: 1; transform: none; } } @media (max-width: 980px) {.hero{ min-height: 94svh; }.hero__img img{ object-position: 50% 28%; }.hero__in{ grid-template-columns: 1fr; align-items: start; padding-block: calc(var(--nav-h) + 50px) clamp(38px, 6vh, 62px); }.hero h1{ max-width: 13ch; }.hero__side{ max-width: none; }
}
@media (max-width: 520px) {.hero__act{ display: grid; grid-template-columns: 1fr; gap: 10px; }.hero__act .btn{ width: 100%; }
}/* --- Leistungsregister: das Rückgrat der Seite ------------------------ */.index{ border-top: 1.5px solid var(--ink); }.index__row{ position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,30ch) 26px; align-items: center; gap: clamp(16px, 2.4vw, 44px); padding: clamp(16px, 1.7vw, 24px) clamp(10px, 1.2vw, 18px); border-bottom: 1px solid var(--rule);
}.index__row::before{ content: ""; position: absolute; inset: 0 calc(var(--gut) * -1); background: var(--plate); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--e);
}.index__row:hover::before{ transform: scaleY(1); }.index__row > *{ position: relative; z-index: 1; transition: color .35s var(--e2); }.index__ico{ display: block; }.index__ico svg{ display: none; }.index__row h3{ font-family: var(--disp); font-weight: 400; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -0.026em; color: var(--ink); transition: color .35s var(--e2), transform .55s var(--e);
}.index__row p{ margin: 0; font-size: 15px; line-height: 1.5; color: var(--mute); transition: color .35s var(--e2); }.index__row .go{ justify-self: end; color: var(--ink); transition: color .35s var(--e2), transform .5s var(--e); }.index__row:hover h3{ transform: translateX(clamp(5px,.7vw, 12px)); }.index__row:hover p{ color: var(--body); }.index__row:hover .go{ transform: translateX(8px); }.sec--navy .index,.sec--dark .index{ border-top-color: var(--on-ink); }.sec--navy .index__row,.sec--dark .index__row{ border-bottom-color: var(--rule-ink); }.sec--navy .index__row h3,.sec--dark .index__row h3,.sec--navy .index__row .go,.sec--dark .index__row .go{ color: var(--on-ink); }.sec--navy .index__row p,.sec--dark .index__row p{ color: var(--on-ink-mute); }.sec--navy .index__row::before,.sec--dark .index__row::before{ background: #fff; }.sec--navy .index__row:hover h3,.sec--dark .index__row:hover h3,.sec--navy .index__row:hover p,.sec--dark .index__row:hover p,.sec--navy .index__row:hover .go,.sec--dark .index__row:hover .go{ color: var(--ink); }
@media (max-width: 980px) {.index__row{ grid-template-columns: minmax(0,1fr) 24px; gap: 10px 16px; align-items: start; }.index__ico{ grid-column: 1; grid-row: 1; }.index__row .go{ grid-column: 2; grid-row: 1; align-self: center; }.index__row p{ grid-column: 1 / -1; grid-row: 2; }
}.index--slim .index__row{ grid-template-columns: minmax(0,1fr) 26px; }/* --- Zahlen als Register,nicht als Kacheln --------------------------- */.stat-grid{ display: block; border-top: 1px solid var(--rule-ink); }.stat{ display: grid; grid-template-columns: clamp(110px, 12vw, 170px) minmax(0,1fr) auto; align-items: baseline; gap: clamp(16px, 3vw, 44px); padding: clamp(15px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--rule-ink);
}.stat .num{ font-family: var(--disp); font-weight: 400; font-size: clamp(24px, 2.7vw, 38px); line-height: 1.05; letter-spacing: -0.032em; color: var(--on-ink); white-space: nowrap;
}.stat .lbl{ font-size: 15.5px; line-height: 1.45; color: var(--on-ink-dim); }.stat .delta{ font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing:.14em; text-transform: uppercase; color: var(--on-ink-mute); white-space: nowrap; }
@media (max-width: 720px) {.stat{ grid-template-columns: 1fr auto; gap: 6px 16px; }.stat .num{ grid-column: 1; }.stat .delta{ grid-column: 2; }.stat .lbl{ grid-column: 1 / -1; }
}.source{ margin-top: 26px; font-family: var(--ui); font-size: 11.5px; font-weight: 500; letter-spacing:.05em; line-height: 1.7; color: var(--on-ink-mute); max-width: 78ch; }.source a{ text-decoration: underline; text-underline-offset: 3px; }/* --- Vier Gründe: Raster aus Linien,keine Karten --------------------- */.blocks{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
@media (max-width: 1000px) {.blocks{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {.blocks{ grid-template-columns: 1fr; } }.block{ position: relative; display: block; padding: clamp(26px, 2.6vw, 40px) clamp(20px, 2vw, 34px) clamp(30px, 3vw, 48px); border-bottom: 1px solid var(--rule); }.blocks .block +.block{ border-left: 1px solid var(--rule); }
@media (max-width: 1000px) {.blocks .block:nth-child(2n+1){ border-left: 0; } }
@media (max-width: 620px) {.blocks .block{ border-left: 0 !important; } }.block::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e); }.block:hover::after{ transform: scaleX(1); }.block__n,.block__ico{ display: none; }.block h3{ font-family: var(--ui); font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -0.014em; color: var(--ink); margin-bottom: 14px; }.block p{ margin: 0; font-size: 15px; line-height: 1.55; color: var(--mute); }/* --- Ablauf ----------------------------------------------------------- */.steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 900px) {.steps{ grid-template-columns: 1fr; gap: 0; } }.step{ padding-top: 22px; border-top: 1.5px solid var(--ink); }
@media (max-width: 900px) {.step{ padding: 22px 0 30px; }.step:last-child{ padding-bottom: 0; } }.step__n{ display: none; font-family: var(--disp); font-weight: 400; font-size: 13px; letter-spacing:.1em; color: var(--ink); margin-bottom: clamp(24px, 3vw, 46px); }.step h3{ font-family: var(--ui); font-weight: 700; font-size: 17.5px; line-height: 1.25; letter-spacing: -0.016em; margin-bottom: 14px; }.step p{ font-size: 15.5px; color: var(--mute); margin: 0; }.sec--navy .step,.sec--dark .step{ border-top-color: var(--on-ink); }.sec--navy .step__n,.sec--dark .step__n{ color: var(--on-ink); }.sec--navy .step p,.sec--dark .step p{ color: var(--on-ink-mute); }/* --- Bild + Text ------------------------------------------------------ */.split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 84px); align-items: center; }
@media (max-width: 900px) {.split{ grid-template-columns: 1fr; gap: 30px; } }.split--flip .split__img{ order: -1; }.split__img img{ width: 100%; height: auto; }.split__img figcaption{ margin-top: 16px; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--mute); }.reveal-img > img{ transition: clip-path 1.2s var(--e); }.js .reveal-img > img{ clip-path: inset(0 0 100% 0); }.js .reveal-img.on > img{ clip-path: inset(0 0 0 0); }/* --- Listen ----------------------------------------------------------- */.list{ list-style: none; margin: 0; padding: 0; display: grid; }.list li{ position: relative; padding: 13px 0 13px 30px; font-size: 15.5px; color: var(--ink); border-bottom: 1px solid var(--rule-s); }.list li:first-child{ border-top: 1px solid var(--rule-s); }.list li::before{ content: ""; position: absolute; left: 0; top: 23px; width: 15px; height: 1.5px; background: var(--ink); }.sec--navy .list li,.sec--dark .list li{ color: var(--on-ink); border-color: var(--rule-ink); }.sec--navy .list li::before,.sec--dark .list li::before{ background: var(--on-ink); }.list--tight li{ padding: 12px 0 12px 34px; font-size: 15.5px; }.list--tight li::before{ top: 22px; }/* --- Spalten ---------------------------------------------------------- */.cols{ display: grid; gap: clamp(20px, 3vw, 44px); }.cols--2{ grid-template-columns: repeat(2, 1fr); }.cols--3{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {.cols--2,.cols--3{ grid-template-columns: 1fr; gap: 0; } }.col h3{ font-family: var(--ui); font-weight: 700; font-size: 16.5px; letter-spacing: -0.012em; margin-bottom: 12px; }.col p{ font-size: 15.5px; color: var(--mute); }.cols--ruled .col{ padding-top: 20px; border-top: 1.5px solid var(--ink); }
@media (max-width: 900px) {.cols--ruled .col{ padding: 20px 0 28px; } }.sec--navy .cols--ruled .col,.sec--dark .cols--ruled .col{ border-top-color: var(--on-ink); }.sec--navy .cols--ruled .col p,.sec--dark .cols--ruled .col p{ color: var(--on-ink-mute); }.cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 34px); }
@media (max-width: 960px) {.cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {.cards{ grid-template-columns: 1fr; } }.card{ display: flex; flex-direction: column; }.card__img{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--plate); }.card__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--e); }.card:hover .card__img img{ transform: scale(1.04); }.card__body{ padding: 20px 0 0; display: flex; flex-direction: column; flex: 1; }.card h3{ font-family: var(--ui); font-weight: 700; font-size: 17px; letter-spacing: -0.014em; margin-bottom: 10px; }.card p{ font-size: 15.5px; color: var(--mute); margin: 0; }.card .alink{ margin-top: 18px; align-self: flex-start; }/* --- Zitat ------------------------------------------------------------ */.quote{ display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(26px, 5vw, 84px); align-items: end; }
@media (max-width: 900px) {.quote{ grid-template-columns: 1fr; gap: 26px; align-items: start; } }.quote__t{ font-family: var(--disp); font-weight: 400; font-size: clamp(21px, 2.2vw, 31px); line-height: 1.16; letter-spacing: -0.024em; color: var(--ink); }.quote__t span{ color: var(--mute); display: block; }.quote__m p{ font-size: 16px; color: var(--body); }.quote__who{ margin-top: 24px; padding-top: 18px; border-top: 1.5px solid var(--ink); }.quote__who b{ display: block; font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink); }.quote__who span{ font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing:.2em; text-transform: uppercase; color: var(--mute); }/* --- Nachweise -------------------------------------------------------- */
/* Nachweise als amtliches Verzeichnis: Bezeichnung links,Erläuterung rechts */.seals{ display: block; border-top: 1px solid var(--rule); }.seal{ display: grid; grid-template-columns: 200px 1fr; gap: clamp(16px, 3vw, 40px); padding: 15px 0; border-bottom: 1px solid var(--rule); }
@media (max-width: 620px) {.seal{ grid-template-columns: 1fr; gap: 6px; } }.seal b{ display: block; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.18em; text-transform: uppercase; color: var(--ink); padding-top: 4px; }.seal span{ font-size: 15px; color: var(--body); line-height: 1.55; }.sec--navy .seals,.sec--dark .seals{ border-top-color: var(--rule-ink); }.sec--navy .seal,.sec--dark .seal{ border-bottom-color: var(--rule-ink); }.sec--navy .seal b,.sec--dark .seal b{ color: var(--on-ink); }.sec--navy .seal span,.sec--dark .seal span{ color: var(--on-ink-mute); }.cert{ display: grid; grid-template-columns: 190px 1fr; gap: clamp(26px, 5vw, 76px); align-items: start; }
@media (max-width: 900px) {.cert{ grid-template-columns: 1fr; gap: 30px; } }.cert__seal{ display: flex; }.cert__seal img{ width: 100%; max-width: 168px; height: auto; }.cert .seals{ margin-top: 0; }/* --- Bezirke: Fließtext statt Pillen ---------------------------------- */.districts{ display: block; }.district{ display: inline; }.district +.district::before{ content: " · "; color: var(--on-ink-mute); }.district b{ font-family: var(--disp); font-weight: 400; font-size: clamp(15.5px, 1.3vw, 19px); line-height: 1.75; letter-spacing: -0.016em; color: var(--ink); }.district > span{ font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--mute); vertical-align: super; margin-left: 5px; }.sec--navy .district b,.sec--dark .district b{ color: var(--on-ink); }.sec--navy .district > span,.sec--dark .district > span{ color: var(--on-ink-mute); }/* --- Preis ------------------------------------------------------------ */.price{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 900px) {.price{ grid-template-columns: 1fr; gap: 0; } }.price > div{ padding-top: 22px; border-top: 1.5px solid var(--ink); }
@media (max-width: 900px) {.price > div{ padding: 22px 0 30px; } }.price .big{ font-family: var(--disp); font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.22; letter-spacing: -0.02em; color: var(--ink); }.price > div p{ color: var(--mute); font-size: 15.5px; }/* --- Häufige Fragen: Linien,keine Karten ----------------------------- */.faq{ display: block; border-top: 1.5px solid var(--ink); }.faq details{ border-bottom: 1px solid var(--rule); }.faq summary{ list-style: none; cursor: pointer; padding: clamp(17px, 1.7vw, 23px) 0; font-family: var(--ui); font-weight: 700; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.35; letter-spacing: -0.014em; color: var(--ink); display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 24px;
}.faq summary::-webkit-details-marker{ display: none; }.faq summary::after{ content: ""; width: 15px; height: 15px; justify-self: end; background-image: linear-gradient(var(--ink),var(--ink)), linear-gradient(var(--ink),var(--ink)); background-size: 15px 1.5px, 1.5px 15px; background-position: center, center; background-repeat: no-repeat; transition: transform .45s var(--e);
}.faq details[open] summary::after{ transform: rotate(135deg); }.faq .ans{ padding: 0 0 clamp(18px, 1.9vw, 26px); max-width: 64ch; font-size: 15.5px; color: var(--body); }.faq details[open] .ans{ animation: ansIn .45s var(--e); }
@keyframes ansIn {from{ opacity: 0; transform: translateY(-6px); }to{ opacity: 1; transform: none; } }.sec--navy .faq,.sec--dark .faq{ border-top-color: var(--on-ink); }.sec--navy .faq details,.sec--dark .faq details{ border-bottom-color: var(--rule-ink); }.sec--navy .faq summary,.sec--dark .faq summary{ color: var(--on-ink); }.sec--navy .faq .ans,.sec--dark .faq .ans{ color: var(--on-ink-dim); }.sec--navy .faq summary::after,.sec--dark .faq summary::after{ background-image: linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);
}/* --- Kontakt ---------------------------------------------------------- */.cta{ display: none; }.contact{ display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px, 6vw, 96px); align-items: start; }
@media (max-width: 900px) {.contact{ grid-template-columns: 1fr; gap: 40px; } }.dl{ margin: 0; display: block; border-top: 1px solid var(--rule); }.dl > div{ display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--rule); }.dl dt{ font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.18em; text-transform: uppercase; color: var(--mute); padding-top: 4px; }.dl dd{ margin: 0; font-size: 16px; font-weight: 500; color: var(--ink); }.sec--navy .dl,.sec--dark .dl{ border-top-color: var(--rule-ink); }.sec--navy .dl > div,.sec--dark .dl > div{ border-bottom-color: var(--rule-ink); }.sec--navy .dl dt,.sec--dark .dl dt{ color: var(--on-ink-mute); }.sec--navy .dl dd,.sec--dark .dl dd{ color: var(--on-ink); }
@media (max-width: 520px) {.dl > div{ grid-template-columns: 1fr; gap: 4px; } }/* --- Formular: Unterstriche statt Kästen ------------------------------ */.formbox{ padding: 0; background: none; box-shadow: none; }.form{ display: grid; gap: 26px; }.frow{ display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 620px) {.frow{ grid-template-columns: 1fr; gap: 26px; } }.field{ display: grid; gap: 8px; }.field label{ font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.18em; text-transform: uppercase; color: var(--mute); }.field input,.field select,.field textarea{ font-family: var(--sans); font-size: 16px; color: var(--ink); background: none; border: 0; border-bottom: 1.5px solid var(--rule); border-radius: 0; padding: 8px 0 11px; outline: none; width: 100%; transition: border-color .25s var(--e2);
}.field select{ padding-left: 0; }.field textarea{ resize: vertical; min-height: 92px; }.field input:focus,.field select:focus,.field textarea:focus{ border-bottom-color: var(--ink); }.field input::placeholder,.field textarea::placeholder{ color: var(--mute); }.fnote{ font-size: 13px; color: var(--mute); line-height: 1.6; max-width: 56ch; }.fnote a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }/* --- Karriere --------------------------------------------------------- */.hire{ padding-top: 26px; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 60px); align-items: end; background: none; }
@media (max-width: 760px) {.hire{ grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 520px) {.hire .btn{ width: 100%; } }/* --- Seitenkopf ------------------------------------------------------- */.phead{ padding: calc(var(--nav-h) + clamp(40px, 5vw, 80px)) 0 clamp(26px, 3vw, 42px); text-align: left; }.phead h1{ max-width: 20ch; }.phead .lead{ max-width: 54ch; margin-top: 20px; }.phead__grid{ display: block; }.crumb{ font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--mute); margin-bottom: 26px; }.crumb a:hover{ color: var(--ink); }.crumb span{ padding: 0 9px; }/* --- Zweispalter: Etikett in der Randspalte --------------------------- */.two{ display: grid; grid-template-columns: 190px 1fr; gap: clamp(14px, 3vw, 70px); align-items: start; }
@media (max-width: 960px) {.two{ grid-template-columns: 1fr; gap: 6px; } }
@media (min-width: 961px) {.two >.two__label{ position: sticky; top: calc(var(--nav-h) + 28px); } }/* --- Bildband --------------------------------------------------------- */.band{ position: relative; overflow: hidden; background: var(--ink); }.band__img{ position: absolute; inset: -8% 0; }.band__img img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(.4); will-change: transform; }.band__in{ position: relative; padding: clamp(80px, 11vw, 170px) 0; }.band__in p{ font-family: var(--disp); font-weight: 400; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.14; letter-spacing: -0.024em; color: #fff; max-width: 16ch; margin: 0; }.band__in .who{ margin-top: 24px; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--on-ink-mute); }/* --- Hilfsklassen ----------------------------------------------------- */.mt-s{ margin-top: 18px; }.mt-m{ margin-top: 30px; }.mt-l{ margin-top: 52px; }.center{ text-align: left; }.rule{ display: none; }.facts{ display: none; }:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }.sec--dark:focus-visible,.hero:focus-visible,.ftr:focus-visible{ outline-color: #fff; }/* --- Einblenden ------------------------------------------------------- */.rv{ transition: opacity .85s var(--e), transform .85s var(--e); }.js .rv{ opacity: 0; transform: translateY(22px); }.js .rv.on{ opacity: 1; transform: none; }.rv[data-d="1"]{ transition-delay:.07s; }.rv[data-d="2"]{ transition-delay:.14s; }.rv[data-d="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce) {.js .rv,.js .reveal-img > img,.rv,.reveal-img > img{ opacity: 1; transform: none; clip-path: none; transition: none; }.hero__img img,.hero__side,.hero h1 .ln > span{ animation: none; opacity: 1; transform: none; }.btn::before{ display: none; }html{ scroll-behavior: auto; }
} /* Lange deutsche Komposita nicht aus dem Raster laufen lassen */ /* Schmale Geräte */
@media (max-width: 900px) {.mega{ font-size: clamp(27px, 3.6vw, 34px); }.h1{ font-size: clamp(25px, 3.4vw, 31px); }.h2{ font-size: clamp(22px, 3vw, 27px); }.say{ font-size: clamp(18.5px, 2.4vw, 22px); }.index__row h3{ font-size: clamp(19px, 2.6vw, 24px); }.mega,.h1,.h2,.say,.index__row h3,.faq summary,.district b,.block h3,.step h3,.col h3,.card h3,.price .big,.quote__t,.band__in p{ overflow-wrap: break-word; }
}
@media (max-width: 520px) {.mega,.h1,.h2,.say,.index__row h3,.faq summary,.district b{ overflow-wrap: anywhere; }
}/* Formular auf schwarzem Grund */.sec--dark .field label,.sec--navy .field label{ color: var(--on-ink-mute); }.sec--dark .field input,.sec--dark .field select,.sec--dark .field textarea,.sec--navy .field input,.sec--navy .field select,.sec--navy .field textarea{ color: #fff; border-bottom-color: var(--rule-ink);
}.sec--dark .field select option{ color: var(--ink); }.sec--dark .field input:focus,.sec--dark .field select:focus,.sec--dark .field textarea:focus,.sec--navy .field input:focus,.sec--navy .field select:focus,.sec--navy .field textarea:focus{ border-bottom-color: #fff; }.sec--dark .field input::placeholder,.sec--dark .field textarea::placeholder{ color: var(--on-ink-mute); }.sec--dark .fnote,.sec--navy .fnote{ color: var(--on-ink-mute); }.sec--dark .fnote a,.sec--navy .fnote a{ color: #fff; }.sec--dark .dl dd a:hover,.sec--navy .dl dd a:hover{ text-decoration: underline; text-underline-offset: 3px; } /* Bühne auf dem Handy: Kopf kürzer halten, Gesichter frei lassen */
@media (max-width: 600px) {.hero__img img{ object-position: 50% 24%; }.hero .mega{ font-size: 27px; line-height: 1.0; }.hero .lead{ font-size: 15.5px; line-height: 1.5; }.hero__act{ margin-top: 20px; }.hero__in{ gap: 20px; }
}/* --- DEKRA-Siegel ------------------------------------------------------ */.badges{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(14px, 1.8vw, 24px); }.badge{ display: block; transition: transform .45s var(--e); }.badge img{ width: clamp(210px, 21vw, 285px); height: auto; }.badge:hover{ transform: translateY(-3px); }
@media (max-width: 520px) {.badges{ gap: 14px; }.badge img{ width: 100%; max-width: 300px; } }/* ========================================================================== Festgehaltene Abschnitte) der Scroll bleibt stehen,der Inhalt läuft durch ========================================================================== */.pin{ position: relative; background: var(--ink); color: var(--on-ink-dim); }.pin--light{ background: var(--paper); color: var(--body); }.pin__stage{ display: flex; align-items: center; padding: clamp(62px, 6.4vw, 108px) 0; }.js .pin__stage{ position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; }.pin__in{ width: 100%; display: grid; align-items: center; grid-template-columns: minmax(0, 25ch) minmax(0, 1fr); gap: clamp(26px, 6vw, 100px);
}
@media (max-width: 940px) {.pin__in{ grid-template-columns: 1fr; align-content: center; gap: clamp(26px, 5vw, 40px); } }.pin__head{ max-width: 30ch; }.pin .h2{ color: var(--on-ink); }.pin--light .h2{ color: var(--ink); }.pin .eyebrow{ color: var(--on-ink); }.pin--light .eyebrow{ color: var(--ink); }/* Beats: ohne JS untereinander,mit JS übereinander und einzeln sichtbar */.pin__beats{ display: grid; gap: clamp(28px, 4vw, 48px); }.js .pin__beats{ display: block; position: relative; min-height: clamp(180px, 22vh, 250px); }.js .beat{ position: absolute; inset: 0; opacity: 0; transform: translateY(26px); transition: opacity .55s var(--e), transform .7s var(--e); pointer-events: none;
}.js .beat.is-on{ opacity: 1; transform: none; pointer-events: auto; }.beat .num{ display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(44px, 7.4vw, 112px); line-height: 1; letter-spacing: -0.042em; color: var(--on-ink);
}.beat .lbl{ display: block; margin-top: 22px; max-width: 34ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.45; color: var(--on-ink-dim); }.beat .delta{ display: inline-block; margin-top: 16px; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing:.16em; text-transform: uppercase; color: var(--on-ink-mute); }.beat__n{ display: block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--mute); margin-bottom: 22px; }.beat__t{ font-family: var(--disp); font-weight: 400; font-size: clamp(22px, 2.8vw, 40px); line-height: 1.14; letter-spacing: -0.03em; color: var(--ink); max-width: 20ch; margin: 0; }.beat__p{ margin: 20px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--body); }.pin .source{ margin: 24px 0 0; max-width: 34ch; font-size: 11px; line-height: 1.65; }.pin__bar{ position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.14); }.pin--light .pin__bar{ background: var(--rule); }.pin__bar i{ display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }.pin--light .pin__bar i{ background: var(--ink); }html:not(.js) .pin__bar{ display: none; } @media (max-width: 700px) {.js .pin__beats{ min-height: 270px; }.beat .num{ font-size: clamp(38px, 12vw, 56px); }.beat__t{ font-size: clamp(20px, 5.4vw, 26px); }
}
@media (prefers-reduced-motion: reduce) {.js .pin__stage{ position: static; height: auto; padding: clamp(62px, 6.4vw, 108px) 0; }.js .pin__beats{ display: grid; position: static; }.js .beat{ position: static; opacity: 1; transform: none; }.pin__bar{ display: none; }
}/* ========================================================================== Ruhigerer Abschnittskopf: Etikett,Überschrift,Beitext,eine Spalte links ========================================================================== */.shead{ max-width: 46ch; margin: 0 0 clamp(30px, 3.4vw, 54px); }.shead .h2{ margin-top: 0; max-width: 20ch; }.shead .lead{ margin-top: 20px; max-width: 52ch; }.head2{ display: block; }/* Bühne: alles auf der linken Achse untereinander */.hero__in{ grid-template-columns: 1fr; align-items: start; }.hero__side{ max-width: 46ch; margin-top: 24px; }.hero h1{ max-width: 17ch; }
@media (min-width: 981px) {.hero__side{ margin-top: 26px; } }/* Bühne bewegt sich beim Wegscrollen mit */.hero__img{ will-change: transform; }/* Amtliche Angaben im Footer */ /* Bühne bewegt sich beim Wegscrollen */.hero__in{ will-change: transform, opacity; }/* Der Marker,der beim Scrollen durch das Leistungsregister wandert */.index__row.is-lead::before{ transform: scaleY(1); }.index__row.is-lead h3{ transform: translateX(clamp(5px,.7vw, 12px)); }.index__row.is-lead p{ color: var(--body); }.index__row::after{ content: ""; position: absolute; left: calc(var(--gut) * -1); top: 0; bottom: 0; width: 3px; background: var(--ink); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--e);
}.index__row.is-lead::after,.index__row:hover::after{ transform: scaleY(1); }
@media (prefers-reduced-motion: reduce) {.index__row::after{ display: none; }.index__row.is-lead::before{ transform: scaleY(0); }
}/* ========================================================================== Kontakt: die Nummer ist das Hauptelement ========================================================================== */.bigtel{ display: block; padding-bottom: 4px; }.bigtel__lbl{ display: block; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--on-ink-mute); margin-bottom: 16px; }.bigtel__no{ display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.035em; color: var(--on-ink); transition: transform .4s var(--e);
}.bigtel:hover .bigtel__no{ transform: translateX(8px); }
@media (max-width: 420px) {.bigtel__no{ font-size: 27px; } }/* Zertifikate im Über-uns-Abschnitt */.cred{ padding-top: 24px; border-top: 1px solid var(--rule); }.cred__seals{ display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }.cred__seals img{ width: clamp(150px, 15vw, 195px); height: auto; }.cred__seals a{ transition: transform .4s var(--e); }.cred__seals a:hover{ transform: translateY(-3px); }.cred__note{ margin: 18px 0 0; max-width: 44ch; font-size: 14px; line-height: 1.6; color: var(--mute); }/* ========================================================================== Leistungsfelder: vier Spalten mit Trennlinien statt Karten ========================================================================== */.lf{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); }
@media (max-width: 1000px) {.lf{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {.lf{ grid-template-columns: 1fr; } }.lf__col{ position: relative; display: flex; flex-direction: column; padding: clamp(28px, 2.6vw, 40px) clamp(20px, 1.9vw, 32px) clamp(28px, 2.6vw, 38px); border-bottom: 1px solid var(--rule); transition: background .4s var(--e2);
}.lf__col +.lf__col{ border-left: 1px solid var(--rule); }
@media (max-width: 1000px) {.lf__col:nth-child(2n+1){ border-left: 0; } }
@media (max-width: 620px) {.lf__col{ border-left: 0 !important; } }/* Beim Überfahren zieht oben eine kräftige Linie durch */.lf__col::before{ content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--e);
}.lf__col:hover{ background: var(--plate); }.lf__col:hover::before{ transform: scaleX(1); }.lf__col h3{ font-family: var(--disp); font-weight: 400; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.18; letter-spacing: -0.024em; color: var(--ink); margin: 0 0 16px; max-width: 15ch;
}
@media (min-width: 621px) {.lf__col h3{ min-height: 2.36em; } }.lf__col p{ flex: 1; margin: 0; font-size: 15.5px; line-height: 1.58; color: var(--mute); }.lf__col .alink{ margin-top: clamp(26px, 2.4vw, 36px); align-self: flex-start; border-bottom-color: var(--rule); transition: gap .3s var(--e), border-color .3s var(--e2);
}.lf__col:hover .alink{ gap: 16px; border-bottom-color: var(--ink); }/* Der erste Abschnitt schließt enger an die Bühne an */.hero +.sec{ padding-top: clamp(52px, 5vw, 84px); }/* ========================================================================== Häufige Fragen: Boxen,die aufklappen ========================================================================== */.qlist{ display: grid; gap: 10px; }.qbox{ border: 1px solid var(--rule); background: var(--paper); transition: border-color .3s var(--e2), background .3s var(--e2);
}.qbox:hover{ border-color: var(--line2, rgba(10,10,10,.3)); }.qbox[open]{ border-color: var(--ink); background: var(--plate); }.qbox summary{ list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 20px; align-items: center; gap: 22px; padding: clamp(17px, 1.7vw, 23px) clamp(18px, 2vw, 30px); font-family: var(--ui); font-size: clamp(15.5px, 1.25vw, 18px); font-weight: 700; letter-spacing: -0.014em; line-height: 1.35; color: var(--ink);
}.qbox summary::-webkit-details-marker{ display: none; }.qbox summary::after{ content: ""; width: 14px; height: 14px; justify-self: end; background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 14px 1.5px, 1.5px 14px; background-position: center, center; background-repeat: no-repeat; transition: transform .4s var(--e);
}.qbox[open] summary::after{ transform: rotate(135deg); }.qbox__a{ padding: 0 clamp(18px, 2vw, 30px) clamp(20px, 2vw, 28px); }.qbox__a p{ margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.62; color: var(--body); }.qbox[open] .qbox__a{ animation: qOpen .42s var(--e); }
@keyframes qOpen {from{ opacity: 0; transform: translateY(-8px); }to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {.qbox[open] .qbox__a{ animation: none; } }/* ========================================================================== Leistungsfelder: weißes Blatt,das in die Bühne ragt ========================================================================== */.hero__in{ padding-block: calc(var(--nav-h) + 36px) clamp(120px, 16vh, 190px); }
@media (max-width: 980px) {.hero__in{ padding-block: calc(var(--nav-h) + 50px) clamp(96px, 13vh, 140px); } }.lf-sec{ position: relative; z-index: 5; padding: 0 0 clamp(62px, 6.4vw, 108px); margin-top: clamp(-150px, -12vh, -80px); }.lf-sec >.wrap{ background: var(--paper); padding-top: clamp(34px, 3.6vw, 54px); }
@media (max-width: 700px) {.lf-sec{ margin-top: -56px; } }.lf{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1vw, 16px); border-top: 0; }
@media (max-width: 1000px) {.lf{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {.lf{ grid-template-columns: 1fr; } }.lf__col{ position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.2vw, 34px) clamp(20px, 1.8vw, 28px) clamp(24px, 2.2vw, 32px); border: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); transition: background .45s var(--e2), border-color .45s var(--e2), transform .45s var(--e);
}.lf__col +.lf__col{ border-left: 1px solid var(--rule); }.lf__col::before{ content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--e);
}.lf__col:hover{ background: var(--ink); border-color: var(--ink); transform: translateY(-3px); }.lf__col:hover::before{ transform: scaleX(1); }.lf__col:hover h3{ color: var(--on-ink); }.lf__col:hover p{ color: var(--on-ink-dim); }.lf__col:hover .alink{ color: var(--on-ink); border-bottom-color: var(--on-ink); }.lf__col h3,.lf__col p,.lf__col .alink{ transition: color .45s var(--e2), border-color .45s var(--e2); }/* ========================================================================== Fußzeile: Schlussbild ========================================================================== */.ftr{ background: var(--ink); color: var(--on-ink-dim); padding: clamp(44px, 4.6vw, 70px) 0 30px; }.ftr__top{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(30px, 6vw, 90px); align-items: end; padding-bottom: clamp(40px, 5vw, 70px);
}
@media (max-width: 820px) {.ftr__top{ grid-template-columns: 1fr; gap: 26px; align-items: start; } }.ftr__lock{ width: clamp(104px, 11vw, 150px); height: auto; }.ftr__claim{ margin: 0; max-width: 52ch; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.5; letter-spacing: -0.012em; color: var(--on-ink);
}.ftr__grid{ display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.1fr; gap: 0 clamp(24px, 3vw, 48px); padding-bottom: clamp(40px, 4.6vw, 64px);
}
@media (max-width: 940px) {.ftr__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {.ftr__grid{ grid-template-columns: 1fr; } }.ftr__col{ padding: 0; }.ftr__col +.ftr__col{ padding-left: 0; }
@media (max-width: 940px) {.ftr__col:nth-child(n+3){ padding-top: clamp(30px, 3vw, 44px); } }
@media (max-width: 560px) {.ftr__col +.ftr__col{ padding-top: clamp(26px, 3vw, 38px); } }.ftr h4{ font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: var(--on-ink-mute); margin: 0 0 20px;
}.ftr ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }.ftr ul a,.ftr ul li{ font-size: 14.5px; line-height: 1.5; color: var(--on-ink-dim); }.ftr ul a{ position: relative; display: inline-block; }.ftr ul a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--e);
}.ftr ul a:hover{ color: #fff; }.ftr ul a:hover::after{ transform: scaleX(1); }.ftr__tel{ display: inline-block; margin-bottom: 18px; font-family: var(--disp); font-weight: 400; font-size: clamp(21px, 2vw, 28px); line-height: 1; letter-spacing: -0.032em; color: var(--on-ink); transition: transform .4s var(--e);
}.ftr__tel:hover{ transform: translateX(6px); }.ftr__seals{ display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }.ftr__seals img{ width: clamp(160px, 15vw, 200px); height: auto; }.ftr__seals a{ transition: transform .4s var(--e); }.ftr__seals a:hover{ transform: translateY(-3px); }.ftr__seal{ display: none; }.ftr__bottom{ display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--rule-ink); font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing:.16em; text-transform: uppercase; color: var(--on-ink-mute);
}.ftr__up{ display: inline-flex; align-items: center; gap: 9px; color: var(--on-ink-dim); transition: color .3s var(--e2); }.ftr__up:hover{ color: #fff; }.ftr__up .ar{ transition: transform .35s var(--e); }.ftr__up:hover .ar{ transform: translateY(-4px); }/* ========================================================================== Leistungsfelder: Zeichen statt Icon-Kacheln ========================================================================== */.lf__ico{ display: block; width: clamp(30px, 2.6vw, 36px); height: auto; margin-bottom: clamp(22px, 2.2vw, 32px); fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--e2), transform .55s var(--e);
}.lf__col:hover .lf__ico{ stroke: var(--on-ink); transform: translateY(-3px); }/* ========================================================================== Über uns: randlose Doppelseite,Porträt füllt die halbe Seite ========================================================================== */.about{ display: grid; grid-template-columns: minmax(0, 47%) minmax(0, 1fr); background: var(--plate); overflow: hidden;
}
@media (max-width: 920px) {.about{ grid-template-columns: 1fr; } }.about__media{ position: relative; margin: 0; overflow: hidden; min-height: clamp(520px, 84vh, 820px); }
@media (max-width: 920px) {.about__media{ min-height: clamp(380px, 56vh, 520px); } }.about__media img{ position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; object-position: 50% 22%; will-change: transform;
}.about__media::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.82)); pointer-events: none;
}.js .about__media > img{ clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--e); }.js .about__media.on > img{ clip-path: inset(0 0 0 0); }.about__sig{ position: absolute; z-index: 2; left: clamp(20px, 3.4vw, 48px); bottom: clamp(24px, 3vw, 44px); padding-top: 18px; border-top: 2px solid #fff; min-width: min(280px, 60%);
}.about__name{ display: block; font-family: var(--disp); font-weight: 400; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.05; letter-spacing: -0.032em; color: #fff;
}.about__role{ display: block; margin-top: 9px; font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing:.2em; text-transform: uppercase; color: rgba(255,255,255,.7);
}.about__panel{ display: flex; align-items: center; }.about__inner{ padding: clamp(52px, 6vw, 96px) 0 clamp(52px, 6vw, 96px) clamp(24px, 4.4vw, 76px); padding-right: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); max-width: 68ch;
}
@media (max-width: 920px) {.about__inner{ padding: clamp(38px, 7vw, 56px) var(--gut); max-width: none; }
}.about .h2{ max-width: 18ch; }/* Kurze Bühnen-Headline darf größer stehen */.hero .mega{ font-size: clamp(34px, 6.6vw, 88px); line-height: 1.0; letter-spacing: -0.034em; }
@media (max-width: 900px) {.hero .mega{ font-size: clamp(34px, 9.6vw, 46px); } } /* Quellenhinweis: am Desktop unter der Überschrift, auf dem Handy hinter den Zahlen */
@media (min-width: 941px) {.pin__head{ grid-column: 1; grid-row: 1; align-self: end; }.pin .source{ grid-column: 1; grid-row: 2; align-self: start; margin-top: 22px; }.pin__beats{ grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 940px) {.pin__in{ grid-template-columns: 1fr; }.pin .source{ order: 3; margin-top: 4px; }.js .pin__beats{ min-height: 236px; }
} /* Handy: etwas engere Abstände, damit die Seite natürlicher läuft */
@media (max-width: 700px) {.sec{ padding: 54px 0; }.sec--tight{ padding: 42px 0; }.shead{ margin-bottom: 26px; }.shead .lead{ margin-top: 14px; }.lf-sec{ padding-bottom: 54px; }.lf-sec >.wrap{ padding-top: 30px; }.lf{ gap: 8px; }.qlist{ gap: 8px; }.about__inner{ padding-block: 40px 46px; }.contact{ gap: 34px; }.form{ gap: 22px; }.frow{ gap: 22px; }.ftr{ padding-top: 44px; }.ftr__grid{ padding-bottom: 34px; }.mt-l{ margin-top: 34px; }.mt-m{ margin-top: 22px; }
}/* Doppelseite gespiegelt: Text links,Bild rechts */.about--flip{ grid-template-columns: minmax(0, 1fr) minmax(0, 47%); }.about--flip .about__media{ order: 2; }.about--flip .about__panel{ order: 1; }.about--flip .about__inner{ padding-left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); padding-right: clamp(24px, 4.4vw, 76px);
}
@media (max-width: 920px) {.about--flip{ grid-template-columns: 1fr; }.about--flip .about__media{ order: 1; }.about--flip .about__panel{ order: 2; }.about--flip .about__inner{ padding-inline: var(--gut); }
} 

/* --- Fließtext und Abstände der Textbausteine -------------------------- */
.prose{max-width:64ch}
.sec > .wrap > * + *{margin-top:clamp(34px,3.4vw,58px)}
.sec > .wrap > .shead + *{margin-top:0}
.col p + p{margin-top:0}

/* --- Bezeichnung und Erläuterung: Raster statt Liste ------------------- */
.defs{display:grid;gap:clamp(30px,3.2vw,48px) clamp(38px,4.4vw,80px)}
.defs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.defs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.defs--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.defs--2,.defs--3{grid-template-columns:1fr;
  gap:clamp(24px,5vw,32px)}}
.def h3,.einzel h3{font-family:var(--ui);font-size:16.5px;font-weight:700;
  letter-spacing:-.012em;line-height:1.35;color:var(--ink);margin:0 0 9px}
.def p,.einzel p{margin:0;font-size:15.5px;line-height:1.64;color:var(--body);
  max-width:46ch}
.def p + p,.einzel p + p{margin-top:.85em}
.einzel{max-width:64ch}
.sec--dark .def h3,.sec--navy .def h3,
.sec--dark .einzel h3,.sec--navy .einzel h3{color:var(--on-ink)}
.sec--dark .einzel p,.sec--navy .einzel p{color:var(--on-ink-mute)}
.sec--dark .def p,.sec--navy .def p{color:var(--on-ink-mute)}
.sec--dark .prose p,.sec--navy .prose p{color:var(--on-ink-dim)}
.sec--dark .col h3,.sec--navy .col h3{color:var(--on-ink)}

/* Unterabschnitte ohne Linien brauchen beim Umbruch eigenen Abstand */
@media (max-width:900px){
  .cols:not(.cols--ruled){gap:clamp(28px,5vw,38px)}
}

/* --- Ablauf: Schrittnummern ------------------------------------------- */
.col__n{display:block;font-family:var(--ui);font-size:11px;font-weight:700;
  letter-spacing:.17em;color:var(--mute);margin-bottom:10px}
.sec--dark .col__n,.sec--navy .col__n{color:var(--on-ink-mute)}

/* --- Tabellen: nur eine Linie unter dem Kopf --------------------------- */
.tbl{width:100%;border-collapse:collapse;margin-top:10px;font-size:15px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:13px 22px 13px 0}
.tbl th{font-family:var(--ui);font-weight:700;font-size:10.5px;
  letter-spacing:.17em;text-transform:uppercase;color:var(--mute);
  padding-bottom:11px;border-bottom:1px solid var(--ink);white-space:nowrap}
.tbl tbody tr + tr td{border-top:1px solid var(--rule-s)}
.tbl td{color:var(--body);line-height:1.6}
.tbl td:first-child{font-weight:600;color:var(--ink);padding-right:30px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sec--dark .tbl th,.sec--navy .tbl th{color:var(--on-ink-mute);border-bottom-color:var(--on-ink)}
.sec--dark .tbl tbody tr + tr td,.sec--navy .tbl tbody tr + tr td{border-top-color:var(--rule-ink)}
.sec--dark .tbl td,.sec--navy .tbl td{color:var(--on-ink-mute)}
.sec--dark .tbl td:first-child,.sec--navy .tbl td:first-child{color:var(--on-ink)}
@media (max-width:700px){
  .tbl{font-size:14px}
  .tbl th,.tbl td{padding:11px 14px 11px 0}
  .tbl td:first-child{padding-right:18px}
}

/* --- FAQ: ohne Kästen, nur feine Trennung ----------------------------- */
.qlist{border-top:1px solid var(--rule)}
.qbox{border:0;background:transparent;border-bottom:1px solid var(--rule)}
.qbox:hover{border-color:var(--rule)}
.qbox[open]{border-color:var(--rule);background:transparent}
.qbox summary{padding-inline:0;padding-block:clamp(19px,1.9vw,25px)}
.qbox__a{padding:0 0 clamp(22px,2.2vw,30px)}
.qbox__a p{max-width:70ch}
.qbox__a p + p{margin-top:.9em}
.sec--dark .qlist,.sec--navy .qlist{border-top-color:var(--rule-ink)}
.sec--dark .qbox,.sec--navy .qbox{border-bottom-color:var(--rule-ink)}

/* --- Abschnitte atmen lassen ------------------------------------------ */
.sec{padding-block:clamp(66px,7.5vw,118px)}
.shead{margin-bottom:clamp(34px,3.8vw,58px)}

/* Der Abschnittskopf bleibt einspaltig: Etikett, Überschrift, Einleitung
   stehen untereinander an derselben Kante. Das liest sich ruhiger als ein
   Wechsel zwischen linker und rechter Spalte. */
.shead{max-width:none}
.shead .h2{max-width:22ch}
/* Der Beitext läuft über die volle Breite des Abschnitts, die Überschrift
   bleibt schmal. */
.shead .lead{margin-top:clamp(16px,1.6vw,24px);max-width:none}

/* Verweise im Fließtext müssen als Verweis erkennbar sein */
.prose a,.def p a,.einzel p a,.lead a,.qbox__a a,.tbl a,.list a{
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(10,10,10,.42);
  transition:text-decoration-color .25s var(--e)}
.prose a:hover,.def p a:hover,.einzel p a:hover,.lead a:hover,
.qbox__a a:hover,.tbl a:hover,.list a:hover{text-decoration-color:currentColor}
.sec--dark a,.sec--navy a{text-decoration-color:rgba(255,255,255,.4)}

/* --- Kontaktformular: Bot-Falle und Rückmeldung ------------------------ */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{margin-bottom:22px;padding:15px 18px;border-left:3px solid currentColor;
  font-size:15.5px;line-height:1.55}
.fmsg--ok{color:#1d6b3f;background:#eef7f1}
.fmsg--fehler{color:#8a2c2c;background:#fbeeee}
.sec--dark .fmsg--ok,.sec--navy .fmsg--ok{color:#9fe3bd;background:rgba(159,227,189,.10)}
.sec--dark .fmsg--fehler,.sec--navy .fmsg--fehler{color:#f0b1b1;background:rgba(240,177,177,.10)}


/* --- Über uns ohne Porträt --------------------------------------------- */
.about--plain{grid-template-columns:1fr}
.about--plain .about__panel{display:block}
.about--plain .about__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(56px,6.5vw,100px) var(--gut)}
.about--plain .h2{max-width:20ch}
@media (min-width:901px){
  /* Der Platz, den vorher das Bild hatte, tragen jetzt die Nachweise. */
  .about--plain .about__inner{
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    column-gap:clamp(36px,5vw,88px);align-content:start}
  .about--plain .about__inner > .eyebrow{grid-area:1/1}
  .about--plain .about__inner > .h2{grid-area:2/1}
  .about--plain .about__inner > .prose{grid-area:3/1}
  .about--plain .about__inner > div.mt-m:not(.prose){grid-area:4/1}
  .about--plain .about__inner > .cred{
    grid-area:1/2/5/3;align-self:stretch;
    display:flex;flex-direction:column;justify-content:center;
    border-top:0;padding-top:0;
    border-left:1px solid var(--rule);padding-left:clamp(28px,3.4vw,54px)}
  .about--plain .cred__note{max-width:38ch}
}


/* --- Rechtsseiten ------------------------------------------------------ */
.legal{max-width:68ch}
.legal > h2{
  font-family:var(--ui);font-size:17px;font-weight:700;
  letter-spacing:-.012em;line-height:1.3;
  margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--rule);
  word-spacing:.05em}
.legal > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p,.legal address{font-size:16px;line-height:1.72;color:var(--body);margin:0 0 1.05em}
.legal address{font-style:normal}
.legal > :last-child{margin-bottom:0}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(10,10,10,.42);
  transition:text-decoration-color .25s var(--e)}
.legal a:hover{text-decoration-color:currentColor}
.legal .list{margin:4px 0 1.05em}
.legal .list li{font-size:16px}
.legal .fnote{margin-top:46px;padding-top:22px;border-top:1px solid var(--rule)}
/* Noch zu ergänzende Pflichtangaben — vor dem Livegang darf nichts davon stehen bleiben. */
.offen{background:#FBEFC6;color:#6A4B00;padding:1px 4px;margin-inline:-2px;
  border-radius:3px;font-style:italic;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (max-width:620px){
  .legal > h2{margin-top:36px}
}


/* --- FAQ: die Frage als Überschrift, Optik unverändert ----------------- */
.qbox summary h3{margin:0;font:inherit;color:inherit;letter-spacing:inherit;display:inline}


/* --- Seitenkopf mit Bild (Leistungsseiten) ----------------------------- */
.phero{
  position:relative;isolation:isolate;background:var(--ink);
  min-height:clamp(360px,46vh,500px);
  display:flex;align-items:flex-end;
  padding-block:calc(var(--nav-h) + 44px) clamp(36px,5vw,62px)}
.phero__img{position:absolute;inset:0;z-index:-2;overflow:hidden}
.phero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.phero__veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,8,8,.60) 0%,rgba(8,8,8,.30) 42%,rgba(8,8,8,.88) 100%),
  linear-gradient(90deg,rgba(8,8,8,.74) 0%,rgba(8,8,8,.46) 46%,rgba(8,8,8,.10) 78%)}
.phero__in{width:100%}
.phero .crumb{color:rgba(255,255,255,.66)}
.phero .crumb a{color:rgba(255,255,255,.66)}
.phero .crumb a:hover{color:#fff}
.phero .h1{color:#fff;max-width:19ch}
.phero .lead{color:rgba(255,255,255,.88);max-width:50ch;margin-top:18px}
@media (max-width:620px){
  .phero{min-height:clamp(300px,40vh,380px);
    padding-block:calc(var(--nav-h) + 32px) 34px}
  .phero .h1{max-width:none}
}


/* --- Hinweis: Einordnung oder Querverweis, abgesetzt vom Fließtext ------ */
.hinweis{
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;
  max-width:68ch;margin-top:clamp(26px,2.6vw,38px);
  padding:clamp(18px,1.9vw,24px) clamp(20px,2.1vw,26px);
  background:var(--plate)}
.hinweis__zeichen{width:22px;height:22px;margin-top:1px;
  color:var(--ink);opacity:.5;flex:none}
.hinweis p{margin:0;font-size:15.5px;line-height:1.66;color:var(--body)}
.hinweis a{color:var(--ink);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(10,10,10,.38);
  transition:text-decoration-color .25s var(--e)}
.hinweis a:hover{text-decoration-color:var(--ink)}

.sec--grey .hinweis{background:#fff}
.sec--dark .hinweis{background:rgba(255,255,255,.06)}
.sec--dark .hinweis__zeichen{color:#fff;opacity:.55}
.sec--dark .hinweis p{color:var(--on-ink-dim)}
.sec--dark .hinweis a{color:#fff;text-decoration-color:rgba(255,255,255,.45)}
.sec--dark .hinweis a:hover{text-decoration-color:#fff}



/* --- Kennzahlen als Datenblatt ----------------------------------------- */
.fakten{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(30px,3.2vw,52px) clamp(28px,3vw,56px);
  margin-top:clamp(34px,3.4vw,52px)}
.fakt{display:flex;flex-direction:column;gap:9px;min-width:0}
.fakt__lbl{
  font-family:var(--ui);font-size:10px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--on-ink-mute)}
.fakt__wert{
  font-family:var(--disp);font-size:clamp(20px,1.7vw,25px);line-height:1.18;
  color:#fff;letter-spacing:-.01em;overflow-wrap:break-word}
.fakt__wert--lang{
  font-family:var(--sans);font-size:16.5px;font-weight:500;line-height:1.5}
.fakt__zus{font-size:14.5px;line-height:1.6;color:var(--on-ink-dim)}
.fakt a{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45)}
@media (max-width:1000px){.fakten{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.fakten{grid-template-columns:1fr;gap:28px}}


/* --- Strichzeichnungen: bauen sich auf, sobald der Block sichtbar wird --- */
.zeichen{width:26px;height:26px;display:block;color:var(--ink);opacity:.42}
.zeichen circle,.zeichen path{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .9s var(--e)}
.rv.on .zeichen circle,.rv.on .zeichen path{stroke-dashoffset:0}
.rv.on .zeichen circle:nth-child(2),.rv.on .zeichen path:nth-child(2){
  transition-delay:.22s}
.rv.on .zeichen circle:nth-child(3),.rv.on .zeichen path:nth-child(3){
  transition-delay:.38s}

/* Im Ablauf tragen Zeichen und Ziffer denselben Takt */
.cols--ruled .col .zeichen{margin-bottom:16px}
.cols--ruled .col .zeichen circle,.cols--ruled .col .zeichen path{
  transition-delay:calc(var(--takt,0) * .14s)}
.cols--ruled .col .zeichen circle:nth-child(2),
.cols--ruled .col .zeichen path:nth-child(2){
  transition-delay:calc(var(--takt,0) * .14s + .22s)}
.cols--ruled .col .zeichen path:nth-child(3){
  transition-delay:calc(var(--takt,0) * .14s + .38s)}

.sec--dark .zeichen{color:#fff;opacity:.5}
.hinweis__zeichen{width:22px;height:22px;margin-top:1px;flex:none;opacity:.5}

@media (prefers-reduced-motion: reduce){
  .zeichen circle,.zeichen path{
    stroke-dashoffset:0;transition:none}
}


/* --- Vier Leistungsfelder: schwarze Karten, Kategorie statt Symbol --- */
.lf{gap:clamp(12px,1.1vw,18px)}
.lf__col{
  background:var(--ink);border:0;
  padding:clamp(26px,2.4vw,36px) clamp(22px,2vw,30px) clamp(24px,2.2vw,32px);
  transition:background .45s var(--e2),transform .45s var(--e),box-shadow .45s var(--e2)}
.lf__col +.lf__col{border-left:0}
.lf__col h3{color:var(--on-ink)}
.lf__col p{color:var(--on-ink-dim)}
.lf__col .alink{color:var(--on-ink);border-bottom-color:rgba(255,255,255,.3)}
.lf__kat{
  display:block;margin:0 0 clamp(24px,2.3vw,36px);
  font-family:var(--ui);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.52);transition:color .45s var(--e2)}
.lf__col::before{background:#fff}
.lf__col:hover{background:#26251f;transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(17,17,15,.26)}
.lf__col:hover h3{color:var(--on-ink)}
.lf__col:hover p{color:var(--on-ink-dim)}
.lf__col:hover .alink{color:#fff;border-bottom-color:#fff}
.lf__col:hover .lf__kat{color:#fff}
@media (max-width: 620px){
  .lf__kat{margin-bottom:16px}
  .lf__col{padding:24px 22px 26px}
}

/* --- Siegel als Beleg, nicht als Deko ---------------------------------
   Die beiden DEKRA-Bilder haben unterschiedliche Seitenverhaeltnisse.
   Eine feste Hoehe plus object-fit laesst sie trotzdem gleich wirken. */
.siegel{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(20px,2.6vw,44px);
  margin-bottom:clamp(34px,3.8vw,56px);
  padding:clamp(20px,2.2vw,30px) clamp(22px,2.6vw,36px);
  background:var(--paper);border:1px solid var(--rule)}
.siegel > a{display:flex;align-items:center;flex:0 0 auto;
  transition:opacity .3s var(--e2)}
.siegel > a:hover{opacity:.72}
.siegel img{display:block;width:auto;height:clamp(50px,4.8vw,68px);object-fit:contain}
.siegel__txt{flex:1 1 260px;min-width:220px;margin:0;
  font-size:14.5px;line-height:1.6;color:var(--mute)}
@media (max-width:620px){
  .siegel{gap:18px;padding:20px}
  .siegel img{height:46px}
}

/* --- Auftakt mit Portraet: Bild links, Text rechts --------------------- */
.about--intro .about__media img{object-position:50% 34%}
.about--intro .h1{max-width:16ch}
.about--intro .crumb{margin-bottom:clamp(14px,1.4vw,20px)}

/* --- FAQ: mehr Luft zwischen den Zeilen -------------------------------- */
.qbox summary{padding-block:clamp(22px,2.2vw,30px)}
.qbox__a{padding-bottom:clamp(22px,2.3vw,32px)}

/* Der Auftakt liegt unter der Kopfzeile, nicht darunter hindurch: sonst
   steht die dunkle Navigation zur Haelfte auf dem Foto. */
.about--intro{padding-top:var(--nav-h)}
.about--intro .about__media{min-height:clamp(480px,74vh,720px)}
.about--intro .h1{font-size:clamp(27px,2.85vw,41px);line-height:1.08;max-width:18ch}
.about--intro .lead{margin-top:clamp(16px,1.7vw,24px);max-width:46ch}
.about--intro .about__inner{padding-block:clamp(40px,4.4vw,72px)}
@media (max-width:920px){
  .about--intro{padding-top:0}
  .about--intro .about__media{min-height:clamp(340px,52vh,460px);margin-top:var(--nav-h)}
}

/* --- Einordnungstabelle: zwei Spalten, rechte Spalte fuehrt weiter ----- */
.tbl--ein{margin-top:clamp(6px,1vw,14px)}
.tbl--ein td{padding-block:clamp(15px,1.5vw,20px)}
.tbl--ein td:first-child{width:56%;font-weight:600}
.tbl--ein td:last-child{padding-right:0}
.tbl--ein td a{
  display:inline-flex;align-items:baseline;gap:10px;
  font-weight:600;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:2px;
  transition:border-color .3s var(--e2),gap .3s var(--e)}
.tbl--ein td a:hover{border-bottom-color:var(--ink);gap:16px}
.tbl--ein tbody tr{transition:background .3s var(--e2)}
.tbl--ein tbody tr:hover{background:var(--plate)}
.tbl--ein tbody tr:hover td{box-shadow:inset 0 0 0 0 transparent}
@media (max-width:700px){
  .tbl--ein,.tbl--ein thead,.tbl--ein tbody,.tbl--ein tr,.tbl--ein td{display:block;width:auto}
  .tbl--ein thead{display:none}
  .tbl--ein tbody tr{padding:16px 0;border-top:1px solid var(--rule-s)}
  .tbl--ein tbody tr:first-child{border-top:0}
  .tbl--ein tbody tr + tr td{border-top:0}
  .tbl--ein td{padding:0}
  .tbl--ein td:first-child{width:auto;margin-bottom:8px}
  .tbl--ein tbody tr:hover{background:transparent}
}

/* --- Instagram: Bilder liegen lokal, kein fremder Aufruf -------------- */
.ig__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.1vw,18px)}
.ig__tile{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:var(--ink)}
.ig__tile img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--e),opacity .4s var(--e2)}
.ig__tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.55));
  opacity:0;transition:opacity .4s var(--e2)}
.ig__tile:hover img,.ig__tile:focus-visible img{transform:scale(1.06)}
.ig__tile:hover::after,.ig__tile:focus-visible::after{opacity:1}
.ig__auf{
  position:absolute;z-index:2;right:12px;bottom:12px;
  width:30px;height:30px;color:#fff;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--e2),transform .4s var(--e)}
.ig__auf svg{width:100%;height:100%;display:block}
.ig__tile:hover .ig__auf,.ig__tile:focus-visible .ig__auf{opacity:1;transform:none}

.ig__fuss{
  margin-top:clamp(26px,2.8vw,42px);
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,2vw,30px)}
.ig__fuss .btn{display:inline-flex;align-items:center;gap:11px;
  text-transform:none;letter-spacing:.01em;font-size:14px}
.btn__zeichen{width:18px;height:18px;flex:none}

@media (max-width:860px){
  .ig__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .ig__grid{gap:8px}
  .ig__fuss{gap:16px}
  .ig__fuss .btn{width:100%;justify-content:center}
}

/* --- Instagram in Kopf- und Fusszeile --------------------------------- */
.hdr__ig{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-right:-4px;color:var(--ink);
  transition:opacity .3s var(--e2)}
.hdr__ig svg{width:21px;height:21px;display:block}
.hdr__ig:hover{opacity:.6}
.hdr--over:not(.is-stuck) .hdr__ig{color:#fff}
@media (max-width: 1150px){ .hdr__ig{display:none} }

.ftr__ig{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  color:var(--on-ink);font-family:var(--ui);font-size:14px;
  text-decoration:none;transition:opacity .3s var(--e2)}
.ftr__ig svg{width:19px;height:19px;flex:none}
.ftr__ig span{border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
.ftr__ig:hover{opacity:.72}