/* ════════════════════════════════════════════════════════════════
   Hendrik Heidsiek — Visitenkarte im Stil von Fieldnotes Software
   Drei Ebenen hinter einem Segment im Kopf. Das Feld ist der
   Normalzustand, Papier die Gegenseite: Off-Grid und Apps stehen auf
   dem Feld, das Profil auf Papier. Orange kommt in diesem Stylesheet
   nicht vor — es gehört der Kachel, und die bringt es selbst mit.
════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Werte aus dem Markenpaket (fieldnotes: assets/markenblatt.css). */
  --feld:        #0e1419;
  --feld-hoch:   #151d24;
  --sand:        #e8dfd0;
  --papier:      #fafaf9;
  --tinte:       #0e1419;
  --weiss:       #ffffff;
  --leise:       #9a968e;
  --leise-hell:  #6b6b6b;
  --haar:        rgba(232, 223, 208, 0.16);
  --haar-hell:   #e2e1dc;

  /* Die eine Abweichung: Das Profil behält sein Blau. Es gehört dort der
     Signal-Linie und der zweiten Zeile der Überschrift, sonst nichts —
     dieselbe Regel wie beim Orange der Kachel. */
  --profil-signal: #0284c7;

  --marke:       'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --text:        'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  --rand:        clamp(1.25rem, 4.5vw, 3.5rem);
  --breite:      72.5rem;
  --luft:        clamp(2.5rem, 6vw, 4rem);
  --kopf-h:      3.75rem;
  /* Das Band unter dem Kopf der beiden dunklen Ebenen: das Foto in
     Off-Grid und die Bühne in Apps sind gleich hoch. */
  --band-h:      clamp(17rem, 42svh, 26rem);
  --aus:         cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── ZWEI SEITEN ────────────────────────────────────────── */
/* Jede Rolle hat einen Wert fürs Feld und einen fürs Papier. Alles
   Weitere fragt nur noch nach der Rolle. Der Kopf wechselt die Seite
   mit der Ebene. */
.auf-papier,
body[data-layer="profil"] .kopfleiste {
  --grund:   var(--papier);
  --schrift: var(--tinte);
  --lese:    var(--tinte);
  --neben:   var(--leise-hell);
  --linie:   var(--haar-hell);
  --ton-1:   rgba(14, 20, 25, 0.05);
  --ton-2:   rgba(14, 20, 25, 0.09);
  --ring:    var(--tinte);
  --hell:    #000;
  color-scheme: light;
}
.auf-feld,
body:not([data-layer="profil"]) .kopfleiste {
  --grund:   var(--feld);
  --schrift: var(--weiss);
  --lese:    var(--sand);
  --neben:   var(--leise);
  --linie:   var(--haar);
  --ton-1:   rgba(232, 223, 208, 0.06);
  --ton-2:   rgba(232, 223, 208, 0.12);
  --ring:    var(--sand);
  --hell:    var(--weiss);
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scrollbar-color: #c9c8c2 var(--papier);
  -webkit-text-size-adjust: 100%;
}
/* Liegt eine dunkle Ebene über dem Profil, rollt nur sie. */
html:has(body:not([data-layer="profil"])) { overflow: hidden; }

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

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, address { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:not(.knopf, .sprung, .ausgang):hover { color: var(--hell); }

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

:focus-visible {
  outline: 2px solid var(--ring, var(--tinte));
  outline-offset: 3px;
  border-radius: 3px;
}

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

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

/* ─── KOPF ───────────────────────────────────────────────── */
/* Flach und deckend: kein Glas, keine Unschärfe. Die Leiste steht auf
   der Seite der Ebene, die gerade offen ist. */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--kopf-h);
  background: var(--grund);
  border-bottom: 1px solid var(--linie);
  color: var(--schrift);
  font-family: var(--marke);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 0.2s var(--aus), border-color 0.2s var(--aus), color 0.2s var(--aus);
}
.kopfleiste-innen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: 100%;
}
.kopfleiste-rechts { display: flex; align-items: center; }

/* Zeichen vor dem Namen, wie in den Logos der Marke die Kachel vor der
   Wortmarke. Es ist das H des Favicons in seiner einfarbigen Fassung:
   der Buchstabe ausgespart, die Farbe von der Seite — auf Papier Tinte,
   auf dem Feld Weiß. Die Datei dient nur als Maske. */
.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  white-space: nowrap;
  text-decoration: none;
}
.wortmarke::before {
  content: '';
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  background: currentColor;
  -webkit-mask: url('../marke/h-zeichen.svg') center / contain no-repeat;
  mask: url('../marke/h-zeichen.svg') center / contain no-repeat;
}

/* Die Auswahl ist eine Tonfläche, keine Farbe: gezeigt mit dem ersten
   Ton, gewählt mit dem zweiten — wie die Zeilen im Kartenausschnitt. */
.layer-nav { display: flex; gap: 0.125rem; }
.layer-nav button {
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  color: var(--neben);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--aus), color 0.2s var(--aus);
}
.layer-nav button:hover { background: var(--ton-1); color: var(--schrift); }
.layer-nav button[aria-current] { background: var(--ton-2); color: var(--schrift); }

/* Die Sprachwahl ist kein vierter Menüpunkt. Ein Haarstrich trennt sie,
   mit gleichem Abstand links und rechts. */
#lang-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.9rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--linie);
  color: var(--neben);
  line-height: 1;
}
#lang-toggle .lang-opt {
  padding: 0.5rem 0.1rem;
  border: 0;
  background: none;
  color: var(--neben);
  cursor: pointer;
  transition: color 0.2s var(--aus);
}
#lang-toggle .lang-opt:hover,
#lang-toggle .lang-opt.active { color: var(--schrift); }

/* ─── EBENEN-WECHSEL ─────────────────────────────────────── */
/* visibility (nicht nur opacity) nimmt die verblasste Ebene aus der
   Tab-Reihenfolge — sonst tabbt man durch unsichtbare Links. */
#site-content {
  background: var(--papier);
  transition: opacity 0.3s var(--aus), visibility 0s;
}
body:not([data-layer="profil"]) #site-content {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.3s var(--aus), visibility 0s 0.3s;
}

/* Beide dunklen Ebenen starten auf display:none — so lädt der Profil-Besuch
   kein einziges Bild. js/site.js hängt sie beim ersten Ansteuern ein. */
#off-grid-content,
#apps-content {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  padding-top: var(--kopf-h);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #3a444d var(--feld);
  background: var(--feld);
  color: var(--sand);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--aus);
}
body.ready-offgrid #off-grid-content { display: block; }
body.ready-apps #apps-content { display: block; }
body[data-layer="offgrid"] #off-grid-content,
body[data-layer="apps"] #apps-content {
  opacity: 1;
  pointer-events: auto;
}

/* ─── ABSCHNITTE ─────────────────────────────────────────── */
/* Das Raster des Markenblatts: Überschrift links, Inhalt rechts, 5 : 7.
   Jeder Abschnitt beginnt mit einer Haarlinie. */
.abschnitt {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
  border-top: 1px solid var(--linie);
}
.abschnitt--erster { border-top: 0; padding-top: var(--luft); }

.kopf {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}

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;
  color: var(--schrift);
  text-wrap: balance;
}
h2 em { font-style: normal; }

h3 {
  font-family: var(--marke);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--schrift);
}

.kopf-text p { max-width: 38rem; color: var(--lese); text-wrap: pretty; }
.kopf-text p + p { margin-top: 1em; }
.lede { font-size: 1.375rem; line-height: 1.5; }

/* Listen sind Zeilen mit Haarlinie darüber, keine Kacheln. Die erste
   Zeile steht auf der Höhe der Überschrift daneben und braucht keine. */
.zeilen > li {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid var(--linie);
}
.zeilen > li:first-child { border-top: 0; padding-top: 0.35rem; }
.zeilen > li:last-child { padding-bottom: 0; }
.zeilen p {
  max-width: 38rem;
  margin-top: 0.4rem;
  color: var(--lese);
  text-wrap: pretty;
}

/* Dateilinks des Markenblatts: unterstrichen, eine Linie von 1 px. */
.verweise {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-family: var(--marke);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lese);
}
.verweise a { display: inline-block; padding-top: 0.45rem; padding-bottom: 0.45rem; }

/* ─── GELÄNDE ────────────────────────────────────────────── */
/* Eine Karte, viele Fenster: Jede Fläche zeigt einen Ausschnitt
   desselben Geländes. js/gelaende.js zeichnet ihn in der Größe des
   Elements. Die Linien tragen nie Farbe, nur Deckung: 10 %, jede fünfte
   als Zähllinie 25 %. */
