/* ============================================
   EINHEIT — eine Plattform, zwei Modi
   ============================================
   Louis 03.09.: "man merkt noch, dass das eine neue System war, und das
   zweite noch ein anderes System ist [...] diese Pillen [...] sehen auch
   glaube ich nicht gleich aus" und: "Könnte man das auch so in edlem Weiss
   für den hellen Modus machen? [...] die Bühne dann Hintergrundweiss und
   die Punkte schwarz."

   Zwei Befunde, eine Datei.

   ── 1. Die Bühne war immer dunkel ──
   intl.css setzt --intl-hero und Geschwister fest auf die dunklen Werte;
   der Kommentar dort sagt es ausdrücklich: "Hero ist immer die dunkle
   Bühne". Nur was UNTER der Bühne liegt, folgte dem Modus. Im hellen Modus
   sass damit eine schwarze Platte auf einer milchweissen Seite -- der
   Bruch, den man beim Umschalten sieht.
   Jetzt ist die Bühne ein Satz Tokens. Hell ist die Vorgabe (edelweiss,
   dunkle Punkte), dunkel die Abweichung. Dieselben Tokens tragen den
   Kopfbereich des Dashboards, damit beide Seiten denselben Modus sprechen.

   ── 2. Die Pillen kamen aus dem alten System ──
   .pill in components.css: voller Radius, --shadow-sm, im Aktivzustand
   lila --primary mit Leuchtrand und einem translateY(-1px) beim
   Ueberfahren. Die internationale Seite kennt weder Leuchten noch Heben
   noch Lila -- dort sind Bedienelemente flach, 6px Radius, Champagner als
   einziger Akzent. Zwei Zeitalter auf einer Plattform.
   Jetzt tragen die Pillen die Sprache der Segmentschalter.

   LADEREIHENFOLGE: als LETZTES, nach components.css, intl.css und
   dashboard-kopf.css. Die Datei korrigiert bewusst Werte aus allen drei.
   ============================================ */


/* ══════════════════════════════════════════
   0. DIE TEXTGROESSEN
   ══════════════════════════════════════════
   Louis: die Textgrößen sollten größer sein.

   Der Grund, warum es sich nicht verändert hat: die Skala in
   variables.css beginnt sehr tief. --fs-xs ist 0.72rem = 11,5px, und
   --fs-xs ist nicht die Ausnahme, sondern der Arbeitswert des ganzen
   Systems -- gut achtzig Stellen in pages.css hängen daran: jede
   Ortsangabe, jede Zeitangabe, jede Marke, jede Feldbeschriftung, die
   Zahlen in den Profilkarten. Einzelne Stellen anzuheben verschiebt nur
   das Problem; die Skala selbst muss steigen.

   Angehoben wird von unten. Die Anzeigegrößen (--fs-3xl und darüber)
   bleiben unberührt: dort hängen Umbrüche von Überschriften auf zwanzig
   Seiten dran, und sie sind ohnehin nicht das Problem.

     --fs-xs     11,5px → 12,7px
     --fs-sm     13,2px → 14,2px
     --fs-base   15,2px → 16px      (Vorgabe des Browsers)
     --fs-lg     17,3px → 18px
     --fs-xl     19,2px → 20px
     --fs-2xl    22,4px → 23,2px

   Der Abstand zwischen den Stufen wird dabei kleiner. Das ist gewollt:
   eine Skala, die unten weit springt, braucht Sprünge, um lesbar zu
   bleiben -- eine, die höher ansetzt, kann engere Stufen tragen und
   liest sich ruhiger.

   WARUM HIER UND NICHT IN variables.css: als Überschreibung ist die
   Anhebung mit einer Zeile zurücknehmbar. Wenn irgendwo ein Umbruch
   kippt, den ich nicht gesehen habe, ist die Skala in Sekunden wieder
   die alte -- ohne dass eine Basisdatei angefasst werden muss. Wenn sich
   nach ein paar Tagen im Betrieb nichts zeigt, gehören die Werte nach
   variables.css und dieser Abschnitt kann weg.

   NICHT ANGEFASST: --fs-3xl bis --fs-hero, alle --lh-*, alle --fw-*. */
