/* ============================================================
   OFFCON  ·  Kirsten Laarmanns  ·  Freie Buchhalterin
   Designkonzept: "Editorial Ledger"
   Navy-Tinte auf Papier, Gold als Signalfarbe,
   Kontolinien als grafisches Leitmotiv, keine Rundungen.
   ============================================================ */

:root {
  --ink: #16305e;
  --ink-deep: #0e2247;
  --ink-soft: #46618f;
  --gold: #e8b93c;
  --gold-deep: #c99a1d;
  --paper: #faf8f2;
  --paper-warm: #f3efe4;
  --line: rgba(22, 48, 94, 0.16);
  --line-strong: rgba(22, 48, 94, 0.35);
  --white: #ffffff;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Jost", "Helvetica Neue", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;

  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(5rem, 12vh, 9rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--ink-deep); }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Typografie ---------- */

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }

.display-xl { font-size: clamp(2.6rem, 7.2vw, 6rem); }
.display-lg { font-size: clamp(2.1rem, 4.6vw, 3.9rem); }
.display-md { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }

.italic { font-style: italic; }
.gold { color: var(--gold-deep); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
/* Elementor nullt die Marge jedes Widgets mit
   `.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }`.
   Diese Regel hat drei Klassen, unsere `.eyebrow` nur eine und verlor. Auf
   allen Seiten stand deshalb 0px statt des vorgesehenen Abstands, die
   Kachelzeilen klebten an den Überschriften. Vier Klassen stechen das aus. */
.elementor.elementor .elementor-widget.eyebrow { margin-bottom: 2.2rem; }
.eyebrow::before {
  content: "";
  width: 2.6rem;
  height: 7px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='7' viewBox='0 0 42 7'%3E%3Cpath d='M0 3.5 Q 3.5 0.8 7 3.5 T 14 3.5 T 21 3.5 T 28 3.5 T 35 3.5 T 42 3.5' fill='none' stroke='%23e8b93c' stroke-width='1.4'/%3E%3C/svg%3E") left center / contain no-repeat;
}
.eyebrow .num { color: var(--gold-deep); }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 42rem; }

/* ---------- Layout ---------- */

.wrap { max-width: 84rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: var(--section); padding-bottom: var(--section); position: relative; }
.section-line { border-top: 1px solid var(--line); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(250, 248, 242, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--gutter);
  max-width: 84rem;
  margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand-icon { height: 46px; width: auto; mix-blend-mode: multiply; }
.brand-word {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.3em;
  color: var(--ink);
  white-space: nowrap;
}
.brand-word i { font-style: normal; color: var(--ink); }
.brand-word em { font-style: normal; color: var(--gold); }
.brand-claim {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-left: 1px solid var(--line-strong);
  padding-left: 0.85rem;
}
@media (max-width: 640px) { .brand-claim { display: none; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); }
.nav a {
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  position: relative;
  padding: 0.3rem 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); transform-origin: left; }

.nav .cta {
  border: 1px solid var(--ink);
  padding: 0.55rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s;
}
.nav .cta:hover { background: var(--ink); color: var(--gold); }
.nav .cta::after { display: none; }

.burger { display: none; background: none; border: 1px solid var(--ink); width: 44px; height: 44px; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--ink); transition: 0.3s; }
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
.burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: block; }
  .nav {
    position: fixed;
    inset: 73px 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem var(--gutter) 2rem;
    gap: 1.1rem;
    transform: translateY(-130%);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .nav.open { transform: translateY(0); }
}

/* ---------- Hero (Startseite) ---------- */

