/* ============================================================
   Regurio Solutions GmbH . main stylesheet
   Light slate palette, sans-serif, icon cards, dark contrast.
   ============================================================ */

:root {
  /* Light slate surfaces */
  --bg:               #f7f9fb;
  --surface:          #ffffff;
  --surface-alt:      #eceef0;
  --surface-low:      #f2f4f6;
  --surface-trans:    rgba(247, 249, 251, 0.85);

  /* Type colours */
  --ink:              #14130f;
  --ink-soft:         #45464d;
  --ink-mute:         #76777d;

  /* Lines */
  --outline:          #c6c6cd;
  --outline-soft:     #e0e3e5;

  /* Primary action: softened black */
  --primary:          #0f172a;
  --primary-hover:    #1e293b;
  --on-primary:       #ffffff;

  /* Accent: subtle blue, used in icon tiles and link colour */
  --tile-bg:          #d3e4fe;
  --tile-ink:         #1c2e4a;
  --link:             #1c2e4a;

  /* Status indicator */
  --ok:               #16a34a;
  --ok-soft:          #dcfce7;

  /* Dark section */
  --dark-bg:          #0f172a;
  --dark-surface:     #1e293b;
  --dark-border:      #334155;
  --dark-text:        #f1f5f9;
  --dark-text-soft:   #cbd5e1;
  --dark-text-mute:   #64748b;

  /* Type stacks */
  --sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
           "Segoe UI", "Helvetica Neue", "Inter", "Noto Sans", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
           "DejaVu Sans Mono", "Courier New", monospace;

  /* Layout */
  --container: 1280px;
  --pad: 48px;
  --gutter: 24px;
  --section-pad: 96px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

@media (max-width: 880px) {
  :root { --pad: 32px; --section-pad: 72px; }
}
@media (max-width: 520px) {
  :root { --pad: 20px; --section-pad: 56px; }
}


/* ─── Reset & base ─────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt", "ss01";
}

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

[lang="de"] [data-en] { display: none !important; }
[lang="en"] [data-de] { display: none !important; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }


/* ─── Header ───────────────────────────────────────────── */

.appbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-trans);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms var(--ease);
}
.appbar.docked { border-bottom-color: var(--outline-soft); }

.appbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  height: 64px;
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 19px;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  display: block;
  height: 30px;
  width: auto;
}
@media (max-width: 720px) {
  .brand-logo { height: 26px; }
}
/* legacy square icon mark — retained for reference; no longer used in markup */
.brand-mark {
  width: 22px; height: 22px;
  background: var(--primary);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-mark svg path { stroke: var(--on-primary); stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.appbar-nav {
  display: flex; gap: 32px; align-items: center;
}
.appbar-nav a {
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft); text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 180ms var(--ease);
}
.appbar-nav a:hover { color: var(--ink); text-decoration: none; }

.appbar-actions {
  display: flex; gap: 12px; align-items: center;
}
.lang-toggle {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1px solid var(--outline);
  color: var(--ink-soft);
  padding: 7px 12px;
  border-radius: 6px;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.lang-toggle:hover {
  background: var(--surface-alt);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-primary {
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.btn-primary:hover { background: var(--primary-hover); text-decoration: none; }

@media (max-width: 880px) {
  .appbar-nav { display: none; }
  .appbar-inner { gap: 12px; }
  .btn-primary.appbar-cta { display: none; }
}


/* ─── Hero ─────────────────────────────────────────────── */

.hero {
  padding: 80px 0 96px 0;
  position: relative; overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
}

.label-caps {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tile-ink);
  display: inline-block;
  margin-bottom: 20px;
}

.hero-h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0 0 20px 0;
  max-width: 18ch;
}

.hero-sub {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 36px 0;
  max-width: 56ch;
  font-weight: 400;
}

.hero-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

.btn-lg {
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  padding: 14px 24px;
  border-radius: 8px;
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
  border: none;
  text-decoration: none;
  transition: background 180ms var(--ease), border-color 180ms var(--ease),
              color 180ms var(--ease), transform 180ms var(--ease);
}
.btn-lg:hover { text-decoration: none; transform: translateY(-1px); }
.btn-lg.is-primary { background: var(--primary); color: var(--on-primary); }
.btn-lg.is-primary:hover { background: var(--primary-hover); }
.btn-lg.is-secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--outline);
}
.btn-lg.is-secondary:hover { border-color: var(--ink); background: var(--surface); }
.btn-arrow {
  display: inline-block;
  transform: translateX(0);
  transition: transform 200ms var(--ease);
}
.btn-lg:hover .btn-arrow { transform: translateX(3px); }

