/* =====================================================================
   KEYtec / KEYGROUP – Entwurf 2026
   Farben: Tinte (dunkel) + KEYtec-Blau. Schrift: Oswald + Lato.
   ===================================================================== */

:root {
  --tinte: #07131c;
  --tinte-2: #0c1d29;
  --tinte-3: #14293a;
  --blau: #00aeea;
  --blau-hell: #5fd0f5;
  --blau-tief: #0079a8;
  --hell: #eef3f6;
  --weiss: #fff;
  --text: #15232d;
  --text-leise: #56656f;
  --linie: #d8e1e7;
  --auf-dunkel: #e6eff4;
  --auf-dunkel-leise: #9db1bd;
  --linie-dunkel: rgba(255, 255, 255, .12);

  /* Bereichslogos: KEYtec und Keylink gleich groß, Keylink eine Spur kleiner */
  --logo-keytec: clamp(170px, 15vw, 205px);
  --logo-keylink: calc(var(--logo-keytec) * .9);

  --kopf: 76px;
  --rahmen: 1240px;
  --rand: clamp(1.25rem, 4vw, 3rem);
  --radius: 6px;
  --schrift-titel: 'Oswald', 'Arial Narrow', sans-serif;
  --schrift-text: 'Lato', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf) + 64px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--schrift-text); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--schrift-titel); font-weight: 500; line-height: 1.08; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
button { font: inherit; }

.unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprunglink { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: var(--blau); color: var(--tinte); padding: .6rem 1rem; font-weight: 700; }
.sprunglink:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

/* --- Grundgerüst ---------------------------------------------------- */

.rahmen { width: 100%; max-width: calc(var(--rahmen) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sektion { position: relative; padding-block: clamp(4rem, 9vw, 7.5rem); overflow-x: clip; }
.sektion--eng { padding-block: clamp(3rem, 6vw, 5rem); }
.sektion--hell { background: var(--hell); }
.sektion--dunkel { background: var(--tinte); color: var(--auf-dunkel); }

.dachzeile { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-family: var(--schrift-titel); font-size: .8rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--blau-tief); }
.dachzeile::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.sektion--dunkel .dachzeile, .dachzeile--hell { color: var(--blau); }

.titel { font-size: clamp(2rem, 4.4vw, 3.4rem); text-transform: uppercase; }
.titel--mittel { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.titel--klein { font-size: clamp(1.4rem, 2.4vw, 2rem); }

.sektion__kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sektion__kopf .titel { margin: 0; max-width: 24ch; }
.sektion__kopf--mittig { flex-direction: column; align-items: center; text-align: center; }
.sektion__kopf--mittig .dachzeile::before { display: none; }

.textspalte p { color: var(--text-leise); }
.textspalte p:first-of-type { font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--text); }

/* --- Knöpfe und Links --------------------------------------------------- */

.knopf { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border: 1.5px solid var(--blau); border-radius: var(--radius); background: var(--blau); color: var(--tinte); font-family: var(--schrift-titel); font-size: .92rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.knopf:hover { background: var(--blau-hell); border-color: var(--blau-hell); }
.knopf .icon { transition: transform .3s var(--ease); flex: none; }
.knopf:hover .icon { transform: translateX(4px); }
.knopf--rand { background: transparent; color: inherit; border-color: currentColor; }
.knopf--rand:hover { background: transparent; color: var(--blau); border-color: var(--blau); }
.knopf--klein { padding: .6rem 1.05rem; font-size: .82rem; }

.textlink { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--schrift-titel); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--blau-tief); }
.textlink .icon { transition: transform .3s var(--ease); }
.textlink:hover .icon, a:hover > .textlink .icon { transform: translateX(4px); }

/* --- Kopf ------------------------------------------------------------------- */

.kopf { --logo-b: clamp(140px, 13vw, 176px); --partner-b: clamp(78px, 7vw, 104px); position: fixed; inset: 0 0 auto; z-index: 50; height: var(--kopf); color: #fff; transition: background .35s, box-shadow .35s; }
.kopf--fest { background: rgba(7, 19, 28, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linie-dunkel); }
.kopf__innen { display: flex; align-items: center; gap: 2rem; height: 100%; max-width: calc(1440px + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.kopf__logo { flex: none; }
.kopf__logo img { width: var(--logo-b); height: auto; }
/* HOGAST-Partnerlogo neben dem Wortbild, eingefärbt in #c7f2ca.
   Beide Logos sind senkrecht mittig gesetzt, das Partnerlogo ist aber höher (Zeile
   „Partner“). Der Aufschlag oben schiebt es so weit nach unten, dass die Oberkanten
   auf einer Linie liegen: bei zentrierter Ausrichtung zählt der Rand nur zur Hälfte,
   deshalb die volle Höhendifferenz. Faktoren = Seitenverhältnis der beiden Dateien. */
.kopf__partner { flex: none; display: flex; align-items: flex-start;
  margin-top: calc(.2713 * var(--partner-b) - .1023 * var(--logo-b)); }
.kopf__partner img { width: var(--partner-b); height: auto; }
/* Bayernsicherheit-Logo ist zweizeilig und dadurch höher als das KEYGROUP-Wortbild */
.bayern .kopf { --logo-b: clamp(92px, 9vw, 116px); }
.bayern .kopf__partner { margin-top: 0; align-items: center; }
.bayern .fuss__logo img { width: clamp(130px, 14vw, 160px); }
.navi { display: flex; align-items: center; gap: 2.25rem; margin-left: auto; }
.navi ul { display: flex; gap: 1.9rem; margin: 0; padding: 0; list-style: none; }
.navi a:not(.knopf) { position: relative; display: block; padding-block: .4rem; font-family: var(--schrift-titel); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.navi a:not(.knopf)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blau); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.navi a:not(.knopf):hover::after, .navi a[aria-current]::after { transform: scaleX(1); }
.kopf__tel, .kopf__burger { display: none; }

/* --- Startbild / Seitenköpfe --------------------------------------------------- */

.held { position: relative; display: flex; align-items: center; min-height: 100svh; overflow: clip; background: var(--tinte); color: #fff; isolation: isolate; }
.held__grund { position: absolute; inset: -12% 0 0; z-index: -2; opacity: .32; }
/* Bayerische Wecken tragen weniger Kontrast als die Blaupause – etwas kräftiger zeigen */
.bayern .held__grund { opacity: .95; }
/* Verlauf über dem Startbild etwas zurücknehmen, damit die Rauten sichtbar bleiben */
.bayern .held::before { background: linear-gradient(100deg, var(--tinte) 16%, rgba(7, 19, 28, .55) 48%, rgba(7, 19, 28, 0) 88%), linear-gradient(0deg, var(--tinte), transparent 30%); }
.held__grund img { width: 100%; height: 100%; object-fit: cover; }
.held::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, var(--tinte) 22%, rgba(7, 19, 28, .7) 58%, rgba(7, 19, 28, .3)), linear-gradient(0deg, var(--tinte), transparent 40%); }
.held__innen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 2rem; min-height: 100svh; padding-block: calc(var(--kopf) + 3rem) 5rem; }
.held__text { position: relative; z-index: 2; }
.held__titel { margin: 0 0 1.5rem; font-size: clamp(2.9rem, 7vw, 6.2rem); font-weight: 600; line-height: .98; text-transform: uppercase; }
.held__lead { max-width: 42ch; margin-bottom: 2.25rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--auf-dunkel); }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: 1rem; }
.held__marke { margin-bottom: 1.75rem; }
.held__marke, .bereich-panel__logo, .keylink-band__logo { width: var(--logo-keytec); height: auto; }
:is(.held__marke, .bereich-panel__logo, .keylink-band__logo).logo--keylink { width: var(--logo-keylink); }
.held__einstieg { flex-wrap: wrap; gap: .4rem .7rem; }
.held__einstieg a { color: var(--auf-dunkel-leise); text-decoration: none; text-underline-offset: .45em; transition: color .4s; }
.held__einstieg a.ist-aktiv { color: var(--blau); }
.held__einstieg a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--blau); }
.held__einstieg span { color: var(--auf-dunkel-leise); }

