/* ============================================================
 * wbsec — Hugo stylesheet
 * Ported from the Next.js project (globals.css + inline styles
 * of the React components). Sections per page/component.
 *
 * Scroll-reveal animations are NOT defined here anymore — they
 * are owned by the vendored AOS library (see /vendor/aos-*).
 * Only wbsec-specific styling lives in this file.
 * ============================================================ */

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* 62.5% trick: 1rem = 10px so rem values read like px. */
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Body's overflow-x:clip alone isn't enough — touch/trackpad
   * gestures often address the html scroll container directly,
   * which is overflow:visible by default. Clip here too. */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #111;
  background: #fff;
  min-height: 100vh;
  /* The compact-mode nav__items stay absolutely positioned with
   * white-space:nowrap (so the ResizeObserver can measure the
   * full inline width). They sit at left:0/top:0 of the .nav,
   * which is itself absolute → on narrow viewports they bleed
   * past the right edge and inflate body.scrollWidth, giving
   * the page an unwanted horizontal scroll. overflow-x:clip
   * stops that without affecting any positioned descendants. */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* Brand tokens. */
:root {
  --wb-accent: #2ab5e8;
  --wb-accent-text: #0a1520;
  --wb-navy: #1e2b3c;
  --wb-cream: #f9f7f2;
  --wb-cream-deep: #efede6;
  --wb-warn: #f07b3f;
  --wb-mono: "JetBrains Mono", ui-monospace, monospace;
  --wb-sans: "Hanken Grotesk", system-ui, sans-serif;
  --wb-pad: 10vw;
  --wb-section-vpad: clamp(100px, 10vh, 140px);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-family: var(--wb-sans);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.02rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  border: 1.5px solid #222;
  background: transparent;
  color: #111;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.btn--primary {
  background: var(--wb-accent);
  color: var(--wb-accent-text);
  border-color: var(--wb-accent);
}
.btn:hover {
  transform: translate(-5px, -5px);
  box-shadow: 8px 8px 0 rgba(17, 17, 17, 0.10);
}
.btn-ghost {
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover {
  transform: translate(-5px, -5px);
  box-shadow: 8px 8px 0 rgba(255, 255, 255, 0.10);
}
/* On mobile the default 22px horizontal padding makes long
 * button labels (e.g. "← Zurück zur Unternehmensseite") overflow
 * narrow viewports. */
@media (max-width: 767.98px) {
  .btn,
  .btn-ghost {
    padding: 12px 14px;
  }
}

/* Pentests module-tile hover lift. */
.tile,
.leistungs-tile {
  transition: transform 150ms ease, box-shadow 150ms ease;
  display: block;
  text-decoration: none;
  color: inherit;
}
.tile:hover,
.leistungs-tile:hover {
  transform: translate(-5px, -5px);
  box-shadow: 8px 8px 0 rgba(17, 17, 17, 0.10);
}

/* ── Navigation ───────────────────────────────────────────── */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* Must sit above the mobile overlay (z-index: 25) so the burger
     button stays clickable when the overlay is open. */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 6vw, 120px);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  background: rgba(10, 10, 10, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  gap: 20px;
}
.nav__logo {
  flex-shrink: 0;
  text-decoration: none;
  /* Local stacking context above the mobile overlay so a tap on the
     logo (which closes the open menu via wbsec.js) always lands. */
  position: relative;
  z-index: 32;
}
.nav__logo img {
  height: 26px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}
.nav__items {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--wb-sans);
  font-size: 1.95rem;
  font-weight: 500;
}
.nav__items a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav__cta {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-family: var(--wb-sans);
  font-size: 1.8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}