:root {
  --fs-xs: 0.795rem;
  --fs-sm: 0.885rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.45rem;
}

/* Die Fächerleiste und die Laufzeile auf der Bühne gehen die Anhebung
   nicht mit: beide rechnen mit ihrer Breite (die Leiste hält die Fächer in
   einer Zeile, die Laufzeile schiebt einen Satz durch ein Fenster fester
   Größe) und sind in intl.css deshalb in px gesetzt. Das ist Absicht, kein
   Versehen -- sie brauchen hier nichts. */


/* ══════════════════════════════════════════
   1. DIE BUEHNE ALS TOKENSATZ
   ══════════════════════════════════════════
   Auf :root, damit Landingpage, Anmeldung und Dashboard-Kopf dieselbe
   Quelle haben. Die Wiederholung auf .intl-page ist nötig, weil intl.css
   die Tokens dort setzt und eine Klasse :root schlägt. */
:root,
.intl-page,
.auth-page--intl {
  /* ── Heller Modus: edelweiss ──
     Etwas tiefer als die Seitenfläche (hsl(40,20%,99%)), damit die Bühne
     als eigene Ebene liest und nicht als Nichts. */
  --intl-hero: hsl(40, 22%, 97%);
  --intl-hero-ink: hsl(230, 8%, 32%);
  --intl-hero-strong: hsl(230, 10%, 12%);
  --intl-hero-muted: hsla(230, 10%, 13%, 0.6);
  --intl-hero-faint: hsla(230, 10%, 13%, 0.62);
  --intl-hero-line: hsla(230, 10%, 13%, 0.16);
  --intl-hero-line-soft: hsla(230, 10%, 13%, 0.1);

  /* Champagner muss auf Weiss dunkler sein als auf Schwarz, sonst
     verschwindet er. Gleiche Farbe, anderer Ort auf der Helligkeit. */
  --intl-hero-gold: hsl(42, 58%, 40%);

  /* Felder: auf Weiss ist ein aufgehelltes Feld unsichtbar -- also echtes
     Weiss mit Kante, wie die Eingabe im Marktblick. */
  --intl-hero-fill: hsla(0, 0%, 100%, 0.72);
  --intl-hero-fill-strong: hsl(0, 0%, 100%);
  --intl-hero-edge: hsla(230, 10%, 13%, 0.18);
  --intl-hero-ph: hsla(230, 10%, 13%, 0.38);

  /* Der tragende Knopf: dunkel auf hell. */
  --intl-hero-btn: hsl(230, 10%, 16%);
  --intl-hero-btn-hover: hsl(230, 10%, 26%);
  --intl-hero-btn-ink: hsl(40, 20%, 98%);

  /* Die Schleier über der Karte. Als ganze Verläufe getauscht, nicht als
     Einzelfarben: hell braucht andere Stützstellen als dunkel, weil dunkle
     Punkte auf Weiss schneller verschwinden. */
  --intl-scrim-x: linear-gradient(to right,
    hsla(40, 22%, 97%, 0.94) 0%,
    hsla(40, 22%, 97%, 0.7) 30%,
    hsla(40, 22%, 97%, 0.16) 58%,
    hsla(40, 22%, 97%, 0) 100%);
  --intl-scrim-y: linear-gradient(to bottom,
    hsla(40, 22%, 97%, 0.76) 0%,
    hsla(40, 22%, 97%, 0) 22%,
    hsla(40, 22%, 97%, 0) 64%,
    hsla(40, 22%, 97%, 0.94) 96%,
    hsl(40, 22%, 97%) 100%);
  --intl-scrim-y-sm: linear-gradient(to bottom,
    hsla(40, 22%, 97%, 0.12) 0%,
    hsla(40, 22%, 97%, 0) 20%,
    hsla(40, 22%, 97%, 0.04) 70%,
    hsla(40, 22%, 97%, 0.55) 92%,
    hsl(40, 22%, 97%) 100%);
}

