@import url("fonts/fonts.css");

/* ═══════════════════════════════════════════════════════════════════════════
   KRAWUMM! KINDER-MACHMUSEUM — Richtungsvertrag

   THESIS       Die Site ist ein aufgeschlagenes Experimentierheft, in dem
                Besucher sofort selbst etwas verändern. Abgelehnt: Fotohero,
                Maskottchen, App-Karten und weich gerundete Science-Icons.
   OWN-WORLD    Pfirsichpapier, schwarze Heftfalz und dicke Konturen. Glut,
                Minze, Kanarie, Kobalt und Beere gehören jeweils ganzen Bögen.
                Bowlby One SC beschriftet nur kurze Versuche, Atkinson erklärt.
   STORY        Kinder und Erwachsene verstehen: Hier wird angefasst, beobachtet
                und weitergefragt. Drei Versuche beweisen das vor dem Ticketlink.
   1. VIEWPORT  Links Titel und Auftrag, rechts ein bedienbares Magnetfeld.
                Der Besuchslink sitzt wie ein gelber Heftaufkleber links unten.
   FORM         Aufgeschlagenes Laborheft mit Registern, Falz, Protokollzeilen
                und wissenschaftlichen Skizzen statt einer Landingpage.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #f6e0db;
  --ink: #121212;
  --ember: #ef724f;
  --mint: #ace2df;
  --canary: #f6d44a;
  --cobalt: #2b55b8;
  --berry: #c3427b;
  --white: #fffdf8;

  --display: "Bowlby One SC", "Arial Black", Impact, sans-serif;
  --text: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
  --line: 3px;
  --pad: clamp(22px, 4vw, 66px);
  --measure: 70ch;
}
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.56;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

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

.page--cobalt :focus-visible,
.lab-footer :focus-visible {
  outline-color: var(--canary);
}

::selection {
  background: var(--canary);
  color: var(--ink);
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  padding: 0.75rem 1rem;
  border: var(--line) solid var(--ink);
  background: var(--canary);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.demo-strip {
  min-height: 38px;
  padding: 0.45rem 1rem;
  border-bottom: var(--line) solid var(--ink);
  background: var(--canary);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.site-head {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: stretch;
  min-height: 76px;
  border-bottom: 4px solid var(--ink);
  background: var(--paper);
}

.brand-lockup {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.8rem;
  min-height: 72px;
  padding: 0.6rem clamp(18px, 3vw, 42px);
  border-right: var(--line) solid var(--ink);
  text-decoration: none;
}

.brand-bang {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.035em;
}

.brand-kind {
  max-width: 9ch;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.05;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  margin: 10px 12px 10px auto;
  padding: 0.45rem 0.8rem;
  border: var(--line) solid var(--ink);
  background: var(--canary);
  font-weight: 700;
  cursor: pointer;
}

.lab-nav {
  display: flex;
  flex: 1;
  align-items: stretch;
  margin: 0;
}

.lab-nav a {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 72px;
  padding: 0.65rem 1rem;
  border-right: var(--line) solid var(--ink);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

.lab-nav a:nth-child(1) { background: var(--mint); }
.lab-nav a:nth-child(2) { background: var(--canary); }
.lab-nav a:nth-child(3) { background: var(--ember); }
.lab-nav a:nth-child(4) { background: var(--berry); }

.lab-nav a:hover,
.lab-nav a[aria-current="page"] {
  background: var(--ink);
  color: var(--white);
}

main {
  display: block;
}

.book {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(1480px, calc(100% - 32px));
  margin: 28px auto;
  border: 4px solid var(--ink);
  background: var(--paper);
  box-shadow: 14px 18px 28px rgba(0, 0, 0, 0.3);
}

.book::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 5;
  width: 4px;
  background: var(--ink);
  pointer-events: none;
}

.book-page {
  position: relative;
  min-width: 0;
  min-height: 620px;
  padding: var(--pad);
  overflow: hidden;
}

.book--hero .book-page {
  min-height: min(780px, calc(100svh - 145px));
}

.page--paper { background: var(--paper); }
.page--mint { background: var(--mint); }
.page--canary { background: var(--canary); }
.page--ember { background: var(--ember); }
.page--cobalt { background: var(--cobalt); color: var(--white); }
.page--berry { background: var(--berry); color: var(--white); }
.page--ink { background: var(--ink); color: var(--white); }

.folio {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0 0 clamp(2rem, 5vw, 4.8rem);
  padding: 0.2rem 0.6rem;
  border: 2px solid currentColor;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.kaboom-title,
.experiment-word,
.short-word,
.footer-bang {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.kaboom-title {
  max-width: 8ch;
  font-size: clamp(3.4rem, 8.8vw, 6rem);
  line-height: 0.86;
}

.kaboom-title span {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.15em;
  padding: 0.06em 0.1em 0.02em;
  background: var(--canary);
}

.hero-lead {
  max-width: 28ch;
  margin: clamp(1.8rem, 4vw, 3.4rem) 0 0;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
}

.hero-copy {
  max-width: 53ch;
  margin: 1rem 0 0;
}

.sticker-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-top: 2rem;
  padding: 0.7rem 1.15rem;
  border: var(--line) solid var(--ink);
  background: var(--canary);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 5px 7px 10px rgba(18, 18, 18, 0.25);
  transform: rotate(-1.2deg);
  transition: transform 180ms ease-out, box-shadow 180ms ease-out;
}

.sticker-link:hover {
  box-shadow: 3px 4px 7px rgba(18, 18, 18, 0.3);
  transform: rotate(0deg) translateY(2px);
}

.margin-note {
  position: absolute;
  right: 4%;
  bottom: 5%;
  width: min(25ch, 38%);
  padding: 0.7rem;
  border: 2px solid var(--ink);
  background: var(--mint);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  transform: rotate(2.5deg);
}

.burst-mark {
  position: absolute;
  top: 6%;
  right: 6%;
  display: grid;
  width: 88px;
  aspect-ratio: 1;
  place-items: center;
  padding: 0.8rem;
  background: var(--ember);
  color: var(--ink);
  clip-path: polygon(50% 0, 61% 24%, 83% 8%, 78% 34%, 100% 38%, 77% 52%, 94% 72%, 68% 70%, 66% 100%, 49% 76%, 30% 96%, 31% 69%, 5% 75%, 23% 52%, 0 39%, 27% 35%, 17% 10%, 40% 25%);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  transform: rotate(8deg);
}

.experiment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.experiment-number {
  display: inline-grid;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  place-items: center;
  border: var(--line) solid currentColor;
  border-radius: 50%;
  font-weight: 700;
}

.experiment-word {
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  line-height: 0.92;
}

.experiment-instruction {
  max-width: 48ch;
  margin: 0.8rem 0 1.2rem;
  font-weight: 700;
}

.experiment-stage {
  position: relative;
  min-height: 300px;
  border: 4px solid var(--ink);
  background: var(--white);
  overflow: hidden;
}

.experiment-stage canvas {
  width: 100%;
  height: 300px;
}

.stage-label {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 0.2rem 0.45rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
}

.range-wrap {
  margin-top: 1.2rem;
}

.range-wrap label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.experiment-range {
  width: 100%;
  height: 52px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  appearance: none;
}

.experiment-range::-webkit-slider-runnable-track {
  height: 12px;
  border: 3px solid var(--ink);
  background: var(--paper);
}

.experiment-range::-webkit-slider-thumb {
  width: 36px;
  height: 36px;
  margin-top: -15px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 3px 4px 7px rgba(18, 18, 18, 0.28);
  appearance: none;
}

.experiment-range::-moz-range-track {
  height: 8px;
  border: 3px solid var(--ink);
  background: var(--paper);
}

.experiment-range::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 3px 4px 7px rgba(18, 18, 18, 0.28);
}

.experiment-status {
  min-height: 3.2em;
  margin: 0.5rem 0 0;
  padding: 0.55rem 0.7rem;
  border-top: var(--line) solid currentColor;
  font-weight: 700;
}

.experiment-note {
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
}

.filter-stage {
  display: grid;
  min-height: 330px;
  place-items: center;
  background: var(--ink);
}

.light-field {
  position: relative;
  width: min(440px, 92%);
  height: 270px;
  isolation: isolate;
}

.light-disc {
  position: absolute;
  top: 50%;
  width: 190px;
  aspect-ratio: 1;
  border: 3px solid var(--white);
  border-radius: 50%;
  opacity: 0.12;
  mix-blend-mode: screen;
  transform: translateY(-50%);
  transition: opacity 180ms ease-out;
}

.light-disc.is-on { opacity: 0.92; }
.light-disc--ember { left: 4%; background: var(--ember); }
.light-disc--mint { left: 28%; background: var(--mint); }
.light-disc--cobalt { right: 4%; background: var(--cobalt); }

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.filter-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.55rem 0.8rem;
  border: var(--line) solid var(--ink);
  background: var(--paper);
  font-weight: 700;
  cursor: pointer;
}

.filter-button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.filter-button .swatch {
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.swatch--ember { background: var(--ember); }
.swatch--mint { background: var(--mint); }
.swatch--cobalt { background: var(--cobalt); }

.sound-stage {
  background: var(--canary);
}

.field-section {
  width: min(1480px, calc(100% - 32px));
  margin: 28px auto;
  border: 4px solid var(--ink);
  padding: var(--pad);
  box-shadow: 12px 15px 24px rgba(0, 0, 0, 0.28);
}

.field-section--ember { background: var(--ember); }
.field-section--mint { background: var(--mint); }
.field-section--canary { background: var(--canary); }
.field-section--berry { background: var(--berry); color: var(--white); }

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.2rem, 6vw, 7rem);
  align-items: start;
}

.section-heading,
.page-title {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.7rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.section-heading em,
.page-title em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.12em;
}

.section-copy {
  max-width: 55ch;
  margin: 1.2rem 0 0;
  font-size: 1.12rem;
}

.station-ledger {
  margin: 0;
  border-bottom: var(--line) solid currentColor;
}

.station-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  min-height: 96px;
  padding: 0.9rem 0;
  border-top: var(--line) solid currentColor;
}

.station-row dt {
  font-family: var(--display);
  font-size: 1.15rem;
  line-height: 1;
}

.station-row dd {
  margin: 0;
}

.station-row .age {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.2rem 0.55rem;
  border: 2px solid currentColor;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.closing-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  width: min(1480px, calc(100% - 32px));
  margin: 28px auto 0;
  padding: clamp(1.5rem, 4vw, 3.4rem);
  border: 4px solid var(--ink);
  background: var(--canary);
}

.closing-strip p {
  max-width: 58ch;
  margin: 0.5rem 0 0;
}

.short-word {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.9;
}

.closing-strip .sticker-link {
  margin: 0;
  background: var(--paper);
}

/* Unterseiten: das Register wird zum Inhaltsgerüst. */
.intro-copy {
  max-width: 56ch;
  margin: 1.5rem 0 0;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
}

