/* =========================================================
   von Basum Steuerberatung — Site Chrome
   Shared layout: navbar, hero. Imports tokens via cascade.
   ========================================================= */

/* Smooth anchor scrolling (e.g. hero "Mehr" → intro) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#nach-hero { scroll-margin-top: 84px; }
#standort { scroll-margin-top: 84px; }

/* ---------- NAVBAR ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 84px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, height .25s ease;

  /* These tokens drive the nav's adaptive colouring */
  --nav-fg:        var(--bg);
  --nav-fg-muted:  rgba(248, 244, 237, 0.78);
  --nav-divider:   rgba(248, 244, 237, 0.18);
  color: var(--nav-fg);
}

.nav.is-solid {
  background: var(--bg);
  border-bottom-color: var(--stone-300);
  height: 76px;
  --nav-fg:        var(--navy-500);
  --nav-fg-muted:  var(--text-body);
  --nav-divider:   var(--stone-300);
}

.nav-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
}

/* Subtle navy fade behind the transparent navbar — keeps light text readable
   regardless of what's on the hero. Disappears on the solid state. */
.nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(12, 26, 48, 0.45) 0%,
    rgba(12, 26, 48, 0.18) 60%,
    rgba(12, 26, 48, 0) 100%
  );
  opacity: 1;
  transition: opacity .25s ease;
}
.nav.is-solid::before { opacity: 0; }

.nav-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--nav-fg);
  white-space: nowrap;
}
.nav-brand em {
  font-style: normal;
  font-weight: 400;
  color: inherit;
}

/* von Basum logo — three variants toggled by html[data-logo].
   All use fill/color: currentColor so they inherit --nav-fg (off-white over
   the hero, primary colour on the solid navbar). */
.nav-brand--logo { display: inline-flex; align-items: center; }
/* von Basum logo — full-colour brand PNGs. Over the transparent hero nav the
   logo is rendered as a pure-white silhouette (so it reads on the video); once
   the nav goes solid on scroll the filter is dropped and the original brand
   colours appear. */
.nav-logo-img {
  display: none;
  width: auto;
  filter: brightness(0) invert(1);   /* pure white over hero / video */
  transition: filter .25s ease;
}
.nav.is-solid .nav-logo-img { filter: none; }   /* full brand colour when solid */
html[data-logo="mark"] .nav-logo--mark { display: block; }
html[data-logo="quer"] .nav-logo--quer { display: block; }
html[data-logo="solo"] .nav-logo--solo { display: block; }

/* Monogramm-Lockup (B + von Basum als ein Bild) — weiß über Hero, Farbe wenn solid */
html[data-logo="monogram"] .nav-logo--monogram { display: block; }

/* Monogramm + Switzer-Wortmarke: Bildmarke + tweakbarer Text */
.nav-logo-lockup { display: none; align-items: center; gap: 11px; }
html[data-logo="monogramword"] .nav-logo--monogramword { display: inline-flex; }
.nav-logo-markimg {
  height: 42px;
  width: auto;
  filter: brightness(0) invert(1);   /* weiß über Hero */
  transition: filter .25s ease;
}
.nav.is-solid .nav-logo-markimg { filter: none; }
.nav-logo-switzertext {
  font-family: var(--font-display);   /* Switzer — folgt dem Font-Tweak */
  font-weight: 600;
  font-size: 25px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--nav-fg);
}

/* per-variant heights */
.nav-logo--quer { height: 40px; }   /* horizontal lockup */
.nav-logo--mark { height: 60px; }   /* stacked lockup (icon over wordmark) */
.nav-logo--solo { height: 50px; }   /* symbol only */
.nav-logo--monogram { height: 52px; }   /* B + von Basum lockup */

@media (max-width: 920px) {
  .nav-logo--quer { height: 34px; }
  .nav-logo--mark { height: 50px; }
  .nav-logo--solo { height: 44px; }
  .nav-logo--monogram { height: 44px; }
  .nav-logo-markimg { height: 36px; }
  .nav-logo-switzertext { font-size: 21px; }
}

/* Nav links cluster */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}
.nav-link, .nav-trigger {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--nav-fg);
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px 2px;
  position: relative;
  transition: color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-link:hover, .nav-trigger:hover { color: var(--accent-hover); }

/* Underline-on-hover micro detail */
.nav-link::after, .nav-trigger::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-link:hover::after, .nav-trigger:hover::after { transform: scaleX(1); }

/* Dropdown */
.nav-item {
  position: relative;
}
.nav-trigger .caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
  margin-left: 4px;
}
.nav-item:hover .nav-trigger .caret,
.nav-item:focus-within .nav-trigger .caret {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 720px;
  padding: 28px 32px 32px;
  background: var(--bg);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-container);
  box-shadow: 0 12px 32px rgba(12,26,48,0.10);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

/* Compact dropdown variant — single column, narrow */
.nav-dropdown.nav-dropdown--compact {
  width: auto;
  min-width: 220px;
  padding: 16px 0;
}
.nav-dropdown--compact .nav-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.nav-dropdown--compact .nav-dropdown-list a {
  display: block;
  padding: 8px 24px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy-500);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color .15s ease, background .15s ease;
}
.nav-dropdown--compact .nav-dropdown-list a:hover {
  color: var(--accent-hover);
  background: var(--stone-100);
}
.nav-dropdown--compact .nav-dropdown-list a.is-current {
  color: var(--cognac-500);
}

/* Bridge the gap so hover doesn't drop */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}

.nav-dropdown-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
}
.nav-dropdown-col .col-label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin: 0 0 16px 0;
}
.nav-dropdown-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown-col a {
  display: block;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--text-dark);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav-dropdown-col a:hover {
  color: var(--accent-hover);
}

.nav-dropdown-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--stone-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-dropdown-foot .hint {
  font-size: 13px;
  color: var(--text-muted);
}

/* CTA in navbar */
.nav-cta {
  margin-left: 16px;
  padding: 11px 18px;
  font-size: 14px;
}
.nav:not(.is-solid) .nav-cta {
  background: var(--bg);
  color: var(--navy-500);
  border-color: var(--bg);
}
.nav:not(.is-solid) .nav-cta:hover {
  background: var(--white);
  color: var(--navy-hover);
}

/* Mobile burger */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 40px; height: 40px;
  cursor: pointer;
  margin-left: auto;
  position: relative;
  color: var(--nav-fg);
}
.nav-burger::before, .nav-burger::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.nav-burger::before { top: 14px; }
.nav-burger::after  { top: 22px; }
.nav.is-menu-open .nav-burger::before { top: 18px; transform: rotate(45deg); }
.nav.is-menu-open .nav-burger::after  { top: 18px; transform: rotate(-45deg); }

@media (max-width: 920px) {
  .nav-inner { padding: 0 20px; gap: 16px; }
  .nav-burger { display: block; }
  .nav-links {
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px 20px 24px;
    border-bottom: 1px solid var(--stone-300);
    transform: translateY(-110%);
    transition: transform .25s ease;
  }
  .nav.is-menu-open .nav-links { transform: translateY(0); }
  .nav-links .nav-link,
  .nav-links .nav-trigger {
    color: var(--navy-500);
    padding: 14px 0;
    border-bottom: 1px solid var(--stone-300);
    width: 100%;
    justify-content: flex-start;
  }
  .nav-link::after, .nav-trigger::after { display: none; }
  .nav-dropdown {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    padding: 8px 0 16px;
    background: transparent;
  }
  .nav-dropdown-grid { grid-template-columns: 1fr; gap: 20px; }
  .nav-cta { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-900);  /* fallback before poster loads */
  isolation: isolate;
}

.hero-media,
.hero-media-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  background: var(--navy-900);
}
.hero-media-img {
  /* fallback img for mobile (no autoplay video) */
  display: none;
}
@media (max-width: 768px) {
  .hero-media { display: none; }
  .hero-media-img { display: block; }
}

/* Navy gradient overlay — stronger bottom-left, fading to transparent top-right */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to top right,
      rgba(12, 26, 48, 0.78) 0%,
      rgba(12, 26, 48, 0.62) 35%,
      rgba(12, 26, 48, 0.40) 65%,
      rgba(12, 26, 48, 0.25) 100%
    ),
    linear-gradient(
      to top,
      rgba(12, 26, 48, 0.45) 0%,
      rgba(12, 26, 48, 0.15) 60%,
      rgba(12, 26, 48, 0.05) 100%
    );
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 140px 32px 120px;
}
.hero-inner {
  max-width: 920px;
  color: var(--bg);
  transform: translateY(7vh);
}

.hero-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  opacity: 0.85;
  margin: 0 0 28px;
  line-height: 1;
}
.hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cognac-500);
}

.hero h1 {
  color: var(--bg);
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: 0.006em;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  margin: 0 0 24px;
  text-wrap: balance;
}

.hero-sub {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--bg);
  opacity: 0.88;
  margin: 0 0 40px;
  max-width: 52ch;
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Hero buttons override defaults for dark background */
.hero-cta .btn-primary {
  background: var(--cognac-500);
  color: var(--bg);
  border-color: var(--cognac-500);
}
.hero-cta .btn-primary:hover {
  background: var(--accent-hover);
  color: var(--bg);
  border-color: var(--accent-hover);
}
.hero-cta .btn-secondary {
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
}
.hero-cta .btn-secondary:hover {
  background: rgba(248, 244, 237, 0.10);
  color: var(--bg);
  border-color: var(--bg);
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity .2s ease;
}
.hero-scroll:hover { opacity: 1; }
.hero-scroll .chev {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: hero-scroll-bob 2.2s ease-in-out infinite;
}
@keyframes hero-scroll-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

@media (max-width: 768px) {
  .hero { min-height: 100svh; }
  .hero-content { padding: 120px 20px 100px; }
  .hero-cta .btn { padding: 13px 18px; font-size: 14.5px; }
  .hero-scroll { bottom: 20px; }
}


/* =========================================================
   SHARED · eyebrow with cognac rule (matches hero treatment)
   ========================================================= */
.eyebrow-rule {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cognac-500);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.eyebrow-rule::before,
.eyebrow-rule.is-centered::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cognac-500);
}
.eyebrow-rule.is-centered::before { display: inline-block; }


/* =========================================================
   INTRO — two-column positioning + value strip + § glyph
   ========================================================= */
.intro {
  background: var(--bg);
  padding: 72px 0 var(--section-py);
  position: relative;
  overflow: hidden;        /* contain the § decoration */
}

.intro-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* Decorative paragraph glyph — barely visible, behind the text */
.intro-glyph {
  position: absolute;
  top: 50%;
  right: -2%;
  transform: translateY(-52%);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(320px, 42vw, 620px);
  line-height: 0.85;
  color: var(--stone-100);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  /* a hair more recessive than stone-100 alone */
  opacity: 0.85;
}

/* Centred, stacked copy area */
.intro-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  max-width: 760px;
  margin: 0 auto;
}
.intro-stack .eyebrow-rule { margin: 0; }
.intro-stack h2 {
  margin: 0;
  text-wrap: balance;
}
.intro-prose {
  max-width: 620px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-body);
}
.intro-prose p { margin: 0 0 22px; text-wrap: pretty; }
.intro-prose p:last-child { margin-bottom: 0; }

/* Value strip — 4 inline points, thin Stone dividers, no boxes */
.intro-values {
  margin-top: 72px;
  padding: 20px 0 0;
  border-top: 1px solid var(--stone-300);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
}
.intro-value {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 28px;
  border-left: 1px solid var(--stone-300);
  min-height: 44px;
}
.intro-value:first-child {
  border-left: 0;
  padding-left: 0;
}
.intro-value-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--cognac-500);
  display: block;
}
.intro-value-label {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy-500);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

@media (max-width: 900px) {
  .intro-stack { gap: 24px; }
  .intro-values {
    grid-template-columns: 1fr 1fr;
    margin-top: 56px;
    padding-top: 36px;
  }
  .intro-value:nth-child(odd) { border-left: 0; padding-left: 0; }
  .intro-value { padding: 12px 20px; }
  .intro-glyph { font-size: clamp(220px, 60vw, 380px); right: -10%; }
}


/* =========================================================
   TARGET-AUDIENCE SPLIT — two equal columns
   ========================================================= */
.split {
  background: var(--stone-100);
  padding: var(--section-py) 0;
}
.split-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.split-head {
  text-align: center;
  margin: 0 auto 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.split-head .eyebrow-rule { margin-bottom: 24px; }
.split-head h2 {
  max-width: 18ch;
  margin: 0;
  text-wrap: balance;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.split-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
}
.split-card:hover {
  border-color: #B9B3A6;     /* slightly stronger Stone */
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(12, 26, 48, 0.07);
}
.split-card:hover .split-card-img img {
  transform: scale(1.02);
}
.split-card-img {
  overflow: hidden;
  background: var(--stone-100);
  /* Inherit the card radius so the top corners follow the card's curve
     and there's no flat-vs-rounded mismatch with the body below. */
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.split-card-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;             /* sharp by design */
  transition: transform .5s ease;
}
.split-card-body {
  padding: 32px 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.split-card-body h3 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 28px);
}
.split-card-body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
}
.split-card-body .btn {
  margin-top: auto;       /* push to bottom — button row aligns across cards */
  align-self: flex-start;
}

@media (max-width: 820px) {
  .split-grid { grid-template-columns: 1fr; gap: 24px; }
  .split-inner { padding: 0 20px; }
  .split-head { margin-bottom: 44px; }
  .split-card-body { padding: 24px 24px 28px; }
}
/* =========================================================
   SERVICES — 3 featured + 6 compact (hierarchic, short)
   ========================================================= */
.services {
  background: var(--bg);
  padding: 96px 0 88px;
}
.services-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.services-head {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 48px;
}
.services-head-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.services-head-left h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.services-head-right {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 44ch;
  padding-bottom: 14px;
}

/* 3 big featured cards */
.svc-featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px 28px;
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 3px;
  background: var(--cognac-500);
}
.svc-card:hover {
  transform: translateY(-2px);
  border-color: #B9B3A6;
  box-shadow: 0 10px 28px rgba(12,26,48,0.06);
}
.svc-card-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30px;
  color: var(--cognac-500);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.svc-card-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.svc-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0;
  text-wrap: balance;
}
.svc-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 42ch;
}
.svc-card-cta {
  margin-top: auto;
  padding-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cognac-500);
  transition: gap .15s ease, color .15s ease;
}
.svc-card:hover .svc-card-cta { gap: 12px; color: var(--accent-hover); }

/* 6 compact text items — 2 rows x 3 cols */
.svc-more {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.svc-more li {
  border-top: 1px solid var(--stone-300);
}
.svc-more li:nth-last-child(-n+3) {
  border-bottom: 1px solid var(--stone-300);
}
.svc-more li a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 24px 22px 0;
  text-decoration: none;
  color: inherit;
  transition: padding .2s ease;
  border-right: 1px solid var(--stone-300);
}
.svc-more li:nth-child(3n) a { border-right: 0; padding-right: 0; }
.svc-more li:nth-child(3n+1) a { padding-left: 0; }
.svc-more li:not(:nth-child(3n+1)) a { padding-left: 24px; }
.svc-more li a:hover { padding-left: 32px; }
.svc-more li:nth-child(3n+1) a:hover { padding-left: 8px; }
.svc-more li a:hover .svc-more-title { color: var(--accent-hover); }
.svc-more li a:hover .svc-more-arrow { transform: translateX(4px); color: var(--accent-hover); }
.svc-more-cat {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.svc-more-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  transition: color .15s ease;
}
.svc-more-arrow {
  font-size: 16px;
  color: var(--cognac-500);
  transition: transform .15s ease, color .15s ease;
}

