/* ==========================================================================
   SNAP IT GmbH - snapit-leipzig.de
   Design system: dark-locked, brand navy #003B6F + brand cyan (brightened).
   Shape rule: radius 2px everywhere. "Surfaces" (cards, media, tiles) carry
   ONE chamfered top-right corner at the hexagon angle - the only place the
   Waben motif from the logo appears as geometry. Buttons and inputs stay
   rectangular so a CTA is never mistaken for a panel.
   Type: Archivo (display) / IBM Plex Sans (body) / IBM Plex Mono (labels).
   Fonts are self-hosted - no Google Fonts CDN request (DSGVO).
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/plexsans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('../fonts/plexsans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens ----------------------------------------------------------------
   Zwei Themes. Dunkel ist der Standard und die Fassung, an der das Design
   entwickelt wurde. Hell wird ueber data-theme="light" am <html> aktiviert,
   gesetzt von einem Inline-Skript im <head>, damit beim Laden nichts blitzt.
   Jede farbige Angabe unten ist ein Token - direkte Hex-Werte in Regeln weiter
   unten waeren im hellen Theme sofort falsch.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  --ink:        #070B12;
  --ink-rgb:    7, 11, 18;      /* fuer Scrims und Backdrops */
  --ink-1:      #0A101B;
  --ink-2:      #0E1725;
  --ink-3:      #142033;
  --surface-rgb: 14, 23, 37;    /* Kartenfarbe, Bilder blenden dahin aus */
  --navy:       #003B6F;
  --navy-deep:  #00243F;

  --accent:     #2AACE6;   /* Marken-Cyan, fuer dunkle Flaechen aufgehellt */
  --accent-hi:  #4FC0F2;   /* Hover */
  --accent-dim: #008CCA;   /* Original-Marken-Cyan, nur Flaechen */
  --accent-wash:rgba(42,172,230,.10);
  --on-accent:  #04121C;   /* Text auf Akzentflaechen */

  --paper:      #EAF1F8;
  --paper-2:    #A9B9CC;
  --paper-3:    #74869C;

  --line:       rgba(150,180,215,.15);
  --line-2:     rgba(150,180,215,.28);

  --field-tint: rgba(0,59,111,.55);  /* Markenfeld hinter den Kompetenzen */

  --danger:     #FF8E7A;
  --danger-bg:  rgba(255,142,122,.10);
  --danger-bd:  rgba(255,142,122,.45);
  --danger-fg:  #FFC7BB;

  /* Farben der 3D-Szene im Hero, ausgelesen von hero-lattice.js.
     "far" liegt bewusst dicht bei "near": die Tiefe macht der Nebel, nicht die
     Linienfarbe. Ein dunkles Far wuerde den hinteren Teil des Gitters ausloeschen. */
  --lat-edge-near: #2AACE6;
  --lat-edge-far:  #12587E;
  --lat-node:      #8FD8F7;
  --lat-pulse:     #BDE9FF;
  --lat-fog:       #070B12;
  --lat-opacity:   .62;

  --r:          2px;
  --ch:         22px;      /* chamfer size - the hexagon nod */
  --chamfer:    polygon(0 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% 100%, 0 100%);

  --ease:       cubic-bezier(.22,1,.36,1);
  --wrap:       1240px;
  --gutter:     clamp(1rem, 4vw, 3rem);   /* Mindestabstand zum Bildschirmrand */
  --nav-h:      72px;
}

/* --- helles Theme -----------------------------------------------------------
   Keine Umkehrung der dunklen Werte, sondern eine eigene Abstimmung: kuehles
   Papierweiss statt Creme, und ein abgedunkeltes Marken-Cyan, weil #2AACE6 auf
   Weiss nur 2,4:1 erreicht und als Textfarbe damit durchfaellt.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --ink:        #F4F7FB;
  --ink-rgb:    244, 247, 251;
  --ink-1:      #EAF0F7;
  --ink-2:      #FFFFFF;
  --ink-3:      #EFF4FA;
  --surface-rgb: 255, 255, 255;

  --accent:     #0071A8;   /* 5,3:1 auf Weiss */
  --accent-hi:  #005B88;
  --accent-dim: #008CCA;
  --accent-wash:rgba(0,113,168,.09);
  --on-accent:  #FFFFFF;

  --paper:      #0A1420;
  --paper-2:    #40566C;
  --paper-3:    #55697F;   /* 5,1:1 auf der Seite, 5,5:1 auf weissen Karten */

  --line:       rgba(0,45,90,.14);
  --line-2:     rgba(0,45,90,.24);

  --field-tint: rgba(0,59,111,.08);

  --danger:     #B3261E;
  --danger-bg:  rgba(179,38,30,.07);
  --danger-bd:  rgba(179,38,30,.35);
  --danger-fg:  #7A1911;

  /* Auf hellem Grund braucht das Gitter deutlich mehr Gewicht: duenne Linien
     in Mittelblau verschwinden dort, wo sie auf Dunkel noch leuchten. */
  --lat-edge-near: #0B6FA3;
  --lat-edge-far:  #3E86B4;
  --lat-node:      #02486F;
  --lat-pulse:     #003B6F;
  --lat-fog:       #F4F7FB;
  --lat-opacity:   .95;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem; line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

