/* ============================================================
   Tirolstick — Haupt-Stylesheet
   Farben und Regeln nach Anhang A der Positionierung 2.0.

   Grundregel 60/30/10: rund 60 % weiße Fläche, 30 % Grau- und
   Textflächen, höchstens 10 % Rot. Rot erscheint ausschließlich
   als Akzent — auf Schaltflächen, Nähten, Kanten und einzelnen
   Hervorhebungen —, niemals als große Fläche.

   Bewusst kein dunkles Theme: Die Marke ist auf Weiß definiert.
   Ein dunkler Modus würde die 60/30/10-Regel aushebeln.
   ============================================================ */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Flächen */
  --ts-surface:      #FFFFFF;
  --ts-ground:       #F2F2F2;   /* Grau 100 — Infokästen, getönte Abschnitte */
  --ts-ground-warm:  #EEF0EA;   /* warme Alternative, greift das Lodengrün auf */
  --ts-deep:         #3E4B39;   /* Lodengrün — Fußbereich, dunkle Streifen */
  --ts-loden-soft:   #5A6B4F;   /* aufgehellt, für kleine Auszeichnungen */

  /* Schrift */
  --ts-ink:          #2B2B2B;   /* Fließtext           14,2:1 */
  --ts-ink-soft:     #58595B;   /* Grau 700, Sekundär   7,0:1 */
  --ts-ink-faint:    #767676;   /* Grau 500, Minimum    4,5:1 — darunter nie Text */
  --ts-ink-invert:   #FFFFFF;
  --ts-ink-invert-soft: #C7CEC1;   /* leicht ins Grüne gezogen, damit es
                                      auf dem Lodengrund nicht kalt wirkt */
  --ts-on-deep-soft: #B2BAAC;      /* Beschriftungen auf Lodengrün,
                                      Kontrast 4,7:1 — erfüllt WCAG AA */

  /* Marke */
  --ts-accent:       #C1272D;   /* Tirolstick-Rot        5,8:1 auf Weiß */
  --ts-accent-deep:  #9E1F24;   /* nur für Hover */
  --ts-on-accent:    #FFFFFF;   /* auf Rot steht ausschließlich Weiß */
  --ts-logo-red:     #C1272D;
  --ts-logo-grey:    #58595B;

  /* Linien */
  --ts-rule:         #D0D0D0;   /* Grau 300 — nie für Text */
  --ts-rule-soft:    #E4E4E4;

  /* Funktionsfarben — nur Formulare und Software, nie Werbemittel.
     Für „erledigt" bewusst das Lodengrün statt eines Signalgrüns:
     Ein leuchtendes Grün neben dem Markenrot wirkt weihnachtlich.
     Erfolg wird zusätzlich über ein Häkchen kenntlich gemacht, nicht
     allein über die Farbe. */
  --ts-ok:           #3E4B39;
  --ts-warn:         #B26B00;
  --ts-error:        #A11B1B;   /* dunkler als das Markenrot, damit Fehler
                                   nicht wie Markenelemente aussehen */

  --ts-shadow: 0 1px 2px rgba(43,43,43,.05), 0 10px 28px -14px rgba(43,43,43,.22);

  /* Schriftfamilien — keine Webfonts, Bauhaus 93 bleibt dem Logo vorbehalten */
  --ts-face-display: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ts-face-body:    "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ts-face-note:    Georgia, "Times New Roman", serif;
  --ts-face-label:   ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Maße */
  --ts-wrap:         1140px;
  --ts-wrap-narrow:  800px;
}

/* ---------- 2. Grundlagen ------------------------------------------------ */

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

body {
  margin: 0;
  background: var(--ts-surface);
  color: var(--ts-ink);
  font-family: var(--ts-face-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--ts-face-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
  color: var(--ts-ink);
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ts-accent);
  outline-offset: 3px;
}

.ts-wrap        { width: 100%; max-width: var(--ts-wrap); margin: 0 auto; padding: 0 1.5rem; }
.ts-wrap--narrow{ max-width: var(--ts-wrap-narrow); }

.ts-label {
  font-family: var(--ts-face-label);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ts-ink-faint);
  margin: 0;
}

/* Steppnaht — einziges dekoratives Motiv, aus dem Handwerk abgeleitet */
.ts-seam {
  height: 2px;
  background-image: repeating-linear-gradient(to right,
    currentColor 0 9px, transparent 9px 15px);
  color: var(--ts-accent);
}

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; width: 1px;
  margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal;
}

