/* =========================================================
   Klarwerk Steuerberatung – Demo (GreenLabz Studio)
   Papierweiß, tiefes Marineblau, ein Textmarker-Gelb als einziger Akzent
   ========================================================= */
:root {
  --paper: #f5f4ef;
  --ink: #0e1a2b;
  --ink-dim: rgba(14, 26, 43, 0.62);
  --marker: #f6e14b;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-ui: "Inter Tight", system-ui, sans-serif;
  --f-mono: "DM Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-ui); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.big { margin: 0; font-family: var(--f-serif); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; }
.big span { display: block; }
.big em { font-style: italic; }
.kicker { margin: 0; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }

.hd { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 30px; padding: 22px clamp(20px, 4vw, 56px); }
.hd-logo { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-serif); font-size: 30px; letter-spacing: -0.01em; }
.hd-logo span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.hd-nav { margin-left: auto; display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.hd-nav a { padding: 12px 0; background-image: linear-gradient(var(--marker), var(--marker)); background-size: 0% 40%; background-position: 0 85%; background-repeat: no-repeat; transition: background-size 0.4s ease; }
.hd-nav a:hover { background-size: 100% 40%; }
.hd-cta { min-height: 44px; display: inline-flex; align-items: center; padding: 0 22px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; transition: background 0.3s ease, color 0.3s ease; }
.hd-cta:hover { background: var(--marker); color: var(--ink); }

.stage { position: relative; height: 420vh; }
.stage-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.desk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.copy { position: absolute; left: clamp(20px, 5vw, 72px); top: 50%; transform: translateY(-50%); width: min(48vw, 640px); z-index: 2; }
.copy-swap { position: relative; margin-top: 22px; height: calc(2 * 0.95 * clamp(58px, 8.4vw, 132px) + 16px); overflow: hidden; }
.copy-swap .big { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; font-size: clamp(58px, 8.4vw, 132px); white-space: nowrap; will-change: transform; }
.copy-b, .copy-c { transform: translateY(115%); }
.copy-sub { max-width: 34ch; margin: 24px 0 0; font-size: 17px; color: var(--ink-dim); }

.termin { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 14vh clamp(20px, 5vw, 72px) 12vh; background: var(--ink); color: var(--paper); }
.termin .kicker { color: var(--marker); margin-bottom: 20px; }
.termin-title { font-size: clamp(72px, 11vw, 180px); }
.termin-title span { will-change: transform; }
.termin-btn { align-self: flex-start; margin-top: 44px; min-height: 60px; display: inline-flex; align-items: center; gap: 14px; padding: 0 30px; border-radius: 6px; background: var(--marker); color: var(--ink); font-weight: 600; font-size: 16px; transition: transform 0.3s ease; }
.termin-btn:hover { transform: translateY(-2px); }
.foot { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; margin: 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.5; }

.wipe { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--marker); transform: translateY(101%); pointer-events: none; }
.wipe b { font-family: var(--f-serif); font-weight: 400; font-size: clamp(100px, 15vw, 240px); letter-spacing: -0.03em; color: var(--ink); }

@media (max-width: 860px) { .hd-nav { display: none; } .copy { top: 16vh; transform: none; width: auto; right: 20px; } }
@media (prefers-reduced-motion: reduce) { .stage { height: auto; } .stage-pin { position: relative; } }

/* Kopfzeile über dem dunklen Abschluss */
.hd { transition: color 0.3s ease; }
.hd.on-dark { color: var(--paper); }
.hd.on-dark .hd-logo span { color: rgba(245, 244, 239, 0.6); }
.hd.on-dark .hd-cta { background: var(--marker); color: var(--ink); }