/* onepage.css — danielgerl.de
 *
 * Zwei Spalten: links steht fest, was gleich bleibt (Name, Schwerpunkt,
 * Navigation, Kontakt), rechts läuft der Inhalt vorbei. Die Anzeige des
 * aktiven Blocks sitzt in der linken Spalte, nicht als schwebende Leiste
 * daneben.
 *
 * Was hier bewusst NICHT vorkommt und am 10.8.2026 herausgenommen wurde:
 * Glaskarten mit Weichzeichner, weiche Schlagschatten, runde Kästen,
 * Farbverläufe, wandernde Hintergründe, Dunkelmodus, farbige Akzente. Das
 * sind die Merkmale der Baukastenseite. Struktur entsteht hier durch
 * Typografie, Haarlinien und Weißraum — Ecken sind scharf, Linien sind ein
 * Pixel breit, und Farbe gibt es keine: Tinte auf Papier.
 *
 * Links sind deshalb NICHT eingefärbt, sondern unterstrichen. Das ist die
 * ältere und ruhigere Lösung; Blau war nie eine gestalterische Entscheidung,
 * sondern die Voreinstellung des Browsers.
 *
 * KEINE Ressourcen von Dritten. IBM Plex Serif (Überschriften) und IBM Plex
 * Sans (alles Übrige) liegen unter assets/fonts/ und werden von dieser Domain
 * ausgeliefert — die Datenschutzerklärung schließt nur „Web-Fonts von
 * Drittanbietern" aus.
 */

/* IBM Plex, SIL Open Font License 1.1 — der Lizenztext liegt daneben in
   fonts/OFL.txt und gehört dorthin, solange die Schriften ausgeliefert
   werden. Sans ist variabel (100–700), Serif gibt es bei der Quelle nur in
   festen Schnitten; für Überschriften genügt der normale. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans.woff2") format("woff2-variations"),
       url("fonts/IBMPlexSans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================== Farben und Maße == */

:root {
  color-scheme: light;

  --papier:  #faf9f6;   /* Elfenbein, nicht Weiß — Bildschirmweiß ist kalt */
  --ink:     #14151a;   /* 16,0:1 */
  --ink-2:   #4c4f56;   /*  7,7:1 */
  --ink-3:   #6e727a;   /*  4,7:1 — nur Beiwerk, nie Fließtext */

  --linie:   #e2e0d9;   /* die Haarlinie, aus der die Struktur besteht */
  --linie-2: #c9c6bd;   /* für Trennungen, die zählen */

  --spur: cubic-bezier(0.22, 1, 0.36, 1);

  --spalte: 340px;
  --rand:   clamp(24px, 4vw, 64px);

  --sans: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", Roboto, Arial, sans-serif;
  --serif: "IBM Plex Serif", "Iowan Old Style", Georgia, "Times New Roman",
           serif;
}

/* ============================================================= Grundlage == */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--papier);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.004em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Unterstrichen statt eingefärbt. Der Abstand hält den Strich unter den
   Unterlängen, sonst durchschneidet er das g. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linie-2);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
a:hover { text-decoration-color: var(--ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--papier);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-140%);
  transition: transform 0.2s var(--spur);
}
.skip-link:focus { transform: translateY(0); color: var(--papier); }

/* Die kleine Auszeichnungsschrift über Abschnitten und Gruppen: gesperrt und
   in Versalien. Sie trägt die Gliederung, ohne laut zu sein. */
.marke-klein {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================== Rahmen == */

.rahmen {
  display: grid;
  grid-template-columns: var(--spalte) minmax(0, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  min-height: 100svh;
}

/* ------------------------------------------------------- linke Spalte -- */

.spalte {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(40px, 7vh, 76px) var(--rand) 40px;
  border-right: 1px solid var(--linie);
  /* Seit der Vorspann unter dem Namen steht, kann die Spalte auf niedrigen
     Fenstern länger werden als der Bildschirm. Ohne das hier ragte die
     Kontaktzeile unten heraus und wäre nicht mehr erreichbar. */
  overflow-y: auto;
}

/* Quadratisch, weil die Vorlage quadratisch ist (320×320) und schon eng
   geschnitten: in einem 4:5-Rahmen schneidet `cover` links und rechts je
   12,5 % weg, und das trifft genau die Schultern. */
.portrait {
  width: 92px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  margin-bottom: 28px;
  filter: grayscale(100%) contrast(1.03);
  transition: filter 0.6s ease;
}
.portrait:hover { filter: grayscale(0%) contrast(1); }

.name {
  font-size: clamp(1.7rem, 2.2vw, 2.1rem);
  line-height: 1.12;
  margin-bottom: 16px;
}

/* Der Zweizeiler unter dem Namen: was er tut, bevor irgendwer scrollt. Er
   steht in der Grotesk und in --ink-2, damit er den Namen darüber nicht
   bedrängt — der Name bleibt das Lauteste in der Spalte. */
.vorspann {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: pretty;
}

/* Die Navigation ist zugleich die Ortsangabe: der Strich vor dem Wort wächst,
   wenn der zugehörige Block rechts im Bild steht. */
.rail {
  margin-top: auto;
  padding-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rail a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 0;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.25s ease;
}
.rail a::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--linie-2);
  transition: width 0.35s var(--spur), background 0.25s ease;
}
.rail a:hover { color: var(--ink-2); }
.rail a:hover::before { width: 32px; }
.rail a[aria-current="true"] { color: var(--ink); }
.rail a[aria-current="true"]::before { width: 46px; background: var(--ink); }

/* Der Sprachumschalter steht in der Navigationsleiste selbst, nicht mehr in
   einer eigenen Zeile darunter. Er ist aber kein Sprungziel: der wachsende
   Strich, der die Abschnitte trägt, gehört ihm nicht. */
.rail .sprache { margin-top: 20px; }
.rail .sprache a::before,
.rail .sprache a:hover::before { display: none; }

/* ------------------------------------------------------ rechte Spalte -- */

.strom { padding: 0 var(--rand); }

.block {
  padding: clamp(56px, 9vh, 96px) 0;
  border-bottom: 1px solid var(--linie-2);
  scroll-margin-top: 24px;
}
.block:last-of-type { border-bottom: none; }

/* Beim Klick auf die Leiste setzt app.js dem Zielblock tabindex="-1" und gibt
   ihm den Fokus — nur damit die Tabulatortaste danach dort weiterläuft und
   nicht wieder ganz oben anfängt. Die allgemeine Fokusregel zog daraufhin
   einen schwarzen Rahmen um den halben Bildschirm. Der Block ist aber kein
   Bedienelement: mit tabindex="-1" ist er per Tabulator gar nicht erreichbar,
   der Rahmen zeigt also nichts Bedienbares an. Er entfällt hier — und nur
   hier, überall sonst bleibt die Fokusanzeige unangetastet. */
.block:focus, .block:focus-visible { outline: none; }

/* 92px links sind die Marginalienspalte: dort stehen die Jahreszahlen, und
   die Überschrift beginnt an derselben Kante wie der Text daneben. */
.block-kopf {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  margin-bottom: 32px;
}
/* Die Überschrift beginnt an derselben Kante wie der Text darunter; die
   Marginalienspalte bleibt neben ihr leer. */
.block-kopf h2 { grid-column: 2; font-size: clamp(1.4rem, 2.1vw, 1.8rem); }

.satz { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 24px; }
.satz > * { grid-column: 2; }

.fliess {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 0.98rem;
}

/* ================================================================ Vita == */

.stationen { list-style: none; margin: 32px 0 0; padding: 0; grid-column: 1 / -1; }
/* Steht die Liste in einer Gruppe, trägt deren Auszeichnung den Abstand nach
   oben; der eigene käme hinzu und risse die Lücke doppelt so weit auf. */
.gruppe > .stationen { margin-top: 0; }
.stationen + .gruppe { margin-top: 42px; }