.hero {
  /* Randzone, die links und rechts neben dem zentrierten .wrap frei bleibt,
     sobald der Bildschirm breiter als 84rem ist. Das Foto rückt genau um
     diesen Betrag ein, damit seine rechte Kante mit der Navigation und dem
     Satzspiegel der Seite abschließt statt am Bildschirmrand zu kleben. */
  --page-side: max(0px, (100vw - 84rem) / 2);
  --photo-gap: clamp(2rem, 4vw, 4rem);
  /* Nutzbare Inhaltsbreite der Seite, also .wrap ohne seine Gutter. */
  --content-w: calc(min(84rem, 100vw) - 2 * var(--gutter));
  /* Das Foto darf nie mehr als 44 % des Satzspiegels belegen. Vorher war es
     auf feste 660px gedeckelt; da es jetzt innerhalb der Seitenbreite sitzt,
     würde das der Textspalte auf großen Bildschirmen zu viel wegnehmen. */
  --photo-w: clamp(320px, 40vw, calc(var(--content-w) * 0.44));
  /* Platz, den die Textspalte links vom Foto tatsächlich hat:
     Inhaltsbreite minus Foto minus Lücke. */
  --hero-text-max: calc(var(--content-w) - var(--photo-w) - var(--photo-gap));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-top: 8rem;
  padding-bottom: 4rem;
  overflow: hidden;
}

/* Die Szene ist Hintergrund und liegt unter allem: unter dem Foto und unter
   der Textspalte. Was von Säulen und Pfeil hinter das Foto gerät, bleibt
   verdeckt. `pointer-events: none` hält die Ebene durchlässig. */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* .hero ist ein Flex-Container, .wrap bringt margin:0 auto mit. Ohne
   width:100% schrumpft die Spalte auf Inhaltsbreite und rutscht mittig
   nach rechts ins Foto. */
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-content > * { max-width: var(--hero-text-max); }
.hero-content > .lead { max-width: min(42rem, var(--hero-text-max)); }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 6rem); line-height: 1.14; }
/* Der Elementor-Editor erzeugt beim Kursivstellen ein blankes <em> ohne Klasse.
   In Displayzeilen soll das dieselbe goldene Betonung sein wie .italic.gold. */
.display-xl em, .display-lg em { font-style: italic; color: var(--gold); }
.hero h1 .line { display: block; overflow: hidden; padding: 0.06em 0; margin: -0.04em 0; }
.hero h1 .line > span { display: inline-block; }

/* Die Kachelzeile steht im Hero vor der größten Überschrift der Seite. Der
   globale Abstand von 1,6rem wirkt dort gedrängt, zusätzlich zieht die
   Zeilenmaske der H1 oben 0,04em zurück. Deshalb hier ein eigener, mit der
   Schriftgröße mitwachsender Abstand. */
