:root {
  --grund: #F1EFEA;
  --text: #15181C;
  --akzent: #E4572E;
  --graphit: #1C2126;
  --stahl: #273A52;
  --stein: #D8D2C4;
  --hell: #ECEAE4;
  --t2: rgba(21, 24, 28, .68);
  --t3: rgba(21, 24, 28, .48);
  --linie: rgba(21, 24, 28, .16);
  --rand: 20px;
  --luft: 64px;
  --expo: cubic-bezier(.19, 1, .22, 1);
  --display: "Funnel Display", "Helvetica Neue", Arial, sans-serif;
  --sans: "Funnel Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Azeret Mono", ui-monospace, Menlo, monospace;
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 104px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 18px; } }
a { color: inherit; }
h1, h2, p { margin: 0; }
svg { display: block; }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.mono { font: 400 12px/1.4 var(--mono); letter-spacing: .02em; color: var(--t2); }

/* Knopf */
.btn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 24px;
  background: var(--akzent); color: #FFF8F3; border-radius: 999px;
  font: 500 16px/1 var(--sans); text-decoration: none;
  transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.btn:hover { background: #C9461F; }
.btn:active { transform: scale(.98); }
.btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Navigation */
.nav { display: flex; justify-content: space-between; align-items: center; height: 64px; font-size: 15px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color 150ms ease-out; }
.nav-link { color: var(--t2); }
.nav-link:hover { color: var(--text); }

/* Einstieg */
.hero { padding-top: 40px; padding-bottom: var(--luft); }
.hero-meta { margin-bottom: 8px; }
.hero-name {
  font: 500 min(calc((100vw - 2 * var(--rand)) / 2.98), 44vh)/.92 var(--display);
  letter-spacing: -.045em;
  margin-left: -.04em;
}
.mask { display: block; overflow: hidden; padding-bottom: .06em; }
.mask > span { display: block; }

.hero-grid { margin-top: 40px; display: grid; gap: 40px; }
.plan { width: 100%; max-width: 560px; overflow: visible; }
.plan .draw { fill: none; stroke: var(--akzent); stroke-width: 1.5; stroke-linecap: round; }
.plan-knoten { fill: var(--akzent); }
.plan-ende { fill: var(--grund); stroke: var(--akzent); stroke-width: 1.5; }
.plan-label { font: 400 10.5px var(--mono); fill: var(--t2); letter-spacing: .02em; }
.plan-label.end { text-anchor: end; }

.hero-text { display: grid; gap: 24px; justify-items: start; }
.lead { font: 400 21px/1.35 var(--display); letter-spacing: -.01em; max-width: 28ch; }

@media (min-width: 900px) {
  .hero { padding-top: 24px; }
  .hero-meta { font-size: 13px; margin-bottom: 16px; }
  .hero-grid { grid-template-columns: 5fr 7fr; align-items: end; margin-top: 40px; }
  .hero-text { order: -1; }
  .plan { justify-self: end; max-width: 520px; }
  .plan-label { font-size: 9.5px; }
  .lead { font-size: 28px; }
}

/* Aussage */
.aussage { padding-top: var(--luft); padding-bottom: var(--luft); border-top: 1px solid var(--linie); }
.aussage-satz {
  font: 400 32px/1.12 var(--display); letter-spacing: -.025em; max-width: 22ch;
}
.aussage-satz .w { opacity: .16; transition: opacity 150ms ease-out; }
.aussage-klein { margin-top: 64px; display: grid; gap: 24px; color: var(--t2); max-width: 720px; }
.aussage-klein .mono, .fuss-spalten .mono { display: block; margin-bottom: 8px; }
@media (min-width: 900px) {
  .aussage-satz { font-size: 72px; line-height: 1.04; max-width: 17ch; }
  .aussage-klein { grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 104px; }
}

/* Drei Flächen */
.flaeche { position: sticky; top: 0; height: 100vh; height: 100svh; }
.flaeche-innen {
  position: relative; height: 100%; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 64px var(--rand) 40px;
  transform-origin: 50% 0;
  will-change: transform;
}
.flaeche-innen::after {
  content: ""; position: absolute; inset: 0; background: #0B0D10;
  opacity: var(--dunkel, 0); pointer-events: none;
}
.f1 .flaeche-innen { background: var(--graphit); color: var(--hell); }
.f2 .flaeche-innen { background: var(--stahl); color: var(--hell); }
.f3 .flaeche-innen { background: var(--stein); color: var(--text); }
.f1 .mono, .f2 .mono { color: rgba(236, 234, 228, .62); }

.flaeche-text { display: grid; gap: 24px; max-width: 34rem; }
.flaeche h2 {
  font: 500 46px/.98 var(--display); letter-spacing: -.035em;
  hyphens: manual;
}
.flaeche-text > p:not(.mono):not(.platzhalter) { max-width: 30ch; opacity: .92; }
.platzhalter {
  justify-self: start; font: 400 12px/1.4 var(--mono);
  border: 1px dashed currentColor; border-radius: 4px; padding: 8px 16px; opacity: .55;
}
.symbol { width: min(62vw, 46vh); align-self: flex-end; }
.symbol .draw { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

@media (min-width: 900px) {
  .flaeche-innen {
    flex-direction: row; align-items: center;
    padding: 104px max(var(--rand), calc((100vw - 1200px) / 2));
  }
  .flaeche h2 { font-size: 104px; }
  .flaeche-text { gap: 40px; }
  .symbol { width: min(34vw, 62vh); align-self: center; }
}

/* Offerte */
.offerte {
  position: relative; z-index: 2; background: var(--grund);
  padding-top: var(--luft); padding-bottom: var(--luft);
  display: grid; gap: 40px;
}
.offerte-kopf { display: grid; gap: 16px; max-width: 40rem; }
.offerte-kopf h2 { font: 500 46px/1 var(--display); letter-spacing: -.035em; }
.offerte-kopf p { color: var(--t2); max-width: 46ch; }

.offerte-form { display: grid; gap: 24px; }
fieldset { border: 0; margin: 0; padding: 0; }
legend, label { font-size: 15px; color: var(--t2); }
legend { margin-bottom: 8px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linie); background: transparent; color: var(--text);
  font: 400 16px/1 var(--sans); cursor: pointer;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out;
}
.chips button:hover { border-color: var(--text); }
.chips button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--grund); }
label { display: grid; gap: 8px; }
input, textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--linie); background: transparent;
  padding: 8px 0; font: 400 17px/1.5 var(--sans); color: var(--text); border-radius: 0; resize: vertical;
  transition: border-color 150ms ease-out;
}
input:focus, textarea:focus { border-color: var(--text); outline: none; }
textarea::placeholder { color: var(--t3); }
.zwei { display: grid; gap: 24px; }

