/* ══════════════════════════════════════════════════════════════════════════
   seite.css — gemeinsames Geruest fuer die Inhaltsseiten
   ──────────────────────────────────────────────────────────────────────────
   ANLASS (SEO-Audit 2026-09): Bis hierher brachte JEDE Seite ihr komplettes CSS
   selbst mit — index.html 447 Zeilen, legal.html 92, kuendigung.html 43. Bei sechs
   neuen Seiten waeren das sechs Kopien desselben Kopf-/Fuss-Geruests gewesen.

   Genau daran ist das Projekt schon einmal haengengeblieben: `MK-1` beschreibt, wie
   bei der Wortmarke "SECHS Fassungen zum Vorschein kamen, die alle voneinander
   abwichen". Eine Kopie ist bequem, sechs sind eine Drift-Quelle.

   WAS HIER NICHT DRINSTEHT — und warum:
   `tokens.css` ist bereits ein vollstaendiges Designsystem und liefert `.wrap`,
   `.btn` (+ -primary/-secondary/-brass/-ghost/-sm/-lg/-block), `.card`, `.chip`,
   `.badge`, die `.t-*`-Typografieklassen und `.ico`. Das wird hier NICHT wiederholt.
   Wer eine Schaltflaeche braucht, nimmt `.btn` — keine eigene Regel.

   DS-1 gilt: Radien ueber --r-*, Kleinlabels ueber --fs-label/--ls-label,
   Abstaende ueber --s1…--s10. Kein fester px-Wert an diesen Stellen.

   ⚠️ index.html nutzt diese Datei (noch) NICHT. Sie ist die am dichtesten getestete
   Datei des Projekts (Design-Audit, DES-2, DES-4, axe) — sie hierher zu ziehen ist
   ein eigener, abgesicherter Schritt und kein Nebenbei.
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font); background: var(--paper); color: var(--ink);
  font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* Skip-Link: sichtbar nur bei Tastaturfokus (WCAG 2.4.1) — Fassung aus index.html. */
.skip-nav {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: var(--on-navy);
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r) 0;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none;
}
.skip-nav:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brass); outline-offset: 3px; border-radius: var(--r-xs);
}

/* ── Kopf ───────────────────────────────────────────────────────────────────
   Achtung fuer neue Seiten: Die Navigation der Startseite arbeitet mit Ankern
   (#preise, #wie). Auf Unterseiten fuehren die ins Leere — hier stehen deshalb
   ausschliesslich absolute Ziele. */
.hdr { position: sticky; top: 0; z-index: 100; background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr-in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  height: 68px; display: flex; align-items: center; gap: var(--s7);
}
.logo { text-decoration: none; display: flex; align-items: baseline; gap: 1px; flex-shrink: 0; }
.logo .logo-lume, .logo .logo-dent { font-size: 25px; }

.nav { display: flex; align-items: center; gap: var(--s5); margin-right: auto; }
.nav a {
  text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2);
  padding: 6px 2px; border-bottom: 1.5px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--brass); }
/* Die Seite, auf der man gerade steht, ist markiert — sonst ist die Navigation
   auf Unterseiten orientierungslos. */
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); }

.hdr-r { display: flex; align-items: center; gap: var(--s4); flex-shrink: 0; }
.hdr-login { text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-2); }
.hdr-login:hover { color: var(--ink); }

/* ── Seitenkopf einer Inhaltsseite ──────────────────────────────────────────
   ÜBERARBEITET 2026-09-04 nach Rueckmeldung des Betreibers ("wie so'n Block").
   Der erste Entwurf war eine schmale Textspalte (68ch) in einem 1200px breiten
   Behaelter: alles klebte links, rechts blieb ueber die halbe Seite tote Flaeche.
   Das ist kein Geschmacksurteil, das ist eine unfertige Komposition.
   Sie folgt jetzt der Landing (.hero-grid dort): Text links, ein TRAGENDES Element
   rechts. Das Verhaeltnis 1.06fr/0.94fr ist von dort uebernommen, nicht geraten. */
.s-kopf { padding: var(--s8) 0 var(--s8); border-bottom: 1px solid var(--line); }
.s-kopf-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: var(--s8); align-items: center; }
.s-kopf .krumen { margin-bottom: var(--s5); }