.hero .eyebrow,
.elementor.elementor .hero-content .elementor-widget.eyebrow {
  margin-bottom: clamp(2.6rem, 3.2vw, 3.4rem);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-meta .meta-item { border-left: 2px solid var(--gold); padding-left: 1rem; }
/* Elementor schachtelt eigene Wrapper-Divs in jedes Widget. Der Rahmen hängt
   deshalb an einer Klasse statt am Elementtyp, sonst bekäme jedes verschachtelte
   div dieselbe Goldkante. */

.hero-photo {
  position: absolute;
  right: calc(var(--gutter) + var(--page-side));
  /* Spannt den Inhaltsbereich der Sektion auf (Innenabstand oben 8rem,
     unten 4rem) und zentriert das Bild darin. Dadurch liegt es auf einer
     Höhe mit der Textspalte, klebt nicht mehr am Laufband und gibt die
     Säulen im Hintergrund wieder frei. Kein transform, damit die
     Einblend-Animation in main.js freie Bahn hat. */
  top: 8rem;
  bottom: 4rem;
  display: flex;
  align-items: center;
  width: var(--photo-w);
  z-index: 1;
}
.hero-photo figure { position: relative; width: 100%; }
.hero-photo img { filter: saturate(0.92); }
.hero-photo .frame {
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 1px solid var(--gold);
  z-index: -1;
}
.hero-photo figcaption {
  position: absolute;
  left: -14px;
  bottom: -1px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
}
.hero-photo figcaption b { color: var(--gold); font-weight: 400; }
/* Ab hier wird die Textspalte neben dem größeren Foto zu eng, das Bild
   rutscht unter den Text. */
@media (max-width: 1200px) {
  .hero-content > * { max-width: none; }
  .hero-content > .lead { max-width: 42rem; }
  .hero h1 { font-size: clamp(2.6rem, 7.2vw, 6rem); }
  .hero-photo {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    display: block;
    margin-top: 3rem;
    margin-left: calc(var(--gutter) + 14px);
    width: min(560px, 80%);
  }
}

/* Auf schmalen Bildschirmen steht das Foto einspaltig unter dem Text und wird
   dort mittig gesetzt: gleicher Rand links wie rechts, gemessen am Bild selbst.
   Der erste Anlauf hat stattdessen den Goldrahmen auf den linken Gutter gelegt;
   rechnerisch war das ausgeglichen, das Bild saß dadurch aber 14px rechts der
   Mitte und sah genau so aus. Der Rahmen ragt jetzt wie überall 14px nach links
   über das Bild hinaus und steht damit vor dem Gutter, das ist der Sinn des
   versetzten Rahmens.

   Der Beschriftungsbalken ist inhaltsbreit und stieß an diese Kante, deshalb
   stand er zweizeilig. Mit etwas weniger Sperrung und Innenabstand passt er in
   eine Zeile, unter 320px Bildschirmbreite bricht er weiterhin um.

   Der Scrollhinweis entfällt: Er lag halb hinter dem Foto, und auf dem Handy
   scrollt niemand auf Zuruf. */
@media (max-width: 760px) {
  .hero-photo {
    width: calc(100% - 2 * var(--gutter));
    margin-left: var(--gutter);
    margin-right: var(--gutter);
  }
  .hero-photo figcaption {
    letter-spacing: 0.1em;
    padding: 0.55rem 0.9rem;
  }
}

.scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: var(--gutter);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.scroll-hint::after { content: ""; width: 1px; height: 3rem; background: var(--line-strong); animation: drop 2s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
/* Muss hinter der Grundregel stehen, sonst gewinnt deren `display: flex`. */
@media (max-width: 760px) { .scroll-hint { display: none; } }

/* ---------- Marquee ---------- */

.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 1.1rem 0;
  background: var(--white);
}
.marquee-track { display: flex; gap: 3.5rem; width: max-content; will-change: transform; }
.marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3.5rem;
}
.marquee-track span::after { content: "·"; color: var(--gold-deep); font-size: 1.2rem; }

/* ---------- Ledger-Zeilen (Leistungsteaser) ---------- */

.ledger { border-top: 1px solid var(--line-strong); }
.ledger-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  position: relative;
  transition: padding-left 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.ledger-row::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: -1px;
  width: 0;
  background: var(--ink);
  transition: width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.ledger-row:hover { padding-left: 1.4rem; }
/* Die Zeile ist ein <a>, und Blocksy färbt jeden Link beim Überfahren mit
   seiner eigenen Linkfarbe (#1559ed). Dadurch sprang der Text der ganzen
   Zeile auf Blau. Der Effekt der Zeile ist der Einzug und der wandernde
   Pfeil, kein Farbwechsel. `inherit` ist hier robuster als eine feste Farbe:
   Es liefert genau das, was ohne Überfahren gilt, weil `a { color: inherit }`
   die Zeile ohnehin aus ihrem Umfeld einfärbt. Zwei Klassen schlagen
   Blocksys `a:hover`. */
.ledger-row:hover,
.ledger-row:focus,
.ledger-row:focus-visible,
.ledger-row:active { color: inherit; }
.ledger-row .idx { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold-deep); }
.ledger-row h3 { font-size: clamp(1.35rem, 2.4vw, 2rem); }
.ledger-row p { color: var(--ink-soft); font-size: 0.98rem; }
.ledger-row .arrow { font-family: var(--font-mono); font-size: 1.1rem; transition: transform 0.35s; }
.ledger-row:hover .arrow { transform: translateX(8px); color: var(--gold-deep); }
/* Auf WordPress sind die Kinder der Zeile Elementor-Wrapper-Divs und keine
   h3/p, deshalb greift eine Regel auf `p` dort nicht. Ohne feste Platzierung
   zog die Beschreibungsspalte (`auto`) ihre volle max-content-Breite an sich,
   die Überschriftenspalte fiel auf 0 zusammen und die Überschrift brach
   Buchstabe für Buchstabe senkrecht um. Die Kinder werden hier deshalb über
   ihre Reihenfolge angesprochen, das trifft beide Fassungen: Überschrift und
   Pfeil in Zeile 1, Beschreibung darunter über die volle Breite. */
