/* ============================================================
   Corporate Finance Partner — Michael Szadurski
   "Blaue Stunde": Düsseldorf in der Dämmerung als dunkle
   Grundstimmung, warmes Creme für die hellen Abschnitte,
   Rostorange aus der Wortmarke als Lichtfarbe.
   Geometrische Grotesk (Jost) wie die Wortmarke, Plex Sans
   für Fließtext, Plex Mono für Labels wie im Descriptor.
   ============================================================ */

:root {
  /* Farben — aus dem Logoblatt */
  --paper:        #F2EFE8;   /* warmes Creme — Grundfläche */
  --paper-alt:    #E9E5DB;   /* abgesetzte Abschnitte */
  --ink:          #1E1E1E;   /* Text auf hell */
  --graphite:     #5E5A54;   /* Sekundärtext auf hell */
  --muted-invert: #9FB0C4;   /* Sekundärtext auf dunkel */
  --rule:         rgba(30, 30, 30, 0.14);
  --rule-strong:  rgba(30, 30, 30, 0.28);
  --rule-invert:  rgba(242, 239, 232, 0.18);
  --rust:         #C0552A;   /* Quadrat der Wortmarke — einziger Akzent */
  --rust-deep:    #A5461F;
  --rust-glow:    #DD7A4A;   /* Stadtlicht auf dunklem Grund */
  --slate:        #4E6A88;   /* Descriptor-Blau — Labels und Eyebrows */
  --slate-invert: #93A9C0;

  /* Dämmerung */
  --night:        #0E1726;   /* dunkle Abschnitte */
  --night-deep:   #070B12;   /* Horizont, Silhouette, Footer */
  --dusk:         #1B2E4C;   /* aufgehellter Himmel */

  /* Typografie */
  --font-display: "Jost", Futura, "Century Gothic", "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* Layout */
  --container: 1180px;
  --nav-height: 82px;
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }

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

h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* ---------- Wiederkehrende Bausteine ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.15rem;
}
.eyebrow-invert { color: var(--slate-invert); }

.figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-variant-numeric: tabular-nums lining-nums;
}

.section { padding-block: var(--section-y); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 + .section-intro { margin-top: 1.1rem; }

.section-intro {
  font-size: 1.05rem;
  color: var(--graphite);
  max-width: 42rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn-primary { background: var(--rust); color: #FFF6EE; }
.btn-primary:hover { background: var(--rust-deep); }

.btn-ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(30, 30, 30, 0.05); }

.hero .btn-ghost {
  border-color: var(--rule-invert);
  color: var(--paper);
}
.hero .btn-ghost:hover {
  border-color: var(--paper);
  background: rgba(242, 239, 232, 0.08);
}

/* ---------- Wortmarke ---------- */

.brand { margin-right: auto; }

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}

.logo-mark {
  display: flex;
  /* Baseline statt flex-end: das Quadrat sitzt sonst unter der
     Schriftlinie, weil die Unterlänge mitzählt. */
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.2em;
}

/* Das Quadrat ist der Punkt der Wortmarke — einzige Stelle,
   an der Rostorange in der Navigation auftaucht. */
.logo-dot {
  flex: none;
  width: 0.28em;
  height: 0.28em;
  background: var(--rust);
  margin-left: -0.12em;
}

.logo-sub {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--slate);
  white-space: nowrap;
}

.site-nav:not(.is-scrolled) .logo-sub {
  color: var(--slate-invert);
  border-top-color: var(--rule-invert);
}

