/* Stonebridge, Unternehmensberatung. Tiefes Schiefer, helles Kalkgestein, ein Sandton und ein Flussblau. Markenbild ist die Brücke.
   Bewegung, die es auf den anderen Seiten noch nicht gab: Punkte formen beim Scrollen eine Brücke, Schrift mit Steinbild gefüllt,
   Netzdiagramm im Check, gestapelte Referenzkarten mit rollenden Zahlen, Vorher-Nachher-Regler, magnetischer Knopf. */
:root {
  --ink: #0D1B21; --ink2: #16303A; --stone: #ECEEEA; --stone2: #DDE2DD; --paper: #F7F8F5; --river: #2F7D95; --sand: #D9B98A; --sand-d: #8A6A3A; --mut: #52646C; --line: rgba(13, 27, 33, .14);
  --gut: clamp(1.25rem, 4vw, 3rem); --max: 1240px; --hh: 68px;
  --serif: "Didot", "Bodoni MT", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Avenir Next", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
body { font-family: var(--sans); color: var(--ink); background: var(--paper); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { font: 600 .74rem/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--sand-d); }
.lead { font: 400 1.1rem/1.7 var(--sans); color: var(--mut); max-width: 38em; }
.fine { font: 400 .85rem/1.6 var(--sans); color: var(--mut); }

/* ---------- Kopf ---------- */
.hd { position: sticky; top: 0; z-index: 70; background: rgba(13, 27, 33, .88); backdrop-filter: blur(12px); color: #fff; }
.hd-in { display: flex; align-items: center; gap: 1.6rem; height: var(--hh); width: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--sand); text-decoration: none; }
.mark { width: 40px; height: 28px; }
.brand b { font: 600 1.02rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: #D5E0E4; font: 500 .92rem/1 var(--sans); text-decoration: none; }
.nav a:hover { color: var(--sand); }
.nav .nav-cta { padding: 0 1.3rem; border: 1px solid var(--sand); border-radius: 999px; color: var(--sand); }
.nav .nav-cta:hover { background: var(--sand); color: var(--ink); }
.mbtn { display: none; margin-left: auto; width: 48px; height: 48px; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; place-content: center; gap: 7px; }
.mbtn span { display: block; width: 26px; height: 1.8px; background: currentColor; transition: transform .25s; }
.mbtn[aria-expanded="true"] span:nth-child(1) { transform: translateY(4.4px) rotate(45deg); }
.mbtn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4.4px) rotate(-45deg); }
@media (max-width: 900px) {
  .js .mbtn { display: grid; }
  .js .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .12); padding: .4rem var(--gut) 1.2rem; }
  .js .nav.open { display: block; }
  .js .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .js .nav a { width: 100%; min-height: 52px; font-size: 1.05rem; }
  .js .nav .nav-cta { margin-top: 1rem; justify-content: center; }
  .nav ul { flex-wrap: wrap; }
}

