/* Bit Media & Consulting LLC — dark tech design system */
:root{
  --bg:#0b0f17; --bg2:#0e1420; --panel:#121a2b; --panel2:#16203333;
  --line:#24314f; --text:#e9eef7; --muted:#9aa8c0;
  --accent:#38bdf8; --accent-soft:#38bdf822; --accent2:#7dd3fc;
  --radius:14px;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Header */
.site-header{position:sticky;top:0;z-index:560;background:#0b0f17;border-bottom:1px solid var(--line)}
.header-in{max-width:1120px;margin:0 auto;padding:.85rem 1.5rem;display:flex;align-items:center;gap:1.25rem}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--text);text-decoration:none}
.brand .mark{flex-shrink:0}
.brand .wm{font-family:var(--mono);font-size:1.02rem;letter-spacing:.05em;color:var(--muted);font-weight:400}
.brand .wm b{color:var(--text);font-weight:700}
.brand:hover{text-decoration:none}
.brand:hover .wm b{color:var(--accent)}
.nav-links{display:flex;gap:1.35rem;margin-left:auto;align-items:center}
.nav-links a{color:var(--muted);font-size:.95rem;padding:.35rem .1rem}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--text);text-decoration:none;box-shadow:0 2px 0 var(--accent)}
.lang-switch{display:flex;gap:.4rem;align-items:center;font-family:var(--mono);font-size:.85rem}
.lang-switch a{color:var(--muted);padding:.25rem .5rem;border:1px solid var(--line);border-radius:8px}
.lang-switch a[aria-current]{color:#0b0f17;background:var(--accent);border-color:var(--accent);font-weight:700}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:1.25rem;line-height:1;padding:.45rem .7rem;cursor:pointer}

/* Hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 90% at 70% 10%, #38bdf814 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, #1b2740 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, #1b2740 39px 40px),
    var(--bg);}
.hero-in{max-width:1120px;margin:0 auto;padding:clamp(4.5rem,9vw,7rem) 1.5rem clamp(4rem,7vw,5.5rem)}
.kicker{font-family:var(--mono);color:var(--accent);letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;margin-bottom:1rem}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.03em;max-width:23ch}
.hero h1 .hl{color:var(--accent)}
.hero p.sub{color:var(--muted);max-width:56ch;margin-top:1.2rem;font-size:1.08rem}
.cta-row{display:flex;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.8rem 1.5rem;border-radius:12px;font-weight:600;border:1px solid transparent}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#06121d}
.btn-primary:hover{background:var(--accent2)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.trust{margin-top:2.4rem;display:flex;gap:1.6rem;flex-wrap:wrap;color:var(--muted);font-size:.9rem}
.trust b{color:var(--text);font-weight:600}

/* Sections */
section.band{padding:clamp(4.5rem,8vw,6.5rem) 1.5rem;border-bottom:1px solid var(--line)}
section.band:nth-of-type(even){background:var(--bg2)}
.wrap{max-width:1120px;margin:0 auto}
.wrap h2{font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:-.01em;margin-bottom:.7rem}
.wrap .lede{color:var(--muted);max-width:62ch;margin-bottom:2.4rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card{transition:.25s}
.card .tag{font-family:var(--mono);color:var(--accent);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.card h3{margin:.6rem 0 .5rem;font-size:1.12rem}
.card p{color:var(--muted);font-size:.95rem}
.card ul{margin-top:.8rem;color:var(--muted);font-size:.92rem;padding-left:1.1rem}
.card ul li{margin:.25rem 0}
.card ul li::marker{color:var(--accent)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;counter-reset:step}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;position:relative}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--mono);color:var(--accent);font-size:.85rem;letter-spacing:.12em}
.step h3{margin:.5rem 0 .5rem;font-size:1.1rem}
.step p{color:var(--muted);font-size:.95rem}