.services-foot {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.services-foot .btn {
  border-radius: 999px;
  padding: 14px 26px;
}

@media (max-width: 960px) {
  .services-head { grid-template-columns: 1fr; gap: 24px; align-items: start; margin-bottom: 32px; }
  .svc-featured { grid-template-columns: 1fr; }
  .svc-more { grid-template-columns: 1fr; }
  .svc-more li a { border-right: 0; padding: 18px 0; grid-template-columns: 100px 1fr auto; }
  .svc-more li:nth-child(3n) a { padding-right: 0; }
  .svc-more li:not(:nth-child(3n+1)) a { padding-left: 0; }
  .svc-more li a:hover { padding-left: 8px; }
}


/* =========================================================
   ABOUT + TEAM — large image, dark anchor section
   ========================================================= */
.about {
  background: var(--navy-900);
  color: var(--bg);
  position: relative;
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 720px;
}
.about-image {
  position: relative;
  overflow: hidden;
  background: var(--navy-700);
}
.about-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.about-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(12,26,48,0) 0%,
    rgba(12,26,48,0) 75%,
    rgba(12,26,48,0.35) 100%
  );
  pointer-events: none;
}
.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 96px 72px 96px 56px;
}
.about-content .eyebrow-rule { color: var(--cognac-500); margin: 0; }
.about-content .eyebrow-rule::before,
.about-content .eyebrow-rule::after { background: var(--cognac-500); }
.about-content h2 {
  color: var(--bg);
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  max-width: 14ch;
}
.about-prose {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(248, 244, 237, 0.82);
  max-width: 48ch;
}
.about-prose p { margin: 0 0 18px; text-wrap: pretty; }
.about-prose p:last-child { margin: 0; }
.about-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.about-buttons .btn-primary {
  background: var(--bg);
  color: var(--navy-500);
}
.about-buttons .btn-primary:hover {
  background: var(--white);
  color: var(--navy-hover);
}
.about-buttons .btn-secondary {
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
}
.about-buttons .btn-secondary:hover {
  background: rgba(248,244,237,0.10);
}

@media (max-width: 1024px) {
  .about-content { padding: 96px 56px 96px 48px; }
}
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; min-height: 0; }
  .about-image img { aspect-ratio: 4/3; height: auto; }
  .about-content { padding: 64px 24px 80px; gap: 24px; }
}


/* =========================================================
   VALUES — 2×2 editorial grid with huge cognac numerals
   ========================================================= */
.values {
  background: var(--bg);
  padding: 96px 0;
}
.values-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.values-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.values-head-left { display: flex; flex-direction: column; gap: 18px; }
.values-head-left .eyebrow-rule { margin: 0; }
.values-head-left h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.values-head-right {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 44ch;
  padding-bottom: 10px;
}

.values-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--stone-300);
}
.values-cell {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  padding: 48px 40px 48px 0;
  border-right: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  align-items: start;
}
.values-cell:nth-child(2n) {
  padding: 48px 0 48px 40px;
  border-right: 0;
}
.values-cell:nth-last-child(-n+2) { border-bottom: 0; }

.values-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 6vw, 88px);
  color: var(--cognac-500);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin: 0;
  padding-top: 4px;
}
.values-text { display: flex; flex-direction: column; gap: 12px; }
.values-text h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0;
}
.values-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

@media (max-width: 880px) {
  .values-head { grid-template-columns: 1fr; gap: 20px; }
  .values-grid { grid-template-columns: 1fr; }
  .values-cell, .values-cell:nth-child(2n) {
    padding: 36px 0;
    border-right: 0;
    border-bottom: 1px solid var(--stone-300);
    gap: 20px;
  }
  .values-cell:last-child { border-bottom: 0; }
  .values-num { font-size: 56px; }
}


/* =========================================================
   TRUST — asymmetric: bold left, points + logos right
   ========================================================= */
.trust {
  background: var(--stone-100);
  padding: 96px 0;
}
.trust-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: start;
}
.trust-left { display: flex; flex-direction: column; gap: 24px; }
.trust-left .eyebrow-rule { margin: 0; }
.trust-left h2 {
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--navy-500);
  margin: 0;
  text-wrap: balance;
}
.trust-statement {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  max-width: 48ch;
}
.trust-datev {
  margin-top: 16px;
  padding: 28px 32px;
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-container);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.trust-datev-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}
.trust-datev-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 38px;
  color: var(--navy-500);
  margin: 4px 0 6px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.trust-datev-tag {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
  max-width: 40ch;
}

.trust-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 8px;
}
.trust-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.trust-point {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: start;
}
.trust-check {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--cognac-500);
}
.trust-point h4 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.005em;
  color: var(--navy-500);
}
.trust-point p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 44ch;
}

.trust-logos {
  padding-top: 28px;
  border-top: 1px solid var(--stone-300);
}
.trust-logos-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.trust-logos-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.trust-logo {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text-muted);
  background: repeating-linear-gradient(
    135deg,
    rgba(27,54,93,0.04) 0px,
    rgba(27,54,93,0.04) 10px,
    rgba(27,54,93,0.07) 10px,
    rgba(27,54,93,0.07) 20px
  );
  text-transform: uppercase;
  padding: 0 10px;
}

@media (max-width: 880px) {
  .trust { padding: 96px 0; }
  .trust-grid { grid-template-columns: 1fr; gap: 48px; }
  .trust-logos-row { grid-template-columns: 1fr 1fr; }
}


/* =========================================================
   FINAL CTA — Cognac 500, the accent has its moment
   ========================================================= */
.cta {
  background: var(--cognac-500);
  color: var(--bg);
  padding: 96px 0;
  text-align: center;
}
.cta-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.cta .eyebrow-rule {
  color: var(--bg);
  margin: 0 0 4px;
}
.cta .eyebrow-rule::before,
.cta .eyebrow-rule::after { background: rgba(248,244,237,0.65); }
.cta h2 {
  color: var(--bg);
  margin: 0;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.cta-sub {
  font-size: 19px;
  line-height: 1.55;
  color: rgba(248,244,237,0.94);
  max-width: 56ch;
  margin: 0;
}
.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
.cta-buttons .btn-primary {
  background: var(--bg);
  color: var(--navy-500);
}
.cta-buttons .btn-primary:hover {
  background: var(--white);
  color: var(--navy-hover);
}
.cta-buttons .btn-secondary {
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
}
.cta-buttons .btn-secondary:hover {
  background: rgba(248,244,237,0.12);
}
@media (max-width: 720px) {
  .cta { padding: 96px 0; }
}


/* =========================================================
   FOOTER — Navy 900
   ========================================================= */
.foot {
  background: var(--navy-900);
  color: var(--bg);
  padding-top: 80px;
}
.foot-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 0.82fr 1.28fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(248,244,237,0.14);
}
.foot-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin: 0 0 16px;
}
.foot-brand-claim {
  color: rgba(248,244,237,0.62);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  max-width: 32ch;
}
.foot-logo-img {
  display: none;
  width: auto;
  filter: brightness(0) invert(1);   /* white wordmark on dark footer */
}
html[data-logo="quer"] .foot-logo--quer { display: block; }
html[data-logo="mark"] .foot-logo--mark { display: block; }
html[data-logo="solo"] .foot-logo--solo { display: block; }
html[data-logo="monogram"] .foot-logo--monogram { display: block; }
.foot-logo--monogram { height: 58px; margin: 0 0 18px; }
.foot-logo-lockup { display: none; align-items: center; gap: 12px; margin: 0 0 18px; }
html[data-logo="monogramword"] .foot-logo--monogramword { display: inline-flex; }
.foot-logo-markimg { height: 46px; width: auto; filter: brightness(0) invert(1); }
.foot-logo-switzertext {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--bg);
}
.foot-logo--quer { height: 42px; margin: 0 0 18px; }
.foot-logo--mark { height: 64px; margin: 0 0 18px; }
.foot-logo--solo { height: 54px; margin: 0 0 18px; }
@media (max-width: 540px) {
  .foot-logo--quer { height: 36px; }
  .foot-logo--mark { height: 56px; }
  .foot-logo--solo { height: 48px; }
}
.foot-motto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7em;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  font-weight: 500;
  color: rgba(248,244,237,0.78);
}
.foot-social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  opacity: 0.9;
  transition: opacity .15s ease, transform .15s ease;
}
.foot-social a:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.foot-social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.foot-motto .sep {
  color: var(--cognac-500);
}
.foot-col h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,244,237,0.62);
  margin: 0 0 18px;
}
.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-col li a,
.foot-contact a {
  color: var(--bg);
  font-size: 14.5px;
  text-decoration: none;
  transition: color .15s ease;
}
.foot-col li a:hover,
.foot-contact a:hover { color: var(--accent-hover); }
.foot-contact {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
.foot-contact-line { color: rgba(248,244,237,0.82); }
.foot-contact-line strong { color: var(--bg); font-weight: 500; }
.foot-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 28px;
  font-size: 13px;
  color: rgba(248,244,237,0.55);
  flex-wrap: wrap;
  gap: 12px;
}
.foot-bot-links { display: flex; gap: 24px; }
.foot-bot-links a { color: inherit; text-decoration: none; }
.foot-bot-links a:hover { color: var(--accent-hover); }

@media (max-width: 880px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 48px; }
  .foot { padding-top: 56px; }
}
@media (max-width: 540px) {
  .foot-top { grid-template-columns: 1fr; }
  .foot-bot { flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   SPLIT — editorial overrides (no card chrome, link CTA)
   ========================================================= */
.split-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.split-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
.split-card-img {
  border-radius: 0;
}
.split-card-img img {
  border-radius: 0;
  aspect-ratio: 3 / 2;
}
.split-card-body {
  padding: 24px 0 0;
}
.split-card-body h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -0.01em;
}
.split-card-body .btn {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--cognac-500) !important;
  font-weight: 500;
  margin-top: 4px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.split-card-body .btn::after {
  content: "→";
  transition: transform .15s ease;
}
.split-card:hover .split-card-body .btn { color: var(--accent-hover) !important; }
.split-card:hover .split-card-body .btn::after { transform: translateX(4px); }


/* =========================================================
   ABOUT — meta tag + editorial founder quote
   ========================================================= */
.about-image { position: relative; }
.about-meta {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: var(--cognac-500);
  color: var(--bg);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 0;
  z-index: 1;
}
.about-quote {
  position: relative;
  margin: 0;
  padding: 22px 0 22px 28px;
  border-left: 2px solid var(--cognac-500);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about-quote-mark {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.6;
  color: var(--cognac-500);
  margin: 0 0 -8px -4px;
}
.about-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--bg);
  letter-spacing: -0.005em;
  max-width: 36ch;
}
.about-quote footer {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(248,244,237,0.72);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.about-quote-name {
  color: var(--bg);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.about-quote-role {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--cognac-500);
}


/* =========================================================
   PILL BUTTON helper (SaaS shape on Wolfgang base)
   ========================================================= */
.btn-pill {
  border-radius: 999px;
  padding: 13px 22px;
}

/* =========================================================
   SERVICES — SaaS-clean 3×3 card grid
   ========================================================= */
.services {
  background: var(--bg);
  padding: 104px 0 96px;
}
.services-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.services-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 56px;
}
.services-head .eyebrow-rule { margin: 0; }
.services-head h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--navy-500);
}
.services-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 52ch;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.svc-tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 28px 24px 26px;
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svc-tile:hover {
  transform: translateY(-2px);
  border-color: #B9B3A6;
  box-shadow: 0 10px 24px rgba(12,26,48,0.05);
}
.svc-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(181, 85, 46, 0.10);
  color: var(--cognac-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.svc-icon svg { width: 18px; height: 18px; }
.svc-tile:hover .svc-icon {
  background: var(--accent-hover);
  color: var(--bg);
}
.svc-cat {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin-bottom: 2px;
}
.svc-tile h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0;
  text-wrap: balance;
  transition: color .15s ease;
}
.svc-tile p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.svc-arrow {
  align-self: end;
  font-size: 16px;
  color: var(--cognac-500);
  transition: transform .2s ease, color .15s ease;
  margin-top: 4px;
}
.svc-tile:hover .svc-arrow { transform: translateX(4px); color: var(--accent-hover); }
.svc-tile:hover h3 { color: var(--accent-hover); }

.services-foot {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

@media (max-width: 960px) {
  .services { padding: 80px 0; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   VALUES — clean 4-col feature row (SaaS-style)
   ========================================================= */
.values {
  background: var(--stone-100);
  padding: 80px 0;
}
.values-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.values-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 48px;
}
.values-head .eyebrow-rule { margin: 0; }
.values-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--navy-500);
}

.values-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.values-cell {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
}
.values-cell .svc-icon {
  margin-bottom: 6px;
}
.values-cell h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0;
}
.values-cell p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-body);
}

@media (max-width: 880px) {
  .values-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}
@media (max-width: 540px) {
  .values-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ABOUT — keep dark anchor, drop the quote, pill buttons
   ========================================================= */
.about-content h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; }
.about-buttons .btn-pill { padding: 13px 22px; }

/* =========================================================
   CTA — pill buttons, tighter padding
   ========================================================= */
.cta { padding: 88px 0; }
.cta h2 { font-size: clamp(36px, 4.4vw, 60px); }
.cta-buttons .btn { border-radius: 999px; padding: 13px 24px; }


/* =========================================================
   ABOUT — remove dark gradient overlay (no meta badge anymore)
   ========================================================= */
.about-image::after { display: none !important; }
.about-content {
  padding: 88px 64px 88px 56px;
  gap: 22px;
}
.about-content h2 {
  font-size: clamp(36px, 4.2vw, 56px);
  line-height: 1.05;
  margin: 0;
  max-width: 15ch;
}

/* =========================================================
   VALUES — editorial manifesto on Off-White (breaks the
   Stone-on-Stone monotony before Trust)
   ========================================================= */
.values {
  background: var(--bg);
  padding: 96px 0;
}
.values-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.values-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: start;
}
.values-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 120px; }
.values-side .eyebrow-rule { margin: 0; }
.values-side h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy-500);
  text-wrap: balance;
}
.values-side-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 36ch;
  margin: 0;
}
.values-list {
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  position: relative;
  display: flex;
  flex-direction: column;
}
/* vertical connector running through the number badges (timeline feel) */
.values-list::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 56px;
  width: 1px;
  background: var(--stone-300);
  z-index: 0;
}
.values-list li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 30px;
  padding: 0 0 44px;
  align-items: start;
}
.values-list li:last-child { padding-bottom: 0; }
.values-no {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--cognac-500);
  border-radius: 2px;
  background: var(--bg);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--cognac-500);
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background .35s ease, color .35s ease, transform .35s ease;
}
.values-list li:hover .values-no {
  background: var(--cognac-500);
  color: var(--bg);
  transform: scale(1.06);
}
.values-list .values-body { padding-top: 12px; }
.values-list h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0 0 8px;
}
.values-list p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 46ch;
}
/* parallax: the points column drifts gently against the pinned headline */
.values-list { transform: translateY(var(--vy, 0px)); will-change: transform; }
/* per-item scroll reveal (driven by Startseite inline script) */
.values-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.values-reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .values-reveal { opacity: 1; transform: none; transition: none; }
  .values-list { transform: none; }
}
@media (max-width: 880px) {
  .values { padding: 72px 0; }
  .values-grid { grid-template-columns: 1fr; gap: 36px; }
  .values-side { position: static; }
  .values-list { margin-top: 40px; }
  .values-list::before { left: 23px; }
  .values-list li { grid-template-columns: 48px 1fr; gap: 20px; padding-bottom: 32px; }
  .values-no { width: 48px; height: 48px; font-size: 17px; }
  .values-list .values-body { padding-top: 8px; }
}

/* =========================================================
   TRUST — minimal, asymmetric, no DATEV card box
   ========================================================= */
.trust {
  background: var(--stone-100);
  padding: 96px 0;
}
.trust-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.trust-head {
  max-width: 760px;
  margin: 0 0 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.trust-head > .brand-stroke { margin: 0 0 8px; }
.trust-head > .eyebrow-rule { margin: 0 0 10px; }
.trust-head > h2 { margin: 0; }
.trust-head .eyebrow-rule { margin: 0; }
.trust-head h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--navy-500);
  text-wrap: balance;
}

.trust-list {
  list-style: none;
  padding: 0;
  margin: 0 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
}
.trust-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--stone-300);
}
.trust-no {
  font-family: var(--font-body);
  color: var(--cognac-500);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}
.trust-list h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0 0 6px;
}
.trust-list p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 44ch;
}