/* ── Die zwei Marker der Marke ───────────────────────────────────────────────
   KORRIGIERT 2026-09-06 (vom Betreiber gemeldet). Die Landing kennt ZWEI
   verschiedene Vorzeichen, und ich hatte sie vermischt:

     .hero-kicker  GRUENER Punkt (--ok-ink) — nur im Seitenkopf
     .kicker       MESSING-Strich 22x1 px — vor jedem Abschnitts-Label

   Mein erster Entwurf nahm den Klassennamen `.kicker` fuer den PUNKT und faerbte
   ihn golden. Damit hiess dieselbe Klasse auf Landing und Unterseiten etwas
   Verschiedenes, die Farbe stimmte nicht, und den Strich gab es gar nicht.
   Jetzt heisst der Punkt `.s-kicker`, und `.kicker` ist wortgleich zur Landing. */
.s-kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 12.5px; font-weight: var(--fw-medium); color: var(--ink-3);
  margin-bottom: var(--s4);
}
.s-kicker .dot { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--ok-ink); flex-shrink: 0; }
.s-kicker .sep { color: var(--line-2); }

/* Fassung aus index.html — der Strich vor Abschnitts-Labels. */
.kicker { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.kicker::before { content: ''; width: 22px; height: 1px; background: var(--brass); flex: none; }
/* Auf dunklem Grund die hellere Messingstufe, wie `.close` auf der Landing. */
.s-sec.anker .kicker::before { background: var(--brass-hi); }

.s-kopf h1 {
  font-size: clamp(30px, 3.2vw, 44px); font-weight: var(--fw-semi);
  line-height: var(--lh-tight); letter-spacing: var(--ls-display);
  color: var(--ink); overflow-wrap: break-word;
}
/* Der Messing-Schwung unter der letzten Wortgruppe. Fassung aus index.html —
   dasselbe Signaturdetail, damit die Unterseiten zur Marke gehoeren. */
.mark { position: relative; white-space: nowrap; }
.mark svg {
  position: absolute; left: -1%; right: -1%; bottom: -.19em;
  width: 102%; height: .24em; overflow: visible; color: var(--brass);
}
.s-kopf .vorspann {
  margin-top: var(--s6); font-size: var(--fs-lead); line-height: var(--lh-loose);
  color: var(--ink-2); max-width: 34em;
}
.s-kopf .kopf-ctas { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.s-kopf .trust {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-size: 13.5px; color: var(--ink-3); margin-top: var(--s5);
}
.s-kopf .trust .sep { width: 3px; height: 3px; border-radius: var(--r-pill); background: var(--line-2); }

/* Die rechte Spalte: eine Kurzfassung der Seite. Kein Fuellsel — sie beantwortet
   die Fragen, wegen derer jemand die Seite ueberhaupt geoeffnet hat, und macht
   den Kopf scanbar, bevor man liest. */
.kurz { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.kurz > .t-label { color: var(--ink-3); }
.kurz dl { display: flex; flex-direction: column; gap: 0; }
.kurz dl > div { display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: baseline; padding: var(--s3) 0; border-top: 1px solid var(--line); }
.kurz dl > div:first-of-type { border-top: none; padding-top: 0; }
.kurz dt { font-size: var(--fs-sm); color: var(--ink-2); }
.kurz dd { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.kurz dd.brass { color: var(--brass-ink); }

/* Brotkrumen — auch als BreadcrumbList ausgezeichnet, siehe JSON-LD je Seite. */
.krumen { font-size: var(--fs-sm); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.krumen a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid transparent; }
.krumen a:hover { color: var(--ink-2); border-bottom-color: var(--line-2); }
.krumen .trenn { color: var(--line-2); }

/* ── Abschnitte ─────────────────────────────────────────────────────────────
   Reine Layout-Regeln. Farben und Radien kommen aus den Tokens. */
.s-sec { padding: var(--s8) 0; border-bottom: 1px solid var(--line); }
.s-sec:last-of-type { border-bottom: none; }
.s-sec.ruhig { background: var(--paper-2); }
.s-sec.anker { background: var(--navy); color: var(--on-navy-2); border-bottom: none; }
.s-sec.anker h2, .s-sec.anker h3 { color: var(--on-navy); }
.s-sec.anker .t-label { color: var(--brass-hi); }

.s-sec h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-semi); line-height: var(--lh-head);
  letter-spacing: var(--ls-head); color: var(--ink); text-wrap: balance;
}
.s-sec h3 {
  font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-head);
  color: var(--ink); text-wrap: balance;
}

/* Zweispaltiger Abschnitt: Ueberschrift links, Text rechts.
   Loest dasselbe Problem wie oben im Kopf — ein 68ch-Textblock in einem 1200px
   breiten Behaelter laesst rechts eine tote Flaeche. Die Landing macht es mit
   .deep-grid genauso (1fr / 1.05fr); hier steht die Ueberschrift links etwas
   schmaler, damit der Fliesstext seine Lesebreite behaelt. */
.s-zwei { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s7) var(--s8); align-items: start; }
.s-zwei > .kopfspalte { display: flex; flex-direction: column; gap: var(--s3); }
.s-zwei > .kopfspalte h2 { max-width: 16ch; }

