/* @tillit-feld: css-anfang */
/* @tillit-reihenfolge: 20 */

/* ========================================
   TILLIT BASE (L1) — Grundverhalten

   Stand: im Backend noch NICHT uebertragen.
   Ziel-Feld: "CSS - Anfang", direkt nach
   tillit-tokens.css.

   Hier steht, was keiner Komponente gehoert,
   aber jede braucht: die Fokusring-Reparatur
   und das Schrift-Fundament der Gewichtsregel
   (Gate A, eingezogen 2026-08-26).
   ======================================== */

/* ---- FOKUSRING ----
   REPARATUR EINES STILLEN TOTALAUSFALLS (entschieden als E4).

   Das Werk setzt :focus-visible{outline:none !important}
   (styles.css:371) und malt stattdessen einen blauen Inset-Ring.
   Die TilliT-Regel (tillit-feldspiegel-alt.css, .tillit-page a:focus-visible)
   wollte einen dunklen Ring mit weissem Halo — ihr outline traegt
   aber kein !important und ist gegen das Werk seit jeher tot.
   Uebrig blieb der weisse Halo allein: auf weissem Grund unsichtbar.
   Ergebnis: Tastaturfokus auf den Designsystem-Seiten hatte KEIN
   sichtbares Signal. Die Einsicht stand laengst im Repo — der
   Kommentar an .tb-mosaic__link:focus-visible (bis 24.09.2026
   .sh-mosaic__link, Startseite) begruendet seine
   !important genau damit — sie war nur nie in die Basisregel
   zurueckgeflossen.

   DIE FORMEL ist die der Original-Regel, nicht neu erfunden:
   dunkler Ring + weisser Halo. Der Halo fuellt die Offset-Luecke
   und macht den Ring auf JEDEM Grund sichtbar — Weiss, Ink, Foto.

   :where() MIT ABSICHT: es haelt die Spezifitaet auf 0,2,0
   (.tb-page + :focus-visible). Dokumentierte Spezialringe der
   Seiten und des Kanons — .tb-mosaic__link mit seinem Inset-Ring,
   seit 24.09.2026 in tillit-system.css — liegen ebenfalls
   bei 0,2,0 mit !important und gewinnen ueber die Reihenfolge
   (Seiten-<style> und das Feld "CSS - Ende" laden nach dieser
   Datei). Ein :is() haette sie mit 0,2,1 ueberrollt.

   NUR outline TRAEGT !important — es ist das eine Property, das
   das Werk mit !important toetet. offset und box-shadow gewinnen
   regulaer (Werks-Blau liegt bei 0,1,0), und die alte Halo-Regel
   (0,2,1) setzt ohnehin dieselben Werte.

   summary steht schon in der Liste: die FAQ wechselt auf
   <details>/<summary> (P7).

   Der Skip-Link braucht die eigene Zeile: er steht im Markup vor
   .tb-page (er soll ja VOR dem Inhalt fokussierbar sein). */
/* [tabindex] seit 2026-09-04 in der Liste (Befund Gegenlesen der
   Ueber-uns-Seite): scrollbare Bildrollen und Fokusempfaenger wie der
   Rundgang-Rahmen tragen tabindex statt einer Rolle aus der Liste - sie
   bekamen deshalb den blauen Werksring (2px inset) statt des
   Systemrings, und auf Ink war er kaum zu sehen. */
/* HAUSRING seit 2026-09-29 (Entscheidung Max, Tokens in
   tillit-tokens.css): hier stand 3px Ink-1, im Werks-DOM und an allen
   Knoepfen 2px Ink - zwei Dicken fuer denselben Zustand. Jetzt die
   Tokens. Der Halo bleibt: er fuellt die Abstandsluecke und macht den
   Ink-Ring auf Ink-Sektionen und Fotos sichtbar; auf Weiss ist er
   nicht zu sehen, dort gleicht der Ring dem der Werksseiten. Die
   Ecken macht die Werksrundung (3px am Element, styles.css:371). */