.trust-logos {
  padding-top: 32px;
  border-top: 1px solid var(--stone-300);
}
.trust-logos-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
  text-align: center;
}
.trust-logos-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.trust-logo {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text-muted);
  background: repeating-linear-gradient(
    135deg,
    rgba(27,54,93,0.04) 0px,
    rgba(27,54,93,0.04) 10px,
    rgba(27,54,93,0.07) 10px,
    rgba(27,54,93,0.07) 20px
  );
  text-transform: uppercase;
  padding: 0 10px;
}
@media (max-width: 880px) {
  .trust { padding: 72px 0; }
  .trust-list { grid-template-columns: 1fr; gap: 0; }
  .trust-logos-row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Tighter overall rhythm
   ========================================================= */
.services { padding: 88px 0 80px; }
.services-head { margin: 0 auto 40px; }
.cta { padding: 80px 0; }


/* =========================================================
   INTRO — tighter bottom (less air to next section)
   ========================================================= */
.intro {
  padding: 72px 0 48px;
}

/* =========================================================
   STATEMENT — editorial serif quote, Stone 100, § watermark
   Sits between Intro and Services for tonal break + personality
   ========================================================= */
.statement {
  background: var(--stone-100);
  padding: 96px 0 104px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.statement-glyph {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(280px, 32vw, 480px);
  line-height: 0.7;
  color: rgba(27, 54, 93, 0.05);
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.statement-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.statement-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.statement-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  text-transform: uppercase;
  text-wrap: balance;
}
.statement-title em {
  font-style: normal;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.statement-rule {
  display: block;
  width: 60px;
  height: 1px;
  background: var(--cognac-500);
  opacity: 0.7;
  margin: 4px 0;
}
.statement-prose {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 640px;
}
.statement-prose p { margin: 0 0 18px; }
.statement-prose p:last-child { margin: 0; }

@media (max-width: 720px) {
  .statement { padding: 72px 0 80px; }
  .statement-title { text-transform: none; font-size: 30px; line-height: 1.15; }
}

/* =========================================================
   TEAM — Navy anchor, portrait cards
   ========================================================= */
.team {
  background: var(--navy-900);
  color: var(--bg);
  padding: 104px 0 96px;
}

/* =========================================================
   PERSÖNLICH — dunkler Editorial-Block (ersetzt Team-Galerie)
   ========================================================= */
.personal {
  position: relative;
  isolation: isolate;
  background: var(--navy-500);
  color: var(--bg);
  padding: 92px 0;
  overflow: hidden;
}
.personal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,0,0,0.18), transparent 60%);
}
.personal-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 92px;
  align-items: start;
}
.personal-figure {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--navy-700);
  margin: 0;
}
.personal-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  transition: transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
  will-change: transform;
}
.personal-figure:hover img { transform: scale(1.05); }

.personal-content { max-width: 52ch; display: flex; flex-direction: column; }
.personal-content > .brand-stroke { background: var(--cognac-500); margin: 0 0 8px; }
.personal .eyebrow-rule {
  color: var(--cognac-500);
  margin: 0 0 18px;
}
.personal .eyebrow-rule::before,
.personal .eyebrow-rule::after { background: var(--cognac-500); }
.personal-quote-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 92px;
  line-height: 0.4;
  color: var(--cognac-500);
  margin: 0 0 14px;
  display: block;
}
.personal-quote-mark--inline {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--cognac-500);
  font-size: 1.05em;
  line-height: 0;
  margin-left: 0;
  vertical-align: baseline;
}
.personal-quote-mark--inline.pqm-open {
  margin-left: 0;
  margin-right: 0;
  vertical-align: baseline;
}
.personal-quote {
  font-family: var(--font-h1);
  font-weight: 500;
  font-size: clamp(27px, 2.6vw, 40px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.personal-quote em { font-style: italic; color: var(--cognac-500); }
.personal-foot {
  display: flex;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(248,244,237,0.16);
}
.personal-sign {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.personal-sign .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--bg);
  white-space: nowrap;
}
.personal-sign .role {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(248,244,237,0.70);
  white-space: nowrap;
}
.personal .btn-secondary {
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
  flex-shrink: 0;
}
.personal .btn-secondary:hover { background: rgba(248,244,237,0.10); }

@media (max-width: 860px) {
  .personal { padding: 80px 0; }
  .personal-inner { grid-template-columns: 1fr; gap: 38px; }
  .personal-figure { max-width: 340px; }
  .personal-quote-mark { font-size: 76px; }
}
@media (max-width: 540px) {
  .personal-foot { flex-direction: column; align-items: flex-start; gap: 22px; }
  .personal-sign { align-items: flex-start; text-align: left; }
}
.team-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.team-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.team-head-left { display: flex; flex-direction: column; gap: 0; }
.team-head-left > .brand-stroke { margin: 0 0 8px; }
.team-head-left > .eyebrow-rule { margin: 0 0 10px; }
.team-head-left > h2 { margin: 0; }
.team-head-left .eyebrow-rule { color: var(--cognac-500); }
.team-head-left .eyebrow-rule::before,
.team-head-left .eyebrow-rule::after { background: var(--cognac-500); }
.team-head-left h2 {
  margin: 0;
  color: var(--bg);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 16ch;
}
.team-head-right {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(248,244,237,0.78);
  margin: 0;
  max-width: 44ch;
  padding-bottom: 8px;
}

.team-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(248,244,237,0.04);
  border: 1px solid rgba(248,244,237,0.10);
  border-radius: var(--r-card);
  padding: 18px 18px 22px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.team-card:hover {
  background: rgba(248,244,237,0.07);
  border-color: rgba(248,244,237,0.18);
  transform: translateY(-2px);
}
.team-portrait {
  aspect-ratio: 4 / 5;
  border-radius: 0;       /* sharp by brand */
  background:
    radial-gradient(circle at 50% 38%, rgba(248,244,237,0.10) 0%, transparent 60%),
    repeating-linear-gradient(
      135deg,
      rgba(248,244,237,0.05) 0px,
      rgba(248,244,237,0.05) 10px,
      rgba(248,244,237,0.09) 10px,
      rgba(248,244,237,0.09) 20px
    );
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-portrait::after {
  content: attr(data-initial);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 76px;
  color: var(--cognac-500);
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0.85;
}
.team-card h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: var(--bg);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.team-role {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(248,244,237,0.62);
  letter-spacing: 0.005em;
}
.team-foot {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}
.team-foot .btn-secondary {
  background: transparent;
  border-color: var(--bg);
  color: var(--bg);
}
.team-foot .btn-secondary:hover {
  background: rgba(248,244,237,0.10);
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .team { padding: 80px 0; }
  .team-head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .team-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
}



/* =========================================================
   BRAND STROKE — der Cognac-Strich als CI-Element
   24px (entspricht 24mm Designspec), 1px (1pt), Cognac 500,
   12–14px (4–6mm) Abstand zur Headline.
   Standalone, NICHT mit Eyebrow gekoppelt. Inline-block,
   damit er sich wie ein eigenes Element verhält.
   ========================================================= */
.brand-stroke {
  display: block;
  width: 36px;
  height: 3px;
  background: var(--cognac-500);
  margin: 0 0 14px 0;
  padding: 0;
  border: 0;
  flex-shrink: 0;
}
.brand-stroke.is-centered { margin-left: auto; margin-right: auto; }
.brand-stroke.is-on-dark { background: var(--cognac-500); }

/* On dark backgrounds, the stroke gets a touch more weight */
.section-navy .brand-stroke,
.cta .brand-stroke,
.about .brand-stroke,
.team .brand-stroke {
  background: var(--cognac-500);
}

/* =========================================================
   SUB-PAGE HERO — schlanker als Homepage-Hero
   Navy 900 Hintergrund, Cognac-Strich, Wordmark-Headline.
   ========================================================= */
.sub-hero {
  position: relative;
  background: var(--navy-900);
  color: var(--bg);
  padding: 188px 0 96px;
  overflow: hidden;
  isolation: isolate;
}
.sub-hero::before {
  /* Decorative paragraph (§) watermark — off by default, shown via tweak */
  content: none;
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-48%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(280px, 36vw, 520px);
  line-height: 0.8;
  color: rgba(248, 244, 237, 0.05);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
/* Tweak: show the § watermark only when toggled on */
html[data-paragraph="on"] .sub-hero::before { content: "\00a7"; }
.sub-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
}
.sub-hero-stack { display: flex; flex-direction: column; gap: 0; }
.sub-hero-stack > .brand-stroke { margin: 0 0 8px; width: 36px; }
.sub-hero-stack > .sub-hero-eyebrow { margin: 0 0 10px; }
.sub-hero-stack > h1 { margin: 0; }
.sub-hero-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.sub-hero h1 {
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}
/* Seiten ohne Lead-Spalte: H1 nutzt volle Breite → ausgewogener 2-Zeiler */
.sub-hero-inner:not(:has(.sub-hero-lead)) { grid-template-columns: 1fr; }
.sub-hero-inner:not(:has(.sub-hero-lead)) .sub-hero-stack h1 { max-width: 32ch; }
.sub-hero-lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(248, 244, 237, 0.82);
  max-width: 52ch;
  padding-bottom: 6px;
  text-wrap: pretty;
}
.sub-hero-crumbs {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-w);
  padding: 0 32px;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0;
  color: rgba(248, 244, 237, 0.72);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.sub-hero-crumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.sub-hero-crumbs a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.sub-hero-crumbs .sep {
  display: inline-block;
  opacity: 0.65;
  font-weight: 400;
}
.sub-hero-crumbs .current {
  color: var(--bg);
  font-weight: 700;
}

@media (max-width: 880px) {
  .sub-hero { padding: 148px 0 72px; }
  .sub-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .sub-hero-crumbs { top: 84px; }
}

/* =========================================================
   PAGE-PROSE — for Über uns / Karriere / longform sections
   ========================================================= */
.page-prose {
  background: var(--bg);
  padding: 96px 0;
}
.page-prose-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  align-items: start;
}
.page-prose-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.page-prose-aside > .brand-stroke { margin: 0 0 8px; }
.page-prose-aside > .eyebrow-rule { margin: 0 0 10px; }
.page-prose-aside > h2 { margin: 0; }
.page-prose-aside h2 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-prose-body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 64ch;
}
.page-prose-body p { margin: 0 0 22px; text-wrap: pretty; }
.page-prose-body p:last-child { margin: 0; }
.page-prose-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--navy-500);
  margin: 36px 0 12px;
  letter-spacing: -0.005em;
}
.page-prose-body h3 + p { margin-top: 0; }
.page-prose-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.page-prose-body ul li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 10px;
}
.page-prose-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 1px;
  background: var(--cognac-500);
}
@media (max-width: 880px) {
  .page-prose { padding: 72px 0; }
  .page-prose-inner { grid-template-columns: 1fr; gap: 32px; }
  .page-prose-aside { position: static; }
}

/* Imaged variant: image left, heading + body stacked right */
.page-prose--imaged .page-prose-inner {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
}
.page-prose-figure {
  margin: 0;
  width: 100%;
  max-width: 460px;
  align-self: center;
  justify-self: center;
}
.page-prose-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
.page-prose--imaged .page-prose-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.page-prose--imaged .page-prose-aside {
  position: static;
  top: auto;
}
.page-prose--imaged .page-prose-aside h2 {
  font-size: clamp(40px, 4.8vw, 64px);
}
@media (max-width: 880px) {
  .page-prose--imaged .page-prose-inner { grid-template-columns: 1fr; gap: 28px; }
  .page-prose-figure { max-width: 380px; }
  .page-prose-figure img { aspect-ratio: 1 / 1; }
}

/* Wide-figure variant: larger image column (first Über-uns section) */
.page-prose--wide-figure .page-prose-inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}

/* Flip variant: image right instead of left */
.page-prose--flip .page-prose-inner {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
}
.page-prose--flip .page-prose-figure {
  order: 2;
}
.page-prose--flip .page-prose-right {
  order: 1;
}

/* Stone background variant */
.page-prose--stone { background: var(--stone-100); }

/* In-prose CTA cluster */
.page-prose-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* =========================================================
   SERVICE-DETAIL · Umfang / Zielgruppe / Prozess / FAQ
   ========================================================= */
.svc-umfang {
  background: var(--bg);
  padding: 96px 0;
}
.svc-umfang-inner,
.svc-zielgruppe-inner,
.svc-prozess-inner,
.svc-faq-inner,
.svc-crosslinks-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.svc-section-head {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 760px;
  margin: 0 0 48px;
}
.svc-section-head h2 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--navy-500);
  text-wrap: balance;
}
.svc-section-head p:not(.eyebrow-rule) {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 56ch;
}
.svc-section-head > .brand-stroke { margin: 0 0 8px; width: 36px; }
.svc-section-head > .eyebrow-rule { margin: 0 0 10px; }
.svc-section-head > h2 { margin: 0 0 14px; }
.svc-section-head > p { margin: 0; }

/* Umfang-Intro einzeilig halten (Desktop) */
.svc-umfang .svc-section-head p:not(.eyebrow-rule) {
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .svc-umfang .svc-section-head p:not(.eyebrow-rule) { white-space: normal; }
}

/* Umfang — 2-column list with strokes */
.svc-umfang-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  border-top: 1px solid var(--stone-300);
}
.svc-umfang-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--stone-300);
  align-items: start;
}
.svc-umfang-list li .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--cognac-500);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.svc-umfang-list li h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0 0 6px;
}
.svc-umfang-list li p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 44ch;
}
@media (max-width: 880px) {
  .svc-umfang-list { grid-template-columns: 1fr; gap: 0; }
}

/* Zielgruppe — Stone band, simple 3-up */
.svc-zielgruppe {
  background: var(--stone-100);
  padding: 96px 0;
}
.svc-zielgruppe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--stone-300);
}
.svc-zielgruppe-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--stone-300);
  border-radius: 0;
  padding: 36px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.svc-zielgruppe-card:first-child { padding-left: 0; }
.svc-zielgruppe-card:last-child { border-right: 0; padding-right: 0; }
.svc-zielgruppe-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-500);
  flex-shrink: 0;
}
.svc-zielgruppe-icon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc-zielgruppe-content { display: flex; flex-direction: column; gap: 8px; }
.svc-zielgruppe-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--navy-500);
}
.svc-zielgruppe-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}
@media (max-width: 900px) {
  .svc-zielgruppe-grid { grid-template-columns: 1fr 1fr; }
  .svc-zielgruppe-card { border-right: 0; padding: 32px 40px; }
  .svc-zielgruppe-card:nth-child(odd) { border-right: 1px solid var(--stone-300); padding-left: 0; }
  .svc-zielgruppe-card:nth-child(even) { padding-right: 0; }
}
@media (max-width: 540px) {
  .svc-zielgruppe-grid { grid-template-columns: 1fr; }
  .svc-zielgruppe-card,
  .svc-zielgruppe-card:nth-child(odd) { border-right: 0; padding: 28px 0; gap: 16px; }
}

/* Prozess — Navy anchor with stepped list */
.svc-prozess {
  background: var(--navy-900);
  color: var(--bg);
  padding: 104px 0;
}
.svc-prozess .svc-section-head h2 { color: var(--bg); }
.svc-prozess .svc-section-head p:not(.eyebrow-rule) { color: rgba(248,244,237,0.78); }
.svc-prozess-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
.svc-prozess-step {
  padding-top: 24px;
  border-top: 1px solid rgba(248,244,237,0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-increment: step;
}
.svc-prozess-step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--cognac-500);
  margin-bottom: 4px;
}
.svc-prozess-step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--bg);
  margin: 0;
}
.svc-prozess-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(248,244,237,0.78);
  margin: 0;
}
@media (max-width: 880px) {
  .svc-prozess-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svc-prozess-steps { grid-template-columns: 1fr; }
}

/* FAQ */
.svc-faq {
  background: var(--bg);
  padding: 96px 0;
}
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--stone-300);
}
.faq-item {
  border-bottom: 1px solid var(--stone-300);
}
.faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 4px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  list-style: none;
  transition: color .15s ease;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--accent-hover); }
.faq-icon {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--cognac-500);
  border-radius: 1px;
}
.faq-icon::before { top: 7.5px; left: 0; right: 0; height: 1px; }
.faq-icon::after { left: 7.5px; top: 0; bottom: 0; width: 1px; transition: transform .2s ease; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-body {
  padding: 0 60px 26px 4px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 70ch;
}
.faq-body p { margin: 0 0 12px; }
.faq-body p:last-child { margin: 0; }
@media (max-width: 720px) {
  .faq-summary { font-size: 17px; }
  .faq-body { padding-right: 12px; }
}

/* Cross-links — sister services */
.svc-crosslinks {
  background: var(--stone-100);
  padding: 96px 0;
}
.svc-crosslinks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.svc-crosslink {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px;
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-card);
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svc-crosslink:hover {
  transform: translateY(-2px);
  border-color: #B9B3A6;
  box-shadow: 0 10px 24px rgba(12,26,48,0.05);
}
.svc-crosslink-cat {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.svc-crosslink h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0;
}
.svc-crosslink-cta {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cognac-500);
}
.svc-crosslink-arrow {
  display: inline-block;
  color: var(--cognac-500);
  font-size: 16px;
  transition: transform .15s ease;
}
.svc-crosslink:hover .svc-crosslink-arrow { transform: translateX(4px); }
@media (max-width: 880px) {
  .svc-crosslinks-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   CONTACT page
   ========================================================= */
.contact {
  background: var(--bg);
  padding: 96px 0;
}
.contact-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--white);
  border: var(--hairline);
  border-radius: var(--r-container);
  padding: 36px;
}
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  padding: 12px 14px;
  border: 1px solid var(--stone-300);
  border-radius: var(--r-input);
  background: var(--bg);
  transition: border-color .15s ease, background .15s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--navy-500);
  background: var(--white);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form .submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.contact-form .privacy-note {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 36ch;
  line-height: 1.5;
  margin: 0;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-info-block { display: flex; flex-direction: column; gap: 8px; }
.contact-info-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  margin: 0;
}
.contact-info-block p,
.contact-info-block a {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-body);
  text-decoration: none;
}
.contact-info-block a:hover { color: var(--accent-hover); }
.contact-map {
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(27,54,93,0.04) 0px,
      rgba(27,54,93,0.04) 14px,
      rgba(27,54,93,0.07) 14px,
      rgba(27,54,93,0.07) 28px
    ),
    var(--stone-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: var(--hairline);
}
@media (max-width: 880px) {
  .contact-inner { grid-template-columns: 1fr; gap: 40px; }
  .contact-form { padding: 28px; }
  .contact-form .field-row { grid-template-columns: 1fr; }
}