.gelaende {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.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; }
/* Auf Papier Ton in Ton in Tinte. */
.gelaende .papierseite path { stroke: var(--tinte); stroke-opacity: 0.07; }
.gelaende .papierseite path.zaehl { stroke-opacity: 0.17; }

/* Der eine Bewegungsmoment: Die Linien werden gezogen, Stufe für Stufe
   von unten nach oben. Gezeichnet ist der Normalzustand — die Klassen
   setzt das Skript nur, wenn ein Fenster zum ersten Mal ins Bild kommt. */
.gelaende.wartet path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.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; } }

/* ════════════════════════════════════════════════════════════════
   PROFIL
   Die Papierseite. Sachlich, ohne Gelände im Kopf — die Überschrift
   heißt „Weniger Rauschen".
════════════════════════════════════════════════════════════════ */
.hero {
  padding-top: calc(var(--kopf-h) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}

.hero h1 {
  font-family: var(--marke);
  font-weight: 600;
  font-size: clamp(2.375rem, 0.6rem + 7.6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--schrift);
}
.hero h1 em { font-style: normal; color: var(--profil-signal); }

/* Die Linie unter der Überschrift legt sich beim Laden aus Rauschen zu
   einer geraden. Gezeichnet wird sie in site.js; hier steht nur, wo sie
   liegt und dass sie ihre Farbe über currentColor weitergibt. */
.signal {
  width: 100%;
  height: 44px;
  margin: clamp(1.1rem, 2.6vw, 1.9rem) 0 clamp(0.9rem, 2.2vw, 1.5rem);
  color: var(--profil-signal);
}

.hero-fuss {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1rem clamp(2rem, 6vw, 5rem);
  align-items: start;
  font-family: var(--marke);
}
.hero-rolle { font-size: 1.0625rem; font-weight: 500; line-height: 1.4; color: var(--schrift); }
.hero-rolle span { display: block; }
.hero-rolle span + span { font-weight: 400; color: var(--neben); }
.hero-sub {
  max-width: 30rem;
  font-size: clamp(1.0625rem, 0.85rem + 1vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--schrift);
  text-wrap: balance;
}

/* Kein Knopf, kein Pfeil: LinkedIn steht als Textlink im Satz. */
.kontakt-text {
  max-width: 30rem;
  padding-top: 0.35rem;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--lese);
  text-wrap: pretty;
}

/* ─── NAHT: PAPIER KIPPT INS FELD ────────────────────────── */
/* Der Wechsel passiert nicht erst nach dem Klick. Unter dem Kontakt
   endet das Papier, und aus dem Feld darunter ragt eine Kuppe herauf:
   dieselben Linien, unten in Sand, oben in Tinte. Wer über die Kante
   scrollt, ist halb drüben, bevor er sich entscheidet.

   Der Streifen hat keine Linie über sich. Er ist kein Abschnitt, nur
   der Platz, den die Kuppe braucht; js/gelaende.js lässt aufs Papier
   nur, was sich darin von selbst schließt. */
.naht { position: relative; isolation: isolate; }
.naht-papier { height: clamp(7rem, 15vw, 11rem); }
.naht-band {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--feld);
  color: var(--sand);
}
/* Über dem Grund des Bands, unter dem, was darauf steht. */
.naht > .gelaende { z-index: 1; }
.naht-band > * { position: relative; z-index: 2; }

/* Keine Haarlinien im Band: Die Höhenlinien dahinter sind die einzigen
   Linien, die hier stehen. Die beiden Ausgänge trennt ihr Abstand.

   Die Fläche gehört der Zeile: Sie reicht über den Satzspiegel hinaus,
   damit der Ton beim Zeigen nicht am Wort klebt. */
.ausgang {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-inline: -0.75rem;
  padding: clamp(1rem, 2.4vw, 1.6rem) 0.75rem;
  border-radius: 0.75rem;
  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-decoration: none;
  transition: background-color 0.2s var(--aus), color 0.2s var(--aus);
}
/* Die Apps stehen leiser als der Weg nach draußen. */
.ausgang--leise { color: var(--leise); }
.ausgang svg {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  transition: transform 0.2s var(--aus);
}
@media (hover: hover) {
  .ausgang:hover { background: var(--ton-1); color: var(--weiss); }
  .ausgang:hover svg { transform: translateX(0.25rem); }
}
.ausgang:active svg { transform: translateX(0.4rem); }

.fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.5rem;
  padding-bottom: 2.25rem;
  font-size: 0.9375rem;
  color: var(--leise);
}
.fuss button {
  padding: 0.45rem 0;
  border: 0;
  background: none;
  color: var(--sand);
  font-family: var(--marke);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: color 0.2s var(--aus);
}
.fuss button:hover { color: var(--weiss); }

.fuss-ohne-skript {
  flex-basis: 100%;
  padding-top: 1.25rem;
  border-top: 1px solid var(--haar);
  color: var(--sand);
}
.fuss-ohne-skript h2 { margin-bottom: 0.4rem; font-size: 1.0625rem; letter-spacing: -0.012em; }

/* ─── IMPRESSUM ──────────────────────────────────────────── */
/* Das Abdunkeln ist das der Karte: Feld mit halber Deckung, keine
   Unschärfe. Die Tafel steht auf Papier. */
.impressum {
  width: min(100% - 2rem, 36rem);
  max-height: calc(100dvh - 2rem);
  padding: 2rem;
  border: 1px solid var(--haar-hell);
  border-radius: 1rem;
  background: var(--papier);
  color: var(--tinte);
  overscroll-behavior: contain;
  scrollbar-color: #c9c8c2 var(--papier);
}
.impressum::backdrop { background: rgba(14, 20, 25, 0.5); }
.impressum-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.impressum h2 { font-size: 1.75rem; letter-spacing: -0.025em; }
.impressum-zeile {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  border-top: 1px solid var(--haar-hell);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.impressum-zeile:last-child { padding-bottom: 0; }
.impressum h3 {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--leise-hell);
}

/* Der leise Knopf des Markenblatts: Haarlinie, sonst nichts. */
.schliessen {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--haar-hell);
  border-radius: 0.625rem;
  background: none;
  color: var(--tinte);
  cursor: pointer;
  transition: border-color 0.2s var(--aus), background-color 0.2s var(--aus);
}
.schliessen:hover { border-color: var(--tinte); background: var(--ton-1); }
.schliessen svg { width: 1.125rem; height: 1.125rem; }

/* ════════════════════════════════════════════════════════════════
   OFF-GRID
   Die Fotos führen, die Fläche tritt zurück. Kein Text auf dem Bild,
   kein Verlauf darüber: Die Überschrift steht darunter auf dem Feld.
════════════════════════════════════════════════════════════════ */
/* So hoch wie die Bühne der Apps-Ebene — beim Wechsel zwischen den
   beiden Ebenen bleibt die Kante darunter stehen. */
.og-buehne {
  position: relative;
  overflow: hidden;
  height: var(--band-h);
  background: var(--feld-hoch);
}
/* Unter dem Horizont ist das Foto reines Schwarz, darüber stehen oben
   nur Zweige. Das Band zeigt deshalb nie die ganze Bildhöhe, sondern
   höchstens den Streifen von 18 bis 74 %: Das Bild ist höher als das
   Band (178 %) und um seinen oberen Rand nach oben geschoben. Auf
   schmalen Schirmen schneidet das enger an; auf breiten, wo ohnehin nur
   ein Streifen passt, wählt object-position den Horizont. */
.og-buehne img {
  position: absolute;
  left: 0;
  top: -32%;
  width: 100%;
  height: 178%;
  object-fit: cover;
  object-position: 55% 77%;
}

/* Die Setzung der Wortmarke als Text: der größte Schnitt der Seite. */
.gross {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* ─── OFF-GRID: BILDSTRECKE ──────────────────────────────── */
/* Jedes Foto ein Fenster mit weichen Ecken; die Zeile steht darunter,
   nicht darauf. */
.og-strecke {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(5rem, auto);
  gap: 1.5rem 1rem;
}
.bild {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
/* Das Bild füllt, was die Zeile unter ihm übrig lässt. */
.bild picture {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--feld-hoch);
}
.bild img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bild figcaption {
  font-family: var(--marke);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sand);
}
.bild figcaption span {
  margin-right: 0.6rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--leise);
}