.ts-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ts-accent); color: var(--ts-on-accent);
  padding: .75rem 1.25rem; font-weight: 650; text-decoration: none;
}
.ts-skip-link:focus { left: 0; }

/* ---------- 3. Kopfbereich ----------------------------------------------- */

.ts-topbar {
  background: var(--ts-ground);
  border-bottom: 1px solid var(--ts-rule-soft);
  font-size: .875rem;
  color: var(--ts-ink-faint);
}
.ts-topbar .ts-wrap {
  display: flex; flex-wrap: wrap; gap: .4rem 1.75rem;
  align-items: center; justify-content: flex-end; min-height: 2.5rem;
}
.ts-topbar strong { color: var(--ts-ink); font-weight: 650; }
.ts-topbar a { text-decoration: none; }
.ts-topbar a:hover { text-decoration: underline; }

.ts-masthead {
  background: var(--ts-surface);
  border-bottom: 1px solid var(--ts-rule);
  position: sticky; top: 0; z-index: 20;
}
.ts-masthead .ts-wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 5.25rem;
}

/* Hauptmarke aus dem Logo-Bausatz — Wortmarke und Deskriptor in einem,
   mit dem Deskriptor exakt auf die Breite der Wortmarke gestreckt. */
.ts-brand { display: block; text-decoration: none; }
.ts-brand__logo { display: block; width: 200px; height: auto; }
/* Nur noch für die inline eingebundenen SVG-Fassungen (Signet, Fußzeile) */
.ts-logo-red  { fill: var(--ts-logo-red); }
.ts-logo-grey { fill: var(--ts-logo-grey); }

.ts-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; font-size: .95rem; }
.ts-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.ts-nav a {
  text-decoration: none; color: var(--ts-ink-soft);
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.ts-nav a:hover,
.ts-nav .current-menu-item > a,
.ts-nav .current-menu-ancestor > a {
  color: var(--ts-ink); border-bottom-color: var(--ts-accent);
}

.ts-navtoggle {
  display: none; font: inherit; font-weight: 650;
  background: none; border: 1px solid var(--ts-rule);
  padding: .55rem .9rem; cursor: pointer; color: var(--ts-ink);
}

.ts-crumbs { font-size: .85rem; color: var(--ts-ink-faint); padding-top: 1.5rem; }
.ts-crumbs a { text-decoration: none; }
.ts-crumbs a:hover { text-decoration: underline; }

/* ---------- 4. Schaltflächen --------------------------------------------- */

.ts-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ts-face-display); font-weight: 650; font-size: 1rem;
  padding: .8rem 1.5rem; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.ts-btn--solid { background: var(--ts-accent); color: var(--ts-on-accent); }
.ts-btn--solid:hover { background: var(--ts-accent-deep); }
.ts-btn--line { border-color: var(--ts-rule); color: var(--ts-ink); background: transparent; }
.ts-btn--line:hover { border-color: var(--ts-ink); }

.ts-tel { font-weight: 650; text-decoration: none; font-variant-numeric: tabular-nums; }

/* ---------- 5. Abschnitte ------------------------------------------------ */

.ts-section { padding: 4rem 0; }
.ts-section--tinted { background: var(--ts-ground); }
.ts-section__head {
  display: flex; flex-direction: column; gap: .8rem;
  margin-bottom: 2.25rem; max-width: 62ch;
}
.ts-section__head h2 { font-size: clamp(1.6rem, 2.9vw, 2.2rem); text-wrap: balance; }
.ts-section__head > p { margin: 0; color: var(--ts-ink-soft); }

.ts-note { margin: 1.3rem 0 0; font-size: .9rem; color: var(--ts-ink-faint); max-width: 64ch; }

/* Kennzeichnung für Inhalte, die noch nicht freigegeben sind.
   Vor dem Livegang müssen alle .ts-flag verschwunden sein. */
.ts-flag {
  display: inline-block; font-family: var(--ts-face-label);
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ts-on-accent); background: var(--ts-accent);
  padding: .15rem .5rem; margin-bottom: .6rem;
}

/* ---------- 6. Hero ------------------------------------------------------ */

