/* Brandt Elektrotechnik — Stil nach der Relay-Vorlage: Schwarz, großer Verlaufs-Text, Karten mit Haarlinie, Lime als einziger Akzent. */
:root { --bg: #000; --fg: #fff; --muted: #9ba0a6; --line: rgba(255,255,255,.12); --surface: #101113; --accent: #c8f751; --on-accent: #0a0b09; --hl-off: rgba(255,255,255,.2); }
body { background: #000; }
.demo-bar { position: fixed; top: auto; bottom: .9rem; left: 50%; transform: translateX(-50%); z-index: 120; border-radius: 999px; padding: .5rem 1.1rem; background: rgba(16,17,19,.92); backdrop-filter: blur(8px); border: 1px solid var(--line); white-space: nowrap; gap: 1.2rem; max-width: calc(100% - 1.5rem); }
@media (max-width: 560px) { .demo-bar span { display: none; } }

.hd { position: fixed; z-index: 100; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: background .4s; }
.hd.solid { background: rgba(0,0,0,.72); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.logo { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; } .logo i { width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--accent); display: grid; place-items: center; } .logo i svg { width: 1.1rem; stroke: #0a0b09; fill: none; stroke-width: 2.2; }
.hd nav { display: flex; gap: 2rem; color: var(--muted); font-size: .95rem; } .hd nav a:hover { color: #fff; } @media (max-width: 900px) { .hd nav { display: none; } }
.btn { box-shadow: 0 0 0 0 rgba(200,247,81,.0); } .btn:hover { box-shadow: 0 0 40px -6px rgba(200,247,81,.55); }

/* Hero */
.hero { position: relative; z-index: 2; min-height: max(100lvh, 42rem); display: grid; align-content: center; padding: 8rem 0 5rem; overflow: hidden; }
.hero::before { content: ''; 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: 4.5rem 4.5rem; -webkit-mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 70% 45%, #000, transparent 75%); }
#flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .wrapx { position: relative; z-index: 1; }
.chip { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 500 .76rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #e6e8ea; }
.chip b { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,247,81,.6); } 70%, 100% { box-shadow: 0 0 0 .7rem rgba(200,247,81,0); } }
h1 { margin-top: 1.5rem; max-width: 14ch; font-size: clamp(3.2rem, 9vw, 8.4rem); line-height: .92; letter-spacing: -.055em; font-weight: 600; } h1 em { font-style: normal; color: var(--accent); }
.hero .lead { margin-top: 1.8rem; max-width: 33rem; color: var(--muted); font-size: 1.15rem; }
.cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.marq { overflow: hidden; border-block: 1px solid var(--line); padding: 1rem 0; position: relative; z-index: 2; background: #000; }
.marq div { display: flex; gap: 3rem; width: max-content; animation: slide 30s linear infinite; font: 500 .85rem var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .marq span::after { content: '⚡'; margin-left: 3rem; color: var(--accent); } @keyframes slide { to { transform: translateX(-50%); } }

section { position: relative; padding: clamp(5rem, 11vw, 9rem) 0; }
h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: .98; letter-spacing: -.045em; font-weight: 600; max-width: 44rem; } h2 em { font-style: normal; color: var(--accent); }
#hl { font-size: clamp(1.9rem, 4.2vw, 3.8rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 600; max-width: 62rem; }

/* Schaltschrank */
.board-wrap { display: grid; gap: 2rem; margin-top: 3.5rem; grid-template-columns: 1fr; align-items: stretch; } @media (min-width: 980px) { .board-wrap { grid-template-columns: 1.15fr .85fr; } }
#board { position: relative; border-radius: 26px; background: linear-gradient(180deg, #151618, #0d0e0f); box-shadow: inset 0 0 0 1px var(--line); padding: 2.2rem 1.6rem 2.6rem; display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
#board::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 1.2rem; height: .7rem; border-radius: 4px; background: repeating-linear-gradient(90deg, #26282b 0 14px, #1b1c1e 14px 18px); }
.brk { position: relative; display: grid; justify-items: center; gap: .8rem; padding: 1rem .2rem 1.6rem; border-radius: 14px; background: #1b1c1f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); transition: box-shadow .4s, transform .4s var(--ease); }
.brk:hover { transform: translateY(-3px); }
.brk .led { width: .5rem; height: .5rem; border-radius: 50%; background: #3a3c40; transition: background .3s, box-shadow .3s; }
.brk .sw { position: relative; width: 2.2rem; height: 5.2rem; border-radius: 10px; background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.brk .sw::before { content: ''; position: absolute; left: .25rem; right: .25rem; bottom: .25rem; height: 2.3rem; border-radius: 7px; background: linear-gradient(180deg, #5b5e63, #3a3c40); transition: transform .45s var(--ease), background .4s; }
.brk .lbl { font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.2; min-height: 2.2em; }
.brk.on { box-shadow: inset 0 0 0 1px rgba(200,247,81,.7), 0 0 36px -8px rgba(200,247,81,.5); } .brk.on .led { background: var(--accent); box-shadow: 0 0 12px var(--accent); } .brk.on .sw::before { transform: translateY(-2.35rem); background: linear-gradient(180deg, #e4ff93, var(--accent)); } .brk.on .lbl { color: #fff; }
#brk-card { border-radius: 26px; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; align-content: space-between; gap: 2rem; min-height: 18rem; position: relative; overflow: hidden; }
#brk-card::before { content: ''; position: absolute; width: 22rem; height: 22rem; right: -9rem; top: -9rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,247,81,.22), transparent); }
#brk-card.swap > * { animation: swap .6s var(--ease) both; } #brk-card.swap > *:nth-child(2) { animation-delay: .06s; } #brk-card.swap > *:nth-child(3) { animation-delay: .12s; } @keyframes swap { from { opacity: 0; transform: translateY(14px); } }
#brk-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -.04em; font-weight: 600; } #brk-text { color: var(--muted); font-size: 1.05rem; max-width: 28rem; } #brk-price { font: 500 1rem var(--mono); color: var(--accent); }
@media (max-width: 640px) { #board { padding-inline: .7rem; gap: .3rem; } .brk .lbl { font-size: .5rem; } .brk .sw { width: 1.6rem; } }

/* Zahlen */
.stats { display: grid; gap: 1px; background: var(--line); grid-template-columns: repeat(2, 1fr); border-radius: 22px; overflow: hidden; margin-top: 3rem; } @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div { background: #000; padding: 2rem 1.5rem; } .stats b { display: block; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.05em; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .stats span { display: block; margin-top: .6rem; color: var(--muted); font-size: .95rem; }

/* Angepinnter Ablauf */
#flow-run { height: 340lvh; }
#flow-run .pane { display: grid; align-content: center; background: radial-gradient(60% 60% at 80% 30%, rgba(200,247,81,.07), transparent 70%), #000; }
.pin-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; } @media (min-width: 900px) { .pin-grid { grid-template-columns: .8fr 1.2fr; } }
#stp-big { font-size: clamp(7rem, 22vw, 17rem); line-height: .8; letter-spacing: -.08em; font-weight: 600; color: transparent; -webkit-text-stroke: 1.5px rgba(200,247,81,.8); }
.stp-rail { position: relative; display: grid; align-items: center; }
.stp-line { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); } .stp-line i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; transform: scaleY(0); box-shadow: 0 0 14px var(--accent); }
.stp { grid-area: 1 / 1; padding-left: 2rem; opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; } .stp.on { opacity: 1; transform: none; pointer-events: auto; } .stp.done { opacity: 0; transform: translateY(-24px); }
.stp h3 { font-size: clamp(1.8rem, 3.6vw, 3rem); letter-spacing: -.04em; font-weight: 600; } .stp p { margin-top: 1rem; color: var(--muted); font-size: 1.1rem; max-width: 30rem; }

/* Preise */
.cards { display: grid; gap: 1rem; margin-top: 3rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.spot { --mx: 50%; --my: 0%; position: relative; border-radius: 24px; padding: 2rem; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(200,247,81,.16), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s var(--ease), box-shadow .4s; }
.spot:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(200,247,81,.5); }
.spot .tag { display: block; } .spot h3 { margin-top: 1.2rem; font-size: 1.5rem; letter-spacing: -.03em; font-weight: 600; } .spot .pr { margin-top: .8rem; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.05em; font-weight: 600; } .spot ul { margin-top: 1.4rem; display: grid; gap: .6rem; color: var(--muted); } .spot li::before { content: '→ '; color: var(--accent); }

/* Kontakt */
.contact { display: grid; gap: 3rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .contact { grid-template-columns: .9fr 1.1fr; } }
.big-tel { display: inline-block; margin-top: 1.4rem; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 600; letter-spacing: -.04em; color: var(--accent); }
.box { padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: 26px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.foot-x { padding-bottom: 5rem; }