/* ════════════════════════════════════════════════════════════════
   Fieldnotes Software — Website
   Farben und Schriften kommen aus assets/marke.css. Die Landingpage
   steht auf dem Feld, Dokumentseiten stehen auf Papier. Orange kommt
   in diesem Stylesheet nicht vor: Es gehört der Kachel, und die
   bringt es selbst mit.
════════════════════════════════════════════════════════════════ */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scrollbar-color: #3a444d var(--feld);
  -webkit-text-size-adjust: 100%;
}
html:has(body.papier) { color-scheme: light; scrollbar-color: #c4c3bd var(--papier); }

body {
  margin: 0;
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.feld { background: var(--feld); color: var(--sand); }
body.papier { background: var(--papier); color: var(--tinte); }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
/* Knopf und Sprunglink stehen auf Sand; Weiß wäre dort nicht zu lesen. */
.feld a:not(.knopf, .sprung):hover { color: var(--weiss); }
.papier a:not(.sprung):hover { color: #000; }

.feld ::selection { background: var(--sand); color: var(--tinte); }
.papier ::selection { background: var(--tinte); color: var(--papier); }

:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
  border-radius: 3px;
}
.papier :focus-visible { outline-color: var(--tinte); }

.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--marke);
  font-weight: 600;
  text-decoration: none;
}
.papier .sprung { background: var(--tinte); color: var(--papier); }
.sprung:focus { left: 0; }

.rahmen {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
}

/* Bleibt für Vorleseprogramme, verschwindet für das Auge. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h2 {
  font-family: var(--marke);
  font-weight: 600;
  font-size: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.feld h2 { color: var(--weiss); }

/* ─── GELÄNDE ────────────────────────────────────────────── */
/* Das Gelände liegt fest hinter der ganzen Seite. Ohne Skript ist es ein
   Bild. Mit Skript zeichnet site.js die Karte einmal und lässt sie beim
   Scrollen ruhig mitziehen; die Klasse js nimmt das Bild weg. */
body.feld::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--feld) url('/assets/buehne.png') center / cover no-repeat;
}
.js body.feld::before { background-image: none; }

/* Bis das Skript die Größe setzt, misst es an dieser Fläche das Fenster.
   lvh: die Höhe mit eingefahrener Adressleiste, damit unten nichts fehlt. */
.gelaende {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  max-width: none;
  pointer-events: none;
  will-change: transform;
}
.gelaende path {
  fill: none;
  stroke: var(--sand);
  stroke-opacity: 0.1;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gelaende path.zaehl { stroke-opacity: 0.25; stroke-width: 1.6; }

/* Der eine Bewegungsmoment beim Laden: Die Linien werden gezogen, Stufe
   für Stufe von unten nach oben. Gezeichnet ist der Normalzustand. */
.gelaende.zieht path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ziehen 1.8s var(--aus) forwards;
  animation-delay: calc(var(--n) * 45ms);
}
@keyframes ziehen { to { stroke-dashoffset: 0; } }

/* ─── BÜHNE ──────────────────────────────────────────────── */
/* Aufbau wie die Link-Vorschau: Kachel, Wortmarke, Zeile mittig; der
   Absender unten links, die eine Aktion unten rechts. */
.buehne {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.25rem, 3vw, 2rem) var(--rand) clamp(1.5rem, 3.5vw, 2.5rem);
}

/* Kopf und Fuß der Bühne halten die Breite des Rahmens, damit Sprachschalter,
   Absender und Aktion mit dem Inhalt darunter fluchten. */
.buehne > .buehne-kopf, .buehne-fuss {
  width: min(100%, var(--breite));
  justify-self: center;
}

.buehne-kopf {
  display: flex;
  justify-content: flex-end;
  font-family: var(--marke);
  font-size: 0.9375rem;
  font-weight: 500;
}
/* Auf der Fehlerseite steht der Kopf allein, ohne Bühne darum. */
body > .buehne-kopf { padding: clamp(1.25rem, 3vw, 2rem) var(--rand) 0; }

.sprache {
  display: inline-block;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  text-decoration: none;
}
.sprache:hover { text-decoration: underline; }