.ts-hero { border-bottom: 1px solid var(--ts-rule-soft); }
.ts-hero .ts-wrap {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3.5rem; align-items: center;
  padding-top: 2.75rem; padding-bottom: 4rem;
}
/* Hier stand einmal max-width: 900px auf dem .ts-wrap. Das hat den
   Kopfbereich um 120 Pixel nach rechts gerückt, weil der Wrap seine
   automatischen Seitenränder behielt und sich innerhalb der vollen
   Breite zentrierte — während Brotkrumen und alle folgenden Abschnitte
   links stehen blieben.
   Eine Breitengrenze braucht es hier gar nicht: Überschrift und
   Fließtext bringen ihre eigene mit, und zwar in ch statt in Pixeln,
   also an der Schriftgröße ausgerichtet. */
.ts-hero--single .ts-wrap { display: block; }
/* Die einspaltige Fassung hat kein .ts-hero__copy und damit auch nicht
   dessen gap — ohne diese Zeile klebt der Fließtext an der Überschrift. */
.ts-hero--single .ts-wrap > * + * { margin-top: 1.3rem; }
.ts-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; }
/* Jede Hero-Überschrift ist zweiteilig: vorn steht, worum es geht,
   hinten in Rot das Besondere dieser Seite. Der zweite Teil ist ein
   eigener Block, damit der Umbruch nicht von der Fensterbreite
   abhängt — ein hartes <br> würde auf dem Telefon in der Mitte
   eines Wortes stehen. Ausgenommen bleiben die Ratgeber und die
   Arbeiten-Übersicht: Wo nicht geworben wird, ist auch kein Rot.

   text-wrap: balance verteilt die Zeilen gleichmäßig statt die
   letzte mit einem einzelnen Wort enden zu lassen. Ältere Browser
   ignorieren die Angabe, dort bricht es wie bisher. */
.ts-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); max-width: 20ch; text-wrap: balance; }
.ts-hero h1 .ts-hero__second { color: var(--ts-accent); display: block; }

/* Die Frage aus dem Erstgespräch stand früher ebenfalls in Rot.
   Direkt unter einer rot ausgezeichneten Überschrift wären das zwei
   konkurrierende Signale — Kursivsatz und Serifenschrift heben sie
   ausreichend heraus. */
.ts-hero__ask {
  font-family: var(--ts-face-note); font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  margin: 0; max-width: 30ch; color: var(--ts-ink); text-wrap: balance;
}
.ts-hero__explain { margin: 0; max-width: 50ch; color: var(--ts-ink-soft); font-size: 1.09rem; }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }

/* ---------- 7. Platzhalter für fehlende Bilder --------------------------- */

.ts-figure {
  background: var(--ts-ground); border: 2px dashed var(--ts-rule);
  display: grid; place-content: center; text-align: center;
  padding: 2rem; gap: .5rem; color: var(--ts-ink-faint);
}
.ts-figure p { margin: 0; font-size: .9rem; max-width: 28ch; }
.ts-hero .ts-figure { aspect-ratio: 4 / 3; }
.ts-split .ts-figure { aspect-ratio: 3 / 2; }

/* Echtes Foto an derselben Stelle wie der Platzhalter */
.ts-photo { margin: 0; }
.ts-photo img { display: block; width: 100%; height: auto; }
.ts-hero .ts-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.ts-split .ts-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- 8. Raster ---------------------------------------------------- */

.ts-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 3rem; align-items: center; }

/* Fehlt die Bildseite, nimmt der Text die Fläche — sonst stünde eine
   leere Spalte daneben und der Satz liefe auf halber Breite, als wäre
   dort etwas ausgefallen. Die Zeilenlänge wird trotzdem begrenzt, damit
   der Text nicht über die ganzen 1140 Pixel läuft. */
.ts-split:has(> :only-child) { grid-template-columns: minmax(0,1fr); }
.ts-split:has(> :only-child) > * { max-width: 68ch; }
.ts-split p { color: var(--ts-ink-soft); }
.ts-split ul { margin: 1.1rem 0 0; padding-left: 1.1rem; color: var(--ts-ink-soft); display: flex; flex-direction: column; gap: .45rem; }