.register-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--line) solid currentColor;
}

.register-list li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding: 0.8rem 0;
  border-top: var(--line) solid currentColor;
}

.register-list b {
  font-family: var(--display);
  font-size: 1.4rem;
}

.lab-sequence {
  width: min(1480px, calc(100% - 32px));
  margin: 28px auto;
  border: 4px solid var(--ink);
  background: var(--paper);
  box-shadow: 12px 15px 24px rgba(0, 0, 0, 0.28);
}

.lab-entry {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.35fr) minmax(240px, 0.8fr);
  min-height: 320px;
  border-bottom: 4px solid var(--ink);
}

.lab-entry:last-child {
  border-bottom: 0;
}

.lab-entry > * {
  min-width: 0;
  padding: clamp(1.4rem, 3vw, 3rem);
}

.lab-entry__name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: var(--line) solid var(--ink);
}

.lab-entry__name .short-word {
  font-size: clamp(2.1rem, 4vw, 4rem);
}

.lab-entry__copy {
  border-right: var(--line) solid var(--ink);
}

.lab-entry__copy h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.65rem, 3vw, 2.7rem);
  line-height: 1.02;
}

.lab-entry__copy p {
  max-width: var(--measure);
}

.lab-entry__meta {
  display: grid;
  align-content: center;
  gap: 0.65rem;
}