/* ── Nav burger button (hidden by default; shown when compact) ─ */
.nav__burger {
  display: none;
  position: relative;
  z-index: 32;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-shrink: 0;
  color: #fff;
}
.nav__burger-bar {
  position: absolute;
  left: 10px; right: 10px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform 280ms cubic-bezier(.65,.05,.36,1),
    opacity 200ms ease,
    top 280ms cubic-bezier(.65,.05,.36,1);
}
.nav__burger-bar:nth-child(1) { top: 14px; }
.nav__burger-bar:nth-child(2) { top: 21px; }
.nav__burger-bar:nth-child(3) { top: 28px; }
.nav--open .nav__burger-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav--open .nav__burger-bar:nth-child(2) { opacity: 0; }
.nav--open .nav__burger-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Compact mode is set by wbsec.js when items overflow the nav.
   Items + CTA are hidden visually but kept measurable (absolute,
   white-space: nowrap) so scrollWidth stays meaningful for the
   ResizeObserver feedback loop. */
.nav--compact .nav__items,
.nav--compact .nav__cta {
  visibility: hidden;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.nav--compact .nav__burger { display: block; }

/* ── Mobile menu overlay (full-screen clip-path wipe) ─────── */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: none;
  background: rgba(15, 23, 36, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: opacity 280ms ease, clip-path 520ms cubic-bezier(.7,0,.2,1);
}
.nav-mobile--enabled { display: block; }
.nav-mobile--open {
  opacity: 1;
  pointer-events: auto;
  clip-path: circle(160% at calc(100% - 46px) 46px);
}
.nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0 clamp(24px, 6vw, 80px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(12px, 3vw, 22px);
}
.nav-mobile__item {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 420ms ease,
    transform 520ms cubic-bezier(.2,.7,.2,1);
  transition-delay: 0ms;
}
.nav-mobile--open .nav-mobile__item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(180ms + var(--i, 0) * 70ms);
}
.nav-mobile__item a {
  color: #fff;
  text-decoration: none;
  font-family: var(--wb-sans);
  /* Fluid mobile font: shrinks with viewport so long page names
     never blow past the screen edge. */
  font-size: clamp(0.875rem, 4.5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: inline-block;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}
.nav-mobile__item a:hover,
.nav-mobile__item a:focus-visible {
  border-bottom-color: var(--wb-accent);
}
.nav-mobile__item--cta a {
  visibility: hidden;      /* no Quick Check button in mobile nav bar */
  margin-top: clamp(8px, 2vw, 16px);
  font-size: clamp(1rem, 3.2vw, 1.6rem);
  padding: clamp(6px, 1.4vw, 10px) clamp(12px, 2.6vw, 18px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}
.nav-mobile__item--cta a:hover,
.nav-mobile__item--cta a:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.7);
}

/* ── Hero (subpage) ───────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--wb-navy);
  display: flex;
  align-items: flex-end;
}
.hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--wb-navy);
}
.hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 var(--wb-pad);
  padding-bottom: clamp(48px, 8vh, 120px);
  color: #fff;
}
.hero__breadcrumbs {
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  letter-spacing: 0.1rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}
.hero__eyebrow {
  font-family: var(--wb-mono);
  font-size: 1.8rem;
  letter-spacing: 0.13rem;
  text-transform: uppercase;
  color: var(--wb-accent);
  margin-bottom: 18px;
}
.hero__headline {
  font-family: var(--wb-sans);
  font-size: clamp(4.2rem, 7vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.25rem;
  line-height: 1;
  color: #fff;
  max-width: 90%;
}
.hero__sub {
  margin-top: 22px;
  font-family: var(--wb-sans);
  font-size: clamp(1.5rem, 1.3vw, 2.2rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: min(880px, 70%);
}

/* ── Hero entrance animations (template-driven) ───────────────
 * Per-character delays are computed in the Hugo `hero-sub.html`
 * partial and applied as inline `animation-delay`. This stays
 * in CSS (not JS) because Hugo precomputes the exact delays. */
@keyframes wbHeroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wbHeroSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wbHeroCharReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.wb-herosub-fade {
  animation: wbHeroFadeIn 500ms ease both;
}
.wb-herosub-slide-up {
  animation: wbHeroSlideUp 600ms ease both;
}
.wb-hero-char {
  display: inline-block;
  animation: wbHeroCharReveal 800ms cubic-bezier(.2,.7,.2,1) both;
}

/* ── CTA dot pulse (used by partial cta-dots-bg.html) ─────── */
@keyframes wbsecDotPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.9;  transform: scale(1.35); }
}