.stationen li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  padding: 0 0 20px;
}
.stationen li:last-child { padding-bottom: 0; }

.jahr {
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  padding-top: 3px;
  white-space: nowrap;
}
.stationen .was { display: block; font-weight: 500; }
.stationen .wo { display: block; color: var(--ink-3); font-size: 0.9rem; }

/* ======================================================= Publikationen == */

.gruppe { grid-column: 1 / -1; margin-bottom: 42px; }
.gruppe:last-child { margin-bottom: 0; }
.gruppe > .marke-klein { display: block; margin-bottom: 8px; }

.pub-liste { list-style: none; margin: 0; padding: 0; }
.pub-liste li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 24px;
  padding: 0 0 18px;
}
.pub-liste li:last-child { padding-bottom: 0; }

.pub-ref { color: var(--ink-2); font-size: 0.96rem; line-height: 1.55; max-width: 60ch; }
.pub-ref .titel { color: var(--ink); font-style: italic; }
.pub-ref .hinweis { color: var(--ink-3); }

/* Nur in der englischen Fassung: die hochgestellte Zahl verweist auf die Notiz
   unter der Liste und sagt, was an dem Eintrag Übersetzung ist.
   `line-height: 0` ist Pflicht, nicht Kosmetik: ein hochgestelltes Zeichen
   vergrößert sonst die Zeilenbox und reißt genau die eine Zeile der Liste
   weiter auf als ihre Nachbarn.
   Das „Note" davor steht in .sr-only und ist nur für den Screenreader da:
   vorgelesen stünde sonst eine nackte Ziffer zwischen den Jahreszahlen des
   Nachweises („… Foreign Investment zwei ZASA 2026, 263") und klänge wie ein
   Teil der Fundstelle. */
.pub-hochzahl {
  font-size: 0.7em;
  line-height: 0;
  color: var(--ink-3);
  margin-left: 1px;
}

/* Die Fußnote steht als eigenes Kind von .satz und erbt damit `grid-column: 2`
   aus der Grundregel — dadurch beginnt sie genau unter dem Nachweis, nicht
   unter der Jahreszahl, und die Schmalfassung fängt sie über `.satz > *` von
   selbst ab. Kein eigener Abstand nach oben: sobald die Fußnote da ist, ist
   die letzte .gruppe nicht mehr :last-child und trägt ihre 42px wieder.
   Kleiner als die Jahreszahl, damit die Notiz unter allem steht, was sie
   erklärt. Die Farbe bleibt --ink-3: das ist mit 4,7:1 die untere Grenze für
   Text dieser Größe, heller wäre dezenter, aber nicht mehr lesbar. */
.pub-fuss {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.8rem;
  line-height: 1.6;
  max-width: 60ch;
}

/* ============================================================= Kontakt == */

.kontaktliste { list-style: none; margin: 0; padding: 0; grid-column: 1 / -1; }

.kontaktliste a {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 0 0 16px;
  text-decoration: none;
}
.kontaktliste .art {
  font-size: 0.83rem;
  color: var(--ink-3);
}
/* Der Strich steht fest, nicht erst beim Überfahren — die Regel des ganzen
   Blattes: Verweise werden unterstrichen, nicht eingefärbt. Der Pfeil allein
   trug das nicht mehr, seit unter LinkedIn ein Name statt einer Kennung
   steht: »Daniel H. Gerl« sieht ohne Strich nach Text aus, nicht nach Ziel. */
.kontaktliste .wert {
  font-family: var(--serif);
  font-size: 1.1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linie-2);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}
.kontaktliste .pfeil {
  font-size: 0.9rem;
  color: var(--ink-3);
  transition: transform 0.3s var(--spur);
}
.kontaktliste a:hover .wert { text-decoration-color: var(--ink); }
.kontaktliste a:hover .pfeil { transform: translateX(5px); color: var(--ink); }

/* ============================================== Fuß der rechten Spalte == */

.strom-fuss {
  padding: 26px 0 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  font-size: 0.81rem;
  color: var(--ink-3);
}
.strom-fuss .jahr { margin-left: auto; padding-top: 0; }

/* ====================================================== Rechtsseiten == */

.kopf { border-bottom: 1px solid var(--linie); margin-bottom: 40px; }
.kopf-innen {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px var(--rand);
  display: flex;
  align-items: center;
  gap: 22px;
}
.kopf-nav { display: flex; gap: 20px; }
.kopf-nav a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
}
.kopf-nav a:hover { color: var(--ink); }
.kopf-werkzeuge { margin-left: auto; }
.sprache { display: flex; align-items: center; gap: 4px; font-size: 0.83rem; color: var(--ink-3); }
.sprache a { text-decoration: none; padding: 4px 2px; }
.sprache a:hover { text-decoration: underline; }
.sprache a[aria-current="page"] { color: var(--ink); font-weight: 500; }

.doc { max-width: 900px; margin: 0 auto; padding: 0 var(--rand) 20px; }
.doc h1 { font-size: clamp(1.6rem, 3vw, 2.05rem); margin-bottom: 6px; }
.doc .unterzeile { color: var(--ink-3); margin-bottom: 32px; font-size: 0.92rem; }
.doc h2 {
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  margin: 32px 0 8px;
}
.doc p, .doc li { color: var(--ink-2); font-size: 0.95rem; }
.doc address { font-style: normal; line-height: 1.75; color: var(--ink); }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc .stand { margin-top: 30px; font-size: 0.82rem; color: var(--ink-3); }
.doc .zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px; font-size: 0.85rem; text-decoration: none;
  color: var(--ink-3);
}
.doc .zurueck:hover { color: var(--ink); }
.doc .zurueck svg { width: 14px; height: 14px; }

.fuss {
  max-width: 900px;
  margin: 44px auto 0;
  padding: 22px var(--rand) 44px;
  border-top: 1px solid var(--linie);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: baseline;
  font-size: 0.81rem;
  color: var(--ink-3);
}
.fuss .jahr { margin-left: auto; padding-top: 0; }

/* ========================================================== Bewegung == */

/* Das Einzige, was sich von selbst bewegt: Zeilen setzen sich beim
   Hereinscrollen. Ohne JavaScript bleibt alles sichtbar — deshalb hängt der
   Ausgangszustand an .js-an. */
.js-an .auf {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s var(--spur), transform 0.55s var(--spur);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.js-an .auf.drin { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.08s !important;
  }
  .js-an .auf { opacity: 1; transform: none; }
}

/* ============================================================= Schmal == */

/* Unter 1000px trägt die feste Spalte nicht mehr. Sie wird NICHT einfach zu
   einem Kopf, der wegscrollt — dann hätte man unterwegs weder Sprungziel noch
   Ortsangabe. Stattdessen wird die Spalte aufgelöst (display: contents), ihre
   Kinder werden zu Geschwistern des Inhalts, und die Navigation kann als
   schmale Leiste über die ganze Seite kleben statt nur innerhalb ihres
   Kastens. Die Reihenfolge stellt `order` her: Bild, Name, Kontaktzeile,
   Leiste, Inhalt. */