/* ── Dunkler Modus: die bisherige Bühne, unverändert ── */
:root[data-theme="dark"],
:root[data-theme="dark"] .intl-page,
:root[data-theme="dark"] .auth-page--intl {
  --intl-hero: hsl(230, 10%, 9%);
  --intl-hero-ink: hsl(40, 18%, 92%);
  --intl-hero-strong: hsl(40, 20%, 97%);
  --intl-hero-muted: hsla(40, 18%, 92%, 0.62);
  --intl-hero-faint: hsla(40, 18%, 92%, 0.5);
  --intl-hero-line: hsla(40, 18%, 92%, 0.18);
  --intl-hero-line-soft: hsla(40, 18%, 92%, 0.12);
  --intl-hero-gold: hsl(42, 55%, 58%);
  --intl-hero-fill: hsla(40, 18%, 92%, 0.08);
  --intl-hero-fill-strong: hsla(40, 18%, 92%, 0.12);
  --intl-hero-edge: hsla(40, 18%, 92%, 0.32);
  --intl-hero-ph: hsla(40, 18%, 92%, 0.4);
  --intl-hero-btn: hsl(40, 20%, 97%);
  --intl-hero-btn-hover: hsl(40, 20%, 100%);
  --intl-hero-btn-ink: hsl(230, 10%, 13%);

  --intl-scrim-x: linear-gradient(to right,
    hsla(230, 10%, 9%, 0.9) 0%,
    hsla(230, 10%, 9%, 0.62) 30%,
    hsla(230, 10%, 9%, 0.12) 58%,
    hsla(230, 10%, 9%, 0) 100%);
  --intl-scrim-y: linear-gradient(to bottom,
    hsla(230, 10%, 9%, 0.72) 0%,
    hsla(230, 10%, 9%, 0) 22%,
    hsla(230, 10%, 9%, 0) 64%,
    hsla(230, 10%, 9%, 0.92) 96%,
    hsl(230, 10%, 9%) 100%);
  --intl-scrim-y-sm: linear-gradient(to bottom,
    hsla(230, 10%, 9%, 0.5) 0%,
    hsla(230, 10%, 9%, 0.22) 28%,
    hsla(230, 10%, 9%, 0.55) 68%,
    hsla(230, 10%, 9%, 0.94) 92%,
    hsl(230, 10%, 9%) 100%);
}


/* ══════════════════════════════════════════
   2. DIE BUEHNE FOLGT DEN TOKENS
   ══════════════════════════════════════════
   Ersetzt die festen Werte aus intl.css. */

.intl-hero__scrim-x { background: var(--intl-scrim-x); }
.intl-hero__scrim-y { background: var(--intl-scrim-y); }