/* ── Iso-asset-field (Home hero) — CSS-driven cube field ───
 * The full visual is server-rendered SVG. These keyframes drive
 * the cube fall-in wave, the magnify zoom on the three scan
 * stations, the scan-line sweep, and the rotating reticle.
 * Wbsec.js only handles the post-scan fade-out + the freeze
 * slowdown. */
.iso-asset-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.iso-asset-field svg { display: block; width: 100%; height: 100%; }

.iso-cube-fall {
  transform-box: fill-box;
  transform-origin: center;
  animation: isoCubeFall 1400ms cubic-bezier(0.33, 0.1, 0.45, 1) both;
}
.iso-cube-magnify {
  /* transform-origin set inline per anomaly-cube (visual centre). */
  animation: isoCubeMagnify 6000ms cubic-bezier(0.5, 0, 0.5, 1) forwards;
}
.iso-scan-line {
  opacity: 0;
  /* transform-origin set inline */
  animation: isoScanLine 4000ms ease-in-out forwards;
}
.iso-link-fade { animation: isoLinkFade 420ms ease-out both; }
.iso-anomaly-ring {
  /* transform-origin inline (cube centre) — rotation stays centred
   * even while the parent magnify scales. */
  animation: isoFadeIn 500ms ease-out both, isoAnomalyRotate 18s linear infinite;
}
.iso-anomaly-pulse {
  animation: isoFadeIn 500ms ease-out both, isoAnomalyPulse 2.6s ease-out infinite;
}
/* Reticle/pulse/scanner of the previous scan station fade out
 * as soon as that scan finishes — !important overrides the
 * running isoFadeIn animation. */
.iso-faded {
  opacity: 0 !important;
  transition: opacity 600ms ease-out !important;
}

@keyframes isoCubeFall {
  0%   { transform: translateY(-160px); opacity: 0; }
  40%  { transform: translateY(22px);   opacity: 1; }
  55%  { transform: translateY(-11px); }
  68%  { transform: translateY(7px); }
  79%  { transform: translateY(-4px); }
  88%  { transform: translateY(2px); }
  95%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}
@keyframes isoCubeMagnify {
  0%   { transform: scale(1); }
  10%  { transform: scale(2.6); }
  90%  { transform: scale(2.6); }
  100% { transform: scale(1); }
}
@keyframes isoScanLine {
  0%   { opacity: 0; transform: translateY(-25px); }
  4%   { opacity: 1; }
  28%  { transform: translateY(54px); }
  52%  { transform: translateY(-25px); }
  76%  { transform: translateY(54px); }
  96%  { opacity: 1; transform: translateY(-25px); }
  100% { opacity: 0; transform: translateY(-25px); }
}
@keyframes isoLinkFade {
  from { opacity: 0; }
  to   { opacity: 0.85; }
}
@keyframes isoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes isoFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes isoAnomalyRotate {
  to { transform: rotate(360deg); }
}
@keyframes isoAnomalyPulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.6); }
  100% { opacity: 0;    transform: scale(1.6); }
}

/* ── Kontakt iso-asset-field (Mailbox beat) keyframes ──────
 * The kontakt visual references three keyframes that were
 * missing in CSS — without them the mailbox stayed invisible,
 * the envelope hovered after landing, and the "MAIL RECEIVED"
 * window never appeared. */