/* ---------- Navigation ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  color: var(--paper);
  border-bottom: 1px solid transparent;
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}

.site-nav.is-scrolled {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--rule);
}

.nav-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  font-size: 0.9rem;
}

.nav-links > a:not(.btn) {
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.nav-links > a:not(.btn):hover { border-bottom-color: currentColor; }

.nav-cta { padding: 0.6rem 1.15rem; }
.site-nav:not(.is-scrolled) .nav-cta { background: transparent; border-color: var(--rule-invert); color: var(--paper); }
.site-nav:not(.is-scrolled) .nav-cta:hover { background: var(--rust); border-color: var(--rust); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  opacity: 0.75;
}
.lang-switch span { opacity: 0.45; }
.lang-switch button {
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  padding: 0.25rem 0.1rem;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.lang-switch button[aria-pressed="true"] { border-bottom-color: currentColor; }
.lang-switch button:hover { opacity: 0.7; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  padding: 0.4rem 0.15rem;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span { display: block; height: 1px; background: currentColor; }

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

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--night);
  color: var(--paper);
  margin-top: calc(var(--nav-height) * -1);
  padding-top: calc(var(--nav-height) + clamp(5rem, 11vw, 9rem));
  padding-bottom: clamp(5rem, 10vw, 9rem);
}

/* Der Himmel: aufgehellter Streifen über dem Horizont, darüber
   ein warmer Schimmer — die Restwärme nach Sonnenuntergang. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(90% 55% at 68% 88%, rgba(192, 85, 42, 0.30) 0%, rgba(192, 85, 42, 0) 62%),
    radial-gradient(70% 45% at 28% 96%, rgba(78, 106, 136, 0.50) 0%, rgba(78, 106, 136, 0) 70%),
    linear-gradient(180deg, var(--night-deep) 0%, var(--night) 44%, var(--dusk) 100%);
}

/* Das Foto ist bei Tageslicht entstanden. Abdunkeln, kühlen und leicht
   entsättigen bringt es in die Dämmerung; der Bildausschnitt sitzt so,
   dass Turmspitze und Wasserlinie im Bild bleiben. */
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 34%;
  opacity: 0.78;
  filter: brightness(0.42) saturate(1.25) contrast(1.12) hue-rotate(-10deg);
}

/* Zwei Schleier: einer von links, damit die Überschrift auf dem
   hellen Wasser trägt, einer von oben und unten für Navigation
   und Abschnittskante. Rechts bleibt das Bild offen. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(7, 11, 18, 0.90) 0%, rgba(7, 11, 18, 0.72) 38%, rgba(7, 11, 18, 0.22) 72%, rgba(7, 11, 18, 0.10) 100%),
    linear-gradient(180deg, rgba(7, 11, 18, 0.55) 0%, rgba(7, 11, 18, 0.10) 42%, rgba(7, 11, 18, 0.68) 100%);
}

.hero-inner { position: relative; z-index: 2; }

.hero-title {
  font-weight: 300;
  font-size: clamp(1.85rem, 4.4vw, 3.4rem);
  max-width: 22ch;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  /* Heller als der Sekundärton der übrigen dunklen Abschnitte —
     über dem Foto reicht #9FB0C4 nicht. */
  color: #C8D4E0;
  max-width: 38rem;
  margin-bottom: 2.25rem;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ---------- Zahlenband ---------- */

.kpi-band {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
}

.kpi { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 1.5rem); }

.kpi-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.kpi-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.5;
}

/* ---------- Leistungen ---------- */

.section-services { background: var(--paper-alt); }

.service {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 1rem clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.services > .service:last-child { border-bottom: 1px solid var(--rule); }

.service dt {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.25;
}

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

.site-footer {
  background: var(--night-deep);
  color: var(--muted-invert);
  padding-block: 2rem;
  font-size: 0.82rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.footer-inner nav { display: flex; gap: 1.5rem; }
.footer-inner a:hover { color: var(--paper); }

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

.legal-page { background: var(--paper-alt); }

.legal-main {
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}
.legal-main h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 2rem; }
.legal-main h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 2.5rem;
  margin-bottom: 0.6rem;
}
.legal-main p { color: var(--graphite); margin-bottom: 0.75rem; }
.legal-main a { border-bottom: 1px solid var(--rule-strong); }
.legal-main a:hover { color: var(--rust); border-bottom-color: var(--rust); }

.legal-note {
  border-left: 3px solid var(--rust);
  background: var(--paper);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
}

/* ---------- Scroll-Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 680ms ease, transform 680ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Responsiv ---------- */

@media (max-width: 940px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 0.5rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a:not(.btn) { width: 100%; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); }
  .nav-links > a:not(.btn):hover { border-bottom-color: var(--rule); color: var(--rust); }
  .nav-cta { margin-top: 1.25rem; }
  .site-nav:not(.is-scrolled) .nav-cta { background: var(--rust); border-color: var(--rust); color: #FFF6EE; }
}

@media (max-width: 640px) {
  .logo-mark { font-size: 1.3rem; }
  .logo-sub { font-size: 0.5rem; letter-spacing: 0.16em; }
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}