/* ==========================================================================
   AB Studios — Design System v3
   Gerahmte Container, atmosphärische Verläufe, Glas, Körnung, klare Karten.
   ========================================================================== */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/display.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/body.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #eeeef0;
  --card: #ffffff;
  --ink: #0b0c10;
  --ink-2: #4a4c55;
  --ink-3: #8d8f98;
  --line: #e2e2e6;
  --line-2: #d3d3d9;
  --navy-0: #05070f;
  --navy-1: #0b1022;
  --navy-2: #17203f;
  --navy-3: #2b3d78;
  --beam: #9fb4ff;
  --blue: #2450ff;
  --blue-2: #1a3ce0;
  --on-dark: #f3f4f8;
  --on-dark-2: #a7abbd;
  --glass: rgba(18, 21, 34, .58);
  --glass-line: rgba(255, 255, 255, .12);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --max: 1520px;
  --frame: clamp(8px, 1vw, 14px);
  --pad: clamp(18px, 4vw, 64px);
  --r-xl: clamp(20px, 2.2vw, 30px);
  --r-l: 20px;
  --r-m: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 2px rgba(11,12,16,.04), 0 8px 24px -12px rgba(11,12,16,.12);
  --shadow-lg: 0 2px 4px rgba(11,12,16,.04), 0 30px 60px -24px rgba(11,12,16,.28);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 16px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.frame { margin: var(--frame) max(var(--frame), calc((100% - var(--max)) / 2)); }
.sec { padding: clamp(72px, 8vw, 128px) 0; position: relative; }
.sec--s { padding: clamp(48px, 5vw, 80px) 0; }
/* aufeinanderfolgende helle Abschnitte: Abstand nicht verdoppeln */
.sec + .sec, .sec--s + .sec, .sec + .sec--s, .sec--s + .sec--s { padding-top: 0 !important; }
.atmo.sec { padding: clamp(64px, 7vw, 104px) 0; }