.wechsel { display: grid; color: var(--blau); }
.wechsel__wort { grid-area: 1 / 1; opacity: 0; transform: translateY(.3em); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.wechsel__wort.ist-aktiv { opacity: 1; transform: none; }
.wechsel__wort.ist-weg { opacity: 0; transform: translateY(-.3em); }

.held__titel--gestapelt .held__wort { display: block; animation: wort-rein .9s calc(.15s + var(--i) * .12s) var(--ease) both; }
.held__titel--gestapelt .held__wort:last-child { color: var(--blau); }
@keyframes wort-rein { from { opacity: 0; transform: translateX(-.4em); } to { opacity: 1; transform: none; } }

.held__scroll { position: absolute; left: 50%; bottom: 1.5rem; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; border: 1px solid var(--linie-dunkel); border-radius: 50%; color: #fff; animation: wippen 2.4s ease-in-out infinite; }
@keyframes wippen { 50% { transform: translateY(6px); } }

.brotkrumen { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; font-family: var(--schrift-titel); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--auf-dunkel-leise); }
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { color: var(--blau); }
.brotkrumen [aria-current] { color: #fff; }

/* Szene: Hand hält Karte an den Leser */
.held__szene { position: relative; align-self: stretch; min-height: 520px; }
.held__szene--karte .held__leser { position: absolute; left: 6%; top: 50%; width: 30%; transform: translateY(-50%); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.held__szene--karte .held__hand { position: absolute; left: 19%; top: 50%; width: 100%; max-width: none; transform: translateY(-76%); filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); animation: hand-rein 1.8s .3s var(--ease) both; }
@keyframes hand-rein { from { opacity: 0; translate: 22% -14%; } to { opacity: 1; translate: 0 0; } }
/* Neigungs-Parallax: main.js setzt --mx / --my (-1 … 1) am .held */
.held__ebene { position: absolute; inset: 0; transform: translate3d(calc(var(--mx, 0) * var(--weg-x)), calc(var(--my, 0) * var(--weg-y)), 0); }
.held__ebene--leser { --weg-x: -12px; --weg-y: -8px; }
.held__ebene--hand { --weg-x: 56px; --weg-y: 34px; rotate: calc(var(--mx, 0) * 2deg); transform-origin: 100% 0; }   /* dreht aus der Schulter */
.held:has([data-neigung]) .held__grund img { transform: translate3d(calc(var(--mx, 0) * -20px), calc(var(--my, 0) * -14px), 0) scale(1.06); }
.held__puls { position: absolute; left: 21%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid var(--blau); opacity: 0; animation: puls 2.4s 2s ease-out infinite; }
@keyframes puls { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

.held__szene--team .held__team { position: absolute; right: -14%; bottom: 0; width: 125%; max-width: none; -webkit-mask-image: linear-gradient(to top, transparent, #000 30%); mask-image: linear-gradient(to top, transparent, #000 30%); }

/* IT-Technik: gezeichnetes Datenbild (assets/js/datenbild.js). Auf dem Desktop füllt es die
   rechten zwei Drittel des Seitenkopfs und läuft nach links in den Hintergrund aus. */
.datenbild { display: block; width: 100%; height: 100%; }
.held__szene--daten { position: static; }
.held__szene--daten .datenbild { position: absolute; top: 0; right: 0; z-index: 0; width: 70%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.bereich-panel__bild--daten .datenbild { position: absolute; inset: 0; }

.held__szene--sucher { display: grid; place-items: center; }
.sucher { position: relative; width: min(100%, 520px); aspect-ratio: 1; padding: 22px; transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 7px), 0); }

/* "Live-Video": Das Bild ist vergrößert und schwenkt/zoomt langsam wie eine Überwachungskamera.
   Schwenk und Zoom laufen über die Einzel-Eigenschaften translate/scale, die Maus-Parallax über
   transform – so überlagern sich die drei Bewegungen, ohne sich zu überschreiben. */
.sucher__bild { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px; isolation: isolate; background: var(--tinte-2); }
.sucher__bild img { width: 100%; height: 100%; object-fit: cover; scale: 1.28; transform: translate3d(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -11px), 0); animation: kamera-schwenk 26s ease-in-out infinite alternate, kamera-zoom 37s ease-in-out infinite alternate; will-change: translate, scale; }
@keyframes kamera-schwenk { 0% { translate: -6% 1%; } 45% { translate: 3% -1.5%; } 100% { translate: 6% 1.5%; } }
@keyframes kamera-zoom { from { scale: 1.26; } to { scale: 1.38; } }
/* Bildzeilen: ein 3px-Muster, das um genau eine Periode durchläuft (nur transform, kein Neuzeichnen) */
.sucher__bild::after { content: ""; position: absolute; inset: -3px 0 0; z-index: 1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); pointer-events: none; animation: bildzeilen .45s linear infinite; }
@keyframes bildzeilen { to { transform: translateY(3px); } }
/* leichtes Flackern und Randabdunklung */
.sucher__bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 55%, rgba(4, 11, 17, .55)); pointer-events: none; animation: flackern 4.5s steps(1) infinite; }
@keyframes flackern { 0%, 100% { opacity: 1; } 31% { opacity: .82; } 32% { opacity: 1; } 67% { opacity: .9; } 68% { opacity: 1; } }
.sucher::before { content: ""; position: absolute; inset: 0; border: 2px solid var(--blau); -webkit-mask: linear-gradient(#000 0 0) top left / 48px 48px no-repeat, linear-gradient(#000 0 0) top right / 48px 48px no-repeat, linear-gradient(#000 0 0) bottom left / 48px 48px no-repeat, linear-gradient(#000 0 0) bottom right / 48px 48px no-repeat; mask: linear-gradient(#000 0 0) top left / 48px 48px no-repeat, linear-gradient(#000 0 0) top right / 48px 48px no-repeat, linear-gradient(#000 0 0) bottom left / 48px 48px no-repeat, linear-gradient(#000 0 0) bottom right / 48px 48px no-repeat; }
.sucher__rec, .sucher__zeit { position: absolute; top: 40px; font-family: var(--schrift-titel); font-size: .8rem; letter-spacing: .16em; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.sucher__rec { left: 42px; display: flex; align-items: center; gap: .5rem; }
.sucher__rec::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; animation: blinken 1.2s steps(1) infinite; }
.sucher__zeit { right: 42px; font-variant-numeric: tabular-nums; }
@keyframes blinken { 50% { opacity: 0; } }

.held__szene--fasern { display: grid; place-items: center; }
.fasern { width: 115%; max-width: none; height: auto; }
.fasern__grund { stroke: rgba(0, 174, 234, .35); stroke-width: 2.5; }
.fasern__licht { stroke: var(--blau-hell); stroke-width: 3.5; filter: drop-shadow(0 0 6px var(--blau)); stroke-dasharray: 40 460; stroke-dashoffset: 500; animation: licht 3.2s calc(var(--i) * -.4s) linear infinite; }
@keyframes licht { to { stroke-dashoffset: 0; } }
.fasern__punkt { fill: var(--blau); }
.fasern__ring { fill: none; stroke: var(--blau); stroke-width: 1.5; transform-origin: 400px 300px; animation: ring 2.4s ease-out infinite; }
@keyframes ring { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(2.2); } }

.held--bereich, .held--bereich .held__innen { min-height: min(92svh, 900px); }
.held--klein, .held--klein .held__innen { min-height: 0; }
.held--klein .held__innen { display: block; padding-block: calc(var(--kopf) + 4rem) 4.5rem; }
.held--klein .held__titel { font-size: clamp(2.6rem, 6vw, 5rem); }

.held--referenz { align-items: flex-end; min-height: 88svh; }
.held--referenz::before { background: linear-gradient(0deg, rgba(7, 19, 28, .96) 8%, rgba(7, 19, 28, .25) 60%, rgba(7, 19, 28, .5)); }
.held__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.held--referenz .held__innen { display: block; min-height: 0; padding-block: calc(var(--kopf) + 4rem) 3.5rem; }
.held--referenz .held__titel { font-size: clamp(3rem, 8vw, 7rem); margin-bottom: .75rem; }

/* --- Unternavigation ----------------------------------------------------- */

/* bewusst ohne backdrop-filter: eine klebende, weichgezeichnete Leiste über Bildern
   kostet (v. a. in Safari) bei jedem Scroll-Frame einen Neuaufbau */
.unternavi { position: sticky; top: var(--kopf); z-index: 40; background: rgba(255, 255, 255, .98); border-bottom: 1px solid var(--linie); }
.unternavi ul { display: flex; gap: 2.25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.unternavi ul::-webkit-scrollbar { display: none; }
/* seitlich scrollende Leisten (Unternavigation, Reiter): Kante blendet aus, solange dort noch
   Einträge liegen – --links/--rechts setzt main.js je nach Scrollstand, sonst 0 = keine Maske */
.kantenblende { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--links, 0px), #000 calc(100% - var(--rechts, 0px)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--links, 0px), #000 calc(100% - var(--rechts, 0px)), transparent); }
.unternavi a { display: block; margin-bottom: -1px; padding: 1.1rem 0; border-bottom: 2px solid transparent; font-family: var(--schrift-titel); font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--text-leise); transition: color .2s, border-color .2s; }
.unternavi a:hover { color: var(--text); }
.unternavi a[aria-current="true"] { color: var(--text); border-color: var(--blau); }

/* --- Bereiche (Startseite, gestapelte Panels) ------------------------------- */

.bereiche__reiter { display: flex; gap: .5rem 2.75rem; margin-bottom: 2rem; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.bereiche__reiter::-webkit-scrollbar { display: none; }
.bereiche__reiterknopf { position: relative; display: flex; align-items: baseline; gap: .6rem; flex: none; padding: 0 0 1rem; border: 0; background: none; font-family: var(--schrift-titel); font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--text-leise); cursor: pointer; transition: color .3s; }
.bereiche__reiterknopf span { font-size: .75rem; letter-spacing: .16em; color: var(--blau-tief); }
.bereiche__reiterknopf::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blau); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.bereiche__reiterknopf:hover, .bereiche__reiterknopf[aria-current="true"] { color: var(--text); }
.bereiche__reiterknopf[aria-current="true"]::after { transform: scaleX(1); }