.lab-entry__meta span {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 2px solid currentColor;
  font-weight: 700;
}

.entry--mint .lab-entry__name,
.entry--mint .lab-entry__meta { background: var(--mint); }
.entry--canary .lab-entry__name,
.entry--canary .lab-entry__meta { background: var(--canary); }
.entry--ember .lab-entry__name,
.entry--ember .lab-entry__meta { background: var(--ember); }
.entry--berry .lab-entry__name,
.entry--berry .lab-entry__meta { background: var(--berry); color: var(--white); }
.entry--cobalt .lab-entry__name,
.entry--cobalt .lab-entry__meta { background: var(--cobalt); color: var(--white); }

.specimen {
  position: relative;
  display: grid;
  min-height: 230px;
  place-items: center;
  border: var(--line) solid var(--ink);
  background: var(--white);
  overflow: hidden;
}

.specimen--air .puck {
  width: 76px;
  aspect-ratio: 1;
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  background: var(--ember);
}

.specimen--air::before,
.specimen--air::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--ink);
}

.specimen--air::before { top: 32%; transform: rotate(-5deg); }
.specimen--air::after { bottom: 30%; transform: rotate(4deg); }

.specimen--cloud .jar {
  position: relative;
  width: 130px;
  height: 160px;
  border: 4px solid var(--ink);
  border-top-width: 12px;
  background: var(--mint);
}

