/* ==========================================================================
   EDITORIAL KINETIC MINIMALISM — Designsystem
   --------------------------------------------------------------------------
   Kontrast entsteht aus Schriftgewicht und Größe, nie aus Farbe oder Kästen.
   Keine Verläufe, keine Schlagschatten, keine Kartenrahmen. Haarlinien statt
   Umrandungen. Abschnitte wechseln zwischen fast-schwarz und gebrochenem
   Weiß — dieser Farbwechsel *ist* der Abschnittswechsel.

   Reihenfolge: Schrift · Farbe · Reset · Raster · Typografie · Motive ·
   Bewegung · Bausteine · Reaktionsfähigkeit · Barrierefreiheit
   ========================================================================== */

/* --- Schrift ------------------------------------------------------------
   Archivo als variable Schrift, lokal ausgeliefert. Kein CDN-Aufruf bei
   jedem Seitenaufruf, und die Seite bleibt ohne fremde Verbindung lesbar. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-normal.woff2') format('woff2');
  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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-italic.woff2') format('woff2');
  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: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/archivo-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* --- Farbe --------------------------------------------------------------
   Orange bedeckt nie mehr als etwa 1 % eines Bildschirms: Logo-Punkt,
   Fokusring, aktive Markierung. Der Lavendelkreis ist die einzige große
   getönte Fläche. */

:root {
  --ink: #1e1e1e;
  --ink-2: #1f1f1f;
  --ink-3: #141414;
  --paper: #fcfcfc;
  --paper-2: #fbfbfb;
  --gray-line: #e9e9e9;
  --gray-mute: #cacaca;

  /* Auf Papier: #4C4C4C ergibt 8,5:1 — sicher über 4,5:1. */
  --text-mute: #4c4c4c;
  /* Auf Tinte: 0.55 Deckkraft ergäbe nur 4,1:1. Auf 0.66 angehoben (5,6:1),
     weil Barrierefreiheit vor exakter Vorlagentreue geht. */
  --text-mute-d: rgba(252, 252, 252, 0.66);

  --accent: #f47419;
  --lilac: #bebdd2;
  --sky: #bbddff;
  --sage: #94ccaf;
  --peach: #f5d5bd;

  --line-d: rgba(255, 255, 255, 0.12);
  --line-l: rgba(0, 0, 0, 0.1);

  --rand: clamp(24px, 5vw, 80px);
  --takt: cubic-bezier(0.16, 1, 0.3, 1);
  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  color-scheme: light;
}

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  background: var(--paper);
  color: var(--ink);
  /* Deutsche Komposita ("Zwischenlandungsdauer") sprengen sonst das Layout
     bei 390 px. Diese zwei Zeilen sind der Grund, warum das nicht passiert. */
  hyphens: auto;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* --- Raster --------------------------------------------------------------
   Zwölf Spalten mit breiten Außenrändern. Die Asymmetrie ist Absicht:
   Überschrift hart links, Fließtext in die äußerste rechte Spalte
   geschoben, die Mitte bleibt leer. */

.band {
  padding: clamp(72px, 11vh, 160px) var(--rand);
  position: relative;
}
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink2 { background: var(--ink-2); color: var(--paper); }
.band--ink3 { background: var(--ink-3); color: var(--paper); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper2 { background: var(--paper-2); color: var(--ink); }

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
}

/* Benannt nach den belegten Spalten: .sp-4-6 heißt Spalte 4 bis 6.
   Vollständig aufgeführt statt generiert -- fehlt eine Klasse, wird das
   Element still einspaltig und das Feld schneidet seinen Inhalt ab. */
.sp-1-2 { grid-column: 1 / 3; }
.sp-1-3 { grid-column: 1 / 4; }
.sp-1-4 { grid-column: 1 / 5; }
.sp-1-5 { grid-column: 1 / 6; }
.sp-1-6 { grid-column: 1 / 7; }
.sp-1-7 { grid-column: 1 / 8; }
.sp-1-8 { grid-column: 1 / 9; }
.sp-1-12 { grid-column: 1 / -1; }
.sp-3-4 { grid-column: 3 / 5; }
.sp-4-6 { grid-column: 4 / 7; }
.sp-5-6 { grid-column: 5 / 7; }
.sp-5-8 { grid-column: 5 / 9; }
.sp-7-8 { grid-column: 7 / 9; }
.sp-7-9 { grid-column: 7 / 10; }
.sp-7-12 { grid-column: 7 / -1; }
.sp-9-10 { grid-column: 9 / 11; }
.sp-9-12 { grid-column: 9 / -1; }
.sp-10-12 { grid-column: 10 / -1; }
.sp-11-12 { grid-column: 11 / -1; }