@media (max-width: 760px) {
  .ledger-row {
    grid-template-columns: 1fr auto;
    gap: 0.6rem 1.2rem;
    align-items: center;
    padding: 1.7rem 0;
  }
  .ledger-row > *:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; }
  .ledger-row > *:nth-child(3) { grid-column: 2; grid-row: 1; }
  .ledger-row > *:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Zahlen / Stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}
.stat {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.4rem 1.8rem;
  background: var(--white);
}
.stat .value { font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1; }
.stat .value em { font-style: normal; color: var(--gold-deep); }
.stat .label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-top: 1rem; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* Zweispaltig bleibt pro Kachel nur gut 110px Textbreite. Die gesperrten
   Beschriftungen sind länger als das, „Berufserfahrung" brach dort mitten im
   Wort um. Unter 560px steht deshalb eine Kachel pro Zeile. */
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .stat { padding: 2rem 1.8rem; }
}

/* ---------- Dunkle Sektion ---------- */

.dark {
  background: var(--ink-deep);
  color: var(--paper);
}
/* Blocksy färbt Überschriften über eine Elementregel `h2 { color: ... }`.
   Eine Elementregel schlägt jede Vererbung, deshalb blieben die Überschriften
   in den dunklen Sektionen im Navy des Grundtons und waren dort kaum lesbar.
   Der Klassenselektor .dark davor sticht sie aus. */
.dark h1, .dark h2, .dark h3 { color: var(--paper); }
.dark .eyebrow { color: rgba(250, 248, 242, 0.55); }
.dark .lead { color: rgba(250, 248, 242, 0.72); }
.dark .section-line, .dark.section-line { border-color: rgba(250, 248, 242, 0.15); }

/* ---------- Buttons ---------- */

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.8rem;
  border: 1px solid var(--ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 0.35s;
  cursor: pointer;
  background: none;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.btn:hover { color: var(--gold); }
.btn:hover::before { transform: translateY(0); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid::before { background: var(--paper); }
.btn.solid:hover { color: var(--ink-deep); }
.dark .btn { border-color: var(--gold); color: var(--gold); }
.dark .btn::before { background: var(--gold); }
.dark .btn:hover { color: var(--ink-deep); }

/* Die längste Beschriftung („Jetzt Erstgespräch vereinbaren") misst mit
   Sperrung und Innenabstand 356px und stieß auf dem Handy rechts an den
   Bildschirmrand, der Rahmen war dort abgeschnitten. Unter 560px stehen die
   Knöpfe deshalb untereinander über die volle Breite, mittig gesetzt. Das
   gibt zugleich die bessere Trefferfläche. */
@media (max-width: 560px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn {
    justify-content: center;
    text-align: center;
    padding: 1rem 1.2rem;
    letter-spacing: 0.1em;
  }
  .btn-row > .btn { width: 100%; }
}

/* ---------- Prozess ---------- */

.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.process-step { background: var(--paper); padding: 2.6rem 2rem; position: relative; }
.process-step .num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.4rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-deep);
  line-height: 1;
}
.process-step h3 { font-size: 1.35rem; margin: 1.4rem 0 0.8rem; }
.process-step p { color: var(--ink-soft); font-size: 0.97rem; }
@media (max-width: 860px) { .process { grid-template-columns: 1fr; } }
.process.on-dark { background: rgba(250, 248, 242, 0.15); border-color: rgba(250, 248, 242, 0.15); }
.process.on-dark .process-step { background: var(--ink-deep); }
.process.on-dark h3 { color: var(--paper); }
.process.on-dark p { color: rgba(250, 248, 242, 0.65); }