/* =========================================================
   LEISTUNGEN OVERVIEW — grouped categories
   ========================================================= */
.leistungen-page { background: var(--bg); padding: 96px 0; }
.leistungen-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.leistungen-group { display: flex; flex-direction: column; gap: 24px; }
.leistungen-group-head {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--stone-300);
}
.leistungen-group-head .label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin: 0;
}
.leistungen-group-head h2 {
  margin: 8px 0 0;
  font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.01em;
}
.leistungen-group-head .lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 48ch;
  padding-bottom: 4px;
}
.leistungen-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.leistungen-group-grid > a { /* reuse .svc-tile via class */ }
@media (max-width: 880px) {
  .leistungen-group-head { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .leistungen-group-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   LEGAL pages — minimal text container
   ========================================================= */
.legal-page {
  background: var(--bg);
  padding: 96px 0;
}
.legal-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
}
.legal-inner h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--navy-500);
  margin: 40px 0 12px;
  letter-spacing: -0.005em;
}
.legal-inner h2:first-of-type { margin-top: 0; }
.legal-inner p { margin: 0 0 14px; }
.legal-inner ul {
  margin: 0 0 16px;
  padding-left: 18px;
}
.legal-inner ul li { margin: 0 0 6px; }


/* =========================================================
   BRAND STROKE × EYEBROW — when stroke precedes an eyebrow,
   hide the eyebrow's inline dashes (avoid double dash)
   ========================================================= */
.brand-stroke + .eyebrow-rule::before,
.brand-stroke + .eyebrow-rule.is-centered::after { display: none !important; }
.brand-stroke + .eyebrow-rule { gap: 0; }

/* Brand stroke on dark sections — uses cognac as-is, just heavier presence */
.section-navy .brand-stroke,
.team .brand-stroke,
.svc-prozess .brand-stroke,
.sub-hero .brand-stroke,
.about .brand-stroke {
  width: 36px;
}

/* =========================================================
   TRUST MARQUEE — silent, slow-moving partner band
   ========================================================= */
.trust-marquee {
  margin-top: 24px;
  padding: 28px 0 4px;
  border-top: 1px solid var(--stone-300);
  overflow: hidden;
  position: relative;
}
.trust-marquee-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 20px;
}
.trust-marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: trust-scroll 48s linear infinite;
  width: max-content;
}
.trust-marquee:hover .trust-marquee-track { animation-play-state: paused; }
.trust-marquee-item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--text-muted);
  white-space: nowrap;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.trust-marquee-item::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cognac-500);
  opacity: 0.6;
}
.trust-marquee-item:last-child::after { display: none; }
@keyframes trust-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track { animation: none; }
}

/* =========================================================
   STARTSEITE — feinere Anpassungen
   ========================================================= */

/* Intro: kleineres § glyph, sanftere Präsenz */
.intro-glyph {
  font-size: clamp(220px, 28vw, 360px) !important;
  color: rgba(27, 54, 93, 0.04) !important;
  opacity: 1 !important;
  right: -6% !important;
}

/* Statement: tone down watermark, keep editorial weight */
.statement-glyph {
  color: rgba(27, 54, 93, 0.035);
  font-size: clamp(220px, 26vw, 380px);
}
.statement {
  padding: 96px 0;
}
.statement-title {
  text-transform: none;
  font-size: clamp(34px, 3.8vw, 50px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.1;
}
.statement-title em {
  font-style: normal;
  color: inherit;
}
.statement-rule { display: none; }

/* Services head: more breathing room, smaller eyebrow */
.services { padding: 104px 0 96px; }
.services-head { margin: 0 auto 56px; }

/* Intro values strip — slightly more refined */
.intro-values {
  margin-top: 64px;
  padding-top: 28px;
}
.intro-value-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Final CTA — calmer feel, brand-stroke ready */
.cta {
  background: var(--navy-900);
  color: var(--bg);
}
.cta::before {
  content: "§";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(280px, 32vw, 460px);
  line-height: 0.7;
  color: rgba(248, 244, 237, 0.025);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cta { position: relative; overflow: hidden; }
.cta-inner { position: relative; z-index: 1; }
.cta .eyebrow-rule { color: rgba(248, 244, 237, 0.78); }
.cta .eyebrow-rule::before,
.cta .eyebrow-rule::after { background: rgba(248, 244, 237, 0.5); }
.cta .brand-stroke { background: var(--cognac-500); }
.cta-buttons .btn-primary {
  background: var(--cognac-500);
  color: var(--bg);
  border-color: var(--cognac-500);
}
.cta-buttons .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.cta-buttons .btn-secondary {
  background: transparent;
  border-color: rgba(248, 244, 237, 0.45);
  color: var(--bg);
}
.cta-buttons .btn-secondary:hover {
  border-color: var(--bg);
  background: rgba(248, 244, 237, 0.08);
}


/* When brand-stroke precedes .hero-eyebrow, hide eyebrow's inline dash */
.brand-stroke + .hero-eyebrow::before { display: none; }
.hero-eyebrow--plain { gap: 0; padding-left: 0; }
.hero-eyebrow--motto {
  color: var(--cognac-500);
  opacity: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em;
}
.hero-eyebrow--motto .sep { opacity: 0.7; }
.hero-eyebrow--sub { margin: 4px 0 30px; }
.hero .hero-eyebrow--sub { margin: 4px 0 30px; }
.hero .hero-eyebrow--sub::before {
  content: none;
}
.hero-eyebrow--sub .eyebrow-line {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--cognac-500);
  flex: none;
}
.hero .brand-stroke {
  background: var(--cognac-500);
  margin-bottom: 8px;
  width: 36px;
}

/* Refined hero h1 spacing */
.hero h1 { margin: -0.22em 0 22px; }
.hero-eyebrow--plain { margin-bottom: 6px; }


/* =========================================================
   MODERN PASS · Startseite Refresh
   - Dark sections → Navy 500 (echtes Blau statt Schwarz)
   - Mittiger Text → asymmetrische, redaktionelle Layouts
   - Strichelemente bewusster eingesetzt
   ========================================================= */

/* ---- Dark sections become blue ---- */
.team,
.cta,
.sub-hero,
.svc-prozess {
  background: var(--navy-500);
}

/* Footer bleibt etwas tiefer für Hierarchie */
.foot {
  background: var(--navy-700);
}

/* Hairline on dark blue is a touch lighter than on near-black */
.team-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.team-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}
.team-portrait {
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,0.10) 0%, transparent 60%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 10px,
      rgba(255,255,255,0.09) 10px,
      rgba(255,255,255,0.09) 20px
    );
}

/* Subtle texture so the blue isn't flat */
.team, .cta, .sub-hero, .svc-prozess { position: relative; isolation: isolate; }
.team::after, .cta::after, .sub-hero::after, .svc-prozess::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(255,255,255,0.07), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,0,0,0.18), transparent 60%);
}
.team-inner, .cta-inner, .sub-hero-inner, .svc-prozess-inner { position: relative; z-index: 1; }

/* CTA "§" watermark looks too heavy on the lighter blue — soften */
.cta::before { color: rgba(255, 255, 255, 0.05); }


/* =========================================================
   INTRO · von zentriert → asymmetrisch
   Linke Spalte: stroke + eyebrow + headline
   Rechte Spalte: prose
   ========================================================= */
.intro {
  padding: 96px 0 72px;
}
.intro-stack {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0 80px;
  align-items: stretch;
  text-align: left;
  max-width: none;
  margin: 0;
}
.intro-stack > .intro-image { grid-column: 1; grid-row: 1; overflow: hidden; background: var(--white); position: relative; }
.intro-stack > .intro-image img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.intro-stack > .intro-content {
  grid-column: 2; grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro-stack > .intro-content > .intro-prose > .btn { align-self: flex-start; margin: 0; }
.intro-stack > .intro-content > .intro-head { display: flex; flex-direction: column; }
.intro-stack > .intro-content > .intro-head > .brand-stroke { margin: 0 0 8px; }
.intro-stack > .intro-content > .intro-head > .eyebrow-rule { margin: 0 0 10px; }
.intro-stack > .intro-content > .intro-head > h2 { margin: 0; font-size: clamp(34px, 4.1vw, 54px); letter-spacing: -0.02em; line-height: 1.06; max-width: 16ch; }
.intro-stack > .intro-content > .brand-stroke,
.intro-stack > .intro-content > .eyebrow-rule,
.intro-stack > .intro-content > h2 { /* legacy direct-child rules, no longer used */ }
.intro-stack > .intro-content > .intro-prose { margin-top: 26px; max-width: 50ch; display: flex; flex-direction: column; gap: 18px; padding: 0; }
.intro-stack > .intro-content > .intro-prose > p { margin: 0; line-height: 1.72; }
.intro-stack > .intro-content > .intro-prose > .btn { align-self: flex-start; margin: 14px 0 0; }
@media (max-width: 880px) {
  .intro-stack { grid-template-columns: 1fr; gap: 24px; }
  .intro-stack > .intro-image img { min-height: 280px; }
  .intro-stack > .intro-content > h2 { max-width: none; }
}
.intro-stack .brand-stroke.is-centered {
  margin-left: 0;
  margin-right: 0;
}
.intro-stack .eyebrow-rule.is-centered::after { display: none; }
.intro-stack .eyebrow-rule.is-centered { gap: 14px; }
.intro-stack h2 {
  margin: 0;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
  max-width: 14ch;
}
.intro-prose {
  max-width: 48ch;
  margin: 0;
  padding-top: 6px;
}
.intro-glyph {
  font-size: clamp(180px, 22vw, 320px) !important;
  right: -8% !important;
  top: 42% !important;
}
@media (max-width: 880px) {
  .intro-stack { grid-template-columns: 1fr; gap: 24px; }
  .intro-stack h2 { max-width: none; }
}


/* =========================================================
   STATEMENT · von "centered uppercase" → links, editorial
   ========================================================= */
.statement {
  text-align: left;
  padding: 96px 0 88px;
}
.statement-inner {
  align-items: start;
  max-width: var(--max-w);
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0 80px;
}
.statement-inner > .brand-stroke,
.statement-inner > .statement-eyebrow,
.statement-inner > .statement-title {
  grid-column: 1;
}
.statement-inner > .brand-stroke.is-centered { margin: 0 0 14px; }
.statement-eyebrow { text-align: left; }
.statement-title {
  text-transform: none;
  text-align: left;
  margin: 0;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  max-width: none;
}
.statement-title em {
  font-style: normal;
  color: inherit;
  letter-spacing: inherit;
}
.statement-rule { display: none; }
.statement-prose {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: end;
  margin: 0;
  max-width: 48ch;
  padding-bottom: 4px;
}
.statement-glyph {
  left: auto;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(220px, 26vw, 380px);
  color: rgba(27, 54, 93, 0.04);
}
@media (max-width: 880px) {
  .statement { padding: 72px 0; }
  .statement-inner { grid-template-columns: 1fr; gap: 24px; }
  .statement-prose { grid-column: 1; grid-row: auto; align-self: start; }
  .statement-title { max-width: none; font-size: 32px; }
}


/* =========================================================
   SERVICES HEAD · von zentriert → asymmetrisch
   ========================================================= */
.services { padding: 104px 0 96px; }
.services-head {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0 80px;
  align-items: end;
  text-align: left;
  max-width: none;
  margin: 0 0 52px;
}
.services-head > .brand-stroke,
.services-head > .eyebrow-rule,
.services-head > h2 {
  grid-column: 1;
}
.services-head .brand-stroke.is-centered { margin: 0 0 8px; }
.services-head .eyebrow-rule::after { display: none; }
.services-head h2 {
  margin: 0;
  grid-column: 1 / -1;
  font-size: clamp(38px, 4.6vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: nowrap;
  white-space: nowrap;
  max-width: none;
}
.services-lead {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  padding-bottom: 0;
  margin: 0;
  max-width: 42ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
}
@media (max-width: 880px) {
  .services-head { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .services-head h2 { max-width: none; white-space: normal; text-wrap: balance; }
  .services-lead { grid-column: 1; padding-bottom: 0; }
}


/* =========================================================
   FINAL CTA · zentriert bleibt (Finale-Moment),
   aber kompakter, größer, ruhiger
   ========================================================= */
.cta { padding: 112px 0 116px; text-align: center; }
.cta-inner {
  max-width: 760px;
  align-items: center;
  gap: 22px;
}
.cta .brand-stroke.is-centered { margin: 0 auto 4px; }
.cta h2 {
  font-size: clamp(48px, 6.4vw, 96px);
  letter-spacing: -0.03em;
  line-height: 0.96;
  margin: 0;
}
.cta-sub {
  font-size: 18px;
  line-height: 1.55;
  max-width: 50ch;
  color: rgba(255, 255, 255, 0.85);
}
.cta-buttons { margin-top: 18px; }
.cta-buttons .btn-primary {
  background: var(--bg);
  color: var(--navy-500);
  border-color: var(--bg);
}
.cta-buttons .btn-primary:hover {
  background: var(--white);
  color: var(--navy-hover);
  border-color: var(--white);
}
.cta-buttons .btn-secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--bg);
}
.cta-buttons .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--bg);
  color: var(--bg);
}


/* =========================================================
   TEAM · Headline-Größe etwas modernerer
   ========================================================= */
.team-head-left h2 {
  font-size: clamp(36px, 4.2vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  max-width: 18ch;
}


/* =========================================================
   Sharp/Kantig — Bilder & Portraits ziehen mit
   (Default: Bilder bleiben kantig wie vorher.
    Kein zusätzlicher Switch nötig — der Tweak greift
    bereits auf alle Radius-Tokens.)
   ========================================================= */
html[data-corners="sharp"] .split-card-img img,
html[data-corners="sharp"] .team-portrait,
html[data-corners="sharp"] .svc-icon,
html[data-corners="sharp"] .about-image img {
  border-radius: 0;
}
html[data-corners="rounded"] .svc-icon { border-radius: 0; }
html[data-corners="sharp"]   .svc-icon { border-radius: 0; }


/* =========================================================
   SERVICES · Lined-grid (keine Kästen) + dunkler Icon-Kreis
   + "Mehr erfahren →" Text-CTA pro Kachel
   ========================================================= */
.svc-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--stone-300);
  border-left: 1px solid var(--stone-300);
}
.svc-tile {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  border-radius: 0 !important;
  padding: 44px 40px 36px;
  gap: 14px;
  grid-template-rows: auto auto auto 1fr auto;
  transition: background .2s ease;
  box-shadow: none !important;
  aspect-ratio: 1 / 1;
}
.svc-tile:hover {
  transform: none;
  background: rgba(15, 15, 15, 0.025);
  border-color: var(--stone-300);
}
.svc-icon {
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--steel-500);
  margin-bottom: 22px;
  border-radius: 0 !important;
}
.svc-icon svg { width: 32px; height: 32px; stroke-width: 1.4; color: var(--steel-500); }
.svc-tile:hover .svc-icon { background: transparent; color: var(--steel-700); }

.svc-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin-bottom: 4px;
}
.svc-tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0;
}
.svc-tile p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 38ch;
}
.svc-arrow {
  align-self: start;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy-500);
  margin-top: 24px;
  transition: gap .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.svc-tile:hover .svc-arrow { color: var(--navy-hover); transform: none; }
.svc-tile:hover h3 { color: var(--text-dark); }