@media (max-width: 768px) {
  /* Auf dem Handy steht der Text über der ganzen Breite -- ein Schleier
     von links nützt dort nichts, der senkrechte trägt allein. */
  .intl-hero__scrim-y { background: var(--intl-scrim-y-sm); }
  .intl-hero {
    height: calc(100vh - var(--intl-tabbar));
    height: calc(100svh - var(--intl-tabbar));
    min-height: calc(100vh - var(--intl-tabbar));
    min-height: calc(100svh - var(--intl-tabbar));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .intl-hero__inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 14px);
    padding-bottom: 8px;
    min-height: 0;
    box-sizing: border-box;
  }
  .intl-hero__title {
    font-size: clamp(2.05rem, 9.5vw, 2.7rem);
    max-width: 14ch;
    line-height: 1.14;
  }
  /* Post-Bereich wandert in den grosszuegigen unteren Bereich */
  .intl-post {
    margin-top: auto;
    margin-bottom: 12px;
    position: relative;
    z-index: 3;
  }
  /* Weltkarte: nur minimal (Millimeter-Sache) unter "has it" geschoben */
  .intl-hero world-market-map {
    inset: 56px 0 auto 0;
    height: clamp(380px, 50svh, 460px);
    mask-image: linear-gradient(to bottom, black 68%, transparent 98%);
    -webkit-mask-image: linear-gradient(to bottom, black 68%, transparent 98%);
    pointer-events: none;
  }
  .intl-hero__foot {
    padding-top: 6px;
    padding-bottom: 10px;
    flex-shrink: 0;
  }
  /* Zweiter Bereich (Fields / Fächer): Leerraum nach oben beseitigt */
  .intl-board {
    padding-top: 14px;
  }
}

.intl-kicker { color: var(--intl-hero-gold); }
.intl-hero__title { color: var(--intl-hero-strong); }
.intl-hero__title em { color: var(--intl-hero-gold); }
.intl-hero__lead { display: none; }

/* Foto-Bühne (Münster): das Bild bleibt Bild, auch im Hellmodus.
   Dunkle Tinte auf dem Nachtfoto war unsichtbar. Text bleibt hell,
   der Schleier darunter dunkler. */
.intl-hero--foto {
  --intl-hero-strong: hsl(40, 20%, 98%);
  --intl-hero-muted: hsla(40, 18%, 96%, 0.88);
  --intl-hero-faint: hsla(40, 18%, 96%, 0.78);
  --intl-hero-gold: hsl(42, 62%, 68%);
  --intl-hero-line: hsla(40, 18%, 96%, 0.34);
  --intl-hero-fill: hsla(0, 0%, 100%, 0.18);
  --intl-hero-fill-strong: hsla(0, 0%, 100%, 0.28);
  --intl-hero-edge: hsla(40, 18%, 96%, 0.42);
  --intl-hero-ph: hsla(40, 18%, 96%, 0.55);
  --intl-hero-btn: hsl(40, 20%, 98%);
  --intl-hero-btn-hover: hsl(40, 20%, 100%);
  --intl-hero-btn-ink: hsl(230, 10%, 12%);
}
.intl-hero--foto .hero-stage__scrim {
  background:
    linear-gradient(to right, hsla(230, 10%, 6%, 0.84) 0%, hsla(230, 10%, 6%, 0.52) 42%, hsla(230, 10%, 6%, 0.2) 100%),
    linear-gradient(to bottom, hsla(230, 10%, 6%, 0.58) 0%, transparent 32%, hsla(230, 10%, 6%, 0.76) 100%);
}

.intl-post__toggle { border-color: var(--intl-hero-line); }

.intl-post__toggle .hero-stage__toggle-btn {
  color: var(--intl-hero-faint);
}

.intl-post__toggle .hero-stage__toggle-btn--active,
.intl-post__toggle .hero-stage__toggle-btn--active > span {
  background: var(--intl-hero-btn);
  color: var(--intl-hero-btn-ink) !important;
}

.intl-post__toggle .hero-stage__toggle-btn--active > span { background: none; }

.intl-post__input {
  color: var(--intl-hero-strong);
  background: var(--intl-hero-fill);
  border-color: var(--intl-hero-edge);
}

.intl-post__input::placeholder { color: var(--intl-hero-ph); }

.intl-post__input:focus {
  border-color: var(--intl-hero-gold);
  background: var(--intl-hero-fill-strong);
}

.intl-post__submit {
  background: var(--intl-hero-btn);
  color: var(--intl-hero-btn-ink);
}

.intl-post__submit:hover:not(:disabled) {
  background: var(--intl-hero-btn-hover);
  color: var(--intl-hero-btn-ink);
}

.intl-post__meta { color: var(--intl-hero-faint); }