/* ---------- Zitat ---------- */

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  font-style: italic;
  line-height: 1.35;
  max-width: 52rem;
}
.pull-quote .q-gold { color: var(--gold-deep); }
.quote-source { margin-top: 2rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Leistungsseite: Detailblöcke ---------- */

.service-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 6rem);
  padding: clamp(3rem, 7vh, 5.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.service-block:last-child { border-bottom: none; }
.service-head { position: sticky; top: 7rem; align-self: start; }
.service-head .code { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold-deep); letter-spacing: 0.2em; }
.service-head h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-top: 0.8rem; }
.service-head .service-intro { margin-top: 1.2rem; color: var(--ink-soft); font-size: 1rem; }
.service-items { list-style: none; }
/* Kein Raster auf der Zeile: Der fette Titel ist ein Blockelement und würde
   im Grid zu einer eigenen Zelle, was die Spalten sprengt. Der Haken sitzt
   deshalb absolut, der Text bekommt links Platz dafür. */
.service-items li {
  display: block;
  position: relative;
  padding: 1.3rem 0 1.3rem 2.4rem;
  border-bottom: 1px solid var(--line);
}
.service-items li:last-child { border-bottom: none; }
/* Der Haken kommt aus dem Stylesheet, nicht aus dem Markup. So bleibt der
   Listenpunkt im Editor eine ganz normale Aufzählung: fetter Titel, Umbruch,
   Beschreibung. Niemand muss dort Auszeichnungen von Hand pflegen. */
.service-items li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 1.35rem;
  font-family: var(--font-mono);
  color: var(--gold-deep);
  font-size: 0.9rem;
  line-height: 1;
}
.service-items .tick { display: none; }
.service-items b,
.service-items strong { display: block; font-weight: 600; letter-spacing: 0.01em; }
.service-items span.desc { color: var(--ink-soft); font-size: 0.95rem; }
/* Alles nach dem Zeilenumbruch im Listenpunkt ist die Beschreibung. */
.service-items li { color: var(--ink-soft); font-size: 0.95rem; }
.service-items li > strong,
.service-items li > b { color: var(--ink); font-size: 1.0625rem; }
@media (max-width: 860px) {
  .service-block { grid-template-columns: 1fr; }
  .service-head { position: static; }
}

.notice {
  border: 1px solid var(--gold);
  background: var(--white);
  padding: 2rem 2.2rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.notice b { color: var(--ink); }

/* ---------- Über mich ---------- */

.about-hero { padding-top: 11rem; }
.portrait-col figure { position: relative; }
.portrait-col img { filter: saturate(0.92); }
.portrait-col .frame { position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--gold); z-index: -1; }

.timeline { list-style: none; border-left: 1px solid var(--line-strong); }
.timeline li { padding: 0 0 2.4rem 2rem; position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px; top: 0.45rem;
  width: 9px; height: 9px;
  background: var(--gold);
}
.timeline .year { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--gold-deep); }
.timeline h3 { font-size: 1.25rem; margin: 0.4rem 0 0.4rem; }
.timeline p { color: var(--ink-soft); font-size: 0.97rem; }

.client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.client-card { background: var(--white); padding: 2rem 1.8rem; }
.client-card .branche { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-deep); }
.client-card h3 { font-size: 1.2rem; margin: 0.7rem 0 0.5rem; }
.client-card p { font-size: 0.92rem; color: var(--ink-soft); }
@media (max-width: 860px) { .client-grid { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */

.contact-info dl { display: grid; gap: 1.6rem; }
.contact-info dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem; }
.contact-info dd { font-size: 1.15rem; }
.contact-info dd a { text-decoration: none; border-bottom: 2px solid var(--gold); transition: background 0.3s; }
.contact-info dd a:hover { background: rgba(232, 185, 60, 0.25); }

.form { display: grid; gap: 1.6rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.field label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.55rem; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--gold);
}
.field textarea { min-height: 9rem; resize: vertical; }
.checkline { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.checkline input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--ink); }

/* ---------- Rechtsseiten ---------- */

.legal { max-width: 46rem; }
.legal h1 { margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.4rem; margin: 2.6rem 0 0.9rem; }
.legal p { color: var(--ink-soft); margin-bottom: 1rem; }