@media (max-width: 960px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-tile { aspect-ratio: auto; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-tile { padding: 32px 24px 28px; aspect-ratio: auto; }
}

/* Footer-Button bewusst dem Corner-Tweak unterworfen */
.services-foot .btn {
  border-radius: var(--r-button);
  padding: 14px 26px;
}
.services-foot .btn span[aria-hidden="true"] { margin-left: 6px; }


/* =========================================================
   STATEMENT · Bild links statt Zitat
   ========================================================= */
.statement-inner > .statement-image {
  width: 100%;
  align-self: center;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.statement-inner > .statement-image .img-placeholder,
.statement-inner > .statement-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  object-fit: cover;
  display: block;
}
@media (max-width: 880px) {
  .statement-inner > .statement-image .img-placeholder,
  .statement-inner > .statement-image img { min-height: 0; }
}

/* Pill-Button-Override: bei "Kantig" wirklich kantig */
html[data-corners="sharp"] .btn-pill,
html[data-corners="sharp"] .services-foot .btn {
  border-radius: 0;
}


/* =========================================================
   TEAM-CARDS · Editorial: kein Card-Chrome, größere Bilder,
   STEUERBERATER · GRÜNDER Label-Stil über Name
   ========================================================= */
.team-card {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  padding: 18px 18px 22px !important;
  gap: 0 !important;
  transition: border-color .25s ease, background-color .25s ease !important;
}
.team-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.40) !important;
  transform: none !important;
}
/* Light variant — used on team.html & ueber-uns.html */
.team-grid--light .team-card {
  border-color: var(--stone-300) !important;
}
.team-grid--light .team-card:hover {
  background: rgba(15, 15, 15, 0.025) !important;
  border-color: rgba(15, 15, 15, 0.20) !important;
}
.team-portrait {
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
  border: 0;
}
.team-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin: 0 0 8px;
  line-height: 1.35;
  min-height: 2.7em;     /* bis zu 2 Zeilen — alle Cards einheitlich */
}
.team-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin: 0 0 6px;
  min-height: 2.4em;     /* bis zu 2 Zeilen — Rollen-Zeile bleibt bündig */
}
.team-role {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  min-height: 3em;       /* 2-Zeiler-Höhe \u2014 alle Cards einheitlich */
}

/* Light variant (team.html, ueber-uns.html) */
.team-grid--light .team-cat { color: var(--cognac-500); }
.team-grid--light .team-card h3 { color: var(--text-dark); }
.team-grid--light .team-role { color: var(--text-muted); }
.team-grid--light .team-portrait {
  background:
    radial-gradient(circle at 50% 38%, rgba(27,54,93,0.06) 0%, transparent 60%),
    repeating-linear-gradient(135deg,
      rgba(27,54,93,0.04) 0px,
      rgba(27,54,93,0.04) 10px,
      rgba(27,54,93,0.07) 10px,
      rgba(27,54,93,0.07) 20px
    );
}


/* =========================================================
   VALUES · Bild in der Side-Spalte
   ========================================================= */
.values-side {
  position: static;
  gap: 0;
}
.values-side > .brand-stroke { margin: 0 0 8px; }
.values-side > .eyebrow-rule { margin: 0 0 10px; }
.values-side > h2 { margin: 0; }
.values-side > .values-side-lead { margin: 22px 0 0; }
.values-image {
  margin-top: 44px;
  width: 100%;
  max-width: 460px;
  overflow: hidden;
}
.values-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 880px) {
  .values-image { margin-top: 20px; max-width: 340px; }
}


/* =========================================================
   TEAM-PORTRAITS · Real photos via <img>
   ========================================================= */
.team-portrait { position: relative; overflow: hidden; }
.team-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
  z-index: 1;
}
.team-portrait:has(img)::after { display: none; }


/* =========================================================
   FEATURE-IMAGE · redaktioneller Bild-Block zwischen Sektionen
   ========================================================= */
.feature-image {
  background: var(--bg);
  padding: 0 0 var(--section-py);
}
.feature-image-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.feature-image img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.feature-image-caption {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 16px 0 0;
}
@media (max-width: 720px) {
  .feature-image img { aspect-ratio: 4 / 3; }
}


/* =========================================================
   LEISTUNGEN-PAGE · Kacheln quadratisch
   ========================================================= */
.leistungen-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--stone-300);
  border-left: 1px solid var(--stone-300);
}
.leistungen-group-grid .svc-tile {
  aspect-ratio: 1 / 1;
  padding: 40px 36px 36px;
}
@media (max-width: 960px) {
  .leistungen-group-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .leistungen-group-grid { grid-template-columns: 1fr; }
  .leistungen-group-grid .svc-tile { aspect-ratio: auto; }
}


/* =========================================================
   TRUST · Icons über jedem Punkt
   ========================================================= */
.trust-list {
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--stone-300);
}
.trust-list li {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 32px 28px 24px;
  border-bottom: 0;
  border-right: 1px solid var(--stone-300);
}
.trust-list li:last-child { border-right: 0; }
.trust-no {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--navy-500);
  margin-bottom: 22px;
  flex-shrink: 0;
}
.trust-no svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-content { display: flex; flex-direction: column; gap: 6px; }
.trust-list h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text-dark);
  margin: 0;
}
.trust-list p {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0;
  min-height: 4.5em;
}
@media (max-width: 900px) {
  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-list li { border-right: 0; }
  .trust-list li:nth-child(odd) { border-right: 1px solid var(--stone-300); }
}
@media (max-width: 540px) {
  .trust-list { grid-template-columns: 1fr; }
  .trust-list li, .trust-list li:nth-child(odd) { border-right: 0; }
}


/* =========================================================
   HOVER · subtile, moderne Übergänge auf Karten/Links
   ========================================================= */
.svc-tile, .leistungen-group-grid .svc-tile,
.team-card, .svc-zielgruppe-card, .svc-crosslink, .split-card {
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.svc-tile h3, .svc-tile p, .svc-tile .svc-cat, .svc-tile .svc-arrow {
  transition: color .25s ease, transform .25s ease;
}

/* Link-Hover */
a:not(.btn):not(.cta-link):not(.svc-tile):not(.team-card):not(.nav-link):not(.nav-brand):not(.svc-crosslink) {
  transition: color .15s ease;
}


/* =========================================================
   FADE-IN ON SCROLL · Einblendung von oben/unten
   ========================================================= */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-in[data-delay="1"] { transition-delay: 0.08s; }
.fade-in[data-delay="2"] { transition-delay: 0.16s; }
.fade-in[data-delay="3"] { transition-delay: 0.24s; }
.fade-in[data-delay="4"] { transition-delay: 0.32s; }
.fade-in[data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   FEEDBACK PASS · Engere Hierarchie + persönlichere Icons
   - Spacing Stroke → Eyebrow → Headline durchgängig enger
   - Icons mit weichen Linien (round caps), weniger generisch
   - .cta-link · Text-CTA mit Pfeil
   - Statement-Sektion gespiegelt + differenziert
   - Intro: Stroke unter den 4 Werten
   - Home-Kontaktformular ersetzt finale CTA
   ========================================================= */

/* ---- Engere Vertikalrhythmen ---- */
.brand-stroke { margin: 0 0 8px 0; }

.eyebrow-rule,
.hero-eyebrow,
.statement-eyebrow,
.sub-hero-eyebrow {
  line-height: 1;
}

.intro-stack .eyebrow-rule,
.services-head .eyebrow-rule,
.team-head-left .eyebrow-rule,
.values-side .eyebrow-rule,
.trust-head .eyebrow-rule,
.statement-eyebrow,
.sub-hero-eyebrow {
  margin-bottom: 10px;
}

/* Intro: alte Kind-Selektoren auf .intro-stack sind nach Umbau nicht mehr direkt — Regeln entfernt. */

/* Intro-Werte bekommen unten ihre Linie wie oben */
.intro-values {
  border-bottom: 1px solid var(--stone-300);
  padding-bottom: 20px;
}

/* ---- .cta-link · Text-CTA mit Pfeil ---- */
.cta-link {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--cognac-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  transition: gap .15s ease, color .15s ease;
  align-self: flex-start;
  border-bottom: 0;
}
.cta-link > .cta-text,
.cta-link::first-line { /* fallback */ }
.cta-link .cta-text {
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: border-color .15s ease;
}
.cta-link::after {
  content: "→";
  font-family: var(--font-body);
  transition: transform .15s ease;
}
.cta-link:hover { gap: 12px; color: var(--accent-hover); }
.cta-link:hover::after { transform: translateX(4px); }
.cta-link.on-dark { color: var(--bg); }
.cta-link.on-dark .cta-text { border-color: var(--bg); }
.cta-link.on-dark:hover { color: rgba(255,255,255,0.9); }

/* Fallback for cta-links without explicit .cta-text span */
.cta-link:not(:has(> .cta-text)) {
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* ---- Icons softer · runde Linien, dünner ---- */
.svc-icon svg,
.intro-value-icon,
.trust-check {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.svc-icon svg { stroke-width: 1.35; }
.intro-value-icon { stroke-width: 1.2; }


/* =========================================================
   STATEMENT · gespiegelt (Bild links, Headline rechts)
   ========================================================= */
.statement {
  background: var(--stone-100);
  border-top: 1px solid var(--stone-300);
  padding: 96px 0 96px;
}
.statement-glyph {
  left: -6%;
  right: auto;
}
.statement-inner {
  grid-template-columns: 1.05fr 1fr;
  gap: 0 80px;
  align-items: stretch;
}
.statement-inner > .statement-content { grid-column: 1; grid-row: 1; }
.statement-inner > .statement-image { grid-column: 2; grid-row: 1; }
.statement-glyph {
  left: auto;
  right: -6%;
}
.statement-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.statement-content > .brand-stroke { margin: 0 0 8px; }
.statement-content > .statement-eyebrow { margin: 0 0 10px; }
.statement-content > .statement-title { margin: 0; }
.statement-content > .btn { margin-top: 40px; align-self: flex-start; }
.foot-bot a.foot-credit {
  color: var(--bg);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.foot-bot a.foot-credit:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.statement-content > .cta-link { margin-top: 20px; }

/* Cognac primary button for intro + statement sections */
.intro-stack .btn-primary,
.statement-content .btn-primary {
  background: var(--cognac-500);
  color: var(--bg);
  border-color: var(--cognac-500);
}
.intro-stack .btn-primary:hover,
.statement-content .btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}


/* =========================================================
   KARRIERE · Warum bei uns? Split-Sektion
   ========================================================= */
.kar-why {
  background: var(--bg);
  padding: 112px 0 96px;
}
.kar-why-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 0 80px;
  align-items: start;
}
.kar-why-image {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kar-why-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--stone-100);
}
.kar-why-image-tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kar-why-content { display: flex; flex-direction: column; gap: 56px; }
.kar-why-head { display: flex; flex-direction: column; }
.kar-why-head > .brand-stroke { margin: 0 0 8px; }
.kar-why-head > .eyebrow-rule { margin: 0 0 10px; color: var(--navy-500); }
.kar-why-head > .eyebrow-rule::before,
.kar-why-head > .eyebrow-rule::after { background: var(--navy-500); }
.kar-why-head > h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--text-dark);
  font-weight: 500;
}
.kar-why-head > h2 em {
  display: block;
  font-style: italic;
  color: var(--navy-500);
  font-weight: 600;
}
.kar-why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.kar-why-list > li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--stone-300);
  align-items: baseline;
}
.kar-why-list > li:last-child { border-bottom: 1px solid var(--stone-300); }
.kar-why-no {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--cognac-500);
  padding-top: 4px;
}
.kar-why-list h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-dark);
  margin: 0 0 8px;
}
.kar-why-list p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 50ch;
}
@media (max-width: 960px) {
  .kar-why-inner { grid-template-columns: 1fr; gap: 40px; }
  .kar-why-image { position: static; }
  .kar-why-image img { aspect-ratio: 16 / 10; }
}


/* =========================================================
   KARRIERE · Stats-Strip (4 large numbers)
   ========================================================= */
.kar-stats {
  background: var(--stone-100);
  border-top: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  padding: 0;
}
.kar-stats-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.kar-stat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px 32px 56px 0;
  border-right: 1px solid var(--stone-300);
}
.kar-stat:last-child { border-right: 0; padding-right: 0; }
.kar-stat:not(:first-child) { padding-left: 32px; }
.kar-stat-no {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy-500);
}
.kar-stat-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (max-width: 880px) {
  .kar-stats-inner { grid-template-columns: 1fr 1fr; }
  .kar-stat:nth-child(2) { border-right: 0; }
  .kar-stat:nth-child(-n+2) { border-bottom: 1px solid var(--stone-300); }
  .kar-stat { padding: 32px 24px !important; }
}


/* =========================================================
   KARRIERE · Benefits (Navy "Kleine Dinge, große Wirkung")
   ========================================================= */
.kar-benefits {
  background: var(--navy-500);
  padding: 112px 0;
  position: relative;
  isolation: isolate;
}
.kar-benefits::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse 60% 60% at 0% 100%, rgba(0,0,0,0.18), transparent 60%);
}
.kar-benefits-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.kar-benefits-head { display: flex; flex-direction: column; margin: 0 0 64px; }
.kar-benefits-head > .brand-stroke { margin: 0 0 8px; }
.kar-benefits-head > .eyebrow-rule {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.75);
}
.kar-benefits-head > .eyebrow-rule::before,
.kar-benefits-head > .eyebrow-rule::after {
  background: rgba(255, 255, 255, 0.45);
}
.kar-benefits-head > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--bg);
  margin: 0;
  max-width: 16ch;
}
.kar-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.kar-benefit {
  padding: 36px 28px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.kar-benefit:nth-child(4n) { border-right: 0; }
.kar-benefit-icon {
  width: 32px;
  height: 32px;
  color: var(--bg);
  display: inline-flex;
  margin-bottom: 18px;
}
.kar-benefit-icon svg { width: 32px; height: 32px; }
.kar-benefit-no {
  position: absolute;
  top: 32px;
  right: 24px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
}
.kar-benefit h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin: 0;
}
.kar-benefit p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 40ch;
}
@media (max-width: 1024px) {
  .kar-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .kar-benefit:nth-child(4n) { border-right: 1px solid rgba(255, 255, 255, 0.18); }
  .kar-benefit:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .kar-benefits-grid { grid-template-columns: 1fr; }
  .kar-benefit { border-right: 0 !important; }
}


/* =========================================================
   KARRIERE · Offene Stellen
   ========================================================= */
.kar-jobs {
  background: var(--bg);
  padding: 112px 0;
}
.kar-jobs-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.kar-jobs-head { display: flex; flex-direction: column; margin: 0 0 56px; max-width: 720px; }
.kar-jobs-head > .brand-stroke { margin: 0 0 8px; }
.kar-jobs-head > .eyebrow-rule { margin: 0 0 10px; }
.kar-jobs-head > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--text-dark);
  margin: 0 0 24px;
}
.kar-jobs-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  margin: 0;
  max-width: 55ch;
}
.kar-jobs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--stone-300);
}
.kar-job {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 36px 0;
  border-bottom: 1px solid var(--stone-300);
  transition: background-color .25s ease;
}
.kar-job:hover { background: rgba(15, 15, 15, 0.025); }
.kar-job-no {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--cognac-500);
  align-self: start;
  padding-top: 12px;
}
.kar-job-body { display: flex; flex-direction: column; gap: 10px; }
.kar-job-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.015em;
  color: var(--text-dark);
  margin: 0;
}
.kar-job-meta {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0;
}
.kar-job-tags {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kar-job-tags li {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-500);
  padding: 5px 10px;
  border: 1px solid var(--stone-300);
  background: var(--stone-100);
}
.kar-job .btn {
  white-space: nowrap;
  padding: 12px 22px;
  font-size: 14px;
}
.kar-job .btn:hover { background: var(--navy-hover); color: var(--bg); border-color: var(--navy-hover); }

.kar-jobs-foot {
  margin: 32px 0 0;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}