/* Fliesstext: Abstaende ueber den Fluss, nicht ueber Einzel-Margins (die
   kollabieren oder verdoppeln sich still). */
.fliess { display: flex; flex-direction: column; gap: var(--s4); max-width: 68ch; }
.fliess p { line-height: var(--lh-loose); color: var(--ink-2); }
.fliess strong { color: var(--ink); font-weight: var(--fw-semi); }
.fliess a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 3px; }
.fliess ul, .fliess ol { display: flex; flex-direction: column; gap: var(--s2); padding-left: 1.2em; color: var(--ink-2); }
.fliess li { line-height: var(--lh-body); }

.stapel   { display: flex; flex-direction: column; gap: var(--s6); }
.stapel-s { display: flex; flex-direction: column; gap: var(--s4); }
.reihe    { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* Kartenraster — Spaltenzahl setzt die Seite ueber --spalten. */
.raster { display: grid; grid-template-columns: repeat(var(--spalten, 3), 1fr); gap: var(--s5); }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .raster { grid-template-columns: 1fr; } }

/* Breite Inhalte scrollen in ihrem eigenen Behaelter — der Seitenkoerper nie. */
.scrollbar-x { overflow-x: auto; }

/* ── Fuss ───────────────────────────────────────────────────────────────────
   Wortgleich zur Startseite. Die Ueberschriften sind <h2>: nach einem <h2> im
   Inhalt waere ein <h5> eine uebersprungene Gliederungsebene (SEO-Audit 4.9.).
   Deshalb ausdrueckliche font-size- und margin-Werte — ein h2 erbt sonst --fs-h2. */
.foot { background: var(--navy); padding: var(--s7) 0 var(--s5); }
.foot-in { border-top: 1px solid var(--navy-3); padding-top: var(--s7); }
.foot-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); }
.foot-brand .logo { display: inline-flex; align-items: baseline; gap: 1px; text-decoration: none; margin-bottom: var(--s3); }
.foot-brand .logo-lume, .foot-brand .logo-dent { font-size: 23px; }
.foot-brand .logo-dent { color: var(--on-navy); }
.foot-brand p { font-size: var(--fs-sm); color: var(--on-navy-3); max-width: 30ch; }
.foot-brand address { font-style: normal; font-size: var(--fs-xs); color: var(--on-navy-3); margin-top: var(--s4); line-height: 1.6; }
.foot-col h2 {
  font-size: var(--fs-label); font-weight: var(--fw-semi); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--brass-hi); margin: 0 0 var(--s3); line-height: 1.4;
}
.foot-col a {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); color: var(--on-navy-2); text-decoration: none;
  padding: 4px 0; transition: color var(--dur) var(--ease);
}
.foot-col a:hover { color: var(--on-navy); }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  flex-wrap: wrap; margin-top: var(--s7); padding-top: var(--s4);
  border-top: 1px solid var(--navy-3);
  font-size: var(--fs-xs); color: var(--on-navy-3);
}

@media (max-width: 960px) {
  /* Beide Zweispalter fallen zusammen. Die Kurzfassung rutscht UNTER den Text —
     auf dem Handy will man zuerst wissen, worum es geht, nicht die Eckdaten. */
  .s-kopf-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .s-zwei { grid-template-columns: 1fr; gap: var(--s5); }
  .s-zwei > .kopfspalte h2 { max-width: none; }
}
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
  .nav { display: none; }
  .hdr-in { gap: var(--s4); height: 62px; }
  .hdr-r { gap: var(--s3); }
  .logo .logo-lume, .logo .logo-dent { font-size: 21px; }
  .hdr-r .btn-sm { padding: 8px 12px; font-size: 13px; }
  .s-kopf { padding: var(--s7) 0 var(--s7); }
  .s-sec { padding: var(--s7) 0; }
  .s-kopf h1 { font-size: clamp(28px, 7.4vw, 36px); }
  .s-kopf .kopf-ctas .btn { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .foot-top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Produktbilder ──────────────────────────────────────────────────────────
   Echte Screenshots aus der laufenden App (ueber den E2E-Auth-Mock aufgenommen),
   nicht nachgebaute Attrappen. Als WebP, im Browser selbst aus dem PNG gewandelt —
   34 KB statt 88 KB, ohne eine neue Abhaengigkeit ins Projekt zu holen.

   width/height stehen am <img>, damit der Platz VOR dem Laden reserviert ist:
   die Seiten haben heute CLS 0, und ein nachladendes Bild ohne Masse ist die
   haeufigste Art, das zu verlieren. */
.bild {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--paper); box-shadow: var(--sh-2);
  margin: 0;
}
.bild img { display: block; width: 100%; height: auto; }
.bild figcaption {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3); background: var(--paper-2);
}
/* Bild rechts, Text links — dieselbe Aufteilung wie .s-zwei, nur andersherum
   gewichtet, weil ein Screenshot Flaeche braucht. */
