/* Schriften lokal gehostet (SIL Open Font License): keine Verbindung zu Google, schneller Seitenaufbau */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/unbounded-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* AVIDIS Systems · avidis.de · Konzeptentwurf (Stand 23.09.2026)
   Mood: dunkel, Tech-Premium aus dem blauen A-Emblem
   Engine: GSAP 3.13 + ScrollTrigger + SplitText + Lenis (siehe main.js) */

:root {
  --bg: #05080f;
  --bg-raise: #080d18;
  --surface: #0b1220;
  --surface-2: #0f192c;
  --surface-3: #142038;
  --line: rgba(150, 180, 235, .12);
  --line-2: rgba(150, 180, 235, .22);
  --fg: #e9f0fb;
  --fg-2: #b3c1d6;
  --fg-3: #8697b1;
  --blue-deep: #123a9c;
  --blue: #2b6de8;
  --blue-hi: #4c8dff;
  --sky: #7cc8ff;
  --ok: #5fd3a0;
  --grad: linear-gradient(115deg, #2a62e0 0%, #3f8cff 48%, #8ad0ff 100%);
  --btn: linear-gradient(180deg, #2f6ff0, #2257d6);
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-brand: "Unbounded", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 68px;
  color-scheme: dark;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* <picture> (AVIF mit WebP-Rückfall, setzt bauen.py) erzeugt keinen eigenen Kasten: das <img> verhält sich wie vorher */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 8px; }
::selection { background: rgba(76, 141, 255, .35); color: #fff; }
.nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -120px; z-index: 300; background: var(--fg); color: var(--bg); padding: .75rem 1.1rem; border-radius: 12px; font-weight: 600; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

/* ---------- Typografie ---------- */
.h1 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.6rem); line-height: 1.03; letter-spacing: -.038em; font-weight: 600; text-wrap: balance; }
.h2 { font-size: clamp(1.9rem, 1.15rem + 2.7vw, 3.35rem); line-height: 1.06; letter-spacing: -.032em; font-weight: 600; text-wrap: balance; }
.h3 { font-size: clamp(1.14rem, 1rem + .45vw, 1.38rem); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; }
.lead { font-size: clamp(1.05rem, .98rem + .35vw, 1.24rem); line-height: 1.55; color: var(--fg-2); max-width: 58ch; text-wrap: pretty; }
.eyebrow { font-family: var(--font-brand); font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--sky); }
.akzent { color: var(--sky); }
.klein { font-size: .9rem; color: var(--fg-3); }

/* ---------- Knöpfe & Links ---------- */
.btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: var(--h); padding: 0 1.4rem; border-radius: 999px;
  font-weight: 600; font-size: 1rem; letter-spacing: -.005em; white-space: nowrap;
  border: 1px solid transparent; touch-action: manipulation;
  transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn .ic { width: 1.1em; height: 1.1em; transition: transform .35s var(--ease); }