.kar-jobs-foot a {
  color: var(--cognac-500);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.kar-jobs-foot a:hover { color: var(--accent-hover); }

@media (max-width: 760px) {
  .kar-job { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .kar-job-no { padding-top: 0; }
  .kar-job .btn { align-self: flex-start; }
}

/* Eyebrow rule on dark BG */
.eyebrow-rule.on-dark { color: rgba(255, 255, 255, 0.75); }
.eyebrow-rule.on-dark::before,
.eyebrow-rule.on-dark::after { background: rgba(255, 255, 255, 0.45); }

@media (max-width: 880px) {
  .statement-inner { grid-template-columns: 1fr; gap: 24px; }
  .statement-content { gap: 0; }
}


/* =========================================================
   HOME-CONTACT · weißes Kontakt-Formular vor dem Footer
   (ersetzt den finalen "Sprechen wir"-CTA-Block)
   ========================================================= */
/* =========================================================
   LOGO STRIP — Mitgliedschaften & Auszeichnungen
   Static row between Haltung and Leistungen
   ========================================================= */
.logo-strip {
  background: var(--bg);
  border-top: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  padding: 56px 0;
}
.logo-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.logo-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 12px;
}
.logo-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 4px 2px;
  opacity: 0.85;
  filter: saturate(0.95);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.logo-item:hover { opacity: 1; filter: saturate(1); }
.logo-item img {
  max-width: 100%;
  max-height: 84px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* DATEV "Digitale Kanzlei"-Siegel laufen ein bisschen kleiner */
.logo-item--datev img { max-height: 70px; }

@media (max-width: 1100px) {
  .logo-strip-row { gap: 24px 16px; }
  .logo-item { flex-basis: 18%; }
}
@media (max-width: 640px) {
  .logo-strip { padding: 32px 0; }
  .logo-strip-row { gap: 20px 14px; }
  .logo-item { flex-basis: 28%; }
  .logo-item img { max-height: 56px; }
}

/* =========================================================
   HOME-CONTACT — Kontaktformular vor dem Footer
   ========================================================= */
.home-contact {
  background: var(--white);
  border-top: 1px solid var(--stone-300);
  padding: 104px 0 112px;
}
.home-contact-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0 80px;
  align-items: start;
}
.home-contact-head {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 100px;
}
.home-contact-head .brand-stroke { margin-bottom: 8px; }
.home-contact-head .eyebrow-rule { margin: 0 0 10px; }
.home-contact-head h2 {
  margin: 0;
  font-size: clamp(40px, 4.8vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.0;
  color: var(--navy-500);
  max-width: 12ch;
}
.home-contact-lead {
  margin: 22px 0 28px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 38ch;
}
.home-contact-direct {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 16px;
  margin-top: auto;
}
.home-contact-direct a {
  color: var(--navy-500);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}
.home-contact-direct a:hover {
  color: var(--accent-hover);
  border-bottom-color: var(--accent-hover);
}
.home-contact-direct a::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--cognac-500);
}
.home-contact-meta {
  margin-top: 32px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
  border-top: 1px solid var(--stone-300);
  padding-top: 20px;
}

/* Form on Startseite — kompakter als Kontakt-Seite */
.home-contact-form {
  background: var(--bg);
  border: 1px solid var(--stone-300);
  border-radius: var(--r-container);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.home-contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.home-contact-form label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.home-contact-form input,
.home-contact-form textarea,
.home-contact-form select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-dark);
  padding: 12px 14px;
  border: 1px solid var(--stone-300);
  border-radius: var(--r-input);
  background: var(--white);
  transition: border-color .15s ease;
}
.home-contact-form input:focus,
.home-contact-form textarea:focus,
.home-contact-form select:focus {
  outline: none;
  border-color: var(--navy-500);
}
.home-contact-form textarea { min-height: 110px; resize: vertical; }
.home-contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.home-contact-form .submit-row {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.form-status {
  margin: 14px 0 0;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid;
}
.form-status--ok {
  color: var(--navy-500);
  border-color: var(--navy-500);
  background: rgba(27,54,93,0.05);
}
.form-status--error {
  color: var(--cognac-500);
  border-color: var(--cognac-500);
  background: rgba(197,111,62,0.06);
}
.form-status--error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.home-contact-form .privacy-note {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 36ch;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 880px) {
  .home-contact { padding: 80px 0; }
  .home-contact-inner { grid-template-columns: 1fr; gap: 36px; }
  .home-contact-head { position: static; }
  .home-contact-form { padding: 28px; }
  .home-contact-form .field-row { grid-template-columns: 1fr; }
}


/* =========================================================
   TEAM-Page · Kacheln gleich groß über alle Gruppen
   ========================================================= */
.team-grid--light {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 1024px) {
  .team-grid--light { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 720px) {
  .team-grid--light { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .team-grid--light { grid-template-columns: 1fr !important; }
}



/* =========================================================
   TYPE WEIGHTS — Stable across font swaps & components:
   H2–H6 → active sans SemiBold (600) · Body Regular (400).
   H1 → its own family (--font-h1; Cormorant Garamond Medium by
   default). Enforced at the end so per-component overrides can't drift.
   (Italic <em> accents inside headings keep their own style.)
   ========================================================= */
h3, h4, h5, h6,
.h3, .h4 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}
h1, h2, .h1, .h2 {
  font-family: var(--font-h1) !important;
  font-weight: 600 !important;
}
html[data-display="garamond"] h1, html[data-display="garamond"] h2,
html[data-display="garamond"] .h1, html[data-display="garamond"] .h2 {
  font-weight: 600 !important;
}
body, p, li, td, th { font-weight: 400; }


/* =========================================================
   KONTAKT-WIZARD — Multi-Step im Wolfgang-Stil
   Navy-Karten-Center, Stone-Hintergrund, Chips & Optionen.
   ========================================================= */
.kontakt-wizard {
  background: var(--stone-100);
  padding: 96px 0 120px;
}
.kontakt-wizard-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 20px;
  align-items: stretch;
}

/* Linke Info-/Bild-Spalte */
.kontakt-info {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1.5px solid var(--navy-500);
}
.kontakt-info-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.kontakt-info-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.32;
}
.kontakt-info::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(12,26,48,0.70) 0%, rgba(12,26,48,0.88) 58%, rgba(12,26,48,0.96) 100%);
}
.kontakt-info-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 44px 40px;
  margin-top: auto;
}
.kontakt-info-head { display: flex; flex-direction: column; }
.kontakt-info-head > .brand-stroke { margin: 0 0 14px; }
.kontakt-info-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248,244,237,0.72);
}
.kontakt-info-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--bg);
  max-width: 14ch;
}
.kontakt-info-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kontakt-info-item { display: flex; flex-direction: column; gap: 5px; }
.kontakt-info-item .label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.kontakt-info-item p,
.kontakt-info-item a {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(248,244,237,0.92);
  text-decoration: none;
  width: fit-content;
}
.kontakt-info-item a {
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.kontakt-info-item a:hover { color: var(--bg); border-bottom-color: rgba(248,244,237,0.6); }

@media (max-width: 1024px) {
  .kontakt-info { min-height: 0; }
  .kontakt-info-body { margin-top: 0; padding: 40px; }
}

/* The centred, navy-framed card */
.kontakt-card {
  background: var(--bg);
  color: var(--navy-500);
  border: 1.5px solid var(--navy-500);
  padding: 48px 48px 0;
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}
.kontakt-card-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 32px;
}
.kontakt-card-step[hidden] { display: none; }

.kontakt-step-head { display: flex; flex-direction: column; gap: 12px; }
.kontakt-step-head > .brand-stroke { margin: 0; }
.kontakt-step-eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.kontakt-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--navy-500);
  margin: 0;
  text-wrap: balance;
}

/* Two big intro cards for "Sie sind?" */
.kontakt-options--cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.kontakt-option-card {
  appearance: none;
  background: var(--bg);
  border: 1px solid rgba(27,54,93,0.22);
  color: var(--navy-500);
  padding: 28px 24px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font: inherit;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.kontakt-option-card:hover {
  background: rgba(27,54,93,0.04);
  border-color: rgba(27,54,93,0.5);
}
.kontakt-option-card.is-active {
  background: rgba(27,54,93,0.05);
  border-color: var(--navy-500);
  box-shadow: inset 0 0 0 1px var(--navy-500);
}
.kontakt-option-card-ico {
  width: 36px; height: 36px;
  color: var(--cognac-500);
}
.kontakt-option-card-ico svg { width: 36px; height: 36px; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-option-card-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--navy-500);
}
.kontakt-option-card-sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Stacked single-choice options (Worum geht es etc.) */
.kontakt-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kontakt-option {
  appearance: none;
  background: var(--bg);
  border: 1px solid rgba(27,54,93,0.22);
  color: var(--navy-500);
  padding: 16px 22px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: background .15s ease, border-color .15s ease;
}
.kontakt-option:hover { background: rgba(27,54,93,0.04); border-color: rgba(27,54,93,0.5); }
.kontakt-option.is-active { background: var(--navy-500); border-color: var(--navy-500); color: var(--bg); }

.kontakt-option--inline { display: inline-flex; }
.kontakt-options:has(.kontakt-option--inline) { flex-direction: row; gap: 10px; flex-wrap: wrap; }
.kontakt-option--inline { min-width: 96px; justify-content: center; text-align: center; }

/* Multi-select chips */
.kontakt-field-group { display: flex; flex-direction: column; gap: 10px; }
.kontakt-field-label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kontakt-field-label .req { color: var(--cognac-500); font-weight: 600; }
.kontakt-field-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 6px;
}
.kontakt-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.kontakt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.kontakt-chip {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(27,54,93,0.28);
  color: var(--navy-500);
  padding: 9px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.kontakt-chip:hover { background: rgba(27,54,93,0.05); border-color: rgba(27,54,93,0.55); }
.kontakt-chip.is-active {
  background: var(--navy-500);
  border-color: var(--navy-500);
  color: var(--bg);
}

/* Inputs (text, email, tel, currency) */
.kontakt-input-wrap { position: relative; }
.kontakt-input-prefix {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.kontakt-input-wrap .kontakt-input { padding-left: 32px; }
.kontakt-input,
.kontakt-textarea,
.kontakt-select {
  appearance: none;
  background: var(--bg);
  border: 1px solid rgba(27,54,93,0.28);
  color: var(--navy-500);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 13px 16px;
  width: 100%;
  border-radius: 0;
  transition: background .15s ease, border-color .15s ease;
  font-weight: 400;
}
.kontakt-input::placeholder,
.kontakt-textarea::placeholder { color: var(--text-muted); }
.kontakt-input:focus,
.kontakt-textarea:focus,
.kontakt-select:focus {
  outline: none;
  border-color: var(--navy-500);
  background: rgba(27,54,93,0.03);
}
.kontakt-textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.kontakt-select { background-image: linear-gradient(45deg, transparent 50%, rgba(27,54,93,0.6) 50%), linear-gradient(135deg, rgba(27,54,93,0.6) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; }

.kontakt-privacy {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.kontakt-privacy a {
  color: var(--cognac-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Card footer: Zurück | Progress | Weiter */
.kontakt-card-foot {
  margin: 0 -48px;
  padding: 22px 48px;
  background: transparent;
  border-top: 1px solid rgba(27,54,93,0.14);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.kontakt-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 22px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
  letter-spacing: -0.005em;
}
.kontakt-btn--ghost {
  color: var(--text-muted);
  background: transparent;
}
.kontakt-btn--ghost:hover { color: var(--navy-hover); }
.kontakt-btn--primary {
  background: var(--navy-500);
  color: var(--bg);
  padding: 12px 28px;
}
.kontakt-btn--primary:hover { background: var(--navy-hover); }
.kontakt-btn--primary:disabled { opacity: 0.35; cursor: not-allowed; }

.kontakt-progress {
  height: 4px;
  background: rgba(27,54,93,0.12);
  position: relative;
  overflow: hidden;
}
.kontakt-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--navy-500);
  transition: width .3s cubic-bezier(.4,.0,.2,1);
}

/* Success state */
.kontakt-success {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 40px 0;
}
.kontakt-success-ico {
  width: 64px; height: 64px;
  border: 1px solid var(--navy-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-500);
}
.kontakt-success-ico svg { width: 32px; height: 32px; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.kontakt-success-text { color: var(--text-body); max-width: 42ch; font-size: 16px; line-height: 1.55; }

/* Aside (Direkt, Sprechzeiten, Kanzlei) */
.kontakt-aside {
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: sticky;
  top: 100px;
}
.kontakt-aside-block { display: flex; flex-direction: column; gap: 0; }
.kontakt-aside-block .brand-stroke { margin: 0 0 12px -10px; }
.kontakt-aside-block h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy-500);
  letter-spacing: -0.005em;
}
.kontakt-aside-block p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-body);
}
.kontakt-aside-block a {
  color: var(--navy-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.kontakt-aside-block a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

@media (max-width: 1024px) {
  .kontakt-wizard-inner { grid-template-columns: 1fr; gap: 48px; }
  .kontakt-aside { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .kontakt-wizard { padding: 64px 0 80px; }
  .kontakt-wizard-inner { padding: 0 20px; }
  .kontakt-card { padding: 32px 24px 0; min-height: auto; }
  .kontakt-card-foot { margin: 0 -24px; padding: 18px 24px; gap: 12px; }
  .kontakt-options--cards { grid-template-columns: 1fr; }
  .kontakt-field-grid { grid-template-columns: 1fr; }
  .kontakt-aside { grid-template-columns: 1fr; gap: 28px; }
}


/* =========================================================
   KARRIERE v2 · Team-Intro Split (Bild + Text, ruhig editorial)
   ========================================================= */
.kar-intro {
  background: var(--bg);
  padding: var(--section-py) 0;
}
.kar-intro-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 80px;
  align-items: center;
}
.kar-intro-content { display: flex; flex-direction: column; }
.kar-intro-content > .brand-stroke { margin: 0 0 8px; }
.kar-intro-content > .eyebrow-rule { margin: 0 0 18px; }
.kar-intro-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--navy-500);
  margin: 0 0 24px;
  max-width: 13ch;
}
.kar-intro-content p:not(.eyebrow-rule) {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 18px;
  max-width: 46ch;
}
.kar-intro-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.kar-intro-figure { margin: 0; }
.kar-intro-figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 20%;
}
@media (max-width: 880px) {
  .kar-intro { padding: 72px 0; }
  .kar-intro-inner { grid-template-columns: 1fr; gap: 36px; }
  .kar-intro-figure img { aspect-ratio: 1 / 1; }
}


/* =========================================================
   KARRIERE v2 · So kommst du ins Team (4 Schritte)
   Bild links (sticky), nummerierte Schritte rechts,
   Cognac-Strich ÜBER jeder Zahl.
   ========================================================= */
.kar-steps {
  background: var(--stone-100);
  border-top: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  padding: var(--section-py) 0;
}
.kar-steps-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 80px;
  align-items: start;
}
.kar-steps-media {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kar-steps-figure { margin: 0; }
.kar-steps-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--stone-300);
}
.kar-steps-figure-tag {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kar-steps-right { display: flex; flex-direction: column; }
.kar-steps-head { display: flex; flex-direction: column; margin: 0 0 8px; }
.kar-steps-head > .brand-stroke { margin: 0 0 8px; }
.kar-steps-head > .eyebrow-rule { margin: 0 0 12px; color: var(--cognac-500); }
.kar-steps-head > h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--navy-500);
  margin: 0;
  max-width: 16ch;
}
.kar-steps-list { list-style: none; margin: 28px 0 0; padding: 0; }
.kar-step {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--stone-300);
}
.kar-step:last-child { border-bottom: 1px solid var(--stone-300); }
.kar-step-num { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kar-step-num .brand-stroke { margin: 0; width: 36px; height: 3px; }
.kar-step-num b {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 46px;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--cognac-500);
}
.kar-step-body { padding-top: 2px; }
.kar-step-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--navy-500);
  margin: 0 0 8px;
}
.kar-step-body p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
  max-width: 52ch;
}
@media (max-width: 960px) {
  .kar-steps { padding: 80px 0; }
  .kar-steps-inner { grid-template-columns: 1fr; gap: 40px; }
  .kar-steps-media { position: static; }
  .kar-steps-figure img { aspect-ratio: 4 / 5; }
}
@media (max-width: 520px) {
  .kar-step { grid-template-columns: 1fr; gap: 12px; }
  .kar-step-num { flex-direction: row; align-items: center; gap: 14px; }
  .kar-step-num b { font-size: 38px; }
}


/* =========================================================
   KARRIERE v2 · Offene Stellen als Kacheln (wie Benefits)
   ========================================================= */
.kar-jobs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--stone-300);
  border-left: 1px solid var(--stone-300);
  margin-top: 8px;
}
.kar-job-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 36px 34px;
  border-bottom: 1px solid var(--stone-300);
  border-right: 1px solid var(--stone-300);
  text-decoration: none;
  transition: background-color .25s ease;
}
.kar-job-tile:hover { background: var(--stone-100); }
.kar-job-tile-no {
  position: absolute;
  top: 38px;
  right: 32px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}
