/* Instrumentenpanel auf Papier: Punktraster-Papier, blauschwarze Tinte,
   Signalrot ausschließlich für den Button. */

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper: #ede8da;
  --paper-deep: #e2dcc9;
  --ink: #16202b;
  --graphite: #55606b;
  --line: rgba(22, 32, 43, 0.2);
  --signal: #d97757;
  --error: #8f1d1d;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --col: 40rem;
  --gutter: 1.25rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--sans);
  background:
    radial-gradient(circle, rgba(22, 32, 43, 0.14) 1px, transparent 1.3px) 0 0 / 16px 16px,
    var(--paper);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 6.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.125rem); }
h3 { font-size: 1.3125rem; }
p { margin: 0; }
a { color: inherit; text-underline-offset: 0.18em; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

.mark { font: 600 0.9375rem/1 var(--sans); letter-spacing: 0.01em; }
.small { font-size: 0.875rem; line-height: 1.45; color: var(--graphite); }

/* ---------- Button: die einzige Signalfarbe der Seite ---------- */
.btn {
  display: block; width: 100%;
  padding: 1rem 1.25rem;
  font: 600 1.0625rem/1.2 var(--sans);
  color: var(--ink); background: var(--signal);
  border: 1px solid var(--ink); border-radius: 3px;
  box-shadow: 0 3px 0 var(--ink);
  text-align: center; text-decoration: none; cursor: pointer;
  transition: transform 80ms, box-shadow 80ms;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Panel: Assistent hört zu (einziges animiertes Element des Gates) ---------- */
.panel {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--ink); border-radius: 3px;
  background: var(--paper);
}
.panel__state { font-size: 0.8125rem; color: var(--graphite); white-space: nowrap; }
/* Punktmatrix-Pegel: clip-path statt SVG-Maske, weil Safari animierte Masken unzuverlässig neu zeichnet */
.wave { flex: 1; min-width: 0; height: 2.5rem; display: flex; overflow: hidden; }
.wave i {
  flex: 0 0 10px; height: 100%;
  background: radial-gradient(circle, var(--ink) 1.5px, transparent 1.8px) 0 0 / 5px 5px;
  animation: wave 1.6s ease-in-out infinite alternate;
}
.wave i:nth-child(3n) { animation-duration: 1.1s; }
.wave i:nth-child(4n + 1) { animation-duration: 2.1s; }
.wave i:nth-child(5n + 2) { animation-duration: 1.35s; }
.wave i:nth-child(2n) { animation-delay: -0.45s; }
.wave i:nth-child(7n) { animation-delay: -0.8s; }
.wave i:nth-child(11n + 3) { animation-delay: -1.3s; }
@keyframes wave { from { clip-path: inset(44% 0); } to { clip-path: inset(0 0); } }

/* ---------- Gate ---------- */
.gate { min-height: 100svh; display: flex; flex-direction: column; }
.gate__head { padding-block: 0.875rem 0.75rem; }
.gate__main { flex: 1; display: flex; flex-direction: column; gap: 0.875rem; padding-bottom: 1rem; } /* nur padding-block/-bottom: .wrap liefert den Seitenrand */
.gate h1 { font-size: clamp(1.625rem, 6.2vw, 2.5rem); }
.gate__sub { color: var(--graphite); }

.form { display: grid; gap: 0.625rem; }
.field { position: relative; }
.field label {
  position: absolute; top: 0.4375rem; left: 0.8125rem;
  font-size: 0.75rem; color: var(--graphite); pointer-events: none;
}
.field input {
  width: 100%; padding: 1.5rem 0.75rem 0.4375rem;
  font: 400 1.0625rem/1.2 var(--sans); color: var(--ink);
  background: #f7f4ea; border: 1px solid var(--ink); border-radius: 3px;
  appearance: none;
}
.field input:focus-visible { outline-offset: 0; }
.field.is-invalid input { border-color: var(--error); box-shadow: inset 0 0 0 1px var(--error); }
.field__error { display: none; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--error); }
.is-invalid > .field__error { display: block; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; align-items: start; }
.consent input { width: 1.375rem; height: 1.375rem; margin: 0.0625rem 0 0; accent-color: var(--ink); }
.consent label { font-size: 0.8125rem; line-height: 1.4; color: var(--graphite); }
.consent .field__error { grid-column: 2; margin-top: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.foot { padding-block: 1rem 1.25rem; display: flex; gap: 1.25rem; font-size: 0.8125rem; color: var(--graphite); }

/* ---------- Terminseite ---------- */
.top { padding-block: 0.875rem; }
.hero { padding-block: 0.5rem 2rem; display: grid; gap: 1rem; }
.hero__hello { color: var(--graphite); }

.video { position: relative; }
.video__poster {
  display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; padding: 0;
  border: 1px solid var(--ink); border-radius: 3px; cursor: pointer; color: var(--ink);
  background:
    var(--poster, none) center / cover no-repeat,
    radial-gradient(circle, rgba(22, 32, 43, 0.35) 1.4px, transparent 1.7px) 0 0 / 10px 10px,
    var(--paper-deep);
}
.video__play {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--signal); box-shadow: 0 3px 0 var(--ink);
}
.video__play svg { width: 1.5rem; height: 1.5rem; margin-left: 0.25rem; fill: var(--ink); }
.video video, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); }

