:root {
  color-scheme: dark;
  --bg: #080a12;
  --panel: rgba(255,255,255,.07);
  --panel-strong: rgba(255,255,255,.12);
  --text: #f7f8ff;
  --muted: #a6aec7;
  --line: rgba(255,255,255,.12);
  --blue: #68d8ff;
  --green: #5df0bd;
  --violet: #9b87ff;
  --shadow: 0 28px 90px rgba(0,0,0,.42);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 10%, rgba(104,216,255,.2), transparent 28rem),
    radial-gradient(circle at 85% 16%, rgba(93,240,189,.15), transparent 26rem),
    linear-gradient(180deg, #080a12 0%, #0d111d 48%, #080a12 100%);
}
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 70%); }
.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1.2rem, 4vw, 4rem);
  background: rgba(8,10,18,.68); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display: flex; align-items: center; gap: .72rem; font-weight: 850; letter-spacing: -.035em; }
.brand-mark { position: relative; display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: .95rem; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 34px rgba(93,240,189,.12); overflow: hidden; }
.brand-mark::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 20%, rgba(104,216,255,.38), transparent 36%), radial-gradient(circle at 75% 80%, rgba(93,240,189,.28), transparent 34%); }
.brand-mark svg { position: relative; width: 1.85rem; height: 1.85rem; }
.brand-mark img { position: relative; width: 100%; height: 100%; display: block; border-radius: inherit; }
.circuit-line, .circuit-stem { fill: none; stroke: url(#logoGradient); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.circuit-stem { opacity: .9; }
.circuit-dot { fill: #08111b; stroke: var(--blue); stroke-width: 3; }
.circuit-dot.hot { fill: var(--green); stroke: rgba(255,255,255,.88); filter: drop-shadow(0 0 9px rgba(93,240,189,.85)); }
.brand-word { font-size: 1.06rem; }
nav { display: flex; gap: 1.25rem; color: var(--muted); font-size: .94rem; }
nav a:hover { color: var(--text); }
.hero, .section, .contact, footer { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
.hero { min-height: 82vh; display: grid; grid-template-columns: 1fr .95fr; gap: 4rem; align-items: center; padding: 5rem 0 4rem; }
.eyebrow { margin: 0 0 1rem; color: var(--green); text-transform: uppercase; letter-spacing: .17em; font-size: .76rem; font-weight: 850; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 780px; margin-bottom: 1.3rem; font-size: clamp(3.7rem, 8vw, 7.8rem); line-height: .88; letter-spacing: -.085em; }
h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4vw, 3.6rem); line-height: .98; letter-spacing: -.06em; }
h3 { margin-bottom: .7rem; font-size: 1.28rem; letter-spacing: -.035em; }
.lead { max-width: 630px; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.05rem; padding: 0 1.18rem; border-radius: 999px; font-weight: 850; border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.28); }
.button.primary { border: 0; color: #061018; background: linear-gradient(135deg, var(--blue), var(--green)); box-shadow: 0 18px 55px rgba(93,240,189,.18); }
.button.ghost { background: rgba(255,255,255,.055); }
 .hero-visual { position: relative; min-height: 31rem; border: 1px solid var(--line); border-radius: 2.2rem; background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: var(--shadow); overflow: hidden; }
.service-map::before, .service-map::after { content: ""; position: absolute; inset: 18% 14%; border: 1px solid rgba(255,255,255,.10); border-radius: 2rem; }
.service-map::after { inset: 30% 24%; border-color: rgba(93,240,189,.18); }
.center-node, .map-item { position: absolute; border: 1px solid rgba(255,255,255,.15); background: rgba(6,8,18,.76); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.center-node { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(17rem, 72%); min-height: 8.5rem; display: grid; place-items: center; text-align: center; border-radius: 1.6rem; padding: 1.2rem; }
.center-node span { color: var(--green); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.center-node strong { font-size: 1.55rem; line-height: 1.05; letter-spacing: -.055em; }
.map-item { width: 12.5rem; min-height: 5.8rem; display: grid; align-content: center; gap: .35rem; padding: 1rem; border-radius: 1.25rem; }
.map-item b { letter-spacing: -.03em; }
.map-item small { color: var(--muted); }
.item-web { left: 7%; top: 10%; }
.item-software { right: 7%; top: 10%; }
.item-it { left: 7%; bottom: 10%; }
.item-ai { right: 7%; bottom: 10%; }
.item-web::after, .item-software::after, .item-it::after, .item-ai::after { content: ""; position: absolute; width: 2.6rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(93,240,189,.7)); top: 50%; }
.item-web::after, .item-it::after { right: -2.6rem; }
.item-software::after, .item-ai::after { left: -2.6rem; transform: rotate(180deg); }
.section { padding: 5rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.4rem; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.service-card { min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--panel); }
.service-card.accent { background: linear-gradient(145deg, rgba(104,216,255,.15), rgba(155,135,255,.09)); }
.service-card span { color: var(--green); font-weight: 900; }
.service-icon { font-size: 1.35rem; line-height: 1; }
.service-card p, .work-copy p, .contact p { color: var(--muted); line-height: 1.65; }
.work { display: grid; grid-template-columns: 1fr .9fr; gap: 3rem; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
.steps { display: grid; gap: .8rem; }
.steps div { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: rgba(255,255,255,.055); }
.steps b { color: var(--green); } .steps span { font-weight: 850; }
.contact { margin-bottom: 4rem; padding: 3rem 1rem; text-align: center; border: 1px solid var(--line); border-radius: 2rem; background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
.contact p { max-width: 38rem; margin-left: auto; margin-right: auto; }
.contact .button { margin-top: 1rem; }
footer { display: flex; justify-content: space-between; gap: 1rem; padding: 2rem 0 3rem; color: var(--muted); border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 920px) {
  nav { display: none; }
  .hero, .work { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero { padding-top: 3.5rem; }
  .hero-visual { min-height: 24rem; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head { display: block; }
}
@media (max-width: 620px) {
  h1 { font-size: clamp(3.1rem, 17vw, 4.8rem); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 11rem; }
  .main-card { left: 7%; right: 7%; }
  .mini-card { font-size: .78rem; }
  .card-b { top: 8%; } .card-c { bottom: 9%; }
  footer { flex-direction: column; }
}

/* Mobile cleanup: visual map becomes a simple readable stack. */
@media (max-width: 620px) {
  .site-header { position: relative; }
  .hero { padding-top: 2.2rem; min-height: auto; }
  .actions { display: grid; grid-template-columns: 1fr; }
  .button { width: 100%; }
  .hero-visual { min-height: auto; padding: 1rem; display: grid; gap: .75rem; border-radius: 1.5rem; }
  .service-map::before, .service-map::after,
  .item-web::after, .item-software::after, .item-it::after, .item-ai::after { display: none; }
  .center-node, .map-item { position: static; transform: none; width: 100%; min-height: auto; box-shadow: none; }
  .center-node { padding: 1.1rem; border-radius: 1.2rem; }
  .center-node strong { font-size: 1.35rem; }
  .map-item { padding: 1rem; border-radius: 1rem; }
}

/* Mobile premium: avoid stacked ad-card/domain-parking look. */
@media (max-width: 620px) {
  .hero-visual { display: none; }
  .hero { display: block; padding-bottom: 3rem; }
  .lead::after {
    content: "Webseiten · Firmensoftware · IT · KI";
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 1.2rem;
    padding: .7rem .85rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: #dbeafe;
    background: rgba(255,255,255,.055);
    font-size: .86rem;
    line-height: 1.25;
  }
}


/* Scroll motion */
.reveal, .reveal-item { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.reveal.is-visible, .reveal-item.is-visible { opacity: 1; transform: translateY(0); }
.service-grid .reveal-item:nth-child(2), .steps .reveal-item:nth-child(2) { transition-delay: .08s; }
.service-grid .reveal-item:nth-child(3), .steps .reveal-item:nth-child(3) { transition-delay: .16s; }
.service-grid .reveal-item:nth-child(4) { transition-delay: .24s; }
.service-card.reveal-item.is-visible:hover { transform: translateY(-6px); box-shadow: 0 22px 70px rgba(0,0,0,.24); }
.scroll-cue { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.2rem; color: var(--muted); font-size: .86rem; font-weight: 800; }
.scroll-cue span { position: relative; display: inline-block; width: 1.2rem; height: 2rem; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: .38rem; width: .28rem; height: .28rem; border-radius: 50%; background: var(--green); transform: translateX(-50%); animation: scrollDot 1.55s ease-in-out infinite; }
@keyframes scrollDot { 0%, 100% { transform: translate(-50%, 0); opacity: .35; } 45% { transform: translate(-50%, .75rem); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-item { opacity: 1; transform: none; transition: none; }
  .scroll-cue span::after { animation: none; }
}
@media (max-width: 620px) {
  .scroll-cue { margin-top: 1rem; }
  .service-grid .reveal-item, .steps .reveal-item { transition-delay: 0s !important; }
}

/* Business content additions */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.case-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1.5rem; background: var(--panel); }
.case-card b { color: var(--green); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; }
.case-card p { color: var(--muted); line-height: 1.6; }
.about { display: grid; grid-template-columns: .55fr 1fr; gap: 2rem; align-items: center; border-top: 1px solid rgba(255,255,255,.08); }
.about p { color: var(--muted); line-height: 1.7; }
.photo-placeholder { min-height: 20rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 2rem; background: linear-gradient(145deg, rgba(104,216,255,.12), rgba(93,240,189,.06)); color: var(--muted); font-weight: 850; }
.contact-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; align-items: start; margin-top: 1.5rem; text-align: left; }
.contact-info { display: grid; gap: .8rem; }
.contact-info small { color: var(--muted); line-height: 1.5; }
.contact-form { display: grid; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1.35rem; background: rgba(255,255,255,.045); }
.contact-form label { display: grid; gap: .4rem; color: #dbeafe; font-weight: 750; }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid rgba(255,255,255,.14); border-radius: .9rem; padding: .85rem .9rem; background: rgba(0,0,0,.22); color: var(--text); font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form .check { grid-template-columns: auto 1fr; align-items: start; color: var(--muted); font-weight: 500; line-height: 1.45; }
.contact-form .check input { width: auto; margin-top: .2rem; }
.footer-links { display: inline-flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.content-page, .legal-page { width: min(860px, calc(100% - 2rem)); margin: 0 auto; padding: 5rem 0; }
.content-page h1, .legal-page h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .95; letter-spacing: -.07em; }
.content-page h2, .legal-page h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: 2rem; }
.content-page p, .legal-page p { color: var(--muted); line-height: 1.75; font-size: 1.05rem; }
.content-page .button { margin-top: 1rem; }
.legal-box { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; margin: 1rem 0 2rem; color: var(--muted); background: rgba(255,255,255,.055); }
.legal-box.warn { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.08); }
.placeholder { color: #fbbf24; }
.service-card { color: inherit; text-decoration: none; }
@media (max-width: 920px) { .case-grid, .about, .contact-split { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .case-grid { gap: .8rem; } .photo-placeholder { min-height: 14rem; } .content-page, .legal-page { padding: 3rem 0; } }


/* Claude logo header */
.brand { gap: 0; }
.brand-logo { display: block; width: 168px; max-width: 46vw; line-height: 0; }
.brand-logo img { display: block; width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 620px) { .brand-logo { width: 150px; max-width: 58vw; } }