.tb-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.tillit-skip-link:focus-visible {
  outline: var(--tb-focus-width, 2px) solid var(--tb-focus-color, #0f0f0f) !important;
  outline-offset: var(--tb-focus-offset, 3px);
  box-shadow: 0 0 0 var(--tb-focus-offset, 3px) rgba(255, 255, 255, 0.95);
}

/* ---- SCHRIFT-FUNDAMENT (Gate A, 2026-08-26) ----
   Der volle Gate-A-Reset, ersetzt die Vor-Gate-A-Fassung vom
   Flotten-Port. Vier Regeln, vier verschiedene Gegner:

   1 · SYNTHESE-VERBOT. Mit einem 400-only-Schnitt faelscht der
   Browser jedes angeforderte Fett >= 600 algorithmisch — die
   gekaufte Schrift wuerde genau dort verzerrt, wo sie
   Aufmerksamkeit traegt. Eine 500er-Anfrage wird dagegen NICHT
   synthetisiert (Font-Matching waehlt still den 400er) —
   gefaehrlich ist allein das ungebremste Fake-Fett, und genau
   das schaltet diese Regel ab. Font-Awesome-Regeln des Werks
   bleiben unberuehrt (eigene Familie mit echtem 900er). */
:root {
  font-synthesis: none;
  font-synthesis-weight: none;
}

/* 2 · DIE SANS-WURZEL. Bisher ERBTEN die Kanon-Seiten ihre
   Sans vom body — lokal aus local.css, im Shop aus dem
   Werks-CSS, beides Inter. Deshalb haette die lokale Vorschau
   einen Schriftwechsel nie gezeigt (der im Plan dokumentierte
   blinde Fleck, B4/Gate A). Ab hier ist die Familie explizit:
   alles unter .tb-page laeuft auf var(--tb-sans). Das
   Werks-DOM ausserhalb holt sich dieselbe Familie seit dem
   Schrift-Abschnitt in tillit-shop-dom.css (L2, laedt NACH
   dem Werk); diese Regel hier bleibt als Netz, falls das
   L2-Feld einmal fehlt. */
.tb-page {
  font-family: var(--tb-sans);
}

/* 3 · UEBERSCHRIFTEN-NEUTRALISIERER. Das Werk setzt
   h1-h6{font-family:"Inter";font-weight:700} (styles.css:2726)
   — BEIDES muss neutralisiert werden, sonst rendern
   Ueberschriften ohne Kanon-Klasse im Shop fett UND in Inter,
   und die Vorschau zeigt es nicht (local.css repliziert die
   Werksregel nicht). 0,1,0 schlaegt die Werks-0,0,1 unabhaengig
   von der Ladereihenfolge; :where() haelt die
   Ueberschriften-Rollen der Seiten frei. Die font-family-Achse
   waere ueber Regel 2 nur ERBSCHAFT — die Werks-Deklaration
   auf dem Element gewinnt gegen jede Erbschaft, deshalb steht
   die Familie hier noch einmal explizit. */
.tb-page :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tb-sans);
  font-weight: 400;
}

/* 4 · DIE AUFFANGREGEL fuer Fett-Ausweiser. strong, b, th, dt,
   caption sind ohne Regel fett (UA-Default >= 700) — mit
   Synthese-Verbot wuerden sie sonst je nach Fallback-Schnitt
   uneinheitlich rendern. "inherit" waehlt KEIN Gewicht, es
   raeumt nur den UA-Default ab. Betonung traegt kuenftig Farbe
   (--tb-ink-1 gegen den Fliesstext), nicht Gewicht — <strong>
   bleibt im Markup als Semantik fuer Maschinen (LLMO) stehen.
   BEWUSST UNGESCOPET (nicht .tb-page): die Regel muss auch
   CMS-Thementexte, Kategoriebeschreibungen und alte
   Produkttexte erreichen, die niemand mehr anfasst — jede
   bestehende Beschreibung im Shop rendert damit sofort richtig
   (Plan, Gate A, Regel 1). */