/* Hero visual: abstract compliance dashboard */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  width: 100%;
  margin-left: auto;
}
.hero-board {
  width: 100%; height: 100%;
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06);
}
.hero-board-bar {
  background: var(--primary);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 10px;
}
.hero-board-bar .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  position: relative;
}
.hero-board-bar .dot::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  background: var(--ok); opacity: 0.4;
  animation: pulse 2.4s var(--ease-out) infinite;
}
.hero-board-bar .label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dark-text); font-weight: 600;
}
.hero-board-bar .stamp {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  color: var(--dark-text-mute);
}

.hero-board-rows {
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.hero-row {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 6px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: rowReveal 480ms var(--ease-out) forwards;
}

/* Scan beam: a soft green sweep that travels across each row to
   simulate a check being performed. CSS-only, repeated per row. */
.hero-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(22, 163, 74, 0.10) 35%,
    rgba(22, 163, 74, 0.22) 50%,
    rgba(22, 163, 74, 0.10) 65%,
    transparent 100%);
  background-size: 60% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
  pointer-events: none;
  opacity: 0;
  animation: rowScan 1100ms cubic-bezier(0.5, 0, 0.5, 1) forwards;
}

/* Status pill: initially hidden, pops in once the scan has finished
   crossing the row. */
.hero-row .hero-row-status {
  opacity: 0;
  transform: scale(0.6);
  animation: statusPop 380ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}

/* Sequenced timing per row: reveal → scan → status. */
.hero-row:nth-child(1) { animation-delay: 200ms; }
.hero-row:nth-child(1)::after { animation-delay: 350ms; }
.hero-row:nth-child(1) .hero-row-status { animation-delay: 1200ms; }

.hero-row:nth-child(2) { animation-delay: 950ms; }
.hero-row:nth-child(2)::after { animation-delay: 1100ms; }
.hero-row:nth-child(2) .hero-row-status { animation-delay: 1950ms; }

.hero-row:nth-child(3) { animation-delay: 1700ms; }
.hero-row:nth-child(3)::after { animation-delay: 1850ms; }
.hero-row:nth-child(3) .hero-row-status { animation-delay: 2700ms; }

.hero-row:nth-child(4) { animation-delay: 2450ms; }
.hero-row:nth-child(4)::after { animation-delay: 2600ms; }
.hero-row:nth-child(4) .hero-row-status { animation-delay: 3450ms; }
.hero-row-icon {
  width: 32px; height: 32px;
  background: var(--surface-alt);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-row-icon svg { width: 18px; height: 18px; stroke: var(--ink-soft); }
.hero-row-text { flex: 1; min-width: 0; }
.hero-row-name {
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hero-row-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-mute);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.hero-row-status {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ok);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  background: var(--ok-soft);
  border-radius: 100px;
}
.hero-row-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok);
}

.hero-board-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--outline-soft);
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-mute); letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; justify-content: space-between;
}