/* ---------- Titel: Punkte werden zur Brücke ---------- */
.hero { background: var(--ink); color: #fff; }
.hero-stick { position: relative; min-height: min(86svh, 780px); overflow: hidden; background: radial-gradient(70% 60% at 72% 75%, #1D3E4A, var(--ink) 72%); }
.hero-cv { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.bridge-static { position: absolute; left: 50%; bottom: 5%; width: min(94%, 1000px); transform: translateX(-50%); }
.hero-t { position: relative; z-index: 2; padding-top: clamp(1.8rem, 6vh, 5rem); padding-bottom: clamp(12rem, 24vw, 18rem); }
.hero .eyebrow { color: var(--sand); }
.hero h1 { margin: 1rem 0 1.2rem; max-width: 12em; font-size: clamp(2.5rem, min(6.6vw, 9.6vh), 5.8rem); line-height: 1.02; }
.hero h1 em { font-style: italic; color: var(--sand); }
.hero .lead { color: #C3D0D5; max-width: 30em; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 56px; padding: 0 2rem; border: 0; border-radius: 999px; background: var(--sand); color: var(--ink); font: 600 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .25s; }
.btn:hover { background: #E8CFA7; }
.btn--wide { width: 100%; }
.btn--mag { will-change: transform; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .2s ease-out, background .25s; }
.btn--mag > span { display: inline-block; transform: translate(calc(var(--mx, 0px) * .35), calc(var(--my, 0px) * .35)); transition: transform .2s ease-out; }
.ar { width: 18px; height: 18px; }
.tlink { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font: 500 1rem/1 var(--sans); text-decoration: underline; text-decoration-color: var(--sand); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.tlink:hover { color: var(--sand); }
.hero-cap { position: absolute; left: 0; right: 0; bottom: clamp(.8rem, 3.5vh, 2rem); z-index: 2; display: none; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-inline: auto; }
.hc { font: italic 400 clamp(1.3rem, 2.4vw, 2rem)/1.2 var(--serif); color: var(--sand); transition: opacity .35s; }
.hp { display: flex; gap: 1.4rem; }
.hp li { display: flex; align-items: center; gap: .5rem; font: 600 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #7D929B; transition: color .3s; }
.hp i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; transition: background .3s; }
.hp li.on, .hp li.done { color: #fff; }
.hp li.on i, .hp li.done i { background: var(--sand); border-color: var(--sand); }
.morph .hero { height: calc(100vh + 230vh - 2.2rem); height: calc(100svh + 230svh - 2.2rem); }
.morph .hero-stick { position: sticky; top: var(--hh); min-height: 0; height: calc(100vh - var(--hh) - 2.2rem); height: calc(100svh - var(--hh) - 2.2rem); }
.morph .hero-cv { display: block; }
.morph .bridge-static { display: none; }
.morph .hero-t { padding-bottom: 0; pointer-events: none; }
.morph .hero-t a { pointer-events: auto; }
.morph .hero-cap { display: flex; }
@media (max-width: 700px) { .hp li { font-size: .6rem; } .hp { gap: .8rem; } }

/* ---------- Abschnitte ---------- */
.sec { padding: clamp(4rem, 9vw, 8rem) 0; }
.sec--stone { background: var(--stone); }
.sh { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.6rem); }
.sh h2, .ck-t h2, .hal-t h2, .ct h2 { margin-top: .9rem; font-size: clamp(2.1rem, 4.4vw, 3.6rem); line-height: 1.06; }
.sh .lead { margin-top: 1rem; }
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 3rem); }
.weg { padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.weg h3 { font-size: 2rem; line-height: 1.1; }
.weg p { margin-top: .8rem; font: 400 1rem/1.7 var(--sans); color: var(--mut); }
.weg ul { margin-top: 1.2rem; display: grid; }
.weg li { padding: .6rem 0; border-top: 1px solid var(--line); font: 500 .96rem/1.4 var(--sans); }
@media (max-width: 860px) { .wege { grid-template-columns: 1fr; } }

/* Schrift mit Steinbild */
.knock-s { padding: clamp(3rem, 8vw, 7rem) 0; background: var(--ink); overflow: hidden; }
.knock { margin: 0; font: 700 clamp(4.2rem, 15vw, 13rem)/.92 var(--serif); letter-spacing: -.03em; color: #DAD5C8; background: url("../assets/stone-textur.webp") center / 140% auto; background-position: 50% var(--ky, 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .knock { -webkit-text-fill-color: #DAD5C8; background: none; } }

/* ---------- Check ---------- */
.ck { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.ck-t { grid-column: 1; grid-row: 1; }
.ck-t .lead { margin-top: 1.1rem; }
.ck-s { grid-column: 1; grid-row: 2; margin-top: 2rem; display: grid; gap: 1.1rem; }
.ck-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; }
.ck-r label { grid-column: 1 / -1; display: grid; gap: .1rem; cursor: pointer; }
.ck-r label b { font: 600 1rem/1.3 var(--sans); }
.ck-r label span { font: 400 .86rem/1.4 var(--sans); color: var(--mut); }
.ck-r input { width: 100%; margin: 0; height: 28px; background: none; accent-color: var(--river); cursor: pointer; }
.ck-r output { min-width: 1.6rem; font: 600 1.2rem/1 var(--serif); text-align: right; }
.ck-v { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--hh) + 1.5rem); }
.rsvg { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; overflow: visible; }
.rg { fill: none; stroke: rgba(13, 27, 33, .14); stroke-width: 1; }
.rg:last-of-type { stroke: rgba(13, 27, 33, .3); }
.ax { stroke: rgba(13, 27, 33, .14); stroke-width: 1; }
.rp { fill: url(#rfill); stroke: var(--river); stroke-width: 2.4; stroke-linejoin: round; }
.dt { fill: #fff; stroke: var(--river); stroke-width: 2.5; }
.al { fill: var(--mut); font: 600 14px var(--sans); transition: fill .3s; }
.al.gap { fill: #B65A4A; }
.ck-res { margin-top: 1rem; padding: 1.3rem 1.5rem; border-radius: 18px; background: #fff; box-shadow: 0 20px 50px -34px rgba(13, 27, 33, .5); }
.ck-sc { font: 600 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.ck-sc b { font: 400 1.6rem/1 var(--serif); letter-spacing: 0; color: var(--ink); }
.ck-res h3 { margin: .5rem 0 .4rem; font-size: 1.5rem; }
.ck-res p:not(.ck-sc) { font: 400 .98rem/1.6 var(--sans); color: var(--mut); }
.more { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-top: .6rem; font: 600 .94rem/1 var(--sans); color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--sand); }
.more:hover { color: var(--sand-d); }
.ck-fig { min-width: 0; }
@media (max-width: 900px) {
  .ck { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .ck-t, .ck-s { grid-column: 1; grid-row: auto; }
  .ck-v { display: contents; }
  .ck-t { order: 1; } .ck-fig { order: 2; } .ck-s { order: 3; } .ck-res { order: 4; }
  .ck-fig { grid-column: 1; grid-row: auto; position: sticky; top: var(--hh); z-index: 5; margin-top: 1.4rem; padding: .6rem 0 .4rem; background: var(--stone); }
  .rsvg { width: auto; max-width: 100%; max-height: 34svh; }
  .al { font-size: 20px; }
  .ck-s { margin-top: 1rem; }
  .ck-res { grid-column: 1; margin-top: 1.4rem; }
}

/* ---------- Referenzen: gestapelte Karten ---------- */
.cases { padding: clamp(4rem, 9vw, 8rem) 0 clamp(2rem, 5vw, 4rem); background: var(--ink); color: #fff; }
.sh--d h2 { color: #fff; }
.sh--d .lead { color: #B9C8CE; }
.sh--d .eyebrow { color: var(--sand); }
.stack { position: relative; }
.case { position: sticky; top: calc(var(--hh) + 1.2rem + var(--i) * 1.2rem); margin-bottom: clamp(1.4rem, 4vw, 3rem); transform: scale(var(--sc, 1)); transform-origin: 50% 0; filter: brightness(var(--br, 1)); will-change: transform; }
.case-in { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: center; min-height: min(54svh, 440px); padding: clamp(1.6rem, 3.4vw, 3rem); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .75); background: linear-gradient(135deg, #1A3743, #112A33); }
.case:nth-child(2) .case-in { background: linear-gradient(135deg, #1E3F4B, #14313B); }
.case:nth-child(3) .case-in { background: linear-gradient(135deg, #234753, #17353F); }
.case:nth-child(4) .case-in { background: linear-gradient(135deg, #274D5A, #1B3A45); }
.case-k { font: 600 .74rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.case-t h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; color: #fff; }
.case-t p { margin-top: .8rem; font: 400 1rem/1.65 var(--sans); color: #B9C8CE; }
.case-n > b { display: flex; align-items: baseline; font: 400 clamp(3.4rem, 7vw, 6rem)/1 var(--serif); color: var(--sand); letter-spacing: -.02em; }
.case-n > span { display: block; margin-top: .6rem; font: 400 .92rem/1.4 var(--sans); color: #B9C8CE; }
.odo .op { font-size: .5em; letter-spacing: 0; }
.odo .op:first-child:not(:last-child) { font-size: 1em; margin-right: .05em; }
.od { display: inline-block; height: 1em; overflow: hidden; vertical-align: baseline; }
.od i { display: block; font-style: normal; transform: translateY(calc(var(--n, 0) * -1em)); transition: transform 1.5s cubic-bezier(.2, .7, .2, 1) var(--dl, 0s); }
.od b { display: block; height: 1em; font-weight: inherit; line-height: 1; }
@media (max-width: 900px) { .case-in { grid-template-columns: 1fr; min-height: 0; } .case { top: calc(var(--hh) + .8rem + var(--i) * .8rem); } }

/* ---------- Vorher und Nachher ---------- */
.ba { position: relative; max-width: 940px; margin: 0 auto; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 24px; box-shadow: 0 40px 80px -48px rgba(13, 27, 33, .6); --x: 50%; user-select: none; }
.ba-a, .ba-b { position: absolute; inset: 0; }
.ba-b { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.basvg { display: block; width: 100%; height: 100%; }
.basvg--v { display: none; }
.ba-h { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(13, 27, 33, .15); pointer-events: none; }
.ba-h i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px -6px rgba(13, 27, 33, .6); }
.ba-h i::before, .ba-h i::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.ba-h i::before { left: 12px; transform: rotate(-45deg); }
.ba-h i::after { right: 12px; transform: rotate(135deg); }
.ba-r { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ba:focus-within { outline: 3px solid var(--river); outline-offset: 3px; }
.ba-l { position: absolute; top: 1rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 600 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.ba-l--b { left: 1rem; color: #8A3F31; }
.ba-l--a { right: 1rem; color: #1F5F76; }
.ba-n { max-width: 940px; margin: 1.2rem auto 0; font: 400 .96rem/1.6 var(--sans); color: var(--mut); }
.bb text, .ab text { font: 600 14px var(--sans); fill: #2A2A2A; }
.bb rect { fill: #fff; stroke: #B65A4A; stroke-width: 1.5; }
.ab rect { fill: #fff; stroke: #2F7D95; stroke-width: 1.8; }
.tg circle { fill: #B65A4A; }
.tg text { fill: #fff; font: 700 14px var(--sans); }
.ok circle { fill: #2E8B57; }
.ok path { stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm { font: 500 13px var(--mono); fill: #1F5F76; }
.db rect { fill: #D6E7EC; stroke: #2F7D95; stroke-width: 1.6; }
.db text { font: 600 14px var(--sans); fill: #1F5F76; }
.dl { stroke: #2F7D95; stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
.bm { font: 600 16px var(--sans); fill: #8A3F31; }
.am { font: 600 16px var(--sans); fill: #1F5F76; }
@media (max-width: 600px) { .ba { aspect-ratio: 3 / 4; } .basvg--w { display: none; } .basvg--v { display: block; } }

/* ---------- Haltung und Team ---------- */
.hal { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.hal-f { margin: 0; }
.hal-f img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; }
.prinz { margin-top: 1.8rem; display: grid; gap: 1.3rem; }
.prinz > div { padding-top: 1rem; border-top: 1px solid var(--line); }
.prinz dt { font: 400 1.5rem/1.2 var(--serif); }
.prinz dd { margin: .3rem 0 0; font: 400 1rem/1.6 var(--sans); color: var(--mut); }
.br-h { margin: 2rem 0 .8rem; font: 600 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand-d); }
.br { display: flex; flex-wrap: wrap; gap: .5rem; }
.br li { padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; font: 500 .9rem/1.2 var(--sans); background: #fff; }
@media (max-width: 900px) { .hal { grid-template-columns: 1fr; } }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 3rem); align-items: stretch; }
.pt figure { margin: 0 0 1.2rem; overflow: hidden; border-radius: 20px; }
.pt img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.pt:hover img { transform: scale(1.04); }
.pt h3 { font-size: 1.8rem; }
.pt-r { margin: .2rem 0 .8rem; font: 600 .74rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sand-d); }
.pt p:not(.pt-r) { font: italic 400 1.1rem/1.6 var(--serif); color: var(--mut); }
.pt-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .9rem; min-height: 22rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 20px; color: #fff; overflow: hidden; background: var(--ink) url("../assets/stone-bruecke.webp") 70% center / cover; }
.pt-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 27, 33, .35), rgba(13, 27, 33, .9)); }
.pt-card > * { position: relative; }
.pt-card .eyebrow { color: var(--sand); }
.pt-card h3 { font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.05; }
.pt-card p:not(.eyebrow) { font: 400 1rem/1.65 var(--sans); color: #D5E0E4; }
.pt-card .more { align-self: flex-start; color: #fff; }
.pt-card .more:hover { color: var(--sand); }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pt-card { grid-column: 1 / -1; min-height: 16rem; } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.cta { position: relative; padding: clamp(4rem, 9vw, 8rem) 0; background: var(--ink) url("../assets/stone-bruecke.webp") center / cover; color: #fff; }
.cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 27, 33, .94), rgba(13, 27, 33, .7)); }
.kontakt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ct .eyebrow { color: var(--sand); }
.ct h2 { color: #fff; }
.ct .lead { margin-top: 1.1rem; color: #C3D0D5; }
.kdata { margin-top: 2rem; display: grid; gap: 1.2rem; }
.kdata dt { font: 600 .72rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); }
.kdata dd { margin: .3rem 0 0; font: 400 1.15rem/1.5 var(--sans); }
.kdata a { color: #fff; }
.form { padding: clamp(1.5rem, 3vw, 2.4rem); background: #fff; color: var(--ink); border-radius: 24px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.form label { display: block; margin-bottom: 1.1rem; font: 600 .84rem/1.2 var(--sans); color: var(--mut); }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: .4rem; padding: .85rem 1rem; background: #fff; border: 1px solid rgba(13, 27, 33, .26); border-radius: 12px; color: var(--ink); font: 400 1rem/1.4 var(--sans); }
.form textarea { resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid rgba(47, 125, 149, .35); outline-offset: 1px; border-color: var(--river); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form .fine { margin-top: 1rem; }
#fok h3 { margin-bottom: .6rem; font-size: 1.7rem; }
#fok p { margin-bottom: 1.4rem; color: var(--mut); }
@media (max-width: 900px) { .kontakt { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }
.ft { padding: 2.4rem 0; background: #081216; color: #A9BBC2; }
.ft p { font: 400 .9rem/1.7 var(--sans); }
.ft b { color: #fff; letter-spacing: .2em; text-transform: uppercase; }
.ft a { color: #fff; text-underline-offset: .2em; }
.ft .note { margin-top: .4rem; color: #7D929B; font-size: .82rem; }

/* ---------- Einblenden ---------- */
.rv-on .rv:not(.in) { opacity: 0; transform: translateY(26px); }
.rv-on .rv { transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .rv-on .rv:not(.in) { opacity: 1; transform: none; }
  .pt img, .od i, .btn--mag, .btn--mag > span { transition: none; }
}