@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* "Moss & Brass" auf Schwarz. Dunkel ist die Voreinstellung, Hell kommt
   nur ueber den Umschalter, die Systemeinstellung wird bewusst nicht
   gelesen. Messing ist der Akzent, Moos traegt Hoehenlinien und
   Eckverlauf. */
:root {
  --ground:        #0a0b09;
  --surface:       #121510;
  --ink:           #ede8dc;
  --muted:         #9ea393;
  --hairline:      #253027;
  --accent:        #b08d57;
  --accent-strong: #d9b97a;
  --moss:          #3e5240;
  --select-bg:     #3e5240;
  /* Anteil des Mooses im Eckverlauf und Deckkraft der Hoehenlinien. */
  --ambient:       38%;
  --deco-opacity:  0.55;
  --intro-glow:    42%;
  --pad-x: clamp(1.5rem, 6vw, 7rem);
  --wrap: 76rem;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ground:        #f8f9f6;
  --surface:       #f0f2eb;
  --ink:           #1a1c16;
  --muted:         #5c6352;
  --hairline:      #dde1d4;
  --accent:        #8a6a36;
  --accent-strong: #6e5328;
  --moss:          #6b8a3a;
  --select-bg:     #ebe3d0;
  --ambient:       9%;
  --deco-opacity:  0.10;
  --intro-glow:    14%;
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--ground);
}

/* Zwei sehr weiche Eckverlaeufe in Moos, auf denselben Ecken
   wie die Hoehenlinien. Sie geben der Flaeche Tiefe, ohne als Farbwaesche
   aufzufallen. Als eigene fixierte Ebene statt per
   background-attachment: fixed, weil das auf iOS beim Scrollen ruckelt. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(58rem 40rem at 100% 0%,
      color-mix(in oklab, var(--moss) var(--ambient), transparent), transparent 72%),
    radial-gradient(48rem 34rem at 0% 100%,
      color-mix(in oklab, var(--moss) var(--ambient), transparent), transparent 72%);
}

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

/* Bewusst ohne eigenen Hintergrund: die Hoehenlinien-Ebenen liegen auf
   z-index -1 und wuerden sonst hinter der Flaeche des Body verschwinden. */
body {
  margin: 0;
  color: var(--ink);
  font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

a {
  color: var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; height: auto; }

.shot {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: var(--hairline);
}

/* Screenshots von Oberflaechen duerfen nicht beschnitten werden, sonst
   fehlen Randbereiche. Sie behalten ihr eigenes Seitenverhaeltnis. */
.shot--native {
  aspect-ratio: auto;
  object-fit: initial;
}

/* ---------- Navigation, eine Zeile, 64 px hoch ---------- */

/* Leicht durchscheinend mit Weichzeichner, damit Hoehenlinien und Verlauf
   dahinter erkennbar bleiben. Wo das nicht geht oder wo der Nutzer
   weniger Transparenz verlangt, wird die Flaeche wieder deckend. */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--ground) 84%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--ground); }
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--ground);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
  padding-block: 0.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover { color: var(--accent-strong); }

.nav-right {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

.nav-link {
  color: var(--ink);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover { color: var(--accent-strong); text-decoration: underline; }

/* Sprachumschalter, vorbereitet fuer die englische Fassung. */
.lang {
  display: inline-flex;
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  line-height: 1.2;
  overflow: hidden;
}

.lang > * {
  padding: 0.34rem 0.5rem;
  color: var(--muted);
  text-decoration: none;
}

.lang-on {
  background: var(--accent-strong);
  color: var(--ground);
  font-weight: 700;
}

.lang-off:hover { color: var(--accent-strong); }

.lang > *:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
}

.wordmark .ak {
  width: 1.625rem;
  height: 1.625rem;
  color: var(--accent);
}

.wordmark:hover .ak { color: var(--accent-strong); }

/* Auf schmalen Schirmen bleibt nur das Monogramm, sonst platzt die
   Navigationszeile. Der Name bleibt fuer Screenreader erhalten. */
@media (max-width: 620px) {
  .wm-full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .wordmark .ak { width: 1.75rem; height: 1.75rem; }
  .nav-right    { gap: 0.7rem; }
  .nav-link     { font-size: 0.875rem; }
  .lang > *     { padding-inline: 0.4rem; }
  #theme-toggle { padding-inline: 0.55rem; }
}

/* Unter 420 px passt die Zeile auch eng nicht mehr. Dann steht das
   Monogramm allein oben und die Links darunter ueber die volle Breite,
   statt dass die Seite seitlich scrollt. */
@media (max-width: 420px) {
  .nav-inner { flex-wrap: wrap; row-gap: 0.6rem; }
  .nav-right { width: 100%; justify-content: space-between; gap: 0.5rem; }
}

#theme-toggle {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s ease, transform 0.08s ease;
}