/* Floating overlay card */
.hero-card {
  position: absolute;
  bottom: -18px; left: -18px;
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(15,23,42,0.08);
  max-width: 240px;
}
.hero-card-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.hero-card-row svg { width: 16px; height: 16px; stroke: var(--ok); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-card-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.hero-card-text {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

@media (max-width: 1080px) {
  .hero-visual { margin: 0 auto; }
}
@media (max-width: 520px) {
  .hero-card { display: none; }
}

@keyframes pulse {
  0% { transform: scale(0.7); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes rowReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rowScan {
  0%   { background-position: -60% 0; opacity: 0; }
  10%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { background-position: 160% 0; opacity: 0; }
}
@keyframes statusPop {
  to { opacity: 1; transform: scale(1); }
}


/* ─── Trusted (industries we serve) ────────────────────── */

.trusted {
  background: var(--surface-low);
  border-top: 1px solid var(--outline-soft);
  border-bottom: 1px solid var(--outline-soft);
  padding: 56px 0;
}

.trusted-eyebrow {
  text-align: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 28px;
}

.trusted-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 16px 48px;
}
.trusted-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.trusted-pill svg { width: 22px; height: 22px; stroke: var(--ink-soft); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }


/* ─── Section foundations ─────────────────────────────── */

section { padding: var(--section-pad) 0; }

.section-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tile-ink);
  margin-bottom: 12px;
  display: inline-block;
}

.section-h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 16px 0;
  max-width: 24ch;
}

.section-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 56px 0;
  max-width: 62ch;
}


/* ─── Coverage cards (Prüfbereiche) ───────────────────── */

.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

@media (max-width: 1080px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cards-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 10px;
  padding: 28px;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.card-icon {
  width: 44px; height: 44px;
  background: var(--tile-bg);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg {
  width: 22px; height: 22px;
  stroke: var(--tile-ink); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.card-title {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 10px 0;
}

.card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 20px 0;
  flex: 1;
}


/* ─── Comparison (dark section) ────────────────────────── */

.compare-section {
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}
.compare-section > .container {
  position: relative;
  z-index: 1;
}

/* Subtle diagonal-hairline pattern + JS-driven half-speed parallax.
   The pattern element extends 30vh above/below the section so it
   stays covered as it translates during scroll. */
.vergleich-pattern {
  position: absolute;
  top: -30vh;
  bottom: -30vh;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0) 22px,
    rgba(255, 255, 255, 0.028) 22px,
    rgba(255, 255, 255, 0.028) 23px
  );
  background-color: transparent;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.compare-section .section-eyebrow {
  color: #93b4ff;
}
.compare-section .section-h2 {
  color: var(--dark-text);
}
.compare-section .section-h2 em {
  font-style: italic;
  color: #93b4ff;
  font-weight: 700;
}
.compare-section .section-lede {
  color: var(--dark-text-soft);
  margin-bottom: 48px;
}

.compare {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  overflow: hidden;
}

.compare-head, .compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--dark-border);
}
.compare-row:last-child { border-bottom: none; }

.compare-cell {
  padding: 22px 28px;
  border-right: 1px solid var(--dark-border);
}
.compare-cell:last-child { border-right: none; }

.compare-head {
  background: rgba(255,255,255,0.02);
}
.compare-head .compare-cell {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 28px;
  display: flex; align-items: center; gap: 10px;
}
.compare-head .compare-cell--manual {
  color: var(--dark-text-mute);
  font-style: italic;
}
.compare-head .compare-cell--regurio { color: var(--dark-text); }
.compare-head .compare-cell svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.compare-cell--manual {
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text-soft);
  font-style: italic;
}
/* Negative key words on the manual side: highlighter-pen mark.
   Yellow band across the lower 40% of the character height,
   like an auditor's marker on a paper file. */
