/* ============================================================
   m-a-r-s Ingenieurbüro Wais — Website. Marke nach m-a-r-s.de:
   Oswald, Blau rgba(10,101,148) #0a6594, LabVIEW-Gelb #ffbf00, Grau #d3d3d3, Dunkel #404040.
   ============================================================ */
:root {
  --blue: #0a6594; --blue-2: #0d7fb9; --yellow: #ffbf00; --orange: #ff7f0e; --green: #3cb44b; --wire-blue: #2f7ed8;
  --ink: #2a2a2a; --ink-soft: #595959; --muted: #8a8a8a; --bg: #f4f5f7; --card: #fff; --line: #d3d3d3;
  --dark: #0b1620; --dark-2: #10273a; --dark-3: #15324a;
  --font: 'Oswald', 'Arial Narrow', Arial, sans-serif; --text: 'Open Sans', Arial, sans-serif; --wrap: 1180px;
  --shadow: 0 22px 50px -24px rgba(11,22,32,.45);
}
* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; font-family: var(--text); color: var(--ink); background: var(--bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; } a { color: var(--blue); text-decoration: none; }
h1,h2,h3,h4 { margin: 0; font-family: var(--font); font-weight: 700; line-height: 1.1; letter-spacing: .01em; } p { margin: 0 0 1em; }
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.eyebrow { display: inline-block; font-family: var(--font); font-size: .82rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; color: var(--yellow); }
.eyebrow.blue { color: var(--blue); }
.h-section { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 700; color: var(--dark); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.h-section.light { color: #fff; }
.rule { width: 80px; height: 4px; background: var(--yellow); margin: 18px auto 0; }
.lead { font-size: 1.08rem; color: var(--ink-soft); max-width: 740px; margin-inline: auto; text-align: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--font); font-size: .95rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; border: 2px solid transparent; cursor: pointer; transition: transform .25s, box-shadow .25s, background .25s, color .25s; white-space: nowrap; }
.btn svg { width: 15px; height: 15px; }
.btn-yellow { background: var(--yellow); color: var(--dark); box-shadow: 0 12px 26px -12px rgba(255,191,0,.7); } .btn-yellow:hover { transform: translateY(-2px); background: #ffd24d; }
.btn-ghost { border-color: rgba(255,255,255,.55); color: #fff; } .btn-ghost:hover { background: #fff; color: var(--dark); }
.btn-blue { background: var(--blue); color: #fff; } .btn-blue:hover { background: var(--blue-2); transform: translateY(-2px); }
.scroll-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; }

/* Navigation (Blau wie das Menü des Originals) */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(10,101,148,.94); backdrop-filter: blur(12px); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.brand .word { font-family: var(--font); font-size: 1.7rem; letter-spacing: .12em; font-weight: 700; color: #fff; line-height: 1; }
.brand .word b { color: var(--yellow); font-weight: 700; }
.brand .sub { font-family: var(--font); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75); display: block; margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { font-family: var(--font); font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; position: relative; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--yellow); transition: right .3s; }
.nav-links a:not(.btn):hover::after { right: 0; }
.nav-links .btn { padding: 9px 18px; font-size: .85rem; }
@media (max-width: 900px) { .nav-links a:not(.btn) { display: none; } }

/* Kino-Reise: Signalweg im Prüfstand (dunkel, LabVIEW-Drähte) */
.cine { position: relative; }
.stage { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 10%, var(--dark-3) 0%, var(--dark-2) 45%, var(--dark) 100%); }
.stage .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(100% 80% at 50% 50%, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(100% 80% at 50% 50%, #000 40%, transparent 100%); }
.stage .vignette { position: absolute; inset: 0; background: radial-gradient(100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,.5) 100%); pointer-events: none; }
.world-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.world-svg text { font-family: var(--font); }
.ln { fill: none; stroke: #dfe7ee; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ln2 { fill: none; stroke: rgba(223,231,238,.45); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.wo { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }   /* LabVIEW: Gleitkomma */
.wb { fill: none; stroke: var(--wire-blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* Ganzzahl */
.wg { fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }     /* Boolesch */
.wy { fill: none; stroke: var(--yellow); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.box { fill: #122a3d; stroke: #dfe7ee; stroke-width: 2; }
.box-y { fill: rgba(255,191,0,.12); stroke: var(--yellow); stroke-width: 2; }
.panel { fill: #0d1f2d; stroke: rgba(223,231,238,.6); stroke-width: 2; }
.glow-y { filter: drop-shadow(0 0 10px rgba(255,191,0,.9)); }
@keyframes dashflow { to { stroke-dashoffset: -48; } }
.flow { stroke-dasharray: 14 10; animation: dashflow 1.1s linear infinite; }
.flow.slow { animation-duration: 2s; }
@keyframes pulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.led { animation: pulse 1.2s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 3s linear infinite; }
@keyframes scan { 0% { transform: translateX(0); } 100% { transform: translateX(-120px); } }
.trace { animation: scan 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .flow, .led, .spin, .trace { animation: none !important; } }

.cine-ui { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.cine-cap { position: absolute; max-width: 480px; opacity: 0; will-change: transform, opacity; background: rgba(11,22,32,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 24px 28px; border-left: 4px solid var(--yellow); box-shadow: 0 24px 60px -24px rgba(0,0,0,.6); color: #fff; }
.cine-cap.br, .cine-cap.tr { border-left: 0; border-right: 4px solid var(--yellow); text-align: right; }
.cine-cap.bl { left: 6%; bottom: 11%; } .cine-cap.br { right: 6%; bottom: 13%; } .cine-cap.tl { left: 6%; top: 15%; } .cine-cap.tr { right: 6%; top: 15%; }
.cine-cap .eyebrow { margin-bottom: 10px; }
.cine-cap h2 { font-size: clamp(1.8rem, 3.8vw, 3rem); margin-bottom: 10px; text-transform: uppercase; } .cine-cap h2 em { font-style: normal; color: var(--yellow); }
.cine-cap p { color: rgba(255,255,255,.78); font-size: clamp(.96rem, 1.3vw, 1.08rem); margin: 0; }
.cine-cap .pill { display: inline-block; margin-top: 12px; padding: 5px 12px; background: rgba(255,191,0,.12); border: 1px solid rgba(255,191,0,.5); font-family: var(--font); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--yellow); }
.cine-hero { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); text-align: center; width: min(92%, 900px); color: #fff; }
.cine-hero h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 700; letter-spacing: .04em; line-height: 1; text-transform: uppercase; text-shadow: 0 10px 40px rgba(0,0,0,.5); }
.cine-hero h1 span { color: var(--yellow); }
.cine-hero .sub { font-size: clamp(1rem, 1.7vw, 1.25rem); color: rgba(255,255,255,.82); margin-top: 16px; font-weight: 300; } .cine-hero .sub b { font-weight: 700; color: #ffd24d; }
.cine-hero .ctas { display: flex; gap: 12px; justify-content: center; margin-top: 26px; pointer-events: auto; flex-wrap: wrap; }
.cine-finale { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 700px); text-align: center; opacity: 0; z-index: 6; background: rgba(11,22,32,.84); backdrop-filter: blur(12px); padding: 40px 36px; border-top: 4px solid var(--yellow); color: #fff; box-shadow: 0 30px 80px -30px rgba(0,0,0,.7); }
.cine-finale .big { font-family: var(--font); font-size: clamp(2.2rem, 5.2vw, 4.2rem); font-weight: 700; letter-spacing: .03em; line-height: 1.02; text-transform: uppercase; } .cine-finale .big span { color: var(--yellow); }
.cine-finale p { color: rgba(255,255,255,.78); font-size: 1.08rem; margin-top: 14px; }
.cine-finale .ctas { pointer-events: auto; margin-top: 22px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.chapters { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; }
.chapters i { width: 8px; height: 8px; background: rgba(255,255,255,.25); transition: all .3s; display: block; } .chapters i.on { background: var(--yellow); transform: scale(1.5); }
.hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-family: var(--font); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.6); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hint i { width: 1px; height: 36px; background: linear-gradient(var(--yellow), transparent); display: block; animation: hintpulse 1.6s ease-in-out infinite; }
@keyframes hintpulse { 0%,100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 760px) {
  .cine-cap { max-width: 86%; padding: 18px 20px; } .cine-cap.bl, .cine-cap.br { bottom: 9%; left: 7%; right: auto; text-align: left; border-left: 4px solid var(--yellow); border-right: 0; }
  .cine-cap.tl, .cine-cap.tr { top: 11%; left: 7%; right: auto; text-align: left; border-left: 4px solid var(--yellow); border-right: 0; }
  .cine-hero { top: 7%; } .chapters { right: 12px; }
}
.cine-reduced-note { display: none; } @media (prefers-reduced-motion: reduce) { .cine-reduced-note { display: block; } .hint i { animation: none; } }

/* Sektionen */
section.block { padding: clamp(70px, 9vw, 120px) 0; position: relative; }
.block-head { text-align: center; margin-bottom: clamp(36px, 5vw, 60px); } .block-head .lead { margin-top: 20px; }
.reveal { opacity: 0; transform: translateY(34px); } .reveal.in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }

/* m·a·r·s – vier Buchstaben */
.mars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 980px) { .mars { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .mars { grid-template-columns: 1fr; } }
.m { background: #fff; border: 1px solid var(--line); padding: 34px 26px 30px; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.m::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .4s; }
.m:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .m:hover::after { transform: scaleX(1); }
.m .letter { font-family: var(--font); font-size: 4.2rem; font-weight: 700; color: var(--blue); line-height: 1; } .m .letter b { color: #c4161c; font-weight: 700; }
.m h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dark); margin: 6px 0 10px; }
.m p { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
.card { background: #fff; border: 1px solid var(--line); padding: 30px 28px; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; transition: transform .35s, box-shadow .35s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card .ico { width: 56px; height: 56px; background: var(--blue); display: grid; place-items: center; } .card .ico svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; color: var(--dark); margin-bottom: 8px; } .card p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

.dark { background: var(--dark); color: #fff; } .dark .lead { color: rgba(255,255,255,.75); }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.split h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); margin: 12px 0 14px; text-transform: uppercase; letter-spacing: .03em; } .split h3 em { font-style: normal; color: var(--yellow); }
.split p { color: rgba(255,255,255,.78); }
.list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; } .list li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; } .list li svg { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(255,255,255,.08); }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--dark-2); padding: 30px 24px; } .step .n { font-family: var(--font); font-size: 2.4rem; color: var(--yellow); line-height: 1; } .step h4 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; margin: 10px 0 8px; } .step p { color: rgba(255,255,255,.72); font-size: .92rem; margin: 0; }

.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 760px) { .certs { grid-template-columns: 1fr; } }
.cert { background: #fff; border: 1px solid var(--line); padding: 18px; }
.cert img { width: 100%; height: auto; border: 1px solid var(--line); }
.cert b { display: block; font-family: var(--font); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dark); margin-top: 14px; } .cert span { color: var(--ink-soft); font-size: .9rem; }
.logos { display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.logos img { height: 70px; width: auto; background: #fff; padding: 6px; }

.contact { background: var(--blue); color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact h2 { font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; letter-spacing: .03em; } .contact h2 span { color: var(--yellow); }
.contact p { color: rgba(255,255,255,.82); }
.contact .rows { display: grid; gap: 12px; margin-top: 24px; }
.contact .row { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); padding: 14px 18px; }
.contact .row svg { flex: none; width: 22px; height: 22px; stroke: var(--yellow); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact .row b { display: block; color: #fff; font-weight: 600; } .contact .row span { color: rgba(255,255,255,.75); font-size: .9rem; } .contact .row a { color: #fff; }
.contact .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.contact .card-logo { background: #fff; padding: 26px; display: grid; gap: 14px; justify-items: center; }
.contact .card-logo img { width: min(100%, 260px); }
.contact .card-logo span { color: var(--ink-soft); font-size: .9rem; text-align: center; }

footer { background: var(--dark); color: #bcc5cb; font-size: .86rem; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding: 50px 0 36px; align-items: start; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid b { color: #fff; } .foot-links { list-style: none; margin: 0; padding: 0; } .foot-links li { border-bottom: 1px solid rgba(255,255,255,.08); padding: 8px 0; } .foot-links a { color: #fff; font-family: var(--font); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; font-size: .74rem; color: #7f8c94; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }