/*
 * mipla.ch · Apex-Webseite, Layout
 *
 * Diese Datei definiert KEINEN Farbwert. Jede Farbe kommt aus brand/tokens.css
 * (semantische Rollen) oder brand/components.css (Komponenten-Tokens). Regel der
 * Initiative corporate-design: brand/ ist die einzige Quelle, siehe brand/README.md.
 *
 * Was hier steht, ist Layout: Raster, Breiten, Abstandsrollen.
 *
 * Die Schriftgroessen kommen aus der Skala des Fundaments (--step--1 bis --step-7, Verhaeltnis
 * 1.2). Diese Datei setzt KEINE eigene Groesse, sie gibt den Stufen nur Rollennamen und
 * laesst sie zwischen zwei Stufen fliessen. --step-5 bis --step-7 sind am 2026-10-13 fuer
 * diese Seite ins Fundament gekommen; der vw-Anteil der clamp() bleibt hier, weil er an der
 * Spaltenbreite dieser Seite haengt und nicht an der Marke.
 */

:root {
  /* Rollen auf der Skala des Fundaments. Fluid heisst: zwischen zwei Stufen, nie darueber
     hinaus. Jeder Endwert ist eine Stufe aus brand/tokens.css, kein freier Wert. */
  --fs-display:     clamp(var(--step-4), 1.4rem + 3.6vw, var(--step-7));
  --fs-h1:          clamp(var(--step-3), 1.25rem + 2.1vw, var(--step-5));
  --fs-h2:          clamp(var(--step-2), 1.1rem + 1.1vw, var(--step-3));
  --fs-h3:          var(--step-1);
  --fs-lead:        clamp(var(--step-0), 1rem + 0.4vw, var(--step-1));
  --fs-body:        var(--step-0);
  --fs-small:       var(--step--1);
  /* ⚠ Die Rolle hiess bis zum 2026-10-15 --step--4, und die gibt es nicht. Eine
     undefinierte Custom Property loest zu NICHTS auf: `font-size: var(--fs-very-small)`
     ist dann ungueltig, die Groesse faellt auf den geerbten Wert zurueck, und der ist
     GROESSER als vorher. Die Unterschrift stand deshalb unveraendert auf 13.3px, obwohl
     die Datei das Gegenteil behauptete. Solche Tippfehler meldet kein Browser.
     Seit dem 2026-10-15 traegt das Fundament --step--2 und --step--3. */
  --fs-hinweis:     var(--step--3);

  /* Breiten. --measure ist die Lesebreite fuer Lauftext: mehr als ~70 Zeichen je Zeile
     laesst das Auge die naechste Zeile nicht mehr finden. Die Rechtsseiten leben davon. */
  --seite-max:  72rem;
  --measure:    68ch;
  --rand:       var(--space-4);   /* Seitenrand, nie kleiner: 16px Mindestgutter */

  /* Rollen auf der Indigo-Leiter des Fundaments. Dieselbe Technik wie bei --fs-*: die
     Seite erfindet keinen Wert, sie gibt vorhandenen Stufen einen Namen.

     Die Leiter hat elf Stufen; bis zum 2026-10-13 benutzte die Seite genau zwei
     (--accent = indigo-800 als Flaeche, --accent-veil = indigo-100 als Schleier). Alles
     dazwischen und darueber lag brach, und genau daher kam die Flachheit: eine Seite mit
     zwei Tiefen hat keine.

     ⚠ KANDIDATEN FUER brand/, noch nicht dort. Sobald eine zweite Oberflaeche eine tiefe
     Flaeche braucht, gehoeren die beiden Rollen ins Fundament, so wie --step-5 bis -7 am
     2026-10-13 dorthin gewandert sind. Bis dahin liest sie niemand sonst. */
  --flaeche-tief:     var(--c-indigo-950);
  --flaeche-tief-ink: var(--c-n-0);

  /* Seitenverhaeltnisse der Bildplaetze. Zwei genuegen: quer fuer Szenen, hoch fuer
     Portraits und Geraete. Ein drittes Mass erzeugt nur Unruhe. */
  --bild-quer: 3 / 2;
  --bild-hoch: 4 / 5;
  /* Das Mass der generierten Vorlagen (1408x768). Eigenes Verhaeltnis statt Beschnitt:
     wer ein 11:6-Bild in einen 3:2-Rahmen zwingt, schneidet links und rechts weg, und
     bei einer Buehne mit Publikum ist genau das der Bildinhalt. */
  --bild-breit: 16 / 9;
}

@media (min-width: 40rem) {
  :root { --rand: var(--space-6); }
}

/* ⚠ Die tiefe Flaeche braucht im Dunkelmodus einen ANDEREN Wert, nicht denselben.
   Hell ist sie die dunkelste Flaeche der Seite (indigo-950 gegen eine helle Umgebung).
   Dunkel waere derselbe Wert sinnlos: --surface steht dort schon auf n-900, und zwei
   nahezu schwarze Flaechen nebeneinander sind keine zwei Flaechen. Gemessen am
   2026-10-13: das Band verschwand im Grund, und der Knopf darauf gleich mit.

   Richtig ist die Rolle, nicht der Wert: „die am staerksten gesaettigte Flaeche der
   Seite". Dunkel ist das indigo-900 gegen das neutrale n-900 der Umgebung, also blau
   gegen grau statt dunkel gegen hell.

   Doppelt gefuehrt wie in brand/tokens.css: prefers-color-scheme folgt dem System,
   [data-theme] erlaubt die ausdrueckliche Wahl. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --flaeche-tief:     var(--c-indigo-900);
    --flaeche-tief-ink: var(--c-n-0);
  }
}
:root[data-theme="dark"] {
  --flaeche-tief:     var(--c-indigo-900);
  --flaeche-tief-ink: var(--c-n-0);
}

/* ===== Grundlagen ================================================================== */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, table { margin: 0; }

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

:is(a, button, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}

img, svg { max-width: 100%; height: auto; }

/* Sprungmarke: sichtbar nur mit Tastatur. */
.sprung {
  position: absolute;
  left: var(--rand);
  top: var(--space-2);
  z-index: 10;
  transform: translateY(-200%);
  background: var(--surface-raised);
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sprung:focus { transform: translateY(0); }

/* ===== Kopfzeile ===================================================================
 * --topbar-bg ist var(--accent): die Kopfzeile IST eine Markenflaeche (components.md
 * §Kopfzeile). Darum verschmilzt sie mit dem Hero darunter zu einem Block ab der
 * Oberkante, statt eine helle Leiste darueber zu setzen. */

.kopfzeile {
  background: var(--topbar-bg);
  color: var(--topbar-ink);
}

.kopfzeile__innen {
  max-width: var(--seite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--topbar-gap);
  padding-block: var(--space-2);
}

/* Das Zeichen steht inline im Markup und erbt ueber currentColor die --topbar-ink.
   Zwei Zeichen liegen da, sichtbar ist immer nur eines: das volle Logo braucht Breite,
   die enge Kopfzeile auf dem Telefon traegt das Logo-Icon. Dasselbe Muster wie im
   Kunden-Portal. */
.kopfzeile__marke { display: inline-flex; align-items: center; color: var(--topbar-ink); }
.kopfzeile__marke svg { display: block; width: auto; }
.marke-logo svg { height: var(--topbar-logo-height); }
.marke-icon svg { height: var(--topbar-icon-height); }
.marke-icon { display: none; }

@media (max-width: 30rem) {
  .marke-logo { display: none; }
  .marke-icon { display: inline-flex; }
}

.nav { margin-inline-start: auto; }
.nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--nav-item-gap);
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min);
  padding-inline: var(--nav-item-pad-x);
  border-radius: var(--nav-item-radius);
  color: var(--topbar-ink);
  font-size: var(--nav-size);
  text-decoration: none;
}
.nav a:hover { color: var(--topbar-ink); text-decoration: underline; }
.nav a[aria-current="page"] { font-weight: var(--nav-current-weight); text-decoration: underline; }
.kopfzeile :is(a):focus-visible { outline-color: var(--focus-ring-color-on-accent); }

/* ===== Flaechen und Abschnitte ====================================================== */

.band { padding-block: var(--gap-section); }
.band__innen {
  max-width: var(--seite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
}

/* Markenflaeche: dieselben Werte wie die Kopfzeile, deshalb schliesst sie ohne Kante an. */
.band--marke { background: var(--accent); color: var(--accent-ink); padding-block-start: var(--space-5); }
.band--marke a { color: var(--accent-ink); }

/* Gedaempfte Markenflaeche. Traegt --ink als Text, nicht --accent-ink: die Flaeche ist
   leise, nicht gesaettigt. */
.band--schleier { background: var(--accent-veil); color: var(--ink); }

/* Logo-Icon als Flaeche (components.md §Logo-Icon als Flaeche): hoechstens EINE je Seite,
   nie zusammen mit dem Logo auf derselben Flaeche, und --ink-faint darf nicht darueber
   stehen.
   ⚠ Die Fuellung ist --accent-veil, deshalb darf die tragende Flaeche NICHT ebenfalls
   --accent-veil sein: dann malt das Zeichen in der Farbe des Grundes und ist unsichtbar.
   Es gehoert auf --surface oder --surface-raised. */
.band--zeichen {
  position: relative;
  overflow: hidden;
  /* Absoluter Pfad, weil eine relative URL in einer Custom Property gegen das DOKUMENT
     aufgeloest wird, nicht gegen die CSS-Datei (components.md §Fallstricke). */
  --watermark-image: url("/brand/logo/mipla-icon-mono.svg");
}
.band--zeichen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--watermark-fill);
  mask-image: var(--watermark-image);
  mask-size: auto var(--watermark-size);
  mask-position: var(--watermark-position);
  mask-repeat: no-repeat;
  pointer-events: none;
}
.band--zeichen > * { position: relative; }

.band--sunken { background: var(--surface-sunken); }

/* Abstand zwischen den direkten Kindern einer Flaeche. Ohne diese Regel klebt ein
   Textblock unmittelbar an der Tabelle darueber: `.tabelle-rahmen` bringt keinen
   Rand mit, und `.textblock` ist ein Grid, dessen `gap` nur INNEN wirkt. Auf
   /hosting stand der Satz „In jedem Paket inbegriffen" deshalb ohne Luft an der
   letzten Tabellenzeile.

   Nur zwischen Geschwistern (`* + *`), damit das erste Element nicht zusaetzlich
   einrueckt. Vor einem Abschnittstitel das groessere Mass: eine Ueberschrift
   braucht mehr Luft davor als danach, sonst liest sie sich als Teil des
   vorangehenden Absatzes. Beide Werte kommen aus dem Fundament. */
.band__innen > * + * { margin-block-start: var(--gap-block); }
.band__innen > * + .abschnitt-titel { margin-block-start: var(--gap-section); }

/* Tiefe Flaeche. Der Gegenpol zum Hero: derselbe Farbton, zwei Stufen dunkler. Sie
   schliesst eine Seite ab, genau EINMAL je Seite, und traegt dort den Handlungsaufruf.
   Zwei Flaechen derselben Farbe auf einer Seite heben einander auf. */
.band--tief {
  background: var(--flaeche-tief);
  color: var(--flaeche-tief-ink);
}
.band--tief a { color: var(--flaeche-tief-ink); }
.band--tief .knopf--auf-marke {
  --btn-on-accent-ink:    var(--flaeche-tief-ink);
  --btn-on-accent-border: var(--flaeche-tief-ink);
}
.band--tief :is(h1, h2, h3) { color: inherit; }
.band--tief .textblock p { color: inherit; }

/* Markenkante. Die Diagonale des Zeichens als Kante zwischen zwei Flaechen, statt der
   waagrechten Stosskante. Das „M" der Wortmarke ist aus Schraegen gebaut; das ist die
   einzige geometrische Idee der Marke, und sie traegt hier die Struktur, statt nur als
   Wasserzeichen zu dekorieren.

   Die Kante gehoert der OBEREN Flaeche und ragt nach unten. Der Winkel ist flach: eine
   steile Diagonale frisst auf dem Telefon die halbe Hoehe. */
.kante-unten { position: relative; padding-block-end: calc(var(--gap-section) + 3vw); }
.kante-unten::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;            /* -1px, sonst blitzt bei fraktionalem Zoom eine Linie */
  block-size: 3vw;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

/* Paar: Text und Nebenstehendes. Loest die leere rechte Haelfte der Unterseiten. Unter
   60rem untereinander, darueber nebeneinander; der Text behaelt seine Lesebreite, das
   Nebenstehende bekommt den Rest.

   ⚠ `min-width: 0` auf beiden Spalten: Grid-Elemente haben `min-width: auto`, und ein
   langes Wort oder eine breite Tabelle sprengt sonst die Spalte statt umzubrechen. */
.paar { display: grid; gap: var(--gap-section); align-items: start; }
.paar > * { min-inline-size: 0; }
.paar > .textblock { max-inline-size: none; }

@media (min-width: 60rem) {
  .paar { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gap-section); }
  .paar--schmal { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .paar > .textblock { max-inline-size: var(--measure); }
  /* Bild zuerst im Markup, optisch rechts: so steht im Quelltext und fuer den
     Screenreader der Text vor der Abbildung, und die Reihenfolge stimmt trotzdem. */
  .paar--bild-links > .bild { order: -1; }
}

/* Bildplatz. Zwei Teile, und die Trennung ist nicht kosmetisch: `.bild__rahmen` traegt
   Seitenverhaeltnis und Beschnitt, `.bild` ist nur die Figur mit ihrer Bildunterschrift.

   ⚠ Beides zusammen auf `figure` zu legen, kostet die Bildunterschrift. Genau das war die
     erste Fassung am 2026-10-14: `aspect-ratio` plus `overflow: hidden` auf `.bild`
     schnitten die `<figcaption>` lautlos weg. Sie stand im Markup, im Quelltext und im
     Vorlesemodus, nur sehen konnte sie niemand. Bei einem Herkunftshinweis, der stimmen
     MUSS, ist das die teuerste Art von Fehler: die Seite sieht fertig aus und sagt die
     Aussage nicht mehr.

   Das Seitenverhaeltnis steht VOR dem Laden fest, sonst springt das Layout, wenn das Bild
   ankommt (Core Web Vitals, CLS). */
.bild { margin: 0; }
.bild__rahmen {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: var(--bild-quer);
  background: var(--surface-sunken);
  /* Deckel gegen den Ausreisser: in einer breiten Spalte wuerde ein Hochformat sonst
     ueber 40rem hoch und laesst den Text daneben wie eine Fussnote aussehen. Greift der
     Deckel, wird der Ausschnitt breiter als das Verhaeltnis; `object-fit: cover`
     schneidet, und das ist der richtige Ausgang. */
  max-block-size: 30rem;
}
.bild--hoch .bild__rahmen { aspect-ratio: var(--bild-hoch); }
.bild--breit .bild__rahmen { aspect-ratio: var(--bild-breit); }
.bild img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
/* Der Herkunftshinweis unter dem Bild. Klein und zurueckhaltend, aber lesbar: er traegt
   eine Aussage, die stimmen muss, und darf deshalb nicht im Grund verschwinden.

   ⚠ NICHT --ink-faint. Gemessen am 2026-10-14: n-500 kommt auf der Schleier-Flaeche
     (indigo-100) nur auf 4.26:1 und faellt damit unter AA. --ink-soft haelt auf allen vier
     Flaechen dieser Seite mindestens 5.87:1. Die Zurueckhaltung kommt aus der Groesse, nicht
     aus einem schwachen Kontrast. */
.bild figcaption {
  margin-block-start: var(--space-2);
  font-size: var(--fs-hinweis);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
  max-inline-size: var(--measure);
}
.band--tief .bild figcaption,
.band--marke .bild figcaption { color: inherit; opacity: .8; }

/* Fakten: wenige echte Zahlen aus dem Text, nebeneinander. Kein Schmuck, sondern die
   Angaben, die ein Kunde sucht, aus dem Fliesstext herausgehoben. Tabellenziffern, damit
   die Zahlen untereinander auf derselben Breite stehen. */
.fakten {
  display: grid;
  gap: var(--gap-block);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.fakt__zahl {
  font-size: var(--fs-h1);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  font-variant-numeric: var(--numeric-tabular);
}
.fakt__wort { color: var(--ink-soft); }
.band--tief .fakt__wort { color: inherit; opacity: .85; }

/* Schlagworte: eine lange Aufzaehlung, die als Liste tot daliegt, aber als Feld lesbar
   wird. Bleibt eine <ul>, damit die Bedeutung erhalten bleibt. */
.schlagworte {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.schlagworte li {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-small);
}

/* Gegenueber: zwei Spalten, die einander widersprechen sollen („was dazugehoert" gegen
   „was ich nicht mache"). Der Kontrast IST der Inhalt, deshalb nebeneinander. */
.gegenueber { display: grid; gap: var(--gap-section); }
@media (min-width: 48rem) {
  .gegenueber { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gegenueber > * { max-inline-size: none; }

/* ===== Hero ========================================================================= */

.hero { display: grid; gap: var(--gap-block); }
.hero h1 { font-size: var(--fs-display); }
.hero__lead { font-size: var(--fs-lead); max-width: var(--measure); }
.hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  align-items: center;
}

/* ===== Knopf ======================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-min-height);
  padding-inline: var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: var(--btn-border-width) solid transparent;
  font: inherit;
  font-weight: var(--btn-weight);
  text-decoration: none;
  cursor: pointer;
}
.knopf:active { transform: translateY(var(--btn-active-shift)); }

.knopf--primaer {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  border-color: var(--btn-primary-border);
}
.knopf--primaer:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-ink); }

.knopf--sekundaer {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-ink);
  border-color: var(--btn-secondary-border);
}
.knopf--sekundaer:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-ink); }

/* Auf einer Markenflaeche: Umriss statt Fuellung, Werte aus components.css. */
.knopf--auf-marke {
  background: var(--btn-on-accent-bg);
  color: var(--btn-on-accent-ink);
  border-color: var(--btn-on-accent-border);
}
.knopf--auf-marke:hover { background: var(--btn-on-accent-bg-hover); color: var(--btn-on-accent-ink); }

/* ===== Karten: die vier Bereiche ==================================================== */

.bereiche {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.karte {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--pad-comfort);
}
.karte h2, .karte h3 { font-size: var(--fs-h3); }
.karte p { color: var(--ink-soft); }
.karte__mehr { margin-block-start: auto; font-weight: var(--weight-medium); }

/* Die vier Bereiche sind gleichwertig (Entscheid 2026-09-18): gleiche Flaeche, gleiche
   Schriftgroesse, keine Hervorhebung einer Kachel. Wer das aendert, kippt den Entscheid. */

/* ===== Lauftext ===================================================================== */

.textblock { display: grid; gap: var(--gap-block); max-width: var(--measure); }
.textblock h2 { font-size: var(--fs-h2); }
.textblock h3 { font-size: var(--fs-h3); }
.textblock > * + h2 { margin-block-start: var(--space-4); }
.textblock ul, .textblock ol { padding-inline-start: var(--space-5); }
.textblock li + li { margin-block-start: var(--space-2); }

.abschnitt-titel { font-size: var(--fs-h1); margin-block-end: var(--gap-block); }
/* Im Textblock sorgt bereits der gap fuer den Abstand; die Marge waere der zweite. */
.textblock .abschnitt-titel { margin-block-end: 0; }

/* Dreiteilige Begruendungsreihe auf der Startseite. */
.gruende {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--gap-group);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.gruende h3 { font-size: var(--fs-h3); margin-block-end: var(--space-2); }
.gruende p { color: var(--ink-soft); }

/* ===== Schritte: numerierte Ablaeufe ================================================ */

.schritte { counter-reset: schritt; list-style: none; padding: 0; display: grid; gap: var(--gap-group); }
.schritte > li { counter-increment: schritt; display: grid; grid-template-columns: auto 1fr; gap: var(--gap-group); }
.schritte > li::before {
  content: counter(schritt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

/* ===== Tabellen: Preise, und die Staffel in den AGB ================================= */

.tabelle-rahmen { overflow-x: auto; }

table {
  border-collapse: collapse;
  inline-size: 100%;
  font-size: var(--table-size);
  line-height: var(--table-line-height);
}
thead th {
  background: var(--table-head-bg);
  color: var(--table-head-ink);
  font-weight: var(--table-head-weight);
  font-size: var(--table-head-size);
  letter-spacing: var(--table-head-tracking);
  text-align: start;
  border-block-end: 1px solid var(--table-head-edge);
}
th, td { padding: var(--table-pad-y) var(--table-pad-x); }
tbody tr + tr th, tbody tr + tr td { border-block-start: 1px solid var(--table-row-line); }
td.zahl, th.zahl { text-align: end; font-variant-numeric: var(--table-numeric); }
tbody th { text-align: start; font-weight: var(--weight-medium); }

.preis { font-weight: var(--weight-bold); white-space: nowrap; }

/* ===== Rechtsseiten ================================================================= */
/* Lange, dichte Texte. Die Klausel-Nummer steht in der Marge, damit sie zitierbar bleibt
   und der Lauftext trotzdem an einer Kante beginnt. */

.recht { max-width: var(--measure); display: grid; gap: var(--gap-block); }
.recht h2 { font-size: var(--fs-h2); margin-block-start: var(--space-5); }
.recht h3 { font-size: var(--fs-h3); margin-block-start: var(--space-4); }
.recht__fassung { color: var(--ink-soft); font-size: var(--fs-small); }

.klausel { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-3); }
.klausel__nr { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.klausel strong { font-weight: var(--weight-bold); }

@media (max-width: 30rem) {
  .klausel { grid-template-columns: 1fr; gap: var(--space-1); }
  .klausel__nr { font-weight: var(--weight-medium); color: var(--ink); }
}

/* ===== Offene Stelle im Entwurf ====================================================
 * <mark> ist hier KEIN Lesezeichen, sondern eine Baustelle: eine Angabe, die noch fehlt.
 * Sie muss im Entwurf auffallen und darf nie unbemerkt live gehen; build.py zaehlt sie.
 * Der Standard-Gelbton des Browsers waere ein Farbwert ausserhalb der Marke, deshalb die
 * Zustandsrollen aus tokens.css. */

mark {
  background: var(--state-warn-tint);
  color: var(--state-warn);
  border: 1px solid var(--state-warn-area);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  font-size: var(--fs-small);
}

/* ===== Fusszeile ==================================================================== */

.fusszeile {
  border-block-start: 1px solid var(--divider-strong);
  padding-block: var(--gap-block);
  margin-block-start: var(--gap-section);
  font-size: var(--fs-small);
}
.fusszeile__innen {
  max-width: var(--seite-max);
  margin-inline: auto;
  padding-inline: var(--rand);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-group);
  justify-content: space-between;
  align-items: center;
}
.fusszeile__absender { color: var(--ink-soft); }
.fusszeile__links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap-group); }

/* ===== Bewegung ======================================================================
 *
 * Entscheid Michael 2026-10-13: Parallax und Ueberblendungen. Umgesetzt **ohne eine Zeile
 * JavaScript**, ueber scroll-gesteuerte Animationen (`animation-timeline`). Das ist hier
 * nicht Sparsamkeit, sondern Haltung: die Seite hat kein Skript, setzt kein Cookie und
 * fragt keinen fremden Host; ein Parallax-Skript haette alle drei Aussagen gekostet, und
 * genau so stehen sie in der Datenschutzerklaerung.
 *
 * ⚠ ES BEWEGT SICH NUR, WAS NICHTS TRAEGT. Die erste Fassung dieser Datei blendete sechs
 *   Element-Arten je Seite von `opacity: 0` ein. Das hatte zwei Fehler, und beide sind
 *   teuer:
 *
 *   1. **Inhalt, der nicht da ist, wenn niemand scrollt.** Gemessen am 2026-10-13: die
 *      drei Karten unter „Was Sie am Ende bekommen" standen in der Ganzseiten-Aufnahme
 *      auf `opacity: 0`. Im Browser erscheinen sie beim Scrollen, in jedem Beleg, in
 *      jedem Druck und in jeder Vorschau fehlen sie. Eine Seite, deren Inhalt von einer
 *      Scroll-Position abhaengt, ist kaputt, auch wenn sie sich gut anfuehlt.
 *   2. **Es ist das generische Muster.** Dieselbe Einblendung auf jedem Abschnitt ist
 *      der Vorgabe-Effekt, den jede Seite hat.
 *
 *   Deshalb bewegt sich hier nur noch, was reine Flaeche ist: das Wasserzeichen und die
 *   Bilder in ihrem Rahmen. Faellt die Bewegung aus, fehlt kein Wort.
 *
 * ⚠ `prefers-reduced-motion` schaltet alles ab. Bewegung am Bildlauf trifft genau die
 *   Menschen, die diese Einstellung setzen. Die Belege werden deshalb mit `reduce`
 *   aufgenommen (tools/shoot.py): dann ist die Aufnahme wiederholbar.
 */

/* Die Ueberblendung zwischen den Flaechen. Sie liegt im Uebergang selbst, nicht auf dem
   Inhalt: die Markenflaeche loest sich nach unten in die helle Flaeche auf, statt an ihr
   abzubrechen. Zusammen mit der Diagonale der `kante-unten` ist das der Uebergang, und er
   braucht keine Animation, um zu wirken. */
.band--marke.kante-unten::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 40%;
  background: linear-gradient(to bottom, transparent, var(--flaeche-tief));
  opacity: .55;
  pointer-events: none;
}
.band--marke.kante-unten > * { position: relative; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Das Wasserzeichen laeuft langsamer als die Seite. Das IST der Parallax-Effekt:
       zwei Ebenen, zwei Geschwindigkeiten. Er sitzt auf dem Markenzeichen und nicht auf
       dem Text, denn Text, der sich gegen den Bildlauf bewegt, liest sich schlecht. */
    .band--zeichen::before {
      animation: zeichen-versatz linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* Bilder wandern in ihrem Rahmen. Der Rahmen schneidet (`overflow: hidden`), das Bild
       ist hoeher als sein Platz. Faellt die Animation aus, sitzt das Bild am oberen Rand
       seines Rahmens, und das ist ein gueltiger Bildausschnitt, kein Fehler. */
    .bild img {
      block-size: 118%;
      animation: bild-versatz linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes zeichen-versatz {
  from { transform: translateY(8%); }
  to   { transform: translateY(-8%); }
}

@keyframes bild-versatz {
  from { transform: translateY(0); }
  to   { transform: translateY(-15%); }
}

/* ===== Formular =====================================================================
 *
 * Das Kontaktformular. Kein Skript, kein Cookie, kein fremder Dienst: die Seite sagt das
 * in der Datenschutzerklaerung zu, und das Formular ist die einzige Stelle, an der diese
 * Zusage brechen koennte.
 *
 * Eigene Breite, NICHT --measure. Das ist die Lesebreite fuer Lauftext, und ein Formular
 * ist kein Lauftext: es wird nicht gelesen, sondern ausgefuellt. Bei 68ch werden die
 * Eingabefelder so schmal, dass eine laengere E-Mail-Adresse im Feld wandert.
 */
.formular {
  --formular-breite: 42rem;
  display: grid;
  gap: var(--gap-block) var(--space-5);
  max-inline-size: var(--formular-breite);
}

/* Zwei Spalten erst, wenn beide Felder brauchbar breit bleiben. Darunter untereinander;
   ein Eingabefeld unter etwa 14rem ist auf dem Telefon unangenehm.

   ⚠ Die Zeilen sind gesetzt, nicht `auto-fit`. Mit `auto-fit` landete „Telefon" allein in
     der linken Spalte und liess die rechte leer, und eine leere Rasterzelle neben einem
     Feld sieht aus wie ein vergessenes Feld. Name und Nachricht nehmen die ganze Breite,
     E-Mail und Telefon teilen sie sich: zwei Kontaktwege nebeneinander, das liest sich
     als Paar. */
@media (min-width: 34rem) {
  .formular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formular__feld--breit,
  .formular__fuss,
  .formular__hinweis { grid-column: 1 / -1; }
}

.formular__feld { display: grid; gap: var(--space-2); margin: 0; }
.formular__fuss,
.formular__hinweis { margin: 0; }

.formular label {
  font-weight: var(--weight-medium);
  line-height: var(--lh-tight);
}
.formular__pflicht { color: var(--state-critical); }

.formular :is(input, textarea) {
  font: inherit;
  color: var(--ink);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-block-size: 2.75rem;        /* 44px, das Mindestmass fuer einen Treffer mit dem Finger */
  inline-size: 100%;
  transition: border-color 150ms ease-out;
}
.formular :is(input, textarea):hover { border-color: var(--ink-faint); }
.formular textarea { min-block-size: 11rem; resize: vertical; }
.formular :is(input, textarea):focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
}

/* Der Knopf traegt die ganze Breite erst auf dem Telefon: dort ist er das Ziel, auf das
   der Daumen faellt. Auf dem Schreibtisch waere ein Knopf ueber 42rem Breite albern. */
.formular__fuss { margin-block-start: var(--space-2); }
.formular__fuss .knopf { inline-size: 100%; justify-content: center; }
@media (min-width: 34rem) {
  .formular__fuss .knopf { inline-size: auto; }
}

.formular__hinweis {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}

/* ⚠ Der Honigtopf darf NICHT `display: none` sein. Manche Roboter lesen das und lassen
   das Feld dann in Ruhe; dann faengt die Falle nichts. Er wird stattdessen auf einen
   Punkt zusammengezogen, weggeschnitten und aus dem Vorlesebaum genommen (`aria-hidden`
   im Markup), bleibt aber ein ganz normales Eingabefeld.

   Am 2026-10-15 nachgemessen: der Behaelter ist 1x1 px, `clip-path: inset(50%)` schneidet
   auch den weg, und ein Klick auf die Stelle trifft das Feld nicht. Fuer einen Menschen
   gibt es dieses Feld nicht. */
.formular__topf {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}