/* ---------- CTA-Band ---------- */

.cta-band { text-align: left; }
.cta-band h2 { max-width: 46rem; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink-deep); color: var(--paper); }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem;
  padding: 4rem 0 3rem;
}
.footer-top .brandmark { font-family: var(--font-body); font-weight: 600; font-size: 1.7rem; letter-spacing: 0.28em; }
.footer-top .brandmark em { color: var(--gold); font-style: normal; }
.footer-top .brandmark i { color: #7d9bd1; font-style: normal; }
.footer-claim { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250, 248, 242, 0.5); margin-top: 0.8rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; font-weight: 400; }
.footer-col ul { list-style: none; display: grid; gap: 0.6rem; padding-inline-start: 0; }
.footer-col a { text-decoration: none; color: rgba(250, 248, 242, 0.78); font-size: 0.95rem; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(250, 248, 242, 0.15);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 242, 0.45);
}
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Unterseiten-Hero ---------- */

.page-hero { padding-top: clamp(9rem, 18vh, 12rem); padding-bottom: clamp(3rem, 7vh, 5rem); position: relative; overflow: hidden; }
.page-hero h1 { max-width: 56rem; }
.page-hero .lead { margin-top: 1.8rem; }

/* ---------- Zurück nach oben ----------
   Kein schwebender Kreis, sondern dieselbe Sprache wie der Rest der Seite:
   ein Rechteck mit Haarlinie in Tinte, darüber die goldene Kante als Lineal,
   wie sie auch die Kennzeichen im Hero tragen. Beim Überfahren läuft die
   Tinte von unten hoch, genau der Mechanismus von .btn, und der Pfeil rückt
   nach oben, so wie der Pfeil der Ledger-Zeilen nach rechts rückt. Der
   Aktivzustand ist mitgenommen, weil auf dem Handy kein :hover ausgelöst
   wird und der Knopf sonst tot wirkt.

   Der Knopf liegt unter dem Kopfbereich (z-index 100), damit das offene
   Mobilmenü immer davor bleibt. Erzeugt wird er in main.js, siehe dort. */