.specimen--cloud .jar::before,
.specimen--cloud .jar::after {
  content: "";
  position: absolute;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
}

.specimen--cloud .jar::before {
  top: 42px;
  left: 18px;
  width: 82px;
  height: 38px;
}

.specimen--cloud .jar::after {
  top: 29px;
  left: 45px;
  width: 54px;
  height: 54px;
}

.specimen--shadow .beam {
  width: 74%;
  height: 34px;
  border: var(--line) solid var(--ink);
  background: var(--canary);
  transform: rotate(-12deg);
}

.specimen--shadow .blocker {
  position: absolute;
  width: 54px;
  height: 110px;
  border: var(--line) solid var(--ink);
  background: var(--cobalt);
}

.hours-table,
.ticket-ledger,
.workshop-ledger {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.hours-table th,
.hours-table td,
.ticket-ledger th,
.ticket-ledger td {
  padding: 0.72rem 0.5rem;
  border-bottom: 2px solid currentColor;
  text-align: left;
  vertical-align: top;
}

.hours-table th,
.ticket-ledger th {
  font-weight: 700;
}

.hours-table tr.is-today {
  background: var(--canary);
  color: var(--ink);
}

.today-label {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.08rem 0.35rem;
  border: 2px solid currentColor;
  font-size: 0.72rem;
  font-weight: 700;
}

.ticket-ledger td:last-child,
.ticket-ledger th:last-child {
  text-align: right;
  white-space: nowrap;
}

.note-box {
  max-width: var(--measure);
  margin-top: 1.6rem;
  padding: 1rem;
  border: var(--line) solid currentColor;
  font-weight: 700;
}

.route-steps {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.route-steps li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.8rem 0;
  border-top: 2px solid currentColor;
}

.route-steps .step-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: var(--line) solid currentColor;
  border-radius: 50%;
  font-family: var(--display);
}

.route-steps strong {
  display: block;
}

.workshop-ledger {
  margin-top: 1.5rem;
  border-top: var(--line) solid currentColor;
}

.workshop-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 9rem;
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: var(--line) solid currentColor;
}

.workshop-row h2 {
  margin: 0;
  font-size: 1.25rem;
}

.workshop-row p {
  margin: 0.25rem 0 0;
}

.workshop-row > strong:last-child {
  text-align: right;
}

.inquiry-sheet {
  width: min(1100px, calc(100% - 32px));
  margin: 28px auto;
  border: 4px solid var(--ink);
  background: var(--mint);
  padding: var(--pad);
  box-shadow: 12px 15px 24px rgba(0, 0, 0, 0.28);
}

.inquiry-sheet h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.98;
}

.form-intro {
  max-width: 60ch;
  margin: 1rem 0 2rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.4rem;
}

.field {
  min-width: 0;
}

.field--wide {
  grid-column: 1 / -1;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.65rem 0.75rem;
  border: var(--line) solid var(--ink);
  border-radius: 0;
  background: var(--white);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-width: 5px;
  background: var(--paper);
}