/* ---------- Typo ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-stretch: 112%; font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; margin: 0; }
.d-1 { font-size: clamp(42px, 7vw, 104px); letter-spacing: -0.045em; line-height: .98; }
.d-2 { font-size: clamp(34px, 4.6vw, 66px); letter-spacing: -0.04em; }
.d-3 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.03em; line-height: 1.08; }
.d-4 { font-size: clamp(20px, 1.6vw, 24px); letter-spacing: -0.02em; line-height: 1.18; }
.g { color: var(--ink-3); }
.dark .g { color: #737891; }
.lead { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.55; color: var(--ink-2); }
.dark .lead { color: #c4c9db; }
.cap { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.dark .cap { color: #8e93ab; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 22px; }
.eyebrow svg { width: 14px; height: 14px; color: var(--blue); }
.dark .eyebrow { color: #d9c08a; }
.dark .eyebrow svg { color: #d9c08a; }
.center { text-align: center; }
.mx { margin-left: auto; margin-right: auto; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); font-size: 12px; font-weight: 500; color: var(--ink-2); background: #fff; white-space: nowrap; }
.dark .chip { background: rgba(255,255,255,.06); border-color: var(--glass-line); color: var(--on-dark-2); }
.num { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; display: inline-flex; align-items: flex-start; gap: 4px; }
.num small { font-family: var(--body); font-size: 11px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }

/* ---------- Buttons ---------- */
.btn { --h: 48px; position: relative; display: inline-flex; align-items: center; height: var(--h); border-radius: 12px; font-weight: 600; font-size: 14.5px; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.btn__l { padding: 0 20px; display: flex; align-items: center; height: 100%; }
.btn__a { width: var(--h); height: 100%; display: grid; place-items: center; border-left: 1px solid rgba(255,255,255,.12); position: relative; overflow: hidden; }
.btn__a svg { width: 15px; height: 15px; transition: transform .6s var(--ease); }
.btn__a svg + svg { position: absolute; transform: translateX(-320%); }
.btn:hover .btn__a svg:first-child { transform: translateX(320%); }
.btn:hover .btn__a svg + svg { transform: none; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-120%); transition: transform 1s var(--ease); }
.btn:hover::after { transform: translateX(120%); }
.btn:hover { transform: translateY(-1px); }
.btn--dark { background: linear-gradient(180deg, #2a2c33, #0f1014); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px #000, 0 10px 24px -10px rgba(0,0,0,.6); }
.btn--white { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(11,12,16,.06), 0 8px 20px -10px rgba(0,0,0,.35); }
.btn--white .btn__a { border-left-color: var(--line); }
.btn--blue { background: linear-gradient(180deg, #3a63ff, var(--blue-2)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -10px rgba(36,80,255,.7); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 999px; }
.btn--ghost .btn__l { padding: 0 22px; }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.dark .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.dark .btn--ghost:hover { box-shadow: inset 0 0 0 1px #fff; }
.btn--pill { border-radius: 999px; padding-right: 5px; }
.btn--pill .btn__l { padding: 0 16px 0 22px; }
.btn--pill .btn__a { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.tlink svg { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.tlink:hover svg { transform: translateX(4px); }
.tlink span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.tlink:hover span { background-size: 100% 1px; }

/* ---------- Navigation (segmentiert) ---------- */
.nav { position: fixed; z-index: 90; left: 0; right: 0; top: 0; padding: calc(var(--frame) + 8px) calc(var(--frame) + 8px) 0; transition: transform .6s var(--ease); pointer-events: none; }
.nav.is-hidden { transform: translateY(-120%); }
.nav__bar { pointer-events: auto; display: flex; gap: 4px; max-width: calc(var(--max) - 2 * var(--pad) + 8px); margin: 0 auto; padding: 4px; border-radius: 14px; background: rgba(9, 12, 24, .82); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 20px 40px -24px rgba(0,0,0,.6); }
.nav__logo { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 10px; border-radius: 10px; background: #fff; color: var(--ink); font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 15px; letter-spacing: -0.03em; flex: none; }
.nav__logo svg { width: 25px; height: 18px; }
.nav__logo .b2 { transition: transform .8s var(--ease); transform-box: fill-box; transform-origin: center; }
.nav__logo .b1 { transition: transform .8s var(--ease); }
.nav__logo:hover .b1 { transform: translate(6px, 6px); }
.nav__logo:hover .b2 { transform: translate(-6px, -6px); }
.nav__seg { position: relative; flex: 1; }
.nav__seg > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.06); color: #e7e9f2; font-size: 13.5px; font-weight: 500; transition: background .3s, color .3s; }
.nav__seg > a:hover, .nav__seg:focus-within > a, .nav__seg > a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.nav__seg > a svg { width: 10px; height: 10px; opacity: .7; transition: transform .4s var(--ease); }
.nav__seg:hover > a svg { transform: rotate(180deg); }
.nav__cta { flex: none; display: flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 10px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; transition: background .3s; }
.nav__cta:hover { background: #dfe5ff; }
.nav__burger { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.1); position: relative; }
.nav__burger i { position: absolute; left: 12px; right: 12px; height: 1.5px; background: #fff; transition: transform .5s var(--ease), top .5s var(--ease); }
.nav__burger i:first-child { top: 16px; } .nav__burger i:last-child { top: 23px; }
.menu-open .nav__burger i:first-child { top: 19.5px; transform: rotate(45deg); }
.menu-open .nav__burger i:last-child { top: 19.5px; transform: rotate(-45deg); }
/* ---------- Atmosphäre (dunkle Container) ---------- */
.dark { color: var(--on-dark); }
.atmo { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
  background: radial-gradient(120% 70% at 50% 110%, #5a74c9 0%, #2c3d78 28%, #121a38 55%, #070a17 80%); }
.atmo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grain); opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.beam { position: absolute; z-index: -1; left: 50%; top: -10%; width: 34%; height: 130%; transform: translateX(-50%) translateX(var(--bx, 0px)); pointer-events: none; transition: transform 1.6s var(--ease);
  background: radial-gradient(50% 50% at 50% 50%, rgba(159,180,255,.42), rgba(159,180,255,.09) 45%, transparent 70%); filter: blur(34px); }
.beam::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 26%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(220,230,255,.32) 55%, rgba(220,230,255,.08)); filter: blur(20px); }
.beam::after { content: ""; position: absolute; left: 50%; top: 20%; bottom: 0; width: 4%; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255,255,255,.34)); filter: blur(8px); animation: flicker 6s ease-in-out infinite; }
.atmo .lead, .atmo .hero__sub { text-shadow: 0 1px 14px rgba(5,7,15,.55); }
@keyframes flicker { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.atmo--plain { background: radial-gradient(90% 80% at 15% 110%, #2a3f86 0%, #141b37 40%, #0a0d1a 75%); }
.atmo--warm { background: radial-gradient(80% 90% at 0% 100%, #33406d 0%, #1b1c24 45%, #141417 80%); }

/* ---------- Hero Startseite ---------- */
.hero { min-height: min(100svh - 2 * var(--frame), 980px); display: flex; flex-direction: column; padding: clamp(104px, 12.5vh, 150px) var(--pad) 0; }
.hero__badge { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: clamp(20px, 3vh, 36px); }
.hero__badge svg { width: 88px; height: 28px; color: #dfe6ff; }
.hero__badge svg path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: draw 2.4s .3s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero__badge .cap { color: #b8bfd8; text-align: center; line-height: 1.6; font-size: 10.5px; }
.hero__badge .cap b { color: #fff; font-weight: 600; }
.hero h1 { color: #fff; text-align: center; font-size: clamp(40px, min(5.9vw, 9.6vh), 88px); letter-spacing: -0.045em; line-height: .98; max-width: 17ch; margin: 0 auto; text-wrap: balance; }
@media (max-width: 860px) { .hero h1 { max-width: 13ch; } }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(24px); filter: blur(8px); transition: opacity 1.2s var(--ease), transform 1.4s var(--ease), filter 1.2s var(--ease); }
.is-ready .hero h1 .w { opacity: 1; transform: none; filter: none; }
.hero__sub { color: #c9cee0; text-align: center; max-width: 58ch; margin: 22px auto 30px; font-size: clamp(16px, 1.25vw, 18px); }
.hero__cta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.fade-up { opacity: 0; transform: translateY(14px); transition: opacity 1.2s .45s var(--ease), transform 1.2s .45s var(--ease); }
.is-ready .fade-up { opacity: 1; transform: none; }
.hero__cards { margin-top: auto; padding-top: clamp(40px, 6vh, 80px); padding-bottom: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-self: center; width: calc(100% + 2 * var(--pad) - 16px); }

/* Leistungskarte (Callix-Stil) */
.scard { position: relative; background: #fff; color: var(--ink); border-radius: 16px; padding: 18px 18px 22px; min-height: 268px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  transition: transform .7s var(--ease), box-shadow .7s var(--ease); box-shadow: var(--shadow); }
.scard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(36,80,255,.08), transparent 60%); opacity: 0; transition: opacity .4s; }
.scard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.scard:hover::before { opacity: 1; }
.scard__top { display: flex; justify-content: space-between; align-items: flex-start; }
.scard__vis { flex: 1; display: grid; place-items: center; padding: 14px 0 18px; }
.squi { width: 72px; height: 88px; border-radius: 26px; overflow: hidden; background: #e9ecf5; box-shadow: 0 14px 30px -14px rgba(11,12,16,.45), inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .9s var(--ease), border-radius .9s var(--ease); }
.squi img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.2s var(--ease); }
.scard:hover .squi { transform: translateY(-4px) rotate(-4deg) scale(1.06); border-radius: 30px; }
.scard:hover .squi img { transform: scale(1.18); }
.scard h3 { font-size: clamp(18px, 1.45vw, 21px); letter-spacing: -0.03em; margin-bottom: 8px; }
.scard p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.scard__go { position: absolute; right: 16px; bottom: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transform: scale(.4); opacity: 0; transition: transform .6s var(--ease), opacity .4s; }
.scard__go svg { width: 12px; height: 12px; }
.scard:hover .scard__go { transform: none; opacity: 1; }

/* ---------- Kundenleiste ---------- */
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px clamp(28px, 4vw, 64px); }
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker__t { display: flex; width: max-content; gap: clamp(40px, 5vw, 72px); animation: ticker 48s linear infinite; }
.ticker:hover .ticker__t { animation-play-state: paused; }
.ticker__t span { font-family: var(--display); font-stretch: 118%; font-weight: 600; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.03em; color: #a3a5ae; white-space: nowrap; transition: color .4s; }
.ticker__t span:hover { color: var(--ink); }
@keyframes ticker { to { transform: translateX(-50%); } }
.partners { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.logos span { font-family: var(--display); font-stretch: 118%; font-weight: 600; font-size: clamp(16px, 1.5vw, 21px); letter-spacing: -0.03em; color: #a9abb4; transition: color .4s; white-space: nowrap; }
.logos span:hover { color: var(--ink); }

/* ---------- Split (Quantic-Stil) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-xl); overflow: hidden; min-height: 640px; }
.split__l { padding: clamp(40px, 6vw, 90px); display: flex; flex-direction: column; justify-content: center; position: relative; isolation: isolate; }
.split__r { position: relative; overflow: hidden; background: #ebe7dd; display: grid; place-items: center; padding: 40px; }
.split__r::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: multiply; pointer-events: none; }
.split__dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.split__dots button { width: 6px; height: 6px; border-radius: 50%; background: rgba(11,12,16,.25); transition: width .5s var(--ease), background .3s; }
.split__dots button[aria-current="true"] { width: 22px; border-radius: 4px; background: var(--ink); }
.liquid { position: absolute; inset: -10%; }
.liquid i { position: absolute; animation: drift 18s ease-in-out infinite alternate; }
.liquid i:nth-child(1) { width: 120%; height: 34%; left: -6%; top: 26%; border-radius: 50%; transform: rotate(-24deg); filter: blur(3px);
  background: linear-gradient(180deg, transparent 0%, #11162d 18%, #3a4a8f 38%, #c9d3ff 50%, #2c3a75 62%, #0c1024 82%, transparent 100%); box-shadow: 0 40px 80px -20px rgba(10,14,35,.5); }
.liquid i:nth-child(2) { width: 110%; height: 20%; left: 4%; top: 46%; border-radius: 50%; transform: rotate(-12deg); filter: blur(2px); animation-duration: 14s;
  background: linear-gradient(180deg, transparent, #1a2148 25%, #8292d8 48%, #eef1ff 54%, #4a5aa3 66%, #0d1128 85%, transparent); }
.liquid i:nth-child(3) { width: 60%; height: 60%; left: 50%; top: -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,170,130,.45), transparent); filter: blur(30px); animation-duration: 24s; }
.liquid i:nth-child(4) { width: 50%; height: 50%; left: -10%; top: 50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150,170,255,.35), transparent); filter: blur(30px); animation-duration: 28s; }
@keyframes drift { from { translate: -3% -2%; rotate: 0deg; } to { translate: 4% 3%; rotate: 6deg; } }
.gcard { position: relative; z-index: 2; width: min(340px, 100%); padding: 28px; border-radius: 22px; background: var(--glass); color: #fff; -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 30px 60px -20px rgba(5,7,15,.6); transition: transform .8s var(--ease); transform-style: preserve-3d; }
.gcard__ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--glass-line); margin-bottom: 40px; }
.gcard__ico svg { width: 20px; height: 20px; color: #fff; }
.gcard .cap { color: #b4b9cf; margin-bottom: 10px; display: block; }
.gcard h3 { font-size: 23px; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 14px; }
.gcard p { font-size: 13.5px; color: #c3c7d6; line-height: 1.6; margin: 0; }
.gcard__refs { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--glass-line); font-size: 12.5px; color: #9fa5bd; }
.gcard__refs a { color: #fff; }
.gcard__refs a:hover { text-decoration: underline; }
.gstack { position: relative; z-index: 2; width: min(340px, 100%); display: grid; }
.gstack > .gcard { grid-area: 1 / 1; transition: opacity .7s, transform .9s var(--ease), visibility .7s; }
.gstack > .gcard:not(.is-cur) { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.97); }

/* ---------- Feature-Karte blau mit isometrischen Kacheln ---------- */
.blue { position: relative; overflow: hidden; border-radius: var(--r-xl); background: linear-gradient(160deg, #3460ff, #1f45f0 55%, #1a39d4); color: #fff; min-height: 560px; isolation: isolate; }
.blue::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .08; mix-blend-mode: overlay; z-index: 2; pointer-events: none; }
.iso { position: absolute; right: -20%; top: -26%; width: 86%; height: 150%; perspective: 2000px; z-index: 0; }
.iso__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; transform: rotateX(56deg) rotateZ(-38deg); transform-style: preserve-3d; }
.tile { position: relative; aspect-ratio: 1.55; border-radius: 22px; background: #fff; color: #10131f; display: grid; place-items: center; transform-style: preserve-3d;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, -14px 22px 30px -10px rgba(5,15,90,.45); transition: transform .9s var(--ease), background .4s; font-family: var(--display); font-stretch: 120%; font-weight: 700; font-size: clamp(14px, 1.5vw, 22px); letter-spacing: -0.03em; }
.tile--b { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.tile--o { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); border: 0; }
.tile--o::after { content: ""; position: absolute; inset: 6px; border-radius: 18px; border: 1px dashed rgba(255,255,255,.2); }
.tile--a { background: #fff; }
.tile--a svg { width: 46%; height: auto; }
.tile:hover { transform: translateZ(40px); }
.blue__txt { position: absolute; z-index: 3; left: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); max-width: 440px; }
.blue__txt h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.04; margin-bottom: 14px; }
.blue__txt p { color: rgba(255,255,255,.82); font-size: 15px; margin: 0; }
.blue__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #1e40e6 0%, #1e40e6 34%, rgba(30,64,230,.75) 46%, rgba(30,64,230,0) 62%); pointer-events: none; }

/* ---------- Karten mit Mini-Visuals ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.vcard { background: #fff; border-radius: var(--r-l); padding: 26px 26px 0; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.vcard h3 { font-size: 22px; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 10px; }
.vcard p { color: var(--ink-3); font-size: 14.5px; margin: 0 0 24px; }
.vis { margin-top: auto; height: 210px; position: relative; display: grid; place-items: end center; }
/* Kontaktkarte */
.v-contact { width: 78%; background: #f6f7fa; border-radius: 16px 16px 0 0; padding: 18px; box-shadow: inset 0 0 0 1px var(--line); transform: translateY(14px); transition: transform .8s var(--ease); }
.vcard:hover .v-contact { transform: translateY(0); }
.v-contact__p { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.v-av { display: grid !important; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, #1b2347, #3b54b8); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 14px; position: relative; }
.v-av::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #2ec27e; box-shadow: 0 0 0 2px #f6f7fa; }
.v-contact__p strong { display: block; font-size: 14px; }
.v-contact__p span { display: block; font-size: 12px; color: var(--ink-3); }
.v-bubble { background: #fff; border-radius: 12px 12px 12px 4px; padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); box-shadow: var(--shadow); margin-bottom: 8px; max-width: 90%; }
.v-bubble--me { margin-left: auto; border-radius: 12px 12px 4px 12px; background: var(--blue); color: #fff; }
/* Angebot / Beleg */
.v-doc { width: 62%; background: #fff; border-radius: 10px 10px 0 0; padding: 18px 18px 26px; box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(11,12,16,.25); transform: rotate(-4deg) translateY(18px); transition: transform .9s var(--ease); position: relative; }
.vcard:hover .v-doc { transform: rotate(0) translateY(6px); }
.v-doc .cap { display: block; margin-bottom: 12px; font-size: 9.5px; }
.v-doc i { display: block; height: 7px; border-radius: 4px; background: #eceef3; margin-bottom: 8px; }
.v-doc i:nth-of-type(2) { width: 80%; } .v-doc i:nth-of-type(3) { width: 64%; } .v-doc i:nth-of-type(4) { width: 72%; }
.v-doc__sum { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.v-doc__stamp { position: absolute; right: -14px; top: 30px; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--blue); color: var(--blue); display: grid; place-items: center; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(14deg); background: rgba(255,255,255,.85); }
/* Telefon mit Kurve */
.v-phone { width: 150px; height: 196px; border-radius: 28px 28px 0 0; background: #0d0f15; padding: 9px 9px 0; box-shadow: 0 20px 40px -18px rgba(11,12,16,.5); transform: translateY(20px); transition: transform .9s var(--ease); }
.vcard:hover .v-phone { transform: translateY(4px); }
.v-phone__s { height: 100%; border-radius: 20px 20px 0 0; background: #fff; padding: 22px 12px 0; position: relative; overflow: hidden; }
.v-phone__s::before { content: ""; position: absolute; top: 7px; left: 50%; width: 46px; height: 12px; border-radius: 8px; background: #0d0f15; transform: translateX(-50%); }
.v-phone__s .cap { font-size: 8.5px; display: block; }
.v-phone__s strong { display: block; font-family: var(--display); font-size: 17px; letter-spacing: -0.03em; margin: 2px 0 8px; }
.v-bars { display: flex; align-items: flex-end; gap: 5px; height: 84px; }
.v-bars i { flex: 1; border-radius: 4px 4px 0 0; background: #e3e8ff; height: var(--h); transform-origin: bottom; transform: scaleY(.3); transition: transform 1s var(--ease); }
.v-bars i:last-child { background: var(--blue); }
.vcard:hover .v-bars i, .v-bars.is-in i { transform: none; }
.v-bars i:nth-child(2) { transition-delay: .05s; } .v-bars i:nth-child(3) { transition-delay: .1s; } .v-bars i:nth-child(4) { transition-delay: .15s; } .v-bars i:nth-child(5) { transition-delay: .2s; } .v-bars i:nth-child(6) { transition-delay: .25s; }

/* ---------- Abschnittsköpfe ---------- */
.shead { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 60px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.shead--c { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.shead--c .lead { max-width: 56ch; }
.shead .lead { margin: 0; }

/* ---------- Projekte ---------- */
.projs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.proj { grid-column: span 4; position: relative; display: block; border-radius: var(--r-l); overflow: hidden; background: #dfe1e8; isolation: isolate; aspect-ratio: 4 / 3.4; }
.proj--w { grid-column: span 8; aspect-ratio: auto; min-height: 100%; }
.proj--h { grid-column: span 6; aspect-ratio: 4 / 3; }
.proj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.proj:hover img { transform: scale(1.05); }
.proj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(5,7,15,.5)); opacity: .6; transition: opacity .6s; }
.proj:hover::after { opacity: 1; }
.proj__g { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; padding: 16px 18px; border-radius: 14px; background: rgba(14, 17, 30, .5); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; transform: translateY(6px); transition: transform .7s var(--ease), background .4s; }
.proj:hover .proj__g { transform: none; background: rgba(14, 17, 30, .62); }
.proj__g strong { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: 18px; letter-spacing: -0.02em; }
.proj__g span { grid-column: 1; font-size: 12.5px; color: #c4c8d8; }
.proj__g b { grid-row: 1 / 3; grid-column: 2; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; transition: transform .6s var(--ease); }
.proj__g b svg { width: 13px; height: 13px; }
.proj:hover .proj__g b { transform: rotate(-45deg); }
.proj.is-hidden { display: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 28px; }
.seg button { height: 36px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: background .3s, color .3s; }
.seg button:hover { color: var(--ink); background: #f3f4f7; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.seg sup { font-size: 10px; margin-left: 3px; opacity: .6; }

/* ---------- Prozess ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.step { position: relative; padding: 24px; border-radius: 18px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .5s, transform .7s var(--ease); min-height: 290px; display: flex; flex-direction: column; }
.step:hover { background: rgba(255,255,255,.08); transform: translateY(-4px); }
.step__top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 48px; }
.step .num { color: #fff; font-size: 30px; }
.step h3 { font-size: 21px; letter-spacing: -0.025em; margin-bottom: 10px; }
.step p { font-size: 14px; color: var(--on-dark-2); margin: 0; }
.step__out { margin-top: auto; padding-top: 12px; margin-bottom: 0; } .step p { margin-bottom: 18px !important; } .step__out { padding-top: 12px; border-top: 1px solid var(--glass-line); font-size: 12.5px; color: #cfd4e6; display: flex; gap: 8px; }
.step__out svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: #8fa6ff; }
.step__bar { position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #8fa6ff, transparent); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease); }
.step.is-in .step__bar { transform: scaleX(1); }
.step:nth-child(2) .step__bar { transition-delay: .15s; } .step:nth-child(3) .step__bar { transition-delay: .3s; } .step:nth-child(4) .step__bar { transition-delay: .45s; }

/* ---------- Fakten ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fact { background: #fff; border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow); }
.fact__n { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: clamp(44px, 4.6vw, 70px); letter-spacing: -0.05em; line-height: 1; }
.fact__n sup { font-size: .42em; color: var(--blue); vertical-align: top; position: relative; top: .3em; margin-left: 2px; }
.fact__l { margin-top: 16px; font-size: 14px; color: var(--ink-3); }
.dark .fact { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--glass-line); }

/* ---------- Testimonials ---------- */
.tm { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.tm::-webkit-scrollbar { display: none; }
.tq { margin: 0; scroll-snap-align: start; background: #fff; border-radius: var(--r-l); padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 290px; }
.tq blockquote { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.tq figcaption { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-3); }
.tq figcaption strong { display: block; color: var(--ink); font-size: 14px; }
.tq .av { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, #e9ecf7, #cfd6f2); display: grid; place-items: center; font-weight: 600; color: var(--ink-2); }
.stars { color: #f5a524; letter-spacing: 2px; font-size: 14px; }
.tm-nav { display: flex; gap: 8px; }
.tm-head { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }
.tm-nav button { width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: background .3s, color .3s; }
.tm-nav button:hover { background: var(--ink); color: #fff; }
.tm-nav svg { width: 15px; height: 15px; }
.rating { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.rating b { font-family: var(--display); font-size: 18px; background: var(--ink); color: #fff; border-radius: 8px; padding: 4px 8px; }

/* ---------- Branchen-Raster (ohne Carousel) ---------- */
.inds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ind { background: #fff; border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.ind h3 { font-size: 20px; letter-spacing: -0.025em; line-height: 1.15; }
.ind p { font-size: 14px; color: var(--ink-2); margin: 0; }
.ind__refs { margin-top: auto; font-size: 12.5px; color: var(--ink-3); }
.ind__refs a { color: var(--ink); font-weight: 500; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 8px; }
.faq-sec { display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px 60px; align-items: start; }
.faq-sec > div:first-child { position: sticky; top: 100px; }
.faq details { background: #fff; border-radius: 16px; box-shadow: var(--shadow); transition: box-shadow .4s; }
.faq details[open] { box-shadow: var(--shadow-lg); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 24px; font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.pm { width: 30px; height: 30px; flex: none; border-radius: 9px; background: #f2f3f6; position: relative; transition: background .3s, transform .6s var(--ease); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--ease); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq summary:hover .pm { background: #e6e8ee; }
.faq details[open] .pm { background: var(--ink); color: #fff; transform: rotate(180deg); }
.faq details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.faq__a { padding: 0 24px 22px; color: var(--ink-2); max-width: 70ch; font-size: 15px; }

/* ---------- CTA ---------- */
.cta { text-align: center; padding: clamp(80px, 10vw, 140px) var(--pad); }
.cta h2 { color: #fff; font-size: clamp(36px, 5.6vw, 80px); letter-spacing: -0.045em; max-width: 14ch; margin: 0 auto; }
.cta .lead { max-width: 46ch; margin: 22px auto 34px; }
.contact-card { display: inline-flex; align-items: center; gap: 14px; margin-top: 44px; padding: 10px 18px 10px 10px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: left; }
.contact-card .v-av { width: 46px; height: 46px; }
.contact-card .v-av::after { box-shadow: 0 0 0 2px #1a2242; }
.contact-card strong { display: block; color: #fff; font-size: 14.5px; }
.contact-card span { display: block; color: var(--on-dark-2); font-size: 12.5px; }
.contact-card a { color: #fff; }
.contact-card a:hover { text-decoration: underline; }

/* ---------- Unterseiten-Hero (Split) ---------- */
.phero { display: grid; grid-template-columns: 1.2fr 1fr; min-height: min(88svh, 840px); }
.phero__l { padding: clamp(120px, 14vh, 160px) clamp(24px, 4.5vw, 72px) clamp(36px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: flex-end; }
.phero__l h1 { color: #fff; font-size: clamp(34px, 3.7vw, 58px); letter-spacing: -0.038em; line-height: 1.04; max-width: 17ch; }
.phero__l .lead { margin: 24px 0 32px; max-width: 52ch; }
.phero__r { position: relative; margin: calc(var(--frame) + 64px) var(--frame) var(--frame); border-radius: calc(var(--r-xl) - 6px); overflow: hidden; background: #ebe7dd; display: grid; place-items: center; padding: 30px; }
.phero__r::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .25; mix-blend-mode: multiply; pointer-events: none; }
.phero--img .phero__r { padding: 0; background: #1a1d29; min-height: 520px; }
.phero--img .phero__r img { position: absolute; inset: 0; }
.phero--img .phero__r img { width: 100%; height: 100%; object-fit: cover; }
.phero--c { display: block; min-height: 0; text-align: center; padding: clamp(140px, 17vh, 190px) var(--pad) clamp(64px, 7vw, 104px); }
.phero--c h1 { color: #fff; font-size: clamp(38px, 5.2vw, 78px); letter-spacing: -0.045em; max-width: 15ch; margin: 0 auto; }
.phero--c .lead { max-width: 54ch; margin: 24px auto 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #8e93ab; margin-bottom: 26px; }
.crumbs a:hover { color: #fff; }
.phero--c .crumbs { justify-content: center; }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts-list li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--glass-line); font-size: 13.5px; color: #e4e7f1; }
.facts-list li span { color: #9095ad; }

/* ---------- Leistungsseiten-Bausteine ---------- */
.probs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pcard { background: #fff; border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow); min-height: 250px; display: flex; flex-direction: column; }
.pcard__top { display: flex; justify-content: space-between; padding-bottom: 56px; }
.pcard h3 { font-size: 20px; letter-spacing: -0.025em; margin-bottom: 10px; line-height: 1.15; }
.pcard p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.appr { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.appr__main { border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 420px; }
.appr__main p { font-family: var(--display); font-stretch: 108%; color: #fff; font-size: clamp(20px, 1.9vw, 28px); letter-spacing: -0.025em; line-height: 1.3; margin: 0; }
.appr__list { display: grid; gap: 12px; }
.prin { background: #fff; border-radius: var(--r-l); padding: 24px 26px; box-shadow: var(--shadow); display: grid; grid-template-columns: 44px 1fr; gap: 16px; transition: transform .6s var(--ease); }
.prin:hover { transform: translateX(6px); }
.prin__i { width: 44px; height: 44px; border-radius: 12px; background: #eef1ff; color: var(--blue); display: grid; place-items: center; font-family: var(--display); font-weight: 600; }
.prin strong { display: block; font-size: 16.5px; letter-spacing: -0.01em; margin-bottom: 4px; }
.prin span { font-size: 14.5px; color: var(--ink-2); }
.mods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.mod { background: #fff; border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; transition: box-shadow .5s, transform .6s var(--ease); position: relative; overflow: hidden; }
.mod::before { content: ""; position: absolute; inset: 0; background: radial-gradient(300px circle at var(--mx, 0) var(--my, 0), rgba(36,80,255,.07), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.mod:hover::before { opacity: 1; }
.mod:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.mod__top { display: flex; justify-content: space-between; align-items: center; }
.mod h3 { font-size: 21px; letter-spacing: -0.025em; }
.mod p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.mod ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mod li { font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 7px; background: #f3f4f7; color: var(--ink-2); }
.svc2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.svc4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bigs { position: relative; display: grid; grid-template-columns: 1fr 160px; gap: 20px; background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); min-height: 340px; overflow: hidden; transition: transform .7s var(--ease), box-shadow .7s; }
.bigs:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.bigs h2 { font-size: clamp(30px, 3.2vw, 46px); letter-spacing: -0.04em; margin: 36px 0 14px; }
.bigs p { color: var(--ink-2); font-size: 15px; max-width: 46ch; }
.bigs ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bigs li { font-size: 12px; font-weight: 500; padding: 5px 9px; border-radius: 7px; background: #f3f4f7; color: var(--ink-2); }
.bigs__img { border-radius: 26px; overflow: hidden; align-self: center; aspect-ratio: 3 / 4; box-shadow: 0 20px 40px -20px rgba(11,12,16,.5); transition: transform 1s var(--ease); }
.bigs__img img { width: 100%; height: 100%; object-fit: cover; }
.bigs:hover .bigs__img { transform: rotate(-3deg) scale(1.04); }

/* ---------- Projektdetail ---------- */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gal figure { margin: 0; background: #fff; border-radius: var(--r-l); padding: 10px; box-shadow: var(--shadow); }
.gal figure.w { grid-column: 1 / 3; }
.gal img { width: 100%; border-radius: 12px; }
.gal figcaption { font-size: 13px; color: var(--ink-3); padding: 10px 6px 4px; }
.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pnav a { background: #fff; border-radius: var(--r-l); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; transition: transform .6s var(--ease); }
.pnav a:last-child { text-align: right; }
.pnav a:hover { transform: translateY(-3px); }
.pnav strong { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.03em; }

/* ---------- Team / Agentur ---------- */
.team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.mem { background: #fff; border-radius: var(--r-l); padding: 10px 10px 18px; box-shadow: var(--shadow); }
.mem__pic { aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; position: relative; overflow: hidden; color: #fff; font-family: var(--display); font-stretch: 115%; font-weight: 600; font-size: 38px; letter-spacing: -0.04em;
  background: radial-gradient(90% 90% at 50% 110%, #5a74c9, #1b2550 55%, #0b1022); }
.mem__pic::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .12; mix-blend-mode: overlay; }
.mem__pic i { position: absolute; left: 50%; top: -20%; width: 30%; height: 140%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(159,180,255,.45), transparent); filter: blur(10px); transition: transform 1s var(--ease); }
.mem:hover .mem__pic i { transform: translateX(-50%) scaleX(2.2); }
.mem h3 { font-size: 16px; letter-spacing: -0.02em; margin: 14px 6px 2px; }
.mem p { font-size: 13px; color: var(--ink-3); margin: 0 6px; }
.locs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.loc { background: #fff; border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow); }
.loc h3 { font-size: 24px; margin: 30px 0 8px; }
.loc p { color: var(--ink-2); font-size: 14.5px; margin: 0; }

/* ---------- Kontakt ---------- */
.kgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; align-items: start; }
.form-card { background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--shadow-lg); }
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field input[type="number"], .field input[type="date"], .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15.5px; padding: 13px 14px; border-radius: 11px; border: 1px solid var(--line-2); background: #fafafb; color: var(--ink); transition: border-color .25s, box-shadow .25s, background .25s; -webkit-appearance: none; appearance: none; }
.field select { background: #fafafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%234a4c55' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 14px center / 11px no-repeat; padding-right: 36px; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(36,80,255,.12); }
.field [aria-invalid="true"] { border-color: #d0342c; }
.field__err { color: #c2271f; font-size: 13px; margin: 0; }
.field__help { color: var(--ink-3); font-size: 13px; margin: 0; }
.field--check { grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.field--check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); }
.field--check label { font-weight: 400; font-size: 13.5px; color: var(--ink-2); }
.form__error { background: #fde8e6; color: #9c1c15; padding: 12px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.form__done h2 { margin: 18px 0 12px; }
.dlist { display: grid; gap: 8px; margin-top: 28px; }
.dlist a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--glass-line); transition: background .3s, transform .6s var(--ease); }
.dlist a:hover { background: rgba(255,255,255,.1); transform: translateX(4px); }
.dlist small { display: block; color: #9095ad; font-size: 12px; }
.dlist strong { color: #fff; font-weight: 600; font-size: 15.5px; }
.dlist svg { width: 14px; height: 14px; color: #fff; }

/* ---------- Footer ---------- */
.ftr { padding: clamp(56px, 7vw, 96px) var(--pad) 22px; border-radius: var(--r-xl); }
.ftr__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: clamp(48px, 6vw, 80px); }
.ftr h2 { font-family: var(--body); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7c819a; margin-bottom: 16px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.ftr ul a { color: #d7dae6; transition: color .3s; }
.ftr ul a:hover { color: #fff; }
.ftr ul li { color: #8e93ab; }
.ftr__about p { color: #9ea3ba; font-size: 14.5px; max-width: 34ch; margin: 18px 0 20px; }
.ftr__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.ftr__mark { display: block; width: 100%; height: auto; margin: 0 0 14px; user-select: none; }
.ftr__mark text { font-family: var(--display); font-stretch: 125%; font-weight: 600; letter-spacing: -0.06em; }
.ftr__bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding-top: 20px; border-top: 1px solid var(--glass-line); font-size: 13px; color: #8e93ab; }
.ftr__bot a:hover { color: #fff; }

.prose { max-width: 74ch; background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 4vw, 56px); box-shadow: var(--shadow); }
.prose h2 { font-size: 22px; margin: 1.8em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); font-size: 15.5px; }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
.js .rv[data-d="1"] { transition-delay: .06s; } .js .rv[data-d="2"] { transition-delay: .12s; } .js .rv[data-d="3"] { transition-delay: .18s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__seg, .nav__cta { display: none; }
  .nav__burger { display: block; }
  .nav__bar { max-width: none; }
  .hero__cards, .steps, .inds, .facts { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(3, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }
  .tm { grid-auto-columns: calc((100% - 12px) / 2); }
}
@media (max-width: 860px) {
  .split, .phero, .appr, .kgrid, .shead, .svc4, .faq-sec { grid-template-columns: 1fr; }
  .faq-sec > div:first-child { position: static; }
  .phero__l h1 { max-width: none; }
  .split__r { min-height: 460px; }
  .phero { min-height: 0; }
  .phero__r { min-height: 400px; }
  .phero__l { padding-bottom: 32px; }
  .scard h3 { font-size: 20px; }
  .cards3, .probs, .mods, .svc2 { grid-template-columns: 1fr; }
  .proj, .proj--w, .proj--h { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .blue { min-height: 520px; }
  .iso { width: 140%; right: -30%; top: -30%; }
  .gal { grid-template-columns: 1fr; } .gal figure.w { grid-column: auto; }
  .bigs { grid-template-columns: 1fr; } .bigs__img { width: 140px; }
  .tm { grid-auto-columns: 85%; }
}
@media (max-width: 560px) {
  .hero__cards, .steps, .inds, .facts, .locs, .pnav { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .ftr__top { grid-template-columns: 1fr; }
  .scard { min-height: 250px; }
  .facts-list li { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .rv, .fade-up, .hero h1 .w { opacity: 1; transform: none; filter: none; }
  .hero__badge svg path { stroke-dashoffset: 0; }
}
/* Formular-Karte im dunklen Hero: eigene, dunkle Textfarbe */
.form-card { color: var(--ink); }
.form-card .chip { background: #fff; border-color: var(--line-2); color: var(--ink-2); }

/* Container nicht intern scrollbar machen (Fokus/scrollIntoView verschiebt sonst den Inhalt) */
.atmo, .split, .split__r, .blue, .phero__r, .proj, .scard, .bigs, .vcard, .ticker, .tm { overflow: hidden; overflow: clip; }
.tm { overflow-x: auto; }

/* Lichtkegel in zentrierten Abschnitten dezenter */
.cta .beam, .phero--c .beam { opacity: .55; }
/* Kontaktformular: angenehme Breite, zentriert */
.form-card { max-width: 640px; justify-self: center; }

/* Zweiteilige Titel in großen Leistungskarten immer zweizeilig */
.bigs h2 .g { display: block; }
/* Mobile: rechte Hero-Spalte ohne Navigationsabstand */
@media (max-width: 860px) { .phero__r { margin-top: var(--frame); } }
/* Screenshots im Browserfenster */
.proj--shot { background: radial-gradient(120% 90% at 50% 0%, #f4f5f8, #dde1ea); }
.proj--shot::after { background: linear-gradient(180deg, transparent 55%, rgba(5,7,15,.35)); }
.proj--shot { display: grid; place-items: center; }
.shot { position: relative; width: 84%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -24px rgba(11,12,16,.4), 0 0 0 1px rgba(11,12,16,.06); transition: transform 1.2s var(--ease); margin-bottom: 14%; }
.proj:hover .shot, .phero__r:hover .shot { transform: translateY(-8px); }
.shot__bar { height: 24px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #f3f4f7; border-bottom: 1px solid #e6e7ec; }
.shot__bar i { width: 8px; height: 8px; border-radius: 50%; background: #d4d6dd; }
.proj .shot img, .phero__r .shot img { position: static; inset: auto; display: block; width: 100%; height: auto; transform: none !important; }
.phero__r .shot { width: 88%; margin: 0; }
.phero--img .phero__r.has-shot { background: radial-gradient(120% 90% at 50% 0%, #f4f5f8, #d9dde7); }

/* Mobile Feinschliff */
@media (max-width: 860px) {
  .blue__shade { background: linear-gradient(0deg, #1e40e6 0%, #1e40e6 42%, rgba(30,64,230,.7) 58%, rgba(30,64,230,0) 78%); }
  .phero__r:has(.form-card) { padding: 8px; }
  .form-card { max-width: none; }
  .pcard__top { padding-bottom: 28px; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .fact { padding: 20px; }
  .fact__n { font-size: 40px; }
  .fact__l { font-size: 13px; margin-top: 10px; }
}

/* ---------- Trust-Siegel ---------- */
.seals-box { background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 40px); }
.seals-box__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 40px; margin-bottom: clamp(24px, 3vw, 36px); }
.seals { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--line); }
.seal { display: flex; flex-direction: column; gap: 14px; padding: 24px 18px 6px; border-left: 1px solid var(--line); }
.seal:first-child { border-left: 0; padding-left: 0; }
.seal__em { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none;
  background: radial-gradient(circle at 50% 30%, #2a3a78, #0d1228 70%); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #d7dcef, 0 12px 24px -10px rgba(11,16,40,.55); transition: transform .8s var(--ease), box-shadow .5s; }
.seal__em::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed #c6cce3; transition: transform 1.6s var(--ease); }
.seal__em > svg { width: 26px; height: 26px; }
.seal__ok { position: absolute; right: -4px; bottom: -2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); box-shadow: 0 0 0 2.5px #fff; }
.seal__ok svg { width: 11px; height: 11px; color: #fff; }
.seal:hover .seal__em { transform: translateY(-3px); box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px #9fb1ff, 0 16px 30px -10px rgba(36,80,255,.55); }
.seal:hover .seal__em::before { transform: rotate(90deg); }
.seal__t small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.seal__t strong { display: block; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; margin: 2px 0 6px; }
.seal__t > span { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.seals-mini { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
.seal-mini { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.seal-mini .seal__em { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(255,255,255,.14); background: rgba(255,255,255,.07); }
.seal-mini .seal__em::before, .seal-mini .seal__ok { display: none; }
.seal-mini .seal__em > svg { width: 18px; height: 18px; }
.seal-mini small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8e94ad; }
.seal-mini strong { display: block; font-size: 13.5px; font-weight: 600; color: #fff; }
.dlist + div .seals-mini, .phero__l .seals-mini { justify-content: flex-start; }
@media (max-width: 1100px) { .seals { grid-template-columns: repeat(3, 1fr); } .seal:nth-child(4) { border-left: 0; padding-left: 0; } .seal:nth-child(n+4) { border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .seals { grid-template-columns: 1fr 1fr; } .seal { padding: 20px 12px 8px; } .seal:nth-child(odd) { border-left: 0; padding-left: 0; } .seal:nth-child(even) { border-left: 1px solid var(--line); } .seal:nth-child(n+3) { border-top: 1px solid var(--line); } .seals-mini { justify-content: flex-start; } }

/* ---------- Case Study ---------- */
.cs-hero { padding: clamp(130px, 15vh, 170px) var(--pad) clamp(48px, 6vw, 88px); }
.cs-hero__in { max-width: var(--max); margin: 0 auto; padding: 0 clamp(0px, 2vw, 32px); }
.cs-hero h1 { color: #fff; font-size: clamp(40px, 6vw, 92px); letter-spacing: -0.045em; line-height: .98; max-width: 16ch; }
.cs-hero .lead { margin: 24px 0 0; max-width: 56ch; font-size: clamp(18px, 1.5vw, 22px); }
.cs-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 24px; margin: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--glass-line); }
.cs-meta div { padding: 16px 0; border-bottom: 1px solid var(--glass-line); }
.cs-meta dt { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8e93ab; margin-bottom: 6px; }
.cs-meta dd { margin: 0; color: #fff; font-size: 15px; }
.cs-cover { margin: 0; border-radius: var(--r-xl); overflow: hidden; background: #dfe1e8; aspect-ratio: 16 / 9; box-shadow: var(--shadow-lg); }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; }
.cs-cover--shot { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 0%, #f4f5f8, #d9dde7); padding: 5% 8% 0; align-items: end; }
.cs-cover--shot .shot { width: 100%; margin: 0; border-radius: 14px 14px 0 0; }
.cs-body { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.cs-side { position: sticky; top: 100px; }
.cs-card { background: #fff; border-radius: var(--r-l); padding: 26px; box-shadow: var(--shadow); }
.cs-card__t { display: block; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; margin: 6px 0 16px; }
.cs-card dl { margin: 0; }
.cs-card dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cs-card dt { color: var(--ink-3); }
.cs-card dd { margin: 0; }
.cs-svcs { display: grid; gap: 6px; }
.cs-svcs a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: #f3f4f7; font-size: 14px; font-weight: 600; transition: background .3s, color .3s; }
.cs-svcs a svg { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.cs-svcs a:hover { background: var(--ink); color: #fff; }
.cs-svcs a:hover svg { transform: translateX(3px); }
.cs-main { display: grid; gap: clamp(40px, 5vw, 72px); }
.cs-block { position: relative; padding-top: 24px; border-top: 1px solid var(--line-2); }
.cs-n { position: absolute; top: 24px; right: 0; font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 14px; color: var(--blue); }
.cs-block h2 { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.035em; margin-bottom: 20px; }
.cs-block p { font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 66ch; }
.cs-big { font-family: var(--display); font-stretch: 106%; font-size: clamp(20px, 1.9vw, 27px) !important; line-height: 1.35 !important; letter-spacing: -0.02em; color: var(--ink) !important; }
.cs-built { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cs-built li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); font-size: 15px; font-weight: 500; }
.cs-built svg { width: 18px; height: 18px; flex: none; color: var(--blue); margin-top: 2px; }
.cs-block--result { border-top-color: var(--blue); }
.cs-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.cs-shots figure { margin: 0; padding: clamp(16px, 2.4vw, 36px); border-radius: var(--r-xl); background: radial-gradient(120% 90% at 50% 0%, #f7f8fb, #dfe3ec); }
.cs-shots .shot { width: 100%; margin: 0; }
.cs-shots--one { grid-template-columns: 1fr; }
@media (max-width: 960px) { .cs-body { grid-template-columns: 1fr; } .cs-side { position: static; order: 2; } }
@media (max-width: 640px) { .cs-built, .cs-shots { grid-template-columns: 1fr; } .cs-cover { aspect-ratio: 4 / 3; } }
/* Karussell: alte Karte zuerst ausblenden, dann neue einblenden – keine Überlagerung */
.gstack > .gcard:not(.is-cur) { transition: opacity .25s, transform .35s var(--ease), visibility .25s; }
.gstack > .gcard.is-cur { transition: opacity .5s .25s, transform .8s .25s var(--ease), visibility 0s; }

.badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.badges img { height: 72px; width: auto; object-fit: contain; }

/* ---------- Leistungen-Menü (dezent) ---------- */
.dd { position: absolute; left: 0; top: calc(100% + 10px); width: 340px; padding: 6px; border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(11,12,16,.06), 0 24px 48px -20px rgba(11,12,16,.35); display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, transform .3s var(--ease), visibility .2s; }
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__seg:hover .dd, .nav__seg:focus-within .dd { opacity: 1; visibility: visible; transform: none; }
.dd__item { display: block; padding: 11px 14px; border-radius: 9px; transition: background .2s; }
.dd__item:hover, .dd__item:focus-visible { background: #f2f3f6; }
.dd__item strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.dd__item small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px; }
.dd__all { display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.dd__all svg { width: 13px; height: 13px; transition: transform .3s var(--ease); }
.dd__all:hover { color: var(--ink); }
.dd__all:hover svg { transform: translateX(3px); }

/* ---------- Mobiles Menü (schlicht) ---------- */
.menu { position: fixed; inset: 0; z-index: 85; overflow-y: auto; color: #fff; background: #0b0e1c; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.menu-open .menu { opacity: 1; visibility: visible; }
.menu__in { padding: 92px var(--pad) 32px; max-width: 640px; margin: 0 auto; }
.menu__cap { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7f86a3; margin-bottom: 6px; }
.menu__svc { display: grid; margin-bottom: 18px; }
.menu__svc-i { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.menu__svc-i strong { display: block; font-size: 17px; font-weight: 600; }
.menu__svc-i small { display: block; font-size: 13px; color: #9aa1bb; }
.menu__main a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-family: var(--display); font-stretch: 112%; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; }
.menu__main svg { width: 18px; height: 18px; opacity: .5; }
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 26px; font-size: 15px; color: #c3c9de; }
.menu__foot .btn { margin-bottom: 8px; }

/* ---------- Wix-Nachweis ---------- */
.hero__badge { text-decoration: none; transition: opacity .3s; }
.hero__badge:hover { opacity: .85; }
.hero__badge img { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 10px 30px -8px rgba(0,0,0,.6); }
.proof { display: grid; grid-template-columns: auto 1.2fr 1fr; gap: clamp(24px, 3.5vw, 56px); align-items: center; background: #fff; border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px); box-shadow: var(--shadow); }
.proof__badge img { width: clamp(88px, 9vw, 120px); height: auto; display: block; transition: transform .8s var(--ease); }
.proof__badge:hover img { transform: rotate(-8deg) scale(1.04); }
.proof__txt h2 { margin: 8px 0 10px; }
.proof__txt p { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; max-width: 46ch; }
.proof__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.proof__facts div { padding: 14px 16px; border-radius: 14px; background: #f4f5f8; }
.proof__facts dt { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 22px; letter-spacing: -0.03em; }
.proof__facts dd { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.proj__wix { position: absolute; z-index: 3; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px -6px rgba(0,0,0,.35); }
.proj__wix img { width: 18px; height: 18px; border-radius: 50%; }
.phero__r--badge { background: radial-gradient(120% 90% at 50% 0%, #f6f7fa, #dde1ea); }
.wixcard { display: grid; justify-items: center; gap: 22px; text-align: center; }
.wixcard img { width: clamp(150px, 16vw, 210px); height: auto; filter: drop-shadow(0 20px 30px rgba(11,12,16,.3)); }
.wixcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; width: min(360px, 100%); }
.wixcard dl div { background: #fff; border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.wixcard dt { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.wixcard dd { margin: 0; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 960px) { .proof { grid-template-columns: auto 1fr; } .proof__facts { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .proof { grid-template-columns: 1fr; } .proof__facts { grid-template-columns: 1fr 1fr; } }
.proj .proj__wix img { position: static; inset: auto; width: 18px; height: 18px; object-fit: contain; transform: none !important; transition: none; }
.wixcard { color: var(--ink); }

.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.badge-row img { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; }
.ftr .badge-row img { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

.proj__wix--wf { padding-left: 5px; }

/* Case-Study-Seitenleiste: CTA auf volle Breite */
.cs-cta { margin-top: 12px; }
.cs-cta .btn { width: 100%; }
.cs-cta .btn__l { flex: 1; }
/* Datenschutz-Link in der Formular-Checkbox */
.field--check label a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; font-weight: 600; }
.field--check label a:hover { color: var(--blue); }

/* ================= Seitenspezifische Inhaltsbausteine ================= */
.ul-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ul-ck li, .prep li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.dark .ul-ck li { color: #cdd1e0; }
.ck { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--blue); }
.dark .ck { color: #8fa6ff; }
.ck svg { width: 100%; height: 100%; }

/* Branding: Versus */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: stretch; }
.vs__c { padding: clamp(28px, 3.4vw, 52px); border-radius: var(--r-xl); border: 1px solid var(--line-2); }
.vs__c--dark { border: 0; }
.vs__c h3 { font-family: var(--display); font-stretch: 112%; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.03em; margin: 14px 0 12px; }
.vs__c > p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 44ch; }
.vs__c--dark > p { color: #c4c9db; }
.vs__k { display: block; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.vs__or { display: grid; place-items: center; width: clamp(48px, 5vw, 80px); position: relative; }
.vs__or::before { content: ""; position: absolute; top: 12%; bottom: 12%; left: 50%; width: 1px; background: var(--line-2); }
.vs__or span { position: relative; background: var(--bg); padding: 10px 0; font-size: 12.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .12em; }

/* Branding: Dateien */
.files-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.files-sec__h { position: sticky; top: 110px; }
.files-sec__h .lead { margin-top: 20px; }
.files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.file { position: relative; background: var(--card); border-radius: 16px 34px 16px 16px; padding: 26px 24px 24px; box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.file::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; background: linear-gradient(225deg, var(--bg) 50%, #dfe2ea 50%); border-radius: 0 34px 0 10px; }
.file:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.file__t { display: inline-block; font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--blue); background: #eef1ff; padding: 6px 9px; border-radius: 6px; }
.file h3 { font-size: 18px; margin: 18px 0 6px; }
.file p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.file:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Webdesign: Anatomie */
.anat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.anat__list { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; gap: 4px; }
.anat__list li { display: flex; gap: 16px; padding: 14px 16px; margin: 0 -16px; border-radius: 14px; cursor: default; outline: none; transition: background .35s var(--ease); }
.anat__list li:hover, .anat__list li:focus-visible, .anat__list li.is-on { background: var(--card); box-shadow: var(--shadow); }
.anat__n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: var(--ink); color: #fff; transition: background .3s; }
.anat__list li.is-on .anat__n { background: var(--blue); }
.anat__list strong { display: block; font-size: 16px; margin: 3px 0 4px; }
.anat__list span:not(.anat__n) { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.anat__vis { position: relative; aspect-ratio: 5 / 4; padding: 9% 14% 12% 7%; }
.wf { position: relative; height: 100%; border-radius: 14px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--glass-line); padding: 4.5%; display: grid; grid-template-rows: auto 1.5fr .5fr 1fr; gap: 6%; }
.wf i, .wf em, .wf b, .wf-ph i, .wf-ph em, .wf-ph b { display: block; border-radius: 5px; background: rgba(255,255,255,.12); }
.wf__nav { display: flex; gap: 5%; align-items: center; height: 12px; }
.wf__nav i { width: 9%; height: 6px; }
.wf__nav .wf__logo, .wf-ph .wf__logo { width: 14px; height: 14px; border-radius: 4px; background: #8fa6ff; margin-right: auto; }
.wf__nav b { width: 15%; height: 12px; background: rgba(143,166,255,.45); }
.wf__hero { display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.wf__hero i { height: 12px; background: rgba(255,255,255,.3); }
.wf__hero em { width: 38%; height: 6px; margin-top: 4px; }
.wf__hero b { width: 22%; height: 18px; margin-top: 8px; background: rgba(255,255,255,.85); }
.wf__logos { display: flex; gap: 6%; align-items: center; }
.wf__logos i { flex: 1; height: 8px; }
.wf__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5%; }
.wf__cards i { height: 100%; border-radius: 8px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px var(--glass-line); }
.wf-ph { position: absolute; right: 5%; bottom: 7%; width: 21%; aspect-ratio: 9 / 18; border-radius: 16px; background: #0d1226; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 30px 60px -20px rgba(0,0,0,.8); padding: 9% 9%; display: flex; flex-direction: column; gap: 8px; }
.wf-ph em { height: 7px; width: 85%; background: rgba(255,255,255,.3); }
.wf-ph b { width: 55%; height: 12px; margin-top: 4px; background: rgba(255,255,255,.85); }
.wf-ph__c { flex: 1; margin-top: 6px; border-radius: 6px; background: rgba(255,255,255,.08) !important; }
.wf [class*="z"], .wf-ph { transition: box-shadow .4s var(--ease), background .4s; border-radius: 8px; }
.anat__vis[data-on="1"] .z1, .anat__vis[data-on="3"] .z3, .anat__vis[data-on="4"] .z4 { box-shadow: 0 0 0 2px #8fa6ff, 0 0 0 8px rgba(143,166,255,.15); }
.anat__vis[data-on="2"] .z2 { box-shadow: 0 0 0 2px #8fa6ff, 0 0 0 7px rgba(143,166,255,.2); }
.anat__vis[data-on="5"] .wf-ph { box-shadow: 0 0 0 2px #8fa6ff, 0 0 0 9px rgba(143,166,255,.18), 0 30px 60px -20px rgba(0,0,0,.8); border-radius: 16px; }
.pin { position: absolute; left: var(--x); top: var(--y); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #fff; color: var(--ink); box-shadow: 0 6px 16px -4px rgba(0,0,0,.6); transition: transform .4s var(--ease), background .3s, color .3s; z-index: 2; }
.anat__vis[data-on="1"] .pin:nth-of-type(1), .anat__vis[data-on="2"] .pin:nth-of-type(2), .anat__vis[data-on="3"] .pin:nth-of-type(3), .anat__vis[data-on="4"] .pin:nth-of-type(4), .anat__vis[data-on="5"] .pin:nth-of-type(5) { background: var(--blue); color: #fff; transform: scale(1.18); }

/* Webdesign: Duo (wer liefert was) */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.duo__h .lead { margin-top: 20px; }
.duo__c { border-top: 2px solid var(--ink); padding-top: 22px; }
.duo__c + .duo__c { border-top-color: var(--blue); }
.duo__c .cap { display: block; margin-bottom: 18px; color: var(--ink); }

/* SEO: Vergleich */
.cmp { border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow); padding: clamp(8px, 1.4vw, 16px) clamp(16px, 2.6vw, 40px); }
.cmp__r { display: grid; grid-template-columns: minmax(120px, .7fr) repeat(3, minmax(0, 1fr)); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cmp__r:last-child { border-bottom: 0; }
.cmp__r > span { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cmp__r > span[role="rowheader"] { font-weight: 600; color: var(--ink); font-size: 14px; }
.cmp__head > span { font-family: var(--display); font-stretch: 112%; font-size: 19px; color: var(--ink); letter-spacing: -.02em; }
.cmp .cmp__hi { color: var(--ink); font-weight: 500; position: relative; }
.cmp__head .cmp__hi { color: var(--blue); }
.cmp__r > .cmp__hi::before { content: ""; position: absolute; left: -12px; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: var(--blue); }
.cmp__head > .cmp__hi::before { display: none; }

/* SEO: dunkles Band */
.band { padding: clamp(40px, 6vw, 96px) clamp(24px, 5vw, 80px); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.band__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 48px); }
.band__i { border-top: 1px solid var(--glass-line); padding-top: 20px; }
.band__n { font-size: 12.5px; color: #8fa6ff; font-variant-numeric: tabular-nums; }
.band__i h3 { color: #fff; font-size: 19px; margin: 12px 0 8px; }
.band__i p { color: #b9bed0; font-size: 15px; line-height: 1.6; margin: 0; }

/* Entwicklung: Stufen */
.lvl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.lvl__c { background: var(--card); border-radius: var(--r-xl); padding: clamp(26px, 2.6vw, 40px); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.lvl__c.atmo--plain { background: radial-gradient(90% 80% at 15% 110%, #2a3f86 0%, #141b37 40%, #0a0d1a 75%); box-shadow: none; }
.lvl__c.dark h3 { color: #fff; }
.lvl__m { display: flex; gap: 5px; margin-bottom: 28px; }
.lvl__m i { width: 28px; height: 6px; border-radius: 3px; background: var(--line-2); }
.lvl__m i.on { background: var(--blue); }
.dark .lvl__m i { background: rgba(255,255,255,.14); }
.dark .lvl__m i.on { background: #8fa6ff; }
.lvl__c h3 { font-family: var(--display); font-stretch: 112%; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.025em; margin: 10px 0 10px; }
.lvl__c p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0 0 22px; }
.dark.lvl__c p { color: #c4c9db; }
.lvl__c ul { list-style: none; margin: auto 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.dark.lvl__c ul { border-top-color: var(--glass-line); color: #cdd1e0; }
.lvl__c li::before { content: "→ "; color: var(--ink-3); }
.lvl__note { margin-top: 18px; font-size: 12.5px; color: #d9c08a; }

/* Wix: Funktions-Explorer */
.feat { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.feat__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.feat__list li { border-bottom: 1px solid var(--line-2); }
.feat__b { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: baseline; padding: 22px 0; }
.feat__b:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.feat__n { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.feat__t { font-family: var(--display); font-stretch: 112%; font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.025em; color: var(--ink-3); transition: color .35s var(--ease); }
.feat__p { font-size: 13px; color: var(--ink-3); text-align: right; }
.feat__list li.is-on .feat__t, .feat__b:hover .feat__t { color: var(--ink); }
.feat__list li.is-on .feat__n { color: var(--blue); }
.feat__d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.feat__d > * { min-height: 0; overflow: hidden; }
.feat__list li.is-on .feat__d { grid-template-rows: 1fr; }
.feat__d { padding-left: 48px; }
.feat__d p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; max-width: 46ch; }
.feat__d > div { padding-bottom: 0; transition: padding .55s var(--ease); }
.feat__list li.is-on .feat__d > div { padding-bottom: 24px; }
.feat__mimg { display: none; }
.feat__vis { position: sticky; top: 100px; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: clip; background: #dcdde3; box-shadow: var(--shadow-lg); }
.feat__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1.2s var(--ease); }
.feat__vis img.is-on { opacity: 1; transform: none; }

/* Agentur: Standorte */
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.place { padding: clamp(28px, 3.4vw, 52px); min-height: clamp(260px, 24vw, 340px); display: flex; flex-direction: column; }
.place h3 { font-family: var(--display); font-stretch: 112%; font-size: clamp(34px, 3.6vw, 56px); letter-spacing: -.04em; color: #fff; margin: 12px 0 14px; }
.place p { color: #c4c9db; font-size: 15.5px; line-height: 1.6; margin: 0; }
.place__l { margin-top: auto; padding-top: 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.place__l a { color: #fff; font-size: 14.5px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 4px; transition: text-decoration-color .3s; }
.place__l a:hover { text-decoration-color: #fff; }

/* Kontakt: animierte Timeline */
.tlx { --g: clamp(24px, 3vw, 48px); --p: 0; position: relative; }
.tlx__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); position: relative; z-index: 1; }
.tlx__track { position: absolute; top: 25px; left: 26px; width: calc((100% - 2 * var(--g)) * 2 / 3 + 2 * var(--g)); height: 2px; border-radius: 2px; background: var(--line-2); }
.tlx__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #6f8bff 60%, #a9bbff); transform: scaleX(var(--p)); transform-origin: left; transition: transform 1.5s cubic-bezier(.65, 0, .35, 1); box-shadow: 0 0 14px rgba(36,80,255,.45); }
.tlx__comet { position: absolute; top: 50%; left: 0; width: 70px; height: 6px; margin-top: -3px; border-radius: 6px; background: radial-gradient(closest-side, #fff, rgba(169,187,255,.9) 40%, transparent); filter: blur(.5px); opacity: 0; }
.tlx.is-done .tlx__comet { animation: tlx-comet 3.6s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes tlx-comet { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 70px); opacity: 0; } }
.tlx__node { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-2); margin-bottom: 28px; transition: box-shadow .6s var(--ease), background .6s var(--ease), transform .6s var(--ease); }
.tlx__node b { font-family: var(--display); font-stretch: 112%; font-size: 17px; color: var(--ink-3); transition: color .5s; }
.tlx__node::before, .tlx__node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.tlx__node::before { background: radial-gradient(circle at 30% 25%, #6f8bff, var(--blue) 55%, #1a33c9); opacity: 0; transform: scale(.4); transition: opacity .5s var(--ease), transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.tlx__node::after { box-shadow: 0 0 0 2px var(--blue); opacity: 0; }
.tlx__node b { position: relative; z-index: 1; }
.tlx li.is-on .tlx__node { box-shadow: 0 10px 26px -8px rgba(36,80,255,.65); }
.tlx li.is-on .tlx__node::before { opacity: 1; transform: none; }
.tlx li.is-on .tlx__node b { color: #fff; }
.tlx li.is-on .tlx__node::after { animation: tlx-ring 1.1s var(--ease) both; }
.tlx li.is-hot .tlx__node { transform: scale(1.1); }
.tlx li.is-hot .tlx__node::after { animation: tlx-pulse 1.6s var(--ease) infinite; }
@keyframes tlx-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
@keyframes tlx-pulse { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.tlx__c { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease); }
.tlx li.is-on .tlx__c { opacity: 1; transform: none; filter: none; }
.tlx__w { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--blue); margin-bottom: 10px; letter-spacing: .01em; }
.tlx h3 { font-size: clamp(20px, 1.6vw, 24px); margin: 0 0 10px; transition: transform .5s var(--ease); }
.tlx p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 34ch; }
.tlx li { cursor: default; }
.tlx li.is-hot h3 { transform: translateX(4px); }
.tlx:not(.is-done) li { pointer-events: none; }
@media (max-width: 760px) {
  .tlx__steps { grid-template-columns: 1fr; gap: 36px; }
  .tlx__track { display: none; }
  .tlx li { position: relative; padding-left: 72px; min-height: 52px; }
  .tlx__node { position: absolute; left: 0; top: 0; margin: 0; }
  .tlx li:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 60px; bottom: -28px; width: 2px; border-radius: 2px; background: var(--line-2); }
  .tlx li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 60px; bottom: -28px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--blue), #a9bbff); transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.65, 0, .35, 1) .15s; }
  .tlx li.is-on:not(:last-child)::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tlx__fill, .tlx__c, .tlx__node, .tlx__node::before { transition: none !important; }
  .tlx.is-done .tlx__comet, .tlx li.is-hot .tlx__node::after, .tlx li.is-on .tlx__node::after { animation: none !important; }
}
.prep { margin-top: clamp(48px, 5vw, 72px); padding: 22px clamp(24px, 2.4vw, 36px); border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; }
.prep ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prep li { padding: 8px 14px 8px 10px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; align-items: center; transition: transform .4s var(--ease), box-shadow .4s; }
.prep li:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.prep li .ck { margin-top: 0; width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo__h { grid-column: 1 / -1; }
  .band { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .vs { grid-template-columns: 1fr; }
  .vs__or { width: auto; height: 56px; }
  .vs__or::before { top: 0; bottom: 0; }
  .files-sec, .anat, .feat { grid-template-columns: 1fr; }
  .files-sec__h { position: static; }
  .lvl { grid-template-columns: 1fr; }
  .lvl__m { margin-bottom: 18px; }
  .feat__vis { display: none; }
  .feat__mimg { display: block; width: 100%; height: auto; border-radius: 14px; margin-top: 16px; }
  .feat__d { padding-left: 0; }
  .feat__p { display: none; }
  .feat__b { grid-template-columns: 32px 1fr; }
  .cmp__r { grid-template-columns: 1fr 1fr 1fr; gap: 12px 18px; }
  .cmp__r > span[role="rowheader"] { grid-column: 1 / -1; }
  .cmp__head > span:first-child { display: none; }
  .cmp__head > span { font-size: 16px; }
  .cmp__r > span[role="cell"] { font-size: 14px; }
}
@media (max-width: 640px) {
  .files, .places, .duo { grid-template-columns: 1fr; }
  .band__g { grid-template-columns: 1fr; }
  .cmp__head { display: none; }
  .cmp__r { grid-template-columns: 1fr; gap: 8px; }
  .cmp__r > span[role="cell"]::before { content: attr(data-l) " · "; font-weight: 600; color: var(--ink); }
  .cmp__r > .cmp__hi::before { content: attr(data-l) " · "; position: static; width: auto; background: none; color: var(--blue); }
  .anat__vis { padding: 9% 12% 12% 6%; }
  .anat__list li { margin: 0 -8px; padding: 12px 8px; gap: 12px; }
}

/* Agentur: persönlicher Text */
.letter { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: clamp(32px, 7vw, 140px); align-items: start; }
.letter__side { position: sticky; top: 110px; }
.letter__who { display: flex; align-items: center; gap: 14px; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.letter__who strong { display: block; color: var(--ink); font-size: 15px; }
.letter__who .v-av { width: 48px; height: 48px; font-size: 14px; }
.letter__body { max-width: 66ch; }
.letter__body p { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.75; color: var(--ink-2); margin: 0 0 1.2em; }
.letter__body .letter__lead { font-family: var(--display); font-stretch: 112%; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.15; letter-spacing: -.03em; color: var(--ink); margin-bottom: .9em; }
.letter__body .letter__end { color: var(--ink); font-weight: 500; margin-top: 1.6em; }
.letter__sig { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-3); }
.letter__name { font-family: var(--display); font-stretch: 112%; font-size: 22px; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
@media (max-width: 860px) {
  .letter { grid-template-columns: 1fr; }
  .letter__side { position: static; }
}

/* Team: echtes Foto */
.mem__pic--img { background: #d9dbe2; }
.mem__pic--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1s var(--ease); }
.mem__pic--img::after { opacity: .06; }
.mem:hover .mem__pic--img img { transform: scale(1.04); }
.team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mem__pic--img { aspect-ratio: 4 / 5; }
.mem__pic--img img { object-position: 50% 20%; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Personen: Foto-Avatare */
.v-av--img { position: relative; padding: 0; background: #d9dbe2; }
.v-av--img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.team-line { display: flex; align-items: center; gap: 14px; margin: 4px 0 28px; }
.team-line > span:last-child { font-size: 13px; color: var(--on-dark-2); line-height: 1.45; }
.team-line strong { display: block; color: #fff; font-size: 14px; font-weight: 600; }
.av-stack { display: inline-flex; flex: none; }
.av-stack img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #121831; background: #d9dbe2; transition: transform .45s var(--ease); position: relative; }
.av-stack img + img { margin-left: -10px; }
.av-stack:hover img { transform: translateX(calc(var(--i, 0) * 4px)); }
.av-stack img:nth-child(2) { --i: 1; } .av-stack img:nth-child(3) { --i: 2; } .av-stack img:nth-child(4) { --i: 3; }
.av-stack img:hover { transform: translateY(-3px) translateX(calc(var(--i, 0) * 4px)); z-index: 2; }

/* Calendly-Overlay: Calendlys eigene Karte schwebt frei, ohne Zusatzrahmen */
html.calx-open { overflow: hidden; }
.calx { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow-y: auto; overscroll-behavior: contain; }
/* geschlossen: unsichtbar, aber in voller Größe gerendert, damit Calendly beim Vorladen schon fertig zeichnet */
.calx:not([open]) { display: block; opacity: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.calx:not([open]) .calx__x, .calx:not([open]) .calx__load { display: none; }
.calx::backdrop { background: rgba(8, 10, 20, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: calx-fade .35s var(--ease); }
.calx__stage { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 0; box-sizing: border-box; }
.calx__stage iframe { display: block; width: 1140px; max-width: 100%; height: 700px; border: 0; background: transparent; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .7s var(--ease), height .35s var(--ease); }
.calx.is-ready .calx__stage iframe { opacity: 1; transform: none; }
.calx.is-closing { opacity: 0; transition: opacity .25s; }
.calx__x { all: unset; position: fixed; top: 18px; right: 18px; z-index: 2; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background .3s, transform .4s var(--ease); }
.calx__x svg { width: 20px; height: 20px; }
.calx__x:hover { background: rgba(255,255,255,.22); transform: rotate(90deg); }
.calx__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.calx__load { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: rgba(255,255,255,.8); font-size: 14px; pointer-events: none; transition: opacity .4s; }
.calx.is-ready .calx__load { opacity: 0; }
.calx__load i { width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.2); border-top-color: #fff; animation: calx-spin .8s linear infinite; }
@keyframes calx-spin { to { transform: rotate(360deg); } }
@keyframes calx-fade { from { opacity: 0; } }
@media (max-width: 640px) { .calx__stage { padding: 64px 0 16px; align-items: flex-start; } .calx__x { top: 10px; right: 10px; } }

/* Prozess: Ergebnis natürlicher und größer */
.step p { font-size: 15px; line-height: 1.6; }
.step__out { display: block !important; padding-top: 16px !important; }
.step__k { display: block; font-size: 13px; color: #8f95ad; margin-bottom: 4px; }
.step__out strong { display: block; font-size: 16.5px; line-height: 1.35; font-weight: 500; color: #fff; letter-spacing: -.01em; }

/* Anfrageformular: schneller ausfüllbar */
.form-card__h { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.form-card__h h2 { margin: 0; }
.field__opt { font-weight: 400; color: var(--ink-3); font-size: 12.5px; margin-left: 4px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field--chips { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
.field--chips legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 99px; background: #f3f4f7; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); transition: background .25s, box-shadow .25s, color .25s, transform .35s var(--ease); }
.pick:hover span { background: #eceef3; transform: translateY(-1px); }
.pick input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.pick input:checked + span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8fa6ff; }
.pick input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.form__submit { width: 100%; margin-top: 8px; }
.form__submit .btn__l { flex: 1; justify-content: center; }
.form__trust { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.form__trust img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.form__trust p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.form__trust strong { display: block; color: var(--ink); font-size: 14px; font-weight: 600; }
.form__next { margin-top: 18px; }
@media (max-width: 560px) { .frow { grid-template-columns: 1fr; } }
.chips__other { margin-top: 10px; }

/* Formular: Zeilen bündig, Chips als Mehrfachauswahl */
.frow { align-items: start; }
.frow .field { min-width: 0; }
.field--chips legend .field__opt { font-weight: 400; }
.pick input:checked + span::before { border-radius: 3px; width: 8px; height: 8px; }

/* Feinschliff: Karten & Labels */
.num small { display: none; }
.scard p { padding-right: 34px; }
.scard:focus-visible, .proj:focus-visible, .mod:focus-visible { outline-offset: 4px; }
.appr__list { grid-auto-rows: 1fr; }
.prin { align-items: center; }
.prin > div { align-self: center; }

/* Lesbarkeit: keine Mini-Beschriftungen mehr */
.cap { font-size: 12.5px; letter-spacing: .1em; }
.hero__badge .cap { font-size: 12.5px; }
.chip { font-size: 13px; height: 28px; }
.mod__top .chip { display: none; }
.mod li { font-size: 13px; padding: 6px 10px; }
.ftr h2 { font-size: 13px; }
.proj__wix { font-size: 13px; }
.cs-card dt, .cs-card dd { font-size: 14px; }
.file__t { font-size: 12.5px; }
.field__opt { font-size: 13px; }

/* Case Study: Kundenstimme */
.cs-quote { margin: clamp(32px, 4vw, 56px) 0 0; padding: clamp(28px, 3.4vw, 48px); border-radius: var(--r-xl); background: var(--ink); color: #fff; position: relative; }
.cs-quote::before { content: "“"; position: absolute; top: 6px; right: 28px; font-family: var(--display); font-size: 120px; line-height: 1; color: rgba(143,166,255,.35); }
.cs-quote blockquote { margin: 0; font-family: var(--display); font-stretch: 108%; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.4; letter-spacing: -.015em; max-width: 46ch; }
.cs-quote figcaption { margin-top: 20px; font-size: 14px; color: #a7abbd; }
.cs-quote figcaption::before { content: "★★★★★"; display: block; color: #f5c451; letter-spacing: 2px; margin-bottom: 6px; }

/* Plattform-Kennzeichnung mit Logo (Wix / Webflow) */
.proj .proj__wix img.wfmark, .wfmark { border-radius: 5px; }
.chip--plat { gap: 7px; padding-left: 5px; }
.chip--plat img { width: 18px; height: 18px; border-radius: 50%; display: block; }
.chip--plat img.wfmark { border-radius: 5px; }

/* Lange Bewertungen: gekürzt mit Aufklappen */
.tq__long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; }
.tq.is-open .tq__long { -webkit-line-clamp: unset; display: block; }
.tq__more { all: unset; cursor: pointer; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.tq__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* Weitere Websites (Referenzliste mit Vorschau) */
.refs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ref { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.ref:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ref__img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e7e8ec; }
.ref__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 1.2s var(--ease); }
.ref:hover .ref__img img { transform: scale(1.04); }
.ref .proj__wix { position: absolute; left: 10px; top: 10px; }
.ref .proj__wix img { position: static; width: 18px; height: 18px; object-fit: contain; transform: none !important; transition: none; }
.ref__b { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; }
.ref__c { font-size: 13px; color: var(--ink-3); }
.ref__b strong { font-size: 16px; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.ref__u { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.ref__u svg { width: 13px; height: 13px; transition: transform .4s var(--ease); }
.ref:hover .ref__u { color: var(--blue); }
.ref:hover .ref__u svg { transform: translate(2px, -2px); }
@media (max-width: 1100px) { .refs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ref__b { padding: 12px 14px 14px; } .ref__b strong { font-size: 14.5px; } }

/* Software & Tools */
.sws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sw { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.sw:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sw__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #eceef2; border-bottom: 1px solid var(--line); }
.sw__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 1.2s var(--ease); }
.sw:hover .sw__img img { transform: scale(1.03); }
.sw__anon { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(11,12,16,.72); padding: 5px 9px; border-radius: 99px; backdrop-filter: blur(4px); }
.sw__b { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; }
.sw__c { font-size: 13px; color: var(--ink-3); }
.sw__b h3 { font-size: 20px; letter-spacing: -.02em; margin: 0; }
.sw__b p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.sw__b ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sw__b li { font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 7px; background: #f3f4f7; color: var(--ink-2); }
.sw__b .tlink { margin-top: auto; padding-top: 10px; }
@media (max-width: 1100px) { .sws { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sws { grid-template-columns: 1fr; } }

/* Hinweis: weitere Referenzen auf Anfrage */
.refs-more { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 3vw, 40px); border-radius: var(--r-xl); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.refs-more > div > strong { display: block; font-family: var(--display); font-stretch: 112%; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -.02em; margin-bottom: 4px; }
.refs-more > div > span { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 62ch; display: block; }

/* Entwicklung: Standards (dezent) */
.std { border-top: 1px solid var(--line); padding-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 18px 48px; }
.std__h p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 0; max-width: 30ch; }
.std__l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 32px; }
.std__l li { display: grid; gap: 4px; }
.std__l strong { font-size: 15px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.std__l strong::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }
.std__l span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.std__f { grid-column: 2; margin: 4px 0 0; font-size: 13px; color: var(--ink-3, var(--ink-2)); opacity: .8; }
@media (max-width: 900px) { .std { grid-template-columns: 1fr; } .std__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } .std__f { grid-column: 1; } }
@media (max-width: 560px) { .std__l { grid-template-columns: 1fr; } }

/* Entwicklung: Medizin */
.med { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.med__l .lead { margin-top: 18px; }
.med__l2 { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.med__l2 li { display: grid; gap: 5px; padding-top: 16px; border-top: 1px solid var(--line); }
.med__l2 strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.med__l2 span { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.med__ref { display: block; border-radius: var(--r-xl); overflow: hidden; background: var(--card); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.med__ref:hover { transform: translateY(-4px); }
.med__ref img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: left top; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.med__ref:hover img { transform: scale(1.03); }
.med__cap { position: relative; background: var(--card); padding: clamp(22px, 2.2vw, 30px); display: grid; gap: 6px; }
.med__cap strong { font-family: var(--display); font-stretch: 112%; font-size: clamp(20px, 1.7vw, 25px); letter-spacing: -.02em; }
.med__cap > span:not(.cap):not(.tlink) { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.med__cap .tlink { margin-top: 8px; }
@media (max-width: 900px) { .med { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .med__l2 { grid-template-columns: 1fr; } }

/* Neue Referenzen im Projektkarten-Stil */
.proj--nolink { cursor: default; }
.proj__wix--sw { padding-left: 5px; }
.proj__swi { width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; display: grid; place-items: center; }
.proj__swi svg { width: 11px; height: 11px; }
.proj__anon { position: absolute; z-index: 3; right: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(14,17,30,.72); color: #fff; font-size: 12px; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (max-width: 560px) { .proj__anon { right: auto; left: 12px; top: 46px; font-size: 11.5px; } }

/* Case Studies: Desktop + Handy gemischt */
.cs-shots--mix { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.cs-shots .cs-phone { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: grid; place-items: center; }
.phone { width: min(290px, 100%); border-radius: 38px; padding: 9px; background: #0b0c10; box-shadow: 0 40px 70px -30px rgba(11,12,16,.55), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform 1.2s var(--ease); }
.phone img { display: block; width: 100%; height: auto; border-radius: 30px; }
.cs-phone:hover .phone { transform: translateY(-8px); }
@media (max-width: 640px) { .cs-shots--mix { grid-template-columns: 1fr; } .cs-shots .cs-phone { grid-column: auto; grid-row: auto; } }
.cs-live { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--bg, #f1f2f5); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, box-shadow .3s; }
.cs-live span { font-weight: 600; font-size: 15px; }
.cs-live small { grid-column: 1; font-size: 13px; color: var(--ink-2); }
.cs-live svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; transition: transform .4s var(--ease); }
.cs-live:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.cs-live:hover svg { transform: translate(2px, -2px); }
.chip--plat .proj__swi { width: 18px; height: 18px; }

/* Echte Siegel */
.seals-real { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.seals-real img { height: 64px; width: auto; display: block; }
.green-seal { height: 64px; display: inline-flex; align-items: center; gap: 12px; padding: 0 18px; border-radius: 10px; background: #13893f; color: #fff; }
.green-seal svg { width: 36px; height: 36px; }
.green-seal b { font-weight: 800; font-size: 14px; line-height: 1.05; letter-spacing: .04em; text-transform: uppercase; }
.proof .seals-real { grid-column: 1 / -1; margin-top: 0; }
.seals-real--plain { border-top: 0; padding-top: 0; margin-top: 0; }
.seals-real__wix { height: 88px !important; }

/* Kundenlogos */
.ticker--logos .ticker__t { align-items: center; gap: clamp(44px, 5vw, 80px); animation-duration: 100s; }
.ticker--logos img { display: block; flex: none; max-width: none; opacity: .42; transition: opacity .4s; }
.ticker--logos img:hover { opacity: .95; }
@media (max-width: 640px) { .ticker--logos img { transform: scale(.82); } }
.partners.badge-row img[src*="erecht24"] { width: auto; height: 64px; border-radius: 8px; }
.partners .green-seal { height: 64px; }

/* Telefon nie umbrechen */
a[href^="tel:"], a[href^="tel:"] strong { white-space: nowrap; }
/* Mittelstand-Kacheln: Referenzen max. 2 Zeilen */
.gcard__refs { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.55; }
/* Bewertung -> Case Study */
.tq__case { display: inline-flex; align-items: center; gap: 6px; margin-top: -14px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tq__case svg { width: 14px; height: 14px; transition: transform .3s; }
.tq__case:hover svg { transform: translateX(3px); }
.cs-quote .cap { display: block; margin-bottom: 10px; }
/* Branding-Logo in Case Study */
.cs-brand { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow); padding: clamp(24px, 3.4vw, 48px); }
.cs-brand__logo { display: grid; place-items: center; min-height: 220px; border-radius: var(--r-l); background: radial-gradient(120% 90% at 50% 0%, #fafbfc, #eef0f4); padding: clamp(24px, 4vw, 56px); }
.cs-brand__logo img { max-width: 100%; max-height: 120px; width: auto; height: auto; display: block; transition: transform .8s var(--ease); }
.cs-brand:hover .cs-brand__logo img { transform: scale(1.04); }
.cs-brand__t h2 { font-family: var(--display); font-stretch: 112%; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.025em; margin: 10px 0 12px; }
.cs-brand__t p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin: 0; }
@media (max-width: 800px) { .cs-brand { grid-template-columns: 1fr; } }
.cs-meta dt, .cs-card dt { font-size: 12.5px; }

/* Branchen-Kachel: Neigung + Fortschrittsbalken */
.split__r .gstack { transition: transform .45s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; will-change: transform; }
.split__dots button { position: relative; overflow: hidden; }
.split__dots button[aria-current="true"] { width: 40px; background: rgba(11,12,16,.18); }
.split__dots button[aria-current="true"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.split__dots button.is-run::after { animation: dotfill var(--dur, 5.2s) linear forwards; }
[data-carousel].is-paused .split__dots button.is-run::after { animation-play-state: paused; }
@keyframes dotfill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .split__dots button[aria-current="true"]::after { transform: scaleX(1); } }
/* Bewertungen: Case-Study-Link deutlicher */
.tq__case { align-self: flex-start; margin-top: -10px; padding: 8px 14px; border-radius: 999px; background: #f1f2f5; text-decoration: none; }
.tq__case:hover { background: var(--ink); color: #fff; }

/* Footer-Wortmarke als HTML (Safari schneidet SVG-textLength ab) */
.ftr__mark { display: block; width: 100%; margin: 0 0 14px; user-select: none; container-type: inline-size; overflow: visible; }
.ftr__mark span { display: inline-block; font-family: var(--display); font-stretch: 125%; font-weight: 600; letter-spacing: -0.06em; line-height: .9; padding: 0 .06em .04em 0; font-size: 19cqw; white-space: nowrap; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.08)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Mobile: Header als geschlossene Leiste, damit kein Inhalt darüber durchscheint */
@media (max-width: 1100px) {
  /* oben auf der Seite: Logo schwebt frei über dem Hero; beim Scrollen geschlossene Leiste */
  .nav { padding: calc(env(safe-area-inset-top, 0px) + var(--frame) + 8px) calc(var(--frame) + 8px) 8px; background: transparent; box-shadow: none; transition: transform .6s var(--ease), background .3s, padding .3s, box-shadow .3s; }
  .nav__bar { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .nav.is-scrolled, .menu-open .nav { padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px; background: rgba(9, 12, 24, .92); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(255,255,255,.06); pointer-events: auto; }
  .menu-open .nav { background: #0b0e1c; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
  .menu__in { padding-top: calc(env(safe-area-inset-top, 0px) + 84px); }
}

/* Branchen-Kacheln: Referenzen werden per JS auf 2 Zeilen gekürzt, ohne Abschneiden mitten im Wort */
.gcard__refs { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Bewertungen: Zitat oben, Autor + Case-Study-Link gemeinsam unten (keine Lücken dazwischen) */
.tq { justify-content: flex-start; gap: 22px; }
.tq figcaption { margin-top: auto; }
.tq__case { margin-top: -8px; }
.tq figcaption:last-child { margin-bottom: 52.4px; }

/* ---------- Preise ("Reden wir über Geld") ---------- */
.money__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.mlist { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line, #dcdde3); }
.mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line, #dcdde3); }
.mrow h3 { font-size: 19px; letter-spacing: -0.02em; margin: 0 0 4px; }
.mrow p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 54ch; }
.mrow__p { font-family: var(--display); font-stretch: 112%; font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.02em; white-space: nowrap; color: var(--ink); }
.mguar { display: flex; gap: 16px; margin-top: 28px; padding: 24px 26px; border-radius: var(--r-l); background: var(--navy, #0b0e1c); color: #fff; }
.mguar__i { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--blue); display: grid; place-items: center; }
.mguar__i svg { width: 20px; height: 20px; color: #fff; }
.mguar strong { display: block; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 6px; }
.mguar p { margin: 0; font-size: 15px; line-height: 1.6; color: #c3c7d6; }
.mcard { position: sticky; top: 110px; background: #fff; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.mcard__img { aspect-ratio: 4 / 3.6; overflow: hidden; background: #e9e9ea; }
.mcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.mcard__b { padding: 26px 28px 28px; }
.mcard__k { display: block; font-size: 13px; font-weight: 600; color: var(--blue); margin-bottom: 4px; }
.mcard__n { display: block; font-family: var(--display); font-stretch: 112%; font-size: 24px; letter-spacing: -0.03em; margin-bottom: 12px; }
.mcard__b p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.mcard__c { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 14.5px; color: var(--ink-2); }
.mcard__c a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 960px) {
  .money__grid { grid-template-columns: 1fr; }
  .mcard { position: static; max-width: 520px; }
}
@media (max-width: 560px) {
  .mrow { grid-template-columns: 1fr; }
  .mrow__p { order: -1; font-size: 15px; color: var(--blue); }
  .mguar { flex-direction: column; padding: 22px; }
}
/* Preise: groß und rechtsbündig neben dem Titel; lange Angaben brechen in der Preisspalte um */
.mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 15.5em); gap: 8px 32px; align-items: start; }
.mrow__p { white-space: normal; text-align: right; line-height: 1.2; font-size: clamp(18px, 1.5vw, 21px); }
@media (max-width: 560px) { .mrow { grid-template-columns: 1fr; } .mrow__p { text-align: left; } }

/* ---------- Kundenstimmen groß, mit Foto ---------- */
.tm--big { grid-auto-columns: 100%; gap: 16px; }
.tq--big { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 0; padding: 0; min-height: 0; overflow: hidden; border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow); }
.tqb__img { position: relative; min-height: 520px; background: #e6e6e9; }
.tqb__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tqb__b { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 64px); }
.tqb__b blockquote { margin: 18px 0 0; }
.tqb__h { font-family: var(--display); font-stretch: 112%; font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.18; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.tqb__t { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 58ch; }
.tqb__b figcaption { display: block; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.tqb__b figcaption strong { display: block; font-size: 16px; color: var(--ink); margin-bottom: 2px; }
.tqb__case { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 10px 16px; border-radius: 999px; background: #f1f2f5; font-size: 14px; font-weight: 600; color: var(--ink); transition: background .3s, color .3s; }
.tqb__case svg { width: 14px; height: 14px; }
.tqb__case:hover { background: var(--ink); color: #fff; }
@media (max-width: 900px) {
  .tm--big { grid-auto-columns: 100%; }
  .tq--big { grid-template-columns: 1fr; }
  .tqb__img { min-height: 0; aspect-ratio: 4 / 3.4; }
  .tqb__t { font-size: 15px; }
}
@media (max-width: 560px) { .tm--big { grid-auto-columns: 92%; } }
.tqb__more { display: none; }
@media (max-width: 900px) {
  .tqb__t--long { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
  .tq.is-open .tqb__t--long { display: block; -webkit-line-clamp: unset; }
  .tqb__more { display: inline-block; align-self: flex-start; }
}

/* Kundenstimmen-Slider: nächste Karte angeschnitten + Navigation mit Kunden-Chips */
.tmx .tm--big { grid-auto-columns: calc(100% - clamp(64px, 11vw, 180px)); gap: 16px; scroll-padding-left: 0; }
.tmx .tq--big { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.tmx .tq--big:not(.is-cur) { opacity: .55; }
.tmx__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.tmx__who { display: flex; gap: 8px; flex-wrap: wrap; }
.tmx__chip { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: background .3s, box-shadow .3s; }
.tmx__chip img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; }
.tmx__chip b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.tmx__chip small { display: block; font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.tmx__chip:hover { background: #fff; }
.tmx__chip.is-on { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.tmx__chip.is-on img { filter: none; opacity: 1; }
.tmx__prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--blue); }
.tmx__chip.is-on .tmx__prog { width: 100%; transition: width .4s var(--ease); }
.tmx__arrows { display: flex; gap: 10px; flex: none; }
.tmx__arrows button { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: background .3s, opacity .3s, transform .3s var(--ease); }
.tmx__arrows button:hover { background: var(--blue); transform: scale(1.05); }
.tmx__arrows button[disabled] { opacity: .25; pointer-events: none; }
.tmx__arrows svg { width: 17px; height: 17px; }
@media (max-width: 900px) {
  .tmx .tm--big { grid-auto-columns: 86%; gap: 12px; }
  .tmx__bar { flex-direction: column; align-items: stretch; }
  .tmx__who { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tmx__chip small { display: none; }
  .tmx__arrows { justify-content: flex-end; }
  .tmx__arrows button { width: 46px; height: 46px; }
}
.tmx__chip { flex: none; }
.tmx__chip b, .tmx__chip small { white-space: nowrap; }

/* ---- Audit 11/2026: lange Wörter, Tap-Flächen ---- */
h1, h2, h3, .d-1, .d-2, .d-3 { overflow-wrap: break-word; }
@media (max-width: 700px) {
  h1, h2, .d-1, .d-2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  .ftr a, .crumbs a { padding: 12px 2px; margin: -12px -2px; }
  a.chip, .tlink, .tq__more { position: relative; }
  a.chip::after, .tlink::after, .tq__more::after { content: ""; position: absolute; inset: -10px -4px; }
}

/* Calendly-Zustimmung */
.calc { border: 0; padding: 16px; background: transparent; max-width: 560px; width: 100%; }
.calc::backdrop { background: rgba(8, 10, 20, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.calc__card { background: #fff; color: var(--ink); border-radius: 22px; padding: 34px 34px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.calc__eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3, #6b6f7c); }
.calc h2 { margin: 10px 0 12px; font-family: var(--f-display, inherit); font-size: clamp(24px, 3vw, 30px); line-height: 1.15; letter-spacing: -.01em; }
.calc p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2, #3a3d47); }
.calc p a { text-decoration: underline; text-underline-offset: 3px; }
.calc__act { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; }
.calc__act .btn { cursor: pointer; }
.calc__alt { padding-top: 16px; border-top: 1px solid var(--line, #e6e7eb); font-size: 14.5px !important; }
@media (max-width: 560px) { .calc__card { padding: 26px 22px 22px; } .calc__act .btn { width: 100%; justify-content: center; } }