.bild--canyon   { grid-column: 1 / span 7; grid-row: span 6; min-height: 32rem; }
.bild--mojave   { grid-column: 8 / span 5; grid-row: span 4; min-height: 21rem; }
.bild--nitrox   { grid-column: 8 / span 5; grid-row: span 2; min-height: 13rem; }
.bild--pct      { grid-column: 1 / span 4; grid-row: span 4; min-height: 25rem; }
.bild--aqueduct { grid-column: 5 / span 8; grid-row: span 4; min-height: 25rem; }
.bild--gravel   { grid-column: 1 / span 4; grid-row: span 4; min-height: 24rem; }
.bild--kitesurf { grid-column: 5 / span 4; grid-row: span 4; min-height: 24rem; }

/* Tafeln sind die Ausnahme. Das Zitat ist eine. */
.zitat {
  grid-column: 9 / span 4;
  grid-row: span 4;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  border: 1px solid var(--haar);
  border-radius: 1rem;
}
.zitat blockquote {
  font-family: var(--marke);
  font-weight: 600;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--weiss);
  text-wrap: balance;
  quotes: '„' '“';
}
:lang(en) .zitat blockquote { quotes: '“' '”'; }
.zitat blockquote::before { content: open-quote; }
.zitat blockquote::after { content: close-quote; }

.og-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  padding-top: 2rem;
  padding-bottom: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--haar);
}

/* ════════════════════════════════════════════════════════════════
   APPS
   Hier steht der Herausgeber: Fieldnotes Software. Kachel, Wortmarke
   und Gelände wie auf dem Markenblatt, aber als flaches Band statt als
   ganzer Schirm — darunter sollen die Apps schon zu sehen sein.
   Keine Screenshots — die stehen im Store.
════════════════════════════════════════════════════════════════ */
.buehne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: var(--band-h);
  padding: 2.5rem var(--rand);
}
.buehne .gelaende { z-index: -1; }
.buehne-mitte {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
/* Zeichen, Wortmarke und Adresse sind ein Verweis. Er ist so breit wie
   die Wortmarke, nicht wie die Bühne — das Gelände daneben klickt nicht. */
.buehne-marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 30rem);
  border-radius: 0.75rem;
  color: var(--sand);
  text-decoration: none;
}
.buehne-zeichen { width: clamp(4.5rem, 11svh, 6.5rem); }
.buehne-wortmarke { display: block; width: 100%; margin-top: clamp(1.25rem, 3svh, 2rem); }
.buehne-wortmarke img { width: 100%; }
/* Die Adresse im Schnitt der Dateilinks: unterstrichen, eine Linie. */
.buehne-adresse {
  margin-top: clamp(0.9rem, 2.2svh, 1.4rem);
  font-family: var(--marke);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 0.2s var(--aus);
}

/* Die Gewichtung der Wortmarke: erst halbfett und weiß, dann normal
   und leiser. Die zweite Zeile ist lang, deshalb dreht sich das Raster
   hier auf 7 : 5. */
.apps-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.apps-kopf h2 em { font-weight: 400; color: var(--leise); }

.apps { margin-top: var(--luft); }
.app {
  display: grid;
  grid-template-columns: 4rem minmax(0, 4fr) minmax(0, 7fr);
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--haar);
}
.app-icon { width: 4rem; height: 4rem; border-radius: 0.875rem; }
.app-kopf { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.2rem; }
/* Die Plattform ist eine Angabe, kein Ziel. */
.app-plattform { font-family: var(--marke); font-size: 0.9375rem; color: var(--leise); }
.app-text p { max-width: 38rem; text-wrap: pretty; }
.app-text .verweise { margin-top: 0.6rem; }

.apps-notiz {
  padding-top: 2rem;
  border-top: 1px solid var(--haar);
}

/* ════════════════════════════════════════════════════════════════
   FEHLERSEITE
   Neben der Karte. Das Feld, ein Fenster aufs Gelände, ein Weg zurück.
════════════════════════════════════════════════════════════════ */
.fehler {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(1.25rem, 3vw, 2rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
  background: var(--feld);
  color: var(--sand);
}
.fehler .gelaende { z-index: -1; }
.fehler-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: var(--marke);
  font-size: 0.9375rem;
  font-weight: 500;
}
.fehler-kopf a { color: var(--weiss); text-decoration: none; }
.fehler-kopf span { font-weight: 400; color: var(--leise); }
.fehler-mitte { align-self: center; padding-top: 3rem; padding-bottom: 3rem; }
.fehler h1 {
  font-family: var(--marke);
  font-weight: 600;
  font-size: clamp(2.375rem, 0.6rem + 7.6vw, 6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--weiss);
}
.fehler h1 em { font-style: normal; font-weight: 400; color: var(--leise); }
.fehler-mitte p { max-width: 34rem; margin-top: 1.5rem; text-wrap: pretty; }
.fehler-mitte p + p { margin-top: 0.5rem; color: var(--leise); }
.fehler-mitte .knopf { margin-top: 2.25rem; }

