/* ui · shape: Long Document · theme: Werkbank (custom) · nav: N4 · footer: F1 · tone: editorial
   ==========================================================================
   Digi Works, zentrales Stylesheet.
   Farben, Schriften und Abstände kommen aus css/tokens.css. Dort steht auch,
   warum der Token-Block zusätzlich in handwerk/Handwerk.html liegt.
   Hier stehen ausschließlich Layout- und Komponentenregeln.

   Aufbau der Seite: oben ein klebender Zeitungskopf (Wortmarke, Register,
   Erstgespräch), darunter eine einzelne laufende Lesespalte im Satzspiegel.
   Der Satz nutzt Auszeichnungen aus dem Druck: Initial, Marginalie, hängende
   Ziffern, Linien unterschiedlicher Stärke, statt Kachelrastern.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Der Kopf klebt oben und würde sonst die angesprungene Überschrift verdecken. */
  scroll-padding-top: calc(var(--header-h) + var(--space-sm));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--color-paper);
  color: var(--color-ink-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.72;
  overflow-x: clip;
  font-variant-numeric: tabular-nums;
}

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

h1,
h2,
h3,
h4 {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.027em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

a {
  color: var(--color-accent);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

.skip-link {
  position: absolute;
  left: var(--space-xs);
  top: calc(var(--space-lg) * -2);
  z-index: 40;
  background: var(--color-paper-raised);
  color: var(--color-ink);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-xs);
}

/* --- Long Document: Gerüst ------------------------------------------------
   .masthead  Zeitungskopf über die volle Breite, klebt beim Scrollen
   .studio    der Satzspiegel darunter
   .column    die Lesespalte
   ------------------------------------------------------------------------ */

.studio {
  width: min(calc(100% - var(--space-lg)), var(--shell));
  margin-inline: auto;
}

/* --- Masthead · N4 --------------------------------------------------------
   Der Kopf trägt nur das, was auf jeder Seite gebraucht wird: Wortmarke,
   Register und den einen Weg ins Gespräch. Die kräftige Linie unten ist das
   Gegenstück zur Linie über dem Fuß und klammert den Satz dazwischen ein.
   ------------------------------------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-paper);
  border-bottom: var(--rule-thick) solid var(--color-ink);
}

.masthead-inner {
  width: min(calc(100% - var(--space-lg)), var(--shell));
  margin-inline: auto;
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
}

.masthead-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-ink);
  text-decoration: none;
}

.masthead-brand img {
  width: 30px;
  height: auto;
}

.masthead-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.masthead-nav {
  justify-self: end;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.masthead-nav::-webkit-scrollbar {
  display: none;
}

.masthead-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
}

.masthead-nav a {
  display: block;
  padding: var(--space-3xs) 0;
  border-bottom: var(--rule-thick) solid transparent;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.masthead-nav a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-rule-strong);
}

.masthead-nav a:active {
  color: var(--color-accent);
}

/* Der laufende Abschnitt wird markiert. Das ist Information, keine Zierde. */
.masthead-nav a[aria-current="true"] {
  color: var(--color-ink);
  font-weight: 700;
  border-bottom-color: var(--color-accent-bright);
}

.masthead-cta {
  justify-self: end;
}

/* --- Lesespalte ----------------------------------------------------------- */

.column {
  padding-bottom: var(--space-xl);
  min-width: 0;
}

/* Der Satzspiegel. Marginalien hängen links davon in den freien Raum. */
.entry {
  padding: var(--space-xl) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.entry > * {
  max-width: var(--measure);
}

/* Ein Ausbruch für Abbildungen und das Formular. */
.entry > .wide {
  max-width: none;
}

.entry h2 {
  font-size: clamp(1.625rem, 3vw, 2.375rem);
  max-width: var(--measure-head);
  hyphens: auto;
}

.deck {
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.55;
  margin-top: var(--space-sm);
  max-width: var(--measure-short);
}

.entry p + p {
  margin-top: var(--space-sm);
}

/* Marginalie: im Druck steht sie am Rand, hier ebenso, sobald Platz ist. */
.margin-note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--color-ink-3);
  border-left: var(--rule-thick) solid var(--color-rule-strong);
  padding-left: var(--space-xs);
  margin-top: var(--space-md);
  max-width: var(--measure-note);
}

/* Ab dieser Breite ist die Spalte deutlich breiter als der Satzspiegel. Die
   Marginalie rückt in diesen freien Rand, ohne negativen Außenabstand, sonst
   liefe sie aus dem Fenster und würde beschnitten. */