/* Nachbar-Slides ausgeblendet. Unten Innenabstand, damit der Kartenschatten
   nicht vom overflow abgeschnitten wird; der negative Rand gleicht ihn aus. */
.bereiche__swiper { padding-bottom: 60px; margin-bottom: -60px; }
.bereiche__swiper .swiper-slide { height: auto; }
/* Vor dem Start von Swiper liegen alle Slides in derselben Rasterzelle – die Sektion
   hat damit schon ihre endgültige Höhe und nichts springt beim Laden. Ohne JS untereinander. */
html:not(.js) .bereiche__swiper .swiper-wrapper { flex-direction: column; gap: 2rem; }
.js .bereiche__swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; }
.js .bereiche__swiper:not(.swiper-initialized) .swiper-slide { grid-area: 1 / 1; }
.js .bereiche__swiper:not(.swiper-initialized) .swiper-slide + .swiper-slide { visibility: hidden; }
.bereich-panel { display: grid; grid-template-columns: 1fr 1fr; min-height: min(620px, 76vh); overflow: hidden; background: var(--weiss); border-radius: 14px; box-shadow: 0 30px 60px -34px rgba(7, 19, 28, .4); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.swiper-initialized .bereich-panel:not(.swiper-slide-active) { opacity: 0; transform: scale(.97); }
.bereich-panel__bild { position: relative; overflow: hidden; background: var(--tinte-2); }
.bereich-panel__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.bereich-panel__bild--freisteller { background: linear-gradient(160deg, var(--blau), var(--blau-tief)); }
.bereich-panel__bild--freisteller img { object-fit: contain; object-position: bottom center; top: 12%; }
.bereich-panel:hover .bereich-panel__bild img { transform: scale(1.04); }
.bereich-panel__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2rem, 5vw, 4.25rem); }
.bereich-panel__nr { margin-bottom: 1.75rem; font-family: var(--schrift-titel); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blau-tief); }
.bereich-panel__nr span { color: var(--text-leise); }
.bereich-panel__logo { margin-bottom: 1.25rem; }
.bereich-panel__name { margin-bottom: .15em; font-size: clamp(2.2rem, 4vw, 3.4rem); text-transform: uppercase; }
.bereich-panel__claim { margin-bottom: 1.25rem; font-family: var(--schrift-titel); font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blau-tief); }
.bereich-panel__kurz { max-width: 44ch; color: var(--text-leise); }
.schlagworte { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 2rem; padding: 0; list-style: none; }
.schlagworte li { padding: .3rem .8rem; border: 1px solid var(--linie); border-radius: 99px; font-size: .85rem; color: var(--text-leise); }