:where(a, button, input, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

::selection { background: var(--accent); color: var(--on-accent); }

/* --- type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: 'Archivo', 'Plex Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.05;
  text-wrap: balance;
}
h1 { font-size: clamp(2.45rem, 5.4vw, 4.4rem); line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.018em; line-height: 1.25; }
h4 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.012em; }
p  { text-wrap: pretty; }

.lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--paper-2); }
.muted { color: var(--paper-2); }
.dim { color: var(--paper-3); }
.hl { color: var(--accent); }

/* mono utility label - used sparingly (see eyebrow discipline in README) */
.label {
  display: inline-block;
  font-family: 'Plex Mono', ui-monospace, monospace;
  font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}

/* --- layout --------------------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sec  { padding-block: clamp(4.5rem, 8.5vw, 8rem); position: relative; }
.sec--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.sec-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 4vw, 3.75rem); }
.sec-head p { margin-top: 1.1rem; }
.rule { height: 1px; background: var(--line); border: 0; }

.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  padding: .7rem 1.1rem; border-radius: var(--r);
  transition: top .2s var(--ease);
}
.skip:focus { top: 1rem; }

/* --- chamfered surface (two layers so the 1px edge survives the clip) ------ */
.surf {
  display: flex;
  background: var(--line);
  clip-path: var(--chamfer);
  transition: background .3s var(--ease);
}
.surf > * {
  flex: 1 1 auto;
  margin: 1px;
  background: var(--ink-2);
  clip-path: var(--chamfer);
  transition: background .3s var(--ease);
}
.surf--flat > * { background: var(--ink-1); }
a.surf:hover, .surf--hov:hover { background: rgba(42,172,230,.55); }
a.surf:hover > *, .surf--hov:hover > * { background: var(--ink-3); }

.clip-ch { clip-path: var(--chamfer); }

/* --- buttons -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.35rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r);
  font-weight: 600; font-size: .95rem; letter-spacing: -.008em;
  white-space: nowrap;
  transition: background .22s var(--ease), transform .12s var(--ease), border-color .22s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { --btn-bg: var(--accent-hi); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--paper);
  border: 1px solid var(--line-2);
}
.btn--ghost:hover { --btn-bg: rgba(150,180,215,.09); border-color: var(--paper-3); }

.btn--sm { padding: .62rem 1rem; font-size: .88rem; }
.btn--wide { padding-inline: 1.7rem; }

/* text link with a moving underline */
.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--accent); font-weight: 500;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ease);
}
.tlink:hover { background-size: 100% 1px; }
.tlink svg { width: 16px; height: 16px; }

/* --- icons ---------------------------------------------------------------- */
.ico { width: 24px; height: 24px; stroke: currentColor; fill: none;
       stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico--lg { width: 28px; height: 28px; }

/* ==========================================================================
   NAV
   ========================================================================== */
/* Rack-Leiste. Statt eines unsichtbaren Streifens ueber volle Breite ist die
   Navigation ein Objekt aus einzelnen Modulen, wie Einschuebe in einem
   Serverschrank: Logo, Linkfeld, Telefon, CTA, Theme.
   Oben auf der Seite stehen die Module mit Luft nebeneinander, beim Scrollen
   ruecken sie zu einer geschlossenen Leiste zusammen. Der aktive Abschnitt
   leuchtet als Status-LED, nicht als Unterstrich. Kein Weichzeichner: die
   Module sind deckend. */
.nav {
  position: fixed; inset: 12px 0 auto; z-index: 100;
  --mod-h: 52px;
  transition: top .35s var(--ease);
}
.nav.is-stuck { top: 8px; }
.nav__in {   /* Breite kommt von .wrap */
  display: flex; align-items: stretch; gap: 6px;
  transition: gap .35s var(--ease), filter .35s var(--ease);
}
.nav.is-stuck .nav__in { gap: 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.28)); }
.nav__in > * {
  height: var(--mod-h);
  display: flex; align-items: center;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
}
.nav.is-stuck .nav__in > * + * { margin-left: -1px; }

/* Der Logo-Block traegt dieselbe Flaeche wie die anderen Module. Ein
   Navy-Block fiel in der Reihe zu stark heraus. */
.nav__brand { padding-inline: 1.1rem 1.3rem; }
.nav__brand img { height: 34px; width: auto; }

.nav__links { flex: 1 1 auto; gap: 1.55rem; padding-inline: 1.5rem; }
.nav__links a {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .92rem; font-weight: 500; color: var(--paper-2);
  padding-block: .35rem; white-space: nowrap;
  transition: color .2s var(--ease);
}
.nav__links a::before {   /* Status-LED */
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--line-2);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.nav__links a:hover { color: var(--paper); }
.nav__links a:hover::before { background: var(--paper-3); }
.nav__links a.is-active { color: var(--paper); }
.nav__links a.is-active::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash), 0 0 10px var(--accent); }

.nav__tel {
  gap: .7rem; padding-inline: 1.1rem;
  color: var(--paper);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav__tel:hover { color: var(--accent); border-color: var(--accent); }
.nav__tel svg { width: 18px; height: 18px; color: var(--accent); }
.nav__tel span { display: grid; line-height: 1.15; white-space: nowrap; font-family: 'Plex Mono', monospace; font-size: .84rem; }
.nav__tel small { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3); }

/* CTA als eigenes Modul: volle Akzentflaeche, beim Hover ein kurzer Versatz
   mit harter Kante, wie ein Einschub, der herausgezogen wird. */
.nav .btn {
  padding-inline: 1.35rem; border-color: var(--accent);
  background: var(--btn-bg);   /* sonst gewinnt die Modulflaeche oben */
  transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.nav .btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--paper); }
.nav .btn:active { transform: none; box-shadow: none; }

.nav__burger { display: none; width: var(--mod-h); justify-content: center; color: var(--paper); }

/* Umschalter hell/dunkel. Zeigt immer das Ziel, nicht den Ist-Zustand:
   im dunklen Theme die Sonne, im hellen den Mond. */