#theme-toggle:hover  { border-color: var(--accent-strong); }
#theme-toggle:active { transform: translateY(1px); }

#theme-toggle:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #theme-toggle, .card { transition: none; }
}

/* ---------- Kopf, asymmetrisch geteilt ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3.5rem, 8vh, 5.5rem) clamp(3.5rem, 9vh, 6rem);
}

/* AK-Monogramm als SVG, dieselbe Geometrie wie /logo.svg. Die Farbe kommt
   ueber currentColor, damit es beide Designs mitmacht. Es ersetzt im Kopf
   den Akzentbalken, damit nicht zwei Marken konkurrieren. */
.ak {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  overflow: visible;
}

.logo {
  justify-self: end;
  width: clamp(7rem, 19vw, 14rem);
  height: auto;
  color: var(--accent);
}

.mark {
  width: 4.5rem;
  height: 0.5rem;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  background: var(--accent);
}

h1 {
  margin: 0;
  font-size: clamp(2.5rem, 7.5vw, 5.5rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

.hero p {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.1875rem);
  color: var(--ink);
  text-wrap: pretty;
}

/* Zweite Zeile im Kopf: woran gerade gearbeitet wird. Bewusst kleiner,
   damit der Name die Hauptstimme bleibt. */
.hero .meta {
  margin-top: 0.85rem;
  max-width: 40ch;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Abschnitte und Ueberschriften ---------- */

section { padding-block: clamp(3.5rem, 9vh, 6rem); }

/* Die Navigation klebt oben, deshalb muss ein Ankersprung darunter frei
   bleiben, sonst verschwindet die Ueberschrift hinter der Leiste. */
[id] { scroll-margin-top: 5.5rem; }

h2 {
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  font-size: clamp(1.875rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }

.lead {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
  text-wrap: pretty;
}

.lead.quiet { color: var(--muted); }

/* ---------- Projektkarten ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 0;
  /* Minimal abgesetzte Flaeche, damit die Karte als Gegenstand liest und
     nicht als Rahmen auf dem Papier. */
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.card:hover { border-color: var(--accent-strong); }

.card:hover .card-title { text-decoration: underline; text-underline-offset: 0.2em; }

.card:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.card-title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.card-desc { margin: 0; color: var(--muted); }

.card-tech { margin: 0; font-size: 0.875rem; color: var(--muted); }

/* Karten ohne Bild spannen die ganze Breite. Dadurch bleibt im
   zweispaltigen Raster keine leere Zelle stehen. */
.card--wide { grid-column: 1 / -1; }

.card--wide .card-body > * { max-width: 62ch; }

/* ---------- Architekturdiagramm ---------- */

pre {
  margin: clamp(1.5rem, 4vh, 2.25rem) 0 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  tab-size: 2;
}

code {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 0.9em;
}

/* ---------- Hinweis zum Betriebszustand ---------- */

.status {
  margin: 0 0 1.1rem;
  max-width: 58ch;
  font-weight: 700;
}

/* ---------- Projektseite: Bildtrio ---------- */

/* Ein breites, zwei schmale. Genau drei Zellen fuer drei Bilder. */
.trio {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}

.trio > :first-child { grid-column: 1 / -1; }

/* ---------- Projektseite: Bezeichner links, Prosa rechts ---------- */

.rows { display: grid; gap: clamp(1.75rem, 4vh, 2.75rem); }

.row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: clamp(0.5rem, 2vw, 2.5rem);
  align-items: start;
}

.row p { margin: 0; max-width: 62ch; color: var(--muted); }

/* ---------- Projektseite: gemessene Werte ---------- */

/* Breite Tabellen scrollen in ihrem eigenen Kasten, damit die Seite
   selbst nie waagerecht scrollt. */
.tablewrap { overflow-x: auto; }

.num { text-align: right; white-space: nowrap; }

table {
  width: 100%;
  max-width: 46rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption {
  margin-bottom: 1.25rem;
  max-width: 58ch;
  color: var(--muted);
  text-align: left;
}

th, td { padding: 0.6rem 0; text-align: left; vertical-align: baseline; }

/* Waagerechter Abstand zwischen den Spalten. Ohne das kleben eine
   rechtsbuendige und die naechste linksbuendige Spalte aneinander. */
tr > *:not(:first-child) { padding-left: 1.5rem; }

/* Nur eine Linie unter dem Kopf, keine Linie pro Zeile. */
thead th {
  border-bottom: 1px solid var(--hairline);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--muted);
}

tbody th { font-weight: 400; }
tbody td { color: var(--muted); }

/* ---------- Sprachfarben ----------
   Die Farben sind die von GitHub Linguist, unveraendert uebernommen.
   Fuenf davon sind auf Weiss zu blass und fuenf andere auf Schwarz zu
   dunkel, gemessen an 3:1. Statt die Farben zu verfaelschen tragen
   Balken und Feld eine neutrale Haarlinie, die in beiden Modi ueber
   3:1 liegt. Die Ausdehnung ist damit immer erkennbar, die Farbe bleibt
   echt, und die Sprache steht ohnehin als Text daneben. */

.barcell { width: 40%; }

.bar {
  display: block;
  width: var(--w);
  min-width: 3px;
  height: 0.6rem;
  background: var(--c);
  border: 1px solid color-mix(in oklab, var(--ink) 40%, transparent);
}

.swatch {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.55em;
  background: var(--c);
  border: 1px solid color-mix(in oklab, var(--ink) 40%, transparent);
}

.note {
  margin: 1.1rem 0 0;
  max-width: 58ch;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* ---------- Projektseite: Prosa ---------- */

.essay { max-width: 62ch; }
.essay p { margin: 0 0 1.1rem; }
.essay p:last-child { margin-bottom: 0; }
.essay strong { font-weight: 700; }

.repo { margin: 1.75rem 0 0; font-size: 0.9375rem; }

/* ---------- Projektkopf ---------- */

.page-head { padding-block: clamp(2.5rem, 6vh, 4rem) 0; }

.page-head h1 {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  line-height: 1;
}

/* ---------- Fuss ---------- */

footer {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2rem, 5vh, 3rem);
  font-size: 0.875rem;
  color: var(--muted);
}

.footrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

/* ---------- Schmale Viewports ---------- */

@media (max-width: 860px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(2.5rem, 8vh, 3.5rem) clamp(2.5rem, 7vh, 3.5rem);
  }
  /* Auf schmalen Schirmen steht das Monogramm oben, sonst haengt es
     unter dem Text und wirkt nachtraeglich angeklebt. */
  .logo { order: -1; justify-self: start; margin-bottom: 0.5rem; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .row   { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .trio  { grid-template-columns: minmax(0, 1fr); }
  .trio > :first-child { grid-column: auto; }
}

/* ---------- Hoehenlinienfeld als Wasserzeichen ----------
   Echte Niveaulinien einer Hoehenfunktion, per Marching Squares gewonnen,
   deshalb kreuzungsfrei wie auf einer topografischen Karte. Erzeugt von
   make_deco.py, nicht von Hand: 24 Linien, 2682 Punkte.

   Eine Ebene ueber den ganzen Schirm, fixiert und ohne Zeigerereignisse.
   Die Mitte bleibt frei, damit nie eine Linie hinter dem Text liegt. Die
   Aussparung steckt im SVG als eigene Maske, deshalb braucht es hier nur
   eine Maskenebene und kein mask-composite.

   Groesse 100% statt cover: dadurch trifft die Aussparung auf jeder
   Bildschirmbreite dieselbe Stelle. Die leichte Verzerrung der Linien
   faellt bei organischen Kurven nicht auf. */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--moss);
  opacity: var(--deco-opacity);
  pointer-events: none;
  /* Ohne -webkit-Praefix. Unpraefigiertes mask-image gibt es seit
     Safari 15.4 von 2022; das Praefix wuerde die Bilddaten nur ein
     zweites Mal in die Datei schreiben und sie fast verdoppeln. */
  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 240'><defs><linearGradient id='gh' x1='0' y1='0' x2='1' y2='0'><stop offset='0.0' stop-color='%23000' stop-opacity='1'/><stop offset='0.16' stop-color='%23fff' stop-opacity='1'/><stop offset='0.3' stop-color='%23000' stop-opacity='1'/><stop offset='0.7' stop-color='%23000' stop-opacity='1'/><stop offset='0.84' stop-color='%23fff' stop-opacity='1'/><stop offset='1.0' stop-color='%23000' stop-opacity='1'/></linearGradient><linearGradient id='gv' x1='0' y1='0' x2='0' y2='1'><stop offset='0.0' stop-color='%23000' stop-opacity='1'/><stop offset='0.14' stop-color='%23000' stop-opacity='0'/><stop offset='0.86' stop-color='%23000' stop-opacity='0'/><stop offset='1.0' stop-color='%23000' stop-opacity='1'/></linearGradient><mask id='m'><rect width='360' height='240' fill='url%28%23gh%29'/><rect width='360' height='240' fill='url%28%23gv%29'/></mask></defs><g mask='url%28%23m%29' fill='none' stroke='black' stroke-linejoin='round' stroke-linecap='round'><path d='M11 0 5 3 0 5' stroke-width='2.10'/><path d='M174 0 180 4 185 7 190 10 195 12 200 13 205 13 210 13 215 13 220 11 225 10 230 9 235 7 240 6 245 4 250 3 255 2 260 1 264 0' stroke-width='2.10'/><path d='M300 0 305 1 310 2 315 4 318 5 325 8 328 10 335 15 340 20 344 25 347 30 349 35 350 40 350 45 350 50 349 55 347 60 346 65 344 70 341 75 340 79 338 85 337 90 336 95 337 100 338 105 340 109 344 115 348 120 350 122 352 125 355 128 357 130 360 133' stroke-width='2.10'/><path d='M0 163 3 160 8 155 14 150 18 145 20 141 21 135 20 130 18 125 15 121 10 115 5 111 0 106' stroke-width='2.10'/><path d='M360 211 355 214 350 217 345 219 342 220 335 222 330 224 325 225 320 226 315 227 310 227 305 228 300 228 295 228 290 228 285 228 280 228 275 228 270 228 265 227 260 227 255 227 250 226 245 226 240 225 237 225 230 224 225 224 220 223 215 222 210 222 205 221 200 221 196 220 190 219 185 218 180 218 175 217 170 216 165 216 161 215 155 214 150 214 145 213 140 213 135 212 130 212 125 212 120 212 115 212 110 213 105 214 100 215 95 216 90 217 85 218 80 220 75 221 70 222 65 224 60 225 55 226 50 226 45 227 40 228 35 228 30 228 25 227 20 227 15 226 12 225 5 223 0 220' stroke-width='2.10'/><path d='M25 0 20 2 15 4 10 6 5 9 0 12' stroke-width='1.88'/><path d='M164 0 170 4 175 9 180 13 183 15 185 17 190 20 195 22 200 24 205 24 210 23 215 22 220 20 225 18 230 16 233 15 240 13 245 11 250 9 255 8 260 7 265 6 270 5 275 4 280 4 285 4 290 5 294 5 300 6 305 7 310 9 313 10 320 13 323 15 330 20 334 25 337 30 340 35 341 40 341 45 341 50 340 53 338 60 336 65 334 70 331 75 330 78 327 85 325 90 325 93 325 98 327 105 329 110 333 115 335 118 340 123 345 128 350 133 355 138 360 144' stroke-width='1.88'/><path d='M0 176 5 170 10 166 15 162 18 160 25 155 30 151 35 145 37 140 38 135 36 130 33 125 30 121 25 116 20 112 17 110 11 105 5 101 0 96' stroke-width='1.88'/><path d='M360 202 356 205 350 209 345 212 340 214 335 216 330 218 325 219 320 220 315 221 310 222 305 222 300 223 295 223 290 223 285 223 280 223 275 223 270 223 265 222 260 222 255 222 250 221 245 221 240 220 235 220 230 219 225 218 220 218 215 217 210 216 205 216 200 215 195 214 190 214 185 213 180 212 175 211 170 210 165 209 160 209 155 208 150 207 145 206 140 206 135 205 132 205 125 205 120 204 115 205 110 205 105 206 100 206 95 207 90 209 86 210 80 212 75 213 70 215 65 216 60 217 55 219 50 219 46 220 40 221 35 221 30 221 25 220 20 219 15 218 10 216 7 215 0 210' stroke-width='1.88'/><path d='M39 0 35 2 30 3 26 5 20 8 15 10 10 13 7 15 0 20' stroke-width='1.66'/><path d='M155 0 160 4 165 8 170 14 175 20 178 25 180 28 185 34 190 38 195 40 200 39 205 38 210 36 215 33 220 30 225 28 230 25 235 22 240 20 245 18 250 16 253 15 260 13 265 12 270 11 275 11 280 10 285 10 290 11 295 11 300 12 305 14 308 15 315 19 320 22 323 25 327 30 330 35 331 40 332 45 332 50 330 55 329 60 326 65 324 70 321 75 318 80 315 85 314 90 313 95 313 100 314 105 317 110 320 114 325 120 330 124 335 129 340 134 345 138 350 143 355 149 359 155 360 157' stroke-width='1.66'/><path d='M360 190 357 195 351 200 345 205 340 207 335 210 330 211 325 213 320 214 317 215 310 216 305 217 300 217 295 218 290 218 285 218 280 218 275 218 270 217 265 217 260 217 255 216 250 216 245 215 240 215 235 214 230 214 225 213 220 212 215 212 210 211 205 210 200 209 195 209 190 208 185 207 180 206 175 205 170 204 165 203 160 202 155 201 150 200 145 199 140 199 135 198 130 197 125 196 120 196 115 196 110 196 105 196 100 197 95 198 90 199 86 200 80 202 75 204 72 205 65 207 60 209 56 210 50 211 45 212 40 213 35 213 30 212 25 212 20 210 15 208 10 205 6 200 5 197 5 190 7 185 10 180 15 175 20 171 25 168 30 165 35 162 39 160 45 157 50 153 53 150 55 147 58 140 57 135 55 130 51 125 46 120 40 116 35 112 31 110 25 106 20 103 16 100 10 96 5 92 0 87' stroke-width='1.66'/><path d='M53 0 50 1 45 3 40 5 35 7 30 9 25 11 20 14 15 17 10 20 5 24 0 29' stroke-width='1.44'/><path d='M146 0 150 3 153 5 158 10 162 15 165 20 167 25 168 30 169 35 170 40 170 45 170 50 170 54 172 60 175 64 180 67 185 68 190 68 195 67 200 66 205 62 208 60 213 55 215 52 217 50 220 47 225 41 230 37 235 33 239 30 245 26 250 24 255 22 260 20 265 19 270 18 275 17 280 17 285 17 290 17 295 18 300 20 305 22 310 25 315 29 320 35 321 40 322 45 322 50 320 55 318 60 316 65 312 70 310 73 305 80 302 85 300 89 299 95 299 100 300 103 304 110 308 115 313 120 319 125 325 130 330 134 335 139 340 143 345 149 350 155 353 160 355 165 356 170 356 175 355 180 353 185 350 190 346 195 340 200 335 202 330 205 325 207 320 208 315 210 310 211 305 211 300 212 295 212 290 213 285 213 280 213 275 213 270 212 265 212 260 212 255 211 250 211 245 210 240 210 235 209 230 208 225 208 220 207 215 206 210 206 207 205 200 204 195 203 190 202 185 201 180 200 175 199 170 198 165 197 160 196 155 194 150 193 145 192 140 191 137 190 130 188 125 187 120 186 115 185 110 184 105 184 100 183 95 183 90 183 85 184 80 186 75 188 72 190 65 193 62 195 55 198 50 199 45 201 40 201 35 201 31 200 25 196 23 190 25 187 30 182 35 178 40 176 45 174 50 173 55 171 58 170 65 168 70 165 75 161 78 155 80 150 81 145 80 140 79 135 76 130 72 125 66 120 60 117 55 114 50 111 45 108 40 106 35 103 30 100 25 97 21 95 15 91 10 87 5 82 2 80 0 77' stroke-width='1.44'/><path d='M68 0 60 3 55 4 50 6 45 8 41 10 35 13 30 15 25 18 21 20 15 24 10 29 5 34 1 40 0 43' stroke-width='1.22'/><path d='M136 0 140 2 145 5 150 10 154 15 156 20 158 25 158 30 158 35 158 40 156 45 155 49 153 55 152 60 152 65 152 70 154 75 158 80 165 84 168 85 175 86 180 87 185 87 190 87 195 86 200 86 203 85 210 83 215 81 220 78 224 75 227 70 230 65 231 60 233 55 235 51 239 45 243 40 249 35 255 31 260 29 265 27 270 26 274 25 280 25 285 25 290 26 295 27 300 29 305 33 309 40 311 45 310 50 309 55 306 60 302 65 300 68 295 73 290 78 285 84 281 90 280 95 281 100 284 105 288 110 293 115 299 120 305 125 310 128 315 132 319 135 325 140 330 144 335 149 340 155 343 160 345 164 347 170 347 175 346 180 344 185 340 190 335 194 330 197 325 200 320 202 315 203 310 205 305 206 300 206 295 207 290 207 285 207 280 207 275 207 270 207 265 207 260 206 255 206 250 206 245 205 240 204 235 204 230 203 225 202 220 202 215 201 211 200 205 199 200 198 195 197 190 196 185 195 180 194 175 192 170 191 166 190 160 188 155 187 150 185 145 183 140 182 136 180 130 177 125 175 120 172 116 170 111 165 107 160 105 155 104 150 103 145 102 140 100 135 98 130 95 125 90 120 85 116 80 114 75 111 72 110 65 107 60 105 55 103 50 101 47 100 40 97 36 95 30 92 27 90 20 86 15 82 10 77 8 75 5 71 1 65 0 62' stroke-width='1.22'/><path d='M84 0 80 1 75 2 70 4 67 5 60 8 55 10 50 12 45 14 40 16 35 19 30 22 25 25 20 29 15 34 11 40 8 45 7 50 7 55 8 60 10 64 14 70 18 75 25 80 30 84 35 86 40 89 43 90 50 93 55 94 60 96 65 97 70 99 75 100 80 101 85 102 90 102 95 103 100 104 104 105 110 107 115 110 119 115 120 120 120 125 121 130 121 135 122 140 123 145 124 150 126 155 130 160 134 165 140 170 145 173 149 175 155 178 160 180 165 182 170 184 174 185 180 187 185 188 190 189 195 191 200 192 205 193 210 194 215 195 220 196 225 196 230 197 235 198 240 199 245 199 250 200 255 200 260 201 265 201 270 201 275 202 280 202 285 201 290 201 295 201 300 200 305 199 310 198 315 196 318 195 325 191 330 187 332 185 335 180 337 175 337 170 336 165 333 160 330 155 325 150 320 145 315 142 310 138 306 135 300 131 295 128 290 125 285 122 282 120 275 115 270 112 266 110 260 106 255 103 250 101 246 100 240 99 235 98 230 98 225 98 220 98 215 99 210 99 205 99 200 100 195 100 190 100 185 100 180 101 175 101 170 101 165 101 160 101 155 100 150 100 145 99 140 98 135 95 132 90 132 85 132 80 133 75 134 70 136 65 138 60 140 56 143 50 145 46 147 40 149 35 149 30 149 25 148 20 146 15 141 10 135 5 130 2 125 1 123 0' stroke-width='1.00'/><path d='M265 40 260 44 256 50 255 53 255 58 259 65 265 68 270 68 275 67 279 65 285 62 290 57 294 50 294 45 291 40 285 37 280 36 275 37 270 38Z' stroke-width='1.00'/><path d='M85 5 80 6 75 8 70 9 65 11 60 13 56 15 50 18 46 20 40 24 35 27 30 30 25 35 21 40 19 45 17 50 17 55 19 60 21 65 25 69 30 74 35 77 40 80 45 82 50 84 55 86 60 87 65 88 70 89 75 89 80 89 85 89 90 88 95 87 100 86 105 83 109 80 114 75 118 70 120 67 125 60 128 55 132 50 135 45 137 40 139 35 141 30 141 25 140 22 137 15 132 10 125 6 120 4 115 3 110 2 105 2 100 2 95 3 90 4Z' stroke-width='0.78'/><path d='M170 115 165 116 160 118 155 120 150 123 145 129 142 135 142 140 142 145 143 150 145 154 149 160 154 165 160 169 165 172 170 175 175 177 180 179 183 180 190 182 195 183 200 185 205 186 210 187 215 188 220 189 224 190 230 191 235 192 240 192 245 193 250 194 255 194 260 195 264 195 270 195 275 195 280 195 285 195 290 195 295 194 300 193 305 192 309 190 315 187 318 185 323 180 325 175 325 170 324 165 322 160 318 155 315 153 312 150 306 145 300 141 295 138 290 135 285 133 280 130 275 128 270 125 265 123 260 121 255 119 250 117 245 116 240 114 235 113 230 113 225 112 220 112 215 111 210 111 205 111 200 112 195 112 190 112 185 113 180 113 175 114Z' stroke-width='0.78'/><path d='M90 9 85 10 80 12 75 13 71 15 65 18 60 20 55 23 51 25 45 29 40 33 38 35 35 38 30 45 29 50 29 55 31 60 35 65 40 69 45 72 50 74 55 76 60 77 65 78 70 78 75 78 80 78 85 77 90 75 95 72 99 70 105 65 110 60 115 55 120 50 123 45 127 40 130 35 131 30 131 25 130 20 126 15 120 11 115 9 110 8 105 8 100 8 95 8Z' stroke-width='0.56'/><path d='M190 125 185 126 180 127 175 129 170 132 167 135 165 138 162 145 163 150 165 155 169 160 175 165 180 168 184 170 190 173 195 175 200 176 205 178 210 179 215 181 220 182 225 183 230 184 235 184 238 185 245 186 250 187 255 187 260 187 265 188 270 188 275 188 280 188 285 187 290 186 295 185 300 183 305 180 310 175 311 170 310 165 307 160 305 158 303 155 300 153 296 150 290 146 285 143 280 141 275 138 270 136 267 135 260 132 255 131 250 129 245 128 240 126 235 125 230 125 225 124 220 123 215 123 210 123 205 123 200 124 195 124Z' stroke-width='0.56'/><path d='M95 15 90 16 85 17 80 19 75 21 70 24 65 27 60 30 55 34 50 38 45 45 44 50 45 53 50 60 55 63 60 65 65 66 70 66 75 66 80 64 85 63 90 60 95 57 98 55 104 50 110 45 114 40 117 35 119 30 120 25 117 20 110 16 106 15 100 15Z' stroke-width='0.34'/><path d='M200 139 195 142 191 145 189 150 190 153 195 160 200 163 203 165 210 168 215 170 220 171 225 172 230 174 235 175 240 176 245 176 250 177 255 177 260 178 265 178 270 177 275 177 280 176 285 174 289 170 289 165 286 160 281 155 275 152 272 150 265 147 260 145 255 143 250 142 245 140 240 139 235 138 230 138 225 137 220 137 215 137 210 137 205 138Z' stroke-width='0.34'/></g></svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Auf schmalen Schirmen nimmt der Text die ganze Breite ein. Die Linien
   bleiben, treten aber deutlich zurueck. */
@media (max-width: 860px) {
  body::before { opacity: calc(var(--deco-opacity) * 0.55); }
}

/* ---------- Kontakt ----------
   Die Adresse ist das eine Element, das gefunden werden muss, also
   traegt sie hier die Groesse und nicht die Ueberschrift. */

.contact-mail {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  font-size: clamp(1.375rem, 1rem + 2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.contact-mail a { text-decoration-thickness: 2px; }
.contact-mail a:hover { text-decoration-thickness: 3px; }

/* ---------- Intro ----------
   Gesteuert von intro.js. Das Inline-Skript im <head> setzt
   data-intro="play", solange das Intro in dieser Sitzung noch nicht lief.
   Dann deckt html::after die Seite ab, bis intro.js seine eigene Ebene
   eingehaengt hat; die Seite darunter wird trotzdem vollstaendig
   aufgebaut. Laeuft das Skript nie, gibt die Abdeckung nach 4 s von
   selbst frei. */

html[data-intro="play"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--ground);
  animation: ak-failsafe 0.3s ease-out 4s forwards;
}

@keyframes ak-failsafe { to { opacity: 0; visibility: hidden; } }

/* Die Marke in der Navigation wartet, bis die fliegende Marke landet. */
html[data-intro="play"] [data-ak-target],
html[data-intro="run"]  [data-ak-target] { opacity: 0; }

/* Weniger Bewegung: kein Intro, nur ein ruhiges Einblenden der Marke. */
html[data-intro="calm"] [data-ak-target] { animation: ak-calm 0.5s ease-out both; }
@keyframes ak-calm { from { opacity: 0; } }

.ak-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

/* Grund: Schwarz, in der Mitte ein Hauch Moos, darueber sehr feines
   Rauschen. Beides steht still, nur die Deckkraft der Ebene aendert sich. */
.ak-intro-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60rem 42rem at 50% 50%,
      color-mix(in oklab, var(--moss) var(--intro-glow), transparent), transparent 70%),
    var(--ground);
}

.ak-intro-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.ak-intro-lockup {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

.ak-intro-mark {
  display: block;
  width: clamp(5.5rem, 9vw, 8.5rem);
  height: auto;
  overflow: visible;
  transform-origin: 0 0;
}

.ak-intro-mark path {
  fill: none;
  stroke-width: 6;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: 101 101;
  stroke-dashoffset: 101;
}

.ak-trace path { stroke: var(--accent); }
.ak-glow path  { stroke: var(--accent-strong); stroke-width: 7; }
.ak-glow       { opacity: 0; }

.ak-intro-mark .ak-head path {
  stroke: var(--accent-strong);
  stroke-dasharray: 10 400;
  stroke-dashoffset: 10;
  opacity: 0;
}

.ak-spark {
  fill: var(--accent-strong);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.ak-intro-word {
  position: relative;
  color: var(--ink);
  font-size: clamp(1.625rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.ak-ch     { opacity: 0; }
.ak-tld    { color: var(--accent-strong); }

.ak-intro-caret {
  position: absolute;
  left: 0.08em;
  top: -0.06em;
  width: 0.09em;
  height: 1.12em;
  background: var(--accent-strong);
  opacity: 0;
}

/* Hochkant: Marke ueber dem Wort, beides mittig. */
@media (max-aspect-ratio: 4/5), (max-width: 560px) {
  .ak-intro-lockup { flex-direction: column; gap: 1.5rem; }
  .ak-intro-mark   { width: clamp(5rem, 26vw, 8rem); }
  .ak-intro-word   { font-size: clamp(1.5rem, 7vw, 2.25rem); }
}

/* ---------- Intro Ende ---------- */