.intl-hero .gps-status { color: var(--intl-hero-faint); }
.intl-hero .gps-status__dot { background: var(--intl-hero-faint); }
.intl-hero .gps-status--active .gps-status__dot,
.intl-hero .gps-status--manual .gps-status__dot { background: var(--intl-hero-gold); }

.intl-stat__value { color: var(--intl-hero-strong); }
.intl-stat__value--gold { color: var(--intl-hero-gold); }
.intl-stat__label { color: var(--intl-hero-muted); }

.intl-tape__mark { color: var(--intl-hero-gold); }
.intl-tape__text { color: var(--intl-hero-muted); }

.intl-caret { color: var(--intl-hero-gold); }

/* Header auf der Bühne: erbt die Tinte, wechselt beim Scrollen wie bisher. */
.header--intl .header__nav-link--active {
  background: var(--intl-hero-line-soft);
  border-color: var(--intl-hero-line-soft);
}

/* Die Anmeldung vom weltweiten Eingang liegt auf derselben Bühne. */
.auth-page--intl { background: var(--intl-hero); }

.auth-page--intl .auth-page__bg-overlay {
  background: transparent;
}

@media (max-width: 768px) {
  /* A: Welt oben, Tür darunter. Eine Fläche, kein Glas. Nur Handy. */
  .auth-page,
  .auth-page--intl {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    height: 100svh;
    min-height: 100svh !important;
    max-height: 100svh;
    padding: 0;
    background: var(--intl-hero);
  }
  .auth-page--intl .auth-page__form-container,
  .auth-page .auth-page__form-container {
    width: 100%;
    max-width: none;
    background: var(--intl-hero);
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
    padding: 8px 16px max(10px, env(safe-area-inset-bottom));
  }
  .auth-page .auth-card,
  .auth-page--intl .auth-card {
    border-radius: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }
  .auth-zu { display: none !important; }
  .auth-zurueck {
    display: grid;
    place-items: center;
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid hsla(0, 0%, 100%, 0.7);
    background: hsla(0, 0%, 100%, 0.38);
    color: var(--intl-hero-strong);
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(20, 18, 12, 0.1), inset 0 1px 0 hsla(0, 0%, 100%, 0.85);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
  }
  .auth-zurueck svg { width: 18px; height: 18px; display: block; }
  .auth-zurueck__wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  :root[data-theme="dark"] .auth-zurueck {
    background: hsla(230, 10%, 16%, 0.4);
    border-color: hsla(40, 18%, 92%, 0.28);
    color: hsl(40, 18%, 92%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 hsla(40, 18%, 92%, 0.2);
  }
  .auth-page--intl .auth-page__bg-overlay {
    display: none;
    background: transparent;
  }
  .auth-page--intl world-market-map,
  .auth-page--intl #auth-world-map {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    z-index: 1;
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
  }
  .auth-page:not(.auth-page--intl) .auth-page__bg-img {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  /* Homebildschirm: ohne Safari-Leiste wuerde die Karte die Luecke
     auffressen. Kappe sie, die Tuer sitzt direkt darunter. */
  html.auth-homescreen .auth-page,
  html.auth-homescreen .auth-page--intl {
    height: 100dvh;
    min-height: 100dvh !important;
    max-height: 100dvh;
    justify-content: flex-start;
  }
  html.auth-homescreen .auth-page--intl world-market-map,
  html.auth-homescreen .auth-page--intl #auth-world-map,
  html.auth-homescreen .auth-page:not(.auth-page--intl) .auth-page__bg-img {
    flex: 0 0 auto;
    height: min(42dvh, 380px, calc(100dvh - 22rem));
    max-height: 380px;
  }
  html.auth-homescreen .auth-page .auth-page__form-container,
  html.auth-homescreen .auth-page--intl .auth-page__form-container {
    flex: 1 1 auto;
  }
  @media (display-mode: standalone), (display-mode: fullscreen) {
    .auth-page,
    .auth-page--intl {
      height: 100dvh;
      min-height: 100dvh !important;
      max-height: 100dvh;
      justify-content: flex-start;
    }
    .auth-page--intl world-market-map,
    .auth-page--intl #auth-world-map,
    .auth-page:not(.auth-page--intl) .auth-page__bg-img {
      flex: 0 0 auto;
      height: min(42dvh, 380px, calc(100dvh - 22rem));
      max-height: 380px;
    }
    .auth-page .auth-page__form-container,
    .auth-page--intl .auth-page__form-container {
      flex: 1 1 auto;
    }
  }
  .auth-page .header__logo-img--light { visibility: visible !important; opacity: 1 !important; }
  .auth-page .header__logo-img--dark { visibility: hidden !important; opacity: 0 !important; }
  .auth-page .auth-card__title {
    color: var(--intl-hero-strong) !important;
    text-shadow: none !important;
    font-size: 18px !important;
    margin: 0 !important;
  }
  .auth-page .auth-card__header { margin-bottom: 6px !important; }
  .auth-page .header__logo { margin-bottom: 2px !important; }
  .auth-page .header__logo .header__logo-img--full { height: 22px !important; }
  .auth-page .auth-social { gap: 6px; margin: 0 0 8px !important; }
  .auth-page .auth-social-btn { min-height: 48px; padding: 6px 4px; gap: 3px; border-radius: 14px; }
  .auth-page .auth-social-btn__kurz { font-size: 10px; }
  .auth-page .auth-tabs { margin-bottom: 6px !important; }
  .auth-page .auth-tab { padding: 5px 8px !important; font-size: 13px !important; }
  .auth-page .auth-form { gap: 6px; }
  .auth-page .form-group { margin-bottom: 0 !important; position: relative; }
  .auth-page .form-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
  }
  .auth-page .auth-card__subtitle,
  .auth-page .auth-divider,
  .auth-page #magic-link-btn,
  .auth-page #forgot-password-btn,
  .auth-page #login-form > div:has(#forgot-password-btn) { display: none !important; }
  .auth-page .form-input {
    background: #fff !important;
    border: 1px solid var(--intl-hero-edge) !important;
    color: var(--intl-hero-strong) !important;
    font-size: 16px !important;
    height: 48px !important;
  }
  .auth-page .auth-slot__feld {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  .auth-page .auth-slot:focus-within {
    border-color: var(--intl-hero-gold) !important;
  }
  .auth-page .auth-sprach {
    margin-top: 6px;
    opacity: 0.5;
    font-size: 11px;
  }
  .auth-page .auth-tab:not(.auth-tab--active) { color: var(--intl-hero-muted) !important; }
  .auth-page .auth-tab--active { background: #fff !important; color: #111 !important; }
}

@media (max-width: 768px) {
  :root[data-theme="dark"] .auth-page .header__logo-img--light { visibility: hidden !important; opacity: 0 !important; }
  :root[data-theme="dark"] .auth-page .header__logo-img--dark { visibility: visible !important; opacity: 1 !important; }
}

:root[data-theme="dark"] .auth-page--intl .auth-page__bg-overlay {
  background: transparent;
}

@media (max-width: 768px) {
  :root[data-theme="dark"] .auth-page--intl .auth-page__bg-overlay {
    display: none;
  }
}


/* ══════════════════════════════════════════
   3. DER DASHBOARD-KOPF FOLGT DENSELBEN TOKENS
   ══════════════════════════════════════════
   dashboard-kopf.css trägt noch die festen dunklen Werte; im hellen Modus
   wäre der Kopf sonst die einzige schwarze Fläche der App. */
.quick-post {
  background: var(--intl-hero);
  color: var(--intl-hero-ink);
}

.quick-post__lead { color: var(--intl-hero-strong); }
.quick-post__lead em { color: var(--intl-hero-gold); }

.quick-post__toggle .toggle__track { border-color: var(--intl-hero-line); }

.quick-post__toggle .toggle__label { color: var(--intl-hero-faint); }
.quick-post__toggle .toggle__label:hover { color: var(--intl-hero-muted); }

/* Die aktive Marke traegt Flaeche. Der Farbwert braucht !important und
   muss auch das innere <span> erwischen: pages.css setzt die Schriftfarbe
   dort mit hoeherer Spezifitaet, sonst steht im dunklen Modus Weiss auf
   Weiss. */
.quick-post__toggle .toggle__label--active,
.quick-post__toggle .toggle__label--active:hover,
.quick-post__toggle .toggle__label--active > span {
  background: var(--intl-hero-btn);
  color: var(--intl-hero-btn-ink) !important;
}

.quick-post__toggle .toggle__label--active > span {
  background: none;
}

.quick-post__toggle .toggle__label > span {
  color: inherit;
}

.quick-post__input {
  color: var(--intl-hero-strong);
  background: var(--intl-hero-fill);
  border-color: var(--intl-hero-edge);
}

.quick-post__input::placeholder { color: var(--intl-hero-ph); }

.quick-post__input:focus {
  border-color: var(--intl-hero-gold);
  background: var(--intl-hero-fill-strong);
}

.quick-post__submit,
.quick-post__submit.btn {
  background: var(--intl-hero-btn);
  color: var(--intl-hero-btn-ink);
}

.quick-post__submit:hover:not(:disabled) {
  background: var(--intl-hero-btn-hover);
  color: var(--intl-hero-btn-ink);
}

.quick-post__note { color: var(--intl-hero-faint); }

.quick-post .gps-status { color: var(--intl-hero-faint); }
.quick-post .gps-status__dot { background: var(--intl-hero-faint); }
.quick-post .gps-status--active .gps-status__dot,
.quick-post .gps-status--manual .gps-status__dot { background: var(--intl-hero-gold); }

/* Die helle Bühne braucht eine Unterkante, sonst fliesst sie in die Seite.
   Im dunklen Modus trägt der Farbsprung selbst. */
.quick-post { border-bottom: 1px solid var(--intl-hero-line-soft); }
:root[data-theme="dark"] .quick-post { border-bottom: none; }


/* ══════════════════════════════════════════
   4. DIE PILLEN
   ══════════════════════════════════════════
   Aus der Leucht-Kapsel wird der Reiter des Marktes: flach, 6px Radius,
   kein Schatten, kein Heben, kein Lila. Dieselben Masse wie die
   Segmentschalter auf der Bühne, damit ein Reiter und ein Schalter als
   Verwandte lesbar sind.

   Gilt überall, wo .pill benutzt wird -- genau das ist der Zweck. */
.pills {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;

  /* Die Reihe sitzt in einer eigenen Fassung, wie der Schalter oben.
     Vorher standen die Kapseln lose im Raum, auf der Landingpage dagegen
     alles in Fassungen -- das war der sichtbarste Unterschied. */
  width: fit-content;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--border-medium, hsla(230, 10%, 13%, 0.16));
  border-radius: 8px;
}

.pill {
  padding: 7px 17px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--fw-medium, 500);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: none;
  transition: background 0.15s var(--ease-out, ease), color 0.15s var(--ease-out, ease);
}