@media (min-width: 1180px) {
  .margin-note {
    float: right;
    width: 20ch;
    margin: var(--space-3xs) 0 var(--space-md) var(--space-lg);
    border-left: 0;
    border-top: var(--rule-thick) solid var(--color-rule-strong);
    padding: var(--space-2xs) 0 0;
  }

  /* Die Marginalie steht meist als letztes im Abschnitt. Ein Float zählt nicht
     zur Höhe seines Elternteils, also ragte sie unten heraus und die Trennlinie
     des nächsten Abschnitts lief quer durch ihren Text. flow-root lässt den
     Abschnitt die Marginalie umschließen, damit die Linie darunter bleibt. */
  .entry {
    display: flow-root;
  }
}

/* --- Auftakt -------------------------------------------------------------- */

.opening {
  padding: var(--space-xl) 0 var(--space-lg);
}

.opening h1 {
  font-size: clamp(2rem, 6vw, 4.75rem);
  max-width: var(--measure-display);
  hyphens: auto;
}

.opening h1 .accent {
  color: var(--color-accent);
}

/* Initial. Der älteste Trick im Satz und der, den kein Baukasten setzt. */
.lead {
  margin-top: var(--space-md);
  max-width: var(--measure);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.6;
}

.lead::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.82;
  color: var(--color-accent);
  padding: 0.06em var(--space-2xs) 0 0;
}

.opening .then {
  margin-top: var(--space-sm);
  max-width: var(--measure);
}

/* Drei Zusagen als eine gesetzte Zeile, nicht als Häkchenliste. */
.credits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  letter-spacing: 0.02em;
}

.credits li + li::before {
  content: "·";
  color: var(--color-accent);
  margin-right: var(--space-sm);
}

.actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

/* --- Knöpfe und Textlinks ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-paper);
}

.btn-primary:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn-secondary {
  background: var(--color-paper-raised);
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.btn-secondary:hover {
  border-color: var(--color-ink);
}

.btn-gold {
  background: var(--color-accent-bright);
  border-color: var(--color-accent-bright);
  color: var(--color-invert-paper);
}

.btn-gold:hover {
  background: var(--color-invert-accent);
  border-color: var(--color-invert-accent);
}

.btn-ghost-light {
  border-color: var(--color-invert-rule);
  color: var(--color-invert-ink);
}

.btn-ghost-light:hover {
  border-color: var(--color-invert-ink);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-paper-2);
  border-color: var(--color-rule);
  color: var(--color-ink-3);
  cursor: not-allowed;
  transform: none;
}

.btn[data-state="loading"] {
  color: var(--color-ink-3);
  cursor: progress;
  transform: none;
}

/* Der Textlink trägt einen gezeichneten Strich, keine Kursive. */
.link-arrow {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-accent);
  padding-bottom: 2px;
  transition: color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.link-arrow:hover,
.link-arrow:active {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}

/* --- Register der Wege: nummerierte Zeilen, hängende Ziffern -------------- */

.routes {
  list-style: none;
  counter-reset: route;
  margin-top: var(--space-lg);
}