/* Haarlinien trennen Bänder und Zeilen. Keine Kartenrahmen. */
.linie { border: 0; border-top: 1px solid var(--line-l); margin: 0; }
.band--ink .linie,
.band--ink2 .linie,
.band--ink3 .linie { border-top-color: var(--line-d); }

/* --- Typografie ---------------------------------------------------------- */

.display {
  font-size: clamp(48px, 7.2vw, 104px);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
}
/* Zwei bis drei bedeutungstragende Wörter je Überschrift — nicht mehr,
   sonst verliert die Betonung ihre Wirkung. */
.display em,
.betont {
  font-weight: 100;
  font-style: italic;
}

.display--abschnitt {
  font-size: clamp(40px, 6vw, 90px);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

/* Die Thin-148px-Behandlung gehört auf kurze, eigenständige Zeilen:
   Reiseliste und Zielstadt im Treffer. Niemals in eine dichte Trefferliste
   mit 30 Zeilen — dort verschlingt eine Zeile den ganzen Bildschirm. */
.riese {
  font-size: clamp(56px, 11vw, 148px);
  font-weight: 100;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin: 0;
}

.unterzeile {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.fliess {
  font-size: 15px;
  line-height: 1.45;
  max-width: 34ch;
  margin: 0;
}
.band--ink .fliess,
.band--ink2 .fliess,
.band--ink3 .fliess { color: var(--text-mute-d); }
.band--paper .fliess,
.band--paper2 .fliess { color: var(--text-mute); }

.mikro {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.mikro--leise { color: var(--text-mute); }
.band--ink .mikro--leise,
.band--ink2 .mikro--leise,
.band--ink3 .mikro--leise { color: var(--text-mute-d); }

/* --- Motive --------------------------------------------------------------
   Diese fünf tragen die Identität. Sie sind nicht dekorativ, sie sind das
   Erkennungszeichen: Klammer, Schrägstrich-Zählung, Pfeil, ®, Laufschrift. */

/* Eine einzelne öffnende Klammer in eigener Rasterspalte, wie ein
   Zitatzeichen. Als ::before, damit sie nicht vorgelesen wird. */
.klammer {
  position: relative;
  padding-left: 28px;
}
.klammer::before {
  content: '[';
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 24px;
  font-weight: 200;
  line-height: 1;
  opacity: 0.5;
}

/* Vollständig geklammerte Aussage über vier gestapelte Zeilen. */
.manifest {
  font-size: clamp(40px, 6.6vw, 99px);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

.zahl {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
.band--ink .zahl,
.band--ink2 .zahl,
.band--ink3 .zahl { color: var(--text-mute-d); }

.marke { font-weight: 400; letter-spacing: -0.01em; }
.marke sup { font-size: 0.42em; vertical-align: super; margin-left: 0.15em; }

/* Pfeil-Link: die Unterstreichung wächst von links. */
.pfeil {
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.pfeil::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--takt);
}
.pfeil:hover::after,
.pfeil:focus-visible::after { transform: scaleX(1); }

/* --- Laufschrift ---------------------------------------------------------
   Der Inhalt wird im Markup verdoppelt; die zweite Hälfte ist aria-hidden,
   damit Screenreader den Text nicht zweimal vorlesen. */

.lauf {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}
.lauf__spur {
  display: inline-flex;
  gap: 0.6em;
  padding-right: 0.6em;
  animation: laufen 26s linear infinite;
  will-change: transform;
}
.lauf:hover .lauf__spur { animation-play-state: paused; }
@keyframes laufen {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.lauf--gross .lauf__spur {
  font-size: clamp(40px, 6vw, 90px);
  font-weight: 200;
  letter-spacing: -0.02em;
}

/* --- Pillen (Schlagwortwolke) -------------------------------------------
   Bewusst ungleichmäßig umbrechend, kein sauberes Raster. */

.wolke {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
}
.wolke > *:nth-child(3n) { margin-left: 22px; }
.wolke > *:nth-child(5n) { margin-left: 38px; }

.pille {
  font-size: 14px;
  line-height: 1;
  padding: 10px 18px;
  border: 1px solid var(--gray-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.35s var(--takt), color 0.35s var(--takt),
    border-color 0.35s var(--takt);
}
.pille:hover,
.pille[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.band--ink .pille { border-color: var(--line-d); }
.band--ink .pille:hover,
.band--ink .pille[aria-pressed='true'] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* --- Kreis-Schaltfläche --------------------------------------------------
   Die einzige große getönte Fläche über der Falz. Der gestrichelte Ring
   dreht sich langsam und dauerhaft. */

.kreis {
  --gr: clamp(128px, 15vw, 168px);
  width: var(--gr);
  height: var(--gr);
  border-radius: 50%;
  background: var(--lilac);
  color: var(--ink);
  display: inline-grid;
  place-items: center;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  border: 0;
  cursor: pointer;
  position: relative;
  transition: transform 0.6s var(--takt);
}
.kreis:hover { transform: scale(1.06); }
.kreis::before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px dashed currentColor;
  border-radius: 50%;
  opacity: 0.45;
  animation: drehen 22s linear infinite;
}
@keyframes drehen {
  to { transform: rotate(360deg); }
}

/* --- Zeilen mit Laufschrift beim Überfahren -----------------------------
   Für kurze Listen: Reisen, Fähigkeiten, Artikel. */

.zeile {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px var(--rand);
  margin: 0 calc(-1 * var(--rand));
  border-top: 1px solid var(--line-l);
  text-decoration: none;
  position: relative;
  transition: background 0.45s var(--takt), color 0.45s var(--takt);
}
.band--ink .zeile { border-top-color: var(--line-d); }
.zeile:hover { background: var(--ink); color: var(--paper); }
.band--ink .zeile:hover { background: var(--paper); color: var(--ink); }
.zeile:hover .zahl,
.zeile:hover .mikro--leise { color: inherit; opacity: 0.7; }
.zeile__titel { font-size: 20px; font-weight: 400; letter-spacing: -0.01em; }
.zeile__lauf { display: none; }
.zeile:hover .zeile__ruhe { display: none; }
.zeile:hover .zeile__lauf { display: flex; }

/* --- Bewegung -----------------------------------------------------------
   0,6–1,0 s, nichts federt zurück. */

/* Der versteckte Ausgangszustand gilt NUR, wenn JavaScript läuft (.js wird
   im <head> gesetzt). Sonst wäre die Seite ohne JS vollständig leer -- der
   Text ist zwar im HTML, aber unsichtbar. Eine Animation darf nie darüber
   entscheiden, ob Inhalt existiert. */
.js .auf {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--takt), transform 0.8s var(--takt);
}
.js .auf.sichtbar { opacity: 1; transform: none; }

/* Zeilenweise Enthüllung der Überschriften. Jede Zeile bekommt im Markup
   eine eigene .zeile-auf, gestaffelt über --verzug. */
.zeile-auf { display: block; }
.js .zeile-auf {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.9s var(--takt);
  transition-delay: var(--verzug, 0s);
}
.js .sichtbar > .zeile-auf,
.js .zeile-auf.sichtbar { clip-path: inset(0 0 0 0); }

/* --- Eigener Zeiger ------------------------------------------------------
   Nur auf Geräten mit echtem Zeiger; auf Touch wäre er sinnlos. */

.zeiger {
  position: fixed;
  top: 0;
  left: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--takt), height 0.3s var(--takt);
  will-change: transform;
}
.zeiger--gross { width: 46px; height: 46px; }
@media (hover: none), (pointer: coarse) {
  .zeiger { display: none; }
}

/* --- Vorlader -----------------------------------------------------------
   Punkte fahren gestaffelt in die Position der Wortmarke, kurze Haltezeit,
   dann wischt die Ebene nach oben weg. */

/* Ohne JavaScript würde der Vorlader die Seite dauerhaft verdecken --
   niemand entfernt ihn dann. Deshalb nur mit .js sichtbar. */
.vorlader { display: none; }
.js .vorlader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 10000;
  display: grid;
  place-items: center;
  transition: transform 0.8s var(--takt);
}
.vorlader--weg { transform: translateY(-100%); }
.vorlader__punkt {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.9s var(--takt), opacity 0.5s var(--takt);
}
.vorlader__wort {
  font-size: clamp(48px, 12vw, 160px);
  font-weight: 100;
  letter-spacing: -0.03em;
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.5s var(--takt);
}
.vorlader__wort.da { opacity: 1; }

/* --- Kinetische Wortmarke im Fuß ----------------------------------------
   Einzelne Buchstaben, überlappend, vom Rand beschnitten, mit Parallaxe.
   Rein dekorativ — im Markup aria-hidden. */

.wortmarke {
  position: relative;
  height: clamp(180px, 34vh, 420px);
  overflow: hidden;
  background: var(--ink-3);
  color: var(--paper);
}
.wortmarke__b {
  position: absolute;
  font-size: clamp(140px, 30vw, 400px);
  font-weight: 100;
  line-height: 0.8;
  letter-spacing: -0.04em;
  opacity: 0.9;
  will-change: transform;
}

/* --- Bausteine ----------------------------------------------------------- */

/* Innerhalb der Anwendung sitzt der Kopf dauerhaft oben und braucht einen
   eigenen dunklen Grund: er schwebt sonst über hellen Bändern und wäre
   weiß auf weiß. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 22px var(--rand);
  background: var(--ink);
  color: var(--paper);
}

/* Auf der Anmeldeseite liegt er dagegen transparent über dem dunklen
   Helden -- wie in der Vorlage -- und scrollt mit weg, statt später
   unsichtbar über hellem Grund zu kleben. */
.kopf--ueber {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}
.kopf__mitte { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.kopf a { text-decoration: none; font-size: 14px; }

.uhr { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.02em; }
.uhr__zone { color: var(--gray-mute); margin-left: 6px; }

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--takt), opacity 0.35s var(--takt);
}
.knopf:hover { transform: translateY(-1px); }
.knopf--ink { background: var(--ink); color: var(--paper); }

/* Ohne das `color: inherit` behielte der Umriss-Knopf die dunkle Schrift von
   `.knopf` -- auf einem dunklen Band wäre er dann unsichtbar (Rahmen und
   Text in Tinte auf Tinte). Genau das war beim Abmelden-Knopf im Kopf und
   beim Preisalarm der Fall. */
.knopf--rand {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

/* Punktraster-Menüsymbol im gefüllten Kreis */
.punkte {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper);
  display: inline-grid;
  grid-template-columns: repeat(3, 3px);
  grid-auto-rows: 3px;
  gap: 3px;
  place-content: center;
  border: 0;
  cursor: pointer;
}
.punkte i { background: var(--ink); border-radius: 50%; }

/* Fünf-Punkt-Logomarke, einer davon orange — der gesamte Orange-Anteil
   der Seite über der Falz. */
.logo { display: inline-flex; gap: 4px; align-items: center; }
.logo i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.logo i:nth-child(2) { background: var(--accent); }

/* Formularfelder: Haarlinie unten, sonst nichts. */
.feld { display: block; margin-bottom: 26px; }
.feld__wert {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-d);
  padding: 10px 0;
  font-size: 18px;
  font-weight: 200;
  letter-spacing: -0.01em;
  color: inherit;
  border-radius: 0;
  transition: border-color 0.35s var(--takt);
}
.band--paper .feld__wert { border-bottom-color: var(--line-l); }
.feld__wert:focus { outline: none; border-bottom-color: var(--accent); }
.feld__wert::placeholder { color: var(--gray-mute); }

.hinweis {
  font-size: 13px;
  padding: 12px 0;
  border-top: 1px solid var(--accent);
  color: var(--accent);
}

/* Farbkacheln der Arbeits-/Reiseliste */
.kachel { aspect-ratio: 4 / 3; border-radius: 2px; }
.kachel--sky { background: var(--sky); }
.kachel--sage { background: var(--sage); }
.kachel--lilac { background: var(--lilac); }
.kachel--peach { background: var(--peach); }

/* Breite Inhalte scrollen in ihrem eigenen Behälter; der Seitenkörper
   scrollt niemals waagerecht. */
.scrollbar { overflow-x: auto; }

/* --- Reaktionsfähigkeit -------------------------------------------------- */

@media (max-width: 900px) {
  .raster { gap: 16px; }
  /* Alle Spannen fallen auf volle Breite -- einzeln aufgezählt, damit eine
     neue Klasse nicht stillschweigend einspaltig bleibt. */
  .sp-1-2, .sp-1-3, .sp-1-4, .sp-1-5, .sp-1-6, .sp-1-7, .sp-1-8,
  .sp-3-4, .sp-4-6, .sp-5-6, .sp-5-8, .sp-7-8, .sp-7-9, .sp-7-12,
  .sp-9-10, .sp-9-12, .sp-10-12, .sp-11-12 {
    grid-column: 1 / -1 !important;
  }
  .zeile { grid-template-columns: 40px 1fr; }
  .zeile > :last-child { grid-column: 2; }
  .wolke > * { margin-left: 0 !important; }
  .wortmarke { height: clamp(140px, 24vh, 220px); }
  .wortmarke__b { font-size: clamp(90px, 34vw, 140px); }

  /* Der Kopf muss umbrechen dürfen, sonst schiebt er die Seite breiter als
     den Bildschirm. Die Uhr ist auf dem Telefon entbehrlich -- die steht
     ohnehin in der Statusleiste. */
  .kopf {
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 14px var(--rand);
  }
  .kopf__mitte { gap: 14px; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .kopf .uhr { display: none; }

  .band { padding: clamp(48px, 8vh, 80px) var(--rand); }
}

/* Bedienelemente und Beschriftungen dürfen nie getrennt werden: „Übersicht"
   als „Übe-rsic-ht" ist unlesbar. Silbentrennung gehört in den Fließtext,
   nicht in die Navigation. */
.kopf,
.kopf a,
.knopf,
.pille,
.mikro,
.zahl,
.reiter__knopf,
button {
  hyphens: manual;
  overflow-wrap: normal;
}

/* Lange Titel („VIE/BUD → DXB · 10.02.2027–12.02.2027") sollen umbrechen
   statt die Seite zu verbreitern.
   `anywhere` statt `break-word`: nur `anywhere` verkleinert auch die
   Mindestbreite des Elements. Mit `break-word` bleibt der Titel im Raster
   so breit wie sein längstes Wort und zieht die ganze Seite mit sich --
   dann laufen Karte und Preisspalte über den Bildschirmrand hinaus. */
.display,
.display--abschnitt,
.riese,
.manifest,
.tr__ort,
.zeile__titel {
  overflow-wrap: anywhere;
  max-width: 100%;
  min-width: 0;
}

/* Rasterelemente dürfen nie breiter werden als ihre Spalte. */
.raster > * { min-width: 0; }

/* Letzte Sicherung: nichts darf den Körper waagerecht scrollen lassen. */
html,
body { max-width: 100%; overflow-x: clip; }

/* --- Barrierefreiheit ---------------------------------------------------- */

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

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

/* Sprung zum Inhalt — erscheint erst bei Tastaturfokus. */
.sprung {
  position: absolute;
  left: var(--rand);
  top: -60px;
  z-index: 10001;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  transition: top 0.3s var(--takt);
}
.sprung:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Alles bleibt lesbar und erreichbar: was sonst eingeblendet würde,
     ist von Anfang an sichtbar. Die Selektoren müssen `.js` mitführen --
     sonst gewinnt `.js .auf { opacity: 0 }` über Spezifität, und die
     Seite bliebe für genau die Leute leer, die weniger Bewegung wollen. */
  .js .auf,
  .auf { opacity: 1; transform: none; }
  .js .zeile-auf,
  .zeile-auf { clip-path: none; }
  .js .vorlader,
  .vorlader { display: none; }
  .zeiger { display: none; }
}