/* Gemeinsames Stylesheet für landingpage-v5.html und potenzialanalyse.html */
/* Stilbasis: Figma-Entwurf „INTERN: Artur Gilbert.ai“ (Frame 2003:625), Screenshots in figma-referenz/.
   Weiße Flächen, Königsblau #3376FE, Navy #081837, hellblau getönte Karten. Kein Violett. */
@font-face { font-family: "Outfit"; src: url("fonts/outfit.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --royal-1: #0C2C72; --royal-2: #0A2461; --navy: #081837; --navy-2: #0B1F48; --navy-3: #10295C; --navy-0: #050E22;
  --blue: #3376FE; --blue-d: #2A64E8; --blue-l: #8FB3FF;
  --ink: #0A1633; --body: #4A5570; --muted: #6E7891; --line: #E3EAF6;
  --tint: #EEF4FE; --tint-2: #F6F9FE; --tint-b: #DCE7FC;
  --warn: #DC2626;
  --ease: cubic-bezier(.16,1,.3,1);
  --wrap: 1200px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #B9CCF5 transparent; }
body { font-family: "Outfit", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--body); background: #fff;
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum"; }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }

h1, h2, h3 { color: var(--ink); font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.12; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.012em; }
p { max-width: 66ch; hyphens: auto; }
.lead, .head p, .quote { hyphens: manual; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
section { padding-block: clamp(84px, 10vw, 136px); position: relative; }
.on-dark { color: rgba(255,255,255,.7); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }

/* Kopf einer Sektion: Pill-Label (Preheadline aus der Copy), Überschrift, Einleitung */
.head { text-align: center; max-width: 820px; margin: 0 auto clamp(48px, 5.5vw, 72px); display: grid; justify-items: center; gap: 18px; }
.head p { color: var(--body); font-size: 18px; margin-inline: auto; }
.on-dark .head p { color: rgba(255,255,255,.68); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blue); background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint-b); }
.pill i { font-size: 15px; }
.on-dark .pill { color: var(--blue-l); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* feines Kachelraster hinter Sektionsköpfen, wie im Figma */
.grid-bg::before { content: ""; position: absolute; inset: 0 0 auto; height: 620px; pointer-events: none;
  background-image: linear-gradient(to right, rgba(51,118,254,.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(51,118,254,.07) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 10%, transparent 75%); }
.on-dark.grid-bg::before { background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); height: 100%; }
section > .wrap { position: relative; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 500; font-size: 17px; color: #fff; white-space: nowrap;
  background: var(--blue); padding: 11px 11px 11px 24px; border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 12px 28px -12px rgba(51,118,254,.9); transition: background .2s, translate .2s var(--ease); }
.btn .arr { width: 32px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 16px; transition: translate .25s var(--ease); }
.btn:hover { background: var(--blue-d); } .btn:hover .arr { translate: 2px -2px; } .btn:active { translate: 0 1px; }
.cta { display: grid; gap: 14px; justify-items: start; }
.cta.c { justify-items: center; text-align: center; }
.cta small { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 48ch; }
.on-dark .cta small { color: rgba(255,255,255,.58); }

/* Haken-Liste */
.checks { list-style: none; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; color: var(--ink); line-height: 1.45; }
.on-dark .checks li { color: rgba(255,255,255,.9); }
.checks li::before { content: ""; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l2.8 2.8 6.2-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat, #3376FE; }  /* Text-Haken sind informativ, deshalb blau (Artur 29.09.2026); grün nur in Grafiken */

/* ---------- Infografik-Rahmen ---------- */
.g { position: relative; overflow: hidden; border-radius: 16px; isolation: isolate; background: #09183A; }  /* Grund der Infografiken V6 (CPU-Schema), kein Aufblitzen beim Laden */
.g.r43 { aspect-ratio: 4 / 3; } .g.r169 { aspect-ratio: 16 / 9; }
.g.dk { background: var(--navy); }
.g[data-hell] { background: #F6F9FE; }  /* helle Grafiken: kein Navy-Aufblitzen beim Laden */
.g > img, .g > iframe { position: absolute; inset: 0; }
.g > img { width: 100%; height: 100%; object-fit: cover; }
.g > img.contain { object-fit: contain; }
.g > iframe { border: 0; transform-origin: 0 0; pointer-events: none; opacity: 0; transition: opacity .3s; }

/* Karte im Figma-Stil: hellblau getönt, Grafik auf weißer Innenfläche */
.fc { border-radius: 24px; padding: 10px 10px 24px; background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px var(--tint-b); }
.fc .g { box-shadow: 0 0 0 1px #E4ECFA; }
.fc .txt { padding: 20px 14px 0; display: grid; gap: 8px; }
.fc p { font-size: 16px; }
.fc .tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.fc .tag.warn { color: var(--warn); }

/* ---------- Navigation ----------
   Form wie applord.up.railway.app: schwebende Leiste mit Abstand zum Rand und 12 px Rundung, von Anfang an sichtbar (nicht erst nach dem Scrollen).
   Oberfläche wie vorher: dunkles Glas mit Unschärfe. Beim Scrollen wird nur der Schatten kräftiger. Mobil klappt das Menü in derselben Glaskarte auf. */
/* Leiste bewusst mit 12 px Rundung (wirkt kantiger und passender zur Seite als die rechnerisch konzentrischen 24 px) */
.nav { --nav-r: 12px; position: fixed; top: 24px; left: 50%; translate: -50% 0; z-index: 50; width: min(1392px, 100% - 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 10px 10px 24px; border-radius: var(--nav-r);
  background: rgba(8,24,55,.72); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 10px 30px -18px rgba(5,14,34,.6); transition: box-shadow .3s, background .3s; }
.nav.solid { background: rgba(8,24,55,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 18px 40px -20px rgba(5,14,34,.75); }
.nav .logo { display: flex; }
.nav .logo img { height: 22px; width: auto; }
.nav ul { list-style: none; display: flex; gap: 32px; }
.nav ul a { text-decoration: none; color: rgba(255,255,255,.78); font-size: 15px; font-weight: 500; transition: color .2s; }
.nav ul a:hover { color: #fff; }
/* Buttons in der Navigation wie die Standard-Buttons der Seite: 14 px Rundung, Pfeil in eigener Kachel (9 px), gleicher Schimmer.
   Nur kompakter, damit die Leiste ihre Höhe behält. */
.nav .btn { font-size: 16px; padding: 6px 6px 6px 18px; gap: 12px; border-radius: 14px; }
.nav .btn .arr { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }

.burger, .mnav, .mnav-dim { display: none; }

/* ---------- Mobile-Menü: gleiche schwebende Glasleiste; offen wird sie zu einer Glaskarte mit Liste und CTA, Seite dahinter abgedunkelt ---------- */
@media (max-width: 1060px) {
  .nav { top: 16px; width: calc(100% - 32px); padding: 10px 10px 10px 20px; gap: 12px; }
  .nav > ul { display: none; }
  .nav > .btn { margin-left: auto; font-size: 15px; padding: 5px 5px 5px 16px; }
  .burger { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -2px; border: 0; border-radius: 8px; background: none; color: #fff; font-size: 28px; cursor: pointer; }
  .burger .ph-x { display: none; }
  .nav.open { background: #0A1B3F; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--nav-r) var(--nav-r) 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 1px 0 0 rgba(255,255,255,.09), inset -1px 0 0 rgba(255,255,255,.09); }
  .nav.open .burger .ph-list { display: none; } .nav.open .burger .ph-x { display: block; }
  .mnav { display: block; position: absolute; left: 0; right: 0; top: 100%; padding: 4px 10px 10px; border-radius: 0 0 var(--nav-r) var(--nav-r);
    background: #0A1B3F;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.09), inset 1px 0 0 rgba(255,255,255,.09), inset -1px 0 0 rgba(255,255,255,.09), 0 24px 64px rgba(2,10,30,.5);
    max-height: calc(100svh - 110px); overflow-y: auto;
    opacity: 0; translate: 0 -8px; visibility: hidden; transition: opacity .22s, translate .22s, visibility 0s .22s; }
  .nav.open .mnav { opacity: 1; translate: 0 0; visibility: visible; transition: opacity .22s, translate .22s; }
  .mnav ul { list-style: none; display: block; margin-bottom: 18px; padding: 0 10px; }
  .mnav li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .mnav ul a { display: flex; align-items: center; min-height: 58px; font-size: 19px; font-weight: 500; color: #fff; text-decoration: none; }
  .mnav ul a[aria-current="true"] { color: var(--blue-l); }
  .mnav .btn { display: flex; width: 100%; justify-content: center; font-size: 16px; line-height: 1.35; padding: 10px 10px 10px 20px; border-radius: 14px; white-space: normal; text-align: center; text-wrap: balance; }
  .mnav-dim { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(2,10,30,.55); opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s .22s; }
  .mnav-dim.on { opacity: 1; visibility: visible; transition: opacity .22s; }
  html.menu-open { overflow: hidden; }
}
@media (max-width: 480px) {
  .nav { padding: 8px 8px 8px 16px; gap: 8px; }
  .nav .logo img { height: 19px; }
  .nav > .btn { font-size: 14px; padding: 9px 14px; }
  .nav > .btn .arr { display: none; }
  .burger { width: 42px; height: 42px; margin-right: 0; }
}

/* ---------- Hero ---------- */
/* Raster wie in den dunklen Sektionen, im Hero über die ganze Höhe, zur Mitte hin am deutlichsten */
.hero.grid-bg::before { height: 100%; background-size: 64px 64px;
  background-image: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 35%, #000 20%, transparent 85%); mask-image: radial-gradient(ellipse 75% 80% at 50% 35%, #000 20%, transparent 85%); }
.hero { padding: 104px 0 0; overflow: hidden;
  background: radial-gradient(760px 560px at 76% 70%, rgba(77,139,255,.42), transparent 70%),
              radial-gradient(700px 420px at 10% 0%, rgba(51,118,254,.25), transparent 70%),
              linear-gradient(180deg, var(--royal-1) 0%, var(--royal-2) 60%, var(--navy) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: stretch;
  min-height: clamp(540px, calc(100svh - 104px - 104px), 700px); }
.hero .intro { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: center; gap: 20px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; max-width: 16ch; }
.hero .lead { color: rgba(255,255,255,.74); font-size: 17.5px; max-width: 540px; }
.hero .cta { margin-top: 6px; }
.stage { position: relative; }
.halo { position: absolute; left: 50%; bottom: -210px; translate: -50% 0; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(51,118,254,.6) 0%, rgba(51,118,254,.14) 45%, transparent 68%); }
.halo::after { content: ""; position: absolute; inset: 80px; border-radius: 50%; border: 2px solid rgba(160,195,255,.7);
  box-shadow: 0 0 40px rgba(120,165,255,.65), inset 0 0 40px rgba(120,165,255,.3); }
.stage .artur { position: absolute; left: 56%; bottom: 0; translate: -50% 0; height: 96%; width: auto; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
.res { position: absolute; z-index: 2; width: 300px; padding: 13px 16px; border-radius: 16px; display: grid; grid-template-columns: 32px 1fr; gap: 12px;
  background: rgba(10,34,86,.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 24px 48px -20px rgba(3,10,30,.8); color: rgba(255,255,255,.92); font-size: 14px; line-height: 1.45; }
.res i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 17px; }
/* r1 liegt auf Schulterhöhe links, nicht mehr über Kinn und Bart */
.res.r1 { left: -24px; top: 41%; } .res.r2 { right: -32px; top: 60%; } .res.r3 { left: -8px; bottom: 5%; }
.proof { position: relative; z-index: 3; background: rgba(5,14,34,.6); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.proof .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof .p { padding: 24px 24px; display: grid; gap: 8px; align-content: start; box-shadow: -1px 0 0 rgba(255,255,255,.07); }
.proof .p:first-child { box-shadow: none; padding-left: 0; }
.proof .who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.55); min-height: 24px; }
.proof .who img { height: 22px; width: auto; border-radius: 5px; }
.proof .who img.eec { height: 20px; border-radius: 0; }
.proof .who img.tc, .proof .who img.wt { border-radius: 0; }
.proof .who img.wt { height: 18px; }  /* WiTa Tax: offizielles Logo (Wortmarke weiß + Grün), Artur 29.09.2026 */  /* TREECYCLE in Originalfarben, Schriftzug weiß (treecycle-hell.svg) */
.proof b { color: #fff; font-weight: 500; font-size: 16.5px; line-height: 1.35; }

/* ---------- Trust ---------- */
.trust { padding-block: 84px 72px; }
.names { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: -26px; }
.names span { padding: 8px 16px; border-radius: 999px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--tint-b); color: var(--ink); font-weight: 500; font-size: 15px; }
/* Positionierungszeile unter der Trust-Überschrift (Copy V7) */
.trust .eng { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 600; font-size: 15px; color: var(--blue); }
.trust .eng i { font-size: 18px; }
.marquee { position: relative; overflow: hidden; margin-top: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .track { display: flex; width: max-content; gap: var(--gap, 56px); animation: slide calc(var(--dur, 38s) * var(--dur-k, 1)) linear infinite; animation-play-state: paused; }
.marquee.run .track { animation-play-state: running; }
.marquee.rev .track { animation-direction: reverse; }
@keyframes slide { to { translate: -50% 0; } }
.logo-item { display: flex; align-items: center; gap: 10px; height: 44px; font-weight: 600; font-size: 17px; color: #2B3550; white-space: nowrap; }
.logo-item img { height: 30px; width: auto; }
.logo-item img.sq { height: 34px; border-radius: 8px; }

/* ---------- Identifikation ---------- */
.ident { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.verdict { border-radius: 24px; padding: 34px 32px; background: radial-gradient(420px 260px at 100% 0%, rgba(51,118,254,.45), transparent 70%), var(--navy);
  display: grid; align-content: space-between; gap: 22px; color: rgba(255,255,255,.72); }
.verdict h3 { color: #fff; font-size: 24px; line-height: 1.3; }
.verdict h3 span { color: var(--blue-l); }
.verdict p { font-size: 16px; }

/* ---------- Problem ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.problem-grid .fc { display: flex; flex-direction: column; }
.punch { grid-column: 1 / -1; margin-top: 12px; text-align: center; border-radius: 24px; padding: clamp(40px, 5vw, 68px) clamp(24px, 6vw, 96px); display: grid; justify-items: center; gap: 20px;
  background: linear-gradient(135deg, var(--royal-1), var(--navy)); color: rgba(255,255,255,.66); }
.punch p { max-width: 30em; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.02em; font-weight: 500; color: #fff; }
.punch p span { display: block; color: rgba(255,255,255,.55); margin-bottom: 10px; }

/* ---------- Dunkler Block: Lösung + Leistungen ---------- */
.darkblock { background: radial-gradient(1000px 520px at 50% 0%, rgba(51,118,254,.28), transparent 70%), var(--navy); }
.sol-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 52px; }
.sol-cols p { font-size: 17.5px; }
.map { border-radius: 26px; padding: 10px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 60px 120px -50px rgba(0,0,0,.8); }
.map .g { border-radius: 18px; }
/* Handy: die Prozesslandkarte lädt ihr Hochformat (900 × 1700, data-m="p" auf der Box) statt die 16:9-Fassung winzig zu skalieren */
@media (max-width: 700px) { .map .g[data-m="p"] { aspect-ratio: 900 / 1700; } }
.sol-after { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; margin-top: 52px; }
.services-head { margin-top: clamp(110px, 12vw, 160px); }
.bento { display: grid; gap: 18px; }
.bento .rowA { display: grid; grid-template-columns: 4fr 3fr; gap: 18px; }
.bento .rowB { display: grid; grid-template-columns: 3fr 4fr; gap: 18px; }
.dc { border-radius: 24px; padding: 26px 26px 12px; display: grid; align-content: start; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.dc .name { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-l); }
.dc h3 { color: #fff; font-size: 21px; }
.dc p { font-size: 15.5px; color: rgba(255,255,255,.64); }
.dc .g { margin-top: 14px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.07); }

/* ---------- Individualsoftware (Figma 2003-2115) ----------
   Platine als SVG nachgebaut (tools/build_platine_svg.py): gleiche Isometrie, Positionen und Farben wie in Figma.
   Bewegung, solange die Sektion sichtbar ist: Lichtpulse laufen auf den Bahnen in den Chip, der Chip atmet,
   die Mini-Chips glimmen versetzt, die Kacheln schweben leicht. */
.soft { overflow: hidden; padding-bottom: 0; background: #09183A; }
.soft > .wrap { z-index: 1; }
.soft .head .btn { margin-top: 8px; }
.soft .head .soft-proof { display: block; max-width: 62ch; margin: 4px auto 0; font-size: 15px; font-weight: 500; color: #fff; }
.soft .head .soft-proof i { color: var(--blue-l); font-size: 18px; vertical-align: -3px; margin-right: 6px; }
/* volle Breite: die Grafik behält ihren Maßstab (bis 1440 px mitwachsend), breitere Fenster zeigen mehr Platine links und rechts */
.board { position: relative; margin: clamp(-80px, -5vw, -24px) 0 0; width: 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%); mask-image: linear-gradient(180deg, transparent 0, #000 14%); }
.iso-board { display: block; width: 100%; height: calc(min(100vw, 1440px) * .4486); overflow: visible; font-family: Outfit, system-ui, sans-serif; }
.iso-board .floor rect { fill: #0C2251; fill-opacity: .3; }
.iso-board .floor .fr { fill: #0E2657; fill-opacity: .3; stroke: #2A55C0; stroke-opacity: .2; stroke-width: 1.2; }
.iso-board .ln { fill: none; stroke: url(#lnfade); stroke-width: 1.1; }
.iso-board .pl { fill: none; stroke: #6FA0FF; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: .95;
  animation: iso-pulse var(--t, 4s) linear var(--d, 0s) infinite paused; }
@keyframes iso-pulse { to { stroke-dashoffset: 0; } }
.iso-board .mc .mg { fill: url(#mglow); opacity: .55; }
.iso-board .mc .mb { fill: #2F66F0; } .iso-board .mc .mp { fill: #3F75FF; }
.iso-board .mc.dim .mb { fill: #16357F; } .iso-board .mc.dim .mp { fill: #1B3C8C; } .iso-board .mc.dim .mg { opacity: 0; }
.iso-board .sk { fill: #06122C; } .iso-board .skt { fill: #0D2150; stroke: #1E3F8E; stroke-width: 1.5; } .iso-board .skw { fill: #081838; stroke: #1E3F8E; stroke-width: 1.2; }
.iso-board .pd { fill: #2A5AD8; fill-opacity: .7; }
.iso-board .halo { opacity: .9; }
.iso-board .chip { filter: drop-shadow(0 0 14px rgba(60,125,255,.75)); }
.iso-board .cs { fill: #1D65F2; } .iso-board .chip g:first-of-type .cs { fill: #0F3FB8; }
.iso-board .pn { fill: #8FA8E6; } .iso-board .pt { fill: #B9CBF5; }
.iso-board .rim { fill: #1F6DFA; stroke: #5B97FF; stroke-width: 1.4; }
.iso-board .dot { fill: #0E3491; }
.iso-board .ledge { fill: #2F7CF4; }
.iso-board .shine { fill: none; stroke: #BFE0FF; stroke-opacity: .55; stroke-width: 1.2; }
.iso-board .logo { fill: #103886; }
.iso-board .tsh { fill: #020818; opacity: .45; filter: blur(3px); }
.iso-board .tsd { fill: #0D1B3F; }
.iso-board .tt { fill: #203660; fill-opacity: .92; stroke: #FFFFFF; stroke-opacity: .2; stroke-width: 1; }
.iso-board .ti { fill: #2F6BFF; color: #2F6BFF; }
.iso-board .tl { fill: #FFFFFF; fill-opacity: .82; font-weight: 400; letter-spacing: .01em; }
.iso-board .tile { animation: iso-float 5s ease-in-out calc(var(--i) * -.45s) infinite paused; }
@keyframes iso-float { 50% { transform: translateY(-3px); } }
/* Kacheln fliegen von oben auf ihre Schatten ein, einmal beim ersten Sichtkontakt (Artur 28.09.2026). Eigenes translate,
   damit das Schweben (transform) weiterläuft. Ohne JS oder bei reduzierter Bewegung stehen sie einfach da. */
@media (prefers-reduced-motion: no-preference) {
  .js .iso-board .tile { opacity: 0; translate: 0 -160px;
    transition: opacity .45s ease-out, translate .95s cubic-bezier(.2, 1.25, .35, 1); transition-delay: calc(var(--i) * 110ms + 150ms); }
  .soft.landed .iso-board .tile { opacity: 1; translate: 0 0; }
}
.iso-board .mc:not(.dim) { animation: iso-glim 3.4s ease-in-out calc(var(--i) * -1.1s) infinite paused; }
@keyframes iso-glim { 50% { opacity: .55; } }
.iso-board .halo { animation: iso-breathe 3.2s ease-in-out infinite paused; transform-box: fill-box; transform-origin: center; }
@keyframes iso-breathe { 50% { opacity: 1; transform: scale(1.06); } }
.soft.run .iso-board .pl, .soft.run .iso-board .tile, .soft.run .iso-board .mc, .soft.run .iso-board .halo { animation-play-state: running; }
@media (max-width: 680px) { .iso-board { width: 170%; margin-left: -35%; height: calc(170vw * .4486); } }
@media (prefers-reduced-motion: reduce) { .iso-board .pl { display: none; } .iso-board .tile, .iso-board .mc, .iso-board .halo { animation: none; } }

/* ---------- Desire (hell, Bento mit dunklen Grafiken) ---------- */
.desire .bento .fc { padding-bottom: 10px; }
.desire .fc .txt { padding: 16px 14px 18px; }
.desire .fc h3 { font-size: 21px; }
.wide-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.wide-card .txt { padding: 20px clamp(28px, 4vw, 56px) !important; }
.wide-card h3 { font-size: 26px !important; }

/* ---------- Vorher / Nachher Stapel ----------
   Eine Fläche pro Bereich: links hell = Vorher, rechts dunkel = Nachher. Die Grafik liegt mittig auf der Naht,
   ihre helle Hälfte über der hellen Seite, ihre dunkle über der dunklen. Darunter der Text der jeweiligen Seite. */
.stack { position: relative; }
.vn { position: sticky; top: calc(88px + var(--i) * 10px); margin-bottom: 22vh; transform-origin: 50% 0; padding: 22px; border-radius: 30px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 30px 70px -40px rgba(10,22,51,.4); will-change: transform, filter; }
.vn:last-child { margin-bottom: 0; }
.vn-h { display: flex; align-items: center; gap: 14px; padding: 4px 6px 18px; }
.vn-h .icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 21px;
  box-shadow: 0 10px 22px -10px rgba(51,118,254,.9); }
.vn-h .area { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.vn-h h3 { font-size: clamp(20px, 1.9vw, 25px); }
.vn-b { position: relative; border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
  background: linear-gradient(90deg, #F1F4FA 0 50%, transparent 50%),
              radial-gradient(420px 300px at 100% 0%, rgba(51,118,254,.42), transparent 70%) 100% 0 / 50% 100% no-repeat, var(--navy); }
.vn-b .gw { grid-column: 1 / -1; justify-self: center; width: min(640px, 60%); margin: 24px 0 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 34px 60px -26px rgba(5,14,34,.75); }
.vn-b .gw .g { border-radius: 0; }
/* Hinter geteilten Grafiken: links hell, rechts navy, damit die noch verdeckte Nachher-Hälfte nie weiß aufblitzt */
.vn-b .gw .g:not(.dk) { background: linear-gradient(90deg, #F2F6FE 0 50%, #0B1F48 50% 100%); }
/* Vorher/Nachher-Texte (V7, 28.09.2026): statt Absatz ein Kernsatz und drei kurze Punkte. Scanbar in 3 Sekunden,
   beide Hälften gleich gebaut: Label-Pill, Kernsatz, Punkte (✕ rot / ✓ blau), optional Belegzeile unten. */
.side { padding: 26px 36px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.side .lbl { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.side.before .lbl { color: #C62828; background: #FEF2F2; box-shadow: inset 0 0 0 1px #FBD5D5; }
.side.after .lbl { color: #86EFAC; background: rgba(22,163,74,.16); box-shadow: inset 0 0 0 1px rgba(34,197,94,.34); }
.side .sum { font-size: clamp(18px, 1.55vw, 21px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; max-width: 32ch; }
.side.before .sum { color: var(--ink); }
.side.after .sum { color: #fff; }
.pts { list-style: none; display: grid; gap: 10px; max-width: 46ch; }
.pts li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: 15.5px; line-height: 1.45; }
.pts li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; margin-top: 0; }
.side.before .pts li { color: var(--body); }
.side.before .pts li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat, #FEF2F2;
  box-shadow: inset 0 0 0 1px #FBD5D5; }
.side.after .pts li { color: rgba(255,255,255,.84); }
.side.after .pts li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l2.8 2.8 6.2-6.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat, #3376FE;
  box-shadow: 0 6px 14px -6px rgba(51,118,254,.9); }
.side .proof { margin-top: 4px; padding-top: 12px; align-self: stretch; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.12); }
.vn[data-clock] .gw { width: min(560px, 52%); }
.clock { display: grid; gap: 10px; align-self: stretch; }
.clock div { display: grid; grid-template-columns: 22px 1fr; gap: 11px; font-size: 15.5px; line-height: 1.45; color: rgba(255,255,255,.84); opacity: .35; transition: opacity .35s; }
.clock div.on, .clock .proof.on { opacity: 1; }
.clock time { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; background: var(--blue); box-shadow: 0 6px 14px -6px rgba(51,118,254,.9); }
.clock .proof { opacity: .35; transition: opacity .35s; }

/* ---------- Tools-Band ---------- */
.tools { overflow: hidden; background: radial-gradient(760px 380px at 50% 0%, rgba(51,118,254,.32), transparent 70%), linear-gradient(180deg, var(--royal-2), var(--navy)); }
.tools .head { margin-bottom: 44px; }
.tools .marquee { margin-top: 0; }
.tools .marquee + .marquee { margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 11px; border-radius: 14px; white-space: nowrap;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: rgba(255,255,255,.78); font-size: 15px; font-weight: 500; }
.chip span { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; }
.chip img { width: 18px; height: 18px; object-fit: contain; }

/* ---------- Fallstudien ---------- */
.cases { display: grid; gap: 20px; }
.case { border-radius: 28px; padding: clamp(24px, 3.4vw, 40px); display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start;
  background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px var(--tint-b); }
.case.flip { grid-template-columns: 1fr 1.1fr; }
.case.flip > div:first-child { order: 2; }
.case .kind { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.case h3 { font-size: clamp(23px, 2.1vw, 29px); line-height: 1.18; letter-spacing: -.02em; margin-bottom: 14px; }
.case p { font-size: 16px; margin-bottom: 20px; }
.case .checks li { font-size: 16px; }
.video { aspect-ratio: 16 / 9; border-radius: 18px; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.6); font-size: 14px;
  background: radial-gradient(500px 260px at 50% 0%, rgba(51,118,254,.45), transparent 70%), var(--navy); }
.video .play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; font-size: 24px; color: #fff;
  background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.person { margin-top: 16px; } .person b { display: block; color: var(--ink); font-weight: 600; } .person span { font-size: 14px; color: var(--muted); }
/* Fallstudien: kleiner Button „Zur Fallstudie“ unter den Ergebnissen (Artur 29.09.2026) */
.btn.more { margin-top: 22px; font-size: 15px; padding: 7px 7px 7px 18px; gap: 10px; border-radius: 12px; }
.btn.more .arr { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.case.todo { display: block; background: none; box-shadow: inset 0 0 0 2px var(--tint-b); }
.ph-slot { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--warn); }

/* ---------- Artur (dunkel) ---------- */
.artur-sec { background: radial-gradient(800px 480px at 80% 40%, rgba(51,118,254,.28), transparent 70%), var(--navy); }
.artur-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.artur-grid .pill { margin-bottom: 18px; }
.quote { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; color: #fff; font-weight: 500; letter-spacing: -.01em; margin: 22px 0; max-width: 34em; }
.artur-sec p { color: rgba(255,255,255,.68); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.facts div { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.facts b { display: block; font-size: 19px; color: #fff; font-weight: 600; letter-spacing: -.01em; }
.facts span { font-size: 14.5px; line-height: 1.4; display: block; margin-top: 2px; color: rgba(255,255,255,.62); }
.artur-pic { position: relative; align-self: stretch; min-height: 620px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(380px 320px at 50% 62%, rgba(51,118,254,.55), transparent 70%), linear-gradient(180deg, var(--royal-1), var(--navy-2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 60px 110px -50px rgba(0,0,0,.9); }
/* Struktur im Hintergrund: Raster wie auf den Team-Karten (oben sichtbar, zur Mitte ausblendend), zwei konzentrische Ringe mit Lichtpunkten */
.artur-pic::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 30%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 90% 75% at 50% 30%, #000 25%, transparent 80%); }
.artur-pic .ring { position: absolute; left: 50%; top: 40%; translate: -50% -50%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(160,195,255,.5); box-shadow: 0 0 40px rgba(120,165,255,.45), inset 0 0 40px rgba(120,165,255,.25); }
.artur-pic .ring::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; border: 1px dashed rgba(160,195,255,.22); }
.artur-pic .ring::after { content: ""; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #CFE0FF; box-shadow: 0 0 12px 3px rgba(120,165,255,.9); }
.artur-pic .ring { animation: ring-spin 24s linear infinite; }
@keyframes ring-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .artur-pic .ring { animation: none; } }
.artur-pic img { position: absolute; bottom: 0; left: 50%; translate: -50% 0; height: 90%; width: auto; }
.artur-pic::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(180deg, transparent, rgba(8,24,55,.9)); }
/* Schwerpunkte: eine ruhige Glasleiste unten auf dem Foto statt verstreuter Pills über Arturs Armen */
.skills { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 16px;
  border-radius: 18px; background: rgba(8,24,55,.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 24px 50px -24px rgba(3,10,30,.9); }
.skills span { padding: 7px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.9); white-space: nowrap;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.skills span.hl { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -8px rgba(51,118,254,.9); }
/* ---------- Team als Karussell (Figma 2003-7378) ----------
   Porträts ragen oben aus der Karte heraus, unten blendet das Foto in das Kartenblau aus. Läuft als Marquee. */
.crew { background: linear-gradient(180deg, var(--navy) 0%, #0A1E4A 100%); overflow: hidden; }
.crew .marquee { -webkit-mask-image: none; mask-image: none; margin-top: 0; }
.crew .track { padding-top: 96px; }
.mate { position: relative; flex: none; width: 380px; height: 470px; border-radius: 26px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px 32px;
  background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(51,118,254,.10) 40%, #1F4FCF 78%, #15347F 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mate::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.mate img { position: absolute; left: 50%; bottom: 60px; width: 108%; height: 118%; translate: -50% 0; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 96%); mask-image: linear-gradient(180deg, #000 72%, transparent 96%); }
/* Platzhalter-Silhouette, bis ein Foto da ist: etwas kleiner und dezenter als die echten Porträts */
.mate img.sil { height: 100%; bottom: 70px; width: 80%; opacity: .55; }
.mate b, .mate small { position: relative; display: block; }
.mate b { color: #fff; font-size: 26px; font-weight: 600; line-height: 1.2; }
.mate small { color: rgba(255,255,255,.6); font-size: 20px; margin-top: 4px; }
@media (max-width: 680px) { .mate { width: 280px; height: 360px; padding: 22px 24px; } .mate b { font-size: 21px; } .mate small { font-size: 16px; } .crew .track { padding-top: 70px; } }
/* ---------- Foto-Leiste (Figma 2003-1332) ----------
   Trenner zwischen Nutzen und Vorher/Nachher: zwei Reihen Bürofotos laufen gegenläufig, randlos über die volle Breite. */
.photo-strip { padding: 0 0 clamp(72px, 9vw, 128px); overflow: hidden; }
.photo-strip .marquee { -webkit-mask-image: none; mask-image: none; margin-top: 0; }
.photo-strip .marquee + .marquee { margin-top: 16px; }
.photo-strip img { flex: none; height: clamp(150px, 16vw, 232px); width: auto; border-radius: 14px; object-fit: cover; }
@media (max-width: 680px) { .photo-strip .marquee + .marquee { margin-top: 10px; } .photo-strip .track { gap: 10px; } .photo-strip img { border-radius: 10px; } }

/* „So arbeitet ArturGilbertᴬᴵ“: echtes Logo statt Schriftzug */
.us-h { display: flex; align-items: center; flex-wrap: wrap; gap: .4em; }
.us-h img { height: 1.05em; width: auto; translate: 0 .04em; }

/* ---------- Standort (Inhalt aus Figma 2003-8107, Gestaltung wie der Rest der Seite) ----------
   Kopf mit Pill, Fotos in einer getönten Karte wie die Grafik-Karten, Kontakt als drei Kacheln im FAQ-Stil. */
.loc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 18px; align-items: stretch; }
.loc .pics { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; padding: 10px; aspect-ratio: 6 / 5;
  border-radius: 24px; background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px var(--tint-b); }
.loc .pics img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px #E4ECFA; }
/* großes Foto oben ausrichten, damit der Kopf des Stehenden nicht abgeschnitten wird */
.loc .pics img:first-child { grid-column: 1 / -1; object-position: 50% 0%; }
.loc .info { display: grid; align-content: space-between; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--tint-b), 0 30px 60px -44px rgba(10,22,51,.45); }
.loc .info h3 { font-size: 24px; margin-bottom: 12px; }
.loc .info p { color: var(--body); font-size: 16px; }
.loc .info p + p { margin-top: 12px; }
.contact { list-style: none; display: grid; gap: 10px; }
.contact a, .contact li > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; text-decoration: none;
  background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s; }
.contact a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--tint-b), 0 18px 40px -26px rgba(51,118,254,.6); }
.contact i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: var(--blue); color: #fff; box-shadow: 0 10px 22px -10px rgba(51,118,254,.9); }
.contact small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); }
.contact b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); }
@media (max-width: 1060px) { .loc-grid { grid-template-columns: minmax(0, 1fr); } .loc .pics { aspect-ratio: 4 / 3.4; } }

/* ---------- Vergleich ---------- */
/* schmaler und höher: beide Boxen zusammen max. 980 px, Texte dürfen zweizeilig werden */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 18px; align-items: center; max-width: 980px; margin-inline: auto; }
.them { padding: 36px; border-radius: 24px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); }
.us { padding: 44px 40px; border-radius: 28px; background: radial-gradient(420px 260px at 100% 0%, rgba(51,118,254,.45), transparent 70%), var(--navy);
  box-shadow: 0 50px 90px -40px rgba(8,24,55,.8); }
.compare h3 { font-size: 22px; margin-bottom: 22px; }
.them ul { list-style: none; display: grid; gap: 12px; }
.them li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; color: var(--muted); line-height: 1.45; }
.them li i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: #E9EDF5; color: #8C95AB; margin-top: 1px; }

/* ---------- Eigentum ---------- */
.own { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Kundenstimmen ---------- */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.voices .fc { padding-bottom: 20px; }
.voices b { display: block; margin: 16px 12px 0; color: var(--ink); }

/* ---------- Drei Schritte (dunkel) ---------- */
.steps-sec { background: radial-gradient(900px 480px at 50% 0%, rgba(51,118,254,.25), transparent 70%), var(--navy); }
.steps { position: relative; display: grid; gap: 28px; padding-left: 84px; }
.rail { position: absolute; left: 25px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.rail i { position: absolute; inset: 0; background: linear-gradient(180deg, var(--blue-l), var(--blue)); transform-origin: 0 0; scale: 1 var(--p, 0); }
.step { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; padding: 14px 14px 14px 32px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.step .num { position: absolute; left: -84px; top: 50%; translate: 0 -50%; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 600; font-size: 19px; color: rgba(255,255,255,.55); background: var(--navy-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: all .4s var(--ease); }
.step.reached .num { color: #fff; background: var(--blue); box-shadow: 0 0 0 6px rgba(51,118,254,.2), 0 0 30px rgba(51,118,254,.7); }
.step h3 { font-size: clamp(21px, 1.9vw, 26px); margin-bottom: 10px; }
.step p { font-size: 16px; color: rgba(255,255,255,.66); }
.step .g { box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
.steps-cta { margin-top: 56px; display: flex; justify-content: center; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s; }
.faq details[open] { background: #fff; box-shadow: inset 0 0 0 1px var(--tint-b), 0 18px 40px -26px rgba(51,118,254,.6); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 22px 20px 24px;
  font-weight: 600; color: var(--ink); font-size: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; background: var(--tint); color: var(--blue);
  transition: rotate .25s var(--ease), background .25s, color .25s; }
.faq details[open] summary i { rotate: 45deg; background: var(--blue); color: #fff; }
.faq details p { padding: 0 24px 22px; font-size: 16px; }
.faq details { overflow: hidden; }
.faq details.closing { background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line); }
.faq details.closing summary i { rotate: 0deg; background: var(--tint); color: var(--blue); }

/* ---------- Pitch ---------- */
.pitch-sec { padding-top: 0; padding-bottom: clamp(64px, 7vw, 96px); }
.pitch { position: relative; overflow: hidden; border-radius: 32px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 0;
  background: radial-gradient(560px 420px at 80% 85%, rgba(77,139,255,.55), transparent 70%), linear-gradient(135deg, var(--royal-1), var(--navy));
  box-shadow: 0 60px 120px -60px rgba(8,24,55,.9); }
.pitch::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 30%, #000 10%, transparent 70%); }
.pitch .copy { position: relative; padding: clamp(40px, 5vw, 72px); display: grid; gap: 22px; justify-items: start; align-content: center; }
.pitch .copy p { color: rgba(255,255,255,.74); font-size: 17.5px; }
.pitch h2 { font-size: clamp(28px, 2.9vw, 42px); max-width: 18ch; }
.pitch .pv { position: relative; min-height: 460px; }
.pitch .pv .ring { position: absolute; left: 50%; top: 14%; translate: -50% 0; width: min(380px, 82%); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(160,195,255,.55); box-shadow: 0 0 40px rgba(120,165,255,.5), inset 0 0 40px rgba(120,165,255,.25); }
.pitch .pv img { position: absolute; left: 50%; bottom: 0; translate: -50% 0; height: 84%; max-width: 92%; object-fit: contain; object-position: bottom;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent); }
footer { background: var(--navy-0); color: rgba(255,255,255,.58); font-size: 15px; padding: 72px 0 28px; }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.foot img { height: 20px; width: auto; margin-bottom: 16px; }
.foot p { max-width: 32ch; line-height: 1.55; }
.foot h4 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.foot ul { list-style: none; display: grid; gap: 10px; }
.foot a { text-decoration: none; color: rgba(255,255,255,.62); transition: color .2s; }
.foot a:hover { color: #fff; }
.foot .btn { color: #fff; font-size: 15px; }
.legal { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; font-size: 13.5px; color: rgba(255,255,255,.42); }

/* ---------- Bewegung ---------- */
.js .rv { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; translate: none; }
.js .hero .h-in { opacity: 0; translate: 0 18px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: var(--d); }
.js .hero.go .h-in { opacity: 1; translate: none; }
.js .hero .artur { opacity: 0; translate: -50% 40px; transition: opacity 1s var(--ease), translate 1.1s var(--ease); transition-delay: .45s; }
.js .hero.go .artur { opacity: 1; translate: -50% 0; }
.js .hero .halo { opacity: 0; scale: .8; transition: opacity 1.2s ease-out, scale 1.4s var(--ease); transition-delay: .3s; }
.js .hero.go .halo { opacity: 1; scale: 1; }
.js .hero .res { opacity: 0; scale: .92; translate: 0 12px; transition: opacity .6s var(--ease), scale .6s var(--ease), translate .6s var(--ease); transition-delay: var(--d); }
.js .hero.go .res { opacity: 1; scale: 1; translate: none; }
.js .skills span { opacity: 0; translate: 0 8px; transition: opacity .5s var(--ease), translate .5s var(--ease); transition-delay: var(--d); }
.js .artur-pic.in .skills span { opacity: 1; translate: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .hero .h-in, .js .hero .res, .js .hero .halo, .js .skills span { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  .js .hero .artur { opacity: 1 !important; translate: -50% 0 !important; transition: none !important; }
  .marquee .track { animation: none !important; }
  .vn { scale: none !important; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1060px) {
  .ident { grid-template-columns: repeat(2, 1fr); }
  .hero-grid, .problem-grid, .bento .rowA, .bento .rowB, .sol-cols, .sol-after, .artur-grid, .compare, .pitch, .case, .case.flip, .wide-card, .vn-b { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { min-height: 0; } .hero .intro { padding-bottom: 0; }
  .case.flip > div:first-child { order: 0; }
  .foot { grid-template-columns: 1fr 1fr; }
  .artur-pic { min-height: 520px; }
  .pitch .pv { min-height: 360px; }
  .btn { white-space: normal; text-align: left; }
  
  /* Hero mobil: erst der Text, dann Artur mit Lichtring, die drei Ergebnisse liegen darunter und überlappen den Fuß des Fotos */
  .stage { height: auto; display: grid; gap: 10px; padding: clamp(380px, 100vw, 520px) 0 20px; margin-top: 8px; }
  .stage .artur { top: 0; bottom: auto; left: 50%; height: clamp(380px, 100vw, 520px); z-index: 0; }
  .halo { top: clamp(90px, 26vw, 140px); bottom: auto; width: min(460px, 110vw); height: min(460px, 110vw); z-index: 0; }
  .halo::after { inset: 14%; }
  .res { position: relative; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto; }
  .res.r1 { margin-top: -64px; }
  .proof .wrap { grid-template-columns: 1fr 1fr; }
  .proof .p:nth-child(3) { box-shadow: none; padding-left: 0; }
  .vn { position: relative; top: auto; margin-bottom: 18px; padding: 14px; }
  .vn-b { background: linear-gradient(180deg, #F1F4FA 0 50%, var(--navy) 50%); }
  .vn-b .gw { width: calc(100% - 28px); margin: 14px; order: -1; }
  .side.before { background: #F1F4FA; } .side.after { background: var(--navy); }
  .side { padding: 22px 22px 26px; }
  .step { grid-template-columns: 1fr; gap: 22px; padding: 26px 14px 14px 22px; }
  .own, .voices { grid-template-columns: 1fr; }
  
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .ident { grid-template-columns: minmax(0, 1fr); }
  .steps { padding-left: 0; } .step .num { position: static; translate: none; margin-bottom: 4px; } .rail { display: none; }
  .facts { grid-template-columns: 1fr; }
  .proof .wrap { grid-template-columns: 1fr; } .proof .p { box-shadow: none !important; padding-left: 0; }
  .foot { grid-template-columns: 1fr; } .legal { flex-direction: column; }
}

/* ---------- V9: Symptome als Liste mit einer Grafik (Yannick 29.09.2026: „nicht zu jedem Ding ein Bild“) ----------
   Links fünf Zeichen, das gewählte klappt seinen Satz auf; rechts die passende Grafik, am Desktop mitlaufend (sticky).
   Am Handy steht die Grafik oben, darunter die kompakte Liste. */
.sym { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 28px; align-items: start; }
.sym-list { display: grid; gap: 10px; }
.sym-it { appearance: none; border: 0; margin: 0; font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 18px 20px; border-radius: 18px; color: var(--body);
  background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--tint-b); transition: background .25s, box-shadow .25s; }
.sym-it:hover { background: #fff; }
.sym-it .n { font-size: 14px; font-weight: 600; letter-spacing: .06em; color: var(--muted); padding-top: 4px; transition: color .25s; }
.sym-it b { display: block; color: var(--ink); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; }
.sym-it .p { display: block; font-size: 16px; line-height: 1.55; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .45s var(--ease), opacity .3s, margin-top .3s; }
.sym-it[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--blue), 0 18px 40px -26px rgba(51,118,254,.6); }
.sym-it[aria-selected="true"] .n { color: var(--blue); }
.sym-it[aria-selected="true"] .p { max-height: 9em; opacity: 1; margin-top: 8px; }
.sym-view { position: sticky; top: 104px; padding: 10px; }
.sym-view .g[hidden] { display: none; }
.sym-verdict { margin-top: 28px; }
@media (max-width: 1060px) {
  .sym { grid-template-columns: minmax(0, 1fr); }
  .sym-view { order: -1; position: relative; top: auto; }
}
@media (max-width: 680px) {
  .sym-it { padding: 14px 16px; gap: 10px; grid-template-columns: 28px minmax(0, 1fr); }
  .sym-it b { font-size: 17px; }
  .sym-it .p { font-size: 15px; }
  .sym-verdict { padding: 26px 22px; } .sym-verdict h3 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .sym-it .p { transition: none; } }

/* V9: Ergebnis-Kärtchen im Hero wechseln (Artur 29.09.2026). .out lässt eins rausploppen, danach kommt es mit neuem Text wieder.
   Raus schneller als rein, damit der Wechsel lebendig wirkt. Am Handy feste Mindesthöhe, damit die Seite beim Textwechsel nicht springt. */
.js .hero.go .res.out { opacity: 0; scale: .9; translate: 0 10px; transition-duration: .3s; transition-timing-function: ease-in; }
/* Schneller rein als bisher (Artur 29.09.: „brauchen ein bisschen lange“): .45 s statt .6 s */
.js .hero .res { transition-duration: .45s; }
@media (max-width: 1060px) { .hero .res { min-height: 70px; align-items: center; } }

/* V9: Lösungstext untereinander (Tablet/Handy) mit normalem Absatzabstand statt der 48-px-Spaltenlücke (Artur 29.09.2026) */
@media (max-width: 1060px) { .sol-cols { gap: 16px; } }

/* V9 Handy (Artur 29.09.2026: erste Vorher/Nachher-Karte am Handy winzig): .vn[data-clock] .gw (52 %) schlug die Handy-Regel.
   Am Handy volle Breite für alle Karten, und die Grafiken laden dort ihr Hochformat (data-m="m", 900 × 1350). */
@media (max-width: 1060px) { .vn[data-clock] .vn-b .gw, .vn-b .gw { width: calc(100% - 28px); } }
@media (max-width: 700px) { .g[data-m="m"] { aspect-ratio: 900 / 1350; } }

/* V9 Hero: Akronym-Kärtchen „TEAM: Toll, Ein Agent Macht's“, Anfangsbuchstaben hervorgehoben */
.hero .res b { color: var(--blue-l); font-weight: 700; }

/* V9.1 TEAM-Kärtchen (Artur 01.10.2026: „nicht so fetzig“): blau leuchtend statt Glas, TEAM als große Zeile mit Buchstaben-Pop,
   darunter die Auflösung. Die Buchstaben ploppen nacheinander rein, sobald das Kärtchen kommt. */
.hero .res.team { background: linear-gradient(135deg, #3376FE, #1F55E0); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 6px rgba(51,118,254,.22), 0 24px 50px -14px rgba(51,118,254,.85); color: #fff; }
.hero .res.team i { background: #fff; color: var(--blue); }
.hero .res.team > span { display: grid; gap: 2px; }
.hero .res.team .kick { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.hero .res.team .big { display: flex; gap: 3px; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: .02em; color: #fff; }
.hero .res.team .big b { color: #fff; display: inline-block; animation: team-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.hero .res.team .big b:nth-child(2) { animation-delay: .08s; } .hero .res.team .big b:nth-child(3) { animation-delay: .16s; } .hero .res.team .big b:nth-child(4) { animation-delay: .24s; }
.hero .res.team .sub { font-size: 14px; color: rgba(255,255,255,.9); }
.hero .res.team .sub b { color: #fff; font-weight: 700; }
@keyframes team-pop { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .res.team .big b { animation: none; } }

/* ---------- Rechtstexte (Impressum, Datenschutz), Layout nach applord.up.railway.app/datenschutz ----------
   Dunkler Kopf mit „Rechtliches“, links mitlaufendes Inhaltsverzeichnis, rechts nummerierte Kapitel. */
.lg-hero { position: relative; padding: 168px 0 84px; text-align: center; background: radial-gradient(900px 420px at 50% 0%, rgba(51,118,254,.35), transparent 70%), var(--navy); }
.lg-hero .kick, .lg-toc .kick { display: block; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-l); }
.lg-hero h1 { margin-top: 14px; font-size: clamp(36px, 5vw, 60px); line-height: 1.08; }
.lg-main { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px); }
.lg-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.lg-toc { position: sticky; top: 112px; padding: 26px 20px; border-radius: 20px; background: linear-gradient(180deg, var(--tint-2), var(--tint)); box-shadow: inset 0 0 0 1px var(--tint-b); }
.lg-toc .kick { color: var(--blue); padding: 0 12px 14px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lg-toc a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 6px; overflow-wrap: anywhere; hyphens: auto; padding: 10px 12px; border-radius: 12px; font-size: 15.5px; line-height: 1.4; color: var(--ink); text-decoration: none; transition: background .2s, color .2s; }
.lg-toc a .n { color: var(--blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.lg-toc a:hover { background: rgba(255,255,255,.7); }
.lg-toc a[aria-current] { background: #fff; color: var(--blue); box-shadow: 0 6px 18px -12px rgba(51,118,254,.6); }
.lg-body { max-width: 860px; min-width: 0; }
.lg-ch { scroll-margin-top: 112px; }
.lg-ch + .lg-ch { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.lg-ch h2 { display: flex; gap: 14px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; }
.lg-ch h2 .n { color: var(--blue); font-weight: 500; }
.lg-ch h3 { margin-top: 32px; font-size: 21px; }
.lg-ch h4 { margin-top: 22px; font-size: 17px; color: var(--ink); }
.lg-ch p, .lg-ch li { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--body); overflow-wrap: anywhere; }
.lg-ch ul { margin: 12px 0 0; padding-left: 22px; }
.lg-ch li { margin-top: 4px; }
.lg-ch a { color: var(--blue); text-underline-offset: 3px; }
.lg-page .nav { background: rgba(8,24,55,.72); }
@media (max-width: 1060px) {
  .lg-grid { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { position: relative; top: auto; }
  .lg-hero { padding: 132px 0 60px; }
}

/* Fallstudien: Fotos von den Kunden-Websites statt „Video folgt“ (Artur 03.10.2026) */
.case-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; box-shadow: 0 24px 50px -30px rgba(10,22,51,.45); }

/* ---------- Handy-Feinschliff (Artur 03.10.2026, iPhone-Screenshots) ---------- */
@media (max-width: 680px) {
  /* Buttons passen in eine Zeile: weniger Innenabstand in Karten, kompakterer Button */
  .wide-card .txt { padding: 18px 16px 20px !important; }
  .wide-card h3 { font-size: 23px !important; }
  .pitch .copy { padding: 30px 20px; gap: 18px; }
  .pitch .pill { font-size: 11.5px; padding: 6px 12px 6px 9px; }
  .btn { font-size: 15.5px; padding: 9px 9px 9px 18px; gap: 10px; white-space: nowrap; }
  .btn .arr { width: 30px; height: 30px; }
  /* Artur-Foto: Schwerpunkte kleiner und kompakter, damit mehr vom Foto sichtbar bleibt */
  .skills { left: 10px; right: 10px; bottom: 10px; padding: 9px; gap: 5px; }
  .skills span { font-size: 11.5px; padding: 4px 8px; border-radius: 7px; }
  .artur-pic img { height: 92%; }
  /* Standort-Fotos: großes Bild oben, zwei kleine darunter, ohne Überlappung */
  .loc .pics { aspect-ratio: auto; grid-template-rows: auto auto; }
  .loc .pics img { aspect-ratio: 4 / 3; height: auto; }
  .loc .pics img:first-child { aspect-ratio: 16 / 10; }
}
@media (max-width: 380px) { .btn { font-size: 14.5px; padding-left: 14px; } }


/* =====================================================================================================
   V10 (Feedback Sales and Brands, Markup 07.10.2026). Nummern = Kommentar-Nummern in
   Copy Neu/Feedback Klara Markup 2026-10-07/00-Feedback-und-Strategie.md
   ===================================================================================================== */

/* Hero: links weniger wuchtig (#9), Zahlen in den Kärtchen (#11), Artur und Kärtchen etwas langsamer (#5) */
.hero h1 { font-size: clamp(32px, 3vw, 42px); line-height: 1.1; max-width: 19ch; }
.hero .lead { font-size: 17px; max-width: 500px; }
.res span b { display: block; font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 2px; }
.js .hero .artur { transition: opacity 1.3s var(--ease), translate 1.5s var(--ease); transition-delay: .55s; }
.js .hero .res { transition-duration: .6s; }
/* Leiste: Logo + Branche, darf umbrechen (#4) */
.proof .who { flex-wrap: wrap; row-gap: 6px; }

/* Identifikation: sechs Karten im 3er-Raster (.ident aus V8), darunter ein kleiner Pitch statt Fazit-Kasten (#12, #13, #14) */
.ident .fc .txt h3 { font-size: 19px; }
.ident .fc .txt p { font-size: 15.5px; }
.sym-pitch { margin-top: 24px; border-radius: 22px; padding: 26px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px;
  background: radial-gradient(360px 220px at 100% 0%, rgba(51,118,254,.45), transparent 70%), var(--navy);
  color: rgba(255,255,255,.74); box-shadow: 0 30px 60px -36px rgba(8,24,55,.8); }
.sym-pitch p { font-size: 17px; line-height: 1.5; max-width: 60ch; }
.sym-pitch b { color: #fff; font-weight: 600; }
@media (max-width: 800px) { .sym-pitch { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 22px 24px; } }

/* Lösung: Hauptsatz groß, Folgesatz klein (#15); was du bekommst (#18); ein CTA (#17, #19, #20) */
#loesung .head h2 span { display: block; margin-top: 14px; font-size: .56em; line-height: 1.3; font-weight: 500; color: rgba(255,255,255,.62); letter-spacing: -.01em; }
.gets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 44px; }
.get { padding: 24px 22px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -40px rgba(0,0,0,.9); }
.get i, .sw i { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 21px;
  margin-bottom: 16px; box-shadow: 0 10px 22px -10px rgba(51,118,254,.9); }
.get h3 { color: #fff; font-size: 19px; margin-bottom: 6px; }
.get p { font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.66); }
.sol-cta { display: flex; justify-content: center; margin-top: 44px; }
@media (max-width: 1060px) { .gets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gets { grid-template-columns: 1fr; } }

/* Vorher/Nachher als Tabs statt Stapel (#22) */
.vn { position: relative; top: auto; margin-bottom: 0; will-change: auto; }
.vn[hidden] { display: none; }
.vn-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 22px; }
.vn-tab { appearance: none; border: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px 10px 12px;
  border-radius: 999px; background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--tint-b); color: var(--ink); font-weight: 600; font-size: 15px;
  transition: background .2s, box-shadow .2s, color .2s; }
.vn-tab i { font-size: 18px; color: var(--blue); transition: color .2s; }
.vn-tab:hover { background: #fff; }
.vn-tab[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: 0 12px 26px -12px rgba(51,118,254,.9); }
.vn-tab[aria-selected="true"] i { color: #fff; }
@media (max-width: 700px) {
  .vn-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -24px; padding: 2px 24px 6px; }
  .vn-tabs::-webkit-scrollbar { display: none; }
  .vn-tab { flex: none; font-size: 14px; }
}

/* Fallstudien: Logo, Zahlen-Kacheln, CTA, mehr Tiefe (#27 bis #32) */
.case { background: #fff; align-items: center;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 rgba(10,22,51,.04), 0 44px 80px -50px rgba(10,22,51,.5); }
.case-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.case-logo { height: 30px; width: auto; }
.case-logo.sq { height: 40px; border-radius: 10px; }
.case .kind { margin: 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 24px; }
.kpis div { padding: 16px 18px; border-radius: 16px; background: radial-gradient(240px 140px at 100% 0%, rgba(51,118,254,.5), transparent 70%), var(--navy);
  box-shadow: 0 18px 36px -22px rgba(8,24,55,.8); }
.kpis b { display: block; color: #fff; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kpis span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.72); }
.case .checks { margin-bottom: 24px; }
.case .btn.more { margin-top: 0; }
.case-pic { border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(10,22,51,.55); }
.case-brand { border-radius: 20px; aspect-ratio: 16 / 10; display: grid; place-items: center; align-content: center; gap: 22px; padding: 32px;
  background: radial-gradient(420px 260px at 80% 0%, rgba(51,118,254,.45), transparent 70%), var(--navy); box-shadow: 0 30px 60px -30px rgba(10,22,51,.55); }
.case-brand img { width: min(420px, 90%); height: auto; }
.case-brand .person { margin: 0; text-align: center; }
.case-brand .person b { color: #fff; } .case-brand .person span { color: rgba(255,255,255,.6); }

/* Individualsoftware mit Platine (#40): drei Karten unter der Platine */
/* Die Platine läuft unter den Karten weiter und blendet erst ganz unten aus (Artur 07.10.: „aktuell ist das abgeschnitten“).
   Die Maske der .board schnitt alles ab, was unter dem 646er-Bildausschnitt liegt; jetzt reicht die Fläche (und damit die Maske)
   um --ext tiefer, die Karten liegen darauf. */
.soft { --ext: clamp(260px, 28vw, 420px); padding-bottom: clamp(48px, 5vw, 80px); }
.soft .board { padding-bottom: var(--ext);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 84%, transparent 100%); }
.sw-under { position: relative; z-index: 1; margin-top: calc(var(--ext) * -1 + 40px); }
@media (max-width: 900px) { .soft { --ext: 120px; } }
.sw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sw { padding: 28px 26px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -36px rgba(0,0,0,.9); }
.sw h3 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.sw p { font-size: 15.5px; color: rgba(255,255,255,.68); }
@media (max-width: 900px) { .sw-grid { grid-template-columns: 1fr; } }

/* Artur: Fakten mit Icons und Tiefe (#35) */
.facts div { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 24px 40px -28px rgba(0,0,0,.85); }
.facts i { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--blue); color: #fff; font-size: 20px;
  box-shadow: 0 10px 22px -10px rgba(51,118,254,.9); }
.facts b, .facts span { grid-column: 2; }

/* Handy: lange CTA-Beschriftung in schmalen Kästen umbrechen statt über den Rand laufen */
@media (max-width: 600px) {
  .sym-pitch .btn, .case .btn.more { white-space: normal; max-width: 100%; font-size: 15px; line-height: 1.3; text-align: left; }
  .sym-pitch { padding: 20px; }
}

/* Vergleich: X-Icons rot (#37) */
.them li i { background: #FEF2F2; color: #DC2626; box-shadow: inset 0 0 0 1px #FBD5D5; }