/* --- Keylink-Band --------------------------------------------------------- */

.keylink-band { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 5.5rem); background: var(--tinte-2); color: var(--auf-dunkel); isolation: isolate; }
.keylink-band .fasern { position: absolute; right: -10%; top: 50%; z-index: -1; width: min(900px, 90%); transform: translateY(-50%); opacity: .55; }
.keylink-band__innen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.keylink-band .dachzeile { color: var(--blau); margin-bottom: .5rem; }
.keylink-band__text { max-width: 46ch; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.keylink-band .knopf { color: #fff; }

/* --- USP-Karten ---------------------------------------------------------------- */

.usp-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.usp { position: relative; padding: clamp(1.6rem, 3vw, 2.25rem); background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; transition: border-color .3s, box-shadow .4s; }
.usp::before { content: ""; position: absolute; left: clamp(1.6rem, 3vw, 2.25rem); top: -1px; width: 44px; height: 3px; background: var(--blau); }
.usp:hover { border-color: rgba(0, 174, 234, .6); box-shadow: 0 26px 44px -30px rgba(0, 121, 168, .5); }
.usp h3 { margin-bottom: .8rem; font-size: 1.45rem; text-transform: uppercase; }
.usp p { color: var(--text-leise); }
.usp__punkte { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.usp__punkte li { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; font-weight: 700; }
.usp__punkte .icon { flex: none; margin-top: .25rem; color: var(--blau); }
.usp__punkte--gross li { font-size: 1.05rem; }
.sektion--hell .usp { border-color: transparent; }
.usp-raster > :nth-child(2) { transition-delay: .08s; }
.usp-raster > :nth-child(3) { transition-delay: .16s; }
.usp-raster > :nth-child(4) { transition-delay: .24s; }

/* --- Zahlen ----------------------------------------------------------------------- */

.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; }
.zahlen--abstand { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.zahl__wert { display: block; font-family: var(--schrift-titel); font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 500; line-height: 1; color: var(--blau-tief); font-variant-numeric: tabular-nums; }
.zahl__wert small { margin-left: .08em; font-size: .45em; }
/* lange Beschriftungen wie „Sicherheitskomponenten“ umbrechen statt in die Nachbarspalte laufen */
.zahl__label { display: block; margin-top: .55rem; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); hyphens: auto; overflow-wrap: anywhere; }
.zahlen--dunkel .zahl__wert { color: var(--blau); }
.zahlen--dunkel .zahl__label { color: var(--auf-dunkel-leise); }

/* --- Tabs ------------------------------------------------------------------------ */

.tabs__leiste { display: flex; flex-wrap: wrap; gap: .35rem; width: fit-content; max-width: 100%; margin-bottom: 2rem; padding: .35rem; background: var(--weiss); border-radius: 99px; }
.tabs__reiter { padding: .7rem 1.35rem; border: 0; border-radius: 99px; background: transparent; font-family: var(--schrift-titel); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); cursor: pointer; transition: background .25s, color .25s; }
.tabs__reiter:hover { color: var(--text); }
.tabs__reiter[aria-selected="true"] { background: var(--tinte); color: #fff; }
.tabs__intro { max-width: 60ch; margin-bottom: 2rem; font-size: 1.15rem; }
/* bis das Skript die Reiter übernimmt, nur das erste Panel zeigen (sonst springt die Höhe) */
.js [data-tabs]:not(.tabs--bereit) .tabs__panel ~ .tabs__panel { display: none; }

/* --- Überblick / Identmedien --------------------------------------------------- */

.ueberblick__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.ueberblick__raster > :first-child { position: sticky; top: calc(var(--kopf) + 90px); }
.identmedien__raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.identmedien p { max-width: 54ch; color: var(--text-leise); }
/* Rasterspalten dürfen schrumpfen – sonst zieht die Mindestbreite der Karten-Beschriftungen
   ("SCHLÜSSELANHÄNGER" mit Sperrung) am Handy den ganzen Abschnitt über den Bildschirmrand */
.identmedien__raster > *, .medien-kachel { min-width: 0; }
.medien-kachel span { max-width: 100%; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.medien-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.medien-kachel { display: grid; place-items: center; align-content: center; gap: .9rem; aspect-ratio: 3 / 4; padding: 1.25rem; background: var(--hell); border-radius: 12px; font-family: var(--schrift-titel); font-size: .78rem; letter-spacing: .1em; text-align: center; text-transform: uppercase; color: var(--text-leise); }
/* Scroll-Parallax: main.js setzt --p (-1 … 1, 0 = Gruppe mittig im Fenster) am Container.
   --tempo = Weg in px über den ganzen Durchlauf, negativ = gegenläufig. */
.medien-kachel { --versatz: 0rem; --tempo: 0; transform: translate3d(0, calc(var(--versatz) + var(--p, 0) * var(--tempo) * 1px), 0); }
.medien-kachel:nth-child(1) { --tempo: 60; }
.medien-kachel:nth-child(2) { --versatz: 1.5rem; --tempo: -40; }
.medien-kachel:nth-child(3) { --tempo: 110; }
.medien-kachel img { width: 62%; }

/* --- Referenzen -------------------------------------------------------------------- */

.ref-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.ref-karte { display: flex; flex-direction: column; overflow: hidden; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px; text-decoration: none; transition: box-shadow .4s, border-color .3s; }
.ref-karte:hover { border-color: rgba(0, 174, 234, .6); box-shadow: 0 30px 50px -36px rgba(7, 19, 28, .5); }
.ref-karte__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--tinte-2); }
.ref-karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.ref-karte:hover .ref-karte__bild img { transform: scale(1.05); }
.ref-karte__text { padding: 1.75rem clamp(1.5rem, 2.5vw, 2rem) 2rem; }
.ref-karte__meta { margin-bottom: .6rem; font-family: var(--schrift-titel); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blau-tief); }
.ref-karte h3 { margin-bottom: .35rem; font-size: 1.9rem; text-transform: uppercase; }
.ref-karte p:not(.ref-karte__meta) { color: var(--text-leise); }