@media (max-width: 1000px) {
  html { scroll-padding-top: 58px; }

  .rahmen {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .spalte { display: contents; }

  .portrait {
    order: 1;
    width: 64px;
    margin: 0 var(--rand) 16px;
  }
  .name {
    order: 2;
    padding: 0 var(--rand);
    font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    margin-bottom: 0;
  }
  .vorspann {
    order: 3;
    padding: 0 var(--rand);
    margin-top: 12px;
    /* Den Abstand zur klebenden Leiste trug bis zum 11.8. die Kontaktzeile
       darunter. Seit die fort ist, muss er hier stehen — sonst beginnt die
       Leiste unmittelbar unter dem letzten Wort. */
    margin-bottom: 26px;
  }
  /* In der waagerechten Leiste rückt der Umschalter an das rechte Ende. */
  .rail .sprache { margin-top: 0; margin-left: auto; }

  .rail {
    order: 4;
    position: sticky;
    top: 0;
    z-index: 60;
    margin: 0;
    padding: 0 var(--rand);
    flex-direction: row;
    gap: 24px;
    background: color-mix(in srgb, var(--papier) 86%, transparent);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border-top: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    /* Passen die drei Wörter nicht nebeneinander, wird geschoben statt
       umgebrochen — eine zweizeilige Leiste frisst zu viel Bild. */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }

  .rail a {
    padding: 13px 0;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  /* Der Strich vor dem Wort gehört zur senkrechten Leiste; hier trägt die
     Unterstreichung die Anzeige. */
  .rail a::before,
  .rail a:hover::before { display: none; }
  .rail a[aria-current="true"] { border-bottom-color: var(--ink); }

  .strom { order: 5; }

  .block {
    padding: 40px 0;
    scroll-margin-top: 58px;
  }

  /* Die Marginalienspalte wird zur Zeile darüber. */
  .block-kopf, .satz, .stationen li, .pub-liste li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .satz > * { grid-column: 1; }
  /* Ohne diese Zeile bleibt die Überschrift auf `grid-column: 2` stehen,
     obwohl das Raster hier nur noch eine Spalte hat. Das Raster legt dann
     eine zweite Spalte implizit an — und die Überschrift steht rechtsbündig
     am Rand statt links über dem Text. */
  .block-kopf h2 { grid-column: 1; }
  .kontaktliste a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; }
  .kontaktliste .art { grid-column: 1 / -1; }
  .block-kopf { margin-bottom: 22px; }
  .jahr { padding-top: 0; }

  /* Lange deutsche Komposita brauchen auf schmalem Schirm die Trennung,
     sonst reißt „Friedrich-Wilhelms-Universität" die Zeile auf. */
  .fliess, .pub-ref, .doc p, .doc li {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 7 4 3;
    text-wrap: pretty;
  }

  /* Die Zeile mit dem Copyright bekommt eine eigene Reihe und steht links,
     bündig unter den Verweisen darüber. Das `margin-left: auto` der
     Grundregel muss dafür ins Leere laufen: es verteilt den Freiraum
     derjenigen Zeile, in die der Umbruch das Element gerade gesetzt hat, und
     wie die drei Verweise davor brechen, hängt an der Schirmbreite und an
     der Sprache (»Barrierefreiheit« ist länger als »Accessibility«).
     `flex-basis: 100%` erzwingt die eigene Reihe und lässt keinen Freiraum
     übrig, den der auto-Rand noch verschieben könnte. */
  .strom-fuss .jahr,
  .fuss .jahr {
    flex-basis: 100%;
    text-align: left;
  }

  /* Unter dem letzten Element noch Platz für die Gestenleiste des Telefons. */
  .strom-fuss { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .fuss { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  /* Der Seitenrand berücksichtigt die abgerundeten Ecken und die Kamera-Insel
     im Querformat; ohne env() klebt der Text dort an der Kante. */
  :root {
    --rand: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  }
  body { font-size: 16px; }
  .rail { gap: 20px; }
  .rail a { font-size: 0.8rem; letter-spacing: 0.03em; }
  .kontaktliste .wert { font-size: 1.02rem; }
}

@media (hover: none) {
  .portrait:hover { filter: grayscale(100%) contrast(1.03); }
  .kontaktliste a:hover .pfeil { transform: none; }
}

/* ============================================================== Druck == */

@media print {
  .rail, .skip-link, .kontaktliste .pfeil { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .rahmen { display: block; max-width: none; }
  .spalte {
    position: static; height: auto; border-right: none;
    border-bottom: 1px solid #000; padding: 0 0 12pt; margin-bottom: 16pt;
  }
  .portrait { filter: none; }
  .strom { padding: 0; }
  .block { padding: 12pt 0; page-break-inside: avoid; }
  a { text-decoration: none; }
  .fliess, .pub-ref, .doc p { color: #000; }
}