.ts-paths { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
.ts-path {
  background: var(--ts-surface); border: 1px solid var(--ts-rule);
  padding: 2rem; display: flex; flex-direction: column;
  align-items: flex-start; gap: .9rem; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ts-path:hover { border-color: var(--ts-ink-faint); box-shadow: var(--ts-shadow); }
.ts-path .ts-seam { width: 3.25rem; }
.ts-path h3 { font-size: 1.45rem; }
.ts-path__lead { margin: 0; font-weight: 600; color: var(--ts-ink); }
.ts-path__body { margin: 0; color: var(--ts-ink-soft); font-size: .96rem; }
.ts-path__go {
  font-family: var(--ts-face-display); font-weight: 650; font-size: .95rem;
  color: var(--ts-accent); margin-top: auto; padding-top: .4rem;
}
.ts-path--wide {
  grid-column: 1 / -1; flex-direction: row; align-items: center;
  flex-wrap: wrap; gap: 1rem 2rem; padding: 1.6rem 2.25rem;
}
.ts-path--wide .ts-seam { color: var(--ts-ink-faint); }
.ts-path--wide h3 { font-size: 1.2rem; }
.ts-path--wide .ts-path__body { flex: 1 1 24ch; }
.ts-path--wide .ts-path__go { margin: 0; padding: 0; color: var(--ts-ink-soft); }

.ts-groups { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.25rem; }
.ts-group {
  background: var(--ts-surface); border: 1px solid var(--ts-rule);
  padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem;
}
.ts-group .ts-seam { width: 2.75rem; }
.ts-group h3 { font-size: 1.1rem; }
.ts-group p { margin: 0; color: var(--ts-ink-soft); font-size: .92rem; }

/* Kacheln, hinter denen eine eigene Seite liegt. Die ganze Fläche ist
   anklickbar, nicht nur die Überschrift — am Telefon trifft man eine
   Zeile Text schlecht. Der Verweis unten hält sich am Fuß der Kachel,
   damit die Kacheln trotz verschieden langer Texte gleich hoch enden. */
a.ts-group { text-decoration: none; color: inherit; }
a.ts-group:hover,
a.ts-group:focus-visible { border-color: var(--ts-ink-faint); }
.ts-group__go {
  font-family: var(--ts-face-display); font-weight: 650; font-size: .9rem;
  color: var(--ts-accent); margin-top: auto; padding-top: .5rem;
}

/* Sortimentsraster */
.ts-kit { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1rem; }
.ts-kit__item {
  border: 1px solid var(--ts-rule); background: var(--ts-surface);
  padding: 1.1rem .9rem; text-align: center;
  display: flex; flex-direction: column; gap: .3rem;
}
.ts-kit__item strong { font-family: var(--ts-face-display); font-size: .98rem; }
.ts-kit__item span { font-size: .82rem; color: var(--ts-ink-faint); }

/* Vertrauensstreifen */
.ts-trust { background: var(--ts-ground); border-bottom: 1px solid var(--ts-rule-soft); }
.ts-trust .ts-wrap {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem; padding-top: 2.25rem; padding-bottom: 2.25rem;
}
.ts-trust__item { display: flex; flex-direction: column; gap: .25rem; }
.ts-trust__figure {
  font-family: var(--ts-face-display); font-size: 1.55rem; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--ts-ink);
}
.ts-trust__item p { margin: 0; color: var(--ts-ink-faint); font-size: .925rem; }

/* ---------- 9. Ablauf, Zusagen, Zitat ------------------------------------ */

.ts-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; counter-reset: ts-step; }
.ts-step { display: flex; flex-direction: column; gap: .7rem; }
.ts-step::before {
  counter-increment: ts-step; content: counter(ts-step);
  font-family: var(--ts-face-label); font-size: .8rem; color: var(--ts-accent);
  border: 1.5px solid var(--ts-accent); width: 2rem; height: 2rem;
  display: grid; place-content: center; border-radius: 50%;
}
.ts-step h3 { font-size: 1.12rem; }
.ts-step p { margin: 0; color: var(--ts-ink-soft); font-size: .95rem; }

.ts-pledges { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.5rem; }
.ts-pledge {
  background: var(--ts-surface); border: 1px solid var(--ts-rule);
  border-top: 3px solid var(--ts-accent); padding: 1.5rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.ts-pledge h3 { font-size: 1.1rem; }
.ts-pledge p { margin: 0; color: var(--ts-ink-soft); font-size: .94rem; }
.ts-pledge__why { color: var(--ts-ink-faint) !important; font-size: .875rem !important; }

/* Unterschriftszeile unter dem Versprechen — die Steppnaht darüber
   greift das Handwerksmotiv auf und trennt sie von den Karten. */
.ts-signature {
  margin: 2.25rem 0 0; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem;
  position: relative;
}
.ts-signature::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 3.25rem; height: 2px; color: var(--ts-accent);
  background-image: repeating-linear-gradient(to right,
    currentColor 0 9px, transparent 9px 15px);
}
.ts-signature__name {
  font-family: var(--ts-face-display); font-weight: 800;
  font-size: 1.05rem; letter-spacing: -0.015em; color: var(--ts-ink);
}
.ts-signature__role {
  font-family: var(--ts-face-note); font-style: italic;
  color: var(--ts-ink-soft); font-size: .97rem;
}