.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 60;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-top: 2px solid var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.35s, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
    visibility 0.35s, color 0.35s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
}
.to-top .arrow-up {
  display: block;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.to-top:hover,
.to-top:active { color: var(--gold); }
.to-top:hover::before,
.to-top:active::before { transform: translateY(0); }
.to-top:hover .arrow-up,
.to-top:active .arrow-up { transform: translateY(-3px); }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 760px) {
  .to-top { width: 2.9rem; height: 2.9rem; font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top::before,
  .to-top .arrow-up { transition: none; }
}

/* ---------- Reveal-Basiszustände (GSAP) ---------- */

.reveal, .reveal-line, .stat, .process-step, .ledger-row, .timeline li, .client-card, .service-block { will-change: transform, opacity; }

/* ---------- Anpassung an Elementor ----------
   Elementor gibt Containern und Widgets grundsätzlich die volle Breite und
   schiebt bei jedem Widget zwei Wrapper-Divs dazwischen. Diese Regeln geben
   unserem Raster die Kontrolle zurück. In der statischen Fassung greifen die
   Selektoren schlicht nicht, beide Fassungen teilen sich daher dieselbe Datei. */

/* Der doppelte .elementor-Präfix ist Absicht: Elementor selbst erzwingt
   volle Breite mit `.elementor.elementor .e-con > .elementor-widget`, und
   diese Regel muss diese Spezifität übertreffen. */
.elementor.elementor .hero-content > .elementor-element { max-width: var(--hero-text-max); width: 100%; }
.elementor.elementor .hero-content > .elementor-element.lead { max-width: min(42rem, var(--hero-text-max)); }
@media (max-width: 1200px) {
  .elementor.elementor .hero-content > .elementor-element { max-width: none; }
  .elementor.elementor .hero-content > .elementor-element.lead { max-width: 42rem; }
}

/* Blocksy rückt Listen und Definitionslisten über zwei eigene Variablen ein.
   Elementselektoren wie ul, ol und dd schlagen dabei den Universalselektor
   unseres Resets. Deshalb standen die Menüpunkte im Footer und die Werte der
   Kontaktdaten nicht bündig unter ihren Überschriften. Statt jedes Element
   einzeln nachzuziehen, werden hier beide Variablen genullt: Im Entwurf ist
   keine einzige Liste eingerückt. */
:root {
  --theme-list-indent: 0px;
  --theme-description-list-indent: 0px;
}
.footer-col ul,
.service-items,
.timeline { padding-inline-start: 0; }
.contact-info dd { margin-inline-start: 0; }

/* Buttons sind im Entwurf inhaltsbreit, nicht spaltenbreit. */
.btn-row > .btn.e-con { width: auto; max-width: none; flex: 0 0 auto; }
/* Auf dem Handy stehen sie dagegen untereinander über die volle Breite, sonst
   stößt die längste Beschriftung rechts an den Bildschirmrand. Elementor setzt
   Richtung und Breite über eigene Variablen und mit zwei Klassen Spezifität,
   deshalb hier beides: die Variablen und die Eigenschaften direkt. */
@media (max-width: 560px) {
  .elementor.elementor .btn-row {
    --flex-direction: column;
    --align-items: stretch;
    flex-direction: column;
    align-items: stretch;
  }
  .elementor.elementor .btn-row > .btn.e-con { width: 100%; }
}

/* Der Editor liefert für Betonungen ein <strong>. In der Kachelzeile über der
   Überschrift trägt das dieselbe Goldfarbe wie .num in der statischen Fassung. */
.eyebrow strong { color: var(--gold-deep); font-weight: 400; }

/* Der Editor kennt nur fett und kursiv. Diese Aliase geben den beiden
   Auszeichnungen an den Stellen, wo im Entwurf eigene Klassen standen,
   dieselbe Wirkung. So bleibt der Text im Backend normal auszeichenbar. */
.pull-quote strong { color: var(--gold-deep); font-weight: inherit; }
.notice strong { color: var(--ink); }
.quote-source strong { font-weight: inherit; }

/* Im Editor ist die Leistungsliste eine gewöhnliche Aufzählung. Elementor
   legt sie in ein <ul> innerhalb des Widgets, deshalb hier die Listenoptik
   zurücknehmen. Die Gestaltung der Punkte selbst greift über .service-items li
   unverändert, der Selektor ist ein Nachfahrenselektor. */
.service-items ul { list-style: none; padding-inline-start: 0; margin: 0; }

/* ---------- Klassen statt Inline-Styles ----------
   Im statischen Entwurf standen an einigen Stellen style-Attribute direkt im
   Markup. In Elementor gibt es dafür kein Feld, deshalb bekommen diese Stellen
   hier richtige Klassen. Das ist ohnehin die sauberere Lösung. */

/* .wrap bringt margin:0 auto mit. In einem Elementor-Container (immer flex)
   schrumpft es damit auf Inhaltsbreite und rutscht mittig, genau wie beim Hero. */
.elementor .wrap { width: 100%; }

.soft-text { margin-top: 1.4rem; color: var(--ink-soft); }
.footnote { margin-top: 2rem; font-size: 0.85rem; color: var(--ink-soft); }
.services-section { padding-top: 0; }
.about-hero-grid { align-items: center; }
.cta-band .lead { margin-top: 1.5rem; }
.section .ledger { margin-top: 3.5rem; }
.section .process { margin-top: 3.5rem; }
.section .client-grid { margin-top: 3.5rem; }
.contact-info .notice { margin-top: 2.5rem; }
.services-section .notice { margin-top: 3rem; }

/* Rechtsseiten: schmalerer Satzspiegel, Überschriften mit Luft davor. */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2.6rem; margin-bottom: 0.8rem; }
.legal .elementor-widget-heading:first-of-type h2 { margin-top: 0; }
.legal p { color: var(--ink-soft); }

/* Der Titel ist ein Blockelement, das <br> dahinter erzeugt deshalb eine
   zusätzliche Leerzeile. Im Editor bleibt der Umbruch trotzdem stehen, weil
   er dort das Trennzeichen zwischen Titel und Beschreibung ist. */