.ref-highlight { position: relative; overflow: clip; color: #fff; background: var(--tinte); isolation: isolate; }
/* Alle Slides gleich hoch (Swipers height:100% greift hier nicht). Der Text füllt die
   Slidehöhe, die Knöpfe hängen unten – so stehen sie bei jeder Referenz an derselben Stelle. */
.ref-highlight__slide { position: relative; height: auto; align-self: stretch; display: flex; padding-block: clamp(5rem, 12vw, 9rem); overflow: clip; isolation: isolate; }
.ref-highlight__slide > .rahmen { display: flex; width: 100%; }
.ref-highlight__text { display: flex; flex-direction: column; }
.ref-highlight__text .held__knoepfe { margin-top: auto; }
.ref-highlight__bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ref-highlight__slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 19, 28, .94) 28%, rgba(7, 19, 28, .35)); }
/* vor der Swiper-Initialisierung stapeln, damit die Höhe von Anfang an steht */
.js .ref-highlight__swiper:not(.swiper-initialized) .swiper-wrapper { display: grid; }
.js .ref-highlight__swiper:not(.swiper-initialized) .swiper-slide { grid-area: 1 / 1; }
.js .ref-highlight__swiper:not(.swiper-initialized) .swiper-slide + .swiper-slide { visibility: hidden; }
.ref-highlight__text { max-width: 640px; }
.ref-highlight__lead { font-size: 1.25rem; color: var(--auf-dunkel); }
/* Kennzahlen im Highlight immer in einer Reihe – egal wie viele und wie lang die Beschriftung */
.ref-highlight .zahlen { margin-block: 2rem 2.5rem; padding-block: 1.75rem; border-block: 1px solid var(--linie-dunkel); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 700px) {
  .ref-highlight .zahl__wert { font-size: clamp(1.9rem, 8vw, 2.8rem); }
  .ref-highlight .zahl__label { font-size: .68rem; letter-spacing: .06em; }
}

.fakten { padding-block: 2.5rem; background: var(--tinte); color: var(--auf-dunkel); border-top: 1px solid var(--linie-dunkel); }
.fakten__raster { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem 3rem; align-items: center; }
.fakten dl { display: grid; grid-template-columns: repeat(3, auto); gap: 1.5rem; margin: 0; }
.fakten dt { font-family: var(--schrift-titel); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blau); }
.fakten dd { margin: .3rem 0 0; font-weight: 700; }

.projekt__raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.projekt__raster--allein { grid-template-columns: minmax(0, 760px); }
.projekt__stimme { position: sticky; top: calc(var(--kopf) + 2rem); }

.galerie__swiper { overflow: visible; }
.galerie .swiper-slide { width: auto; }
.galerie .swiper-slide img { width: auto; height: clamp(260px, 40vw, 520px); border-radius: var(--radius); object-fit: cover; }

.keyfacts-raster { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.keyfacts { border-top: 1px solid var(--linie); }
.keyfact { border-bottom: 1px solid var(--linie); }
.keyfact summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.4rem 0; font-family: var(--schrift-titel); font-size: clamp(1.2rem, 2vw, 1.55rem); text-transform: uppercase; list-style: none; cursor: pointer; }
.keyfact summary::-webkit-details-marker { display: none; }
.keyfact summary:hover { color: var(--blau-tief); }
.keyfact summary .icon { flex: none; color: var(--blau); transition: transform .35s var(--ease); }
.keyfact[open] summary .icon { transform: rotate(180deg); }
.keyfact__text { max-width: 68ch; padding-bottom: 1.5rem; color: var(--text-leise); }

