@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.contact-link {
  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.contact-link::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#2fff00;
  flex:none;
}
.top a.contact-link: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; }
.row-link { display:block; color:inherit; text-decoration:none; }
.row-link h3::after { content:" ↗"; font-family:var(--fb); font-size:.55em; vertical-align:top; }
.row-link:hover h3 { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
/* 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); }

/* ===== Kündigungs-Schnelltest ===== */
.quick-check-shell { width:100%; max-width:42em; }
.quick-check-intro { margin-bottom:var(--s4); }
.quick-check-intro h2 {
  max-width:18em;
  font-family:var(--fd);
  font-size:calc(clamp(30px, 4vw, 44px) * var(--dscale));
  font-weight:var(--dweight);
  line-height:1.2;
  color:var(--brand);
}
.quick-check-intro p { max-width:34em; margin-top:var(--s2); font-size:16px; }
.quick-check-form { border-top:1px solid var(--line); }
.quick-check-progress { padding:var(--s3) 0; }
.quick-check-progress > span {
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.quick-check-progress-track { height:2px; background:var(--line); overflow:hidden; }
.quick-check-progress-track span { display:block; width:16.6667%; height:100%; background:var(--brand); transition:width .25s ease; }
.quick-check-step { min-width:0; padding:var(--s3) 0 0; border:0; }
.quick-check-step legend {
  width:100%;
  margin-bottom:var(--s3);
  font-family:var(--fd);
  font-size:calc(25px * var(--dscale) + 4px);
  font-weight:var(--dweight);
  line-height:1.3;
  color:var(--brand);
}
.step-hint { margin:-12px 0 var(--s3); font-size:14px; }
.choice-group { margin-top:var(--s4); }
.choice-group-label,
.form-field > span {
  display:block;
  margin-bottom:9px;
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.choice-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.choice { position:relative; cursor:pointer; }
.choice input { position:absolute; width:1px; height:1px; opacity:0; }
.choice span {
  display:flex;
  min-height:58px;
  align-items:center;
  padding:13px 16px;
  border:1px solid var(--line);
  color:var(--text);
  font-size:15px;
  line-height:1.4;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.choice:hover span { border-color:color-mix(in srgb, var(--text) 42%, transparent); }
.choice input:checked + span { border-color:var(--brand); background:var(--brand); color:var(--paper); }
.choice input:focus-visible + span { outline:2px solid var(--brand); outline-offset:3px; }
.form-field { display:block; }
.form-field input,
.form-field textarea {
  display:block;
  width:100%;
  border:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  line-height:1.5;
}
.form-field input { height:54px; padding:0 15px; }
.form-field textarea { min-height:118px; padding:13px 15px; resize:vertical; }
.form-field input:focus,
.form-field textarea:focus { outline:2px solid var(--brand); outline-offset:-1px; }
.form-field small { font-size:inherit; font-weight:400; letter-spacing:0; text-transform:none; }
.contact-fields { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s3) 16px; }
.form-field-wide { grid-column:1 / -1; }
.privacy-check { display:flex; gap:10px; align-items:flex-start; margin:var(--s3) 0; color:var(--muted); font-size:14px; cursor:pointer; }
.privacy-check input { width:17px; height:17px; margin-top:4px; accent-color:var(--brand); flex:none; }
.privacy-check a { color:var(--text); text-underline-offset:3px; }
.form-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-note { margin:var(--s2) 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.form-status { min-height:1.7em; margin:12px 0 0; color:var(--text); font-size:14px; }
.form-status.is-error { color:#9f1d1d; }
.quick-check-actions { display:flex; justify-content:space-between; gap:12px; margin-top:var(--s4); }
.quick-check-actions-end { justify-content:flex-end; }
.quick-check-button {
  min-height:50px;
  padding:14px 26px;
  border:1px solid var(--brand);
  border-radius:0;
  background:var(--brand);
  color:var(--paper);
  font-family:var(--fb);
  font-size:12px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.quick-check-button:hover { background:color-mix(in srgb, var(--brand) 86%, black); }
.quick-check-button:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.quick-check-button:disabled { cursor:wait; opacity:.58; }
.quick-check-button-secondary { background:transparent; color:var(--brand); }
.quick-check-button-secondary:hover { background:color-mix(in srgb, var(--brand) 8%, transparent); }

/* ===== Häufige Fragen ===== */
.faq-list { max-width:38em; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary {
  display:grid;
  grid-template-columns:1fr 24px;
  gap:var(--s3);
  align-items:center;
  padding:var(--s3) 0;
  font-family:var(--fd);
  font-weight:var(--dweight);
  font-size:calc(21px * var(--dscale) + 4px);
  line-height:1.35;
  color:var(--brand);
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:"+";
  justify-self:end;
  font-family:var(--fb);
  font-size:24px;
  font-weight:400;
  line-height:1;
  color:var(--metal);
  transition:transform .2s ease;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:focus-visible { outline:2px solid var(--brand); outline-offset:8px; }
.faq-item p { margin:0; padding:0 48px var(--s3) 0; color:var(--muted); font-size:16px; }

/* ===== 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 {
  margin-top:12px;
  font-size:14px;
  font-style:normal;
  line-height:1.7;
  color:color-mix(in srgb, var(--paper) 58%, transparent);
}
.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-phone {
  display:block;
  width:max-content;
  margin-top:12px;
  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-phone:hover { border-color:var(--paper); }
.contact-email {
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:var(--s4);
  color:color-mix(in srgb, var(--paper) 82%, transparent);
  text-decoration-line:underline;
  text-decoration-color:color-mix(in srgb, var(--paper) 42%, transparent);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  overflow-wrap:anywhere;
}
.contact-email:hover { color:var(--paper); text-decoration-color:var(--paper); }

/* ===== Bestätigung ===== */
.confirmation { min-height:calc(100vh - 170px); padding:var(--s7) 0; }
.confirmation h1 {
  max-width:12em;
  margin:var(--s3) 0;
  font-family:var(--fd);
  font-size:calc(clamp(44px, 7vw, 76px) * var(--dscale));
  font-weight:var(--dweight);
  line-height:1.08;
  color:var(--brand);
}
.confirmation p { max-width:31em; font-size:18px; }

/* ===== 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; }
main > .wrap { padding-top:var(--s6); padding-bottom:var(--s6); }
main > .wrap > h1 {
  margin-bottom:var(--s5);
  font-family:var(--fd);
  font-size:calc(clamp(44px, 7vw, 76px) * var(--dscale));
  font-weight:var(--dweight);
  line-height:1.08;
  color:var(--brand);
}
main > .wrap > h2 {
  max-width:24em;
  margin:var(--s4) 0 var(--s2);
  font-family:var(--fd);
  font-size:calc(24px * var(--dscale) + 4px);
  font-weight:var(--dweight);
  line-height:1.3;
  color:var(--brand);
}

/* ===== 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.contact-link { padding:10px 14px; }
  .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); }
  .choice-grid,
  .contact-fields { grid-template-columns:1fr; }
  .form-field-wide { grid-column:auto; }
  .quick-check-actions { align-items:stretch; }
  .quick-check-button { padding-right:18px; padding-left:18px; }
  .rubric { position:static; padding-top:0; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; }
  html { scroll-behavior:auto; }
}