:root {
  --nacht: #1b1424;
  --nacht-weich: #17101c;
  --papier: #f1ede4;
  --papier-dunkel: #e7e0d4;
  --tinte: #17121c;
  --text-hell: #f1ede4;
  --text-muted: #4f475a;
  --text-dunkel-muted: #bdb4c6;
  --coral: #7a1cf0;                 
  --linie: rgba(23, 18, 28, 0.18);
  --linie-dunkel: rgba(241, 237, 228, 0.16);
}
::selection { background: #bfe6ff; color: #1d0c36; }   
.check-body { background: var(--papier); color: var(--tinte); }
.check-header {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(ellipse 45% 160% at 92% 0%, rgba(36, 82, 224, 0.34) 0%, transparent 72%),
    radial-gradient(ellipse 45% 140% at 60% 130%, rgba(168, 31, 224, 0.28) 0%, transparent 72%),
    linear-gradient(168deg, #1d0c36 0%, var(--nacht) 100%);
  border-bottom: 0;
}
.check-header > * { position: relative; z-index: 1; }
.check-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 0; pointer-events: none;
  background: var(--verlauf);
  box-shadow: 0 -2px 14px rgba(168, 31, 224, 0.55);
}
.check-panel { background: #faf8f3; border-top: 3px solid var(--akzent-strich); }
.check-panel input[type="text"], .check-panel select, .check-panel textarea {
  background: #ffffff; border-color: #6f6779; color: #17121c;
}
.check-panel input:focus, .check-panel select:focus, .check-panel textarea:focus { border-color: var(--akzent-strich); }
.schrittanzeige { color: var(--akzent-text); }
.button {
  position: relative; isolation: isolate; border: 0; border-radius: 0; background: none; box-shadow: none;
  min-height: 60px; padding: 0 30px 0 36px;
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}
.button::before, .button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; clip-path: var(--scherbe);
  transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1), filter 180ms ease;
}
.button::before { background: var(--led-tief); transform: translate(-6px, 7px); }
.button:hover { transform: none; background: none; }
.button:active { transform: translate(-3px, 4px); }
.button:active::before { transform: translate(-3px, 4px); }
.button-coral { color: #ffffff; background: none; border-color: transparent; }
.button-coral::after { background: var(--verlauf); }
.button-coral:hover { background: none; border-color: transparent; }
.button-sekundaer { color: var(--akzent-text); }
.button-sekundaer::before { background: var(--akzent-strich); }
.button-sekundaer::after { background: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translate(2px, -2px); }
  .button:hover::before { transform: translate(-8px, 9px); }
  .button-coral:hover::after { filter: brightness(1.12); }
  .button-sekundaer:hover { background: none; }
  .button-sekundaer:hover::after { filter: brightness(0.96); }
}
.check-aktionen { gap: 22px 24px; }
.form-error { background: #f6dcd8; color: #5a1410; border-left-color: #b3261e; }
.sprunglink { background: var(--akzent); color: #ffffff; font-weight: 700; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--akzent-text); outline-offset: 3px;
}
.check-header a:focus-visible { outline-color: var(--led-eis); }
.site-footer { background: var(--papier); color: var(--text-muted); border-top-color: var(--linie); }
@media (max-width: 640px) {
  .check-aktionen { padding-left: 6px; }
  .check-aktionen .button { width: calc(100% - 6px); }
  .check-heading h1 { font-size: clamp(30px, 9vw, 66px); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .button::before, .button::after { transition: none; }
}
.seitenindex, .check-grid aside .check-dauer { font-size: 12px; }