.kar-job-tile-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cognac-500);
}
.kar-job-tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--navy-500);
  margin: 0;
  transition: color .2s ease;
}
.kar-job-tile-meta {
  font-size: 14.5px;
  color: var(--text-muted);
  margin: 0;
}
.kar-job-tile-tags {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kar-job-tile-tags li {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-500);
  padding: 5px 10px;
  border: 1px solid var(--stone-300);
  background: var(--white);
}
.kar-job-tile-cta {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cognac-500);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap .2s ease;
}
.kar-job-tile:hover h3 { color: var(--accent-hover); }
.kar-job-tile:hover .kar-job-tile-cta { gap: 13px; }
@media (max-width: 720px) {
  .kar-jobs-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   KARRIERE v2 · Ansprechpartner (Wolfgang)
   ========================================================= */
.kar-contact {
  background: var(--white);
  border-top: 1px solid var(--stone-300);
  padding: var(--section-py) 0;
}
.kar-contact-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: center;
}
.kar-contact-figure { margin: 0; max-width: 430px; }
.kar-contact-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  background: var(--stone-300);
}
.kar-contact-content { display: flex; flex-direction: column; }
.kar-contact-content > .brand-stroke { margin: 0 0 8px; }
.kar-contact-content > .eyebrow-rule { margin: 0 0 16px; }
.kar-contact-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.8vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--navy-500);
  margin: 0 0 8px;
  max-width: 16ch;
}
.kar-contact-role {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 22px;
}
.kar-contact-content p.lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 26px;
  max-width: 48ch;
}
.kar-contact-direct {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 28px;
}
.kar-contact-direct a {
  color: var(--navy-500);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.kar-contact-direct a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.kar-contact-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 880px) {
  .kar-contact { padding: 72px 0; }
  .kar-contact-inner { grid-template-columns: 1fr; gap: 36px; }
  .kar-contact-figure { max-width: 320px; }
}


/* =========================================================
   TEAM · Wolfgang — Portrait etwas näher herangezoomt
   ========================================================= */
.team-portrait--zoom img {
  transform: scale(1.26) translateY(-6%);
  transform-origin: center 46%;
}


/* =========================================================
   TEAM-SEITE v2 · Schlicht, modern, große Bilder
   Geschäftsführung-Feature + Fachkräfte-Raster mit Kontakt.
   ========================================================= */
.teampage {
  background: var(--bg);
  padding: var(--section-py) 0 96px;
}
.teampage-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
/* Solo-Variante: Geschäftsführung auf der Über-uns-Seite (ohne Fachkräfte-Raster) */
.teampage--solo { padding: var(--section-py) 0; }
.teampage--solo .tp-lead { margin-bottom: 0; }
.teampage--stone { background: var(--stone-100); }

/* --- Geschäftsführung-Feature (Wolfgang) --- */
.tp-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 64px;
  align-items: start;
  margin-bottom: 120px;
}
.tp-lead-figure { margin: 0; }
.tp-lead-figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  background: var(--stone-300);
}
.tp-lead-body { display: flex; flex-direction: column; }
.tp-lead-body > .brand-stroke { margin: 0 0 8px; }
.tp-lead-body > .eyebrow-rule { margin: 0 0 14px; }
.tp-lead-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--navy-500);
  margin: 0 0 20px;
}
.tp-lead-role {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin: 0 0 10px;
}
.tp-lead-intro {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0 0 28px;
  max-width: 54ch;
}
.tp-facts-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy-500);
  margin: 0 0 16px;
}
.tp-facts {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 13px;
}
.tp-facts li {
  position: relative;
  padding-left: 130px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 64ch;
}
.tp-fact-year {
  position: absolute;
  left: 24px;
  top: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--navy-500);
  white-space: nowrap;
}
.tp-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 10px;
  height: 2px;
  background: var(--cognac-500);
}
@media (max-width: 560px) {
  .tp-facts li { padding-left: 24px; }
  .tp-fact-year { position: static; display: block; margin-bottom: 2px; }
}
.tp-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--stone-300);
}
.tp-contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  color: var(--navy-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tp-contact a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.tp-contact .ic, .tp-card-contact .ic {
  width: 16px; height: 16px;
  color: var(--cognac-500);
  flex: none;
}

/* --- Section-Head (schlicht) --- */
.tp-head { display: flex; flex-direction: column; margin: 0 0 44px; }
.tp-head > .brand-stroke { margin: 0 0 8px; }
.tp-head > .eyebrow-rule { margin: 0 0 12px; }
.tp-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 4.8vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--navy-500);
  margin: 0;
}

/* --- Fachkräfte-Raster (größere Bilder) --- */
.tp-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 32px;
}
.tp-card { display: flex; flex-direction: column; }
.tp-figure {
  margin: 0 0 20px;
  position: relative;
  overflow: hidden;
  background: var(--navy-500);
  aspect-ratio: 4 / 5;
}
.tp-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 26%;
  display: block;
}
.tp-figure[data-initial]::after {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 84px;
  color: rgba(248,244,237,0.82);
}
.tp-figure:has(img)::after { display: none; }
.tp-card-cat {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin: 0 0 7px;
}
.tp-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--navy-500);
  margin: 0 0 8px;
}
.tp-card-do {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 10px;
  min-height: 2.95em;
}
.tp-card-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--stone-300);
}
.tp-card-contact a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--navy-500);
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.tp-card-contact a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

@media (max-width: 980px) {
  .tp-lead { grid-template-columns: 1fr; gap: 32px; margin-bottom: 88px; }
  .tp-lead-figure { max-width: 420px; }
  .tp-grid { grid-template-columns: repeat(2, 1fr); gap: 64px 28px; }
}
@media (max-width: 560px) {
  .tp-grid { grid-template-columns: 1fr; }
  .tp-lead-figure { max-width: none; }
}


/* =========================================================
   BILD-HOVER · Sanfter Zoom-in über alle Seiten
   ========================================================= */
.tp-figure,
.tp-lead-figure,
.kar-intro-figure,
.kar-steps-figure,
.kar-contact-figure,
.page-prose-figure,
.kontakt-info-img,
.intro-image,
.statement-image,
.values-image,
.home-jobs-figure,
.team-portrait {
  overflow: hidden;
}
.tp-figure img,
.tp-lead-figure img,
.kar-intro-figure img,
.kar-steps-figure img,
.kar-contact-figure img,
.page-prose-figure img,
.kontakt-info-img img,
.intro-image img,
.statement-image img,
.values-image img,
.home-jobs-figure img,
.team-portrait img {
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.tp-figure:hover img,
.tp-lead-figure:hover img,
.kar-intro-figure:hover img,
.kar-steps-figure:hover img,
.kar-contact-figure:hover img,
.page-prose-figure:hover img,
.kontakt-info-img:hover img,
.intro-image:hover img,
.statement-image:hover img,
.values-image:hover img,
.home-jobs-figure:hover img,
.team-portrait:hover img {
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .tp-figure img,
  .tp-lead-figure img,
  .kar-intro-figure img,
  .kar-steps-figure img,
  .kar-contact-figure img,
  .page-prose-figure img,
  .kontakt-info-img img,
  .intro-image img,
  .statement-image img,
  .values-image img,
  .home-jobs-figure img,
  .team-portrait img {
    transition: none;
  }
}
/* Wolfgang ist bereits herangezoomt — Hover zoomt von dort aus weiter */
.team-portrait--zoom:hover img {
  transform: scale(1.33) translateY(-6%);
}


/* =========================================================
   KARRIERE-TEASER (Startseite) · Stone-Band, Bild + Einladung
   ========================================================= */
.home-jobs {
  background: var(--stone-100);
  padding: var(--section-py) 0;
}
.home-jobs-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 80px;
  align-items: center;
}
.home-jobs-content { display: flex; flex-direction: column; }
.home-jobs-content > .brand-stroke { margin: 0 0 8px; }
.home-jobs-content > .eyebrow-rule { margin: 0 0 10px; }
.home-jobs-content > h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 56px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 14ch;
}
.home-jobs-lead {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 46ch;
}
.home-jobs-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.home-jobs-figure { margin: 0; }
.home-jobs-figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 880px) {
  .home-jobs { padding: 72px 0; }
  .home-jobs-inner { grid-template-columns: 1fr; gap: 36px; }
  .home-jobs-figure { order: -1; max-width: 440px; }
  .home-jobs-figure img { aspect-ratio: 1 / 1; }
}

/* Karriere-Teaser · Scroll-Reveal beim Hereinscrollen */
.home-jobs-content > .brand-stroke,
.home-jobs-content > .eyebrow-rule,
.home-jobs-content > h2,
.home-jobs-content > .home-jobs-lead,
.home-jobs-content > .home-jobs-actions {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-jobs.is-revealed .home-jobs-content > .brand-stroke,
.home-jobs.is-revealed .home-jobs-content > .eyebrow-rule,
.home-jobs.is-revealed .home-jobs-content > h2,
.home-jobs.is-revealed .home-jobs-content > .home-jobs-lead,
.home-jobs.is-revealed .home-jobs-content > .home-jobs-actions {
  opacity: 1;
  transform: none;
}
.home-jobs.is-revealed .home-jobs-content > .eyebrow-rule { transition-delay: 0.08s; }
.home-jobs.is-revealed .home-jobs-content > h2 { transition-delay: 0.16s; }
.home-jobs.is-revealed .home-jobs-content > .home-jobs-lead { transition-delay: 0.26s; }
.home-jobs.is-revealed .home-jobs-content > .home-jobs-actions { transition-delay: 0.36s; }

/* Brand-stroke "zeichnet" sich von links auf */
.home-jobs-content > .brand-stroke {
  transform-origin: left center;
  transform: translateY(18px) scaleX(0);
}
.home-jobs.is-revealed .home-jobs-content > .brand-stroke {
  transform: scaleX(1);
}

/* Bild blendet mit dezentem Zoom auf */
.home-jobs-figure {
  opacity: 0;
  clip-path: inset(0 0 0 0);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-jobs-figure img {
  transform: scale(1.08);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-jobs.is-revealed .home-jobs-figure { opacity: 1; }
.home-jobs.is-revealed .home-jobs-figure img { transform: scale(1); }
.home-jobs.is-revealed .home-jobs-figure:hover img { transform: scale(1.05); }

/* Button-Pfeil schiebt beim Hover sanft nach rechts */
.home-jobs-actions .btn span[aria-hidden] {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.home-jobs-actions .btn:hover span[aria-hidden] {
  transform: translateX(4px);
}

/* =========================================================
   LEISTUNGEN-ÜBERSICHT · 3 Säulen (wie das Menü-Dropdown)
   ========================================================= */
.lst-pillars { background: var(--bg); padding: var(--section-py) 0; }
.lst-pillars-inner {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
}
.lst-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto repeat(4, auto);
  border-top: 1px solid var(--stone-300);
  border-left: 1px solid var(--stone-300);
}
.lst-pillar {
  border-right: 1px solid var(--stone-300);
  border-bottom: 1px solid var(--stone-300);
  padding: 40px 36px 18px;
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
}
.lst-pillar-head { margin: 0 0 26px; }
.lst-pillar-num {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cognac-500);
  margin: 0 0 12px;
}
.lst-pillar-head h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy-500);
}
.lst-pillar-head p {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 30ch;
}
.lst-pillar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.lst-svc {
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  align-items: start;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--stone-300);
  text-decoration: none;
  transition: padding-left 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lst-pillar-list > li:first-child .lst-svc { border-top: 0; }