.ts-quote {
  margin: 2.5rem 0 0; padding: 1.6rem 1.9rem;
  background: var(--ts-surface); border: 1px solid var(--ts-rule);
  border-left: 4px solid var(--ts-accent);
}
.ts-quote p { margin: 0; font-family: var(--ts-face-note); font-style: italic; font-size: clamp(1.02rem, 2vw, 1.25rem); }
.ts-quote footer {
  margin-top: .7rem; font-family: var(--ts-face-label); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ts-ink-faint);
}

/* Gegenüberstellung */
.ts-compare { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
.ts-compare > div { padding: 1.75rem; border: 1px solid var(--ts-rule); background: var(--ts-surface); }
.ts-compare h3 { font-size: 1.15rem; margin-bottom: .9rem; }
.ts-compare p { margin: 0; color: var(--ts-ink-soft); font-size: .95rem; }
.ts-compare ol, .ts-compare ul {
  margin: 0; padding-left: 1.15rem; color: var(--ts-ink-soft);
  display: flex; flex-direction: column; gap: .5rem; font-size: .96rem;
}
.ts-compare--win { border-top: 3px solid var(--ts-accent); }
.ts-compare__tally { margin: 1.1rem 0 0; font-family: var(--ts-face-display); font-weight: 700; color: var(--ts-ink); }

/* ---------- 10. Teamprofil ----------------------------------------------- */

.ts-profilewrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 3rem; align-items: center; }
.ts-profile { border: 1px solid var(--ts-rule); background: var(--ts-surface); box-shadow: var(--ts-shadow); }
.ts-profile__head {
  background: var(--ts-deep); color: var(--ts-ink-invert);
  padding: .9rem 1.25rem; font-family: var(--ts-face-display); font-weight: 700;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap;
}
.ts-profile__head span {
  font-family: var(--ts-face-label); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ts-on-deep-soft); font-weight: 400;
}
.ts-profile dl { margin: 0; padding: .4rem 1.25rem 1.1rem; }
.ts-profile dl > div {
  display: grid; grid-template-columns: 9.5rem minmax(0,1fr); gap: 1rem;
  padding: .62rem 0; border-bottom: 1px solid var(--ts-rule-soft);
}
.ts-profile dl > div:last-child { border-bottom: none; }
.ts-profile dt {
  font-size: .82rem; color: var(--ts-ink-faint);
  font-family: var(--ts-face-label); letter-spacing: .04em; padding-top: .15rem;
}
.ts-profile dd { margin: 0; font-size: .96rem; color: var(--ts-ink); }
.ts-profile dd em { font-style: normal; color: var(--ts-ink-faint); }
.ts-swatch {
  display: inline-block; width: .85rem; height: .85rem; vertical-align: -1px;
  margin-right: .35rem; border: 1px solid rgba(0,0,0,.15);
}

/* ---------- 11. Tabellen ------------------------------------------------- */

.ts-tablewrap { overflow-x: auto; border: 1px solid var(--ts-rule); background: var(--ts-surface); }
.ts-table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: .975rem; }
.ts-table th, .ts-table td {
  padding: .85rem 1.15rem; text-align: left;
  border-bottom: 1px solid var(--ts-rule-soft);
}
.ts-table thead th {
  background: var(--ts-ground); font-family: var(--ts-face-display);
  font-size: .9rem; color: var(--ts-ink);
}
.ts-table td { color: var(--ts-ink-soft); }
.ts-table .ts-num { text-align: right; font-variant-numeric: tabular-nums; }
.ts-table--cost tbody tr:last-child td { border-bottom: none; font-weight: 700; color: var(--ts-ink); }
.ts-table--cost tbody tr:last-child { background: var(--ts-ground); }
.ts-table__highlight { color: var(--ts-accent); font-weight: 700; }

/* Beispielrechnung statt Vergleichstabelle — zwei Fälle nebeneinander,
   mit offengelegten Annahmen im Text statt Zahlen in Spalten. */