.buehne-mitte {
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.buehne-zeichen { width: clamp(5.25rem, 16.5vh, 10.5rem); }
.buehne h1 {
  width: min(100%, 48rem);
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
}
.buehne h1 img { width: 100%; }
.buehne-zeile {
  margin-top: clamp(0.9rem, 2.2vh, 1.4rem);
  font-family: var(--marke);
  font-size: clamp(1.0625rem, 0.85rem + 1vw, 1.5rem);
  letter-spacing: -0.005em;
}

.buehne-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.buehne-absender {
  font-family: var(--marke);
  font-size: 0.9375rem;
  color: var(--leise);
}

.knopf {
  display: inline-block;
  padding: 0.8rem 1.35rem;
  border-radius: 0.75rem;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--marke);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s var(--aus), transform 0.2s var(--aus);
}
.knopf:hover { background: var(--weiss); }
.knopf:active { transform: translateY(1px); }

/* ─── ABSCHNITTE ─────────────────────────────────────────── */
.abschnitt {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  border-top: 1px solid var(--haar);
}

.kopf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* Für eine Überschrift, die den Namen der Marke auf einer Zeile hält. */
.kopf-breit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.kopf-text p { max-width: 38rem; text-wrap: pretty; }
.kopf-text p + p { margin-top: 1em; }

/* Der erste Satz der Textspalte, im Schnitt einer Unterüberschrift. */
.auftakt {
  font-family: var(--marke);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--weiss);
}

/* ─── APPS ───────────────────────────────────────────────── */
/* Zeilen mit Haarlinie, keine Kacheln. Jede App hat viel Luft, durch die
   das Gelände scheint. Links die Pointe groß, rechts, was die App ist und
   wo man sie findet. */
.app {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "pointe kopf" "pointe rest";
  grid-template-rows: auto 1fr;
  gap: 1.25rem clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-top: clamp(5rem, 15vh, 9.5rem);
  padding-bottom: clamp(5rem, 15vh, 9.5rem);
  border-top: 1px solid var(--haar);
}

/* Die Pointe ist das Größte unterhalb der Bühne: der Display-Schnitt, eine
   Stufe über den Überschriften. Der Satz in Weiß und halbfett, der
   Nachsatz leiser und normal – wie „Fieldnotes“ und „Software“ in der
   Wortmarke. */
.pointe {
  grid-area: pointe;
  font-family: var(--marke);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--weiss);
  text-wrap: balance;
}
.pointe span { display: block; }
.nachsatz { font-weight: 400; color: var(--leise); }

.app-kopf {
  grid-area: kopf;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
}
/* Die Icons bringen ihre eigene Welt mit und stehen quadratisch; rund ist
   dem Herausgeber vorbehalten. */
.app-icon {
  grid-row: span 2;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 22.5%;
}
.app h3 {
  align-self: end;
  font-family: var(--marke);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--weiss);
}
.app-plattform {
  align-self: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--leise);
}

.app-rest { grid-area: rest; }
.app-text { max-width: 30rem; text-wrap: pretty; }
.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 0.9rem;
  font-family: var(--marke);
  font-weight: 500;
}
.app-links a {
  display: inline-block;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* ─── SCHLUSS ────────────────────────────────────────────── */
/* Die Seite endet mit einer Adresse, an die man schreiben kann. */
.kontakt-mail {
  display: inline-block;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  font-family: var(--marke);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.4rem + 3.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.fuss {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--haar);
  font-size: 0.9375rem;
  color: var(--leise);
}
.fuss nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-family: var(--marke);
  font-weight: 500;
  color: var(--sand);
}
.fuss a {
  display: inline-block;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  text-decoration: none;
}
.fuss a:hover { text-decoration: underline; }
.papier .fuss { border-color: var(--haar-hell); color: var(--leise-hell); }
.papier .fuss nav { color: var(--tinte); }

/* ─── FEHLERSEITE ────────────────────────────────────────── */
.fehler {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 14vh, 8rem) var(--rand) clamp(4rem, 16vh, 9rem);
}
.fehler-wortmarke { width: min(100%, 26rem); margin-top: 1.75rem; }
.fehler h1 {
  margin-top: clamp(2.5rem, 7vh, 4rem);
  font-family: var(--marke);
  font-weight: 600;
  font-size: clamp(2rem, 1.25rem + 3.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--weiss);
  text-wrap: balance;
}
.fehler p { margin-top: 2rem; }

/* ─── DOKUMENTSEITEN (PAPIER) ────────────────────────────── */
.kopfzeile {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--haar-hell);
  font-family: var(--marke);
  font-size: 0.9375rem;
  font-weight: 500;
}
.heim { display: block; }
.heim img { width: auto; height: 1.875rem; }

/* Überschrift links, Text rechts, wie die Abschnittsköpfe der Marke. Die
   Überschrift bleibt beim Lesen stehen und sagt, wo man ist. */