.routes li {
  counter-increment: route;
  display: grid;
  grid-template-columns: 3.5ch minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.routes li:last-child {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.routes li::before {
  content: counter(route, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.3;
}

/* Der Satz gehört immer in die zweite Spalte. Ohne diese Regel rutscht das
   erste Element, das nicht mehr neben die Ziffer passt, unter die Ziffer in
   die schmale Spalte, sobald ein Eintrag mehr als einen Absatz hat. */
.routes li > * {
  grid-column: 2;
}

/* Rasterzellen machen aus dem Textlink einen Block, dadurch liefe der
   gezeichnete Strich über die ganze Spalte statt unter die Wörter. */
.routes .link-arrow {
  justify-self: start;
}

.routes h3 {
  font-size: var(--text-lg);
}

.routes p {
  color: var(--color-ink-2);
}

/* --- Register der Leistungen: Begriff links, Erklärung rechts ------------- */

.register {
  margin-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.register div {
  display: grid;
  grid-template-columns: minmax(0, 15ch) minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.register dt {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  hyphens: auto;
}

.register dd {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

/* --- Auszug: hängendes Anführungszeichen ---------------------------------- */

.pullquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-lg);
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  max-width: var(--measure-quote);
}

.pullquote::before {
  content: "„";
  position: absolute;
  left: 0;
  top: -0.12em;
  font-size: 2.4em;
  line-height: 1;
  color: var(--color-accent);
}

.pullquote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}

/* --- Ablauf: echte Reihenfolge, deshalb große hängende Ziffern ------------ */

.sequence {
  list-style: none;
  counter-reset: step;
  margin-top: var(--space-lg);
}

.sequence li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4.5ch minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.sequence li:last-child {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.sequence li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 0.85;
  color: var(--color-rule-strong);
}

.sequence h3 {
  font-size: var(--text-lg);
}

.sequence p {
  margin-top: var(--space-3xs);
  color: var(--color-ink-2);
}

/* --- Bildtafel ------------------------------------------------------------ */

.plate {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.plate:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: var(--space-md);
}

.plate figure {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: end;
}

.plate img {
  width: 100%;
  height: auto;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
}

.plate figcaption {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.plate-body {
  margin-top: var(--space-md);
  max-width: var(--measure);
}

.plate-body h3 {
  margin-top: var(--space-3xs);
  font-size: var(--text-xl);
}

.plate-body p {
  margin-top: var(--space-2xs);
}

.plate-body ul {
  list-style: none;
  margin-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.plate-body li {
  padding: var(--space-2xs) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
}

.tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag + .tag::before {
  content: "· ";
}

.tag-gold {
  color: var(--color-accent);
}

.aside-note {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* Der freie Platz für die erste Referenz. Bewusst als offene Lücke gezeichnet
   und nicht als fertige Tafel: Eine gestrichelte Linie liest sich als "hier
   fehlt noch etwas", eine durchgezogene als "hier steht etwas". */
.reference-slot {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: var(--rule-hair) dashed var(--color-rule-strong);
  border-radius: var(--radius-md);
  max-width: var(--measure);
}

.reference-slot h3 {
  margin-top: var(--space-3xs);
  font-size: var(--text-lg);
  color: var(--color-ink-3);
}

.reference-slot p {
  margin-top: var(--space-2xs);
  color: var(--color-ink-3);
}

/* --- Invertiertes Band ---------------------------------------------------- */

.band {
  background: var(--color-invert-paper);
  color: var(--color-invert-ink-2);
  border-top: 0;
  margin-inline: calc(var(--space-lg) * -1);
  padding: var(--space-xl) var(--space-lg);
}

.band h2,
.band h3 {
  color: var(--color-invert-ink);
}

.band .deck {
  color: var(--color-invert-ink-2);
}

.band strong {
  color: var(--color-invert-ink);
}

.band-entry + .band-entry {
  border-top: var(--rule-hair) solid var(--color-invert-rule);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
}

.domain-note {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-invert-ink-2);
}

.domain-note code {
  color: var(--color-invert-accent);
}

/* --- Gezeichnete Kolumne: das Einzige auf der Seite mit einer Stimme ------ */

.signed {
  border-left: var(--rule-thick) solid var(--color-accent-bright);
  padding-left: var(--space-md);
}

.signed p + p {
  margin-top: var(--space-sm);
}

.signature {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.signature span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--space-3xs);
}

/* Platzhalter bleiben sichtbar markiert, bis sie ersetzt sind. */
.ph {
  background: var(--color-accent-wash);
  color: var(--color-accent);
  padding: 0 var(--space-3xs);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* --- Fragen --------------------------------------------------------------- */

.qa {
  margin-top: var(--space-lg);
}

.qa details {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.qa details:last-child {
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: color var(--dur-base) var(--ease-out);
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary:hover,
.qa summary:active {
  color: var(--color-accent);
}

.qa summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-accent);
  flex-shrink: 0;
}

.qa details[open] summary::after {
  content: "–";
}

.qa .body {
  padding-bottom: var(--space-md);
  color: var(--color-ink-2);
}

/* Kompakte Variante für Register, deren Beschriftung schon die halbe Antwort
   ist (Leistungen, Bedenken). Gleiche Bedienung wie bei den Fragen, aber eine
   Stufe leiser, damit die eigentlichen Fragen weiter oben stehen bleiben. */
.qa-compact summary {
  font-size: var(--text-base);
  padding: var(--space-sm) 0;
}

.qa-compact .body {
  padding-bottom: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.65;
  max-width: var(--measure-short);
}

/* --- Anfrage -------------------------------------------------------------- */

.direct {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  line-height: 1.9;
  list-style: none;
}

.direct a {
  color: var(--color-ink-2);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule-strong);
}

.direct a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  max-width: 720px;
}

.form-field.full,
.consent,
.form-status,
.form-actions,
.backend-note,
#err-consent {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-3xs);
}

.optional {
  color: var(--color-ink-3);
  font-weight: 400;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: var(--color-paper-raised);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-base) var(--ease-out);
}

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

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--color-ink-3);
}

.form-field input:active,
.form-field textarea:active {
  border-color: var(--color-ink-2);
}

.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--color-bad);
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled {
  background: var(--color-paper-2);
  color: var(--color-ink-3);
  cursor: not-allowed;
}

.field-error {
  display: none;
  margin-top: var(--space-3xs);
  color: var(--color-bad);
  font-size: var(--text-sm);
}

.field-error.visible {
  display: block;
}

.consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: start;
}

.consent label {
  font-size: var(--text-sm);
}

.consent input {
  margin-top: var(--space-3xs);
  accent-color: var(--color-accent);
}

.consent.error-state label {
  color: var(--color-bad);
}

.form-status {
  display: none;
  padding: var(--space-sm) var(--space-md);
  border-left: var(--rule-thick) solid var(--color-rule-strong);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
}

.form-status.visible {
  display: block;
}

.form-status.problem {
  border-left-color: var(--color-bad);
  color: var(--color-bad);
}

.form-status.good {
  border-left-color: var(--color-ok);
}

.form-status.notice {
  border-left-color: var(--color-accent-bright);
}

.form-status strong {
  color: var(--color-ink);
}

.backend-note {
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

/* --- Fuß · F1 eine Zeile -------------------------------------------------- */

.closing {
  border-top: var(--rule-thick) solid var(--color-ink);
  padding: var(--space-md) 0 var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-ink-3);
}

.closing a {
  color: var(--color-ink-2);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}

.closing a:hover {
  color: var(--color-accent);
}

.closing .spacer {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* --- Unterseiten und Rechtstexte ----------------------------------------- */

.page-open {
  padding: var(--space-xl) 0 var(--space-md);
}

.page-open h1 {
  font-size: clamp(1.875rem, 4vw, 3rem);
  max-width: var(--measure-head-page);
  hyphens: auto;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  list-style: none;
  margin-bottom: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}

.breadcrumb a {
  color: var(--color-ink-3);
}

.legal-banner {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: var(--rule-thick) solid var(--color-accent-bright);
  background: var(--color-accent-wash);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

.legal-content h2 {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-xl);
}

.legal-content h3 {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
}

.legal-content p,
.legal-content ul {
  margin-top: var(--space-sm);
  max-width: var(--measure);
}

.legal-content ul {
  padding-left: var(--space-md);
}

/* --- Schmale Ansichten ----------------------------------------------------
   Unter 900px reicht die Breite nicht für Wortmarke, Register und Knopf in
   einer Zeile. Das Register rückt in eine zweite Zeile und wird dort seitlich
   schiebbar, statt umzubrechen und den Kopf hoch werden zu lassen.
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* Das Register belegt hier eine zweite Kopfzeile. Die Höhe steuert auch
     scroll-padding-top; ohne sie lägen angesprungene Überschriften unter dem
     klebenden Kopf. */
  :root {
    --header-h: 116px;
  }

  .masthead-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xs) var(--space-md);
    padding: var(--space-sm) 0;
  }

  /* Ohne feste Plätze rutscht der Knopf in eine dritte Zeile, weil das
     Register davor eine ganze Zeile beansprucht. */
  .masthead-brand {
    grid-area: 1 / 1;
  }

  .masthead-cta {
    grid-area: 1 / 2;
  }

  .masthead-nav {
    grid-area: 2 / 1 / 3 / -1;
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  .studio,
  .masthead-inner {
    width: calc(100% - var(--space-md));
  }

  .entry,
  .opening {
    padding: var(--space-lg) 0;
  }

  .band {
    margin-inline: calc(var(--space-md) * -1);
    padding: var(--space-lg) var(--space-md);
  }

  .plate figure {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .register div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }

  .closing .spacer {
    margin-left: 0;
  }
}

@media (max-width: 420px) {
  /* Damit kein Bedienelement zweizeilig bricht. */
  .btn {
    font-size: var(--text-sm);
    padding: var(--space-xs) var(--space-sm);
  }

  .routes li,
  .sequence li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xs);
  }

  .routes li::before,
  .sequence li::before {
    grid-row: auto;
  }

  /* Einspaltig: die Zuweisung auf Spalte 2 würde sonst eine leere Spalte
     erzeugen. */
  .routes li > * {
    grid-column: auto;
  }

  .pullquote {
    padding-left: var(--space-md);
  }
}

/* Jede Bewegung auf dieser Seite ist eine Überblendung, deren Dauer aus einem
   Token kommt. Deshalb reicht es, die Token auf null zu setzen, statt jede
   Regel per !important zu überschreiben: Die Bewegung verschwindet an der
   Quelle. Wer hier später etwas animiert, nimmt ebenfalls ein --dur-Token. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }

  html {
    scroll-behavior: auto;
  }
}

@media print {
  .masthead,
  .closing {
    display: none;
  }
}