.zettel {
  background: #FBFAF7; border: 1px solid var(--linie); border-radius: 8px;
  padding: 24px; display: grid; gap: 16px; align-content: start;
}
.zettel pre {
  margin: 0; white-space: pre-wrap; font: 400 13px/1.6 var(--mono); color: var(--text); min-height: 8em;
}
.zettel .btn { justify-self: start; }

@media (min-width: 900px) {
  .offerte { grid-template-columns: 7fr 5fr; column-gap: 64px; row-gap: 64px; }
  .offerte-kopf { grid-column: 1 / -1; }
  .offerte-kopf h2 { font-size: 88px; }
  .zwei { grid-template-columns: 1fr 1fr; }
  .zettel { position: sticky; top: 40px; padding: 40px; }
}

/* Fusszeile */
.fuss { position: relative; z-index: 2; background: var(--graphit); color: var(--hell); padding: 64px 0 40px; }
.fuss .mono { color: rgba(236, 234, 228, .55); }
.fuss-name {
  font: 500 min(calc((100vw - 2 * var(--rand)) / 2.98), 44vh)/.9 var(--display);
  letter-spacing: -.045em; margin-left: -.04em; color: rgba(236, 234, 228, .92);
}
.fuss-spalten { margin-top: 64px; display: grid; gap: 24px; color: rgba(236, 234, 228, .78); }
.fuss-spalten a { display: inline-block; padding: 8px 0; margin: -8px 0; text-decoration-color: rgba(236, 234, 228, .4); text-underline-offset: 3px; transition: text-decoration-color 150ms ease-out; }
.fuss-spalten a:hover { text-decoration-color: var(--akzent); }
.fuss-entwurf { margin-top: 64px; font: 400 12px/1.4 var(--mono); color: rgba(236, 234, 228, .48); }
@media (min-width: 900px) {
  .fuss { padding: 104px 0 40px; }
  .fuss-spalten { grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 104px; }
}

/* Bewegung beim Laden */
.js .mask > span { transform: translateY(105%); transition: transform 1000ms var(--expo); }
.js .hero-meta, .js .hero-text, .js .plan-label { opacity: 0; transition: opacity 800ms var(--expo); }
.js .hero-text { transform: translateY(16px); transition: opacity 800ms var(--expo), transform 800ms var(--expo); }
.js .plan .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--expo); }
.js .plan .d2 { transition-duration: 1100ms; transition-delay: 450ms; }
.js .plan-knoten, .js .plan-ende { opacity: 0; transition: opacity 400ms ease-out; }

.ready .mask > span { transform: none; }
.ready .hero-meta { opacity: 1; transition-delay: 100ms; }
.ready .plan .draw { stroke-dashoffset: 0; transition-delay: 350ms; }
.ready .plan .d2 { transition-delay: 750ms; }
.ready .plan-knoten { opacity: 1; transition-delay: 700ms; }
.ready .plan-ende { opacity: 1; transition-delay: 1300ms; }
.ready .plan-label { opacity: 1; transition-delay: 1400ms; }
.ready .hero-text { opacity: 1; transform: none; transition-delay: 500ms; }

.js .symbol .draw { stroke-dasharray: 1; stroke-dashoffset: var(--zeichnen, 1); }

@media (prefers-reduced-motion: reduce) {
  .js .mask > span, .js .hero-text { transform: none !important; }
  .js .hero-meta, .js .hero-text, .js .plan-label, .js .plan-knoten, .js .plan-ende { opacity: 1 !important; }
  .js .plan .draw, .js .symbol .draw { stroke-dashoffset: 0 !important; }
  .aussage-satz .w { opacity: 1 !important; }
  .flaeche-innen { transform: none !important; }
  .flaeche-innen::after { opacity: 0 !important; }
  * { transition: none !important; }
}