:root{
  --paper:#EFEDE7;
  --paper-deep:#E3DFD4;
  --ink:#1A2138;
  --ink-soft:#565f7d;
  --red:#BE3A34;
  --blue:#23479B;
  --radius:10px;
  --max:52rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#12172A;
    --paper-deep:#1B2138;
    --ink:#EDEBE3;
    --ink-soft:#A8AEC4;
    --red:#E2645E;
    --blue:#6C8CE0;
  }
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  line-height:1.12;
  margin:0;
  letter-spacing:-0.01em;
}

a{ color:inherit; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding-inline:1.5rem;
}

/* ---------- airmail stripe divider ---------- */
.stripe{
  height:8px;
  background:repeating-linear-gradient(
    -45deg,
    var(--red) 0 22px,
    var(--paper) 22px 30px,
    var(--blue) 30px 52px,
    var(--paper) 52px 60px
  );
}

/* ---------- header ---------- */
header{
  padding-block:1.5rem;
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.wordmark{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.15rem;
  text-decoration:none;
  letter-spacing:-0.01em;
}
.wordmark span{ color:var(--red); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--ink);
  color:var(--paper);
  border:none;
  border-radius:999px;
  padding:.7rem 1.3rem;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink-soft);
}

/* ---------- hero ---------- */
.hero{
  padding-block:3.5rem 3rem;
}
.hero h1{
  font-size:clamp(2.1rem, 5.2vw, 3.4rem);
  max-width:16ch;
}
.hero p.lede{
  max-width:42ch;
  margin-top:1.1rem;
  color:var(--ink-soft);
  font-size:1.08rem;
}

.address-box{
  margin-top:2rem;
  display:inline-flex;
  align-items:center;
  gap:.15rem;
  background:var(--paper-deep);
  border:1.5px solid var(--ink-soft);
  border-radius:var(--radius);
  padding:.9rem 1.2rem;
  font-family:'JetBrains Mono', monospace;
  font-size:1.15rem;
  max-width:100%;
  overflow:hidden;
}
.address-box .typed{ white-space:nowrap; }
.address-box .domain{ white-space:nowrap; color:var(--ink-soft); }
.cursor{
  display:inline-block;
  width:2px;
  height:1.1em;
  background:var(--red);
  margin-left:2px;
  vertical-align:-2px;
  animation:blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce){
  .cursor{ animation:none; }
}
@keyframes blink{ 50%{ opacity:0; } }

.hero-actions{
  margin-top:2rem;
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.hero-note{
  color:var(--ink-soft);
  font-size:.92rem;
}

/* ---------- sections ---------- */
section{ padding-block:3rem; }
section.alt{ background:var(--paper-deep); }

.section-head{ max-width:38ch; margin-bottom:2rem; }
.section-head h2{ font-size:clamp(1.5rem, 3vw, 2rem); }
.section-head p{ color:var(--ink-soft); margin-top:.6rem; }

/* reasons list (not numbered — not a sequence) */
.reasons{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:0;
  border-top:1px solid var(--ink-soft);
}
.reasons li{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.3rem;
  padding-block:1.3rem;
  border-bottom:1px solid var(--ink-soft);
}
@media (min-width:640px){
  .reasons li{ grid-template-columns:16rem 1fr; gap:1.5rem; }
}
.reasons h3{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.15rem;
}
.reasons p{ margin:0; color:var(--ink-soft); }

/* steps — this IS a real sequence, numbering earned */
.steps{
  list-style:none;
  margin:0; padding:0;
  counter-reset:step;
  display:grid;
  gap:1.75rem;
}
.steps li{
  counter-increment:step;
  display:grid;
  grid-template-columns:2.6rem 1fr;
  gap:1rem;
}
.steps li::before{
  content:counter(step);
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.3rem;
  color:var(--red);
  border:1.5px solid var(--red);
  border-radius:50%;
  width:2.6rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
}
.steps h3{ font-size:1.1rem; font-weight:500; margin-bottom:.25rem; }
.steps p{ margin:0; color:var(--ink-soft); }

/* stamp grid */
.stamps{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(9.5rem,1fr));
  gap:1.4rem;
  margin-top:.5rem;
}
.stamp{
  background:var(--paper);
  border:2px dashed var(--ink-soft);
  border-radius:6px;
  padding:1.1rem .8rem;
  text-align:center;
  position:relative;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.stamp:nth-child(odd){ transform:rotate(-1.4deg); }
.stamp:nth-child(even){ transform:rotate(1.1deg); }
.stamp:nth-child(3n){ transform:rotate(-0.6deg); }
.stamp .mark{
  position:absolute;
  top:-.55rem; right:-.55rem;
  background:var(--red);
  color:var(--paper);
  font-family:'JetBrains Mono', monospace;
  font-size:.6rem;
  font-weight:600;
  border-radius:50%;
  width:2.1rem; height:2.1rem;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.stamp .name{
  font-family:'JetBrains Mono', monospace;
  font-size:.95rem;
  font-weight:600;
  word-break:break-word;
}
.stamp .dom{
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem;
  color:var(--ink-soft);
}

/* faq */
.faq{ display:grid; gap:.75rem; }
details{
  border-bottom:1px solid var(--ink-soft);
  padding-block:1rem;
}
summary{
  cursor:pointer;
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.05rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:'+';
  font-family:'Inter', sans-serif;
  font-weight:400;
  font-size:1.4rem;
  color:var(--ink-soft);
  flex-shrink:0;
}
details[open] summary::after{ content:'–'; }
details p{ margin:.8rem 0 0; color:var(--ink-soft); max-width:56ch; }

/* closing cta */
.cta{
  padding-block:3.5rem;
  text-align:left;
}
.cta h2{ font-size:clamp(1.7rem,4vw,2.4rem); max-width:20ch; }
.cta p{ color:var(--ink-soft); margin-top:.8rem; max-width:42ch; }
.cta-actions{ margin-top:1.8rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

.copy-feedback{
  font-size:.85rem;
  color:var(--blue);
  opacity:0;
  transition:opacity .2s ease;
}
.copy-feedback.show{ opacity:1; }

footer{
  padding-block:2.5rem;
  color:var(--ink-soft);
  font-size:.9rem;
}
footer .foot-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
footer a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }
footer a:hover{ color:var(--ink); }
footer .foot-links{ display:flex; gap:1.2rem; flex-wrap:wrap; }

/* ---------- legal / impressum page ---------- */
.legal{ padding-block:3rem 4rem; max-width:42rem; }
.legal h1{ font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:1.5rem; }
.legal h2{ font-size:1.15rem; font-weight:500; margin-top:2.2rem; margin-bottom:.6rem; }
.legal p{ margin:.4rem 0; color:var(--ink-soft); }
.legal address{ font-style:normal; color:var(--ink-soft); }
.legal a{ text-decoration:underline; text-underline-offset:2px; }
.back-link{ display:inline-block; margin-top:2rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }