/* Die Unterseiten auf das Layout der Startseite heben.
 *
 * DER BEFUND (01.09.2026, Arpad am Vorschau-Deploy): Farbe, Schrift und
 * Kopfleiste stimmten nach der Token-Umstellung — der RUMPF nicht. Die
 * Unterseiten sahen weiter aus wie ein anderes Produkt, und zwar aus drei
 * Gründen, die man erst sieht, wenn man beide Seiten nebeneinander legt:
 *
 *   1. KEINE SPALTE. Der Inhalt lief über die volle Fensterbreite. Gemessen
 *      bei 1440 px: Absätze 1376 px breit. Auf der Startseite sind dieselben
 *      Absätze 752 bis 894 px. Eine Zeile mit 1376 px trägt rund 190 Zeichen;
 *      lesbar sind 60 bis 90. Das ist der Hauptgrund, warum die Seiten
 *      „billig" wirkten — nicht die Farbe.
 *   2. ANDERE KANTE. Der Text begann bei x = 32, auf der Startseite bei
 *      x = 112. Beim Klick von der Startseite auf eine Unterseite sprang der
 *      ganze Satzspiegel nach links.
 *   3. ANDERER RHYTHMUS. 72 px Abstand zwischen den Abschnitten statt 96.
 *
 * WAS HIER NICHT PASSIERT: kein Markup wird angefasst. Die 29 Seiten behalten
 * ihre Klassen (`section`, `container`, `section__head`, `eyebrow`, `card`);
 * diese Datei legt die Geometrie der Startseite darüber. Dieselbe
 * Entscheidung wie bei `kompat.css` und aus demselben Grund: Was sich ändert,
 * ist überprüfbar, weil kein Layout beim Umschreiben verrutschen kann.
 *
 * Die Werte sind an der gerenderten Startseite GEMESSEN, nicht geschätzt —
 * Container 1480, Innenabstand 96/32/96/112, Satzbreite 752–894.
 *
 * Lädt NACH styles/landing/premium und nach site.css.
 */

/* ------------------------------------------------------------------
   1. Die Spalte
   ------------------------------------------------------------------ */
:root {
  /* 760 px ist die gemessene Satzbreite der Startseite (#objections 752,
     #connectors 755). Als Variable, damit ein einzelner Ort sie ändert. */
  --mass-text: 760px;
  --mass-lead: 900px;
  --spalte: 1480px;
  /* Links mehr als rechts: Auf der Startseite steht dort die Seitenleiste,
     und die Kante des Satzspiegels soll beim Seitenwechsel nicht springen. */
  --rand-links: 112px;
  --rand-rechts: 32px;
}

body[data-page] main .container,
body[data-page] main .container--narrow {
  max-width: var(--spalte);
  margin-inline: auto;
  padding-left: var(--rand-links);
  padding-right: var(--rand-rechts);
}

/* Unter der Breite, ab der die Seitenleiste auf der Startseite verschwindet
   (js/chrome.js, 700 px), gibt es keinen Grund mehr für die asymmetrische
   Kante. */
@media (max-width: 900px) {
  body[data-page] main .container,
  body[data-page] main .container--narrow {
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 620px) {
  body[data-page] main .container,
  body[data-page] main .container--narrow {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ------------------------------------------------------------------
   2. Der Rhythmus
   ------------------------------------------------------------------ */
body[data-page] main .section {
  padding-top: 96px;
  padding-bottom: 96px;
}
@media (max-width: 900px) {
  body[data-page] main .section { padding-top: 64px; padding-bottom: 64px; }
}

/* Die Trennlinie zwischen Abschnitten war ein türkiser Verlauf aus dem alten
   Entwurf und kommt auf der Startseite nirgends vor. */
body[data-page] main .section--ruled {
  border-top: 1px solid var(--border-subtle);
  background-image: none;
}
body[data-page] main .section--ruled:first-of-type { border-top: none; }
/* Die Linie war ein 1 px hoher Farbverlauf als ::before. Auf der Startseite
   gibt es so etwas nirgends — dort trennen Flächen und Abstand, nicht
   Striche. */
body[data-page] main .section--ruled::before { display: none; }

/* ------------------------------------------------------------------
   3. Die Zeilenlänge — der eigentliche Fehler
   ------------------------------------------------------------------ */
/* WARUM `.section` IN JEDEM SELEKTOR STEHT, obwohl es nichts auswählt, was
   `.container` nicht schon auswählt: premium.css trägt unter der Überschrift
   „Keine Textbremse mehr" die Regel

       body[data-page] .section p:not([class]) { max-width: none; }

   Das `:not([class])` zählt als Klasse, die Regel kommt damit auf (0,3,2) —
   spezifischer als das naheliegende `body[data-page] main .container > p`
   mit (0,2,3). Ohne das zusätzliche `.section` gewinnt sie, und zwar
   lautlos: Die Regel hier steht dann im Stylesheet, wird im Browser
   angezeigt und tut nichts. Mit `.section` sind es (0,3,3).

   KEIN `!important`. Es würde hier wirken, aber jede spätere Regel auf
   denselben Elementen bräuchte dann auch eines. */
body[data-page] main .section .container > p,
body[data-page] main .section .container > ul > li,
body[data-page] main .section .container > ol > li,
body[data-page] main .section .container > dl > dd,
body[data-page] main .section .container .legal p,
body[data-page] main .section .container .legal li,
body[data-page] main .section .container > section > p,
body[data-page] main .section .container > section > dl > dd,
body[data-page] main .section .container > section > ul > li {
  max-width: var(--mass-text);
}

/* In Karten, Rastern und Tabellen NICHT begrenzen: Dort bestimmt die Zelle
   die Breite, und eine zweite Grenze darin erzeugt nur einen Rand, den
   niemand bestellt hat. Deshalb oben ausschliesslich direkte Kinder. */

/* ------------------------------------------------------------------
   4. Kopf des Abschnitts — linksbündig wie auf der Startseite
   ------------------------------------------------------------------ */
body[data-page] main .section__head {
  max-width: none;
  margin: 0 0 40px;
  text-align: left;
}
body[data-page] main .section__lead {
  max-width: var(--mass-lead);
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body);
  color: var(--text-body);
}

/* Das Kleingedruckte über der Überschrift. Auf der Startseite ist es
   Montserrat halbfett in Grossbuchstaben und gedämpfter Farbe — nicht
   Monospace in der Markenfarbe wie im alten Entwurf. */
body[data-page] main .eyebrow {
  font-family: var(--font-core);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------
   5. Überschriften auf die Leiter des Designsystems
   ------------------------------------------------------------------ */
body[data-page] main .h1,
body[data-page] main h1 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin: 12px 0 16px;
}
body[data-page] main .h3,
body[data-page] main h2 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin: 48px 0 16px;
}
body[data-page] main h3 {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin: 32px 0 12px;
}

/* ------------------------------------------------------------------
   6. Die Kulisse aus dem alten Entwurf
   ------------------------------------------------------------------ */
/* Das 64-px-Raster und der türkise Schein hinter dem Inhalt stammen aus der
   dunklen Fassung. Auf Weiss ist das Raster ein Schleier, den die Startseite
   nicht hat — und zwei verschiedene Hintergründe sind genau das, was diese
   Datei beseitigen soll. */
body[data-page] .bg-grid,
body[data-page] .bg-noise,
body[data-page] .bg-glow { display: none; }

/* ------------------------------------------------------------------
   7. Karten auf das Kartenbild der Startseite
   ------------------------------------------------------------------ */
body[data-page] main .card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  padding: 24px;
}
body[data-page] main .card:hover { box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------------
   8. Nichts im Rumpf darf breiter sein als seine Spalte
   ------------------------------------------------------------------
   BEFUND bei der Nachmessung: `terms.html` lief bei 900 px um 98 px über
   den rechten Rand, `de/terms.html` bei 390 px um 223 px. Ursache ist die
   Tabelle der Nutzungsgrenzen — `styles.css` macht sie zwar unterhalb einer
   Breite scrollbar, aber erst unterhalb von 700 px.

   Statt die eine Tabelle zu reparieren steht hier die Regel für die
   Gattung: Was breiter ist als die Spalte, scrollt in sich selbst statt
   die Seite zu verbreitern. Eine waagerechte Bildlaufleiste am ganzen
   Fenster ist der Fehler, den ein Besucher am ehesten bemerkt und am
   wenigsten versteht.

   `overflow-wrap` für den zweiten Fall: „Online-Streitbeilegungsplattform"
   ist 32 Zeichen lang und passt auf einem Telefon in keine Spalte. */
body[data-page] main .container > * { max-width: 100%; }

body[data-page] main table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-page] main .container {
  overflow-wrap: break-word;
}