.field-error {
  min-height: 1.35em;
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

.submit-button {
  min-height: 54px;
  padding: 0.7rem 1.2rem;
  border: var(--line) solid var(--ink);
  background: var(--canary);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 5px 7px 10px rgba(18, 18, 18, 0.25);
}

.submit-button:hover {
  background: var(--ink);
  color: var(--white);
}

.form-summary,
.form-success {
  margin: 0 0 1.2rem;
  padding: 0.8rem 1rem;
  border: 4px solid var(--ink);
  background: var(--canary);
  color: var(--ink);
  font-weight: 700;
}

.form-success {
  margin: 0;
  background: var(--paper);
}

[hidden] {
  display: none !important;
}

.legal-sheet {
  width: min(1020px, calc(100% - 32px));
  margin: 28px auto;
  border: 4px solid var(--ink);
  background: var(--paper);
  padding: clamp(24px, 6vw, 84px);
  box-shadow: 14px 18px 28px rgba(0, 0, 0, 0.3);
}

.legal-sheet::before {
  content: "MUSTER · OHNE RECHTSWIRKUNG";
  display: inline-block;
  margin-bottom: 2rem;
  padding: 0.35rem 0.55rem;
  border: var(--line) solid var(--ink);
  background: var(--canary);
  font-size: 0.78rem;
  font-weight: 700;
  transform: rotate(-1deg);
}

.legal-sheet h1 {
  margin: 0 0 2rem;
  font-size: clamp(2.5rem, 6vw, 5.2rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.legal-sheet h2 {
  max-width: 30ch;
  margin: 2.5rem 0 0.7rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.1;
}

.legal-sheet h3 {
  margin: 1.8rem 0 0.5rem;
}

.legal-sheet p,
.legal-sheet ul {
  max-width: var(--measure);
}

.legal-sheet address {
  font-style: normal;
}

.lab-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem 4rem;
  width: min(1480px, 100%);
  margin: 28px auto 0;
  padding: clamp(2rem, 5vw, 4.5rem);
  border-top: 4px solid var(--canary);
  background: var(--ink);
  color: var(--white);
}

.footer-bang {
  display: block;
  color: var(--canary);
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 0.9;
}

.footer-copy {
  max-width: 52ch;
  margin: 1rem 0 0;
}

.footer-nav {
  display: grid;
  align-content: start;
  gap: 0.35rem;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

.demo-disclaimer {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.2rem;
  border-top: 2px solid var(--white);
  font-size: 0.86rem;
}

@media (max-width: 1040px) {
  .brand-kind {
    display: none;
  }

  .brand-lockup {
    padding-inline: 18px;
  }

  .lab-nav a {
    min-width: 96px;
    padding-inline: 0.6rem;
  }

  .lab-entry {
    grid-template-columns: 0.72fr 1.28fr;
  }

  .lab-entry__meta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--line) solid var(--ink);
  }
}

@media (max-width: 860px) {
  .book {
    grid-template-columns: 1fr;
  }

  .book::after {
    display: none;
  }

  .book-page {
    min-height: auto;
  }

  .book--hero .book-page {
    min-height: min(680px, calc(100svh - 118px));
  }

  .book-page + .book-page {
    border-top: 4px solid var(--ink);
  }

  .field-grid,
  .closing-strip {
    grid-template-columns: 1fr;
  }

  .closing-strip .sticker-link {
    justify-self: start;
  }

  .lab-entry {
    grid-template-columns: 1fr;
  }

  .lab-entry__name,
  .lab-entry__copy {
    border-right: 0;
    border-bottom: var(--line) solid var(--ink);
  }

  .lab-entry__meta {
    grid-column: auto;
    border-top: 0;
  }

  .station-row {
    grid-template-columns: 6.5rem minmax(0, 1fr);
  }

  .station-row .age {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .site-head {
    flex-wrap: wrap;
    min-height: 68px;
  }

  .brand-lockup {
    min-height: 64px;
    border-right: 0;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .lab-nav {
    width: 100%;
    border-top: var(--line) solid var(--ink);
  }

  .js .lab-nav {
    display: none;
  }

  .js .lab-nav[data-open="true"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lab-nav a {
    min-width: 0;
    min-height: 54px;
    border-bottom: var(--line) solid var(--ink);
  }

  .book,
  .field-section,
  .lab-sequence,
  .closing-strip,
  .inquiry-sheet,
  .legal-sheet {
    width: calc(100% - 16px);
    margin-block: 8px;
  }

  .book-page,
  .field-section,
  .inquiry-sheet,
  .legal-sheet {
    padding: 24px;
  }

  .kaboom-title {
    font-size: clamp(3rem, 16vw, 5rem);
  }

  .margin-note {
    position: static;
    width: min(34ch, 100%);
    margin-top: 2rem;
  }

  .burst-mark {
    width: 70px;
  }

  .light-field {
    height: 230px;
  }

  .light-disc {
    width: 150px;
  }

  .lab-entry__meta {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .field--wide {
    grid-column: auto;
  }

  .workshop-row {
    grid-template-columns: 1fr;
  }

  .workshop-row > strong:last-child {
    text-align: left;
  }

  .lab-footer {
    grid-template-columns: 1fr;
    margin-top: 8px;
    padding: 32px 24px;
  }

  .demo-disclaimer {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  body {
    font-size: 17px;
  }

  .book-page {
    min-height: 0;
  }

  .book--hero .book-page {
    min-height: 610px;
  }

  .folio {
    margin-bottom: 1.8rem;
  }

  .experiment-head {
    display: block;
  }

  .experiment-number {
    margin-bottom: 0.75rem;
  }

  .experiment-stage,
  .experiment-stage canvas {
    min-height: 250px;
    height: 250px;
  }

  .filter-stage {
    min-height: 285px;
  }

  .filter-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .filter-button {
    justify-content: center;
  }

  .station-row,
  .register-list li {
    grid-template-columns: 1fr;
  }

  .station-row .age {
    grid-column: auto;
  }

  .route-steps li {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}