@font-face {
  font-family:"Inter";
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url("fonts/Inter-latin.woff2") format("woff2");
}
@font-face {
  font-family:"Space Grotesk";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/SpaceGrotesk-latin.woff2") format("woff2");
}

:root, [data-theme="schwarz"] { --paper:#FBFBF9; --text:#151515; --brand:#111111; --metal:#111111; }
[data-font="grotesk"] { --fd:"Space Grotesk", sans-serif; --fb:"Inter", sans-serif; --dscale:.82; --dweight:500; }
:root {
  --line: color-mix(in srgb, var(--text) 16%, transparent);
  --muted: color-mix(in srgb, var(--text) 66%, transparent);
  --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:150px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--paper); color:var(--text);
  font-family:var(--fb);
  font-size:17px; line-height:1.7;
  transition:background .35s;
}
::selection { background:var(--brand); color:var(--paper); }
a { color:inherit; }
.wrap { max-width:1120px; margin:0 auto; padding:0 40px; }

/* ===== Kopf (Top-Leiste) ===== */
.top { display:flex; justify-content:space-between; align-items:center; padding-top:var(--s4); }
.top .mark {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--fd);
  font-weight:var(--dweight);
  font-size:22px;
  color:var(--brand);
  text-decoration:none;
  letter-spacing:.01em;
}
.mark-signet { width:28px; height:28px; flex:none; }
.top a.tel {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border:0;
  border-radius:8px;
  background:var(--brand);
  color:var(--paper);
  font-size:13px;
  font-weight:500;
  letter-spacing:.12em;
  text-decoration:none;
  text-transform:uppercase;
  transition:background .2s;
}
.top a.tel::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2fff00;
  flex:none;
}
.tel-icon { display:none; }
.top a.tel:hover {
  background:color-mix(in srgb, var(--brand) 86%, black);
}

/* ===== Auftakt: Hero ===== */
.hero { padding:var(--s7) 0; }
.eyebrow,
.rubric {
  font-size:12px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--metal);
}
.hero h1 {
  font-family:var(--fd); font-weight:var(--dweight);
  font-size:calc(clamp(48px, 7.5vw, 88px) * var(--dscale));
  line-height:1.06; letter-spacing:-.01em;
  color:var(--brand); max-width:12em;
  margin:var(--s3) 0 var(--s4);
}
.hero p { max-width:30em; font-size:19px; color:var(--muted); }
.hero p strong { color:var(--text); font-weight:600; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.btn {
  display:inline-block; margin-top:var(--s4); padding:17px 38px;
  background:var(--brand); color:var(--paper); text-decoration:none;
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
}
.btn:hover { background:color-mix(in srgb, var(--brand) 86%, black); }
.btn-secondary { background:transparent; border:1px solid var(--brand); color:var(--brand); }
.btn-secondary:hover { background:color-mix(in srgb, var(--brand) 10%, transparent); }

/* ===== Redaktionelles Raster ===== */
.sec { border-top:1px solid var(--line); padding:var(--s6) 0; }
.sec .wrap { display:grid; grid-template-columns:220px 1fr; gap:var(--s5); align-items:start; }
.reveal > * {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .38s ease, transform .46s cubic-bezier(.22, 1, .36, 1);
}
.reveal > :nth-child(2) { transition-delay:.07s; }
.reveal.is-visible > * { opacity:1; transform:translateY(0); }
.rubric {
  position:sticky; top:var(--s4);
}
.row { padding:var(--s3) 0; border-bottom:1px solid var(--line); max-width:34em; }
.row:first-child { padding-top:0; }
.row h3 { font-family:var(--fd); font-weight:var(--dweight); font-size:calc(28px * var(--dscale) + 4px); color:var(--brand); margin-bottom:6px; }
.row p { margin:0; color:var(--muted); font-size:16px; }

/* Ablauf: drei nummerierte Schritte, Ziffern in der Überschriftenschrift im Metallton */
.step { display:grid; grid-template-columns:56px 1fr; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); max-width:38em; }
.step:first-child { padding-top:0; }
.step .n { font-family:var(--fd); font-weight:var(--dweight); font-size:calc(34px * var(--dscale) + 4px); line-height:1; color:var(--metal); }
.step h3 { font-family:var(--fd); font-weight:var(--dweight); font-size:calc(24px * var(--dscale) + 4px); color:var(--brand); margin-bottom:6px; }
.step p { color:var(--muted); font-size:16px; }
.step .meta { margin-top:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ===== Kanzlei / Über mich ===== */
.statement {
  font-family:var(--fd); font-weight:var(--dweight);
  font-size:calc(clamp(28px, 3.6vw, 42px) * var(--dscale));
  line-height:1.35;
  color:var(--brand); max-width:19em;
}
.scroll-quote { color:var(--muted); }
.quote-word { color:var(--muted); transition:color .22s ease; }
.quote-word.is-visible { color:var(--brand); }
.after { max-width:32em; margin-top:var(--s4); color:var(--muted); }
.about-portrait { max-width:300px; margin:var(--s5) 0 0; }
.about-portrait img { display:block; width:100%; height:auto; border-radius:4px; box-shadow:12px 12px 24px rgba(0, 0, 0, .18); }
.about-portrait figcaption {
  margin-top:14px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ===== Kontakt ===== */
.contact { background:var(--brand); border-top:none; transition:background .35s; }
.contact, .contact .row p { color:var(--paper); }
.contact .rubric { color:color-mix(in srgb, var(--paper) 65%, transparent); }
.contact h2 { font-family:var(--fd); font-weight:var(--dweight); font-size:calc(clamp(30px, 4vw, 46px) * var(--dscale)); color:var(--paper); }
.contact address {
  font-style:normal; margin-top:var(--s3); line-height:2.1;
  color:color-mix(in srgb, var(--paper) 78%, transparent);
}
.contact address a:hover { color:var(--paper); }
.office-hours {
  display:block;
  margin:var(--s3) 0 0;
  color:color-mix(in srgb, var(--paper) 78%, transparent);
  font-size:14px;
}
.office-hours span {
  color:color-mix(in srgb, var(--paper) 56%, transparent);
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.contact .mail {
  display:inline-block; margin-top:var(--s4);
  font-family:var(--fd); font-size:calc(clamp(24px, 3.2vw, 34px) * var(--dscale));
  color:var(--paper); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--paper) 50%, transparent); padding-bottom:6px;
}
.contact .mail:hover { border-color:var(--paper); }

/* ===== Footer ===== */
footer { padding:var(--s4) 0; font-size:13px; color:var(--muted); }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
footer a { text-decoration:none; }
footer a:hover { color:var(--text); }

/* ===== Impressum / Datenschutz ===== */
p, li { color:var(--muted); max-width:34em; margin:var(--s2) 0; }

/* ===== Responsive ===== */
@media (max-width:820px) {
  .wrap { padding:0 26px; }
  .top { padding-top:max(20px, env(safe-area-inset-top)); }
  .top .mark { font-size:18px; }
  .top a.tel { width:40px; height:40px; padding:0; justify-content:center; }
  .top a.tel::before, .tel-number { display:none; }
  .tel-icon {
    display:block;
    width:18px;
    height:18px;
    fill:currentColor;
    stroke:none;
    transform:translateY(.5px);
  }
  .hero { padding:var(--s6) 0; }
  .sec .wrap { grid-template-columns:1fr; gap:var(--s3); align-items:start; }
  .step { grid-template-columns:1fr; gap:8px; }
  .step .n { font-size:calc(20px * var(--dscale) + 4px); }
  .rubric { position:static; padding-top:0; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  html { scroll-behavior:auto; }
}