/* Seuffert & Partner Steuerberatung (fiktive Demo, Röhrl Media)
   Swiss/editorial, cool paper + graphite + one cobalt accent. Radius system: 2px everywhere. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-wght.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../assets/fonts/schibsted-grotesk-wght-italic.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #eef1f4;
  --paper-2: #e3e7ec;
  --surface: #f8f9fb;
  --ink: #15181d;
  --ink-2: #3c434d;
  --muted: #5d6570;
  --line: #c9d0d8;
  --accent: #2443c4;
  --accent-ink: #ffffff;
  --accent-hover: #1b35a3;
  --radius: 2px;
  --wrap: 1360px;
  --gutter: clamp(16px, 3.2vw, 48px);
  --nav-h: 72px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111317; --paper-2: #181b20; --surface: #15181c;
    --ink: #eef1f4; --ink-2: #c6ccd4; --muted: #949ca7; --line: #2c3139;
    --accent: #6f88f0; --accent-ink: #0d1020; --accent-hover: #8ea1f4;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111317; --paper-2: #181b20; --surface: #15181c;
  --ink: #eef1f4; --ink-2: #c6ccd4; --muted: #949ca7; --line: #2c3139;
  --accent: #6f88f0; --accent-ink: #0d1020; --accent-hover: #8ea1f4;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.ico { width: 18px; height: 18px; flex: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand__mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em; border-radius: var(--radius);
}
.brand__name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand__name span { font-weight: 400; color: var(--muted); }
.nav__links { display: flex; gap: 32px; margin-left: auto; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.nav__links a { position: relative; padding-block: 6px; transition: color .2s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  height: 54px; padding-inline: 26px; border-radius: var(--radius);
  font-weight: 600; font-size: 16px; letter-spacing: -0.005em;
  transition: background-color .2s, color .2s, border-color .2s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary .ico { transition: transform .25s ease; }
.btn--primary:hover .ico { transform: translateX(3px); }
.btn--ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { height: 42px; padding-inline: 18px; font-size: 15px; }
.btn:focus-visible, .nav__links a:focus-visible, .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  min-height: clamp(560px, calc(100dvh - var(--nav-h) - 128px), 760px);
}
.hero__copy {
  grid-column: 1 / span 7;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 64px 72px;
}
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 32px;
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.hero__title {
  font-size: clamp(38px, 6.25vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
}
.hero__title span { display: block; white-space: nowrap; }
.hero__title em {
  font-style: normal;
  color: var(--accent);
}
.hero__lead {
  margin-top: 36px; max-width: 42ch;
  font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--ink-2);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 44px; }

.hero__media {
  grid-column: 8 / -1;
  position: relative;
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--wrap)) / 2)));
  background: var(--paper-2);
  overflow: hidden;
}
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
}

/* ---------- Facts ---------- */
.facts { border-top: 1px solid var(--ink); background: var(--paper); }
.facts__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.fact:nth-child(1) { grid-column: 1 / span 4; }
.fact:nth-child(2) { grid-column: 5 / span 3; }
.fact:nth-child(3) { grid-column: 8 / span 3; }
.fact:nth-child(4) { grid-column: 11 / span 2; }
.fact { padding: 24px 16px 26px 0; display: flex; flex-direction: column; gap: 8px; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--line); }
.fact:nth-child(3) { border-left-color: var(--ink); }
.fact__num { font-size: clamp(34px, 3.2vw, 48px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.fact__label { font-size: 15px; line-height: 1.4; color: var(--muted); max-width: 26ch; }

/* ---------- Services ---------- */
.services { padding-block: clamp(80px, 9vw, 140px); background: var(--surface); border-top: 1px solid var(--line); }
.services__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.services__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); }
.h2 { font-size: clamp(34px, 3.6vw, 54px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; max-width: 14ch; }
.body { margin-top: 20px; max-width: 40ch; color: var(--ink-2); font-size: 18px; }
.services__img { margin-top: 40px; width: 100%; max-width: 440px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.services__list { grid-column: 7 / -1; border-top: 1px solid var(--ink); counter-reset: svc; }
.svc {
  display: grid; grid-template-columns: 48px 1fr 32px; gap: 24px; align-items: start;
  padding-block: 36px; border-bottom: 1px solid var(--line);
  cursor: pointer; transition: padding .3s ease;
}
.svc__ico { width: 40px; height: 40px; color: var(--ink); }
.svc h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.svc p { margin-top: 10px; color: var(--muted); max-width: 44ch; }
.svc__arrow { width: 28px; height: 28px; color: var(--muted); transition: color .2s, transform .25s ease; margin-top: 4px; }
.svc:hover .svc__arrow { color: var(--accent); transform: translate(3px, -3px); }
.svc:hover h3 { color: var(--accent); }

/* ---------- Digital highlight ---------- */
.digital { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--paper); border-top: 1px solid var(--line); }
.digital__media { grid-column: 1 / span 7; min-height: 620px; position: relative; overflow: hidden; }
.digital__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.digital__panel {
  grid-column: 8 / -1; padding: clamp(48px, 6vw, 96px) var(--gutter) clamp(48px, 6vw, 96px) clamp(32px, 4.5vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
}
.steps { margin-top: 40px; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--muted); }
.steps__k { color: var(--ink); font-weight: 600; }
.link { margin-top: 36px; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--accent); align-self: flex-start; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.link .ico { transition: transform .25s ease; }
.link:hover .ico { transform: translateX(3px); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .reveal:nth-child(2) { animation-delay: .08s; }
  .reveal:nth-child(3) { animation-delay: .16s; }
  .reveal:nth-child(4) { animation-delay: .24s; }
  .hero__media img { animation: settle 1.4s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav__links { gap: 22px; }
  .nav__links a:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { grid-column: 1; padding-block: 48px 40px; }
  .hero__media { grid-column: 1; margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; max-height: 72vh; }
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; }
  .fact:nth-child(n) { grid-column: auto; }
  .fact:nth-child(3) { border-left-color: var(--line); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .services__grid { grid-template-columns: 1fr; }
  .services__head { grid-column: 1; position: static; margin-bottom: 48px; }
  .services__list { grid-column: 1; }
  .digital { grid-template-columns: 1fr; }
  .digital__media { grid-column: 1; min-height: 0; aspect-ratio: 3 / 2; }
  .digital__panel { grid-column: 1; padding: 56px var(--gutter); }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .brand__name span { display: none; }
  .btn--sm { padding-inline: 14px; }
  .hero__ctas .btn { flex: 1 1 auto; justify-content: center; }
  .svc { grid-template-columns: 36px 1fr; gap: 16px; }
  .svc__ico { width: 32px; height: 32px; }
  .svc__arrow { display: none; }
  .steps li { grid-template-columns: 1fr; gap: 2px; }
  .fact { padding: 22px 16px 22px 0; }
  .fact + .fact { padding-left: 16px; }
  .fact:nth-child(3) { padding-left: 0; }
}