@font-face {
  font-family: Manrope;
  src: url("/files/manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/files/manrope-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/files/manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
/* Righteous (SIL Open Font License 1.1, Astigmatic): Schrift aus Daniels
   Entwürfen für die Schmuck-Überschrift „TEAMWORK“ */
@font-face {
  font-family: Righteous;
  src: url("/files/righteous-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #faf9f6;
  --ink: #282c29;
  --muted: #666b65;
  --red: #db3048;
  /* Rot für kleine Schrift auf hellem Grund (Kontrast über 4,5:1) */
  --red-text: #c4283f;
  --red-dark: #b8263c;
  --red-tint: #fbeef0;
  --red-line: rgba(219, 48, 72, 0.38);
  --line: #ddded7;
  --white: #fff;
  --soft: #efefea;
  --radius: 12px;
  --fs-small: 14px;
  --fs-text: 18px;
  --fs-head: clamp(30px, calc(2.2vw + 15px), 46px);
  --space-section: 80px;
  --space-hero-top: 64px;
  --space-hero-bottom: var(--space-section);
  --space-head: 36px;
  --space-crumb: 20px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, Arial, sans-serif;
  font-size: var(--fs-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.modal-open {
  overflow: hidden;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}
button,
summary,
a {
  touch-action: manipulation;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}
svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.symbols {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.wrap {
  width: min(1320px, calc(100% - 112px));
  margin-inline: auto;
}
.skip {
  position: fixed;
  top: -80px;
  left: 20px;
  background: var(--ink);
  color: #fff;
  z-index: 100;
  padding: 12px 22px;
  font-size: var(--fs-small);
  font-weight: 600;
}
.skip:focus {
  top: 10px;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 400;
  line-height: 1.1;
}
h1,
h2 {
  font-size: var(--fs-head);
  letter-spacing: -0.02em;
}
h3 {
  font-size: var(--fs-text);
  font-weight: 600;
  line-height: 1.45;
}
/* Schmuck-Überschrift in der Logo-Schrift (Karriere „TEAMWORK“). Bewusst
   größer als die übrigen Überschriften, wie in Daniels Entwurf vom
   20.10.2026; sonst gelten nur 14, 18 px und --fs-head. */
.logo-type {
  font-family: Righteous, Manrope, Arial, sans-serif;
  font-size: calc(var(--fs-head) * 1.5);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
p {
  color: var(--muted);
}
.eyebrow {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
  color: var(--red-text);
  margin-bottom: 24px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 54px;
  padding: 10px 18px;
  background: var(--red);
  border: 1px solid var(--red);
  color: white;
  border-radius: 9px;
  font-size: var(--fs-small);
  font-weight: 600;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 16px -12px rgba(139, 24, 44, 0.65);
  transition:
    background 0.22s,
    box-shadow 0.22s,
    transform 0.22s;
}
.button:is(:hover, :focus-visible) {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 12px 25px -12px rgba(139, 24, 44, 0.6);
  transform: translateY(-2px);
}
.button:active {
  transform: translateY(0);
  box-shadow: none;
}
.button svg {
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition:
    transform 0.22s,
    background 0.22s,
    color 0.22s;
}
.button:is(:hover, :focus-visible) svg {
  background: white;
  color: var(--red);
  transform: translateX(2px);
}
.button.small {
  min-height: 43px;
  padding: 7px 13px;
  gap: 24px;
}
.button.small svg {
  width: 16px;
  height: 16px;
  padding: 5px;
}
.button.light {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}
.button.light svg {
  background: var(--red);
  color: var(--white);
}
.button.light:is(:hover, :focus-visible) {
  background: white;
  border-color: white;
  color: var(--ink);
}
.button.light:is(:hover, :focus-visible) svg {
  background: var(--red-dark);
  color: white;
}
.button.outline {
  color: var(--ink);
  background: var(--paper);
  border-color: #c5c8bd;
  box-shadow: none;
}
.button.small.outline {
  gap: 12px;
  padding: 7px 7px 7px 16px;
  white-space: nowrap;
}
.button.outline svg {
  background: var(--soft);
  color: var(--red);
}
.button.outline:is(:hover, :focus-visible) {
  background: var(--white);
  border-color: var(--red);
  color: var(--red-text);
  box-shadow: 0 10px 22px -16px rgba(139, 24, 44, 0.45);
}
.button.outline:is(:hover, :focus-visible) svg {
  background: var(--red);
  color: var(--white);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-size: var(--fs-small);
  font-weight: 600;
  position: relative;
  min-height: 40px;
  transition: color 0.2s;
}
button.text-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: calc(100% - 50px);
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s;
}
.text-link svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 7px;
  border: 1px solid var(--red-line);
  border-radius: 50%;
  color: var(--red);
  transition:
    transform 0.22s,
    background 0.22s,
    border-color 0.22s,
    color 0.22s;
}
.text-link:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
}
.text-link:is(:hover, :focus-visible) svg {
  transform: translateX(2px);
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(250, 249, 246, 0.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(15px);
}
.header-inner {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: block;
  flex-shrink: 0;
}
.brand-logo {
  display: block;
  width: 260px;
  height: auto;
  overflow: visible;
  fill: #000;
  stroke: none;
}
.desktop-nav {
  display: flex;
  gap: 28px;
  margin-inline: auto 16px;
}
.desktop-nav a {
  font-size: var(--fs-small);
  position: relative;
  padding: 12px 0;
  white-space: nowrap;
}
.desktop-nav a:after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--red);
  transition: width 0.2s;
}
.desktop-nav a:hover:after {
  width: 100%;
}
.desktop-nav [aria-current="page"]::after {
  width: 100%;
}
.button.header-calc,
.button.header-cta {
  flex-shrink: 0;
}
.button.header-calc {
  gap: 12px;
  padding: 7px 7px 7px 16px;
  white-space: nowrap;
}
.header-calc-icon {
  display: none;
}
.header-calc[aria-current="page"] {
  background: var(--red-dark);
  border-color: var(--red-dark);
}
.menu-toggle {
  display: none;
}
.mobile-nav[hidden] {
  display: none;
}
.brand-w {
  color: var(--red);
}
/* Das W aus dem Logo (mit Ameise) am Anfang von Überschriften. Der Buchstabe
   bleibt als Text im Wort (Screenreader, Suche, Kopieren) und hat keine
   Breite; alles bleibt inline, sonst trennen Screenreader das Wort. Maße: die
   Großbuchstaben im Logo (344 Einheiten) entsprechen der Versalhöhe von
   Manrope (0,72 em), der Fuß der Ameise steht auf der Grundlinie. */
.logo-w-letter {
  font-size: 0;
}
.logo-w svg {
  display: inline-block;
  width: 0.853em;
  height: 0.9em;
  margin-right: 0.03em;
  vertical-align: baseline;
  overflow: visible;
  fill: currentColor;
  stroke: none;
}
.brand-name {
  text-transform: uppercase;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px 16px;
  margin-top: 29px;
}
.hero-actions .button {
  flex: 0 0 auto;
}
.hero-actions .text-link {
  gap: 12px;
}
/* Startseite: erste Sektion als Bühne mit Bild im Hintergrund */
.stage-page {
  /* Höhe des Headers (inklusive Linie), unter den die Bühne geschoben wird */
  --stage-header: 91px;
  --stage-shade: 17, 19, 18;
}

/* Header liegt transparent auf dem Bild und wird beim Scrollen wieder hell */
.stage-page .site-header {
  transition:
    background-color 0.35s,
    border-color 0.35s;
}
.stage-page .brand-logo,
.stage-page .desktop-nav a,
.stage-page .menu-toggle {
  transition:
    fill 0.35s,
    color 0.35s;
}
.stage-page .site-header:not(.is-solid) {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: none;
}
.stage-page .site-header:not(.is-solid) .brand-logo {
  fill: var(--white);
}
.stage-page .site-header:not(.is-solid) .desktop-nav a {
  color: var(--white);
}
.stage-page .site-header:not(.is-solid) .button.header-cta {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
.stage-page .site-header:not(.is-solid) .button.header-cta svg {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.stage-page
  .site-header:not(.is-solid)
  .button.header-cta:is(:hover, :focus-visible) {
  color: var(--red-text);
  background: var(--white);
  border-color: var(--white);
}
.stage-page
  .site-header:not(.is-solid)
  .button.header-cta:is(:hover, :focus-visible)
  svg {
  background: var(--red);
}
.stage-page .site-header:not(.is-solid) .menu-toggle {
  color: var(--white);
}
.stage-page .site-header:not(.is-solid) .menu-toggle i {
  background: var(--white);
}

/* Bühne */
.stage-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(640px, 100svh, 980px);
  margin-top: calc(var(--stage-header) * -1);
  overflow: hidden;
  background: rgb(var(--stage-shade));
  color: var(--white);
}
.stage-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  will-change: transform;
}
.stage-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  transition: opacity 0.9s ease;
}
.stage-hero.is-loading .stage-media img {
  opacity: 0;
}
/* Verlauf: oben für den Header, links für den Text, unten für die Zielgruppen-Buttons */
.stage-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(var(--stage-shade), 0.6) 0%,
      rgba(var(--stage-shade), 0) 24%
    ),
    linear-gradient(
      0deg,
      rgba(var(--stage-shade), 0.84) 0%,
      rgba(var(--stage-shade), 0.4) 32%,
      rgba(var(--stage-shade), 0) 56%
    ),
    linear-gradient(
      90deg,
      rgba(var(--stage-shade), 0.8) 0%,
      rgba(var(--stage-shade), 0.52) 32%,
      rgba(var(--stage-shade), 0.08) 58%,
      rgba(var(--stage-shade), 0) 72%
    );
}
.stage-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 56px;
  padding-block: calc(var(--stage-header) + 64px) 36px;
}
.stage-copy {
  max-width: 640px;
}
.stage-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--white);
}
.stage-hero .eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--red);
}
.stage-hero h1 {
  margin-bottom: 24px;
  color: var(--white);
  font-weight: 700;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.3);
}
.stage-line {
  display: block;
}
.stage-hero .hero-description {
  max-width: 500px;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, 0.88);
}