.service-items li > strong + br,
.service-items li > b + br { display: none; }

/* Hero-Foto senkrecht mittig.
   Unser .hero-photo ist ein Flex-Kasten und zentriert über align-items, das
   setzt eine Zeilenrichtung voraus. Elementor-Container laufen in
   Spaltenrichtung, dort wirkt align-items waagerecht. Statt die Richtung zu
   erzwingen, zentriert margin-block:auto das Bild in beiden Fällen zuverlässig. */
.elementor.elementor .hero-photo > .elementor-element {
  margin-block: auto;
  align-self: center;
  width: 100%;
}

/* ---------- Elementors Container-Vorgaben neutralisieren ----------
   Jeder Elementor-Container bringt 10px Innenabstand und 20px Lücke mit.
   Beides steuert Elementor über CSS-Variablen. Dadurch schien bei den
   Prozesskarten der graue Grund als Rahmen durch und bei den Kennzahlen
   rissen die Hairline-Kanten auf.

   Die Variablen auf null zu setzen ist der saubere Hebel: Es kämpft nicht
   gegen Spezifitäten, unsere eigenen Angaben wie gap:1px oder das Padding
   der Karten gewinnen weiterhin als direkte Eigenschaft, und wer im Editor
   an einem einzelnen Container Abstände einstellt, überschreibt es ebenfalls. */
.elementor .e-con,
.elementor .e-con-inner {
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

/* ---------- Kontaktformular (Fluent Forms) ----------
   Fluent Forms bringt eigene Abstände, Farben und Fokusringe mit. Hier wird
   das Formular auf dieselbe Optik gebracht wie das Formular im Entwurf:
   zweispaltige Zeilen oben, rechteckige Felder, Beschriftungen in Space Mono
   und beim Fokus ein navyfarbener Rahmen mit hartem Goldschatten. */

/* Achtung: Fluent Forms legt alle Feldgruppen in ein <fieldset> innerhalb des
   Formulars. Das Raster gehört deshalb auf das fieldset, nicht auf das
   <form>, sonst hat es genau ein Kind und nichts passiert. */
.fluentform .frm-fluent-form fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.fluentform .frm-fluent-form input[type="hidden"] { display: none; }
@media (max-width: 640px) {
  .fluentform .frm-fluent-form fieldset { grid-template-columns: 1fr; }
}

.fluentform .ff-el-group { grid-column: 1 / -1; margin-bottom: 0; }
.fluentform .ff-el-group.ff-half { grid-column: span 1; }
@media (max-width: 640px) { .fluentform .ff-el-group.ff-half { grid-column: 1 / -1; } }

.fluentform .ff-el-input--label label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
  font-weight: 400;
}
/* Das Pflichtfeld-Sternchen ist im Entwurf kein Warnsignal, sondern eine Marke. */
.fluentform .ff-el-is-required.asterisk { color: var(--gold-deep); }

.fluentform .ff-el-form-control {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  padding: 0.95rem 1.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  box-shadow: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.fluentform .ff-el-form-control:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--gold);
}
.fluentform textarea.ff-el-form-control { min-height: 9rem; resize: vertical; }

/* Einverständniszeile */
.fluentform .ff-el-form-check,
.fluentform .ff_t_c { display: flex; gap: 0.9rem; align-items: flex-start; font-size: 0.9rem; color: var(--ink-soft); }
.fluentform .ff-el-form-check-label a { color: var(--ink); }

.fluentform .ff-btn-submit {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 1rem 2rem;
  box-shadow: none;
  transition: background 0.3s, color 0.3s;
}
.fluentform .ff-btn-submit:hover { background: transparent; color: var(--ink); }

/* Meldungen */
.fluentform .error.text-danger { font-family: var(--font-body); font-size: 0.85rem; color: #a4322b; }
.fluentform .ff-message-success {
  border: 1px solid var(--gold);
  border-left-width: 3px;
  background: var(--paper-warm);
  padding: 1.2rem 1.4rem;
  color: var(--ink);
}