/* --- Rechtstexte (Impressum, Datenschutz) ------------------------------------------------ */

.rechtstext__inhalt { max-width: 820px; }
.rechtstext__block { padding-block: 2rem; border-top: 1px solid var(--linie); }
.rechtstext__block:first-child { padding-top: 0; border-top: 0; }
.rechtstext h2 { margin-bottom: 1rem; font-size: clamp(1.3rem, 2vw, 1.6rem); text-transform: uppercase; }
.rechtstext p, .rechtstext li { color: var(--text-leise); }
.rechtstext strong { color: var(--text); }
.rechtstext a { color: var(--blau-tief); }
.rechtstext ul { margin: 0; padding-left: 1.2rem; }
.rechtstext__liste { display: grid; gap: .7rem; margin: 0; }
.rechtstext__liste > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem; }
.rechtstext__liste dt { padding-top: .2rem; font-family: var(--schrift-titel); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-leise); }
.rechtstext__liste dd { margin: 0; }
.rechtstext__stand { margin-top: 1rem; font-size: .9rem; }
@media (max-width: 699px) { .rechtstext__liste > div { grid-template-columns: 1fr; gap: .1rem; } }

/* --- Kundenstimmen ------------------------------------------------------------------ */

.stimmen .swiper-slide { height: auto; }
/* Breiten wie in den Swiper-Breakpoints, damit vor dem Start dieselbe Kartenhöhe entsteht */
.js .stimmen__swiper:not(.swiper-initialized) .swiper-slide { width: calc(100% / 1.08); margin-right: 16px; }
@media (min-width: 700px) { .js .stimmen__swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 24px) / 2); margin-right: 24px; } }
@media (min-width: 1100px) { .js .stimmen__swiper:not(.swiper-initialized) .swiper-slide { width: calc((100% - 56px) / 3); margin-right: 28px; } }
.stimme { display: flex; flex-direction: column; height: 100%; margin: 0; padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--weiss); border-radius: 12px; }
.stimme__zeichen { margin-bottom: 1rem; color: var(--blau); }
.stimme__text { position: relative; max-height: calc(1.65em * 8 + 1em); margin: 0 0 .75rem; overflow: hidden; }
.stimme__text p { margin: 0 0 .6em; }
.stimme:not(.ist-offen) .stimme__text { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.stimme.ist-offen .stimme__text { max-height: none; }
/* versteckt, aber mit reserviertem Platz – sonst wachsen die Karten, sobald das Skript den Knopf zeigt */
.stimme__mehr[hidden] { display: block; visibility: hidden; }
.stimme__mehr { align-self: flex-start; margin-bottom: 1rem; padding: 0; border: 0; background: none; font-family: var(--schrift-titel); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blau-tief); cursor: pointer; }
.stimme__person { display: flex; align-items: center; gap: 1rem; margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.stimme__bild, .stimme__kuerzel { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.stimme__kuerzel { display: grid; place-items: center; background: var(--tinte); color: var(--blau); font-family: var(--schrift-titel); font-size: 1.05rem; letter-spacing: .06em; }
.stimme__person strong { display: block; font-family: var(--schrift-titel); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.stimme__person > span > span { display: block; font-size: .9rem; color: var(--text-leise); }
.stimme__web { display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem; font-size: .85rem; text-decoration: none; color: var(--blau-tief); }
.stimme__web:hover { text-decoration: underline; }
.stimme--gross { background: var(--hell); }
.stimme--gross .stimme__text { max-height: none; font-size: 1.15rem; -webkit-mask-image: none; mask-image: none; }

.slider-knoepfe { display: flex; gap: .6rem; }
.slider-knopf { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 1px solid var(--linie); border-radius: 50%; background: var(--weiss); color: var(--text); cursor: pointer; transition: background .25s, color .25s, border-color .25s, opacity .25s; }
.slider-knopf:hover { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.slider-knopf.swiper-button-disabled { opacity: .35; pointer-events: none; }
.stimmen .swiper-pagination { position: relative; min-height: 28px; margin-top: 2.25rem; }
.swiper-pagination-bullet { width: 8px; height: 8px; background: var(--text-leise); opacity: .35; transition: width .3s var(--ease), opacity .3s; }
.swiper-pagination-bullet-active { width: 28px; border-radius: 4px; background: var(--blau); opacity: 1; }

/* --- Partner -------------------------------------------------------------------------- */

.partner-sektion .sektion__kopf { margin-bottom: 2rem; }
.partner { display: block; flex: none; }
.partner img { width: 170px; height: 56px; object-fit: contain; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter .3s, opacity .3s; }
.partner:hover img { filter: none; opacity: 1; }
.partnerreihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3.5rem; }
.laufband { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.laufband__spur { display: flex; align-items: center; width: max-content; padding-block: 1rem; }
.laufband__spur > * { margin-right: clamp(2.5rem, 5vw, 5rem); }
.laufband.laeuft .laufband__spur { animation: laufband 36s linear infinite; }
.laufband:hover .laufband__spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(-50%); } }
html:not(.js) .laufband__spur { flex-wrap: wrap; justify-content: center; width: auto; }

/* --- Kontakt ------------------------------------------------------------------------------ */

.kontakt { overflow: clip; background: radial-gradient(1200px 500px at 90% 0%, rgba(0, 174, 234, .12), transparent 60%), var(--tinte); }
.kontakt__smiley { position: absolute; right: -7%; bottom: -14%; width: min(48vw, 580px); height: auto; color: rgba(255, 255, 255, .04); transform: rotate(-12deg); pointer-events: none; }
.kontakt__raster { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.kontakt__lead { max-width: 44ch; font-size: 1.15rem; color: var(--auf-dunkel-leise); }
.kontakt__wege { display: grid; margin: 2rem 0; padding: 0; list-style: none; }
.kontakt__wege a { display: flex; align-items: center; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 1.15rem; text-decoration: none; transition: color .2s; }
.kontakt__wege a:hover { color: var(--blau); }
.kontakt__wege .icon, .kontakt__zeiten .icon { flex: none; color: var(--blau); }
.kontakt__zeiten { display: flex; gap: 1rem; color: var(--auf-dunkel-leise); }
.kontakt__zeiten ul { margin: 0; padding: 0; list-style: none; }
.kontakt__zeiten li { display: flex; justify-content: space-between; gap: 2rem; min-width: 300px; }

.formular { display: grid; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--tinte-2); border: 1px solid var(--linie-dunkel); border-radius: 14px; }
.formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.feld label { display: block; margin-bottom: .4rem; font-family: var(--schrift-titel); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--auf-dunkel-leise); }
.feld input, .feld select, .feld textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--linie-dunkel); border-radius: var(--radius); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; transition: border-color .2s, background .2s; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--blau); background: rgba(0, 174, 234, .07); }
.feld select option { color: var(--text); }
.feld textarea { min-height: 130px; resize: vertical; }
.formular__zustimmung { display: flex; align-items: flex-start; gap: .75rem; font-size: .9rem; color: var(--auf-dunkel-leise); }
.formular__zustimmung input { flex: none; width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--blau); }
.formular .knopf { justify-self: start; }
.formular__hinweis { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: .9rem; color: var(--blau); }
.formular__hinweis[hidden] { display: none; }
.formular__hinweis--fehler { color: #ff9a7a; }
.formular__zustimmung a { color: var(--blau-hell); }
.feld [aria-invalid="true"], .formular__zustimmung [aria-invalid="true"] { border-color: #ff9a7a; outline: 1px solid #ff9a7a; outline-offset: 1px; }
/* Instagram-Beiträge – Bilder liegen auf unserem Server, kein Einbettungsskript */
.ig-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); margin-top: 2.5rem; }
.ig-kachel { position: relative; display: block; aspect-ratio: 1; overflow: clip; border-radius: 10px; background: var(--tinte-3); text-decoration: none; }
.ig-kachel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ig-kachel:hover img, .ig-kachel:focus-visible img { transform: scale(1.06); }
.ig-kachel__text, .ig-kachel__datum { position: absolute; left: 0; right: 0; padding: 1rem; color: #fff; font-size: .9rem; line-height: 1.4; }
.ig-kachel__text { bottom: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; background: linear-gradient(transparent, rgba(7, 19, 28, .92) 45%); opacity: 0; transition: opacity .3s var(--ease); }
.ig-kachel__datum { top: 0; font-family: var(--schrift-titel); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(7, 19, 28, .6); }
.ig-kachel:hover .ig-kachel__text, .ig-kachel:focus-visible .ig-kachel__text { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ig-kachel img { transition: none; } }

.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Wechsel Formular ↔ Dankeskarte – [hidden] muss display:grid/flex überstimmen */
.formular[hidden], .formular-fertig[hidden] { display: none; }
.formular, .formular-fertig { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.formular.ist-aus, .formular-fertig.ist-aus { opacity: 0; transform: translateY(10px); pointer-events: none; }
.formular-fertig { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: clamp(2rem, 4vw, 3rem); background: var(--tinte-2); border: 1px solid var(--linie-dunkel); border-radius: 14px; color: var(--auf-dunkel); }
.formular-fertig h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); color: #fff; }
.formular-fertig p { margin: 0; max-width: 46ch; }
.formular-fertig__smiley { width: 58px; height: 58px; color: var(--blau); }
@media (prefers-reduced-motion: reduce) { .formular, .formular-fertig { transition: none; } }
.formular { position: relative; }
.formular.sendet .knopf { opacity: .6; pointer-events: none; }
.formular__smiley { flex: none; width: 30px; height: 30px; }

/* --- Fuß ---------------------------------------------------------------------------------- */

.fuss { padding-block: 3rem 2.5rem; background: #040b11; color: var(--auf-dunkel-leise); font-size: .92rem; }
.fuss__innen { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem 3rem; }
.fuss__logo img { width: 200px; height: auto; }
.fuss__marken { display: flex; align-items: center; justify-content: center; gap: 2.25rem; opacity: .7; }
.fuss__marken img { width: 130px; height: auto; }
.fuss__marken .logo--keylink { width: 117px; }
.fuss__navi { display: flex; gap: 1.5rem; }
.fuss__navi a { text-decoration: none; }
.fuss__navi a:hover { color: var(--blau); }
.fuss__smiley { flex: none; width: 18px; height: 18px; color: var(--blau); }
.fuss__gestaltung { margin-left: auto; }
.fuss__gestaltung a { color: var(--auf-dunkel); text-decoration: none; border-bottom: 1px solid var(--linie-dunkel); transition: color .2s, border-color .2s; }
.fuss__gestaltung a:hover { color: var(--blau); border-color: var(--blau); }
/* rechts Platz für den fixierten "Nach oben"-Knopf, sonst liegt er ganz unten über dem Hinweis */
.fuss__copy { flex-wrap: wrap; row-gap: .4rem; padding-right: 4.5rem; }
@media (max-width: 699px) { .fuss__gestaltung { flex-basis: 100%; margin-left: 0; } }
.fuss__copy { display: flex; align-items: center; gap: .6rem; grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--linie-dunkel); font-size: .85rem; }

.nach-oben { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blau); color: var(--tinte); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility .3s; }
.nach-oben .icon { transform: rotate(180deg); }
.zeige-nach-oben .nach-oben { opacity: 1; visibility: visible; transform: none; }