.s-bild { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--s7); align-items: center; }
@media (max-width: 960px) { .s-bild { grid-template-columns: 1fr; gap: var(--s5); } }

/* ── Frage-und-Antwort ──────────────────────────────────────────────────────
   Stand bisher nur in preise.html; /vor-ort-einrichtung setzte seine Fragen als
   h3 im Fliesstext. Zwei Darstellungen fuer dieselbe Sache auf einer Website —
   deshalb hier, einmal fuer alle. Wer eine FAQ ergaenzt, nimmt .frage.

   ⚠️ Google zeigt FAQ-Rich-Results nur, wenn die Fragen auch SICHTBAR auf der
   Seite stehen. Eine FAQPage-Auszeichnung ohne sichtbare Entsprechung ist ein
   Richtlinienverstoss — die JSON-LD-Bloecke und diese Abschnitte gehoeren also
   immer zusammen. */
.frage { border-top: 1px solid var(--line); padding: var(--s5) 0; display: flex; flex-direction: column; gap: var(--s2); }
.frage:last-child { border-bottom: 1px solid var(--line); }
.frage h3 { font-size: var(--fs-h4); font-weight: var(--fw-semi); color: var(--ink); }
.frage p { color: var(--ink-2); line-height: var(--lh-loose); max-width: 68ch; }

/* ── Tippflächen auf Touch-Geräten ──────────────────────────────────────────
   BEFUND (Abnahme 2026-09-06, auf iPhone und iPad gemessen): `Login` hatte 23 px,
   die kleinen Knöpfe 31–34 px. WCAG 2.2 nennt in 2.5.8 ein Mindestmaß von 24 px,
   empfohlen sind 44 px — der Login lag also sogar unter dem Minimum.

   Praxen arbeiten auf iPads. Ein 23-px-Ziel trifft man dort mit dem Finger nicht
   zuverlässig, und die Fehlversuche fallen niemandem auf, der mit der Maus testet.

   Nur unter `pointer: coarse`, damit am Desktop optisch nichts wandert: die Knöpfe
   behalten ihre Größe, es wächst allein die berührbare Fläche.

   ⚠️ index.html hat dieselben Werte (Login 23 px, btn-sm 31 px) und nutzt diese
   Datei NICHT. Dort muss es nachgezogen werden — das ist eine Änderung an der
   Landing und gehört dem Betreiber, nicht dieser Datei. */
@media (pointer: coarse) {
  .hdr-login,
  .btn-sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Der Fußbereich hat kleine Textlinks dicht untereinander — dort zählt der
     Abstand mehr als die Höhe des einzelnen Ziels. KT-20: 9 px Polster ergaben
     41 px; die Mindesthöhe schliesst die Lücke, ohne die Abstände zu verdoppeln. */
  .foot-col a { padding: 9px 0; min-height: 44px; }
  /* KT-20 (2026-09-13, gemessen 360–1024 px): Wortmarke 34 px, Navigation 36 px
     (sichtbar ab 861 px — iPad quer), Brotkrumen 24 px. Die Wortmarke wird mittig
     gesetzt statt auf der Grundlinie: beide Hälften haben dieselbe Schrift und Größe,
     sie stehen also weiterhin auf einer Linie. */
  .logo, .foot-brand .logo { min-height: 44px; align-items: center; }
  .nav a { padding-block: 11px; }
  /* Negativer Rand: die Tippfläche wächst, die Zeile nicht — der Seitenkopf
     behält seine Höhe. */
  .krumen a { padding-block: 11px; margin-block: -11px; }
}