/* Wege zu den Zielgruppen: drei große Buttons über die Inhaltsbreite */
.stage-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.stage-paths a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 104px;
  padding: 20px 20px 20px 28px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  background: rgba(var(--stage-shade), 0.5);
  backdrop-filter: blur(10px);
  line-height: 1.4;
  transition:
    background-color 0.25s,
    border-color 0.25s;
}
.stage-paths strong,
.stage-paths small {
  display: block;
}
.stage-paths strong {
  font-weight: 700;
}
.stage-paths small {
  font-size: var(--fs-text);
  color: rgba(255, 255, 255, 0.82);
}
.stage-paths svg {
  box-sizing: content-box;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition:
    transform 0.22s,
    background-color 0.22s,
    border-color 0.22s;
}
.stage-paths a:is(:hover, :focus-visible) {
  background: rgba(var(--stage-shade), 0.68);
  border-color: var(--white);
}
.stage-paths a:is(:hover, :focus-visible) svg {
  background: var(--red);
  border-color: var(--red);
  transform: translateX(2px);
}
.stage-paths a:focus-visible {
  outline-color: var(--white);
}

/* Auftritt: Bild zoomt zurück, Text steigt auf, das rote W wird gestempelt */
@media (prefers-reduced-motion: no-preference) {
  .stage-media img {
    animation: stage-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) both paused;
  }
  .stage-hero.is-ready .stage-media img {
    animation-play-state: running;
  }
  .stage-hero .eyebrow {
    animation: stage-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
  }
  .stage-line {
    animation: stage-line 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both;
  }
  .stage-line + .stage-line {
    animation-delay: 0.34s;
  }
  .stage-hero h1 .logo-w svg {
    transform-origin: 50% 85%;
    animation: stage-stamp 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 1s both;
  }
  .stage-hero .hero-description {
    animation: stage-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.55s both;
  }
  .stage-paths a {
    animation: stage-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s both;
  }
  .stage-paths a:nth-child(2) {
    animation-delay: 1.03s;
  }
  .stage-paths a:nth-child(3) {
    animation-delay: 1.11s;
  }
}
@keyframes stage-settle {
  from {
    transform: scale(1.12);
  }
  to {
    transform: none;
  }
}
@keyframes stage-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes stage-line {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(0.45em);
  }
  to {
    clip-path: inset(-0.4em -0.4em -0.6em -0.4em);
    transform: none;
  }
}
@keyframes stage-stamp {
  from {
    opacity: 0;
    transform: scale(1.7) rotate(-12deg);
  }
  60% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1050px) {
  .stage-page {
    --stage-header: 76px;
  }
}
/* Hochformat: das Originalbild steht oben, der Text unten auf dem Verlauf */
@media (max-aspect-ratio: 1/1) {
  .stage-media img {
    object-position: 50% 28%;
  }
  .stage-hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(var(--stage-shade), 0.55) 0%,
        rgba(var(--stage-shade), 0) 18%
      ),
      linear-gradient(
        0deg,
        rgba(var(--stage-shade), 0.94) 0%,
        rgba(var(--stage-shade), 0.78) 42%,
        rgba(var(--stage-shade), 0) 74%
      );
  }
  /* Der Text bekommt ab seiner Oberkante einen dunklen Grund, egal wie hoch das Bild steht */
  .stage-copy {
    position: relative;
  }
  .stage-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -150px -100vw -1000px;
    background: linear-gradient(
      180deg,
      rgba(var(--stage-shade), 0) 0,
      rgba(var(--stage-shade), 0.62) 150px
    );
    pointer-events: none;
  }
}
@media (max-width: 850px) {
  .stage-hero .hero-description {
    margin-bottom: 28px;
  }
}
@media (max-width: 700px) {
  .stage-hero {
    min-height: max(600px, 100svh);
  }
  .stage-inner {
    gap: 32px;
    padding-block: calc(var(--stage-header) + 160px) 28px;
  }
  .stage-hero .eyebrow {
    margin-bottom: 18px;
  }
  .stage-hero h1 {
    margin-bottom: 18px;
  }
  .stage-paths {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .stage-paths a {
    min-height: 0;
    padding: 14px 14px 14px 20px;
  }
  .stage-paths svg {
    width: 18px;
    height: 18px;
    padding: 10px;
  }
}
@media (max-width: 540px) {
  .stage-page {
    --stage-header: 71px;
  }
}
.focus-section {
  padding-block: var(--space-section);
}
.focus-head {
  margin-bottom: var(--space-head);
  text-align: center;
}
.focus-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.focus-pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 48px 48px 42px;
  transition: background 0.2s;
}
/* rote Kante, die beim Drüberfahren von links einläuft */
.focus-pillar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.focus-pillar:is(:hover, :focus-visible)::before {
  transform: scaleX(1);
}
.focus-pillar + .focus-pillar {
  border-left: 1px solid var(--line);
}
.focus-pillar:is(:hover, :focus-visible) {
  background: #fcfbf9;
}
.focus-pillar:focus-visible {
  outline-offset: -4px;
}
.focus-kicker {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--red-text);
}
.focus-pillar h3 {
  margin-top: 16px;
  font-size: var(--fs-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.focus-pillar p {
  margin-top: 18px;
  max-width: 440px;
}
.focus-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
}
.focus-points li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--paper);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: border-color 0.25s;
}
.focus-pillar:is(:hover, :focus-visible) .focus-points li {
  border-color: var(--red-line);
}
.focus-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 34px;
  font-size: var(--fs-small);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s;
}
.focus-more svg {
  width: 18px;
  height: 18px;
  color: var(--red);
  transition: transform 0.2s;
}
.focus-pillar:is(:hover, :focus-visible) .focus-more {
  text-decoration-color: var(--red);
}
.focus-pillar:is(:hover, :focus-visible) .focus-more svg {
  transform: translateX(4px);
}
.section {
  padding-block: var(--space-section);
}
.section-top {
  /* Überschrift links, Einleitung rechts: Die Spalten übernehmen das Raster
     des Inhalts darunter, damit die Einleitung in der Flucht der rechten
     Spalte beginnt. Die letzte Textzeile steht auf der Grundlinie der
     Überschrift. */
  display: grid;
  grid-template-columns: var(--top-cols, repeat(2, minmax(0, 1fr)));
  align-items: last baseline;
  column-gap: var(--top-gap, 48px);
  margin-bottom: var(--space-head);
}
.section-top > p {
  grid-column: var(--top-text, auto);
  text-wrap: balance;
}
.section-top .eyebrow {
  margin-bottom: 22px;
}
/* Raster je nach Inhalt darunter */
.section-top:has(+ .private-service-grid) {
  --top-gap: 36px;
}
.section-top:has(+ .services-card-grid) {
  --top-gap: 22px;
}
.section-top:has(+ .services-development) {
  /* Einleitung in der Flucht der rechten Kartenspalte, Überschrift an der
     Seitenkante wie überall */
  --top-cols: minmax(0, 1.15fr) minmax(0, 1fr);
  --top-gap: 45px;
  --top-inset: 36px;
  padding-inline: var(--top-inset);
}
.section-top:has(+ .services-development) > :first-child {
  margin-left: calc(-1 * var(--top-inset));
}
.section-top:has(+ .invest-intro-note) {
  /* Einleitung beginnt mit dem zweiten Reiter des Rechners */
  --top-cols: minmax(0, calc(50% - 4px)) minmax(0, 1fr);
  --top-gap: 8px;
}
.section-top:has(+ .calc-draft-banner) {
  /* Einleitung steht über der rechten Spalte des Rechners */
  --top-cols: minmax(0, 1.65fr) minmax(270px, 0.85fr);
  --top-gap: 24px;
}
/* Inhalt in drei Spalten: Überschrift in der ersten, Einleitung ab der zweiten */
.section-top:is(
  :has(+ .about-process-grid),
  :has(+ .career-role-grid),
  :has(+ .about-audiences),
  :has(+ .services-card-grid)
) {
  --top-cols: repeat(3, minmax(0, 1fr));
  --top-text: 2 / -1;
}
.section-top:has(+ .about-process-grid) {
  --top-gap: 40px;
}
.section-top:has(+ .about-audiences) {
  --top-gap: 24px;
}
.section-top:has(+ .career-role-grid) {
  --top-gap: 22px;
}
.services-architecture .section-top {
  /* Architektur: zwei Karten nebeneinander */
  --top-cols: repeat(2, minmax(0, 1fr));
  --top-text: auto;
}
.section-top.services-audience-top {
  /* Leistungen: Überschrift über zwei Karten, Einleitung über der dritten */
  --top-text: 3 / -1;
}
.section-top.services-audience-top > h2 {
  grid-column: 1 / 3;
}
@media (max-width: 1150px) {
  .section-top:has(+ .private-service-grid) {
    --top-gap: 25px;
  }
  .section-top:has(+ .services-development) {
    --top-gap: 32px;
    --top-inset: 29px;
  }
  .section-top:has(+ .about-audiences) {
    --top-gap: 18px;
  }
  .section-top:has(+ .services-card-grid) {
    /* Bauausführung: ab hier zwei Karten nebeneinander */
    --top-cols: repeat(2, minmax(0, 1fr));
    --top-text: auto;
  }
}
@media (max-width: 1050px) {
  .section-top:has(+ .calc-draft-banner) {
    --top-cols: minmax(0, 1.5fr) minmax(250px, 0.85fr);
  }
}
@media (max-width: 980px) {
  .section-top:has(+ .career-role-grid) {
    --top-cols: repeat(2, minmax(0, 1fr));
    --top-text: auto;
  }
}
@media (max-width: 850px) {
  .section-top:has(+ .services-development) {
    --top-inset: 0px;
  }
}
.service-list {
  margin-block: 27px;
}
.service-list details {
  border-top: 1px solid #cccec5;
}
.service-list details:last-child {
  border-bottom: 1px solid #cccec5;
}
.service-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  min-height: 57px;
  padding-block: 10px;
  line-height: 1.5;
  font-weight: 600;
  transition: color 0.2s;
}
.service-list summary:hover {
  color: var(--red-text);
}
.service-list summary::-webkit-details-marker {
  display: none;
}
.service-list summary svg {
  width: 15px;
  color: var(--red);
  transition: transform 0.25s;
}
.service-list details[open]:not([data-closing]) summary svg {
  transform: rotate(45deg);
}
.service-list details p {
  padding: 0 30px 19px 0;
  max-width: 450px;
}
/* Foto und Schritte in der Flucht: Das Foto beginnt mit dem ersten Schritt und
   reicht bis unter den letzten */