.lst-svc-icon {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stone-300);
  color: var(--cognac-500);
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.lst-svc-icon svg { width: 18px; height: 18px; }
.lst-svc-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--navy-500);
  transition: color 0.2s ease;
}
.lst-svc-desc {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.lst-svc-arrow {
  align-self: center;
  font-size: 16px;
  color: var(--cognac-500);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lst-svc:hover { padding-left: 8px; }
.lst-svc:hover .lst-svc-icon {
  background: var(--navy-500);
  border-color: var(--navy-500);
  color: var(--bg);
}
.lst-svc:hover .lst-svc-title { color: var(--cognac-500); }
.lst-svc:hover .lst-svc-arrow { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .lst-pillars-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .lst-pillar { grid-row: auto; display: flex; flex-direction: column; }
}

/* Reveal für die Säulen-Listenzeilen (fade-in via tweaks.js) */
.lst-pillar.fade-in { will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .home-jobs-content > .brand-stroke,
  .home-jobs-content > .eyebrow-rule,
  .home-jobs-content > h2,
  .home-jobs-content > .home-jobs-lead,
  .home-jobs-content > .home-jobs-actions,
  .home-jobs-figure,
  .home-jobs-figure img,
  .home-jobs-actions .btn span[aria-hidden] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* =========================================================
   MOBILE & TABLET · konsolidierter Schliff
   Ausschließlich max-width-Queries → Desktop bleibt unberührt.
   ========================================================= */

/* ---- Overflow-Schutz: Medien nie breiter als ihr Container ---- */
img, video, svg { max-width: 100%; }

/* ---------------------------------------------------------
   TABLET · ≤ 1024px — etwas kompakterer Vertikalrhythmus
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-py: 88px; }
  .nav-inner { padding: 0 28px; }
}

/* ---------------------------------------------------------
   MOBILE · ≤ 760px
   --------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --section-py: 64px; }

  /* Einheitlicher 20px-Seitenrand für alle Haupt-Container */
  .intro-inner, .statement-inner, .services-inner, .values-inner,
  .trust-inner, .foot-inner, .team-inner, .contact-inner,
  .leistungen-inner, .legal-inner, .home-contact-inner, .home-jobs-inner,
  .logo-strip-inner, .lst-pillars-inner, .sub-hero-inner, .sub-hero-crumbs,
  .page-prose-inner, .feature-image-inner, .teampage-inner, .cta-inner,
  .hero-content, .svc-umfang-inner, .svc-zielgruppe-inner, .svc-prozess-inner,
  .svc-faq-inner, .svc-crosslinks-inner, .kar-why-inner, .kar-stats-inner,
  .kar-benefits-inner, .kar-jobs-inner, .kar-intro-inner, .kar-steps-inner,
  .kar-contact-inner, .kontakt-wizard-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Form-Eingaben ≥16px → verhindert iOS-Auto-Zoom beim Fokussieren */
  input, select, textarea {
    font-size: 16px;
  }

  /* Parallax/Drift abschalten — ruckelt beim Touch-Scrollen */
  .values-list { transform: none !important; }

  /* Hero: kein vertikaler Versatz, ruhigere Maße */
  .hero-content { padding: 112px 20px 84px; }
  .hero-inner { transform: none; }
  .hero h1 { font-size: clamp(33px, 9vw, 46px); margin: 0 0 18px; }
  .hero-cta { gap: 12px; width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }

  /* Große Editorial-Headlines bekommen auf Mobile einen sanfteren Floor */
  .sub-hero h1,
  .kar-why-head > h2, .kar-benefits-head > h2, .kar-jobs-head > h2,
  .kar-steps-head > h2, .kar-intro-content h2,
  .page-prose-aside h2, .svc-section-head h2, .tp-head h2,
  .home-contact-head h2, .cta h2 {
    font-size: clamp(31px, 8.5vw, 46px) !important;
    line-height: 1.06;
  }
}

/* ---------------------------------------------------------
   MOBILE-MENÜ · scrollbar + solider Balken bei geöffnetem Menü
   (Burger erscheint ab ≤ 920px)
   --------------------------------------------------------- */
@media (max-width: 920px) {
  .nav-links {
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Bei offenem Menü wird der Balken solide, damit Logo/Burger lesbar bleiben */
  .nav.is-menu-open {
    background: var(--bg);
    border-bottom-color: var(--stone-300);
    --nav-fg: var(--navy-500);
  }
  .nav.is-menu-open::before { opacity: 0; }
  .nav.is-menu-open .nav-logo-img,
  .nav.is-menu-open .nav-logo-markimg { filter: none; }
  .nav.is-menu-open .nav-logo-switzertext { color: var(--navy-500); }
}

/* ---------------------------------------------------------
   SEHR SCHMAL · ≤ 380px — letzte Reserve gegen Overflow
   --------------------------------------------------------- */
@media (max-width: 380px) {
  .foot-motto { font-size: 11px; letter-spacing: 0.14em; }
  .home-contact-direct a, .kontakt-info-item a { word-break: break-word; }
}


/* =========================================================
   MOBILE FEEDBACK-PASS · konkrete Korrekturen
   ========================================================= */
@media (max-width: 760px) {
  /* 1 · Headlines brechen IMMER um — überschreibt auch inline white-space:nowrap */
  h1, h2, h3 { white-space: normal !important; overflow-wrap: break-word; }

  /* 2 · Intro & Statement: Bild OBEN, Text darunter.
         (Übrig gebliebene grid-column/-row-Angaben würden sonst ein
         gequetschtes 2-Spalten-Raster erzeugen.) */
  .intro-stack > .intro-image,
  .intro-stack > .intro-content,
  .statement-inner > .statement-content,
  .statement-inner > .statement-image {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .intro-stack > .intro-image,
  .statement-inner > .statement-image { order: -1; }
  .intro-stack > .intro-image img { min-height: 0; aspect-ratio: 4 / 3; }

  /* 3 · Sektionsbilder voll breit & zentriert (keine schmalen Caps mehr) */
  .page-prose-figure, .home-jobs-figure, .personal-figure,
  .kar-contact-figure, .tp-lead-figure, .values-image,
  .kar-intro-figure, .kar-steps-figure, .kar-why-image {
    max-width: 100% !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4 · Startseiten-Werte: alle vier Icons nebeneinander, kompakt */
  .intro-values {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin-top: 36px !important;
    padding-top: 18px !important;
  }
  .intro-value,
  .intro-value:nth-child(odd) {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 6px 5px !important;
    border-left: 0 !important;
    min-height: 0;
  }
  .intro-value-icon { width: 24px; height: 24px; }
  .intro-value-label { font-size: 10.5px; line-height: 1.25; letter-spacing: 0; }

  /* 5 · Sub-Hero: deutlich weniger blauer Raum unter der Headline
         (oben großzügig lassen — Breadcrumbs brechen mobil um) */
  .sub-hero { padding: 148px 0 36px !important; }
}


/* =========================================================
   MOBILE-MENÜ v2 · Leistungen eingeklappt + Kontakt-Button im Menü
   (JS in tweaks.js steuert das Aufklappen & klont den CTA)
   ========================================================= */
.nav-cta-mobile { display: none; }
@media (max-width: 920px) {
  /* Dropdown standardmäßig eingeklappt, nur bei .is-open sichtbar.
     transform/position/width hart zurücksetzen — sonst greift auf Mobile die
     Desktop-:focus-within-Regel (translateX(-50%)) und schiebt die Einträge
     nach links aus dem Bild. */
  .nav-dropdown {
    display: none !important;
    position: static !important;
    width: 100% !important;
    left: auto !important;
    transform: none !important;
  }
  .nav-item:hover .nav-dropdown,
  .nav-item:focus-within .nav-dropdown { transform: none !important; }
  .nav-item.is-open .nav-dropdown { display: block !important; }
  .nav-item.is-open > .nav-trigger .caret {
    transform: rotate(-135deg) translate(-1px, -1px);
  }
  /* Kontakt-Button (Klon) im Menü anzeigen */
  /* Kontakt: wie die anderen Menüpunkte — linksbündig, mit Trennlinie,
     kein zentrierter Button */
  .nav-cta-mobile {
    display: flex !important;
    width: 100%;
    justify-content: flex-start !important;
    align-items: center;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--stone-300) !important;
    border-radius: 0 !important;
    color: var(--navy-500) !important;
    font-family: var(--font-body) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 14px 0 !important;
    margin: 0 !important;
  }
}


/* =========================================================
   MOBILE FEEDBACK-PASS 2 · Spacing + Logo-Reihe
   ========================================================= */
@media (max-width: 760px) {
  /* Einheitlich kompakter Sektionsabstand — vorher viel zu luftig */
  .intro, .statement, .services, .values, .trust, .personal,
  .home-jobs, .home-contact, .team, .page-prose, .leistungen-page,
  .legal-page, .svc-umfang, .svc-zielgruppe, .svc-prozess, .svc-faq,
  .svc-crosslinks, .kar-why, .kar-benefits, .kar-jobs, .kar-intro,
  .kar-steps, .kar-contact, .feature-image, .lst-pillars, .contact,
  .kontakt-wizard, .cta, .teampage {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Logo-Strip: durchlaufendes Marquee NUR auf Mobile (Desktop bleibt statisch) */
  .logo-strip { padding: 24px 0 !important; }
  .logo-strip-inner { overflow: hidden; }
  .logo-strip-row {
    flex-wrap: nowrap !important;
    width: max-content;
    justify-content: flex-start !important;
    align-items: center;
    gap: 0 !important;
    animation: logo-marquee 26s linear infinite;
  }
  .logo-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin-right: 44px !important;
  }
  .logo-item img { max-height: 36px !important; }
  .logo-item--datev img { max-height: 36px !important; }
}

/* Marquee-Keyframes + Duplikate (Duplikate nur mobil sichtbar) */
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip-row { animation: none !important; }
}
.logo-item--dup { display: none; }
@media (max-width: 760px) {
  .logo-item--dup { display: flex !important; }
}


/* =========================================================
   MOBILE FEEDBACK-PASS 3 · Navbar sichtbar + Zitat rechts
   ========================================================= */
@media (max-width: 920px) {
  /* Navbar auf Mobile IMMER solide — sonst ist der weiße Burger über dem
     hellen Hero unsichtbar ("nur ein weißer Balken"). Jetzt navy auf Weiß. */
  .nav {
    background: var(--bg) !important;
    border-bottom-color: var(--stone-300) !important;
    height: 76px;
    --nav-fg: var(--navy-500);
    --nav-fg-muted: var(--text-body);
    --nav-divider: var(--stone-300);
  }
  .nav::before { opacity: 0 !important; }
  .nav .nav-logo-img,
  .nav .nav-logo-markimg { filter: none !important; }
  .nav .nav-logo-switzertext { color: var(--navy-500) !important; }
}

@media (max-width: 760px) {
  /* Wolfgang-Zitat: Signatur wieder rechtsbündig */
  .personal-sign {
    align-items: flex-end !important;
    text-align: right !important;
  }
}


/* =========================================================
   MOBILE FEEDBACK-PASS 4 · Burger & Menü-Panel bombenfest sichtbar
   ========================================================= */
@media (max-width: 920px) {
  /* Burger: große, eindeutig navyfarbene Trefferfläche */
  .nav-burger {
    display: block !important;
    width: 46px;
    height: 46px;
    color: var(--navy-500) !important;
    position: relative;
    z-index: 3;
  }
  .nav-burger::before,
  .nav-burger::after {
    background: var(--navy-500) !important;
    left: 12px;
    right: 12px;
    height: 2px;
  }
  .nav-burger::before { top: 17px; }
  .nav-burger::after  { top: 26px; }
  .nav.is-menu-open .nav-burger::before { top: 21px; transform: rotate(45deg); }
  .nav.is-menu-open .nav-burger::after  { top: 21px; transform: rotate(-45deg); }

  /* Logo-Wortmarke auf Mobile immer navy (lesbar auf weißer Leiste) */
  .nav-logo-switzertext { color: var(--navy-500) !important; }

  /* Menü-Panel: offen = unmissverständlich sichtbar, geschlossen = sicher weg */
  .nav-links {
    visibility: hidden;
    box-shadow: 0 18px 36px rgba(12, 26, 48, 0.14);
    z-index: 2;
  }
  .nav.is-menu-open .nav-links {
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}


/* =========================================================
   MOBILE FEEDBACK-PASS 5 · Breadcrumbs (Unterseiten) kompakter
   Gilt für ALLE Sub-Hero-Seiten.
   ========================================================= */
@media (max-width: 760px) {
  .sub-hero-crumbs {
    top: 92px;
    font-size: 12px;
    gap: 4px 6px;
    line-height: 1.4;
    color: rgba(248, 244, 237, 0.62);
  }
  .sub-hero-crumbs .sep { font-size: 11px; }
  .sub-hero-crumbs .current {
    font-weight: 500;       /* nicht mehr fett — kein zweiter Überschrift-Look */
    color: rgba(248, 244, 237, 0.9);
  }
  /* Genug Platz: Crumbs sitzen klar unter der 76px-Nav, Headline darunter */
  .sub-hero { padding-top: 132px !important; }
}


/* =========================================================
   MOBILOPTIMIERUNG · Schluss-Pass (Juli 2026)
   Getestete Breakpoints: 375 / 390 / 768 / 1024px.
   AUSSCHLIESSLICH max-width-Queries (bzw. eng begrenzte Bänder)
   → Desktop-Layout (>1024px) und alle SEO-Daten bleiben unberührt.
   ========================================================= */

/* ---------------------------------------------------------
   A · OVERFLOW-GUARDS
   Kein horizontales Scrollen auf keinem Breakpoint.
   --------------------------------------------------------- */

/* A1 · Services-Kacheln — Lücke 961–1024px schließen.
   Die quadratischen Kacheln (aspect-ratio:1/1) erzwingen in 3 Spalten
   eine Mindestbreite, die auf 1024px nicht mehr in den Container passt
   (Track-Blowup → ~300px Überlauf). 2 Spalten + natürliche Höhe.
   Band 601–1024 lässt die bestehenden ≤960 (2-Sp.) und ≤600 (1-Sp.)
   Regeln unangetastet. */
@media (min-width: 601px) and (max-width: 1024px) {
  .svc-grid,
  .leistungen-group-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-tile,
  .leistungen-group-grid .svc-tile { aspect-ratio: auto; min-width: 0; }
}

/* A2 · Leistungen-Übersicht (3-Säulen-Subgrid).
   Auf 1024px sprengt das 3-Spalten-Subgrid den Container; auf 375/390px
   bläht die innere Service-Zeile (34px | 1fr | 16px) über min-content auf.
   Einspaltig bis 1024 + Spuren dürfen unter den Inhalt schrumpfen +
   lange Wörter brechen um. */
@media (max-width: 1024px) {
  .lst-pillars-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .lst-pillar { grid-row: auto; display: flex; flex-direction: column; min-width: 0; }
  .lst-svc { grid-template-columns: 34px minmax(0, 1fr) 16px; }
  .lst-svc-title,
  .lst-svc-desc { overflow-wrap: break-word; }
}

/* A3 · Formular-Grids — Spur nicht über min-content der Felder wachsen
   lassen (Select mit langen Optionen schob ~3px über den Rand). Greift
   erst ab ≤880px, wo die Spalten bereits einspaltig sind. */
@media (max-width: 880px) {
  .home-contact-inner,
  .contact-inner { grid-template-columns: minmax(0, 1fr); }
  .home-contact-form,
  .contact-form,
  .home-contact-form .field-row,
  .contact-form .field-row { min-width: 0; }
}

/* A4 · Lange URLs / E-Mails in Rechtstexten umbrechen (Impressum). */
@media (max-width: 1024px) {
  .legal-inner a { overflow-wrap: anywhere; word-break: break-word; }
}


/* ---------------------------------------------------------
   B · TYPOGRAFIE — Fließtext ≥ 16px auf Mobil, großzügigere
   Zeilenhöhe. Betrifft nur beschreibende Absätze; Labels,
   Eyebrows, Tags & Meta-Chrome bleiben bewusst kleiner.
   --------------------------------------------------------- */
@media (max-width: 760px) {
  .svc-tile p,
  .svc-card p,
  .values-cell p,
  .values-list p,
  .trust-list p,
  .svc-umfang-list li p,
  .svc-prozess-step p,
  .svc-crosslink p,
  .kar-why-list p,
  .kar-benefit p,
  .kar-step-body p,
  .faq-body,
  .tp-card-do,
  .tp-facts li,
  .lst-svc-desc,
  .lst-pillar-head p {
    font-size: 16px;
    line-height: 1.65;
  }
  /* min-height-Angleichungen (Desktop-Rasterhilfen) auf Mobil lösen,
     damit 16px-Text nicht abgeschnitten wirkt / Luft entsteht */
  .trust-list p,
  .tp-card-do,
  .team-role,
  .team-cat,
  .team-card h3 { min-height: 0; }
}


/* ---------------------------------------------------------
   C · TOUCH-TARGETS ≥ 44px & großzügige Klickflächen
   --------------------------------------------------------- */
@media (max-width: 760px) {
  /* Footer-Navigation: Textlinks als klar tippbare Zeilen */
  .foot-col ul { gap: 0; }
  .foot-col li a {
    display: inline-block;
    padding: 14px 0;
    line-height: 1.2;
  }
  .foot-bot-links { gap: 8px 24px; flex-wrap: wrap; }
  .foot-bot-links a { display: inline-block; padding: 13px 0; }

  /* Kontakt-Direktlinks (Telefon / E-Mail) größer antippbar */
  .home-contact-direct a,
  .foot-contact a,
  .kontakt-info-item a,
  .tp-contact a,
  .kar-contact-direct a { padding: 6px 0; }

  /* Rechtstext-Links (Impressum/Datenschutz) mit Tap-Höhe */
  .legal-inner a { display: inline-block; padding: 4px 0; }
}


/* ---------------------------------------------------------
   D · BEDIENUNG — Haupt-CTAs auf sehr schmalen Screens
   volle Breite, damit sie bequem mittig zu treffen sind.
   --------------------------------------------------------- */
@media (max-width: 480px) {
  .home-jobs-actions,
  .kar-intro-actions,
  .about-buttons,
  .statement-content > .btn,
  .intro-prose > .btn { width: 100%; }
  .home-jobs-actions .btn,
  .kar-intro-actions .btn,
  .about-buttons .btn,
  .statement-content > .btn,
  .intro-prose > .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   MOBILOPTIMIERUNG · Feedback-Pass (Reihenfolge & Footer)
   Nur ≤1024px-Queries → Desktop (>1024px) & SEO unberührt.
   ========================================================= */

/* ---------------------------------------------------------
   E · BILD-/TEXT-SEKTIONEN — auf Mobil IMMER einspaltig,
   Bild zuerst, dann Headline → Text → Buttons.
   Die Desktop-Varianten --wide-figure & --flip überschreiben
   sonst (gleiche Spezifität, später im File) den ≤880-Kollaps
   und bleiben zweispaltig nebeneinander stehen.
   --------------------------------------------------------- */
@media (max-width: 880px) {
  .page-prose--imaged .page-prose-inner,
  .page-prose--wide-figure .page-prose-inner,
  .page-prose--flip .page-prose-inner {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  /* Bild immer oben — unabhängig von der DOM-Reihenfolge der Variante */
  .page-prose--imaged .page-prose-figure,
  .page-prose--wide-figure .page-prose-figure,
  .page-prose--flip .page-prose-figure { order: -1; }
  .page-prose--imaged .page-prose-right,
  .page-prose--wide-figure .page-prose-right,
  .page-prose--flip .page-prose-right { order: 0; }
  /* Bild in voller Breite (keine schmale, zentrierte Kappung) */
  .page-prose-figure { max-width: 100% !important; width: 100%; }

  /* Karriere-Intro: Bild jetzt ebenfalls oben (vor Text + Buttons) */
  .kar-intro-figure { order: -1; }
  .kar-intro-content { order: 0; }
}

/* ---------------------------------------------------------
   F · KONTAKT — auf Mobil zuerst das Auswahl-/Wizard-Fenster,
   danach der „Direkt erreichbar“-Block darunter.
   (DOM-Reihenfolge ist Info → Card; hier gedreht.)
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .kontakt-card { order: 1; }
  .kontakt-info { order: 2; }
}

/* ---------------------------------------------------------
   G · FOOTER — kompakter auf dem Handy.
   Leistungen-Spalte ausblenden (der Überblick-Link liegt jetzt
   im Kanzlei-Menü); Marke volle Breite, darunter Kanzlei &
   Kontakt NEBENEINANDER. „Made by" bricht in die zweite Zeile.
   --------------------------------------------------------- */
@media (max-width: 540px) {
  .foot { padding-top: 48px; }
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    padding-bottom: 36px;
  }
  .foot-col:first-child { grid-column: 1 / -1; }   /* Marke + Motto volle Breite */
  .foot-col:nth-child(2) { display: none; }         /* Leistungen-Spalte streichen */
  .foot-col li a { padding: 11px 0; }
  .foot-social { margin-top: 16px; }

  /* Mobil-only: Leistungen-Link im Kanzlei-Menü einblenden */
  .foot-col li.foot-only-mobile { display: list-item; }

  /* Copyright-Zeile: „Made by …" unter die erste Zeile umbrechen */
  .foot-cc-sep { display: none; }
  .foot-cc-credit { display: block; margin-top: 2px; }
}

/* Mobil-only Menüpunkt standardmäßig aus (Desktop unberührt) */
.foot-only-mobile { display: none; }

/* ---------------------------------------------------------
   H · KARRIERE „In vier Schritten" — auf Mobil nur die Zahl
   (der Cognac-Strich neben der Zahl entfällt; die Zahl steht
   linksbündig über der Schritt-Überschrift).
   --------------------------------------------------------- */
@media (max-width: 540px) {
  .kar-step-num .brand-stroke { display: none; }
}