/* Use-cases list */
.uses{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.use{display:flex;gap:1rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.use .ico{font-size:1.5rem;line-height:1.2}
.use h3{font-size:1.02rem;margin-bottom:.3rem}
.use p{color:var(--muted);font-size:.93rem}

/* Editorial rows (Was wir machen) */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:150px 1fr;gap:2.5rem;padding:2.7rem 0;border-bottom:1px solid var(--line);align-items:start}
.row .num{font-family:var(--mono);color:var(--accent);font-size:.95rem;letter-spacing:.14em}
.row .num .icon{display:block;margin-top:.9rem;width:30px;height:30px;color:var(--text);stroke-width:1.5}
.row h3{font-size:1.4rem;margin-bottom:.55rem;letter-spacing:-.015em}
.row p{color:var(--muted);max-width:58ch}
.row.rev{grid-template-columns:1fr 150px}
.row.rev .num{order:2;text-align:right}
.row.rev .num .icon{margin-left:auto}
.row.rev .row-body{order:1}
@media(max-width:800px){
  .row,.row.rev{grid-template-columns:1fr;gap:1.1rem;padding:2rem 0}
  .row.rev .num{order:0;text-align:left}
  .row.rev .num .icon{margin-left:0}
  .row.rev .row-body{order:1}
}

/* Statement-Block (Warum Bit Media) */
.statement{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start}
.statement .big{font-size:clamp(1.45rem,2.9vw,2.1rem);line-height:1.32;letter-spacing:-.02em;font-weight:600}
.statement .big .hl{color:var(--accent)}
.st-list{border-top:1px solid var(--line)}
.st-item{display:flex;gap:1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.st-item .icon{flex-shrink:0;margin-top:.25rem;color:var(--accent)}
.st-item h3{font-size:1.03rem;margin-bottom:.25rem}
.st-item p{color:var(--muted);font-size:.93rem}
@media(max-width:900px){.statement{grid-template-columns:1fr;gap:2.5rem}}

/* Vollbild-Band */
.imgband{padding:0 1.5rem 5.5rem}
.imgband img{width:100%;max-width:1120px;margin:0 auto;aspect-ratio:21/9;object-fit:cover;border-radius:18px;display:block}
@media(max-width:900px){.imgband img{aspect-ratio:16/10}}

/* Schlanke Use-Case-Liste */
.ulist{display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;border-top:1px solid var(--line)}
.ucase{display:flex;gap:1.1rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.ucase .icon{flex-shrink:0;color:var(--accent);margin-top:.2rem}
.ucase h3{font-size:1.02rem;margin-bottom:.3rem}
.ucase p{color:var(--muted);font-size:.93rem}
@media(max-width:900px){.ulist{grid-template-columns:1fr}}

/* Schritte: unboxed, Nummern tragen */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;counter-reset:step}
.step{border-top:2px solid var(--accent);padding-top:1.3rem}
.step::before{counter-increment:step;content:"0" counter(step);font-family:var(--mono);color:var(--muted);font-size:.85rem;letter-spacing:.16em}
.step h3{margin:.6rem 0 .5rem;font-size:1.14rem}
.step p{color:var(--muted);font-size:.95rem}
@media(max-width:900px){.steps{grid-template-columns:1fr;gap:2rem}}

/* Service-Zeilen (Leistungen): Foto + Text im Wechsel */
.svc{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:center;padding:3.2rem 0;border-bottom:1px solid var(--line)}
.svc:first-of-type{border-top:1px solid var(--line)}
.svc .svc-img{border-radius:16px;overflow:hidden}
.svc .svc-img img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block}
.svc .tag{font-family:var(--mono);color:var(--accent);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.svc h3{font-size:1.5rem;margin:.6rem 0 .6rem;letter-spacing:-.015em}
.svc .svc-body>p{color:var(--muted);margin-bottom:.9rem}
.svc ul{color:var(--muted);font-size:.95rem;padding-left:1.1rem}
.svc ul li{margin:.32rem 0}
.svc ul li::marker{color:var(--accent)}
.svc.rev .svc-img{order:2}
@media(max-width:900px){.svc{grid-template-columns:1fr;gap:1.5rem;padding:2.4rem 0}.svc.rev .svc-img{order:0}}

/* Icon-Basis */
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Hero-Hintergrundvideo (futuristischer Plexus) */
.hero-video-bg{position:relative;overflow:hidden}
.hero-video-bg .hero-video{position:absolute;inset:0;z-index:0}
.hero-video-bg .hero-video video{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(11,15,23,.74) 0%, rgba(11,15,23,.42) 42%, rgba(11,15,23,.06) 68%, rgba(11,15,23,.28) 100%)}
.hero-video-bg .hero-in{position:relative;z-index:1}
@media (prefers-reduced-motion: reduce){.hero-video-bg .hero-video{display:none}}

/* Hero (Text links, Foto rechts — kein Overlay, Fotos bleiben kräftig) */
.hero-split .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.hero-img{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -24px #0009,0 0 0 1px var(--line)}
.hero-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (max-width:900px){
  .hero-split .hero-in{grid-template-columns:1fr;gap:2rem}
  .hero-img img{aspect-ratio:16/10}
}

/* Mensch ↔ KI: fließender Übergang (CSS-Masken-Blend zweier echter Fotos) */
.duo{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px -24px #0009,0 0 0 1px var(--line);aspect-ratio:16/10}
.duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo img.duo-b{
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 72%);
  mask-image:linear-gradient(90deg,transparent 30%,#000 72%);
}
.duo-label{position:absolute;bottom:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#fffc;text-shadow:0 1px 8px #000}
.duo-label.l{left:1.2rem}.duo-label.r{right:1.2rem}

/* Bilder auf Karten */
.card-img{border-radius:12px;overflow:hidden;margin:-.25rem 0 1.1rem;aspect-ratio:16/9;background:var(--bg2)}
.card-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Kontakt-Foto */
.contact-img{border-radius:12px;overflow:hidden;aspect-ratio:16/9;margin-bottom:1rem}
.contact-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Kontroll-Punkte (Mensch bleibt an der Kontrolle) */
.control{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
.control-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.control-item .ico{font-size:1.4rem}
.control-item h3{font-size:1.02rem;margin:.6rem 0 .4rem}
.control-item p{color:var(--muted);font-size:.93rem}
@media (max-width:900px){.control{grid-template-columns:1fr}}

/* Quote box (nüchtern, kein Hype) */
.note{background:var(--accent-soft);border:1px solid var(--accent);border-radius:var(--radius);padding:1.2rem 1.4rem;color:var(--text);max-width:70ch}
.note p+p{margin-top:.6rem}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.contact-card h3{margin-bottom:.7rem}
.contact-card dl{color:var(--muted);font-size:.95rem}
.contact-card dt{color:var(--text);font-weight:600;margin-top:.8rem}
.contact-card a{word-break:break-all}

/* Footer */
footer{border-top:1px solid var(--line);padding:2.2rem 1.5rem;color:var(--muted);font-size:.88rem}
.foot-in{max-width:1120px;margin:0 auto;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.foot-in nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}

/* Legal */
.legal{max-width:820px;margin:0 auto;padding:3.5rem 1.5rem}
.legal h1{margin-bottom:1.6rem}
.legal h2{margin:1.8rem 0 .6rem;font-size:1.15rem}
.legal p,.legal address{color:var(--muted);font-style:normal;margin:.5rem 0}

/* Mobile */
@media (max-width:1240px){
  .cards,.steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .uses,.contact-grid{grid-template-columns:1fr}
  .cards,.steps{grid-template-columns:1fr}
  .burger{display:block}
  .nav-open{overflow:hidden}
  .nav-open .nav-links{display:flex}
  .nav-links{display:none;position:fixed;inset:0;z-index:540;background:#0b0f17f2;flex-direction:column;justify-content:center;align-items:center;gap:1.4rem;font-size:1.15rem}
  .nav-links a{font-size:1.15rem;padding:.5rem}
  .lang-switch{margin:0}
  .lang-switch a{width:auto;padding:.3rem .7rem;border:none;background:none}
  .site-header{z-index:560}
  .hero-in{padding:3.8rem 1.25rem 3.2rem}
}