.process-content {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: stretch;
}
.process-photo {
  display: flex;
  flex-direction: column;
}
.process-photo img {
  flex: 1;
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center bottom;
  border-radius: 10px;
}
.process-photo figcaption {
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.6;
  margin-top: 15px;
  max-width: 360px;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.step-index {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: var(--fs-text);
  font-weight: 700;
  line-height: 1;
  color: var(--red-text);
  margin-bottom: 22px;
}
/* Die Linie beginnt mit einem kurzen roten Stück und lädt sich beim
   Drüberfahren ganz rot auf */
.step-index i {
  flex: 1;
  height: 2px;
  background:
    linear-gradient(var(--red), var(--red)) left center / 28px 2px no-repeat,
    linear-gradient(var(--line), var(--line)) left center / 100% 1px no-repeat;
  transition: background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  :is(article, li):hover > .step-index i {
    background-size:
      100% 2px,
      100% 1px;
  }
}
.process-grid h3 {
  margin-bottom: 14px;
}
.planning-section {
  /* Abstand kommt aus den Abschnitten davor und danach */
  margin-block: 0;
  padding: 48px;
  background: var(--ink);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 56px;
  color: #fff;
}
.planning-section h2 {
  margin-bottom: 18px;
}
.planning-section p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.76);
}
/* Kostenrechner überall mit demselben roten Button (Daniel, 20.10.2026) */
.planning-section .planning-button {
  flex: none;
  margin-left: auto;
  min-height: 76px;
  padding: 14px 16px 14px 34px;
  gap: 40px;
  font-size: var(--fs-text);
  white-space: nowrap;
}
.planning-section .planning-button svg {
  width: 24px;
  height: 24px;
  padding: 10px;
}
.planning-section :focus-visible {
  outline-color: var(--white);
}
/* Kästen zwischen den Abschnitten (Kostenband, Bewerbungsband, Kontaktkasten)
   bekommen ihren Abstand sonst vom Abschnitt daneben. An einer farbigen Fläche
   oder unter einer Trennlinie halten sie ihn selbst und kleben nicht an der
   Kante. */