/* Die primäre Aktion steht in Sand mit Tinte, nicht in Orange. */
.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); }

/* ─── BREITER ────────────────────────────────────────────── */
/* Die großen Abstände wachsen in zwei Stufen mit dem Schirm. */
@media (min-width: 48rem) {
  .abschnitt { padding-top: 6rem; padding-bottom: 6rem; }
  .abschnitt--erster { padding-top: var(--luft); }
}
@media (min-width: 75rem) {
  .abschnitt { padding-top: 8.5rem; padding-bottom: 8.5rem; }
  .abschnitt--erster { padding-top: var(--luft); }
}

/* ─── SCHMALER ───────────────────────────────────────────── */
@media (max-width: 60rem) {
  .kopf, .apps-kopf, .hero-fuss { grid-template-columns: minmax(0, 1fr); }
  .zeilen > li:first-child { padding-top: 0; }
  .kontakt-text { padding-top: 0; }

  .app { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .app-icon { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; }
  .app-text { grid-column: 2; }

  .og-strecke { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bild--canyon   { grid-column: 1 / -1; grid-row: span 5; min-height: 24rem; }
  .bild--mojave   { grid-column: 1 / -1; grid-row: span 4; min-height: 19rem; }
  .bild--nitrox   { grid-column: 1 / -1; grid-row: span 3; min-height: 15rem; }
  .bild--pct      { grid-column: 1 / -1; grid-row: span 4; min-height: 21rem; }
  .bild--aqueduct { grid-column: 1 / -1; grid-row: span 4; min-height: 19rem; }
  .bild--gravel   { grid-column: 1 / -1; grid-row: span 3; min-height: 17rem; }
  .bild--kitesurf { grid-column: 1 / -1; grid-row: span 5; min-height: 26rem; }
  .zitat          { grid-column: 1 / -1; grid-row: span 2; align-items: center; }
}

/* Die Textnav bleibt einzeilig, sie schrumpft nur. --kopf-h zieht mit,
   weil Hero und dunkle Ebenen darauf rechnen. */
@media (max-width: 36rem) {
  :root { --kopf-h: 3.375rem; }
  .kopfleiste { font-size: 0.8125rem; }
  .kopfleiste-innen { gap: 0.5rem; }
  .wortmarke { font-size: 0.8125rem; }
  /* Für das Zeichen ist neben Name, drei Einträgen und Sprachwahl kein
     Platz mehr. Der Name bleibt. */
  .kopfleiste .wortmarke::before { display: none; }
  .layer-nav button { padding: 0.7rem 0.45rem; }
  #lang-toggle { gap: 0.25rem; margin-left: 0.4rem; padding-left: 0.6rem; }
  #lang-toggle .lang-opt { padding-top: 0.7rem; padding-bottom: 0.7rem; }

  .impressum { padding: 1.25rem; }
  .impressum-zeile { grid-template-columns: minmax(0, 1fr); }
  .zitat { padding: 1.25rem; }
  .lede, .kontakt-text { font-size: 1.25rem; }
}

/* Unterhalb von 360 px reicht die Breite nicht mehr für Wortmarke, drei
   Einträge und die getrennte Sprachwahl. Die Leiste schrumpft eine
   Stufe weiter — sie bleibt einzeilig, „EN" bleibt im Bild. */
@media (max-width: 22.5rem) {
  .kopfleiste { font-size: 0.75rem; }
  .wortmarke { font-size: 0.75rem; }
  .layer-nav button { padding: 0.7rem 0.3rem; }
  #lang-toggle { margin-left: 0.25rem; padding-left: 0.45rem; }
}

/* ─── REDUZIERTE BEWEGUNG ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gelaende.zieht path, .gelaende.wartet path { animation: none; stroke-dashoffset: 0; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}