.ts-example { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
.ts-example__case {
  background: var(--ts-surface); border: 1px solid var(--ts-rule);
  padding: 1.75rem; display: flex; flex-direction: column; gap: .3rem;
}
.ts-example__case--win { border-top: 3px solid var(--ts-accent); }
.ts-example__price {
  font-family: var(--ts-face-display); font-size: 2rem; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1; margin: .3rem 0 0;
  font-variant-numeric: tabular-nums;
}
.ts-example__case--win .ts-example__price { color: var(--ts-accent); }
.ts-example__note { margin: 0 0 .9rem; font-size: .875rem; color: var(--ts-ink-faint); }
.ts-example__case > p:last-child { margin: 0; color: var(--ts-ink-soft); font-size: .96rem; }

/* ---------- 12. Fragen --------------------------------------------------- */

.ts-faq { display: flex; flex-direction: column; border-top: 1px solid var(--ts-rule); }
.ts-faq > div {
  border-bottom: 1px solid var(--ts-rule); padding: 1.4rem 0;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); gap: 2rem;
}
.ts-faq h3 { font-size: 1.05rem; }
.ts-faq p { margin: 0; color: var(--ts-ink-soft); font-size: .97rem; }

/* Eine Antwort darf aus mehreren Absätzen bestehen. Ohne diese Regel
   rutscht der zweite in die nächste Rasterzelle — also unter die Frage
   statt unter die Antwort. */
.ts-faq > div > p ~ p { grid-column: 2; margin-top: .7rem; }

/* ---------- 13. Referenzen ----------------------------------------------- */

.ts-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.ts-ref {
  aspect-ratio: 5 / 2; border: 1px solid var(--ts-rule); background: var(--ts-surface);
  display: grid; place-content: center; padding: 1rem;
}
.ts-ref img { max-height: 100%; width: auto; }
.ts-ref--placeholder {
  border: 2px dashed var(--ts-rule); color: var(--ts-ink-faint);
  font-family: var(--ts-face-label); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; text-align: center;
}

/* ---------- 14. Formulare ------------------------------------------------ */

.ts-formwrap { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 3rem; align-items: start; }
.ts-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ts-field { display: flex; flex-direction: column; gap: .35rem; }
.ts-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
.ts-form label { font-size: .875rem; font-weight: 600; color: var(--ts-ink); }
.ts-form label .ts-opt { font-weight: 400; color: var(--ts-ink-faint); }
.ts-form input[type="text"],
.ts-form input[type="tel"],
.ts-form input[type="email"],
.ts-form select,
.ts-form textarea {
  font: inherit; font-size: .975rem; padding: .65rem .8rem;
  border: 1px solid var(--ts-rule); background: var(--ts-surface);
  color: var(--ts-ink); border-radius: 0; width: 100%;
}
.ts-form textarea { min-height: 6rem; resize: vertical; }
.ts-checks { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem .9rem; }
.ts-check { display: flex; align-items: center; gap: .45rem; font-size: .94rem; color: var(--ts-ink-soft); font-weight: 400; }
.ts-hint { font-size: .85rem; color: var(--ts-ink-faint); margin: 0; }
.ts-form .ts-error { color: var(--ts-error); font-size: .875rem; }

.ts-callbox {
  background: var(--ts-ground); border: 1px solid var(--ts-rule);
  padding: 1.75rem; display: flex; flex-direction: column; gap: .5rem;
}
.ts-callbox__phone {
  font-family: var(--ts-face-display); font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 800; letter-spacing: -0.02em; text-decoration: none;
  font-variant-numeric: tabular-nums; color: var(--ts-ink);
}
.ts-callbox p { margin: 0; font-size: .925rem; color: var(--ts-ink-soft); }
.ts-callbox__who { border-top: 1px solid var(--ts-rule); margin-top: .6rem; padding-top: .8rem; }

/* Umschalter zwischen Vereins- und Firmenformular.
   Ohne JavaScript bleiben beide Formulare sichtbar — die Anfrage soll
   auch dann möglich sein, wenn Skripte blockiert werden. */