:is(.private-services, .faq-section, [data-line="bottom"])
  + :is(.planning-section, .private-cost, .services-contact) {
  margin-top: var(--space-section);
}
:is(.planning-section, .private-cost):has(+ .private-services) {
  margin-bottom: var(--space-section);
}
/* Trennlinie nur zwischen Abschnitten auf gleichem Grund: Vor einer farbigen
   Fläche ist die Kante selbst die Trennung */
.trust-section:has(+ .private-services) {
  border-bottom: 0;
}
.trust-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.trust-portrait {
  position: relative;
  min-height: 420px;
  border-radius: 12px;
  overflow: hidden;
}
.trust-portrait img {
  /* Das Foto füllt die Spalte neben dem Text: Die Texthöhe bestimmt die
     Höhe, Foto und Text schließen oben und unten bündig ab */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 20%;
}
.trust-portrait figcaption {
  position: absolute;
  inset: auto 20px 20px;
  padding: 17px 20px;
  background: rgba(250, 249, 246, 0.96);
  border-radius: 7px;
}
.trust-portrait strong,
.trust-portrait span {
  display: block;
}
.trust-portrait strong {
  font-size: var(--fs-small);
  font-weight: 600;
}
.trust-portrait span {
  font-size: var(--fs-small);
  color: var(--muted);
  margin-top: 3px;
}
.trust-copy h2 {
  margin-bottom: 23px;
}
.trust-intro {
  max-width: 560px;
}
.trust-principles {
  margin-top: 28px;
}
/* Grundsätze: kleine Ameise vor jedem Punkt; die Linie darüber lädt sich beim
   Drüberfahren rot auf wie die Ablaufschritte */
.trust-principles article {
  padding-block: 19px;
  background:
    linear-gradient(var(--red), var(--red)) left top / 28px 2px no-repeat,
    linear-gradient(var(--line), var(--line)) left top / 100% 1px no-repeat;
  transition: background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) {
  .trust-principles article:hover {
    background-size:
      100% 2px,
      100% 1px;
  }
}
.trust-principles article > div {
  position: relative;
  padding-left: 34px;
}
.trust-principles article > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 15px;
  background: url(/files/ameise.svg) left center / contain no-repeat;
}
.trust-principles h3 {
  line-height: 1.45;
  margin-bottom: 8px;
}
.trust-principles p {
  max-width: 470px;
}
.home-main .trust-portrait figcaption {
  border-left: 3px solid var(--red);
}
.faq-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  border-bottom: 1px solid var(--line);
}
.faq-intro > p:not(.eyebrow) {
  max-width: 340px;
  margin-top: 25px;
}
.faq-intro .text-link {
  margin-top: 25px;
}
/* FAQ mit Daniels Foto unter der Überschrift (Privat, Gewerbe, Investoren,
   Kostenrechner): Die Spalte beginnt auf der oberen Linie der Fragen, das
   Foto füllt den Rest und schließt unten mit der letzten Frage ab, auch
   wenn Antworten auf- und zugehen */