@keyframes wbKontaktMailboxMorph {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wbKontaktDropIn {
  /* Envelope arrives at the slot, then "drops in" (sinks +
   * shrinks + fades). */
  0%   { opacity: 1; transform: translateY(0)   scale(1); }
  100% { opacity: 0; transform: translateY(12px) scale(0.65); }
}
@keyframes wbKontaktReceivedSlide {
  0%   { opacity: 0; transform: translateX(40px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── KI-knowledge-graph (KI-Plattform hero) — node fade-in + edge draw ── */
.wb-kg-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  z-index: 2;
}
.wb-kg-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wb-kg-edge {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: wbKgEdgeDraw 800ms ease forwards;
}
.wb-kg-node {
  opacity: 0;
  animation: wbKgFadeIn 500ms ease forwards;
}
@keyframes wbKgFadeIn { to { opacity: 1; } }
@keyframes wbKgEdgeDraw { to { stroke-dashoffset: 0; } }
@media (max-width: 1024px) {
  /* On smaller viewports the dense graph competes with the headline.
   * Hide the SVG; the canvas placeholder already shows the brand
   * gradient as a fallback. */
}

/* ── Typed.js terminal output styling ─────────────────────── */
.typed-cursor {
  /* Match the original blinking cursor look (cyan slab). */
  color: var(--wb-accent);
  font-weight: bold;
}

/* ── Section helpers ──────────────────────────────────────── */
.section {
  padding: var(--wb-section-vpad) var(--wb-pad);
}
.section--cream      { background: var(--wb-cream); }
.section--cream-deep { background: var(--wb-cream-deep); }
.section--white      { background: #fff; }
.section--navy       { background: var(--wb-navy); color: #fff; position: relative; overflow: hidden; }

.section-header {
  margin-bottom: 48px;
  max-width: min(960px, 70%);
}
/* On mobile/tablet the 70% rule shrinks the header significantly
 * (210px @ 300px container, 472px @ 768px tablet) — eyebrow,
 * title and sub get unnecessarily cramped. Use the full
 * container width below 1024px. */
@media (max-width: 1023.98px) {
  .section-header {
    max-width: 100%;
  }
}
.section-header__eyebrow {
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  letter-spacing: 0.1rem;
  color: var(--wb-accent);
  margin-bottom: 10px;
  font-weight: 700;
}
.section-header__title {
  margin: 0;
  font-family: var(--wb-sans);
  font-size: clamp(3.2rem, 3.6vw, 5.6rem);
  font-weight: 600;
  color: #111;
  letter-spacing: -0.1rem;
  line-height: 1.05;
}
.section-header__title--card {
  font-size: clamp(2.8rem, 4vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.08rem;
  line-height: 1.1;
}
.section-header__sub {
  font-family: var(--wb-sans);
  font-size: clamp(1.5rem, 1.15vw, 1.9rem);
  color: #555;
  margin-top: 20px;
  line-height: 1.5;
}

/* ── Legal pages (Datenschutz, Impressum) ─────────────────── */
.legal-shell {
  background: #fafaf7;
  font-family: var(--wb-sans);
  color: #1a1a1a;
  position: relative;
}
.legal-hero {
  position: relative;
  width: 100%;
  background: var(--wb-navy);
}
.legal-hero__nav-spacer { height: 76px; }
.legal-hero__banner {
  position: relative;
  height: 220px;
  overflow: hidden;
  background-image: repeating-linear-gradient(45deg, #243447 0 14px, #1e2b3c 14px 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.legal-hero__banner-mark {
  position: absolute;
  right: 24px;
  bottom: 14px;
  font-family: var(--wb-mono);
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  color: rgba(255, 255, 255, 0.35);
}
.legal-hero__head {
  padding: 60px 10vw 70px;
  background: var(--wb-navy);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.legal-hero__bc {
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  letter-spacing: 0.1rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 22px;
}
.legal-hero__eyebrow {
  font-family: var(--wb-mono);
  font-size: 1.8rem;
  letter-spacing: 0.13rem;
  text-transform: uppercase;
  color: var(--wb-accent);
  margin-bottom: 22px;
}
.legal-hero__title {
  font-family: var(--wb-sans);
  font-size: clamp(4.4rem, 6vw, 8.4rem);
  font-weight: 700;
  letter-spacing: -0rem;
  line-height: 1.02;
  color: #fff;
  max-width: 1100px;
  margin: 0;
}
.legal-hero__sub {
  margin-top: 22px;
  max-width: 760px;
  font-family: var(--wb-sans);
  font-size: 2.4rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.legal-layout {
  background: #fafaf7;
  padding: clamp(80px, 8vh, 120px) 10vw clamp(100px, 10vh, 140px);
}
.legal-layout__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}
.legal-toc {
  flex: 0 1 280px;
  min-width: 220px;
  position: sticky;
  top: 32px;
}
.legal-toc__heading {
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  letter-spacing: 0.11rem;
  color: var(--wb-accent);
  margin-bottom: 16px;
  font-weight: 700;
}
.legal-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1.5px solid #222;
}
.legal-toc__link {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  padding: 12px 14px;
  font-family: var(--wb-sans);
  font-size: 2rem;
  line-height: 1.3;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #ece9e0;
}
.legal-toc__link:last-child { border-bottom: none; }
.legal-toc__num {
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  color: #888;
  letter-spacing: 0.03rem;
}
.legal-toc__updated {
  margin-top: 22px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid #222;
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  color: #444;
  line-height: 1.5;
}
.legal-toc__updated-label {
  color: #888;
  letter-spacing: 0.08rem;
  font-size: 1.5rem;
}
.legal-toc__updated-value {
  margin-top: 4px;
  font-weight: 700;
  color: #111;
}
.legal-toc__warning {
  margin-top: 16px;
  padding: 16px 18px;
  background: #fff8e6;
  border: 1.5px dashed #c9a227;
  font-family: var(--wb-mono);
  font-size: 1.6rem;
  color: #6b5310;
  line-height: 1.45;
}
.legal-article {
  flex: 1 1 500px;
  max-width: 900px;
  min-width: 0;
}
.legal-section {
  padding: 44px 0;
  border-top: 1px solid #e5e2d9;
}
.legal-section__h2 {
  scroll-margin-top: 32px;
  margin: 0 0 22px;
  display: flex;
  align-items: baseline;
  gap: 22px;
  font-family: var(--wb-sans);
  font-size: clamp(3.2rem, 3.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.06rem;
  line-height: 1.15;
  color: #111;
}
.legal-section__num {
  font-family: var(--wb-mono);
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  color: var(--wb-accent);
  min-width: 44px;
}
.legal-section__body {
  padding-left: 66px;
}
.legal-section__body p {
  margin: 0 0 16px;
  font-family: var(--wb-sans);
  font-size: 2.25rem;
  line-height: 1.62;
  color: #333;
}
.legal-section__body h3 {
  margin: 30px 0 12px;
  font-family: var(--wb-sans);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.02rem;
  color: var(--wb-navy);
}
.legal-section__body ul {
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-section__body ul li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-family: var(--wb-sans);
  font-size: 2.25rem;
  line-height: 1.55;
  color: #333;
}
.legal-section__body ul li::before {
  content: "▸";
  font-family: var(--wb-mono);
  font-size: 1.8rem;
  color: var(--wb-accent);
  line-height: 1.7;
}
.legal-card {
  background: #fff;
  border: 1.5px solid #222;
  padding: 22px;
  margin: 8px 0 18px;
  font-family: var(--wb-sans);
  font-size: 2.1rem;
  line-height: 1.7;
  color: #222;
}
/* Inline placeholder pill for unfilled legal data. */
.ph {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(42, 181, 232, 0.18);
  color: var(--wb-accent-text);
  font-family: var(--wb-mono);
  font-size: 1.95rem;
  font-weight: 600;
  letter-spacing: 0.02rem;
  border-radius: 2px;
  border: 1px dashed var(--wb-accent);
}
/* Datenschutz "kurz & klar" summary box */
.legal-summary {
  margin: 0 0 8px;
  background: var(--wb-navy);
  color: #fff;
  padding: 28px;
  border: 1.5px solid #0f1823;
  border-left: 4px solid var(--wb-accent);
}
.legal-summary__eyebrow {
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  letter-spacing: 0.1rem;
  color: var(--wb-accent);
  margin-bottom: 12px;
  font-weight: 700;
}
.legal-summary__text {
  font-family: var(--wb-sans);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  max-width: 720px;
}
.legal-summary__tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.legal-summary__tags span {
  padding: 6px 14px;
  background: rgba(42, 181, 232, 0.12);
  color: var(--wb-accent);
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  letter-spacing: 0.05rem;
  font-weight: 600;
  border: 1px solid rgba(42, 181, 232, 0.4);
}

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  padding: 40px var(--wb-pad);
  border-top: 1px solid #e5e2d9;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--wb-mono);
  font-size: 1.65rem;
  color: #888;
}
.footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Home WhyRows + Unternehmen Standort grids (under 1300px) ─
 * Both use a 2-column layout that gets too tight before normal
 * breakpoints kick in — stack them earlier. */
@media (max-width: 1300px) {
  .wb-why-grid, .wb-standort-grid { grid-template-columns: 1fr !important; }
}

/* Legal TOC: drop sticky as soon as the layout actually wraps to
 * one column. With 10vw side padding and TOC flex-basis 280 + gap
 * 56 + article flex-basis 500 the wrap happens at ~1045px viewport.
 * Below that the TOC is just a row at the top — sticky would scroll
 * into the article text. The full mobile reset (column flex,
 * full-width TOC) stays below 900px. */
@media (max-width: 1045px) {
  .legal-toc {
    position: static;
  }
}

/* ── Subpage hero — mobile (under 900px) ──────────────────────
 * Below 900px the hero switches from a 100vh flex container
 * (visual absolute behind, content at bottom) to a normal block
 * column: visual takes its own slot at the top, content flows
 * below it. Headline scales down, sub text uses full width. */
@media (max-width: 900px) {
  .hero {
    display: block;
    min-height: 0;
  }
  .hero__visual,
  .hero:not(.hero--home) .iso-asset-field {
    position: relative;
    inset: auto;
    width: 100%;
    height: 55vh;
    min-height: 360px;
  }
  /* Knowledge-graph SVG overlay (KI-Plattform) is absolute to .hero;
   * constrain its height so it sits over the visual slot only and
   * doesn't bleed over the headline/sub below. */
  .hero .wb-kg-wrap {
    height: 55vh;
    min-height: 360px;
    bottom: auto;
  }
  .hero__content {
    padding: 28px 6vw 48px;
  }
  .hero__headline {
    font-size: clamp(3rem, 10vw, 5rem);
    letter-spacing: -0.15rem;
    line-height: 1.02;
    max-width: 100%;
  }
  .hero__sub {
    font-size: 1.85rem;
    max-width: 100%;
  }

  /* Don't show toc on mobile devices */
  .legal-layout__inner {
    flex-direction: column;   /* 2 Spalten → 1 Spalte */
  }

  .legal-toc {
    position: static;         /* kein sticky */
    flex: none;
    width: 100%;
    margin-bottom: 2rem;
  }

  /* Inner uses align-items:flex-start, so the article wouldn't
   * stretch to fill the column — it'd take its min-content
   * width (longest unbreakable word like "Digitale-Dienste-
   * Gesetz") and overflow the container by ~40px. Force full
   * width to match the TOC above. */
  .legal-article {
    width: 100%;
  }

  /* On mobile drop the inline "NN Title" heading + 66px body
   * indent: number sits on its own line above the title, body
   * text aligns flush-left under it. */
  .legal-section__h2 {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .legal-section__body {
    padding-left: 0;
  }

  .legal-toc .legal-toc__nav {
    max-height: none;
    overflow: visible;
  }

}

/* Tablet/mobile: a few content grids collapse to single column
 * (Home cases tiles, KI-Plattform forPartner benefits, Kooperationen
 * koop-models cards). */
@media (max-width: 1023.98px) {
  .wb-stack-tablet,
  .wb-home-cases-grid,
  .wb-home-block-grid,
  .wb-fp-benefits,
  .wb-koop-models-grid,
  .wb-uv-werte-grid,
  .wb-uv-grid--mobile-collapse {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile-menu items use clamp(.., 4.5vw, 3.6rem) — on
 * landscape-phones (high width, low height) the 4.5vw clause
 * caps at the 3.6rem max (36px), which makes all 6 items not
 * fit the 390px screen height. Tighten the cap on short
 * viewports — readable but compact.
 * Also: switch the list from vertically-centred to top-aligned
 * with a clear gap below the nav bar, so the first item doesn't
 * crowd the closing X. */
@media (max-height: 500px) {
  .nav-mobile__item a {
    font-size: clamp(1.7rem, 4.5vh, 2.4rem) !important;
  }
  .nav-mobile__list {
    gap: clamp(10px, 2vh, 16px) !important;
    justify-content: flex-start !important;
    padding-top: clamp(110px, 24vh, 150px) !important;
  }
}

/* ── Home hero — mobile/tablet (under 1024px) or short-height
 * The hero wrapper becomes a flow column on narrow viewports
 * (incl. tablet portrait 768x1024) AND on landscape-phones
 * (short viewports < 500px tall, where 100vh can't fit the
 * glass-card content). */
@media (max-width: 1023.98px), (max-height: 500px) {
  .wb-home-hero-wrap .hero--home {
    min-height: 60vh !important;
  }
  .wb-home-hero-wrap .wb-home-hero-frame {
    position: static !important;
    transform: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    margin: 24px 5vw 0;
  }
  .wb-home-hero-wrap .wb-home-trust {
    position: static !important;
    margin-top: 24px;
    padding: 18px 6vw 22px !important;
    gap: 14px !important;
  }
  /* The iso-asset-field viewBox puts the cube cluster in the
   * upper half, which looks too top-anchored when the hero is
   * only 60vh tall on mobile. Nudge the SVG content down so the
   * scan stations sit closer to the vertical centre. */
  .wb-home-hero-wrap .iso-asset-field svg {
    transform: translateY(28%);
    transform-origin: top center;
  }

  /* "Warum wir?" rows: 3 cols (num/title/copy) → 2 cols with copy
     wrapping to a second line under the title. */
  .wb-why-row {
    grid-template-columns: 50px 1fr !important;
    gap: 16px !important;
  }
  .wb-why-row__copy {
    grid-column: 2 !important;
    margin-top: 6px;
  }
}

/* ── Model-compare (KI-Plattform) — table on desktop, cards
 * on tablet/mobile. Same data rendered twice in the template;
 * we just toggle visibility here. */
@media (max-width: 1024px) {
  .wb-mc-table { display: none !important; }
  .wb-mc-cards { display: flex !important; }
}

/* Basis stats grid (KI-Plattform): 2 cols on desktop, single
 * column from tablet down so the four boxes stack one per row. */
@media (max-width: 1024px) {
  .wb-basis-stats {
    grid-template-columns: 1fr !important;
  }
}

/* Equation grid (Kooperationen): wide desktops show all three
 * boxes in one row (Box1 + Box2 + Box3) with "= Result" beneath.
 * Below 1500px the row-wrappers become their own flex containers,
 * so the "+" and "=" tiles can be auto-sized (small) while the
 * boxes stretch to equal width — without sharing a grid column. */
.wb-equation-grid {
  display: grid;
  grid-template-columns: 1fr 20px 1fr 20px 1fr;
  grid-template-areas:
    "b1 p1 b2 p2 b3"
    "eq res res res res";
  gap: 14px;
  align-items: stretch;
}
.wb-equation-grid > .wb-eq-row { display: contents; }
.wb-eq-b1 { grid-area: b1; }
.wb-eq-b2 { grid-area: b2; }
.wb-eq-b3 { grid-area: b3; }
.wb-eq-p1 { grid-area: p1; }
.wb-eq-p2 { grid-area: p2; }
.wb-eq-equals { grid-area: eq; }
.wb-eq-result { grid-area: res; }

/* Pentests reporting cards: on mobile the absolute footer
 * collides with the recommendations list (min-height:440px is
 * not enough for stacked content), and the 3-col stats grid
 * pushes the third box past the card border. Drop the absolute
 * footer to flow, lift the min-height, center stat content. */
@media (max-width: 767.98px) {
  .wb-rep-card {
    min-height: auto !important;
    padding-bottom: 28px !important;
  }
  .wb-rep-card__footer {
    position: static !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    margin-top: 24px !important;
    /* Stack the two spans on mobile: "wbsec.de/report" (DOM #2)
     * appears on top, "BSI · NIS-2 · CRA konform" (DOM #1)
     * underneath — column-reverse without touching the markup. */
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 4px;
  }
  .wb-rep-stats > * {
    min-width: 0;
    text-align: center;
    padding: 14px 4px !important;
  }
  /* Label font ("KRITISCH", "HOCH", "MITTEL") is wider than the
   * 1fr column slot at 375px viewport — drop it a bit. */
  .wb-rep-stats > * > div:last-child {
    font-size: 1.25rem !important;
  }
}

/* Home v3 blocks (pentestBlock / platformBlock / partnerBlock):
 * grid uses minmax(300px,1fr) — at <=600px viewport the column min
 * width forces overflow past the card border (h2 sits flush at the
 * edge with no padding). Collapse to 1fr so the column fits inside
 * the inner padding area. */
@media (max-width: 600px) {
  .wb-home-block-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Grid items default to min-width:auto, which lets them overflow
   * past the parent's padding-box if their min-content is larger
   * than the available track. min-width:0 lets them honor the
   * padding properly. */
  .wb-home-block-grid > * {
    min-width: 0;
  }
  /* The pentest block has an inner border + padding. 24px feels
   * cramped against the headline on mobile — bump it up. */
  .wb-home-block-grid--bordered {
    padding: clamp(28px, 6vw, 36px) !important;
  }
  /* PentestBlock bullet cards: icon next to text is too cramped
   * on mobile. Stack icon on its own row above the text. */
  .wb-pb-bullet,
  .wb-fp-solution {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Unternehmen "Vier Dinge" + "Compliance" cards: 2 cols on all
 * widths by default. The compliance grid additionally collapses
 * to 1 col below 700px (its content is denser); the advantages
 * grid stays 2 cols (per spec). */
@media (max-width: 700px) {
  .wb-uv-grid--mobile-collapse {
    grid-template-columns: 1fr !important;
  }
}

/* "Über mich" privat section: text + cards side by side on wide
 * viewports, single column when the text gets cramped (<=1000px). */
@media (max-width: 1000px) {
  .wb-um-privat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* "Fünf Gründe" cards (Kooperationen): 3 cols on wide desktop
 * (3+2 layout), 2 cols at <=1250px so item 04 lands top-right of
 * the second row and item 05 sits left in row 3, 1 col on small
 * mobile. */
.wb-koop-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 1250px) {
  .wb-koop-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 850px) {
  .wb-koop-why-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet & mobile-landscape (<=1500px): four-column grid where
 * Box1/Box2 sit on row 1 and Box3/"=" align directly under them,
 * so Box1=Box2=Box3="=" in width, and "=" is left-aligned under
 * Box2. The "+" between Box2 and the next row hangs at the right
 * of row 1. */
@media (max-width: 1500px) {
  .wb-equation-grid {
    grid-template-columns: 1fr auto 1fr auto;
    grid-template-areas:
      "b1  p1  b2  p2"
      "b3  .   eq  ."
      "res res res res";
  }
}

/* Equation card on mobile: bleed the dark card edge-to-edge
 * (negative margin to break out of the section's 10vw padding)
 * while padding the inner content back to 10vw — content stays
 * flush-left with all surrounding section text. */
@media (max-width: 767.98px) {
  .wb-equation-card {
    margin-left: -10vw !important;
    margin-right: -10vw !important;
    padding: 32px 10vw !important;
    border-left: none !important;
    border-right: none !important;
  }
  /* Drop the section's bottom padding so the edge-to-edge dark
   * card flows directly into the next section. */
  .wb-koop-thesen {
    padding-bottom: 0 !important;
  }
}

/* Smartphone: drop the grid, stack each box+operator on its own
 * line via flex-wrap (Box1 +, Box2 +, Box3 =, Result). */
@media (max-width: 767.98px) {
  .wb-equation-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  .wb-equation-grid > .wb-eq-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;
  }
  .wb-eq-b1, .wb-eq-b2, .wb-eq-b3 {
    flex: 1 1 calc(100% - 80px);
    min-width: 0;
  }
  .wb-eq-plus, .wb-eq-equals {
    flex: 0 0 auto;
    min-width: 60px;
  }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}