.compare-cell--manual mark {
  background: linear-gradient(
    transparent 55%,
    rgba(251, 191, 36, 0.36) 55%,
    rgba(251, 191, 36, 0.36) 92%,
    transparent 92%
  );
  color: inherit;
  font-weight: 600;
  font-style: italic;
  padding: 0 1px;
  border-radius: 1px;
}
.compare-cell--regurio {
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text);
  font-weight: 500;
  display: flex; gap: 12px; align-items: flex-start;
}
.compare-cell--regurio::before {
  content: "";
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2393b4ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,8 7,12 13,4'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
/* In the header context the row uses align-items: center, so the icon
   needs to sit on the centre baseline rather than the data-row top. */
.compare-head .compare-cell--regurio::before { margin-top: 0; }

@media (hover: hover) {
  .compare-row { transition: background 200ms var(--ease); }
  .compare-row:hover { background: rgba(255, 255, 255, 0.025); }
}

@media (max-width: 768px) {
  .compare-head { display: none; }
  .compare-row {
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--dark-border);
  }
  .compare-cell {
    padding: 22px 24px;
    border-right: none;
  }
  .compare-cell--manual { border-bottom: 1px solid var(--dark-border); background: rgba(0,0,0,0.15); }
  .compare-cell::before {
    display: block;
    font-family: var(--mono);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 8px;
  }
  .compare-cell--manual::before {
    content: "✕ Manuell" / "";
    color: var(--dark-text-mute); font-style: italic;
    background: none; width: auto; height: auto;
  }
  .compare-cell--regurio::before {
    content: "✓ Mit Regurio";
    color: var(--dark-text);
    background: none; width: auto; height: auto;
    margin-top: 0;
  }
  [lang="de"] .compare-cell--manual::before { content: "✕ Manuell"; }
  [lang="en"] .compare-cell--manual::before { content: "✕ Manually"; }
  [lang="de"] .compare-cell--regurio::before { content: "✓ Mit Regurio"; }
  [lang="en"] .compare-cell--regurio::before { content: "✓ With Regurio"; }
}


/* ─── Team ─────────────────────────────────────────────── */

.team-section { background: var(--bg); }

.people {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1080px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .people { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } }

.person-card {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 10px;
  padding: 24px;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.person-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.person-portrait {
  aspect-ratio: 1 / 1;
  background: var(--surface-alt);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.person-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(15%) contrast(1.05);
  transition: transform 600ms var(--ease);
}
.person-card:hover .person-portrait img { transform: scale(1.04); }

.person-role {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tile-ink);
  background: var(--tile-bg);
  padding: 4px 9px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 10px;
  align-self: flex-start;
}
.person-name {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 10px 0;
  line-height: 1.2;
}
.person-bio {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}


/* ─── Audit pitfalls (bridges comparison → team) ──────── */

.pitfalls-section {
  background: var(--bg);
  padding: var(--section-pad) 0;
}

.pitfall-card {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 10px;
  padding: 28px;
  display: flex; flex-direction: column;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.pitfall-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.pitfall-icon {
  width: 40px; height: 40px;
  background: var(--surface-alt);
  border: 1px solid var(--outline-soft);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.pitfall-icon svg {
  width: 20px; height: 20px;
  stroke: var(--ink-soft);
}

.pitfall-q {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 12px 0;
  font-style: italic;
}

.pitfall-a {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  flex: 1;
}

.pitfall-bridge {
  margin: 48px auto 0 auto;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-align: center;
  font-style: italic;
  position: relative;
  padding-top: 32px;
}
.pitfall-bridge::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 2px;
  background: var(--primary);
}


/* ─── Rechtsrahmen (regulatory framework) ──────────────── */

.rechtsrahmen-section {
  background: var(--surface-low);
  border-top: 1px solid var(--outline-soft);
  border-bottom: 1px solid var(--outline-soft);
  padding: var(--section-pad) 0;
}

.reg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1080px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .reg-grid { grid-template-columns: 1fr; } }

.reg-group {
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 10px;
  padding: 24px;
}

.reg-group-title {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--outline-soft);
  text-transform: uppercase;
}

.reg-list {
  list-style: none;
  margin: 0; padding: 0;
}
.reg-list li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--surface-alt);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.reg-list li:last-child { border-bottom: none; }

.reg-code {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tile-ink);
  background: var(--tile-bg);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  align-self: start;
  text-align: center;
  white-space: nowrap;
  height: fit-content;
}

.reg-name {
  align-self: center;
  color: var(--ink-soft);
}


/* ─── CTA card ─────────────────────────────────────────── */

.cta-section {
  padding: var(--section-pad) 0;
}