.ts-switch { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.ts-switch__btn {
  font: inherit; font-family: var(--ts-face-display); font-weight: 650;
  padding: .7rem 1.25rem; cursor: pointer;
  background: var(--ts-surface); color: var(--ts-ink-soft);
  border: 1px solid var(--ts-rule);
}
.ts-switch__btn:hover { color: var(--ts-ink); border-color: var(--ts-ink-faint); }
.ts-switch__btn[aria-selected="true"] {
  background: var(--ts-accent); color: var(--ts-on-accent); border-color: var(--ts-accent);
}
.ts-panel + .ts-panel { margin-top: 3rem; }
.ts-panel + .ts-panel::before {
  content: ""; display: block; height: 1px;
  background: var(--ts-rule); margin-bottom: 3rem;
}
/* Sobald JavaScript übernimmt, wird umgeschaltet statt gestapelt. */
.ts-switch--live ~ .ts-panel[hidden] { display: none; }
.ts-switch--live ~ .ts-panel + .ts-panel { margin-top: 0; }
.ts-switch--live ~ .ts-panel + .ts-panel::before { content: none; }

/* ---------- 15. Abschluss-Aufforderung ----------------------------------- */

.ts-cta { border-top: 1px solid var(--ts-rule); }
.ts-cta .ts-wrap {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 3rem; align-items: start; padding-top: 4rem; padding-bottom: 4rem;
}
.ts-cta h2 { font-size: clamp(1.6rem, 2.9vw, 2.2rem); margin-bottom: 1rem; text-wrap: balance; }
.ts-cta p { color: var(--ts-ink-soft); max-width: 46ch; }

/* ---------- 16. Fußbereich ----------------------------------------------- */

.ts-footer { background: var(--ts-deep); color: var(--ts-ink-invert-soft); font-size: .9rem; }
/* Vier Spalten: Marke, Angebot, Zum Nachlesen, Kontakt. Die erste ist
   breiter, weil dort Wortmarke und Anschrift stehen. */
.ts-footer .ts-wrap {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem; padding-top: 3rem; padding-bottom: 3rem;
}
.ts-footer h2, .ts-footer h3 {
  font-size: .78rem; font-family: var(--ts-face-label); font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ts-on-deep-soft);
  margin-bottom: .85rem;
}
.ts-footer a { color: var(--ts-ink-invert); text-decoration: none; }
.ts-footer a:hover { text-decoration: underline; }
.ts-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ts-footer__logo { width: 150px; height: auto; display: block; margin-bottom: .9rem; }
/* Abstände statt Trennzeichen — beim Umbruch bleibt sonst ein einzelner
   Mittelpunkt am Zeilenende zurück. */
.ts-colophon {
  border-top: 1px solid rgba(255,255,255,.14); padding: 1.2rem 0;
  font-size: .82rem; color: var(--ts-on-deep-soft);
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: baseline;
}
.ts-colophon ul { list-style: none; margin: 0; padding: 0; display: contents; }
.ts-colophon a { color: var(--ts-on-deep-soft); }
.ts-colophon a:hover { color: var(--ts-ink-invert); }

/* ---------- 17. Inhaltsseiten (Gutenberg) -------------------------------- */

.ts-entry { padding: 3rem 0 4rem; }
.ts-entry__header { margin-bottom: 2rem; max-width: 62ch; }
.ts-entry__header h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); text-wrap: balance; }
.ts-entry__content { max-width: 68ch; }
.ts-entry__content > * + * { margin-top: 1.1rem; }
.ts-entry__content h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2.4rem; }
.ts-entry__content h3 { font-size: 1.2rem; margin-top: 1.8rem; }
.ts-entry__content ul, .ts-entry__content ol { padding-left: 1.2rem; color: var(--ts-ink-soft); }
.ts-entry__content li + li { margin-top: .35rem; }
.ts-entry__content a { color: var(--ts-accent); }
.ts-entry__content blockquote {
  margin: 1.6rem 0; padding: 1.2rem 1.6rem;
  border-left: 4px solid var(--ts-accent); background: var(--ts-ground);
  font-family: var(--ts-face-note); font-style: italic;
}
.ts-entry__content figure { margin: 1.6rem 0; }
.ts-entry__content figcaption { font-size: .875rem; color: var(--ts-ink-faint); margin-top: .5rem; }
.ts-entry__content table { border-collapse: collapse; width: 100%; }
.ts-entry__content :is(th, td) { padding: .7rem 1rem; border-bottom: 1px solid var(--ts-rule-soft); text-align: left; }