.dokument {
  width: min(100% - 2 * var(--rand), var(--breite));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.dokument > * { grid-column: 2; max-width: 38rem; }
.dokument > * + * { margin-top: 1em; }
.dokument > h1 {
  grid-column: 1;
  grid-row: 1 / span 400;
  position: sticky;
  top: 2rem;
  max-width: none;
  font-family: var(--marke);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Der erste Absatz steht auf Höhe der Überschrift. */
.dokument > h1 + * { margin-top: 0.35rem; }

.dokument p, .dokument li, .dokument td { text-wrap: pretty; }
.dokument h2 {
  margin-top: 3.25rem;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.dokument h3 {
  margin-top: 2.25rem;
  font-family: var(--marke);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.dokument h2 + *, .dokument h3 + * { margin-top: 0.6rem; }
.dokument strong { font-weight: 600; }
/* DM Sans liegt nur aufrecht vor. Hervorhebungen wie „Rechtsgrundlage:“
   stehen deshalb im Schnitt der Beschriftung statt in falscher Kursive. */
.dokument em {
  font-family: var(--marke);
  font-style: normal;
  font-weight: 500;
}
/* Bezeichner wie localStorage – hier ist die Festbreite Inhalt. */
.dokument code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.875em;
}

/* Hinweis auf die maßgebliche Fassung: gefasste Tafel mit Haarlinie. */
.dokument blockquote {
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--haar-hell);
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--leise-hell);
}
.dokument blockquote a { color: var(--tinte); }

/* Aufzählungen im Lesetext. */
.dokument ul { padding-left: 1.2rem; list-style: disc; }
.dokument li + li { margin-top: 0.35em; }
.dokument li::marker { color: var(--leise-hell); }

/* Listen, die nur aus Links bestehen, werden zu Zeilen mit Haarlinie. */
.dokument ul:has(> li > a:only-child) {
  margin-top: 2rem;
  padding-left: 0;
  list-style: none;
  border-top: 1px solid var(--haar-hell);
}
.dokument li:has(> a:only-child) { margin-top: 0; border-bottom: 1px solid var(--haar-hell); }
.dokument li > a:only-child {
  display: block;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  font-family: var(--marke);
  font-weight: 500;
  text-decoration: none;
}
.dokument li > a:only-child:hover { text-decoration: underline; }

.dokument table {
  width: 100%;
  margin-top: 1.25rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.dokument th, .dokument td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-top: 1px solid var(--haar-hell);
  text-align: left;
  vertical-align: top;
}
.dokument th {
  border-top: 0;
  font-family: var(--marke);
  font-weight: 500;
  color: var(--leise-hell);
}
.dokument td:first-child { font-weight: 600; }
.dokument th:last-child, .dokument td:last-child { padding-right: 0; }
.dokument tr:last-child td { border-bottom: 1px solid var(--haar-hell); }

/* ─── BREITEN ────────────────────────────────────────────── */
@media (min-width: 48rem) {
  .abschnitt { padding-top: 6rem; padding-bottom: 6rem; }
}

@media (min-width: 75rem) {
  .abschnitt { padding-top: 8.5rem; padding-bottom: 8.5rem; }

  /* Im Display-Schnitt braucht die Pointe mehr Breite, sonst stapeln sich
     die englischen Sätze in kurzen Zeilen: 8 : 4 statt 7 : 5. */
  .app { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

@media (max-width: 60rem) {
  .kopf { grid-template-columns: minmax(0, 1fr); }

  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "pointe" "rest";
    grid-template-rows: auto;
    row-gap: 1.5rem;
    padding-top: clamp(4rem, 11vh, 6rem);
    padding-bottom: clamp(4rem, 11vh, 6rem);
  }

  .dokument { grid-template-columns: minmax(0, 1fr); }
  .dokument > * { grid-column: 1; }
  .dokument > h1 { grid-row: auto; position: static; }
  .dokument > h1 + * { margin-top: 1.5rem; }
}

@media (max-width: 36rem) {
  .buehne-fuss { flex-direction: column; align-items: stretch; text-align: center; }
  .buehne-fuss .knopf { text-align: center; }

  .fuss { flex-direction: column; align-items: flex-start; }

  /* Die Tabelle der Empfänger wird zur Liste: je Empfänger ein Block. */
  .dokument thead { display: none; }
  .dokument tr { display: block; padding: 0.7rem 0; border-top: 1px solid var(--haar-hell); }
  .dokument tr:last-child { border-bottom: 1px solid var(--haar-hell); }
  .dokument td { display: block; padding: 0; border: 0; }
  .dokument tr:last-child td { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gelaende.zieht path { animation: none; stroke-dashoffset: 0; }
  .knopf { transition: none; }
}