.cta-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--outline-soft);
  border-radius: 12px;
  padding: 56px 48px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.cta-card h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin: 0 0 14px 0;
  color: var(--ink);
}
.cta-card p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 32px 0;
}
.cta-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

@media (max-width: 520px) {
  .cta-card { padding: 40px 24px; }
}


/* ─── Footer ───────────────────────────────────────────── */

.site-footer {
  background: var(--surface-low);
  border-top: 1px solid var(--outline-soft);
  padding: 48px 0 32px 0;
}
.site-footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
@media (max-width: 768px) {
  .site-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}
.footer-brand {
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.footer-meta {
  font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.footer-links {
  display: flex; flex-wrap: wrap;
  gap: 12px 28px;
  justify-self: end;
}
@media (max-width: 768px) { .footer-links { justify-self: start; } }
.footer-links a {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 180ms var(--ease);
}
.footer-links a:hover { color: var(--ink); text-decoration: underline; }


/* ─── Reveal-on-scroll ─────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }


/* ─── Minimal hero (no visual, centered) ──────────────── */

.hero-minimal {
  padding: 120px 0 96px 0;
}
.hero-minimal-inner {
  max-width: 720px;
}
.hero-minimal .hero-h1 {
  max-width: 22ch;
}
.hero-minimal .hero-sub {
  margin-bottom: 32px;
}


/* Two-card team layout (minimal variant) */
.people.people-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 520px) {
  .people.people-2 { grid-template-columns: 1fr; max-width: 360px; }
}


/* ─── Hero split layout (minimal: intro + team side-by-side) ─── */

.hero-split {
  padding: 96px 0;
}
.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.hero-split-intro .hero-h1 { max-width: 14ch; }
.hero-split-intro .hero-sub { margin-bottom: 32px; }

.hero-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tile-ink, var(--ink-soft));
  margin: 0 0 14px 0;
  display: inline-block;
}

.hero-team-title {
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 24px 0;
  max-width: none;
}

.hero-split-team {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Compact horizontal person card for the hero column */
.person-card-row {
  flex-direction: row;
  gap: 18px;
  padding: 20px;
  align-items: flex-start;
}
.person-card-row .person-portrait {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  margin-bottom: 0;
  aspect-ratio: 1 / 1;
}
.person-card-row .person-card-body {
  flex: 1;
  min-width: 0;
}
.person-card-row .person-role { margin-bottom: 6px; }
.person-card-row .person-name {
  font-size: 16px;
  margin-bottom: 6px;
}
.person-card-row .person-bio {
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .hero-split-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 520px) {
  .person-card-row .person-portrait { width: 64px; height: 64px; }
}


/* ─── Footer disclaimer (minimal variant) ─────────────── */

.footer-disclaimer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--outline-soft);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  text-align: center;
}


/* ─── Legal pages (Impressum, Datenschutz) ────────────── */

.legal-page {
  padding: 64px 0 96px 0;
}
.legal-page .container {
  max-width: 820px;
}

.legal-eyebrow {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tile-ink);
  margin-bottom: 12px;
  display: inline-block;
}

.legal-page h1 {
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 12px 0;
}

.legal-subtitle {
  font-size: 15px;
  color: var(--ink-mute);
  margin: 0 0 48px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--outline-soft);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

.legal-page h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 40px 0 14px 0;
  line-height: 1.3;
}

.legal-page h2:first-of-type { margin-top: 0; }

.legal-page p,
.legal-page address {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px 0;
  font-style: normal;
}

.legal-page address strong {
  color: var(--ink);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.legal-page ul {
  margin: 0 0 16px 0;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.legal-page ul li { margin-bottom: 6px; }

.legal-page a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal-page a:hover { color: var(--primary); }

.legal-page strong { color: var(--ink); font-weight: 700; }

.legal-page .placeholder {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-mute);
  background: var(--surface-alt);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px dashed var(--outline);
}


/* ─── Reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-row, .reveal { opacity: 1 !important; transform: none !important; }
  .hero-board-bar .dot::after { display: none; }
}