.faq-portrait {
  /* Untergrenze, damit Daniels Gesicht über der Bildunterschrift Platz hat */
  min-height: 240px;
  margin-top: 32px;
}
.faq-portrait img {
  /* Kopf auch im flachen Ausschnitt ganz im Bild, über der Bildunterschrift */
  object-position: 30% 18%;
}
@media (min-width: 541px) {
  .faq-intro:has(> .faq-portrait) {
    display: flex;
    flex-direction: column;
  }
  .faq-portrait {
    flex: 1 1 0;
  }
}
.faq-portrait figcaption {
  border-left: 3px solid var(--red);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:first-child {
  border-top: 1px solid var(--line);
}
.faq-list summary {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  padding-block: 24px;
  list-style: none;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.45;
  transition: color 0.2s;
}
.faq-list summary:hover {
  color: var(--red-text);
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary svg {
  box-sizing: content-box;
  flex: none;
  width: 14px;
  height: 14px;
  padding: 8px;
  border: 1px solid var(--red-line);
  border-radius: 50%;
  color: var(--red);
  transition:
    transform 0.2s,
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.faq-list details[open]:not([data-closing]) summary svg {
  transform: rotate(45deg);
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
@media (hover: hover) {
  .faq-list summary:hover svg {
    border-color: var(--red);
  }
}
.faq-list details p {
  padding: 0 38px 25px 0;
}
.location-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  /* Karte so hoch wie der Text daneben: oben und unten bündig */
  align-items: stretch;
}
.location-copy h2 {
  margin-bottom: 23px;
}
.location-copy h2 span {
  display: block;
  text-wrap: balance;
}
.location-copy p {
  max-width: 420px;
}
.location-copy .text-link {
  margin-top: 25px;
}
/* Kartenrahmen: ruhige Linie, beim Drüberfahren rot */
.location-section .office-map::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 0.25s;
}
.location-section .office-map:hover::after {
  border-color: var(--red);
}
.location-section .office-map-card a svg {
  color: var(--red);
}
.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  /* Textspalte so hoch wie das Formular: Daniel und die Kontaktzeilen
     schließen unten bündig mit dem Formular ab */
  align-items: stretch;
  gap: 64px;
}
.contact-left {
  display: flex;
  flex-direction: column;
}
.contact-section h2 {
  margin-bottom: 24px;
}
/* Die Linie unter jeder Kontaktzeile lädt sich beim Drüberfahren rot auf */
.contact-options > a {
  display: block;
  padding-block: 18px;
  background:
    linear-gradient(var(--red), var(--red)) left bottom / 28px 2px no-repeat,
    linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat;
  transition: background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-options small {
  font-size: var(--fs-small);
  color: var(--red-text);
}
.contact-options a > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
}
.contact-options a > span svg {
  color: var(--red);
  transition: transform 0.2s;
}
.contact-options > a:is(:hover, :focus-visible) {
  background-size:
    100% 2px,
    100% 1px;
}
.contact-options > a:is(:hover, :focus-visible) > span svg {
  transform: translateX(3px);
}
.contact-options a:hover > span {
  color: var(--red-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-options {
  margin-top: 25px;
}
.contact-form {
  padding: 35px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  min-width: 0;
}
.contact-form .eyebrow {
  margin-bottom: 14px;
}
.contact-form h3 {
  margin-bottom: 15px;
}
.form-intro {
  margin-bottom: 27px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px 17px;
}
.form-field {
  min-width: 0;
}
.form-field.full {
  grid-column: 1 / -1;
}
.form-field label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 8px;
}
.form-field label > span {
  color: var(--muted);
  font-weight: 400;
  margin-left: 5px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #cdd0c8;
  border-radius: 5px;
  background: #fafbf8;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-text);
  line-height: 1.6;
  min-height: 47px;
}
.contact-form select {
  padding-right: 24px;
}
.project-select {
  position: relative;
}
.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #cdd0c8;
  border-radius: 7px;
  background: #fafbf8;
  color: var(--ink);
  font-size: var(--fs-text);
  line-height: 1.6;
  text-align: left;
  min-height: 49px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.select-trigger:hover,
.select-trigger[aria-expanded="true"] {
  border-color: var(--red);
  background: white;
}
.select-trigger svg {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.select-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.select-options {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  list-style: none;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 16px 38px rgba(40, 44, 41, 0.14);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: select-reveal 160ms ease-out;
}
.select-options[hidden] {
  display: none;
}
.select-options.opens-up {
  top: auto;
  bottom: calc(100% + 8px);
}
.select-options [role="option"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: var(--fs-text);
  line-height: 1.5;
  cursor: pointer;
}
.select-options [role="option"]::after {
  content: "";
  width: 6px;
  height: 11px;
  flex: none;
  margin-right: 4px;
  border: solid transparent;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.select-options [aria-selected="true"] {
  color: var(--red-text);
  font-weight: 600;
}
.select-options [aria-selected="true"]::after {
  border-color: currentColor;
}
.select-options [data-active],
.select-options [role="option"]:hover {
  background: var(--red-tint);
  color: var(--red-text);
}
@keyframes select-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.contact-form textarea {
  resize: vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #767b72;
  opacity: 1;
}
.contact-form :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.form-privacy {
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-block: 18px 23px;
}
.form-privacy a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-form > .button {
  width: 100%;
  justify-content: space-between;
}
.contact-form button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.form-submission-note {
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-top: 15px;
}
#contact-status {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-block: 15px;
}
#contact-status:empty,
.contact-form [hidden] {
  display: none;
}
#contact-status[data-error] {
  color: #a41b31;
}
.contact-receipt {
  margin-block: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.site-footer {
  background: #eeeee7;
}
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px;
  padding-block: 40px 32px;
}
.footer-brand a {
  display: inline-block;
}
.footer-brand img {
  width: 168px;
  height: auto;
  object-fit: contain;
}
.footer-brand p {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.6;
  text-wrap: balance;
}
.footer-main address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--fs-small);
  font-style: normal;
  line-height: 1.6;
}
.footer-main h2 {
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: normal;
  margin-bottom: 8px;
}
.footer-main address > :not(h2) {
  padding-block: 3px;
}
.footer-main a:hover,
.footer-bottom a:hover {
  color: var(--red-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom {
  border-top: 1px solid #d2d5c9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px 24px;
  padding-block: 12px;
  color: var(--muted);
  font-size: var(--fs-small);
}
.footer-links,
.footer-links nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
}
/* Antwerker-Akzente: rotes W, Ameisen, W², Karte */
::selection {
  background: var(--red);
  color: var(--white);
}
a:is(:hover, :focus-visible) {
  /* jede Unterstreichung, die ein Link beim Drüberfahren zeigt, wird rot */
  text-decoration-color: var(--red) !important;
}
.footer-company {
  font-weight: 600;
  color: var(--ink);
}
.footer-reach {
  color: var(--muted);
}
/* Trennlinien laden sich beim Scrollen rot auf (data-line="top" oder "bottom") */
[data-line] {
  position: relative;
}
.line-fill {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 2px;
  background: var(--red);
  transform: scaleX(var(--line-fill, 0));
  transform-origin: left center;
  transition: transform 0.18s ease-out;
  pointer-events: none;
}
[data-line="top"] > .line-fill {
  top: -1px;
}
[data-line="bottom"] > .line-fill {
  bottom: -1px;
}
.cost-mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 104px;
  height: 116px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  transform: rotate(-5deg);
}
.cost-mark img {
  width: 56px;
  height: auto;
  margin: 0 10px 16px 0;
}
.cost-mark sup {
  position: absolute;
  top: 20px;
  right: 14px;
  font-size: var(--fs-text);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.cost-mark i {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 18px;
  height: 1px;
  background: var(--red);
}
.cost-mark i + i {
  bottom: 12px;
  right: 46px;
  background: rgba(255, 255, 255, 0.35);
}
.cost-mark.is-light {
  border-color: rgba(40, 44, 41, 0.28);
}
.cost-mark.is-light sup {
  color: var(--ink);
}
.cost-mark.is-light i + i {
  background: rgba(40, 44, 41, 0.28);
}
/* Kostenband: W² frei auf dem dunklen Grund, ohne Kärtchen */
.cost-mark.is-plain {
  width: auto;
  height: auto;
  padding-right: 30px;
  border: 0;
  transform: none;
}
.cost-mark.is-plain img {
  width: 92px;
  margin: 0;
}
.cost-mark.is-plain sup {
  top: -4px;
  right: 0;
  font-size: var(--fs-head);
}
.office-map {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  border-radius: var(--radius);
  background: #efeee8;
  isolation: isolate;
}
.office-map-base {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 1600px;
  max-width: none;
  height: 900px;
  transform: translate(-50%, -50%);
  user-select: none;
}
.office-map-pin {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 48px;
  height: auto;
  transform: translate(-50%, -96%);
  filter: drop-shadow(0 3px 4px rgba(40, 44, 41, 0.25));
}
.office-map-card {
  position: absolute;
  left: 50%;
  bottom: calc(42% + 62px);
  display: grid;
  gap: 2px;
  padding: 14px 18px 12px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 12px 30px -14px rgba(40, 44, 41, 0.4);
  font-size: var(--fs-small);
  line-height: 1.5;
  white-space: nowrap;
  transform: translateX(-50%);
}
.office-map-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  border: 8px solid transparent;
  border-top-color: var(--white);
  transform: translateX(-50%);
}
.office-map-card strong {
  font-weight: 600;
}
.office-map-card > span {
  color: var(--muted);
}
.office-map-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.office-map-card a svg {
  width: 14px;
  height: 14px;
}
.office-map-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(250, 249, 246, 0.88);
  font-size: var(--fs-small);
  color: var(--muted);
}
.office-map-credit a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Karten: roter Rand beim Drüberfahren, die Pfeile werden rot */
html
  :is(
    .about-audience,
    .services-card,
    .services-strategies a,
    .private-service-card,
    .career-role-card
  ) {
  transition:
    border-color 0.25s,
    box-shadow 0.25s,
    transform 0.25s;
}
html :is(.about-audience, .services-strategies a):is(:hover, :focus-visible),
html
  :is(.services-card, .private-service-card, .career-role-card):is(
    :hover,
    :focus-within
  ) {
  border-color: var(--red);
  box-shadow: 0 26px 48px -34px rgba(139, 24, 44, 0.55);
}
html :is(.about-audience, .services-strategies a):is(:hover, :focus-visible) {
  transform: translateY(-3px);
}
html
  :is(
    .about-audience,
    .services-card,
    .private-service-card,
    .career-role-card
  ):hover
  .text-link
  svg {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
/* kleine Fettlabels in Karten */
:is(.services-check, .career-role-facts) strong {
  color: var(--red-text);
}
/* Easteregg: „ameise“ tippen, dann zieht eine Ameisenstraße durchs Bild */
.ant-parade {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  height: 56px;
  overflow: hidden;
  pointer-events: none;
}
.ant-parade-ant {
  position: absolute;
  left: -80px;
  bottom: 10px;
  width: 30px;
  animation: ant-parade 14s linear forwards;
}
.ant-parade-ant img {
  display: block;
  width: 100%;
  height: auto;
}
.ant-parade-ant .ant-parade-w {
  position: absolute;
  left: 4px;
  bottom: 15px;
  width: 17px;
  transform: rotate(-6deg);
}
@keyframes ant-parade {
  to {
    transform: translateX(calc(100vw + 160px));
  }
}
/* Easteregg: Ameisen laufen auf der Karte die Konsul-Smidt-Straße entlang ins Büro */
.office-map-trail {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 1600px;
  height: 900px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.office-map-ant {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  offset-path: path(
    "M1017 596 L1006 592 L994 582 L981 572 L968 561 L959 553 L949 545 L946 543 L939 537 L930 529 L910 513 L906 510 L903 507 L900 504 L880 488 L856 469 L849 463 L841 456 L838 453 L834 450 L831 448 L822 440 L805 426 L800 452"
  );
  offset-rotate: auto 180deg;
  offset-anchor: 50% 100%;
  opacity: 0;
  animation: map-trail 8s linear infinite;
}
.office-map-ant:nth-child(2) {
  animation-delay: -2.7s;
}
.office-map-ant:nth-child(3) {
  animation-delay: -5.4s;
}
.office-map-ant img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}
@keyframes map-trail {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  6%,
  90% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@media (max-width: 1300px) {
  .desktop-nav {
    gap: 18px;
  }
  .button.header-calc,
  .button.small.outline.header-cta {
    padding-inline: 16px;
  }
  .button.header-calc svg,
  .button.header-cta svg {
    display: none;
  }
}
@media (max-width: 1150px) {
  :root {
    --space-section: 64px;
    --space-hero-top: 56px;
    --space-head: 32px;
    --space-crumb: 18px;
  }
  .wrap {
    width: calc(100% - 64px);
  }
  .desktop-nav {
    gap: 16px;
    margin-right: 12px;
  }
  .brand-logo {
    width: 225px;
  }
  .process-content {
    gap: 40px;
  }
  .process-photo img {
    /* schmale Spalten: Foto behält sein Format statt hochkant beschnitten
       zu werden */
    flex: none;
  }
  .process-grid {
    gap: 25px;
  }
  .planning-section {
    padding: 40px;
    gap: 40px;
  }
  .focus-pillar {
    padding: 40px 36px 36px;
  }
  .contact-section {
    gap: 45px;
  }
}
@media (max-width: 1050px) {
  .desktop-nav,
  .button.header-cta {
    display: none;
  }
  .button.header-calc {
    margin-left: auto;
  }
  .header-inner {
    height: 75px;
  }
  .brand-logo {
    width: 200px;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-small);
  }
  .button.header-calc {
    padding: 7px 7px 7px 16px;
  }
  .button.header-calc .header-calc-arrow {
    display: block;
  }
  .menu-icon {
    width: 22px;
    display: grid;
    gap: 6px;
  }
  .menu-toggle i {
    height: 1px;
    background: var(--ink);
    transition: transform 0.2s;
  }
  .menu-toggle[aria-expanded="true"] i:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] i:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  /* Handy-Menü: dunkle Fläche über dem ganzen Bildschirm unter dem Header.
     Solange es offen ist (Klasse aus antwerker-ui.js), wird der Header
     ebenfalls dunkel; ohne Weichzeichner, damit die feste Fläche sich auf
     das Fenster bezieht und nicht auf den Header. */
  html.menu-locked {
    overflow: hidden;
  }
  .site-header {
    transition: background-color 0.28s;
  }
  .site-header.is-menu-open {
    background: var(--ink);
    border-bottom-color: var(--ink);
    backdrop-filter: none;
  }
  .site-header.is-menu-open .brand-logo {
    fill: var(--white);
  }
  .site-header.is-menu-open .menu-toggle {
    color: var(--white);
  }
  .site-header.is-menu-open .menu-toggle i {
    background: var(--white);
  }
  .site-header.is-menu-open :is(a, button):focus-visible {
    outline-color: var(--white);
  }
  .mobile-nav {
    --menu-top: 76px;
    position: fixed;
    inset: var(--menu-top) 0 0;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink);
    color: var(--white);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .mobile-nav.is-open {
    opacity: 1;
    transition-duration: 0.28s;
  }
  .mobile-nav-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-block: 16px 28px;
  }
  .mobile-nav-inner > * {
    max-width: 640px;
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.15s,
      transform 0.15s;
  }
  .mobile-nav.is-open .mobile-nav-inner > * {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mobile-nav.is-open .mobile-nav-inner > :nth-child(2) {
    transition-delay: 40ms;
  }
  .mobile-nav.is-open .mobile-nav-inner > :nth-child(3) {
    transition-delay: 80ms;
  }
  .mobile-nav.is-open .mobile-nav-inner > :nth-child(4) {
    transition-delay: 120ms;
  }
  .mobile-nav.is-open .mobile-nav-inner > :nth-child(5) {
    transition-delay: 160ms;
  }
  .mobile-nav.is-open .mobile-nav-inner > :nth-child(6) {
    transition-delay: 200ms;
  }
  /* Hauptwege mit Ladelinie: kurzes rotes Stück, auf der aktuellen Seite
     ganz rot */
  .mobile-nav-main {
    display: grid;
    gap: 6px;
    padding-block: 20px;
    background:
      linear-gradient(var(--red), var(--red)) left top / 28px 2px no-repeat,
      linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)) left
        top / 100% 1px no-repeat;
  }
  .mobile-nav-main strong {
    font-size: var(--fs-head);
    font-weight: 600;
    line-height: 1.1;
  }
  .mobile-nav-main small {
    font-size: var(--fs-small);
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
  }
  .mobile-nav-main[aria-current="page"] {
    background-size:
      100% 2px,
      100% 1px;
  }
  .mobile-nav-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    padding-block: 8px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .mobile-nav-more a {
    position: relative;
    padding-block: 12px;
    font-size: var(--fs-text);
    font-weight: 600;
  }
  .mobile-nav-more a[aria-current="page"] {
    padding-left: 13px;
  }
  .mobile-nav-more a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    border-radius: 2px;
    background: var(--red);
  }
  .button.mobile-nav-calc {
    width: 100%;
    justify-content: space-between;
    padding-left: 22px;
    box-shadow: none;
  }
  .button.mobile-nav-calc[aria-current="page"] {
    background: var(--red-dark);
    border-color: var(--red-dark);
  }
  .mobile-nav-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 24px;
    margin-block: auto 0;
    padding-top: 32px;
  }
  .mobile-nav-contact a {
    padding-block: 10px;
    font-size: var(--fs-small);
    color: rgba(255, 255, 255, 0.7);
  }
  .mobile-nav-contact a:is(:hover, :focus-visible) {
    color: var(--white);
  }
  @media (max-width: 540px) {
    .mobile-nav {
      --menu-top: 71px;
    }
  }
}
@media (max-width: 960px) {
  .planning-section {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px 40px;
  }
  .planning-section .planning-button {
    grid-column: 2;
    justify-self: start;
    margin-left: 0;
  }
}
@media (max-width: 850px) {
  .hero-actions {
    gap: 14px 16px;
  }
  .focus-board {
    grid-template-columns: 1fr;
  }
  .focus-pillar + .focus-pillar {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .section-top {
    display: block;
  }
  .section-top > p {
    margin-top: 22px;
  }
  .process-content {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px;
  }
  .trust-section,
  .faq-section {
    gap: 40px;
    grid-template-columns: 1fr 1fr;
  }
  .location-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .location-section .office-map {
    height: 400px;
  }
  .contact-section {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .contact-options {
    max-width: 100%;
  }
  .contact-form {
    padding: 30px;
  }
}
@media (max-width: 600px) {
  .menu-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 540px) {
  :root {
    --space-section: 48px;
    --space-hero-top: 48px;
    --space-head: 28px;
    --space-crumb: 14px;
  }
  html {
    scroll-padding-top: 90px;
  }
  .wrap {
    width: calc(100% - 40px);
  }
  .header-inner {
    height: 70px;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .hero-actions .button {
    flex: 1 1 220px;
    justify-content: space-between;
    min-height: 52px;
    padding: 10px 10px 10px 18px;
    gap: 15px;
  }
  .hero-actions .text-link {
    gap: 8px;
  }
  .focus-pillar {
    padding: 30px 22px 28px;
  }
  .focus-more {
    padding-top: 26px;
  }
  .eyebrow {
    margin-bottom: 19px;
  }
  .section-top .eyebrow {
    margin-bottom: 19px;
  }
  .service-list summary {
    min-height: 56px;
  }
  .trust-section,
  .faq-section {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .trust-portrait {
    max-width: 360px;
    min-height: 0;
    margin-inline: auto;
  }
  .trust-portrait img {
    position: static;
    height: auto;
    aspect-ratio: 5 / 4;
    object-position: center 22%;
  }
  .trust-portrait figcaption {
    position: static;
    padding: 18px;
    border-radius: 0;
    background: var(--soft);
  }
  .faq-portrait {
    margin-top: 28px;
  }
  .trust-principles article {
    gap: 17px;
  }
  .location-section {
    gap: 28px;
  }
  .location-section .office-map {
    height: 360px;
  }
  .faq-list summary {
    padding-block: 20px;
    gap: 17px;
  }
  .faq-list details p {
    padding-right: 15px;
  }
  .contact-form {
    padding: 23px 18px;
  }
  .form-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .process-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .step-index {
    margin-bottom: 18px;
  }
  .process-grid h3 {
    line-height: 1.25;
  }
  .planning-section {
    grid-template-columns: minmax(0, 1fr);
    padding: 34px 22px;
    gap: 24px;
  }
  .cost-mark.is-plain {
    justify-self: start;
    padding-right: 22px;
  }
  .cost-mark.is-plain img {
    width: 60px;
  }
  .planning-section .planning-button {
    grid-column: auto;
    width: 100%;
    justify-content: space-between;
    min-height: 66px;
    padding-left: 22px;
  }
  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px 16px;
    padding-block: 32px 28px;
  }
  .footer-brand img {
    width: 150px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-block: 10px 12px;
  }
  .footer-links,
  .footer-links nav {
    gap: 20px;
  }
}
@media (max-width: 480px) {
  .header-inner {
    gap: 8px;
  }
  .brand-logo {
    width: min(225px, calc(100vw - 168px));
  }
  .button.header-calc {
    width: 44px;
    min-height: 44px;
    padding: 0;
    gap: 0;
  }
  .header-calc-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .button.header-calc .header-calc-arrow {
    display: none;
  }
  .button.header-calc .header-calc-icon,
  .button.header-calc:is(:hover, :focus-visible) .header-calc-icon {
    display: block;
    width: 22px;
    height: 22px;
    padding: 0;
    background: none;
    color: var(--white);
    transform: none;
  }
  .menu-toggle {
    min-width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .button:is(:hover, :focus-visible) {
    transform: none;
  }
}

/* Runde 6: Startseite */
/* „Ein ganzes Werk. Aus einer starken Hand.“ als Titel über Daniel und Team */
.werk-head {
  padding-top: var(--space-section);
  text-align: center;
}
.werk-title {
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}
.werk-head + .trust-section {
  padding-top: var(--space-head);
}
/* Grundsätze auf der Startseite ohne Ameisen davor (Daniel, Runde 6) */
.home-main .trust-principles article > div {
  padding-left: 0;
}
.home-main .trust-principles article > div::before {
  content: none;
}

/* Antwerker. Ihr zuverlässiger Partner */
.partner-title {
  margin-bottom: var(--space-head);
  font-weight: 400;
  line-height: 1.15;
}
.partner-title img {
  width: min(100%, 560px);
  height: auto;
}
.partner-title span {
  display: block;
  margin-top: 14px;
}
.partner-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: stretch;
}
.partner-copy {
  padding-right: 56px;
  border-right: 1px solid var(--line);
}
.partner-copy p + p,
.partner-copy p + h3 {
  margin-top: 20px;
}
.partner-copy h3 {
  margin-bottom: 8px;
}
.partner-copy .partner-close {
  margin-top: 28px;
  color: var(--ink);
  font-weight: 600;
}
.partner-photo {
  position: relative;
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
}
.partner-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: 50% 40%;
}

/* Was wir anbieten? Jede Leistung ist eine eigene Karte: Foto auf der
   einen, Titel mit rotem Strich und Text auf der anderen Seite, im Wechsel
   (erste Karte Foto links, zweite Foto rechts usw.). Auf dem Handy steht das
   Foto über dem Text. Der Strich ist derselbe wie auf den Karten der
   Privatseite. */
.offer-section {
  background: var(--soft);
}
.offer-section h2 {
  margin-bottom: var(--space-head);
}
.offer-list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer-item {
  display: grid;
  /* Fotospalte etwas schmaler: Foto (3:2) und Text sind so etwa gleich hoch */
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  align-items: center;
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
}
.offer-photo {
  width: 100%;
  height: 100%;
  align-self: stretch;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.offer-item:nth-child(even) {
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
}
.offer-item:nth-child(even) .offer-photo {
  order: 2;
}
.offer-text {
  padding: 40px 48px;
}
.offer-item h3 {
  margin-bottom: 20px;
}
.offer-text p + p {
  margin-top: 20px;
}
.offer-item h3::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-top: 18px;
  background: var(--red);
  transition: width 0.3s;
}
@media (hover: hover) {
  .offer-item:hover h3::after {
    width: 64px;
  }
}
.offer-item strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 760px) {
  .offer-item,
  .offer-item:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
  }
  .offer-photo,
  .offer-item:nth-child(even) .offer-photo {
    order: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .offer-text {
    padding: 24px 22px 28px;
  }
}
@media (max-width: 960px) {
  .partner-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .partner-copy {
    padding-right: 0;
    border-right: 0;
  }
  .partner-photo {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}