/* Messleiste unter dem Video: einziges animiertes Element dieser Seite */
.ruler {
  position: relative; height: 0.875rem; margin-top: 0.375rem;
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 2.5%) bottom / 100% 40% no-repeat,
              repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 25%) bottom / 100% 100% no-repeat;
  border-right: 1px solid var(--ink);
}
.ruler::after {
  content: ""; position: absolute; top: 0; left: 0; width: 7px; height: 7px;
  margin-left: -3px; border-radius: 50%; background: var(--ink);
  animation: sweep 24s linear infinite;
}
@keyframes sweep { to { left: 100%; } }
.ruler__ends { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--graphite); font-variant-numeric: tabular-nums; }

.section { padding: 2.5rem 0; border-top: 1px solid var(--line); }
.section > .wrap { display: grid; gap: 1.25rem; }
.lede { color: var(--graphite); max-width: 34rem; }

.cal { min-height: 30rem; border: 1px solid var(--ink); border-radius: 3px; background: #f7f4ea; overflow: hidden; }
.cal:empty { min-height: 0; }
.cal iframe { display: block; width: 100%; height: 44rem; border: 0; }
.cal__empty { display: grid; place-items: center; min-height: 30rem; padding: 1.5rem; text-align: center; color: var(--graphite); }

/* Funktionsblöcke: Aufträge im Wortlaut, wie man sie dem Assistenten schreibt */
.jobs { display: grid; gap: 2rem; }
.job { display: grid; gap: 0.75rem; }
.job ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.job li {
  padding: 0.75rem 0.875rem; background: #f7f4ea;
  border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 0 3px 3px 0;
  font: italic 400 1.125rem/1.4 var(--serif);
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.25rem 0.5rem; }
.steps li::before { content: counter(s); grid-row: span 2; font: 400 2.75rem/0.9 var(--serif); }
.steps p { color: var(--graphite); grid-column: 2; }
.pledge { padding: 1rem; border: 1px solid var(--ink); border-radius: 3px; background: #f7f4ea; }

.facts { margin: 0; display: grid; }
.facts div { padding: 0.875rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.125rem; }
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; color: var(--graphite); }

.about { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: start; }
.about img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-bottom: 1px solid var(--ink); }

.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 0.9375rem 1.75rem 0.9375rem 0; font-weight: 600; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.75rem; font: 400 1.5rem/1 var(--serif); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 1rem; color: var(--graphite); max-width: 36rem; }

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 0.625rem var(--gutter) calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--ink);
  transition: transform 160ms;
}
.sticky.is-hidden { transform: translateY(110%); }
.sticky .btn { max-width: var(--col); margin: 0 auto; }
.has-sticky { padding-bottom: 5.5rem; }

.done { min-height: 100svh; display: flex; flex-direction: column; }
.done__main { flex: 1; display: grid; gap: 1.25rem; align-content: start; padding-block: 1rem 2rem; }

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .gate__main { justify-content: center; max-width: 30rem; }
  .section { padding: 4rem 0; }
  .sticky { display: none; }
  .has-sticky { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave i, .ruler::after { animation: none; }
  .wave i:nth-child(odd) { clip-path: inset(25% 0); }
  .btn, .sticky { transition: none; }
}