.theme-btn {
  width: var(--mod-h); flex: none;
  justify-content: center;
  color: var(--paper-2);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.theme-btn:hover { color: var(--accent); border-color: var(--accent); }
.theme-btn .ico { width: 20px; height: 20px; }
.theme-btn .i-moon { display: none; }
:root[data-theme="light"] .theme-btn .i-sun  { display: none; }
:root[data-theme="light"] .theme-btn .i-moon { display: block; }

/* Das Logo gibt es in zwei Fassungen, je nach Untergrund. */
.logo--on-light { display: none; }
:root[data-theme="light"] .logo--on-dark  { display: none; }
:root[data-theme="light"] .logo--on-light { display: block; }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink);
  padding: calc(var(--nav-h) + 2rem) 0 2rem;
  display: none; flex-direction: column;
  overflow-y: auto;
}
.drawer.is-open { display: flex; }
.drawer nav { display: grid; gap: .25rem; }
.drawer nav a {
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.6rem;
  letter-spacing: -.03em;
  padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.drawer__foot { margin-top: auto; padding-top: 2.5rem; display: grid; gap: .9rem; }

/* persistent contact rail on small screens */
.cta-bar {
  position: fixed; inset: auto 0 0; z-index: 98;
  display: none; gap: .6rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(var(--ink-rgb), .93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.cta-bar .btn { flex: 1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 3.5rem;
  overflow: hidden;
}
/* Weicher Verlauf ueber der Szene, damit die Textspalte ruhig bleibt. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(115% 85% at 8% 45%,
    rgba(var(--ink-rgb), .92) 0%, rgba(var(--ink-rgb), .55) 40%, rgba(var(--ink-rgb), 0) 72%);
}
/* Keine eigene Breite hier: .wrap begrenzt sie. Ein width: 100% an dieser
   Stelle hat frueher die Begrenzung ueberschrieben, der Text klebte dann auf
   breiten Schirmen am linken Rand. */
.hero__grid {
  position: relative; z-index: 2;
  /* Die Textspalte ist breiter als die rechte: dort liegt nur das Gitter.
     "nie zum Thema wird." braucht in voller Groesse rund 640px am Stueck. */
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
/* Die zweite Spalte ist auf grossen Schirmen nur noch Platzhalter. Die Szene
   selbst liegt darunter und laeuft ueber die Sektionskanten hinaus, sonst
   entsteht genau die harte Rechteckkante, die hier nicht hingehoert. */
.hero__slot { min-height: min(58dvh, 600px); }
.hero__brandline {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.5rem;
}
.hero__brandline::before {
  content: ''; width: 30px; height: 1px; background: var(--accent); flex: none;
}
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: block; }
.hero__lead { max-width: 46ch; margin-bottom: 2.4rem; }
/* Die beiden Hero-Buttons bilden ein Modul, wie zwei Einschuebe in derselben
   Leiste: kein Abstand, gemeinsame Kante. */
.hero__cta { display: flex; flex-wrap: wrap; align-items: stretch; }
.hero__cta .btn { padding-block: 1rem; }
.hero__cta .btn--ghost { background: var(--ink-2); margin-left: -1px; }
.hero__cta .btn--ghost:hover { background: var(--ink-3); }
.hero__cta .btn--ghost .ico { color: var(--accent); }

/* Leistungsleiste unten im Hero. Die LEDs blinken nacheinander kurz auf wie
   Aktivitaetsanzeigen; sie behaupten keinen Systemzustand. */
.hero__grid { flex: 1 0 auto; }
.hero__rack {
  position: relative; z-index: 2;
  display: flex; margin-top: clamp(2rem, 5vh, 3.5rem);
}
.hero__rack a {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; gap: .6rem;
  height: 54px; padding-inline: .95rem;
  background: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: .88rem; font-weight: 500; color: var(--paper-2); white-space: nowrap;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.hero__rack a + a { margin-left: -1px; }
.hero__rack b { font-family: 'Plex Mono', monospace; font-weight: 500; font-size: .7rem; color: var(--paper-3); }
.hero__rack i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--line-2);
  animation: rack-led 7s steps(1) infinite;
}
.hero__rack a:nth-child(2) i { animation-delay: 1s; }
.hero__rack a:nth-child(3) i { animation-delay: 2s; }
.hero__rack a:nth-child(4) i { animation-delay: 3s; }
.hero__rack a:nth-child(5) i { animation-delay: 4s; }
.hero__rack a:nth-child(6) i { animation-delay: 5s; }
.hero__rack a:nth-child(7) i { animation-delay: 6s; }
@keyframes rack-led {
  0%   { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  4%   { background: var(--line-2); box-shadow: none; }
  6%   { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  9%, 100% { background: var(--line-2); box-shadow: none; }
}
.hero__rack a:hover { color: var(--paper); background: var(--ink-3); border-color: var(--accent); position: relative; z-index: 1; }
.hero__rack a:hover i { animation: none; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash), 0 0 10px var(--accent); }
.hero__rack a:hover b { color: var(--accent); }

/* Die Szene sitzt hinter dem Raster, laeuft rechts und unten aus dem Bild und
   wird zu allen Seiten weich ausmaskiert. Damit gibt es keine sichtbare
   Canvas-Kante mehr, das Gitter loest sich in den Hintergrund auf. */
.hero__stage {
  position: absolute; z-index: 0; pointer-events: none;
  top: -6%; right: -12%; bottom: -14%;
  width: min(78%, 1150px);
  /* Zwei Masken, miteinander verschnitten: die Ellipse blendet rundum aus,
     der lineare Verlauf sorgt dafuer, dass am linken Buehnenrand wirklich
     nichts mehr uebrig ist. Die Ellipse allein liess dort rund 50 % stehen;
     auf Dunkel war das als senkrechte Kante sichtbar. */
  -webkit-mask-image:
    radial-gradient(115% 105% at 72% 48%, #000 0%, #000 34%, rgba(0,0,0,.55) 58%, rgba(0,0,0,0) 82%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 14%, #000 38%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(115% 105% at 72% 48%, #000 0%, #000 34%, rgba(0,0,0,.55) 58%, rgba(0,0,0,0) 82%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 14%, #000 38%);
  mask-composite: intersect;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__nowebgl {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 58% at 60% 42%, var(--accent-wash), transparent 72%),
    radial-gradient(70% 70% at 38% 68%, var(--field-tint), transparent 74%);
}

/* ==========================================================================
   REICHWEITE - Marken-Navy als volle Flaeche, Wabenkarte als Signatur
   ========================================================================== */
/* Ersetzt die Kennzahlen-Leiste (vier gleiche Spalten, fett + grau), die auf
   jeder zweiten KI-generierten Seite steht. Stattdessen: eine Zahl gross, ein
   Satz, und das Einzugsgebiet als Karte aus dem Wabenmotiv des Logos.
   Der Block ist in beiden Themes gleich: Navy ist Markenfarbe, kein Themeton. */
.reach {
  --band-bg: #003B6F;
  --band-fg: #FFFFFF;
  --band-fg-2: rgba(255,255,255,.78);
  --band-cell: rgba(255,255,255,.075);
  --band-core: #2AACE6;
  --band-far: rgba(42,172,230,.42);
  position: relative; overflow: hidden;
  background: var(--band-bg); color: var(--band-fg);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.reach__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.reach__title {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -.03em; line-height: 1.12;
  max-width: 18ch;
}
.reach__num {
  display: block; margin-bottom: .35rem; white-space: nowrap;
  font-size: clamp(5.5rem, 13vw, 10.5rem); line-height: .86; letter-spacing: -.055em;
  color: var(--band-fg);
}
/* feste Breite, damit das "+" beim Hochzaehlen nicht wandert */
[data-count] { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
.reach__text { margin-top: 1.4rem; max-width: 44ch; color: var(--band-fg-2); font-size: 1.05rem; }
.reach__legend { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
                 font-size: .88rem; color: var(--band-fg-2); }
.reach__legend li { display: inline-flex; align-items: center; gap: .55rem; }
.sw { width: 12px; height: 13px; flex: none;
      clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.sw--hub  { background: var(--band-fg); }
.sw--core { background: var(--band-core); }
.sw--far  { background: var(--band-far); }

.reach__viz { position: relative; }
/* Deutschland steht hochkant. Ohne Deckel wird der Block hoeher als der
   Bildschirm, darum begrenzt die Hoehe, die Breite folgt dem Seitenverhaeltnis. */
.reach__map { display: block; height: min(620px, 74vh); width: auto; max-width: 100%;
              margin-inline: auto; overflow: visible; }
.rm-de  { fill: var(--band-cell); }
.rm-st, .rm-sn { fill: var(--band-core); }
.rm-at, .rm-ch { fill: var(--band-far); }
.rm-hub { fill: var(--band-fg); }
.rm-arc { fill: none; stroke: var(--band-fg); stroke-width: 1.4; stroke-dasharray: 2 6;
          stroke-linecap: round; opacity: .75; animation: rm-flow 1.6s linear infinite; }
.rm-end { fill: var(--band-fg); }
@keyframes rm-flow { to { stroke-dashoffset: -16; } }
.rm-ping { fill: none; stroke: var(--band-fg); stroke-width: 1.5;
           transform-box: fill-box; transform-origin: center;
           animation: rm-ping 2.8s var(--ease) infinite; }
@keyframes rm-ping { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.rm-lbl {
  font-family: 'Plex Mono', monospace; font-size: 17px; font-weight: 500;   /* SVG-Einheiten, wird mitskaliert */
  letter-spacing: .1em; text-transform: uppercase;
  fill: var(--band-fg-2);
  paint-order: stroke; stroke: var(--band-bg); stroke-width: 4px; stroke-linejoin: round;
}
.rm-lbl--hub { fill: var(--band-fg); font-size: 20px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.about__copy p + p { margin-top: 1.1rem; }
.about__quote {
  margin-top: 2.5rem; padding-left: 1.4rem; border-left: 2px solid var(--accent);
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 1.22rem;
  letter-spacing: -.022em; line-height: 1.35; color: var(--paper);
}
.about__media { position: relative; }
.about__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ==========================================================================
   LEISTUNGEN - bento, exactly 7 cells
   ========================================================================== */
/* Zwei Kacheln tragen ein Foto und rahmen das Feld: IT-Infrastruktur oben
   links als hoher Anker, Webentwicklung unten als breites Echo. Die Kacheln
   dazwischen bleiben ruhig. Einzige Ausnahme ist die KI-Kachel: sie ist neu
   im Angebot und traegt deshalb eine Akzentkante und eine kleine Prozesskette
   statt eines Fotos. */
.svc { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.svc > * { min-width: 0; }
.svc__a { grid-column: 1 / span 7;  grid-row: 1 / span 2; }
.svc__b { grid-column: 8 / span 5;  grid-row: 1; }
.svc__c { grid-column: 8 / span 5;  grid-row: 2; }
.svc__d { grid-column: 1 / span 4;  grid-row: 3; }
.svc__e { grid-column: 5 / span 4;  grid-row: 3; }
.svc__g { grid-column: 9 / span 4;  grid-row: 3; }
.svc__f { grid-column: 1 / span 12; grid-row: 4; }

.card__bd { position: relative; display: flex; flex-direction: column; padding: 1.75rem; gap: 1rem; }
.card__bd h3 { margin-top: .25rem; }
.card__bd p { color: var(--paper-2); font-size: .95rem; line-height: 1.6; }

/* Einschub-Nummer, dieselbe wie in der Leistungsleiste im Hero */
/* Eigene Zeile oben rechts, damit sie den Schaltbildern nicht ins Gehege kommt */
.card__no {
  align-self: flex-end; margin: -.6rem calc(var(--ch) - 1rem) -.4rem 0;
  font-family: 'Plex Mono', monospace; font-size: .72rem; letter-spacing: .12em;
  color: var(--paper-3); line-height: 1;
}
/* Auf den Fotokacheln liegt sie ueber dem Bild bzw. oben links im Text */
.svc--photo .card__no {
  position: absolute; z-index: 1; top: 1.05rem; right: calc(var(--ch) + .9rem); margin: 0;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.svc__f .card__no { right: auto; left: 1.75rem; color: var(--paper-3); text-shadow: none; }

/* Sprung aus der Leistungsleiste: die Kachel leuchtet einmal kurz auf */
.surf:target { animation: svc-hit 1.6s var(--ease) 1; }
@keyframes svc-hit { 0%, 40% { background: var(--accent); } 100% { background: var(--line); } }
.svc--key:target { animation: none; }

/* --- Schaltbilder statt Icon-Plaketten ----------------------------------------
   Jede Kachel ohne Foto zeigt in einem kleinen Netzplan, was die Leistung tut:
   Security filtert, Virtualisierung zieht Server zusammen, Netzwerk verteilt,
   Cloud prueft und lagert aus. Gleiche Bildsprache wie die KI-Prozesskette.
   Die Animation laeuft nur, solange das Bild sichtbar ist (.is-live, site.js);
   ohne JavaScript oder bei reduzierter Bewegung steht der Ausgangszustand. */
.sch { width: 100%; height: auto; overflow: visible; margin-bottom: .35rem; }
/* :not() hebt die Spezifitaet ueber die animation-Kurzschreibweisen unten,
   die sonst animation-play-state wieder auf running setzen wuerden. */
.sch:not(.is-live) * { animation-play-state: paused; }
.sch text, .flow text {
  font-family: 'Plex Mono', monospace; font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; fill: var(--paper-3);
}
.sch-ln { stroke: var(--line-2); stroke-width: 1.5; }
.sch-ln--dash { stroke-dasharray: 5 4; }
.sch-ln--dot  { stroke-dasharray: 1 5; stroke-linecap: round; stroke-width: 2; }
.sch-nd { fill: var(--ink-2); stroke: var(--line-2); stroke-width: 1.5; }
.sch-nd--on { stroke: var(--accent); fill: var(--accent-wash); }
.sch-pk { fill: var(--accent); }
.sch-pk--bad { fill: var(--danger); }
.sch-wall { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.5; }
.sch-host { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sch-box { fill: var(--accent-wash); stroke: var(--accent); stroke-width: 1.2; }
.sch-box--idle { fill: none; stroke: var(--line-2); }
.sch-core { fill: var(--ink-2); stroke: var(--accent); stroke-width: 1.5; }
.sch-zone { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.sch-chk { fill: var(--ink-2); stroke: var(--line-2); stroke-width: 1.5; }

/* Security: ein Paket kommt durch, eines wird an der Pruefung gestoppt */
.sec-pass  { animation: sec-pass 4.4s linear infinite; }
.sec-block { animation: sec-block 4.4s linear 2.2s infinite; opacity: 0; }
.sch-wall  { animation: sec-wall 4.4s linear 2.2s infinite; }
@keyframes sec-pass {
  0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; }
  85% { transform: translateX(292px); opacity: 1; } 92%, 100% { transform: translateX(292px); opacity: 0; }
}
@keyframes sec-block {
  0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; }
  38% { transform: translateX(134px); } 44% { transform: translateX(126px); opacity: 1; }
  60%, 100% { transform: translateX(126px); opacity: 0; }
}
@keyframes sec-wall {
  0%, 36% { stroke: var(--accent); } 40%, 52% { stroke: var(--danger); } 60%, 100% { stroke: var(--accent); }
}

/* Virtualisierung: vier Kisten ziehen auf einen Host */
.vm-move { animation: vm-move 5.2s var(--ease) infinite; animation-delay: var(--d); }
@keyframes vm-move {
  0%, 14% { transform: translate(0, 0); opacity: 1; }
  44%, 82% { transform: translate(var(--dx), var(--dy)); opacity: 1; }
  90% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  91% { transform: translate(0, 0); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* Netzwerk: vom LAN ueber den Knoten ins WAN und ins WLAN */
.net-a { animation: net-a 3.6s linear infinite; }
.net-b { animation: net-b 3.6s linear 1.8s infinite; opacity: 0; }
@keyframes net-a {
  0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; }
  40% { transform: translate(130px, 0); }
  86% { transform: translate(276px, 20px); opacity: 1; } 94%, 100% { transform: translate(276px, 20px); opacity: 0; }
}
@keyframes net-b {
  0% { transform: translate(0, 0); opacity: 0; } 6% { opacity: 1; }
  40% { transform: translate(130px, 0); }
  86% { transform: translate(276px, -20px); opacity: 1; } 94%, 100% { transform: translate(276px, -20px); opacity: 0; }
}

/* Cloud: ein System wird geprueft und dann ausgelagert */
.cl-move  { animation: cl-move 5.6s var(--ease) infinite; }
.cl-check { animation: cl-check 5.6s linear infinite; }
@keyframes cl-move {
  0%, 10% { transform: translateX(0); opacity: 1; }
  34%, 52% { transform: translateX(114px); }
  76%, 88% { transform: translateX(222px); opacity: 1; }
  94% { transform: translateX(222px); opacity: 0; }
  95% { transform: translateX(0); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes cl-check {
  0%, 32% { stroke: var(--line-2); fill: var(--ink-2); }
  36%, 50% { stroke: var(--accent); fill: var(--accent-wash); }
  56%, 100% { stroke: var(--line-2); fill: var(--ink-2); }
}

/* Kleines Schild neben einer Ueberschrift, z. B. "Neu" */
.tag {
  display: inline-block; vertical-align: .2em; margin-left: .5rem;
  padding: .18rem .45rem;
  font-family: 'Plex Mono', monospace; font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r);
}

/* KI-Kachel: Kante in Akzentfarbe statt Haarlinie */
.svc--key { background: linear-gradient(135deg, var(--accent) 0%, var(--line-2) 55%); }
.svc__g .card__bd { justify-content: space-between; }
.svc__g .tlink { align-self: flex-start; margin-top: auto; }

/* Prozesskette: Ist-Prozess > Analyse > Umsetzung > Entlastung. Ein Signal
   laeuft durch, die Knoten leuchten nacheinander auf (site.js). */
.flow { width: 100%; height: auto; overflow: visible; margin-block: .25rem .5rem; }
.flow__line { stroke: var(--line-2); stroke-width: 1.5; }
.flow__done { stroke: var(--accent); stroke-width: 1.5; }
.flow__node { fill: var(--ink-2); stroke: var(--line-2); stroke-width: 1.5; }
.flow__node.is-on { stroke: var(--accent); fill: var(--accent-wash); }
.flow__dot { fill: var(--accent); }

/* Fotokacheln. Das Bild liegt absolut in der Figur, damit deren Hoehe allein
   aus Rasterzeile oder Seitenverhaeltnis kommt und nicht aus dem Bildformat. */
.svc--photo .card__bd { padding: 0; }
.svc--photo figure { position: relative; overflow: hidden; }
.svc--photo figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc--photo figure::after {   /* Bild blendet in die Kartenfarbe aus */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--surface-rgb), 0) 40%, rgba(var(--surface-rgb), .85) 100%);
}
.svc--photo .card__txt { padding: 1.75rem; display: grid; gap: 1rem; align-content: center; }

/* A ist hoch: das Bild fuellt, was der Text uebrig laesst */
.svc__a figure { flex: 1 1 auto; min-height: 220px; }
.svc__a .card__txt { align-content: start; }

/* F liegt quer: Text links, Bild rechts */
.svc__f .card__bd { flex-direction: row; align-items: stretch; gap: 0; }
.svc__f .card__txt { flex: 1 1 auto; }
.svc__f figure { flex: 0 0 38%; min-height: 240px; }
.svc__f figure::after {
  background: linear-gradient(270deg,
    rgba(var(--surface-rgb), 0) 55%, rgba(var(--surface-rgb), .8) 100%);
}

/* ==========================================================================
   KOMPETENZEN - drei Saeulen auf dem Markenfeld
   ========================================================================== */
/* Beraten, Beschaffen, Betreuen: die Reihenfolge ist der Lebenszyklus einer
   Anschaffung. Die mittlere Saeule (Beschaffung) ist bewusst hervorgehoben:
   hoeher, Akzentkante, eigener CTA. Ein Hardware-Angebot ist fuer viele
   Geschaeftskunden der niedrigste Einstieg in die Zusammenarbeit. */
.comp {
  background:
    radial-gradient(90% 120% at 88% 0%, var(--field-tint) 0%, transparent 62%),
    var(--ink-1);
  border-block: 1px solid var(--line);
}
.pillars {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem; align-items: stretch;
  padding-top: 1.5rem;   /* Platz fuer die hoehere mittlere Saeule */
}
.pillar {
  position: relative;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: rgba(var(--surface-rgb), .55);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* Kapitell: die Kante oben, wird beim Einblenden von links gezogen */
.pillar__cap {
  position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--line-2); transform-origin: left;
}
.pillar__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pillar__no {
  font-family: 'Plex Mono', monospace; font-size: .75rem; letter-spacing: .16em;
  color: var(--paper-3);
}
.pillar__top .ico { color: var(--accent); width: 28px; height: 28px; }
.pillar h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1.05; }
.pillar > p { color: var(--paper-2); font-size: .98rem; }

.pillar__list { display: grid; margin-top: .25rem; border-top: 1px solid var(--line); }
.pillar__list li { padding-block: .9rem; border-bottom: 1px solid var(--line); }
.pillar__list li:last-child { border-bottom: 0; }
.pillar__list strong {
  display: block; font-weight: 600; font-size: .98rem; color: var(--paper);
  margin-bottom: .15rem;
}
.pillar__list span { display: block; font-size: .9rem; color: var(--paper-2); line-height: 1.55; }

/* Die hervorgehobene Saeule */
.pillar--key {
  margin-top: -1.5rem;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--accent-wash) 0%, transparent 70%),
    var(--ink-2);
  border-color: var(--line-2);
}
.pillar--key .pillar__cap { background: var(--accent); height: 3px; }
.pillar--key .btn { margin-top: auto; align-self: flex-start; }

/* "Tagesaktuelle Preise" mit ruhig pulsierendem Punkt */
.live {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Plex Mono', monospace; font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.live i::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent); animation: live 2.4s var(--ease) infinite;
}
@keyframes live { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }

/* ==========================================================================
   KARRIERE teaser
   ========================================================================== */
/* Eine einzige anklickbare Leiste aus drei Modulen, gleiche Sprache wie die
   Navigation. Die ganze Flaeche ist der Link. */
.career {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  color: var(--paper-2);
}
.career > span {
  display: flex; align-items: center; gap: .6rem;
  padding: 1.35rem 1.5rem;
  background: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.career > span + span { margin-left: -1px; }
.career__lbl {
  font-family: 'Plex Mono', monospace; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper-3);
}
.career__txt { flex-wrap: wrap; column-gap: .9rem; font-size: .98rem; }
.career__txt strong {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 1.2rem;
  letter-spacing: -.02em; color: var(--paper);
}
.career__go { font-weight: 600; color: var(--paper); white-space: nowrap; }
.career__go .ico { width: 18px; height: 18px; color: var(--accent); transition: transform .3s var(--ease); }
.career:hover > span { border-color: var(--accent); }
.career:hover .career__go { background: var(--accent); color: var(--on-accent); }
.career:hover .career__go .ico { color: var(--on-accent); transform: translateX(4px); }

/* ==========================================================================
   KONTAKT
   ========================================================================== */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
.contact__list { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
.contact__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact__item .ico { color: var(--accent); margin-top: 3px; }
.contact__item dt {
  font-family: 'Plex Mono', monospace; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--paper-3); margin-bottom: .15rem;
}
.contact__item dd { font-size: 1.02rem; }
.contact__item a:hover { color: var(--accent); }

.form__box { padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field > label { font-size: .86rem; font-weight: 500; color: var(--paper-2); }
.field > label .req { color: var(--accent); }
.field input, .field textarea {
  width: 100%; padding: .78rem .9rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--paper-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--paper-3); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: var(--ink-3); }
.field textarea { resize: vertical; min-height: 130px; }
.field .err { font-size: .82rem; color: var(--danger); min-height: 0; }
.field[data-invalid] input, .field[data-invalid] textarea { border-color: var(--danger); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .86rem; color: var(--paper-2); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); cursor: pointer; }
.consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__note { font-size: .82rem; color: var(--paper-3); }
.form__status { font-size: .92rem; padding: .85rem 1rem; border-radius: var(--r); display: none; }
.form__status[data-state="ok"]   { display: block; background: var(--accent-wash); border: 1px solid var(--accent); color: var(--paper); }
.form__status[data-state="fail"] { display: block; background: var(--danger-bg); border: 1px solid var(--danger-bd); color: var(--danger-fg); }
.btn[data-busy] { pointer-events: none; opacity: .65; }

/* map, loaded only after the visitor asks for it */
.map { position: relative; aspect-ratio: 21 / 9; background: var(--ink-1); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__ask { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; gap: 1rem; align-content: center; }
.map__ask p { color: var(--paper-2); max-width: 46ch; font-size: .92rem; }
.map__ask a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot { border-top: 1px solid var(--line); background: var(--ink-1); }
.foot__top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem; padding-block: clamp(3rem, 5vw, 4rem);
}
.foot__brand img { height: 40px; width: auto; margin-bottom: 1.1rem; }
.foot__brand p { color: var(--paper-3); font-size: .9rem; max-width: 34ch; }
.foot .social { display: flex; gap: .6rem; margin-top: 1.5rem; }
.foot .social a {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  color: var(--paper-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.foot .social a:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.foot .social .ico { width: 20px; height: 20px; }
.foot h4 { font-size: .78rem; font-family: 'Plex Mono', monospace; font-weight: 500;
           letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3); margin-bottom: 1rem; }
.foot ul { display: grid; gap: .35rem; }
/* etwas Innenabstand, damit die Trefferflaeche der Textlinks 24px erreicht */
.foot li a, .foot address a { display: inline-block; padding-block: .22rem;
  color: var(--paper-2); font-size: .93rem; transition: color .2s var(--ease); }
.foot li a:hover, .foot address a:hover { color: var(--accent); }
.foot address { font-style: normal; display: grid; gap: .55rem; font-size: .93rem; color: var(--paper-2); }
.foot__bot {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  padding-block: 1.35rem; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--paper-3);
}
.foot__bot ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* ==========================================================================
   SUBPAGES (Karriere / Recht)
   ========================================================================== */
.pagehead { padding-top: calc(var(--nav-h) + clamp(3.5rem, 7vw, 6rem)); padding-bottom: clamp(2rem, 4vw, 3rem); }
.pagehead .lead { margin-top: 1.2rem; max-width: 56ch; }

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: 2.75rem; margin-bottom: .9rem; }
.prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { color: var(--paper-2); margin-bottom: 1rem; }
.prose ul { list-style: none; display: grid; gap: .5rem; }
.prose ul li { padding-left: 1.4rem; position: relative; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .68em; width: 7px; height: 7px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--paper); font-weight: 600; }

/* job list */
.jobs { display: grid; gap: 1rem; }
.job__bd { padding: 0; }
.job__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.5rem 1.6rem; text-align: left;
}
.job__q h3 { font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.job__q--static { margin: 0; font-size: 1.2rem; }
.job__q .tag { vertical-align: .15em; }
.tag--dim { color: var(--paper-3); border-color: var(--line-2); }
.job__q .ico { color: var(--accent); transition: transform .3s var(--ease); }
/* Offen ist der Ausgangszustand: ohne JavaScript bleibt jede Anzeige lesbar.
   Der Button steckt in der Ueberschrift und ist damit kein Geschwisterelement
   des Panels, den geschlossenen Zustand traegt darum der Wrapper. */
.job__q .ico { transform: rotate(180deg); }
.job__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s var(--ease); }
.job__a > div { overflow: hidden; }
.job__bd.is-closed .job__a { grid-template-rows: 0fr; }
.job__bd.is-closed .job__q .ico { transform: none; }
.job__inner { padding: 0 1.6rem 1.75rem; display: grid; gap: 1.75rem; }
.job__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.job__cols h4 { font-family: 'Plex Mono', monospace; font-size: .72rem; font-weight: 500;
                letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: .85rem; }
.job__cols ul { display: grid; gap: .5rem; font-size: .93rem; color: var(--paper-2); }
.job__cols li { padding-left: 1.3rem; position: relative; }
.job__cols li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.job__apply { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
              padding-top: 1.5rem; border-top: 1px solid var(--line); }
.job__apply .who { font-size: .93rem; color: var(--paper-2); }
.job__apply .who strong { display: block; color: var(--paper); font-weight: 600; }

/* ==========================================================================
   MOTION - entrance states. Everything collapses under reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rv] { opacity: 0; transform: translateY(22px); }
  .js .hero h1 .ln > span { transform: translateY(105%); }
  .js .hero__brandline, .js .hero__lead, .js .hero__cta { opacity: 0; }
  .js .hero__stage, .js .hero__rack { opacity: 0; }
  .js .pillar { opacity: 0; }
  .js .reach__map use, .js .rm-arcs, .js .rm-lbls { opacity: 0; }
  .js .rm-ping { visibility: hidden; }   /* opacity gehoert der Puls-Animation */
  .js .pillar__cap { transform: scaleX(0); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* Das Telefon-Modul braucht rund 200px. Darunter steht die Nummer weiter
   im Kontaktbereich, in der Fusszeile und mobil in der unteren Leiste. */
@media (max-width: 1340px) {
  .nav__tel { display: none; }
}

@media (max-width: 1080px) {
  .nav__links { gap: 1.1rem; padding-inline: 1.1rem; }
  .nav__links a { font-size: .86rem; }
}

@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav__links, .nav__tel { display: none; }
  .nav .btn { display: none; }
  .nav { --mod-h: 48px; top: 10px; }
  .nav__burger { display: flex; }
  /* Ohne Linkmodul schiebt ein Platzhalter Theme und Menue nach rechts */
  .nav__brand { margin-right: auto; }
  .cta-bar { display: flex; }
  body { padding-bottom: 74px; }

  /* Leistungsleiste wird wischbar, der Verlauf rechts zeigt, dass es weitergeht */
  .hero__rack {
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .hero__rack::-webkit-scrollbar { display: none; }
  .hero__rack a { flex: 0 0 auto; scroll-snap-align: start; height: 48px; }

  .reach__grid { grid-template-columns: 1fr; }
  .reach__viz { max-width: 560px; }
  .reach__map { width: 100%; height: auto; }

  /* Kein eigener Bildblock mehr: die Szene liegt hinter dem Text und wird nach
     unten weggeblendet. Spart Hoehe und vermeidet die harte Kante. */
  .hero { min-height: 76dvh; padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 2.5rem; }
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .hero__slot { display: none; }
  .hero__stage {
    top: -6%; right: -22%; bottom: auto; left: -22%; width: auto; height: 82%;
    -webkit-mask-image: radial-gradient(125% 92% at 62% 20%,
      #000 0%, #000 26%, rgba(0,0,0,.5) 54%, rgba(0,0,0,0) 84%);
    mask-image: radial-gradient(125% 92% at 62% 20%,
      #000 0%, #000 26%, rgba(0,0,0,.5) 54%, rgba(0,0,0,0) 84%);
  }
  .hero__brandline { margin-bottom: 1.1rem; }
  .hero__lead { margin-bottom: 1.75rem; }
  .hero::after {
    background: radial-gradient(125% 85% at 58% 16%,
      rgba(var(--ink-rgb), .30) 0%, rgba(var(--ink-rgb), .88) 54%, rgba(var(--ink-rgb), 1) 80%);
  }

  .about__grid { grid-template-columns: 1fr; }
  .about__media { order: -1; }
  .about__media img { aspect-ratio: 16 / 10; }

  /* Fotokacheln voll breit, Textkacheln paarweise. Keine leeren Zellen. */
  .svc__a, .svc__f { grid-column: span 12; grid-row: auto; }
  .svc__b, .svc__c, .svc__d, .svc__e { grid-column: span 6; grid-row: auto; }
  /* KI steht allein in ihrer Zeile: Text links, Prozesskette rechts */
  .svc__g { grid-column: span 12; grid-row: auto; }
  .svc__g .card__bd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
                      column-gap: 2rem; align-items: center; }
  .svc__g .card__bd > :not(.flow) { grid-column: 1; }
  .svc__g .flow { grid-column: 2; grid-row: 1 / span 4; }
  .svc__g .card__no { justify-self: start; margin: 0 0 -.4rem; }
  .svc__a figure { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  /* quer wird zu gestapelt, Bild oben wie bei der ersten Kachel */
  .svc__f .card__bd { flex-direction: column-reverse; }
  .svc__f figure { flex: none; aspect-ratio: 21 / 9; min-height: 0; }
  .svc__f figure::after {
    background: linear-gradient(180deg,
      rgba(var(--surface-rgb), 0) 40%, rgba(var(--surface-rgb), .85) 100%);
  }

  /* Saeulen untereinander, die Beschaffung bleibt durch Kante und Flaeche
     erkennbar, braucht aber keinen Hoehenversatz mehr */
  .pillars { grid-template-columns: 1fr; padding-top: 0; }
  .pillar--key { margin-top: 0; }

  .contact__grid { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  .foot__brand { grid-column: span 2; }
  .job__cols { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 640px) {
  :root { --ch: 16px; }
  .reach__legend { flex-direction: column; }
  .svc__b, .svc__c, .svc__d, .svc__e { grid-column: span 12; }
  .svc__g .card__bd { display: flex; }
  .form__row { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  .foot__brand { grid-column: span 1; }
  /* Karriere-Leiste: Label und Text oben, Pfeil-Modul darunter voll breit */
  .career { grid-template-columns: 1fr; }
  .career > span + span { margin-left: 0; margin-top: -1px; }
  .career > span { padding: 1.1rem 1.25rem; }
  .career > .career__lbl { padding-block: .7rem; }
  .btn { width: 100%; }
  .cta-bar .btn, .job__apply .btn { width: auto; }
  /* Die Telefonnummer steht auf kleinen Schirmen dauerhaft in der unteren
     Leiste. Ein zweiter Button im Hero waere nur Wiederholung und wuerde den
     primaeren CTA unter die Falz druecken. */
  .hero__cta .btn--ghost { display: none; }
  .hero h1 { font-size: 2.15rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Schaltbilder und LEDs stehen im Ausgangszustand statt im letzten Frame */
  .sch *, .hero__rack i { animation: none !important; }
}

@media print {
  .nav, .drawer, .cta-bar, .consent-bar, .hero__stage, .map { display: none !important; }
  body { background: #fff; color: #000; }
}