.btn:hover .ic--pfeil { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: var(--btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 30px -14px rgba(47, 111, 240, .9); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 44px -14px rgba(76, 141, 255, 1); }
.btn--ghost { background: rgba(255, 255, 255, .04); border-color: var(--line-2); color: var(--fg); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(150, 180, 235, .42); }
.btn--sm { --h: 44px; padding: 0 1.1rem; font-size: .94rem; }
.btn--icon { --h: 44px; width: 44px; padding: 0; }
.link { display: inline-flex; align-items: center; gap: .45rem; color: var(--sky); font-weight: 600; min-height: 44px; transition: gap .3s var(--ease), color .3s; }
.link:hover { gap: .75rem; color: #a9dcff; }
.link .ic { width: 1.05em; height: 1.05em; }

/* ---------- Kopfzeile ---------- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); border-bottom: 1px solid transparent; transition: background-color .45s var(--ease), border-color .45s var(--ease); }
.kopf.is-scrolled { background: rgba(5, 8, 15, .74); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); }
/* Offenes Mobilmenü: Kopfleiste mit festem Grund, damit gescrollte Menüpunkte nicht unter Logo und Knöpfen durchscheinen */
.kopf.menu-offen { background: rgb(5, 8, 15); border-bottom-color: var(--line); }
.kopf__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.marke { display: flex; align-items: center; gap: .65rem; min-height: 44px; flex: none; }
.marke__emblem { width: 36px; height: auto; }
.marke__wort { width: 112px; height: auto; }
.kopf .marke__wort--navy { display: none; }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .8rem; border-radius: 999px; color: var(--fg-2); font-size: .95rem; font-weight: 500; transition: color .25s, background-color .25s; }
.nav a:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.kopf__aktion { display: flex; align-items: center; gap: .5rem; }
.kopf__tel { color: var(--fg-2); }
.menu-btn { display: none; }
.menu-btn__linien { position: relative; width: 20px; height: 12px; }
.menu-btn__linien::before, .menu-btn__linien::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-btn__linien::before { top: 1px; }
.menu-btn__linien::after { top: 9px; }
.menu-btn[aria-expanded="true"] .menu-btn__linien::before { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__linien::after { top: 5px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 99; background: rgba(5, 8, 15, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2rem; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; overflow-y: auto; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.menu__link { display: flex; align-items: center; justify-content: space-between; min-height: 60px; font-size: 1.6rem; font-weight: 600; letter-spacing: -.025em; border-bottom: 1px solid var(--line); }
.menu__link .ic { color: var(--fg-3); }
.menu__fuss { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.menu__fuss .btn { width: 100%; }

@media (max-width: 1140px) {
  .nav, .kopf__cta-text { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 1141px) {
  .menu { display: none; }
}

/* Konzept-Kennzeichnung (nur Entwurf) */
.entwurf { position: fixed; left: 14px; bottom: 14px; z-index: 90; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: rgba(11, 18, 32, .82); border: 1px solid var(--line-2); color: var(--fg-2); font-size: .75rem; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.entwurf img { width: 16px; }

/* ---------- Hero / Signet ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center; padding: calc(var(--header-h) + clamp(2.5rem, 8vh, 5.5rem)) 0 clamp(3rem, 8vh, 5rem); overflow: clip; isolation: isolate; }
.hero__himmel { position: absolute; inset: 0; z-index: -3; pointer-events: none; }
.hero__himmel canvas { width: 100%; height: 100%; }
.hero__licht { position: absolute; left: 50%; top: 58%; width: min(1500px, 170vw); aspect-ratio: 1.5; transform: translate(-50%, -18%); z-index: -2; background: radial-gradient(closest-side, rgba(47, 111, 240, .34), rgba(47, 111, 240, .1) 48%, transparent 74%); pointer-events: none; }
.hero__horizont { position: absolute; inset: auto 0 0; height: 30vh; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.hero__copy { position: relative; z-index: 2; width: 100%; max-width: 1040px; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 1.35rem; }
.hero__sub { max-width: 44ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: .35rem; }
.signet { position: relative; z-index: 1; margin-top: clamp(3rem, 9vh, 6rem); display: flex; justify-content: center; pointer-events: none; width: 100%; }
.signet__lockup { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(1.1rem, 3vh, 1.9rem); }
.zeile { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.zeile > span { display: inline-block; }
.signet__emblem { position: relative; z-index: 2; width: clamp(160px, 21vw, 272px); height: auto; filter: drop-shadow(0 30px 70px rgba(40, 110, 255, .38)); }
.signet__wort { position: relative; z-index: 1; width: clamp(190px, 22vw, 300px); height: auto; }

/* Animierter Modus (nur mit GSAP und ohne reduzierte Bewegung) */
.hero.is-signet { height: 100svh; min-height: 560px; }
.hero.is-signet .signet { position: absolute; inset: 0; margin: 0; align-items: center; }
.hero.is-signet .signet__lockup { transform: translateY(1vh); }

/* ---------- Zahlenband ---------- */
.zahlen { position: relative; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(11, 18, 32, .75), rgba(5, 8, 15, .2)); }
.zahlen__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.zahl { padding: clamp(1.5rem, 1rem + 1.5vw, 2.4rem) clamp(1rem, .5rem + 1.5vw, 2rem); border-left: 1px solid var(--line); }
.zahl:first-child { border-left: 0; padding-left: 0; }
.zahl__wert { font-family: var(--font-brand); font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.zahl__wert .plus { color: var(--sky); }
.zahl__text { color: var(--fg-2); font-size: .95rem; margin-top: .65rem; line-height: 1.4; }
@media (max-width: 767px) {
  .zahlen__grid { grid-template-columns: 1fr 1fr; }
  .zahl { padding-left: 1rem; }
  .zahl:nth-child(odd) { border-left: 0; padding-left: 0; }
  .zahl:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- Sektionen allgemein ---------- */
.sek { position: relative; padding-block: clamp(5rem, 3rem + 7vw, 8.5rem); overflow: clip; }
.sek__kopf { max-width: 780px; display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4.25rem); }
.sek__kopf--mitte { margin-inline: auto; text-align: center; align-items: center; }
.kugel { position: absolute; z-index: -1; width: 620px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 111, 240, .16), transparent 70%); pointer-events: none; }

/* ---------- Leistungen (Bento, 4 Zellen) ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.kachel { position: relative; isolation: isolate; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line); padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); overflow: hidden; display: flex; flex-direction: column; gap: .75rem; transition: border-color .45s var(--ease), transform .6s var(--ease); }
.kachel:hover { border-color: var(--line-2); transform: translateY(-3px); }
.kachel__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(76, 141, 255, .12); border: 1px solid rgba(124, 200, 255, .18); color: var(--sky); }
.kachel__icon .ic { width: 22px; height: 22px; }
.kachel p { color: var(--fg-2); max-width: 46ch; }
.kachel .link { margin-top: auto; }
.kachel--ki { grid-column: 1 / span 4; grid-row: 1 / span 2; min-height: 540px; background: radial-gradient(110% 70% at 85% 0%, rgba(47, 111, 240, .3), transparent 60%), linear-gradient(180deg, #0f1c37, #0a1223); }
.kachel--sw { grid-column: 5 / span 2; grid-row: 1 / span 2; }
.kachel--it { grid-column: 1 / span 3; }
.kachel--web { grid-column: 4 / span 3; }
.kachel__bild { margin-top: 1rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-3); }
.kachel__bild img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.kachel--sw .kachel__bild img { aspect-ratio: 4 / 5; }
.kachel--it, .kachel--web { display: grid; grid-template-columns: 1fr .9fr; align-items: stretch; column-gap: 1.25rem; }
.kachel--it > .kachel__text, .kachel--web > .kachel__text { display: flex; flex-direction: column; gap: .75rem; }
.kachel--it .kachel__bild, .kachel--web .kachel__bild { margin: 0; align-self: stretch; }
.kachel--it .kachel__bild img, .kachel--web .kachel__bild img { height: 100%; aspect-ratio: auto; }

/* KI-Kette in der Kachel */
.kette { margin-top: auto; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .6rem; padding-top: 1.5rem; }
.kette__knoten { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 1.1rem .75rem; border-radius: 16px; background: rgba(8, 13, 24, .6); border: 1px solid var(--line); min-height: 132px; justify-content: center; }
.kette__knoten .ic { width: 28px; height: 28px; color: var(--sky); }
.kette__knoten strong { font-size: .95rem; font-weight: 600; }
.kette__knoten span { font-size: .8rem; color: var(--fg-3); line-height: 1.35; }
.kette__knoten > div { display: flex; flex-direction: column; gap: .2rem; }
.kachel--ki .kette { margin-block: auto; padding-top: 0; }
.kachel--ki .link { margin-top: 0; }
.kette__knoten--ki { background: radial-gradient(90% 90% at 50% 0%, rgba(76, 141, 255, .28), rgba(8, 13, 24, .7)); border-color: rgba(124, 200, 255, .35); }
.kette__linie { width: clamp(28px, 4vw, 64px); height: 2px; overflow: visible; }
.kette__linie line { stroke: var(--sky); stroke-width: 2; stroke-dasharray: 4 6; animation: fluss 1.2s linear infinite; }
@keyframes fluss { to { stroke-dashoffset: -20; } }
.kette__icons { display: flex; gap: .35rem; color: var(--sky); }
.kette__icons .ic { width: 22px; height: 22px; }

@media (max-width: 1023px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .kachel--ki { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
  .kachel--sw { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
  .kachel--sw .kachel__bild { grid-row: 1 / span 4; grid-column: 2; margin: 0; }
  .kachel--it, .kachel--web { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .kachel--sw, .kachel--it, .kachel--web { display: flex; }
  .kachel--sw .kachel__bild img { aspect-ratio: 16 / 11; }
  .kachel--it .kachel__bild img, .kachel--web .kachel__bild img { aspect-ratio: 16 / 10; height: auto; }
  .kette { grid-template-columns: 1fr; gap: .4rem; }
  .kette__linie { width: 2px; height: 26px; justify-self: center; transform: rotate(90deg); }
  .kette__knoten { min-height: 0; flex-direction: row; text-align: left; justify-content: flex-start; }
  .kette__knoten > div { display: flex; flex-direction: column; }
}

/* ---------- KI-Werkstatt ---------- */
.ki { background: radial-gradient(60% 40% at 50% 0%, rgba(47, 111, 240, .12), transparent 70%); }
.werkstatt { border-radius: var(--r-xl); border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(15, 25, 44, .9), rgba(8, 13, 24, .9)); padding: clamp(1rem, .6rem + 1.5vw, 2rem); box-shadow: 0 40px 120px -60px rgba(47, 111, 240, .55); }
.werkstatt__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1rem, .8rem + 1vw, 1.6rem); }
.tab { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--fg-2); font-weight: 500; font-size: .95rem; transition: background-color .3s, color .3s, border-color .3s; }
.tab .ic { width: 18px; height: 18px; }
.tab:hover { color: var(--fg); border-color: rgba(150, 180, 235, .4); }
.tab[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.buehne { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); gap: clamp(.75rem, .4rem + 1.2vw, 1.5rem); align-items: stretch; }
.ws-karte { border-radius: var(--r-lg); background: var(--bg-raise); border: 1px solid var(--line); padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; min-height: 340px; }
.ws-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .82rem; color: var(--fg-3); font-weight: 500; }
.ws-karte__kopf .ic { width: 18px; height: 18px; color: var(--sky); }
.ws-marke { display: inline-flex; align-items: center; gap: .45rem; }
.ws-mail { font-size: .95rem; color: var(--fg-2); display: grid; gap: .55rem; }
.ws-mail__meta { display: grid; gap: .15rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.ws-mail__meta b { color: var(--fg); font-weight: 600; }
.ws-beleg { position: relative; background: #eef1f6; color: #1d2433; border-radius: 10px; padding: 1rem 1.1rem; font-size: .82rem; line-height: 1.5; transform: rotate(-1.2deg); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.ws-beleg h4 { font-size: .9rem; margin-bottom: .4rem; letter-spacing: .02em; }
.ws-beleg table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.ws-beleg td { padding: .25rem 0; border-top: 1px dashed #b9c2d1; }
.ws-beleg td:last-child { text-align: right; }
.ws-welle { display: flex; align-items: center; gap: 3px; height: 54px; padding: 0 .25rem; }
.ws-welle i { display: block; width: 4px; border-radius: 2px; background: linear-gradient(180deg, var(--sky), var(--blue)); opacity: .85; }
.ws-transkript { font-size: .95rem; color: var(--fg-2); font-style: italic; line-height: 1.55; padding-bottom: .15rem; }
.ws-pfeil { display: grid; place-items: center; width: clamp(54px, 6vw, 84px); }
.ws-kern { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #5b9dff, #1c4fc4 70%); box-shadow: 0 0 0 8px rgba(76, 141, 255, .1), 0 0 40px rgba(76, 141, 255, .55); color: #fff; }
.ws-kern .ic { width: 26px; height: 26px; }
.ws-kern::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(124, 200, 255, .35); animation: puls 2.4s var(--ease) infinite; }
@keyframes puls { 0% { transform: scale(.75); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.ws-kern__text { margin-top: .6rem; font-size: .72rem; color: var(--fg-3); text-align: center; line-height: 1.25; }
.ws-felder { display: grid; gap: .1rem; }
.ws-feld { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ws-feld.is-da { opacity: 1; transform: none; }
.ws-feld dt { color: var(--fg-3); }
.ws-feld dd { color: var(--fg); font-weight: 500; }
.ws-entwurf { border-radius: 12px; background: rgba(76, 141, 255, .08); border: 1px solid rgba(124, 200, 255, .2); padding: .85rem 1rem; font-size: .92rem; color: var(--fg-2); min-height: 5.2em; }
.ws-entwurf b { display: block; font-size: .78rem; color: var(--sky); font-weight: 600; margin-bottom: .3rem; }
.ws-cursor { display: inline-block; width: 2px; height: 1em; background: var(--sky); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ws-aktionen { display: flex; gap: .5rem; margin-top: auto; }
.ws-aktion { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; background: var(--fg); color: var(--bg); }
.ws-aktion--ghost { background: transparent; color: var(--fg-2); border: 1px solid var(--line-2); }
.werkstatt__hinweis { margin-top: 1rem; font-size: .85rem; color: var(--fg-3); }
@media (max-width: 900px) {
  .buehne { grid-template-columns: 1fr; }
  .ws-pfeil { width: 100%; padding: .4rem 0; grid-auto-flow: column; gap: .9rem; justify-content: center; }
  .ws-kern__text { margin: 0; text-align: left; }
  .ws-karte { min-height: 0; }
  .ws-feld { grid-template-columns: 7rem 1fr; }
}

/* Einsatzfelder */
.felder { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.feld { background: var(--bg); padding: clamp(1.25rem, 1rem + 1vw, 1.8rem); display: flex; flex-direction: column; gap: .6rem; min-height: 230px; transition: background-color .4s var(--ease); }
.feld:hover { background: #070c17; }
.feld .ic { width: 28px; height: 28px; color: var(--sky); margin-bottom: .35rem; }
.feld p { color: var(--fg-2); font-size: .96rem; }
.feld__beleg { margin-top: auto; padding-top: .6rem; font-size: .82rem; color: var(--fg-3); display: inline-flex; align-items: center; gap: .4rem; }
.feld__beleg .ic { width: 14px; height: 14px; margin: 0; color: var(--ok); }
.feld--bild { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: center; background: radial-gradient(80% 90% at 100% 50%, rgba(47, 111, 240, .16), transparent 70%), var(--bg); }
.feld--bild figure { position: relative; min-height: 240px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); align-self: stretch; background: var(--surface-2); }
.feld--bild figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (max-width: 1023px) { .felder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .felder { grid-template-columns: 1fr; }
  .feld--bild { grid-column: auto; grid-template-columns: 1fr; }
  .feld { min-height: 0; }
}

/* Vertrauen + KI-Check */
.ki-fuss { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: stretch; }
.prinzipien { display: grid; gap: 1.6rem; padding: clamp(1.4rem, 1rem + 1.2vw, 2.2rem) 0; }
.prinzip { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start; }
.prinzip .kachel__icon { width: 48px; height: 48px; }
.prinzip p { color: var(--fg-2); margin-top: .3rem; }
.check-karte { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); background: radial-gradient(120% 90% at 100% 0%, rgba(124, 200, 255, .22), transparent 55%), linear-gradient(160deg, #1b4fc8, #0f2f86 70%, #0b2466); border: 1px solid rgba(124, 200, 255, .3); display: flex; flex-direction: column; gap: 1rem; }
.check-karte .h2 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.5rem); }
.check-karte p { color: #d9e6fb; }
.check-karte ul { display: grid; gap: .55rem; margin: .25rem 0 .5rem; }
.check-karte li { display: flex; gap: .6rem; align-items: flex-start; color: #e9f0fb; }
.check-karte li .ic { width: 20px; height: 20px; margin-top: .15rem; color: #a9dcff; }
.check-karte .btn { align-self: flex-start; background: #f2f6fd; color: #0b1a3d; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .6); }
.check-karte .btn:hover { background: #fff; }
.check-karte__emblem { position: absolute; right: -60px; bottom: -70px; width: 260px; opacity: .14; pointer-events: none; }
@media (max-width: 900px) { .ki-fuss { grid-template-columns: 1fr; } }

/* ---------- Software: horizontale Fahrt ---------- */
.pan { position: relative; }
.pan__spur { display: flex; gap: clamp(1rem, .6rem + 1.4vw, 2rem); padding-inline: var(--gutter); width: max-content; }
.fall { width: min(1060px, 84vw); flex: none; display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.25rem, .8rem + 1.6vw, 2.5rem); align-items: center; padding: clamp(1.2rem, .8rem + 1.4vw, 2rem); border-radius: var(--r-xl); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.fall__medien { position: relative; }
.rahmen { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #0d1526; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .9); }
.rahmen__leiste { display: flex; align-items: center; gap: .5rem; height: 34px; padding: 0 .8rem; background: #111b2e; border-bottom: 1px solid var(--line); }
.rahmen__punkte { display: flex; gap: 5px; }
.rahmen__punkte i { width: 8px; height: 8px; border-radius: 50%; background: #2a3650; }
.rahmen__url { flex: 1; min-width: 0; height: 20px; border-radius: 6px; background: #0a1120; color: var(--fg-3); font: 500 .72rem/20px var(--font-mono); padding: 0 .6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rahmen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.handy { position: absolute; right: -4%; bottom: -8%; width: 27%; border-radius: 22px; padding: 5px; background: #0b1120; border: 1px solid var(--line-2); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.handy img { border-radius: 17px; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top center; }
.fall__text { display: flex; flex-direction: column; gap: .9rem; }
.fall__kicker { font-size: .85rem; color: var(--sky); font-weight: 600; }
.fall__text p { color: var(--fg-2); }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: .82rem; color: var(--fg-2); background: rgba(255, 255, 255, .02); }
.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ok); font-weight: 600; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(95, 211, 160, .15); }
.mini-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; max-width: 560px; margin-inline: auto; }
.mini-apps figure { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #0b1120; padding: 4px; }
.mini-apps img { border-radius: 12px; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top center; }
.mini-apps figcaption { font-size: .72rem; color: var(--fg-3); text-align: center; padding: .4rem .2rem .2rem; line-height: 1.3; }
.pan__fortschritt { display: none; }
@media (max-width: 1023px) {
  .pan__spur { flex-direction: column; width: auto; padding-inline: var(--gutter); max-width: var(--wrap); margin-inline: auto; }
  .fall { width: 100%; grid-template-columns: 1fr; }
  .handy { width: 30%; right: 3%; bottom: -10%; }
  .fall__medien { margin-bottom: 1.5rem; }
}
@media (max-width: 640px) {
  .mini-apps { gap: .5rem; }
}

/* ---------- IT-Service ---------- */
.it__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.it__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.5rem; margin-top: 2.2rem; }
.it__punkt { display: grid; gap: .5rem; align-content: start; }
.it__punkt .ic { width: 26px; height: 26px; color: var(--sky); }
.it__punkt p { color: var(--fg-2); font-size: .96rem; }
.it__visual { position: relative; }
.it__bild { border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: #03060c; }
.it__bild img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.konsole { position: absolute; left: -8%; bottom: -10%; width: min(460px, 88%); border-radius: 16px; background: rgba(6, 10, 19, .92); border: 1px solid var(--line-2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 400 .8rem/1.7 var(--font-mono); color: var(--fg-3); overflow: hidden; }
.konsole__kopf { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-bottom: 1px solid var(--line); font-size: .72rem; }
.konsole__koerper { padding: .8rem .95rem 1rem; white-space: pre; overflow-x: auto; }
.konsole .p { color: var(--sky); }
.konsole .ok { color: var(--ok); }
.konsole .w { color: var(--fg-2); }
@media (max-width: 1023px) {
  .it__grid { grid-template-columns: 1fr; }
  .konsole { left: 4%; bottom: -12%; }
  .it__visual { margin-bottom: 3rem; }
}
@media (max-width: 640px) {
  .it__liste { grid-template-columns: 1fr; }
  .konsole { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -3rem; margin-inline: auto; font-size: .72rem; }
  .it__visual { margin-bottom: 0; }
}

/* ---------- Websites: Laufband + Pakete ---------- */
.band { position: relative; overflow: hidden; padding-block: .5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.band__spur { display: flex; gap: 1.25rem; width: max-content; animation: laufband 70s linear infinite; }
.band__kopie { display: contents; }
.band:hover .band__spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(calc(-50% - .625rem)); } }
.site { width: clamp(280px, 30vw, 420px); flex: none; }
.site figure { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: #0d1526; }
.site img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.site figcaption { padding: .8rem .2rem 0; display: flex; justify-content: space-between; gap: .75rem; font-size: .9rem; }
.site figcaption span { color: var(--fg-3); }
.web__unten { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.web__unten .lead { margin-top: 1rem; }
.web__punkte { display: grid; gap: .6rem; margin: 1.4rem 0 1.6rem; }
.web__punkte li { display: flex; gap: .6rem; color: var(--fg-2); }
.web__punkte .ic { width: 20px; height: 20px; color: var(--sky); margin-top: .2rem; }
.pakete { border-radius: var(--r-xl); border: 1px solid var(--line-2); overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); }
.paket { padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); display: flex; flex-direction: column; gap: .7rem; border-left: 1px solid var(--line); }
.paket:first-child { border-left: 0; }
.paket--mitte { background: linear-gradient(180deg, rgba(47, 111, 240, .16), rgba(47, 111, 240, .04)); }
.paket__name { font-family: var(--font-brand); font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); }
.paket__preis { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.paket__preis small { font-size: .9rem; font-weight: 500; color: var(--fg-3); letter-spacing: 0; }
.paket ul { display: grid; gap: .45rem; font-size: .92rem; color: var(--fg-2); }
.paket li { display: flex; gap: .5rem; }
.paket li .ic { width: 16px; height: 16px; margin-top: .3rem; color: var(--sky); }
.pakete__fuss { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 1rem clamp(1.3rem, 1rem + 1vw, 1.9rem); font-size: .88rem; color: var(--fg-3); }
@media (max-width: 1023px) { .web__unten { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .pakete { grid-template-columns: 1fr; }
  .paket { border-left: 0; border-top: 1px solid var(--line); }
  .paket:first-child { border-top: 0; }
}

/* ---------- Lokal ---------- */
.lokal__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.lokal__kopf { position: sticky; top: calc(var(--header-h) + 2rem); display: flex; flex-direction: column; gap: 1.1rem; }
.adresse { margin-top: 1rem; display: grid; grid-template-columns: 44px 1fr; gap: .9rem; align-items: center; padding: 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.adresse .kachel__icon { width: 44px; height: 44px; }
.adresse p { color: var(--fg-2); font-size: .95rem; line-height: 1.45; }
.adresse strong { color: var(--fg); }
.orte { display: grid; }
.ort { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--line); }
.ort:last-child { border-bottom: 1px solid var(--line); }
.ort__name { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; transition: color .35s var(--ease); }
.ort__projekte { margin-top: .45rem; color: var(--fg-3); font-size: .92rem; }
.ort__zahl { font-family: var(--font-brand); font-size: .8rem; color: var(--fg-3); letter-spacing: .08em; text-align: right; }
.ort:hover .ort__name { color: var(--sky); }
.ort--heim .ort__name { color: var(--fg); }
.ort--heim .ort__zahl { color: var(--sky); }
@media (max-width: 900px) {
  .lokal__grid { grid-template-columns: 1fr; }
  .lokal__kopf { position: static; }
}

/* ---------- Ablauf ---------- */
.ablauf-rahmen { position: relative; }
.ablauf { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, .5rem + 2vw, 2.5rem); padding-top: 3.2rem; }
.ablauf__schiene { position: absolute; left: 0; right: 0; top: 12px; height: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.ablauf__fuell { position: absolute; inset: 0; background: var(--grad); transform-origin: left center; }
.js-anim .ablauf__fuell { transform: scaleX(0); }
.schritt { position: relative; display: flex; flex-direction: column; gap: .7rem; }
.schritt__punkt { position: absolute; top: -3.2rem; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); display: grid; place-items: center; transition: border-color .4s, background-color .4s; }
.schritt__punkt::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fg-3); transition: background-color .4s; }
.schritt.is-aktiv .schritt__punkt { border-color: var(--blue-hi); }
.schritt.is-aktiv .schritt__punkt::after { background: var(--sky); }
.schritt__nr { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-3); }
.schritt p { color: var(--fg-2); font-size: .98rem; }
@media (max-width: 900px) {
  .ablauf { grid-template-columns: 1fr; padding-top: 0; padding-left: 3rem; gap: 2.2rem; }
  .ablauf__schiene { display: none; }
  .ablauf::before { content: ""; position: absolute; left: 12px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--blue-hi), var(--line-2)); }
  .schritt__punkt { top: 0; left: -3rem; }
}

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.faq__liste { border-top: 1px solid var(--line); }
.frage { border-bottom: 1px solid var(--line); }
.frage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; padding: 1.1rem 0; cursor: pointer; font-size: 1.08rem; font-weight: 600; letter-spacing: -.01em; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary .ic { width: 22px; height: 22px; color: var(--sky); transition: transform .4s var(--ease); }
.frage[open] summary .ic { transform: rotate(45deg); }
.frage__antwort { padding: 0 2.5rem 1.4rem 0; color: var(--fg-2); }
.frage__antwort p + p { margin-top: .7rem; }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.kontakt { background: radial-gradient(60% 60% at 15% 100%, rgba(47, 111, 240, .16), transparent 70%); }
.kontakt__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.kontakt__wege { display: grid; gap: .75rem; margin-top: 2rem; }
.weg { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, background-color .3s; min-height: 76px; }
a.weg:hover { border-color: var(--line-2); background: var(--surface-2); }
.weg .kachel__icon { width: 48px; height: 48px; }
.weg small { display: block; color: var(--fg-3); font-size: .82rem; }
.weg strong { font-weight: 600; font-size: 1.05rem; }
.formular { border-radius: var(--r-xl); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); padding: clamp(1.4rem, 1rem + 1.4vw, 2.3rem); box-shadow: 0 40px 100px -60px rgba(47, 111, 240, .6); display: grid; gap: 1.1rem; }
.formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fld { display: grid; gap: .45rem; }
.fld label { font-size: .9rem; font-weight: 500; color: var(--fg-2); }
.fld label .pflicht { color: var(--sky); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: .75rem .95rem; border-radius: 12px; border: 1px solid var(--line-2); background: #070c17; color: var(--fg); font-size: 1rem; transition: border-color .25s, box-shadow .25s; }
.fld textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: #6f809b; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue-hi); box-shadow: 0 0 0 3px rgba(76, 141, 255, .25); }
.fld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%), linear-gradient(135deg, var(--fg-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.fld__hilfe { font-size: .82rem; color: var(--fg-3); }
.formular .btn { justify-self: start; }
.formular__meldung { display: none; padding: .9rem 1rem; border-radius: 12px; background: rgba(95, 211, 160, .1); border: 1px solid rgba(95, 211, 160, .35); color: #cdf3e2; font-size: .92rem; }
.formular__meldung.is-da { display: block; }
.formular__datenschutz { font-size: .82rem; color: var(--fg-3); }
.formular__datenschutz a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .kontakt__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formular__zeile { grid-template-columns: 1fr; } .formular .btn { width: 100%; } }

/* ---------- Fußzeile ---------- */
.fuss { border-top: 1px solid var(--line); padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); background: #04070d; }
.fuss__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.fuss__marke img { width: 150px; }
.fuss__marke p { margin-top: 1rem; color: var(--fg-3); font-size: .92rem; max-width: 34ch; }
.fuss__titel { font-size: .8rem; font-family: var(--font-brand); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 1rem; }
.fuss ul { display: grid; gap: .15rem; }
.fuss li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-2); font-size: .95rem; transition: color .25s; }
.fuss li a:hover { color: var(--fg); }
.fuss__unten { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-top: 1px solid var(--line); padding-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--fg-3); }
.fuss__unten a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .2rem; transition: color .25s; }
.fuss__unten a:hover { color: var(--fg); }
.fuss__avidis { margin: 0; padding-block: 1.1rem 1.4rem; text-align: center; text-wrap: balance; line-height: 2; font-size: .72rem; letter-spacing: .05em; color: #7d8ea8; }
.fuss__avidis a { white-space: nowrap; font-weight: 600; letter-spacing: .12em; text-decoration: none; color: #a8b7cc; transition: color .25s; }
.fuss__avidis a:hover { color: var(--sky); }
.herz { display: inline-block; width: .95em; height: .95em; margin: 0 .15em; vertical-align: -.14em; fill: var(--blue-hi); transform-origin: 50% 60%; animation: herzschlag 2.4s ease-in-out infinite; }
@keyframes herzschlag { 0%, 32%, 100% { transform: scale(1); } 11% { transform: scale(1.2); } 20% { transform: scale(1.04); } 26% { transform: scale(1.12); } }
@media (max-width: 900px) { .fuss__grid { grid-template-columns: 1fr 1fr; } .fuss__marke { grid-column: 1 / -1; } }
@media (max-width: 480px) { .fuss__grid { grid-template-columns: 1fr; } }

/* ---------- Bewegung: Startzustände nur mit JS ---------- */
.js-anim [data-reveal] { opacity: 0; transform: translateY(24px); }
.js-anim [data-wipe] { clip-path: inset(0 0 100% 0); }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
  .kachel:hover, .btn:active { transform: none; }
  .band__spur { flex-wrap: wrap; width: auto; justify-content: center; }
  .band__kopie, .band__knopf { display: none; }
  .band__spur { padding-inline: var(--gutter); }
  .band { -webkit-mask-image: none; mask-image: none; }
  .ws-feld { opacity: 1; transform: none; }
}

/* Laufband anhalten (WCAG 2.2.2) */
.band.is-pausiert .band__spur { animation-play-state: paused; }
.band__steuerung { display: flex; justify-content: flex-end; margin-top: .9rem; }
.band__knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(11, 18, 32, .9); color: var(--fg-2); font-size: .85rem; font-weight: 500; transition: color .25s, border-color .25s; }
.band__knopf:hover { color: var(--fg); border-color: rgba(150, 180, 235, .42); }
.band__knopf .ic { width: 16px; height: 16px; }

/* Entwurfs-Hinweis auf dem Handy kürzer */
@media (max-width: 640px) {
  .entwurf { left: 10px; bottom: 10px; padding: .35rem .65rem; font-size: .7rem; }
  .entwurf__lang { display: none; }
}

/* Kopfzeilen-Knopf: kurze Beschriftung auf kleinen Bildschirmen */
.kopf__cta-kurz { display: none; }
@media (max-width: 1140px) {
  .kopf__cta-kurz { display: inline; }
}
@media (max-width: 380px) {
  .kopf__tel { display: none; }
}


/* ======================= Unterseiten (Bausteine) ======================= */
.nav a[aria-current="page"] { color: var(--fg); background: rgba(124, 200, 255, .1); }
.menu__link[aria-current="page"] { color: var(--sky); }

/* Seitenkopf */
.seitenkopf { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--header-h) + clamp(2.5rem, 7vh, 4.5rem)) 0 clamp(3.5rem, 2.5rem + 4vw, 6rem); border-bottom: 1px solid var(--line); }
.seitenkopf .hero__himmel { z-index: -2; }
.seitenkopf__licht { position: absolute; z-index: -1; right: -10%; top: -30%; width: min(1100px, 120vw); aspect-ratio: 1.4; background: radial-gradient(closest-side, rgba(47, 111, 240, .26), rgba(47, 111, 240, .07) 55%, transparent 75%); pointer-events: none; }
.seitenkopf__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.seitenkopf__grid--bild { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.seitenkopf__text { display: flex; flex-direction: column; gap: 1.25rem; max-width: 820px; }
.seitenkopf__titel { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.1rem); }
.seitenkopf__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }
.seitenkopf__bild { position: relative; }
.seitenkopf__bild .rahmen img { aspect-ratio: 16 / 10; }
@media (max-width: 960px) { .seitenkopf__grid--bild { grid-template-columns: 1fr; } }

/* Brotkrumen */
.brotkrumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; font-size: .85rem; color: var(--fg-3); }
.brotkrumen li { display: inline-flex; align-items: center; gap: .5rem; }
.brotkrumen li + li::before { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: .7; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 32px; color: var(--fg-2); transition: color .25s; }
.brotkrumen a:hover { color: var(--sky); }
.brotkrumen [aria-current="page"] { color: var(--fg-3); }

/* Text und Bild nebeneinander */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.split--umgekehrt .split__bild { order: -1; }
.split__text { display: flex; flex-direction: column; gap: 1.1rem; }
.split__text p { color: var(--fg-2); }
.split__bild figcaption { margin-top: .75rem; font-size: .85rem; color: var(--fg-3); }
.split + .split { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split--umgekehrt .split__bild { order: 0; } }

/* Häkchenliste */
.liste-check { display: grid; gap: .65rem; }
.liste-check li { display: flex; gap: .65rem; align-items: flex-start; color: var(--fg-2); }
.liste-check .ic { width: 20px; height: 20px; margin-top: .2rem; color: var(--sky); }
.liste-check strong { color: var(--fg); font-weight: 600; }

/* Angebote / Bausteine */
.bausteine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bausteine--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .bausteine--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .bausteine, .bausteine--3 { grid-template-columns: 1fr; } }
.baustein { position: relative; display: flex; flex-direction: column; gap: .8rem; padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.baustein--hervor { border-color: rgba(124, 200, 255, .35); background: radial-gradient(120% 80% at 100% 0%, rgba(47, 111, 240, .22), transparent 60%), linear-gradient(180deg, #10203d, #0b1426); }
.baustein p { color: var(--fg-2); }
.baustein__fakten { display: grid; gap: .1rem; margin-top: .2rem; border-top: 1px solid var(--line); }
.baustein__fakten > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.baustein__fakten dt { color: var(--fg-3); }
.baustein__fakten dd { color: var(--fg); font-weight: 500; }
.baustein .link { margin-top: auto; }

/* Hinweiskasten */
.kasten { display: grid; grid-template-columns: 28px 1fr; gap: .9rem; padding: 1.1rem 1.25rem; border-radius: var(--r-md); border: 1px solid rgba(124, 200, 255, .22); background: rgba(47, 111, 240, .07); color: var(--fg-2); font-size: .95rem; }
.kasten > .ic { width: 24px; height: 24px; color: var(--sky); margin-top: .1rem; }
.kasten strong { color: var(--fg); }
.kasten p + p { margin-top: .5rem; }

/* Platzhalter für offene Entscheidungen */
.platzhalter { display: inline-flex; align-items: center; gap: .35rem; padding: .05rem .55rem; border-radius: 8px; border: 1px dashed rgba(255, 196, 120, .55); background: rgba(255, 180, 90, .08); color: #ffd6a0; font-size: .92em; font-weight: 500; white-space: nowrap; }

/* Tabelle */
.tabelle-rahmen { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); }
.tabelle { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .95rem; }
.tabelle th, .tabelle td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabelle thead th { font-family: var(--font-brand); font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); background: var(--surface); }
.tabelle tbody th { font-weight: 600; color: var(--fg); }
.tabelle td { color: var(--fg-2); }
.tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }

/* Fakten einer Fallstudie */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.fakten > div { padding: 1rem 1.2rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fakten dt { font-size: .8rem; color: var(--fg-3); }
.fakten dd { margin-top: .25rem; font-weight: 600; }

/* Galerie */
.galerie { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, .8fr); gap: 1rem; align-items: end; }
.galerie--voll { grid-template-columns: 1fr; }
.galerie .handy-einzel { border-radius: 26px; padding: 6px; background: #0b1120; border: 1px solid var(--line-2); }
.galerie .handy-einzel img { border-radius: 20px; width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top center; }
@media (max-width: 720px) { .galerie { grid-template-columns: 1fr; } .galerie .handy-einzel { max-width: 260px; justify-self: center; } }

/* Referenz-Karten */
.referenzen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.ref-karte { display: flex; flex-direction: column; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: border-color .4s var(--ease), transform .6s var(--ease); }
a.ref-karte:hover { border-color: var(--line-2); transform: translateY(-3px); }
.ref-karte__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); border-bottom: 1px solid var(--line); }
.ref-karte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); }
a.ref-karte:hover .ref-karte__bild img { transform: scale(1.03); }
.ref-karte__text { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.3rem 1.4rem; }
.ref-karte__text p { color: var(--fg-2); font-size: .96rem; }

/* Weiterlesen */
.weiter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.weiter__karte { display: grid; grid-template-columns: 44px 1fr 20px; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, background-color .3s; min-height: 76px; }
.weiter__karte:hover { border-color: var(--line-2); background: var(--surface-2); }
.weiter__karte strong { display: block; font-weight: 600; }
.weiter__karte small { display: block; color: var(--fg-3); font-size: .85rem; margin-top: .15rem; }
.weiter__karte > .ic { color: var(--fg-3); transition: transform .3s var(--ease), color .3s; }
.weiter__karte:hover > .ic { transform: translateX(3px); color: var(--sky); }

/* Handlungsaufforderung am Seitenende */
.cta-band { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 2rem; align-items: center; padding: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem); border-radius: var(--r-xl); border: 1px solid rgba(124, 200, 255, .3); background: radial-gradient(120% 120% at 100% 0%, rgba(124, 200, 255, .2), transparent 55%), linear-gradient(160deg, #1b4fc8, #0f2f86 70%, #0b2466); }
.cta-band .h2 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); }
.cta-band p { margin-top: .8rem; color: #d9e6fb; max-width: 52ch; }
.cta-band__aktion { display: flex; flex-direction: column; gap: .6rem; }
.cta-band .btn--primary { background: #f2f6fd; color: #0b1a3d; box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .6); }
.cta-band .btn--primary:hover { background: #fff; }
.cta-band .btn--ghost { border-color: rgba(233, 240, 251, .35); background: rgba(5, 8, 15, .15); }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } .cta-band__aktion .btn { width: 100%; } }

/* Team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1rem; }
.person { display: flex; flex-direction: column; gap: .5rem; }
.person__bild { aspect-ratio: 4 / 5; border-radius: var(--r-lg); border: 1px solid var(--line); background: radial-gradient(90% 70% at 50% 20%, rgba(47, 111, 240, .2), transparent 70%), var(--surface); display: grid; place-items: center; color: var(--fg-3); font-size: .9rem; overflow: hidden; }
.person__bild img { width: 100%; height: 100%; object-fit: cover; }
.person p { color: var(--fg-2); font-size: .95rem; }

/* Rechtstexte und lange Texte */
.textseite__inhalt { max-width: 76ch; }
.textseite__inhalt h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 2.6rem 0 .8rem; }
.textseite__inhalt h2:first-child { margin-top: 0; }
.textseite__inhalt h3 { font-size: 1.1rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.textseite__inhalt p, .textseite__inhalt li { color: var(--fg-2); }
.textseite__inhalt p + p { margin-top: .8rem; }
.textseite__inhalt ul { display: grid; gap: .4rem; margin: .6rem 0 .6rem 1.2rem; list-style: disc; }
.textseite__inhalt a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.textseite__inhalt address { font-style: normal; color: var(--fg-2); line-height: 1.7; }

/* Abstand zwischen Abschnitten derselben Seite */
.sek--eng { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.sek--grau { background: linear-gradient(180deg, rgba(11, 18, 32, .65), rgba(5, 8, 15, 0)); border-block: 1px solid var(--line); }
.ablauf--3 { grid-template-columns: repeat(3, 1fr); }
.ablauf--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .ablauf--3, .ablauf--5 { grid-template-columns: 1fr; } }

/* Weiterführende Links am Abschnittsende */
.weiterlink { margin-top: 1.75rem; }
.check-karte__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.link--hell { color: #e9f0fb; }
.link--hell:hover { color: #fff; }
.ort__name a { transition: color .35s var(--ease); }
.ort__name a:hover { color: var(--sky); }
.ort__name a { display: inline-flex; align-items: center; min-height: 44px; }
.felder--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld ul { display: grid; gap: .45rem; margin-top: .2rem; }
.feld li { display: flex; gap: .5rem; color: var(--fg-2); font-size: .95rem; }
.feld li .ic { width: 16px; height: 16px; margin: .3rem 0 0; color: var(--sky); flex: none; }
@media (max-width: 1023px) { .felder--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .felder--3 { grid-template-columns: 1fr; } }
.wrap.textseite__inhalt { max-width: var(--wrap); }
.textseite__inhalt > * { max-width: 76ch; }

/* Korrekturen nach Agenten-Befund */
.fall__text .fall__kicker, .ref-karte__text .fall__kicker, .fall__kicker { color: var(--sky); }
.fall__text .status, .ref-karte__text .status, .split__text .status { color: var(--ok); }
.referenzen--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .referenzen--2 { grid-template-columns: 1fr; } }
.ki-fuss > .kasten { align-self: start; }
.brotkrumen a { min-height: 44px; }
.brotkrumen ol { row-gap: 0; }

/* Tabellen werden auf dem Handy zu Karten (Beschriftung aus data-label, setzt bauen.py) */
@media (max-width: 720px) {
  .tabelle-rahmen { overflow: visible; border: 0; border-radius: 0; }
  .tabelle { min-width: 0 !important; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle th, .tabelle td { display: block; width: 100%; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .tabelle tr { padding: 1.1rem 1.1rem .9rem; margin-bottom: .75rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  .tabelle tbody th { padding: 0 0 .6rem; border: 0; font-size: 1.05rem; }
  .tabelle tbody th[data-label]::before { display: none; }
  .tabelle td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border: 0; border-top: 1px solid var(--line); }
  .tabelle td::before { content: attr(data-label); color: var(--fg-3); font-size: .82rem; }
  .tabelle tr:last-child th, .tabelle tr:last-child td { border-bottom: 0; }
}

/* Endabnahme: Kopfzeile auf schmalen Handys, Pfeile in Rasterfeldern, Trennung in Titeln */
@media (max-width: 440px) {
  .marke { gap: .5rem; }
  .marke__emblem { width: 30px; }
  .marke__wort { width: 96px; }
  .kopf__aktion { gap: .4rem; }
  .kopf__aktion .btn--sm { padding: 0 .85rem; }
}
.feld .link .ic, .baustein .link .ic, .kachel .link .ic { width: 1.05em; height: 1.05em; margin: 0; color: inherit; }
.h3, .weiter__karte strong { hyphens: manual; }
.brotkrumen a { min-width: 44px; }

/* 24.09.2026: Vorschaubilder von Produkten in Entwicklung (Bild ist in der Datei selbst unscharf) */
.vorschau { position: relative; }
.vorschau-marke { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; padding: 0 .8rem; border-radius: 999px; background: rgba(5, 8, 15, .8); border: 1px solid var(--line-2); color: var(--fg); font-size: .78rem; font-weight: 600; letter-spacing: .01em; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.vorschau-marke .ic { width: 15px; height: 15px; color: #f3c969; }
.status.status--entwicklung, .fall__text .status--entwicklung, .ref-karte__text .status--entwicklung, .split__text .status--entwicklung { color: #f3c969; }
.status--entwicklung::before { background: #f3c969; box-shadow: 0 0 0 4px rgba(243, 201, 105, .15); }

/* IT-Kunden (Referenzen) */
.it-kunden { list-style: none; margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: .9rem; }
.it-kunde { display: flex; align-items: center; gap: .85rem; min-height: 76px; padding: 1rem 1.15rem; border-radius: var(--r-md); border: 1px solid var(--line); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.it-kunde .kachel__icon { flex: none; }
.it-kunde strong { display: block; font-size: 1.02rem; font-weight: 600; color: var(--fg); line-height: 1.3; }
.it-kunde small { display: block; margin-top: .15rem; font-size: .8rem; color: var(--fg-3); }
.it-kunde--mehr { border-style: dashed; background: transparent; }
.it-kunde--mehr strong { color: var(--fg-2); }

/* Webhosting: freistehende Konsole im Seitenkopf, Kachel auf der Startseite */
.konsole--frei { position: relative; left: auto; bottom: auto; width: 100%; margin: 0; font-size: .86rem; }
.konsole--frei .konsole__koerper { padding: 1.1rem 1.2rem 1.3rem; line-height: 1.85; }
.kachel--host { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; column-gap: clamp(1.25rem, 3vw, 3rem); background: radial-gradient(80% 140% at 100% 100%, rgba(47, 111, 240, .2), transparent 62%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.kachel--host > .kachel__text { display: flex; flex-direction: column; gap: .75rem; }
.host-fakten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.host-fakten li { display: flex; align-items: center; gap: .65rem; min-height: 52px; padding: .7rem .95rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .025); color: var(--fg-2); font-size: .93rem; line-height: 1.35; }
.host-fakten .ic { width: 18px; height: 18px; color: var(--sky); }
@media (max-width: 640px) {
  .kachel--host { display: flex; align-items: stretch; }
  .host-fakten { grid-template-columns: 1fr; margin-top: .5rem; }
  .konsole--frei { font-size: .74rem; }
  .konsole--frei .konsole__koerper { padding: .9rem .9rem 1rem; line-height: 1.7; }
}
/* Kopfzeile mit sieben Menüpunkten: zwischen 1141 und 1320 px etwas enger */
@media (min-width: 1141px) and (max-width: 1320px) {
  .nav a { padding: 0 .55rem; font-size: .9rem; }
  .kopf__in { gap: .9rem; }
}

/* Logo-Laufband „Einige unserer Kunden“ (IT-Service): läuft von links nach rechts, hält beim Überfahren und per Knopf an */
.kunden { border-bottom: 1px solid var(--line); }
.kunden__titel { margin: 0 0 clamp(1.4rem, 1rem + 1.4vw, 2.2rem); text-align: center; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--fg); }
.band--logos { padding-block: .75rem; }
.band--logos .band__spur { list-style: none; margin: 0; padding: 0; gap: 3.5rem; row-gap: 1.75rem; align-items: center; animation-name: laufband-logos; animation-duration: 55s; }
.band--rechts .band__spur { animation-direction: reverse; }
@keyframes laufband-logos { to { transform: translateX(calc(-50% - 1.75rem)); } }
.logo { flex: none; display: flex; align-items: center; min-height: 60px; }
.logo img { width: var(--b, auto); max-width: none; opacity: .66; transition: opacity .35s var(--ease); }
.logo:hover img { opacity: 1; }
.band__steuerung--zwischen { justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 1.5rem; }
.kunden__hinweis { margin: 0; color: var(--fg-3); font-size: .9rem; }
@media (max-width: 640px) {
  .logo img { width: calc(var(--b, 120px) * .82); }
  .band__steuerung--zwischen { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .band__dup { display: none; }
  .band--logos .band__spur { gap: 1.75rem 3rem; }
}

/* Kontaktformular: Falle, Fehlerhinweise, Danke-Karte (24.09.2026) */
.fld--falle { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fld__fehler { margin-top: .4rem; font-size: .86rem; color: #ff9b9b; }
.fld [aria-invalid="true"] { border-color: #e5484d; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
.formular__fehler { margin: 0; padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .1); color: #ffc9c9; font-size: .92rem; }
.formular button[disabled] { opacity: .7; cursor: progress; }
.formular-danke { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .8rem; padding: clamp(2rem, 1.4rem + 2.4vw, 3.4rem) clamp(1.4rem, 1rem + 2vw, 2.6rem); border-radius: var(--r-xl); border: 1px solid var(--line-2); background: radial-gradient(90% 70% at 50% 0%, rgba(47, 111, 240, .16), transparent 70%), linear-gradient(180deg, var(--surface-2), var(--surface)); }
.formular-danke[hidden], .formular[hidden] { display: none !important; }
/* Hinweis nach dem Absenden ohne JavaScript: erscheint nur, wenn die Rückleitung auf #formular-hinweis zeigt */
.formular-hinweis { display: none; margin: 0 0 1.25rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgba(229, 72, 77, .45); background: rgba(229, 72, 77, .1); color: #ffc9c9; font-size: .95rem; line-height: 1.55; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.formular-hinweis:target { display: block; }
.formular-hinweis a { color: inherit; text-decoration: underline; }
.formular-danke__zeichen svg { width: 92px; height: 92px; }
.formular-danke__kreis { fill: none; stroke: var(--blue-hi); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 227; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
.formular-danke__haken { fill: none; stroke: var(--ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 0; }
.formular-danke__titel { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); max-width: 22ch; outline: none; }
.formular-danke p { color: var(--fg-2); max-width: 44ch; }
.formular-danke__eilig a { color: var(--sky); font-weight: 600; white-space: nowrap; }
.formular-danke__gruss { font-weight: 600; color: var(--fg) !important; margin-bottom: .6rem; }
.formular-danke.is-da { animation: danke-rein .7s var(--ease) both; }
.formular-danke.is-da .formular-danke__kreis { animation: danke-kreis .9s var(--ease) .1s both; }
.formular-danke.is-da .formular-danke__haken { animation: danke-haken .5s var(--ease) .75s both; }
@keyframes danke-rein { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes danke-kreis { from { stroke-dashoffset: 227; } to { stroke-dashoffset: 0; } }
@keyframes danke-haken { from { stroke-dashoffset: 48; } to { stroke-dashoffset: 0; } }

/* KI-Lage: belegte Zahlen zur KI-Nutzung (Destatis 2025) */
.ki-lage { margin: 0 0 clamp(3rem, 2rem + 3vw, 4.5rem); }
.ki-lage__zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ki-zahl { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: clamp(1.2rem, 1rem + 1vw, 1.7rem); border-radius: var(--r-lg); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.ki-zahl strong { font-family: var(--font-brand); font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); font-weight: 500; line-height: 1; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ki-zahl span { color: var(--fg-2); font-size: .98rem; line-height: 1.45; }
.ki-lage__quelle { margin-top: .9rem; font-size: .8rem; color: var(--fg-3); }
.ki__zwischentitel { margin: 0 0 1.4rem; font-size: clamp(1.3rem, 1.05rem + .9vw, 1.7rem); }
@media (max-width: 820px) { .ki-lage__zahlen { grid-template-columns: 1fr; } }

/* Fußzeile: KI-Hinweis; Startseite: weitere Orte im Umkreis */
.fuss__ki { margin: 1.1rem 0 0; text-align: center; font-size: .78rem; line-height: 1.6; color: #7d8ea8; text-wrap: balance; }
.fuss__ki a { color: #a8b7cc; text-decoration: underline; text-underline-offset: 2px; }
.fuss__ki a:hover { color: #e9f0fb; }
.lokal__umkreis { margin-top: 1.1rem; color: var(--fg-2); font-size: .95rem; line-height: 1.6; }