.alignwide { max-width: min(100%, 1000px); margin-left: auto; margin-right: auto; }
.alignfull  { max-width: none; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* ---------- 18. Arbeiten (Referenzen) ------------------------------------ */

.ts-works { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.75rem; }
.ts-work { display: flex; flex-direction: column; gap: .7rem; text-decoration: none; }
.ts-work__media { background: var(--ts-ground); border: 1px solid var(--ts-rule); aspect-ratio: 4 / 3; overflow: hidden; }
.ts-work__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-work h3 { font-size: 1.1rem; }
.ts-work p { margin: 0; color: var(--ts-ink-soft); font-size: .94rem; }

/* Filter nach Bereich in der Übersicht der Arbeiten */
.ts-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.ts-filter__item {
  font-family: var(--ts-face-display); font-weight: 650; font-size: .92rem;
  padding: .5rem 1rem; text-decoration: none;
  border: 1px solid var(--ts-rule); color: var(--ts-ink-soft);
}
.ts-filter__item:hover { border-color: var(--ts-ink-faint); color: var(--ts-ink); }
.ts-filter__item.is-active {
  background: var(--ts-deep); border-color: var(--ts-deep); color: var(--ts-ink-invert);
}

/* Blätterfunktion */
.ts-works + .navigation { margin-top: 2.5rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nav-links .page-numbers {
  padding: .5rem .9rem; text-decoration: none;
  border: 1px solid var(--ts-rule); color: var(--ts-ink-soft);
  font-variant-numeric: tabular-nums;
}
.nav-links .page-numbers.current {
  background: var(--ts-deep); border-color: var(--ts-deep); color: var(--ts-ink-invert);
}

/* ---------- 19. Tippziele ------------------------------------------------ */

/* WCAG 2.2 verlangt für Bedienelemente mindestens 24 × 24 Pixel
   (Kriterium 2.5.8), empfohlen sind 44 × 44 (2.5.5). Gemeint sind
   eigenständige Elemente — Verweise mitten im Fließtext bleiben
   ausgenommen, sonst zerreißt es den Zeilenfall.

   Die Telefonnummer bekommt ihre Fläche auf jedem Gerät, nicht nur auf
   dem Telefon: Der Anruf ist die wichtigste Handlung der Seite. Der
   negative Außenabstand nimmt den Innenabstand wieder zurück, damit
   sich an der Ausrichtung nichts verschiebt. */
a[href^="tel:"] {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding-inline: .4rem; margin-inline: -.4rem;
}

/* Alles Weitere nur dort, wo mit dem Finger gezielt wird. Am
   Schreibtisch trifft man kleinere Ziele zuverlässig, und die enge
   Setzung von Kopfleiste und Fußbereich bleibt erhalten. */
@media (pointer: coarse) {
  .ts-nav a,
  .ts-footer a,
  .ts-colophon a,
  .ts-crumbs a,
  .ts-callbox a,
  .ts-filter__item,
  .nav-links .page-numbers {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* Der Abstand kommt jetzt aus der Mindesthöhe der Einträge selbst. */
  .ts-footer ul { gap: 0; }

  .ts-navtoggle { min-height: 44px; }
}

/* ---------- 20. Kleine Bildschirme --------------------------------------- */

@media (max-width: 1000px) {
  .ts-kit    { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .ts-groups { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ts-works  { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 880px) {
  .ts-hero .ts-wrap,
  .ts-split, .ts-formwrap, .ts-profilewrap, .ts-cta .ts-wrap {
    grid-template-columns: minmax(0,1fr); gap: 2.5rem;
  }
  .ts-paths, .ts-groups, .ts-steps, .ts-pledges, .ts-compare, .ts-example,
  .ts-row, .ts-trust .ts-wrap, .ts-footer .ts-wrap, .ts-faq > div, .ts-works {
    grid-template-columns: minmax(0,1fr); gap: 1.5rem;
  }
  .ts-kit { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ts-path--wide { grid-column: auto; }
  /* Einspaltig gibt es keine zweite Spalte mehr — die Zuweisung von
     oben würde hier eine erzeugen und den Absatz hinausschieben. */
  .ts-faq > div > p ~ p { grid-column: auto; }
  .ts-profile dl > div { grid-template-columns: minmax(0,1fr); gap: .15rem; }
  .ts-checks { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ts-section { padding: 3rem 0; }

  .ts-navtoggle { display: block; }
  .ts-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ts-surface); border-bottom: 1px solid var(--ts-rule);
    padding: 1rem 1.5rem 1.5rem;
  }
  .ts-nav.is-open { display: block; }
  .ts-nav ul { flex-direction: column; align-items: flex-start; gap: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- 20. Druck ---------------------------------------------------- */

@media print {
  .ts-topbar, .ts-nav, .ts-navtoggle, .ts-cta, .ts-skip-link { display: none; }
  .ts-masthead { position: static; }
  body { font-size: 11pt; }
}