/* --- Lader -----------------------------------------------------------------------------------
   Erscheint erst nach 450 ms – bei schneller Verbindung sieht man ihn nie. Solange .laedt
   gesetzt ist, ist das Scrollen gesperrt; main.js nimmt die Klasse, sobald DOM, Slider und
   Schriften stehen (Notbremse im Kopf: spätestens nach 4 s). */

.lader { display: none; }
.laedt { overflow: hidden; }
.laedt .lader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--tinte); color: var(--blau); animation: lader-rein .3s .45s ease-out both; }
.laedt .lader.lader--aus { animation: lader-raus .4s ease-in both; }
@keyframes lader-rein { from { opacity: 0; } to { opacity: 1; } }
@keyframes lader-raus { from { opacity: 1; } to { opacity: 0; } }
.lader__smiley { width: 92px; height: 92px; }
.lader__smiley .smiley__ring { transform: rotate(-90deg); transform-origin: center; transform-box: fill-box; stroke-dasharray: 208; animation: ring-zeichnen 1.6s .45s cubic-bezier(.6, 0, .4, 1) infinite both; }
.lader__smiley .smiley__gesicht { transform-origin: center; transform-box: fill-box; animation: gesicht-rein .6s .9s var(--ease) both; }
@keyframes ring-zeichnen { 0% { stroke-dashoffset: 208; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -208; } }
@keyframes gesicht-rein { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* --- Scroll-Animationen --------------------------------------------------------------------- */

.js [data-animate] { transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-animate]:not(.sichtbar) { opacity: 0; transform: translateY(28px); }

/* --- Entwurfsmarkierung (?entwurf) ---------------------------------------------------------- */

.ist-entwurf { position: relative; }
.zeige-entwurf .ist-entwurf { outline: 2px dashed #f5a623; outline-offset: 6px; }
.zeige-entwurf .ist-entwurf::after { content: "Textvorschlag"; position: absolute; top: -.8rem; right: 1rem; z-index: 3; padding: .3rem .5rem; border-radius: 3px; background: #f5a623; color: #1a1200; font: 700 .66rem/1 var(--schrift-text); letter-spacing: .08em; text-transform: uppercase; }

/* --- Responsiv ---------------------------------------------------------------------------------- */

@media (max-width: 1099px) {
  .navi ul { gap: 1.3rem; }
  .navi { gap: 1.5rem; }
}

@media (max-width: 999px) {
  :root { --kopf: 68px; }
  .kopf__innen { gap: .9rem; }
  .kopf { --partner-b: 72px; }
  /* Telefonknopf rückt nach rechts an den Burger heran, damit das Partnerlogo Platz hat */
  .kopf__tel { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; margin-right: .25rem; border: 1px solid var(--linie-dunkel); border-radius: 50%; }
  .kopf__burger { display: grid; place-content: center; gap: 6px; flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
  .kopf__burger span:not(.unsichtbar) { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
  .menue-offen .kopf__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .menue-offen .kopf__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .menue-offen { overflow: hidden; }
  /* backdrop-filter macht den Kopf zum Bezugsrahmen für position:fixed –
     das Menü wäre sonst auf die 68px Kopfhöhe eingesperrt. */
  .menue-offen .kopf { background: var(--tinte); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .navi { position: fixed; inset: var(--kopf) 0 0; flex-direction: column; align-items: flex-start; gap: 2rem; margin: 0; padding: 1.5rem var(--rand) 2rem; overflow-y: auto; background: var(--tinte); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .35s var(--ease), visibility .3s; }
  .menue-offen .navi { opacity: 1; visibility: visible; transform: none; }
  .navi ul { flex-direction: column; gap: 0; width: 100%; }
  .navi li { border-bottom: 1px solid var(--linie-dunkel); }
  .navi a:not(.knopf) { padding-block: 1rem; font-size: 1.5rem; }
  .navi a:not(.knopf)::after { display: none; }
  .navi a[aria-current] { color: var(--blau); }

  .held, .held__innen { min-height: 0; }
  .held__innen { grid-template-columns: 1fr; gap: 0; padding-block: calc(var(--kopf) + 2.5rem) 3rem; }
  .held--start .held__innen { padding-bottom: 0; }
  .held__szene { min-height: 0; height: clamp(300px, 80vw, 520px); margin-inline: calc(var(--rand) * -1); }
  .held__szene--karte .held__leser { left: 12%; width: 26%; }
  /* Handy: kürzere Wege (mav begrenzt dort auf 24 px), sonst wirkt die Neigung hektisch */
  .held__ebene--leser { --weg-x: -6px; --weg-y: -4px; }
  .held__ebene--hand { --weg-x: 26px; --weg-y: 18px; }
  .held__szene--karte .held__hand { left: 24%; width: 88%; }
  .held__puls { left: 25%; }
  .held__szene--team .held__team { right: -6%; width: 100%; }
  .held__szene--daten { position: relative; }
  .held__szene--daten .datenbild { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
  .held__szene--sucher { padding-inline: var(--rand); }
  .held__scroll { display: none; }
  .held--referenz { min-height: 72svh; }

  .bereich-panel { grid-template-columns: 1fr; min-height: 0; }
  .bereich-panel__bild { order: 0 !important; aspect-ratio: 16 / 10; }
  .ueberblick__raster, .identmedien__raster, .projekt__raster, .kontakt__raster, .fakten__raster, .keyfacts-raster { grid-template-columns: 1fr; }
  .ueberblick__raster > :first-child, .projekt__stimme { position: static; }
  .keylink-band__innen { grid-template-columns: 1fr; justify-items: start; }
  .fuss__innen { grid-template-columns: 1fr; justify-items: start; }
  .fuss__marken { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 699px) {
  body { font-size: 1rem; }
  .sektion__kopf { flex-direction: column; align-items: flex-start; }
  .sektion__kopf--mittig { align-items: center; }
  .slider-knoepfe { display: none; }
  .formular__zeile { grid-template-columns: 1fr; }
  .fakten dl { grid-template-columns: 1fr 1fr; }
  .fakten dl > :last-child { grid-column: 1 / -1; }
  .tabs__leiste { flex-wrap: nowrap; width: 100%; overflow-x: auto; border-radius: 12px; scrollbar-width: none; }
  .tabs__leiste::-webkit-scrollbar { display: none; }
  .tabs__reiter { white-space: nowrap; }
  .kontakt__zeiten li { min-width: 0; }
  .medien-kachel { padding: .75rem; font-size: .68rem; }
  .medien-kachel:nth-child(1) { --tempo: 30; }
  .medien-kachel:nth-child(2) { --versatz: .9rem; --tempo: -20; }
  .medien-kachel:nth-child(3) { --tempo: 55; }
  .partner img { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-animate]:not(.sichtbar) { opacity: 1; transform: none; }
  .laufband__spur { flex-wrap: wrap; justify-content: center; width: auto; }
}