@font-face {
  font-family: Barlow;
  src: url(assets/barlow-bold.ttf) format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --bg: #07111c;
  --panel: #0d1c2c;
  --line: #294052;
  --muted: #b3c3d0;
  --blue: #74beff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: #f4f8fc; font: 17px/1.65 "Segoe UI", Arial, sans-serif; }
a { color: inherit; text-underline-offset: 5px; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
header, footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 17px 5vw; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; font-size: 25px; font-weight: 750; letter-spacing: -.06em; text-decoration: none; }
.brand img { width: 50px; height: 50px; margin-right: 12px; }
.brand span { padding: 0 4px; color: var(--blue); }
nav { display: flex; align-items: center; gap: 35px; font-size: 14px; font-weight: 600; }
nav a { text-decoration: none; }
.navcta { border: 1px solid #7d9ab4; padding: 8px 21px; }
.stage { padding: 0 5vw; overflow: hidden; background: #040e1b; }
.stage-inner { position: relative; min-height: 565px; max-width: 1540px; margin: auto; padding: 44px 0 36px; }
.hero-art { position: absolute; inset: -10px -6vw 0 22%; overflow: hidden; pointer-events: none; }
.hero-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #040e1b, transparent 35%), linear-gradient(0deg, #040e1b, transparent 20%); }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; animation: breathe 14s ease-in-out infinite alternate; }
.scanlight { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 44%, #9acfff24 50%, transparent 56%); background-size: 250% 100%; animation: sweep 8s ease-in-out infinite; mix-blend-mode: screen; }
.lead { position: relative; z-index: 1; width: 49%; }
.kicker, .eyebrow, .choices small { color: var(--blue); font-size: 11px; line-height: 1.5; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.kicker { margin: 0 0 16px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Barlow, "Arial Narrow", sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: .98; }
h1 { font-size: clamp(65px, 7vw, 110px); margin: 0 0 24px; text-transform: uppercase; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.lead > p:last-of-type { color: #c7d4df; max-width: 430px; font-size: 17px; line-height: 1.6; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 25px; }
.btn { display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; padding: 13px 20px; background: #94cdff; border: 1px solid #94cdff; color: #061627; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.btn:hover { background: #c8e6ff; transform: translateY(-2px); }
.textlink { color: var(--blue); text-decoration: none; font-size: 14px; font-weight: 650; border-bottom: 1px solid #48718c; padding-bottom: 5px; }
.visual { position: absolute; right: 0; bottom: 30px; width: 36%; z-index: 1; display: grid; grid-template-columns: 1fr 105px; align-items: center; border: 1px solid #55718b; background: #081827e8; }
.scene svg { width: 100%; display: block; height: 106px; }
.visual-caption { display: grid; gap: 8px; padding: 8px; text-align: center; font-size: 11px; line-height: 1.3; }
#motion { justify-self: center; width: 35px; height: 30px; background: transparent; color: white; border: 1px solid #7096b2; cursor: pointer; }
.trace-base { fill: none; stroke: #52748c; stroke-width: 2; }
.trace-flow { fill: none; stroke: #92d7ff; stroke-width: 3; stroke-dasharray: 10 90; animation: flow 3s linear infinite; }
.node { fill: #102b40; stroke: #a4d4f6; stroke-width: 2; }
.scene text { fill: #e2f0fb; font: 12px "Segoe UI", sans-serif; }
.choices { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1540px; margin: auto; border-top: 1px solid #456077; border-bottom: 1px solid #456077; }
.choices button { position: relative; text-align: left; background: #0a1b2a; color: white; border: 0; border-right: 1px solid #456077; padding: 19px 34px 22px 22px; transition: background .25s; }
.choices button:last-child { border-right: 0; }
.choices strong { display: block; font: 700 clamp(21px, 2.4vw, 35px)/1.2 Barlow, sans-serif; margin-top: 5px; }
.choices button span { position: absolute; right: 17px; top: 22px; color: var(--blue); }
.choices button[aria-pressed=true] { background: #173f60; box-shadow: inset 0 -3px #91d0ff; }
.choices button:hover { background: #1c4665; }
.wrap { max-width: 1600px; padding: 80px 5vw; margin: auto; }
h2 { font-size: clamp(42px, 4.6vw, 68px); margin-bottom: 30px; }
.focus-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; align-items: center; padding-bottom: 45px; margin-bottom: 55px; border-bottom: 1px solid var(--line); }
.focus-panel h2 { font-size: clamp(35px, 3.5vw, 52px); margin: 0; }
.focus-panel p { color: var(--muted); }
.focus-panel .kicker { color: var(--blue); }
.focus-panel a { color: var(--blue); font-size: 14px; font-weight: 600; }
.services { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; list-style: none; padding: 19px 0; font: 700 31px Barlow, sans-serif; }
summary::-webkit-details-marker { display: none; }
summary:after { content: "+"; color: var(--blue); font: 30px "Segoe UI", sans-serif; }
details[open] summary:after { content: "−"; }
details > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 5%; padding-bottom: 28px; }
details p { color: var(--muted); font-size: 16px; margin-bottom: 0; }
details b { color: white; display: block; margin-bottom: 6px; }
details a { color: var(--blue); font-size: 14px; }
.lab { border-top: 1px solid var(--line); background: #0a1825; }
.section-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12%; align-items: center; }
.section-head p { color: var(--muted); max-width: 550px; }
.lab-board { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #47647d; }
.lab-left { padding: 32px; }
.lab-left h3 { font: 700 33px/1.1 Barlow, sans-serif; margin: 26px 0 15px; }
.lab-left p { color: var(--muted); font-size: 16px; }
.lab-left .eyebrow { color: var(--blue); font-size: 10px; }
.demo-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-buttons button { background: transparent; border: 1px solid #607c92; color: white; font-size: 14px; padding: 8px 15px; }
.demo-buttons button[aria-pressed=true] { background: #94cdff; color: #061627; }
.terminal { background: #030d16; padding: 25px; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.terminal-head { display: flex; align-items: center; justify-content: space-between; font: 12px/1.5 Consolas, monospace; color: #93b1c8; padding-bottom: 20px; border-bottom: 1px solid #2c4354; }
.terminal-light { width: 7px; height: 7px; background: #94cdff; box-shadow: 0 0 14px #94cdff; border-radius: 50%; }
.demo-row { display: flex; justify-content: space-between; gap: 12px; padding: 17px 0; border-bottom: 1px solid #233747; font: 13px/1.5 Consolas, monospace; animation: enter .4s ease both; }
.demo-row b { font-weight: 400; color: #efbd79; text-align: right; }
.demo-row.verified b { color: #90caff; }
.demo-note { margin: 20px 0 0; color: #91a9ba; font-size: 12px; }
.story { background: #edf2f6; color: #132a40; }
.story .kicker { color: #295e8d; }
.story h2 { max-width: 780px; }
.journey-art { position: relative; overflow: hidden; height: 160px; margin-bottom: 35px; background: #0a2033; display: flex; justify-content: space-around; align-items: center; color: white; }
.journey-grid { position: absolute; inset: -70%; background-image: linear-gradient(#43759b40 1px, transparent 1px), linear-gradient(90deg, #43759b40 1px, transparent 1px); background-size: 32px 32px; transform: perspective(500px) rotateX(55deg); }
.place { z-index: 1; padding: 5px 12px; background: #112e46; font: 700 32px Barlow, sans-serif; }
.travel-line { position: absolute; left: 25%; right: 25%; height: 2px; background: #7db7e5; }
.travel-line:after { content: ""; position: absolute; width: 22px; height: 5px; top: -2px; background: white; box-shadow: 0 0 20px #74baff; animation: travel 4s linear infinite; }
.route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 9%; }
.route h3 { font: 700 34px Barlow, sans-serif; margin: 8px 0; }
.route small { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; color: #376083; }
.route p { max-width: 480px; }
.route i { color: #3977a7; font-size: 36px; }
.caption { color: #4e6477; font-size: 13px; }
.profile { border-bottom: 1px solid var(--line); }
.profile h2 { margin: 0; }
.experience-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 40px; }
.experience-list article { border-top: 1px solid #4b6780; padding-top: 18px; }
.experience-list h3 { font: 700 26px Barlow, sans-serif; margin: 8px 0; }
.experience-list p { color: var(--muted); font-size: 15px; }
.experience-list small { color: var(--blue); }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; }
.contact p { color: var(--muted); }
form { display: grid; gap: 8px; min-width: 0; }
label { font-size: 14px; font-weight: 600; }
select, textarea { width: 100%; min-width: 0; background: #0d2030; color: white; border: 1px solid #506b80; padding: 12px; }
textarea { resize: vertical; }
form .btn { justify-self: start; margin-top: 7px; }
#status:empty { display: none; }
footer { border-top: 1px solid var(--line); font-size: 13px; color: #a5bacb; flex-wrap: wrap; }
.legal-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.stage.paused *, body.motion-paused .travel-line:after { animation-play-state: paused !important; }
@keyframes flow { to { stroke-dashoffset: -100; } }
@keyframes breathe { to { transform: scale(1.04) translateY(-5px); } }
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes travel { from { left: 0; } to { left: calc(100% - 22px); } }
@keyframes enter { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 800px) {
  header { padding: 12px 5vw; }
  .brand { font-size: 22px; }
  .brand img { width: 38px; height: 38px; margin-right: 6px; }
  nav { gap: 14px; }
  nav a[href="#praxis"] { display: none; }
  .navcta { padding: 5px 10px; }
  .stage-inner { min-height: 510px; padding: 30px 0 25px; }
  .hero-art { inset: 110px -12vw -40px 12%; opacity: .85; }
  .hero-art:after { background: linear-gradient(90deg, #040e1b, transparent 60%), linear-gradient(0deg, #040e1b, transparent 40%); }
  .lead { width: 100%; }
  h1 { font-size: clamp(60px, 13vw, 85px); }
  .lead > p:last-of-type { max-width: 340px; font-size: 15px; text-shadow: 0 2px 8px #000; }
  .hero-actions { gap: 13px; margin-top: 18px; }
  .visual { position: relative; margin: 25px 0 0 auto; bottom: auto; width: 63%; }
  .scene svg { height: 65px; }
  .visual-caption { font-size: 10px; grid-template-columns: 1fr auto; grid-column: 1 / -1; }
  .scene { grid-column: 1 / -1; }
  .choices button { padding: 14px 17px 15px 10px; }
  .choices strong { font-size: 23px; }
  .choices small { font-size: 8px; letter-spacing: .07em; }
  .choices button span { right: 5px; top: 3px; font-size: 13px; }
  .wrap { padding: 50px 6vw; }
  .focus-panel, .section-head, .lab-board, .contact { grid-template-columns: 1fr; gap: 20px; }
  .focus-panel { margin-bottom: 35px; padding-bottom: 30px; }
  details > div { grid-template-columns: 1fr; }
  .lab-left, .terminal { padding: 22px; }
  .route { grid-template-columns: 1fr; gap: 8px; }
  .route i { display: none; }
  .journey-art { height: 125px; }
  .experience-list { grid-template-columns: 1fr; gap: 18px; }
  .contact form { margin-top: 15px; }
}
@media (max-width: 400px) {
  nav a[href="#labor"] { display: none; }
  .choices { grid-template-columns: 1fr; }
  .choices button { padding: 9px 15px; border-right: 0; border-bottom: 1px solid #35516a; }
  .choices small { display: none; }
  .choices strong { font-size: 23px; margin: 0; }
  .choices button span { top: 7px; right: 13px; }
  .hero-actions .textlink { font-size: 12px; }
  .stage-inner { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}
.hero-art img { object-fit: contain; object-position: right center; }
.stage[data-service="1"] .scanlight { animation-duration: 5s; }
.stage[data-service="2"] .scanlight { animation-duration: 3s; }
@media (max-width: 800px) {
  .stage-inner { display: grid; padding-top: 25px; padding-bottom: 0; }
  .lead { grid-row: 1; }
  .hero-art { position: relative; inset: auto; grid-row: 2; height: 220px; margin: -15px -6vw 0; opacity: 1; }
  .hero-art img { object-position: center; }
  .hero-art:after { background: linear-gradient(0deg, #040e1b, transparent 18%); }
  .visual { position: absolute; bottom: 10px; width: 50%; margin: 0; }
  .hero-actions { margin-top: 12px; }
  .lead > p:last-of-type { max-width: 100%; }
}
.hero-art img { mask-image: linear-gradient(90deg, transparent, black 18%); }
.legal { max-width: 900px; min-height: 75vh; }
.legal h1 { font-size: 62px; }
.legal h2 { font-size: 32px; margin: 30px 0 12px; }
.legal p { color: var(--muted); }
@media(max-width:800px) {
  .hero-art img { mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
}
@media(max-width:360px) { nav a[href="#leistungen"] { display:none; } }

/* Service scenes */
.visual {
  width: 47%;
  bottom: 42px;
  display: block;
  background: linear-gradient(135deg, #0a2034f2, #071522ed);
  border-color: #5484ab;
  box-shadow: 0 24px 90px #0008, inset 0 1px #b6ddff28;
  border-radius: 12px;
  overflow: hidden;
}
.scene-heading { padding: 24px 26px 0; }
.scene-heading .kicker { font-size: 10px; }
.scene-heading h2 { font-size: clamp(30px, 3vw, 46px); margin: 10px 0; }
.scene-heading p { color: #b8cddd; font-size: 15px; margin: 0; }
.scene svg { height: auto; aspect-ratio: 500/220; }
.visual-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 22px;
  border-top: 1px solid #35546a;
  font-size: 11px;
  text-align: left;
}
#motion { width: auto; height: auto; min-height: 34px; padding: 6px 10px; font-size: 11px; white-space: nowrap; }
.hero-art { opacity: .8; }
.hero-art img { animation-duration: 22s; }
.choices { border: 0; gap: 12px; padding-bottom: 22px; }
.choices button {
  border: 1px solid #456077;
  border-radius: 8px;
  padding: 21px 26px;
  overflow: hidden;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.choices button:last-child { border-right: 1px solid #456077; }
.choices button[aria-pressed=true] {
  background: linear-gradient(125deg, #214d71, #122e48);
  border-color: #96d3ff;
  box-shadow: inset 0 3px #91d0ff, 0 8px 28px #0004;
}
.choices button p { font-size: 13px; color: #c2d5e4; margin: 10px 0 0; line-height: 1.5; }
.choices strong { font-size: clamp(22px, 2.2vw, 34px); }
.choices button:hover { border-color: #bbdfff; box-shadow: 0 8px 30px #438fce25; }
.scene text { text-anchor: middle; dominant-baseline: middle; font-weight: 600; letter-spacing: .04em; }
.scene .diagram-label { font-size: 10px; fill: #a8c9df; }
.connection { stroke: #3c698a; fill: none; stroke-width: 2; }
.packet { stroke: #a3ddff; fill: none; stroke-width: 3; stroke-dasharray: 7 93; animation: flow 3s linear infinite; filter: drop-shadow(0 0 4px #7abfff); }
.system-block > rect:first-child, .network-node rect, .pipeline-node rect {
  fill: #102b42; stroke: #6b9dc2; stroke-width: 1.5;
}
.system-block path { stroke: #709abb; stroke-width: 4; }
.system-block text { font-size: 11px; }
.orbit { fill: none; stroke: #548ebd; stroke-width: 1; stroke-dasharray: 2 6; }
.scan-ring { fill: #174168; stroke: #b4e5ff; stroke-width: 3; stroke-dasharray: 60 30; transform-box: fill-box; transform-origin: center; animation: revolve 8s linear infinite; }
.scan-cross { fill: none; stroke: #b4e5ff; stroke-width: 2; }
.system-block .scan-bar { fill: #bce9ff; stroke: none; animation: scan 4s ease-in-out infinite alternate; filter: drop-shadow(0 0 7px #7bc5ff); }
.network-core { fill: #174168; stroke: #9fd8ff; stroke-width: 2; animation: core-pulse 3s ease-in-out infinite; }
.pipeline-node rect { animation: build-step 6s ease-in-out infinite; animation-delay: calc(var(--step) * 1.3s); }
@keyframes revolve { to { rotate: 360deg; } }
@keyframes scan { to { transform: translateY(77px); } }
@keyframes core-pulse { 50% { stroke-width: 5; stroke: #e2f5ff; } }
@keyframes build-step { 0%, 55%, 100% { fill: #102b42; stroke: #6b9dc2; } 20%, 35% { fill: #285f88; stroke: #dcf3ff; } }
@media(max-width:800px) {
  .stage { display: flex; flex-direction: column; gap: 20px; padding-bottom: 25px; }
  .stage-inner { display: contents; }
  .lead { order: 0; padding-top: 25px; }
  .hero-art { display: none; }
  .lead h1 { font-size: clamp(52px, 11vw, 76px); }
  .lead > p:last-of-type { max-width: 580px; }
  .visual { position: relative; right: auto; bottom: auto; order: 2; width: 100%; margin: 0; }
  .choices { order: 1; width: 100%; margin: 0; padding: 0; gap: 7px; }
  .choices button { padding: 12px; }
  .choices button p { font-size: 12px; }
  .choices strong { font-size: 25px; }
  .scene-heading { padding: 18px 20px 0; }
  .scene-heading h2 { font-size: 32px; }
  .scene svg { max-height: 250px; }
  .visual-caption { padding: 10px 12px; }
}
@media(max-width:500px) {
  .choices { grid-template-columns: 1fr; gap: 6px; }
  .choices button { padding: 10px 15px; border: 1px solid #456077; }
  .choices button small { display: none; }
  .choices button strong { margin: 0; font-size: 25px; }
  .choices button p { margin-top: 2px; }
  .choices button span { top: 11px; }
  .lead h1 { font-size: 48px; }
  .hero-actions { gap: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .visual, .choices button { transition: none; }
}

/* Customer context, evidence and engagement */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 25px 5vw;
  gap: 30px;
  border-bottom: 1px solid var(--line);
  background: #0d1e2e;
}
.proof-strip a { text-decoration: none; }
.proof-strip b { display: block; color: #e3f1fb; font-size: 15px; }
.proof-strip span { color: #a9c2d5; font-size: 12px; }
.focus-panel { align-items: start; }
.service-delivery { padding: 15px 18px; background: #132d43; border-left: 2px solid #9ad3ff; }
.service-delivery b, .service-evidence b { display: block; color: #f0f7ff; margin-bottom: 4px; font-size: 13px; }
.service-evidence { font-size: 14px; }
.service-evidence > a { display: block; margin-top: 8px; font-size: 12px; }
.engagement { border-bottom: 1px solid var(--line); background: #0a1927; }
.engagement h2 { max-width: 800px; }
.engagement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.engagement-grid article { border-top: 1px solid #526f86; padding-top: 20px; }
.engagement-grid h3 { font: 700 28px Barlow, sans-serif; margin-bottom: 12px; }
.engagement-grid p { color: var(--muted); font-size: 16px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.copy-request { background: transparent; border: 0; border-bottom: 1px solid #6589a4; color: var(--blue); padding: 5px 0; font-size: 14px; }
.contact .form-note { font-size: 12px; color: #b0c5d6; }
@media(max-width:800px) {
  .proof-strip { grid-template-columns: 1fr; gap: 14px; padding: 25px 6vw; }
  .engagement-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Search landing pages share the main site's typography and navigation. */
.service-page { max-width: 1440px; padding-top: 28px; }
.breadcrumbs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; font-size: 13px; margin-bottom: 45px; color: var(--muted); }
.service-intro { max-width: 940px; padding-bottom: 55px; border-bottom: 1px solid var(--line); }
.service-intro h1 { font-size: clamp(46px, 6vw, 82px); line-height: 1.06; text-transform: none; }
.service-intro > p:not(.kicker) { max-width: 760px; font-size: 20px; color: var(--muted); }
.service-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 1fr); gap: 8%; padding-top: 45px; }
.service-body article section { margin-bottom: 42px; }
.service-body h2, .service-faq h2 { font-size: 36px; line-height: 1.1; margin-bottom: 18px; }
.service-body p, .service-faq p { color: var(--muted); }
.service-body aside { align-self: start; padding: 26px; border: 1px solid var(--line); background: var(--panel); }
.service-body aside h2 { font-size: 27px; margin-top: 24px; }
.service-body aside h2:first-child { margin-top: 0; }
.service-body aside a { display: block; color: var(--blue); margin: 12px 0; font-size: 15px; }
.service-faq { max-width: 900px; border-top: 1px solid var(--line); padding-top: 35px; }
.service-faq summary { font-size: 26px; gap: 16px; line-height: 1.2; }
.service-faq details p { padding: 0 0 20px; }
.service-more { display: inline-block; margin-bottom: 22px; font-weight: 600; }
@media(max-width:800px) {
  .service-body { grid-template-columns: 1fr; gap: 12px; }
  .service-intro > p:not(.kicker) { font-size: 17px; }
  .service-body aside { margin-bottom: 30px; }
  .breadcrumbs { margin-bottom: 30px; }
  .service-intro h1 { font-size: 46px; overflow-wrap: anywhere; }
}
@media(max-width:800px) {
  header nav a[href="/#erfahrung"] { display: none; }
}
@media(max-width:360px) {
  header nav a[href="/#leistungen"] { display: none; }
}
.service-detail-link { display: block; margin: 16px 0 12px; }

/* Two clear disciplines, supported by an inspectable AI workflow. */
.lead { width: 54%; }
.lead h1 { font-size: clamp(54px, 5.7vw, 88px); line-height: 1.02; text-transform: none; }
.lead > p:last-of-type { max-width: 540px; }
.lead .kicker { font-size: 13px; letter-spacing: .11em; }
.stage-inner { min-height: 545px; }
.visual { width: 42%; }
.choices { grid-template-columns: repeat(2,minmax(0,1fr)); }
.choices strong { font-size: clamp(28px,3vw,42px); }
.choices button:nth-child(2) small, .choices button:nth-child(2) span { color: #aaf0cf; }
.choices button:nth-child(2)[aria-pressed=true] { background: linear-gradient(125deg,#15453f,#102d39); border-color:#9ee6c8; box-shadow:inset 0 3px #9ee6c8; }
.supporting { padding: 28px 0 0; max-width: 850px; color:var(--muted); }
.supporting a { color:var(--blue); }
.ai-lab { background:radial-gradient(ellipse at 90% 35%,#123b364d,transparent 65%),#081823; border-top:1px solid var(--line); }
.ai-lab h2 em, .ai-lab .kicker { color:#aaf0cf; }
.ai-board { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); border:1px solid #4e867a; border-radius:12px; overflow:hidden; box-shadow:0 20px 80px #0004; }
.ai-input { padding:35px; background:linear-gradient(135deg,#173c38,#0b242d); }
.ai-badge { display:inline-block; color:#b6f4d9; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid #527d72; padding:5px 9px; margin-bottom:28px; }
.ai-input h3, #ai-result h3, .ai-evidence h3 { font:700 33px/1.15 Barlow,sans-serif; }
.ai-input p, #ai-result p, .ai-evidence p { color:var(--muted); }
.ai-input .demo-note { margin:20px 0 0; font-size:12px; line-height:1.6; }
.ai-lab .btn { background:#abebce; border-color:#abebce; }
.ai-process { padding:30px; min-width:0; background:#07161e; }
.ai-steps { display:flex; flex-wrap:wrap; gap:8px 16px; list-style:none; margin:0 0 30px; padding:0 0 22px; border-bottom:1px solid #36534f; }
.ai-steps li { color:#b5c9c4; font-size:12px; border-bottom:2px solid transparent; padding-bottom:5px; transition:color .3s,border-color .3s; }
.ai-steps li.active { color:#affcda; border-color:#affcda; }
.ai-steps li.done { color:#86c0aa; }
.ai-state { display:block; color:#aaf0cf; font-size:12px; letter-spacing:.04em; margin-bottom:18px; }
#ai-result { min-height:195px; }
#ai-result[data-state="3"] .ai-state { color:#ffe1a2; }
.ai-evidence { display:grid; grid-template-columns:1fr 1.4fr; gap:8%; padding-top:38px; }
[hidden] { display:none !important; }
@media(max-width:800px) {
  header nav a[href="#ki-praxis"] { display:none; }
  .lead { width:100%; }
  .lead h1 { font-size:clamp(41px,8.6vw,64px); }
  .lead .kicker { font-size:11px; letter-spacing:.08em; }
  .lead > p:last-of-type { font-size:16px; }
  .visual { width:100%; }
  .choices strong { font-size:28px; }
  .choices button { padding:14px; }
  .choices button small { display:block; font-size:9px; letter-spacing:.07em; }
  .choices button span { display:none; }
  .ai-board,.ai-evidence { grid-template-columns:1fr; }
  .ai-input,.ai-process { padding:24px; }
  .ai-evidence { gap:10px; }
  .ai-input h3,#ai-result h3 { font-size:30px; }
}
@media(max-width:500px) {
  .choices { grid-template-columns:1fr; }
  .choices button small { display:none; }
  .lead h1 { font-size:clamp(38px,10.5vw,52px); }
  .stage { gap:16px; }
  .choices button { padding:10px 15px; }
}
@media(prefers-reduced-motion:reduce) { .ai-steps li { transition:none; } }
.lead > p:not(.kicker) { max-width:540px; color:#c7d4df; font-size:17px; line-height:1.6; }
.lead > .hero-person { font-size:13px; color:#a8c7df; margin-bottom:16px; }
.lead h1 { font-size:clamp(52px,5.3vw,82px); }
.stage-inner { min-height:570px; }
.service-offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.service-offer { padding:30px; border:1px solid #496c87; border-top:3px solid #94cdff; background:linear-gradient(135deg,#11283b,#091724); }
.service-offer h3 { font:700 clamp(29px,2.8vw,39px)/1.12 Barlow,sans-serif; }
.service-offer p,.service-offer dd { color:var(--muted); font-size:16px; }
.service-offer dt { color:#f3f8fc; font-size:13px; font-weight:700; margin:20px 0 5px; }
.service-offer dd { margin:0; }
.service-offer dl { margin-bottom:28px; }
.service-offer.ai-offer { border-color:#497b6c; border-top-color:#aaf0cf; background:linear-gradient(135deg,#10312d,#091724); }
.ai-offer .kicker,.ai-offer .textlink { color:#aaf0cf; }
.why-bridge { padding-top:45px; padding-bottom:45px; border-bottom:1px solid var(--line); }
.why-bridge h2 { font-size:clamp(32px,3.1vw,45px); margin-bottom:18px; }
.why-bridge > p:last-child { max-width:820px; color:var(--muted); margin:0; }
.example-source { margin:0 0 24px; border:1px solid #4e867a; padding:0 14px; }
.example-source summary { font:600 14px/1.4 "Segoe UI",sans-serif; align-items:center; padding:10px 0; }
.example-source p { font-size:13px; margin:0; padding-bottom:16px; }
.example-source summary:after { font-size:22px; }
.entry-section { background:#102336; border-block:1px solid #47647d; }
.entry-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.entry-grid article { display:flex; flex-direction:column; align-items:flex-start; padding:30px; background:#091724; border:1px solid #496c87; }
.entry-grid article:last-child { border-color:#588e7d; }
.entry-grid article:last-child .kicker { color:#aaf0cf; }
.entry-grid h3 { font:700 34px/1.15 Barlow,sans-serif; }
.entry-grid p,.entry-grid li { color:var(--muted); font-size:16px; }
.entry-grid p b { display:block; color:white; margin-bottom:5px; }
.entry-grid ul { padding-left:20px; margin:0 0 24px; }
.entry-grid li { padding-bottom:9px; }
.entry-grid .btn { margin-top:auto; gap:12px; }
.entry-result { border-top:1px solid var(--line); padding-top:20px; }
.entry-faq { margin-top:30px; }
.entry-faq summary { font-size:26px; gap:15px; }
.entry-faq p { color:var(--muted); max-width:850px; padding-bottom:20px; }
.focus-panel { gap:6%; padding-bottom:30px; margin-bottom:35px; }
.focus-panel h2 { font-size:clamp(30px,3vw,42px); }
@media(max-width:800px) { .entry-grid { grid-template-columns:1fr; } .entry-grid article { padding:24px; } }
.lead > p.hero-person { font-size:13px; line-height:1.5; color:#a8c7df; margin-bottom:12px; }
@media(min-width:801px) { .stage-inner { min-height:505px; padding-top:34px; padding-bottom:26px; } .lead h1 { font-size:clamp(52px,4.8vw,76px); margin-bottom:20px; } .hero-actions { margin-top:16px; } }

/* Public case study: schematic examples, never operational screenshots. */
.case-teaser { display:grid; grid-template-columns:.8fr 1.2fr; gap:8%; border-block:1px solid #4e867a; background:radial-gradient(ellipse at 0 90%,#1c514f66,transparent 65%),#091d2a; }
.case-teaser h2 em,.case-teaser .kicker,.case-page .kicker { color:#aaf0cf; }
.case-teaser p,.case-teaser li { color:var(--muted); }
.case-teaser ul { padding-left:20px; margin-bottom:20px; }
.case-teaser-label { font-weight:700; color:#f4f8fc!important; }
.case-teaser .case-teaser-note { font-size:13px; }
.case-page { max-width:1440px; padding-top:28px; }
.case-hero { padding-bottom:48px; }
.case-hero h1 { text-transform:none; font-size:clamp(48px,6.5vw,90px); line-height:1.04; max-width:1000px; }
.case-hero h1 em { color:#aaf0cf; }
.case-lead { max-width:850px; font-size:21px; color:#c1d4df; }
.case-tags { display:flex; flex-wrap:wrap; gap:10px; margin:25px 0; }
.case-tags span { border:1px solid #45665f; border-radius:4px; padding:6px 10px; color:#b7d2c8; font-size:12px; }
.case-page section:not(.case-hero) { border-top:1px solid var(--line); padding-block:48px; }
.case-context,.case-transfer { display:grid; grid-template-columns:1fr 1fr; gap:7%; }
.case-page h2 { font-size:clamp(34px,4vw,56px); line-height:1.08; }
.case-page h3 { font:700 30px/1.15 Barlow,sans-serif; }
.case-page p,.case-page li { color:var(--muted); }
.case-contribution { padding:28px; align-self:start; background:#112b34; border-left:3px solid #aaf0cf; }
.case-components { list-style:none; padding:0; margin:0; }
.case-components li { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:28px 0; border-bottom:1px solid var(--line); }
.case-components li > span { color:#aaf0cf; font:700 40px Barlow,sans-serif; }
.case-components li p { max-width:920px; }
.case-components .case-benefit { border-left:2px solid #6d9f8f; padding-left:16px; margin-bottom:0; }
.case-benefit b { color:#e5f4ed; }
.case-switches { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.case-switches button { border:1px solid #6a9a89; background:#102a33; padding:11px 18px; color:#e2f5ee; font-weight:600; }
.case-switches button[aria-pressed=true] { background:#aaf0cf; color:#071b23; }
.case-flow { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:24px; border:1px solid #426f61; background:#0c242c; }
.case-flow span { font:700 clamp(18px,2.3vw,30px) Barlow,sans-serif; color:#c3f8e3; }
.case-flow i { color:#70b397; font-style:normal; }
.case-flow[data-case=missing] span:nth-of-type(3),.case-flow[data-case=duplicate] span:nth-of-type(2) { color:#ffe1a2; }
.case-demo-grid { display:grid; grid-template-columns:1fr 1.2fr; border:1px solid #426f61; border-top:0; }
.case-demo-grid > div { padding:30px; min-width:0; }
#case-result { background:#102c32; min-height:300px; }
.case-status { display:block; color:#aaf0cf; font-size:12px; font-weight:700; letter-spacing:.06em; margin-bottom:18px; text-transform:uppercase; }
#case-result[data-case=missing] .case-status { color:#ffe1a2; }
.case-boundary,.case-scope { font-size:14px; padding:18px; border-left:2px solid #88aa9c; background:#0a1b25; }
.case-validation { max-width:980px; }
.case-validation li { margin-bottom:12px; }
.case-page .case-transfer { padding-bottom:0; }
.case-back { margin-top:22px; font-size:14px; }
@media(max-width:800px) {
  .case-teaser,.case-context,.case-transfer,.case-demo-grid { grid-template-columns:1fr; gap:20px; }
  .case-hero h1 { font-size:clamp(40px,9vw,60px); overflow-wrap:anywhere; }
  .case-lead { font-size:18px; }
  .case-components li { grid-template-columns:38px 1fr; gap:12px; }
  .case-components li > span { font-size:30px; }
  .case-demo-grid { gap:0; }
  .case-demo-grid > div,.case-contribution { padding:22px; }
  .case-flow { padding:18px 12px; gap:5px; }
  .case-flow span { font-size:19px; }
  .case-switches button { padding:10px 12px; font-size:14px; }
  .case-page section:not(.case-hero) { padding-block:35px; }
}
@media(max-width:360px) { .case-flow { flex-wrap:wrap; justify-content:flex-start; gap:8px; } }

/* A case study that shows its outputs before explaining its internals. */
.case-hero-showcase { display:grid; grid-template-columns:1.12fr 1fr; gap:6%; align-items:center; }
.case-hero-showcase h1 { font-size:clamp(46px,5.1vw,74px); }
.case-hero-showcase .case-lead { font-size:18px; }
.case-owner { font-size:12px; color:#a8c7d0!important; }
.case-hero-actions { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:25px; }
.artifact-console { position:relative; min-width:0; border:1px solid #609e95; border-radius:14px; background:radial-gradient(ellipse at 100% 0,#23584d66,transparent 70%),#0b202b; box-shadow:0 24px 85px #0006,0 0 70px #77e2c20a; overflow:hidden; }
.artifact-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; color:#b3dace; border-bottom:1px solid #315c58; font-size:12px; }
.artifact-dot { width:8px; height:8px; border-radius:50%; background:#aaf0cf; box-shadow:0 0 15px #aaf0cf99; }
.artifact-tabs { display:flex; padding:16px 22px 0; gap:8px; }
.artifact-tabs button { flex:1; min-width:0; padding:10px 8px; border:1px solid #46675f; color:#c9e4db; background:#102932; font-size:13px; }
.artifact-tabs button[aria-pressed=true] { background:#aaf0cf; color:#071b23; border-color:#aaf0cf; }
#artifact-view { padding:28px 24px; min-height:355px; }
.artifact-label { color:#aaf0cf!important; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
#artifact-view h3 { font-size:34px; color:#f3f8fc; margin-bottom:26px; }
.artifact-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid #3a5b59; font-size:13px; color:#cad8e0; }
.artifact-row b { color:#aaf0cf; font-size:11px; font-weight:600; border:1px solid #426b60; padding:4px 7px; border-radius:3px; }
.artifact-row b.pending { color:#ffdea4; border-color:#826a40; }
.artifact-note { font-size:13px; margin-top:22px; margin-bottom:0; }
.artifact-foot { padding:14px 24px; border-top:1px solid #315c58; color:#a3c4bc; font-size:11px; }
.case-proof-label { color:#b9d7cd!important; font-size:12px; padding-left:12px; border-left:2px solid #8ad0bd; }
.technical-details { border:1px solid #3c5c69; padding:0 22px; }
.technical-details > summary { font-size:24px; gap:20px; align-items:center; }
.technical-details .case-components { padding-bottom:22px; }
.fit-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fit-grid article { background:#102731; padding:26px; border-top:2px solid #81bfab; }
.fit-grid ul { margin:0; padding-left:20px; }
.fit-grid li { margin-bottom:12px; font-size:16px; }
.pilot-measures { padding:28px 0 18px; }
.measure-row { display:grid; grid-template-columns:130px 1fr; gap:24px; padding:18px 0; border-top:1px solid var(--line); }
.measure-row b { color:#b7eed8; font-size:15px; }
.measure-row span { color:var(--muted); font-size:16px; max-width:850px; }
.pilot-measures > p { font-size:14px; max-width:900px; margin:20px 0 0; }
@media(max-width:800px) { .fit-grid { grid-template-columns:1fr; } .measure-row { grid-template-columns:1fr; gap:6px; } .technical-details { padding-inline:14px; } }
@media(max-width:500px) { .technical-details .case-components li { grid-template-columns:1fr; gap:10px; padding:16px; } .technical-details h3 { overflow-wrap:anywhere; } }
.document-preview { display:flex; align-items:center; gap:18px; }
.document-sheet { width:58%; min-width:0; background:#e6f1ee; color:#12302f; padding:18px; box-shadow:5px 7px 0 #537d7240; transform:rotate(-2deg); }
.document-sheet span { font-size:8px; letter-spacing:.1em; display:block; }
.document-sheet strong { font:700 21px Barlow,sans-serif; display:block; margin:12px 0; }
.document-sheet i { display:block; height:4px; background:#a6bcb5; margin:7px 0; }
.document-sheet i:nth-of-type(2) { width:70%; }
.document-sheet b { font-size:8px; display:block; margin-top:17px; }
.document-formats { display:grid; gap:12px; font-size:11px; color:#c8eedf; }
.document-formats span { border-left:2px solid #aaf0cf; padding-left:10px; }
.case-summary-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; padding:24px 0 32px; border-bottom:1px solid var(--line); }
.case-summary-strip b,.case-summary-strip span { display:block; }
.case-summary-strip b { font-size:14px; color:#daf1e7; }
.case-summary-strip span { font-size:12px; color:var(--muted); margin-top:5px; }
.case-components { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.case-components li { padding:24px; border:1px solid var(--line); background:#0b1c29; grid-template-columns:36px 1fr; gap:15px; }
.case-components li:last-child { grid-column:1/-1; }
.case-components li > span { font-size:28px; }
.case-components h3 { font-size:27px; }
.case-components p { font-size:15px; }
.business-intro { max-width:850px; }
.business-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:30px; }
.business-grid article { padding:25px; border-top:3px solid #8ad0bd; background:linear-gradient(145deg,#123037,#0b1c29); }
.business-grid article > span { color:#aaf0cf; font-size:11px; text-transform:uppercase; letter-spacing:.1em; }
.business-grid h3 { margin-top:20px; font-size:29px; }
.business-grid p { font-size:15px; }
.business-grid b { font-size:12px; color:#ddf5ea; }
.case-delivery { list-style:none; padding:0; margin:0 0 30px; counter-reset:delivery; }
.case-delivery li { padding:0 0 22px 40px; position:relative; counter-increment:delivery; }
.case-delivery li:before { content:counter(delivery,decimal-leading-zero); position:absolute; left:0; top:0; color:#aaf0cf; font:700 24px Barlow,sans-serif; }
.case-delivery b,.case-delivery span { display:block; }
.case-delivery b { font-size:16px; color:#f4f8fc; }
.case-delivery span { font-size:14px; margin-top:6px; }
@media(max-width:1000px) { .case-hero-showcase { gap:4%; } .artifact-tabs { padding-inline:14px; } .business-grid { gap:12px; } .business-grid article { padding:20px; } }
@media(max-width:800px) {
  .case-hero-showcase,.case-summary-strip,.case-components,.business-grid { grid-template-columns:1fr; }
  .case-hero-showcase { gap:30px; }
  .case-hero-showcase h1 { font-size:clamp(42px,10.5vw,64px); }
  .case-hero-showcase .case-lead { font-size:17px; }
  .case-components li:last-child { grid-column:auto; }
  .case-components li { padding:20px; grid-template-columns:30px 1fr; }
  .case-summary-strip { gap:18px; }
  #artifact-view { min-height:350px; padding:24px 20px; }
  .artifact-top,.artifact-foot { padding-inline:20px; }
}
@media(max-width:800px) { header nav a[href="#erfahrung"] { display:none; } }
@media(max-width:800px){
  .service-offers { grid-template-columns:1fr; }
  .service-offer { padding:24px; }
  .lead h1 { font-size:clamp(38px,10.5vw,64px); }
  .lead > p:not(.kicker) { font-size:16px; }
  .lead > .hero-person { font-size:12px; }
}