strong, b, th, dt, caption {
  font-weight: inherit;
  color: var(--tb-ink-1, #141414);
}

/* ---- ZEILENHOEHE (Systementscheidung, 2026-09-02) ----
   Das Werk setzt auf body/html KEINE Zeilenhoehe (styles.css:345 fuehrt
   nur margin, height, Familie, Grad, Farbe) - der Shop laeuft dort auf
   "normal", bei Systemia rund 1,2. Die Vorschau lief seit jeher auf 1.6,
   aber die Regel stand in local.css (kein-transfer) und waere nie im
   Shop angekommen: jede Abnahme des Designsystems - die Kanon-Bauteile
   fuehren 1.5/1.6/1.7 explizit, das Werks-DOM (Listen, Legenden, die
   Rechtstexte) erbt vom body - lief auf einem Wert, den der Shop nicht
   hatte. Gemessen am Login: Vorteilsliste 122,7px im Labor, 107,2px
   im Shop.
   Entscheidung Max 2026-09-02: die 1.6 ist gewollt und wird
   Systementscheidung - hier, im Feld "CSS - Anfang", also VOR dem
   Werk, das sie nicht antastet (kein Konkurrent auf body). Spezifitaet
   0,0,1; Seiten- und Bauteilregeln gewinnen wie bisher.
   BEWUSST UNGESCOPET wie die Auffangregel darueber: sie muss das ganze
   Werks-DOM erreichen, nicht nur .tb-page. */
body {
  line-height: 1.6;
}

/* ---- ZEILENFALL DER ABSAETZE (Detail-Audit F28, Max 24.09.2026) ----
   Kein Einzelwort allein in der letzten Zeile: pretty verteilt die
   Woerter der letzten Zeilen neu. Gemessen ueber alle 19 Kanonseiten,
   Absaetze ohne eigene text-wrap-Regel: 1440 von 28 auf 5, 414 von 23
   auf 3, 390 von 18 auf 1; die Zeilenzahl aendert sich bei 2 von 295.
   :where() haelt die Spezifitaet bei 0,0,1, damit jede Rollenregel
   gewinnt: balance (Hero-Text, Titel), nowrap und die schon gesetzten
   pretty-Rollen bleiben, wie sie sind. Firefox kennt pretty nicht und
   bricht wie bisher. Nur Kanonseiten (.tb-page), das Werks-DOM bleibt
   unberuehrt. */
:where(.tb-page) p {
  text-wrap: pretty;
}

/* ---- GRUNDRESETS DES KANONS (G1-Hebung, 2026-08-26) ----
   Standen byteidentisch inline auf Startseite und Beratungsprozess;
   die Flotte hatte sie NICHT — die dokumentierte Doppellinien-Panne
   der Flottenkarte war genau diese Folge (Kanonseiten-Audit B1/1).
   Bilder als Block ohne Zeilenluft, Links erben Farbe (die
   Unterstrich-Feder traegt die Auszeichnung), Listen nackt — die
   Aufzaehlung ist im System Typografie (Kreis-Badge), kein Marker.
   Spezifitaet 0,1,1: Seitenregeln gleicher Staerke gewinnen wie
   bisher ueber die Quelltextreihenfolge (Seiten-<style> laedt nach
   dieser Datei). */
.tb-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.tb-page a {
  color: inherit;
  text-decoration: none;
}

.tb-page ul,
.tb-page ol {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ---- SEITENHUELLE (umgezogen aus dem Feldspiegel, 07.09.2026) ----
   Der gemeinsame Rest ALLER Kanonseiten: der Skip-Link vor .tb-page
   und der Container, der jeden Sektionsinhalt fasst. Bis zum Umzug
   kamen beide aus tillit-feldspiegel-alt.css (ehem. tillit-feldspiegel-alt.css,
   Feld "CSS - Ende") - damit hing jede neue Seite am Spiegel des
   Altbestands. Werte 1:1 uebernommen, Reihenfolge bewusst frueher
   (Feld "CSS - Anfang", vor dem Werk): das Werk fuehrt keine
   tillit-Klassen, nichts dazwischen greift auf diese Selektoren.
   Der Fokusring des Skip-Links steht oben im Fokusring-Block.
   .tillit-page traegt keine eigene Regel - er ist der Scope-Haken der
   Seiten, seine Fokusregel im Spiegel war gegen das Werk tot (siehe
   Fokusring-Block). */
/* z-index 1003 seit 30.09.2026 (Go-live-Sweep): mit 300 lag der Link im
   Fokus unter USP-Band (1000) und Kopfzeile (1001), also unsichtbar.
   Jetzt ueber Band, Kopf und Hero-Specialarea/fixer Leiste (1002), unter
   Drawer-Scrim (10000), Drawer und Werks-Lightbox. */
.tillit-skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1003;
  padding: 0.85rem 1.15rem;
  border-radius: 999px;
  background: #ffffff;
  color: #222222;
  font-size: 0.85rem;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 0.2s ease;
}

.tillit-skip-link:focus-visible {
  transform: translateY(0);
}

/* INSEL (17.09.2026): das Mass ist --tb-col (tillit-tokens.css, INSEL UND
   BREITBILD), plus das Desktop-Polster von 2rem je Seite (unten), damit
   der INHALT exakt auf --tb-col steht und mit Werks-DOM-Rahmen, Footer
   und dem linken Hero-Text der Startseite fluchtet. Bis 17.09. stand
   hier 1600 - die einzige Kanonseiten-Kappe, waehrend Kopfzeile 1460,
   Footer 1480 und Werks-DOM 1400 fuhren; bei 1920 lagen die vier
   Inhaltskanten auf 188/244/254/260px. */
.tillit-container {
  max-width: calc(var(--tb-col) + 4rem);
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 480px) {
  .tillit-container {
    padding: 0 1.25rem;
  }
}

@media (min-width: 768px) {
  .tillit-container {
    padding: 0 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tillit-skip-link {
    transition: none;
  }
}