.pill:hover:not(.pill--active) {
  background: hsla(230, 10%, 13%, 0.05);
  border-color: transparent;
  color: var(--text-primary);

  /* Das Heben war die auffälligste Geste des alten Systems. Auf einem
     Handelsplatz bewegt sich nichts, was man nur überfährt. */
  transform: none;
}

:root[data-theme="dark"] .pill:hover:not(.pill--active) {
  background: hsla(40, 18%, 92%, 0.07);
}

/* Der Aktivzustand trägt Fläche, nicht Leuchten. !important, weil die
   Regel in components.css es auch führt. */
.pill--active {
  background: hsl(230, 10%, 16%) !important;
  border-color: transparent !important;
  color: hsl(40, 20%, 98%) !important;
  box-shadow: none !important;
}

.pill--active > * {
  background: none !important;
  color: inherit !important;
}

:root[data-theme="dark"] .pill--active {
  background: hsl(40, 20%, 97%) !important;
  border-color: transparent !important;
  color: hsl(230, 10%, 13%) !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .pill--active > * {
  background: none !important;
  color: inherit !important;
}

/* Auf dem Handy laufen die Reiter seitlich, statt in zwei Zeilen zu
   brechen -- wie die Fächerleiste auf der Landingpage. */
@media (max-width: 768px) {
  .pills {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pills::-webkit-scrollbar { display: none; }

  .pill {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


/* ══════════════════════════════════════════
   5. SEITENZEILE FUER DIE APP-SEITEN
   ══════════════════════════════════════════
   Chat und Dashboard begannen mit einer kleinen Groteske-Zeile ("Chats"),
   die Landingpage mit einer Serifenzeile. Dieselbe Stimme auf jeder Seite
   weist sie als denselben Ort aus. Wird per Klasse gesetzt, nicht global
   auf h1/h2 -- sonst erwischt es Zeilen, die klein bleiben sollen. */
.seiten-zeile {
  margin: 0 0 var(--space-5);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  text-wrap: balance;
}

.seiten-zeile em {
  font-style: italic;
  color: var(--secondary);
}


/* ══════════════════════════════════════════
   6. REDUZIERTE BEWEGUNG
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pill,
  .intl-post__input,
  .quick-post__input {
    transition: none !important;
  }
}


/* ══════════════════════════════════════════
   7. DER CHAT
   ══════════════════════════════════════════
   Der Chat war die Seite, auf der der Bruch am deutlichsten war: er
   beginnt mit "Chats" als kleiner Groteske-Zeile, während jede andere
   Seite mit einer Serifenzeile beginnt.

   Die Zeile allein zu vergrößern hätte es nicht behoben. Der eigentliche
   Befund steckt im Kopf des Chatfensters:

     .chat-window__name    --fs-sm   13,2px   der Name der Person
     .chat-window__topic   --fs-xs   11,5px   worum es geht

   Das ist die Rangfolge eines Nachrichtenprogramms: wichtig ist, mit wem
   man spricht. Auf dieser Plattform ist es umgekehrt. Ein Chat entsteht,
   weil zwei Seiten eines Anliegens zusammengefunden haben -- das
   Anliegen ist der Gegenstand des Gesprächs, die Person die andere
   Hälfte davon. Das Anliegen stand als kleinster Text der Seite unter
   dem Namen.

   Also getauscht: das Thema trägt die Serifenzeile, der Name steht
   darüber als Herkunft. Kein Markup geändert -- chat.js schreibt
   weiterhin in #chat-partner-name und #chat-topic. */

.chat-list__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Der Kopf des Chatfensters: Name klein darüber, Thema als Zeile. */
.chat-window__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.chat-window__name {
  order: 1;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.chat-window__topic {
  order: 2;
  font-family: var(--font-serif);
  font-size: clamp(19px, 2vw, 25px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);

  /* Ein Anliegen ist ein Satz, kein Wort. Die Regel in pages.css schnitt
     es nach einer Zeile ab; auf einem breiten Kopf ist Platz für zwei. */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Auf dem Handy trägt der Kopf des Chatfensters die ganze Breite und
   steht neben dem Zurück-Pfeil -- dort ist weniger Platz, aber das Thema
   bleibt die tragende Zeile. */
@media (max-width: 768px) {
  .chat-window__topic {
    font-size: 17.5px;
    -webkit-line-clamp: 2;
  }

  .chat-list__title {
    font-size: 24px;
  }
}