/* ==========================================================================
   TitanCore24 — Design-System (Rebuild 04.08.2026, Strategieplan §2)
   --------------------------------------------------------------------------
   Visuelle Richtung: "Fachkanzlei-tauglich, ruhig, gebaut."
   Trennung und Hierarchie entstehen durch FLÄCHE, KONTUR, ABSTAND und
   TYPOGRAFIE — niemals durch Höhe oder Licht.

   Harte Stilgrenzen (Vorgabe Robin, nicht verhandelbar):
     KEINE Schatten (kein box-shadow, nirgends)
     KEINE Verläufe/Lichteffekte (kein linear-gradient, nirgends)
     KEINE Bilder/GIFs/3D
   Diese Datei lädt keine Ressource von Dritten (Schriften lokal via
   fonts.css — LG München I, Google-Fonts-Urteil; das ist ein
   Vertrauens-Pillar und wird auf der Website ausgelobt).
   ========================================================================== */

/* Fundament: Das HTML-Attribut hidden muss immer siegen — Klassen wie
   .tc-overlay/.tc-modal setzen display:flex und würden das Attribut
   sonst überschreiben (Live-Befund AE-081: Zahlungs-Überlagerung war
   dadurch dauerhaft sichtbar und blockierte die gesamte Seite). */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   1. TOKENS — ein Anker, viel Papier
   -------------------------------------------------------------------------- */
:root {
  /* Flächen */
  --tc-paper: #F7F4EE;        /* warmes Off-White, Seitenuntergrund */
  --tc-card: #FFFEFB;         /* Kartenfläche, minimal heller */
  --tc-alt: #F0EBE0;          /* Sektionswechsel (papier ⇄ kühler) */
  --tc-accent-soft: #E4EDE9;  /* zarte Akzent-Tönung (Auswahl-Fläche) */

  /* Text */
  --tc-ink: #161311;          /* tiefes Tintenschwarz */
  --tc-muted: #5B564F;        /* gedämpft, AA auf Papier */
  /* F8 (T1-F7, 25.08.2026): #857F74 lag bei 3,3–3,9 (Footer-Copyright,
     Karussell-Punktlabels) unter WCAG-AA. Angehoben auf ≥4,5 gegen alle
     Flaechen (paper 4,91 / card 5,34 / alt 4,53), bleibt heller als muted. */
  --tc-faint: #6F6A5E;        /* feine Hinweise (AA auf allen Flaechen) */

  /* Kontur */
  --tc-line: #D8D2C4;         /* Haarlinie */
  --tc-line-strong: #B9B1A0;  /* Haarlinie verstärkt */

  /* Der EINE Akzent: abgedunkeltes Petrol (AA auf Papier und auf Card) */
  --tc-accent: #0B5D63;
  --tc-accent-ink: #08474C;   /* Hover/aktiv */
  --tc-accent-on: #F4F9F7;    /* Text auf Akzentfläche */

  /* Funktions-Signale, gedämpft — tragen die Fehlerfall-Transparenz */
  --tc-ok: #2F6B3A;
  --tc-ok-bg: #E8F0E4;
  /* F8 (T1-F7): #8A6D1F lag als Status-Text („Eingang" u.a.) bei 4,1–4,5
     knapp unter AA. Abgedunkelt auf ≥4,5 (paper 5,24 / alt 4,84 / wait-bg 4,92). */
  --tc-wait: #7E621B;
  --tc-wait-bg: #F4EDDA;
  --tc-err: #A33327;
  --tc-err-bg: #F6E8E3;
  --tc-info-bg: #E4EDE9;
  /* NACHGETRAGEN 18.08.2026: --tc-danger fehlte im Live-Blatt, wurde aber
     benutzt — dashboard.html faerbt damit den Pflichtfeld-Stern, den Hinweis
     "bitte ausfuellen" und .tc-feldfehler (Z. 261), also seine eigenen
     Fehlermeldungen (u. a. tcMengeFehler mit role="alert"). Ohne Definition
     erbte all das die normale Textfarbe: eine Fehlermeldung, die sich
     Screenreadern als Alarm meldet und dabei aussieht wie Fliesstext.

     BEWUSST EIN VERWEIS, KEIN ZWEITER WERT (Robin, 18.08.2026): Das Systemrot
     ist --tc-err (#A33327 hell / #E08A7B dunkel); .tc-btn--danger (Z. 293) und
     .tc-field__err (Z. 433) haengen bereits daran. --tc-danger ist nur ein
     zweiter Name dafuer. Als Verweis gibt es genau ein Rot, die dunkle Fassung
     folgt von selbst, und niemand pflegt spaeter zwei Toene auseinander. */
  --tc-danger: var(--tc-err);

  /* Form */
  --tc-radius: 8px;           /* kleiner Radius wirkt seriöser als Pille */
  --tc-radius-sm: 6px;
  --tc-keyline: 3px;          /* Akzent-Keyline für Auswahl-Zustände */

  /* Typografie: Serif trägt die Gravitas, Grotesk den Rest */
  --tc-font-ui: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tc-font-head: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --tc-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Type-Scale — wenige, klare Stufen */
  --tc-fs-xs: .78rem;
  --tc-fs-sm: .875rem;
  --tc-fs-base: 1rem;
  --tc-fs-lead: 1.15rem;
  --tc-fs-h3: 1.3rem;
  --tc-fs-h2: 1.65rem;
  --tc-fs-h1: 2.2rem;

  /* Abstände */
  --tc-sp-1: .35rem; --tc-sp-2: .7rem; --tc-sp-3: 1.1rem;
  --tc-sp-4: 1.7rem; --tc-sp-5: 2.6rem; --tc-sp-6: 4rem;

  --tc-wrap: 72rem;

  /* 48b: drei Token wurden benutzt, aber nie definiert. Sie erhalten hier
     eine Definition als Verweis auf vorhandene Token — dadurch wandern sie
     im Dunkelmodus automatisch mit. */
  --tc-bg: var(--tc-paper);
  --tc-bg-alt: var(--tc-alt);
  --tc-ink-3: var(--tc-muted);
}

/* Dunkle Ansicht bleibt — als reiner Token-Tausch, keine zweite Gestalt. */
[data-theme="dark"] {
  --tc-paper: #1B1A17;
  --tc-card: #24221E;
  --tc-alt: #201E1A;
  --tc-accent-soft: #1E302E;
  --tc-ink: #EDE8DD;
  --tc-muted: #B3AC9E;
  --tc-faint: #8D8678;
  --tc-line: #3D3A33;
  --tc-line-strong: #555046;
  --tc-accent: #4FA8AF;
  --tc-accent-ink: #6FC0C6;
  --tc-accent-on: #0E2A2C;
  --tc-ok: #7FB98A;
  --tc-ok-bg: #22301F;
  --tc-wait: #D3B36A;
  --tc-wait-bg: #332C18;
  --tc-err: #E08A7B;
  --tc-err-bg: #3A211C;
  --tc-info-bg: #1E302E;
  --tc-danger: var(--tc-err);   /* Verweis, siehe :root — genau ein Systemrot */
}

/* --------------------------------------------------------------------------
   2. GRUNDLAGEN
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--tc-paper);
  color: var(--tc-ink);
  font-family: var(--tc-font-ui);
  font-size: var(--tc-fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--tc-font-head);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 var(--tc-sp-3);
}
h1 { font-size: var(--tc-fs-h1); }
h2 { font-size: var(--tc-fs-h2); }
h3 { font-size: var(--tc-fs-h3); }
h4, h5, h6 {
  font-family: var(--tc-font-ui);
  font-weight: 700;
  font-size: var(--tc-fs-base);
  margin: 0 0 var(--tc-sp-2);
}
p { margin: 0 0 var(--tc-sp-3); }

/* B-32: Deutsche Komposita, E-Mail-Adressen und lange Leistungsnamen dürfen
   auf schmalen Geräten nicht die Inhaltsbreite bestimmen. */
.tc-main :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, th, td, label, a) {
  overflow-wrap: anywhere;
  hyphens: auto;
}

a { color: var(--tc-accent); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--tc-accent-ink); }

strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--tc-line); margin: var(--tc-sp-4) 0; }

::selection { background: var(--tc-accent-soft); }

:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Zahlen in Preisen/Tabellen spaltengenau — das hebt die Preisseite. */
.tc-num, .tc-kpi__value, .tc-opt__price, .tc-pricebar, .tc-pack__amount,
.tc-pack__tokens, .tc-table td.tc-num, .tc-table th.tc-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------------------------
   3. HILFSKLASSEN
   -------------------------------------------------------------------------- */
.tc-wrap { max-width: var(--tc-wrap); margin: 0 auto; padding: 0 var(--tc-sp-4); }
.tc-wrap--narrow { max-width: 48rem; margin: 0 auto; padding: 0 var(--tc-sp-4); }
.tc-main { display: block; }

.tc-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tc-skip {
  position: absolute; left: var(--tc-sp-3); top: -4rem; z-index: 60;
  background: var(--tc-accent); color: var(--tc-accent-on);
  padding: var(--tc-sp-2) var(--tc-sp-3); border-radius: var(--tc-radius-sm);
  transition: top .15s ease;
}
.tc-skip:focus { top: var(--tc-sp-3); color: var(--tc-accent-on); }

.tc-hide { display: none !important; }
.tc-muted { color: var(--tc-muted); }
.tc-small { font-size: var(--tc-fs-sm); }
.tc-xs { font-size: var(--tc-fs-xs); }
.tc-lead { font-size: var(--tc-fs-lead); line-height: 1.55; }
.tc-mono { font-family: var(--tc-font-mono); font-size: .92em; }
.tc-num { text-align: right; }
.tc-center { text-align: center; }
.tc-nowrap { white-space: nowrap; }
.tc-spacer { flex: 1 1 auto; }

.tc-mt0 { margin-top: 0; } .tc-mt1 { margin-top: var(--tc-sp-1); }
.tc-mt2 { margin-top: var(--tc-sp-2); } .tc-mt3 { margin-top: var(--tc-sp-3); }
.tc-mt4 { margin-top: var(--tc-sp-4); } .tc-mt5 { margin-top: var(--tc-sp-5); }
.tc-mb0 { margin-bottom: 0; } .tc-mb1 { margin-bottom: var(--tc-sp-1); }
.tc-mb2 { margin-bottom: var(--tc-sp-2); } .tc-mb3 { margin-bottom: var(--tc-sp-3); }
.tc-mb4 { margin-bottom: var(--tc-sp-4); }

/* --------------------------------------------------------------------------
   4. LAYOUT: Sektionen, Raster
   -------------------------------------------------------------------------- */
.tc-section { padding: var(--tc-sp-6) 0; }
.tc-section--tight { padding: var(--tc-sp-4) 0; }
.tc-section--alt {
  background: var(--tc-alt);
  border-top: 1px solid var(--tc-line);
  border-bottom: 1px solid var(--tc-line);
}

.tc-grid { display: grid; gap: var(--tc-sp-3); }
.tc-grid > *, .tc-split > *, .tc-fieldrow > *, .tc-option-hero > *,
.tc-card, .tc-card__head, .tc-note, .tc-configbox, .tc-tablewrap {
  min-width: 0;
  max-width: 100%;
}
.tc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 60rem) {
  .tc-grid--3, .tc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .tc-grid--2, .tc-grid--3, .tc-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.tc-split { display: flex; gap: var(--tc-sp-4); align-items: flex-start; }
@media (max-width: 60rem) { .tc-split { flex-direction: column; } }

/* --------------------------------------------------------------------------
   5. KARTEN & FLÄCHEN — flach, Haarlinie, kein Schatten
   -------------------------------------------------------------------------- */
.tc-card {
  background: var(--tc-card);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: var(--tc-sp-4);
}
.tc-card--accent {
  border-color: var(--tc-accent);
  border-left-width: var(--tc-keyline);
}
.tc-card--flush { padding: 0; }
.tc-card__head {
  display: flex; align-items: center; gap: var(--tc-sp-2);
  margin-bottom: var(--tc-sp-3);
}
.tc-card__head h3, .tc-card__head h4 { margin: 0; }

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.tc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--tc-sp-1);
  font: inherit; font-weight: 600;
  padding: .6rem 1.15rem;
  border-radius: var(--tc-radius-sm);
  border: 1px solid var(--tc-line-strong);
  background: var(--tc-card);
  color: var(--tc-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  max-width: 100%; white-space: normal; text-align: center; overflow-wrap: anywhere;
}
.tc-btn:hover { border-color: var(--tc-accent); color: var(--tc-accent-ink); }
.tc-btn:disabled { opacity: .5; cursor: not-allowed; }
.tc-btn:disabled:hover { border-color: var(--tc-line-strong); color: var(--tc-ink); }

.tc-btn--primary {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: var(--tc-accent-on);
}
.tc-btn--primary:hover { background: var(--tc-accent-ink); border-color: var(--tc-accent-ink); color: var(--tc-accent-on); }
.tc-btn--primary:disabled { background: var(--tc-accent); border-color: var(--tc-accent); color: var(--tc-accent-on); }

.tc-btn--secondary { border-color: var(--tc-accent); color: var(--tc-accent); }
.tc-btn--secondary:hover { background: var(--tc-accent-soft); color: var(--tc-accent-ink); }

.tc-btn--ghost, .tc-btn--quiet {
  border-color: transparent; background: transparent; color: var(--tc-muted);
}
.tc-btn--ghost:hover, .tc-btn--quiet:hover { color: var(--tc-accent-ink); border-color: var(--tc-line); }

.tc-btn--danger { border-color: var(--tc-err); color: var(--tc-err); }
.tc-btn--danger:hover { background: var(--tc-err-bg); color: var(--tc-err); }

.tc-btn--lg { padding: .8rem 1.5rem; font-size: var(--tc-fs-lead); }
.tc-btn--sm { padding: .3rem .7rem; font-size: var(--tc-fs-sm); }
.tc-btn--block { width: 100%; }

.tc-btnrow { display: flex; gap: var(--tc-sp-2); flex-wrap: wrap; align-items: center; }

.tc-iconbtn {
  border: 1px solid var(--tc-line);
  background: var(--tc-card);
  border-radius: var(--tc-radius-sm);
  padding: .3rem;
  min-width: 1.9rem; min-height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--tc-muted);
  font: inherit;
}
.tc-iconbtn:hover { color: var(--tc-accent); border-color: var(--tc-accent); }

/* --------------------------------------------------------------------------
   7. KOPF- UND FUSSBEREICH
   -------------------------------------------------------------------------- */
.tc-header {
  background: var(--tc-card);
  border-bottom: 1px solid var(--tc-line);
}
.tc-header__bar {
  display: flex; align-items: center; gap: var(--tc-sp-3);
  max-width: 84rem; margin: 0 auto;
  padding: var(--tc-sp-2) var(--tc-sp-4);
}
.tc-header__sub {
  font-size: var(--tc-fs-sm); color: var(--tc-muted);
  border-top: 1px solid var(--tc-line);
  padding: var(--tc-sp-1) var(--tc-sp-4);
}
.tc-header__tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--tc-sp-2); margin-left: auto; min-width: 0; flex-wrap: wrap; white-space: normal; }
/* Guthaben-Anzeige im Kopf: einzeilig, ruhig, Zahlen in Tabellenform. */
#tcCreditsChip {
  display: inline-flex; align-items: baseline; gap: .3rem;
  white-space: nowrap; line-height: 1;
  padding: .5rem .8rem;
}
#tcCreditsChip strong { font-variant-numeric: tabular-nums; }
/* Abmelden: dezente Hintergrundfarbe, damit es als Knopf lesbar bleibt. */
.tc-header [data-tc-logout] { background: var(--tc-alt); }

/* Markenzeichen — flache Fläche, kein Verlauf (Stilgrenze). */
.tc-brandmark {
  display: inline-flex; align-items: center; gap: var(--tc-sp-2);
  text-decoration: none; color: var(--tc-ink);
}
.tc-brandmark__24, .tc-brandmark__gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--tc-accent);
  color: var(--tc-accent-on);
  border-radius: var(--tc-radius-sm);
  font-family: var(--tc-font-head);
  font-weight: 700; font-size: .95rem;
}
.tc-brandmark__text { display: flex; flex-direction: column; line-height: 1.15; }
/* AE-086: Der Markenname ist EIN Wort — die 24 steht direkt hinter
   TitanCore, nicht in einer eigenen Zeile darunter. */
.tc-brandmark__word {
  font-family: var(--tc-font-head); font-weight: 700; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.tc-brandmark__word .tc-brandmark__24 { width: 1.5rem; height: 1.5rem; font-size: .8rem; flex: 0 0 auto; }
.tc-brandmark--lg .tc-brandmark__word .tc-brandmark__24 { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
.tc-brandmark__claim { font-size: var(--tc-fs-xs); color: var(--tc-muted); }
.tc-brandmark--lg .tc-brandmark__24 { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
.tc-brandmark--on .tc-brandmark__word { color: inherit; }

/* AE-086: Closed-Beta-Badge neben dem Logo — ehrlicher Hinweis auf den
   fruehen Stand, rot und unuebersehbar wie gewuenscht. */
.tc-beta-badge {
  display: inline-flex; align-items: center; align-self: center;
  /* GEÄNDERT 20.08.2026 (AUFTRAG D, Aufgabe 1). Vorher:
       background: #d92d20; color: #fff;  ... text-transform: uppercase;
     Drei Gründe, alle gemessen:
     (1) #d92d20 war die einzige gesättigt rote Fläche der ganzen Seite und
         kam im Live-Bestand GENAU EINMAL vor - hier. Es war nicht einmal das
         Systemrot des Hauses (--tc-err: #A33327), sondern ein eigener Ton
         ohne zweite Verwendung. Rot heißt im übrigen System Fehler; gemeint
         ist eine Einordnung. Jetzt trägt das Abzeichen den EINEN Akzent.
     (2) Kontrast steigt: 4,83:1 -> 7,15:1 hell, 5,45:1 dunkel (WCAG).
     (3) Der feste Wert machte den Dunkelmodus NICHT mit - das Abzeichen war
         die einzige Stelle der Seite, die in beiden Schemata gleich aussah.
         Über die Variablen folgt es jetzt von selbst.
     text-transform: none, weil der längere Wortlaut in Versalien 204 px von
     375 px belegte; ohne sind es 182 px (gemessen am Geräte-Viewport). */
  background: var(--tc-accent); color: var(--tc-accent-on);
  font-size: var(--tc-fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: none;
  padding: .32rem .65rem; border-radius: 999px;
  margin-left: var(--tc-sp-2); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
/* Closed-Beta-Verdrahtung (06.08.2026): das Badge ist jetzt ein Link
   auf /closed-beta.html — ohne Unterstrich, mit Hover-Zustand. */
a.tc-beta-badge, a.tc-beta-badge:visited { text-decoration: none; color: var(--tc-accent-on); }
a.tc-beta-badge:hover { background: var(--tc-accent-ink); }

.tc-header__nav { display: flex; gap: var(--tc-sp-1); flex-wrap: nowrap; white-space: nowrap; }
.tc-header__nav a, #tcNav a {
  color: var(--tc-muted); text-decoration: none;
  font-weight: 600; font-size: var(--tc-fs-sm);
  padding: .35rem .5rem; border-radius: var(--tc-radius-sm);
}
.tc-header__nav a:hover, #tcNav a:hover { color: var(--tc-accent-ink); background: var(--tc-accent-soft); }
.tc-header__nav a[aria-current="page"], #tcNav a[aria-current="page"] {
  color: var(--tc-accent-ink);
  background: var(--tc-accent-soft);
}
.tc-navtoggle { display: none; }
@media (max-width: 60rem) {
  .tc-navtoggle { display: inline-flex; }
  .tc-header__bar { max-width: var(--tc-wrap); flex-wrap: wrap; }
  #tcNav { display: none; width: 100%; }
  #tcNav.is-open { display: flex; flex-direction: column; padding-bottom: var(--tc-sp-2); white-space: normal; }
}
@media (max-width: 40rem) {
  .tc-header__tools { width: 100%; margin-left: 0; flex-wrap: wrap; white-space: normal; }
}

.tc-footer {
  border-top: 1px solid var(--tc-line);
  background: var(--tc-alt);
  padding: var(--tc-sp-5) 0 var(--tc-sp-4);
  margin-top: var(--tc-sp-6);
  font-size: var(--tc-fs-sm);
}
/* B-43: Ausgefüllte Reihen mit ausreichend breiten Linkspalten.
   Standard: Marke links über beide Reihen, daneben die normalen Gruppen.
   Startseite/Branchen: mit Berichten zwei vollständig belegte Dreierreihen.
   Der lange Ratgeberbereich erhält darunter eine eigene vollständige Reihe. */
.tc-footer__grid {
  display: grid; gap: var(--tc-sp-4);
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
}
.tc-footer__grid > .tc-footer__col:first-child { grid-row: span 2; }
.tc-footer__grid--with-reports > .tc-footer__col:first-child { grid-row: auto; }
/* AC: eine Fusszeile fuer alle Seiten - Marke + Produkt + Branchen / Ratgeber + Kontakt + Rechtliches, zwei volle Reihen.
   Der Markentext bekommt seine Farbe aus dem Stylesheet statt inline, damit er auch auf dem hellen
   Basis-Footer (Seiten ohne .ux0505, z. B. berufsgeheimnis.html) lesbar bleibt.
   08.09.2026: der Modifikator --ordnung ist durch --vier ersetzt (Footer-Neuordnung, ganz unten
   in diesem Abschnitt). Seine Regel stand hier und ist dort mit uebernommen. */
.tc-footer__blurb { color: var(--tc-muted); }
.tc-footer__grid > .tc-footer__col { min-width: 0; overflow-wrap: anywhere; }
.tc-footer__col--ratgeber { grid-column: 1 / -1; }
@media (max-width: 60rem) {
  .tc-footer__grid { grid-template-columns: 1fr 1fr; }
  .tc-footer__grid > .tc-footer__col:first-child { grid-row: auto; }
}
@media (max-width: 40rem) { .tc-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.tc-footer__col h4 { font-size: var(--tc-fs-sm); text-transform: uppercase; letter-spacing: .05em; color: var(--tc-faint); }
.tc-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tc-sp-1); }
/* B-44: Ratgeber verwendet ausschließlich das Mehrspaltenmodell. */
.tc-footer__col .tc-footer__ratgeber-links {
  display: block; column-count: 2; column-gap: 2.5rem;
}
.tc-footer__ratgeber-links > li { break-inside: avoid; margin-bottom: var(--tc-sp-1); }
@media (max-width: 40rem) { .tc-footer__col .tc-footer__ratgeber-links { column-count: 1; } }
.tc-footer__trust { display: flex; flex-wrap: wrap; gap: var(--tc-sp-2); margin-top: var(--tc-sp-4); }
.tc-footer__bottom {
  border-top: 1px solid var(--tc-line);
  margin-top: var(--tc-sp-4); padding-top: var(--tc-sp-3);
  color: var(--tc-faint); font-size: var(--tc-fs-xs);
  display: flex; flex-wrap: wrap; gap: var(--tc-sp-2);
}

/* --------------------------------------------------------------------------
   FOOTER-NEUORDNUNG 08.09.2026
   Grundlage: Docs\berichte\footer-neuordnung-bericht-2026-09-08.md, Abschnitt 1
   ("Vorschlag B"). Vier Spalten statt sechs gleichrangiger Bloecke:
     1 Marke · 2 Produkt + Ratgeber & Hilfe · 3 Branchen + Kontakt
     · 4 Rechtliches (intern zweispaltig, dadurch halb so hoch)
   Ratgeber und Kontakt stehen als Unterblock IN ihrer Spalte und bewusst NICHT
   auf gleicher Hoehe zueinander - das haelt den Fuss niedrig.

   Diese Regeln stehen ABSICHTLICH am Ende des Abschnitts. Sie haben dieselbe
   Spezifitaet wie die Grundregeln darueber und gewinnen nur ueber die
   Quellreihenfolge - auch in den Media-Queries.

   ALLES HIER HAENGT AN DEN KLASSEN tc-footer--vier / tc-footer__grid--vier,
   die AUSSCHLIESSLICH die 88 oeffentlichen Seiten tragen. Das ist Absicht und
   war eine Korrektur: eine Bindung an :not([data-fuss]) haette zwei fremde
   Flaechen mitgenommen, ohne dass eine ihrer Dateien angefasst wird -
     * die 7 Seiten des angemeldeten Bereichs (data-fuss="konto") und
     * die live liegende admin.html, die es in diesem Baum gar nicht gibt, die
       aber dasselbe assets/titancore.css laedt (Zeile 45 dort) und
       <footer class="tc-footer"> OHNE data-fuss traegt. Das Deploy schliesst
       admin.html aus, das Stylesheet aber nicht.
   Eine Klasse am <footer> ist der einzige Weg, der beide sicher draussen laesst.
   -------------------------------------------------------------------------- */
.tc-footer--vier { padding: 1.375rem 0 .75rem; }
/* Die Spalten sind NICHT gleich breit. Alle Zahlen sind IM FUSS gemessen
   (14 px, "Source Sans 3"), 1440 px, Rasterbreite 1007,6 px ohne Abstaende.
   Laengstes ununterbrechbares Wort je Spalte, im schlimmsten der vier
   geprueften Schriftschnitte (Hausschrift / system-ui / Segoe UI / Arial):
     1 Marke      "Kernverarbeitung:"          111,3 px  (Zeichen gesamt 230,5)
     2 Produkt    "Datenschutz"                 77,8 px
     3 Branchen   "datenschutz@titancore24.de" 178,5 px
     4 Recht      "Auftragsverarbeitung"       130,9 px
   Daraus:
   - Spalte 4 = 1.3fr = 297,7 px, damit eine zweispaltige Rechtsliste
     141,9 px je Zelle bekommt. Bei vier GLEICHEN Spalten waeren es 102,5 px -
     dann bricht "Auftragsverarbeitung" MITTEN INS WORT, weil
     .tc-footer__grid > .tc-footer__col overflow-wrap: anywhere traegt.
   - Spalte 1 = 1.1fr = 251,9 px, damit das breiteste Vertrauenszeichen
     (230,5 px) einzeilig bleibt.
   - Spalte 3 hat einen BODEN von 11.5rem = 184 px. Ohne ihn faellt sie in
     schmalen Vierspaltenlagen unter 178,5 px, und die lange E-Mail-Adresse
     bricht mitten im Wort - in der Ersatzschrift schon bei 961 px.
   ACHTUNG, teuer gelernt: eine fruehere Fassung dieses Kommentars nannte
   149,4 px fuer "Auftragsverarbeitung". Das war IM BODY gemessen (17 px), nicht
   im Fuss (14 px). Wer hier misst, haengt den Messling in den Fuss. */
.tc-footer__grid--vier {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(11.5rem, 1fr) minmax(0, 1.3fr);
  gap: 1.125rem 1.875rem;
}
/* uebernommen vom abgeloesten --ordnung: die Marke belegt eine Zeile, nicht zwei */
.tc-footer__grid--vier > .tc-footer__col:first-child { grid-row: auto; }
.tc-footer__grid--vier .tc-footer__col h3 { margin: 0 0 .5rem; }
.tc-footer__grid--vier .tc-footer__col ul { gap: .375rem; }
/* Unterblock: Ratgeber & Hilfe unter Produkt, Kontakt unter Branchen. */
.tc-footer__sub { margin-top: .75rem; padding-top: .7rem; border-top: 1px solid var(--tc-line); }
/* Rechtliches: dieselben sieben Verweise, nur zweispaltig gesetzt.
   auto-fit statt "1fr 1fr": zwei Spuren entstehen NUR, wenn beide mindestens
   8.5rem (136 px) breit werden - der Bedarf liegt bei 130,9 px im ungueltigsten
   der vier geprueften Schriftschnitte. Wird es enger, faellt die Liste von
   selbst auf eine Spalte zurueck, statt Woerter zu zerschneiden. Eine feste
   Umbruchgrenze koennte das nicht: die nutzbare Breite haengt an --tc-wrap und
   an der geladenen Schrift, nicht am Fenster. */
.tc-footer__col ul.tc-footer__recht {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .375rem .875rem;
  /* Deckel auf ZWEI Spuren: drei braeuchten 3x136 + 2x14 = 436 px, der Deckel
     liegt mit 416 px darunter, zwei brauchen 286 px und passen. Ohne ihn wuerde
     die Liste im Einspaltenraster (dort ist die Spalte 585 px breit) von selbst
     dreispaltig - beschlossen sind zwei. */
  max-width: 26rem;
}
/* Die drei Vertrauenszeichen untereinander statt inline mit ungleichem Umbruch. */
.tc-footer__trust.tc-footer__trust--liste {
  flex-direction: column; flex-wrap: nowrap; gap: .375rem; margin-top: .75rem;
}
.tc-footer--vier .tc-footer__blurb { margin: .55rem 0 .6rem; max-width: 32ch; }
.tc-footer--vier .tc-footer__bottom {
  margin-top: .75rem; padding-top: .625rem; gap: 1rem;
}
@media (max-width: 60rem) { .tc-footer__grid--vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .tc-footer__grid--vier { grid-template-columns: minmax(0, 1fr); } }
/* Fuer Rechtliches braucht es hier KEINE Umbruchgrenze mehr - das auto-fit
   oben regelt die Spaltenzahl an der tatsaechlich verfuegbaren Breite. */

/* --------------------------------------------------------------------------
   8. FORMULARE
   -------------------------------------------------------------------------- */
.tc-field { margin-bottom: var(--tc-sp-3); }
.tc-field__label { display: block; font-weight: 600; margin-bottom: var(--tc-sp-1); }
.tc-field__hint { font-size: var(--tc-fs-xs); color: var(--tc-muted); margin-top: var(--tc-sp-1); }
.tc-field__err { color: var(--tc-err); font-size: var(--tc-fs-sm); margin-top: var(--tc-sp-1); }
.tc-fieldrow { display: flex; gap: var(--tc-sp-3); flex-wrap: wrap; }
.tc-fieldrow > * { flex: 1 1 14rem; min-width: 0; }

.tc-input, .tc-select, .tc-textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font: inherit;
  color: var(--tc-ink);
  background: var(--tc-card);
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-radius-sm);
  padding: .55rem .75rem;
}
.tc-input:focus, .tc-select:focus, .tc-textarea:focus {
  border-color: var(--tc-accent);
  outline: 2px solid transparent;
}
.tc-textarea { min-height: 7rem; resize: vertical; }
.tc-input::placeholder { color: var(--tc-faint); }

.tc-check {
  display: flex; gap: var(--tc-sp-2); align-items: flex-start;
  cursor: pointer;
}
.tc-check input { margin-top: .3rem; accent-color: var(--tc-accent); width: 1.05rem; height: 1.05rem; }

.tc-configbox {
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-alt);
  padding: var(--tc-sp-3);
}
.tc-configbox h4 { margin: 0 0 var(--tc-sp-1); font-size: var(--tc-fs-sm); }

/* --------------------------------------------------------------------------
   9. TABELLEN
   -------------------------------------------------------------------------- */
.tc-tablewrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tc-fs-sm);
}
.tc-table caption { text-align: left; }
.tc-table th, .tc-table td {
  text-align: left;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--tc-line);
  vertical-align: top;
}
.tc-table thead th {
  font-size: var(--tc-fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tc-muted);
  border-bottom: 1px solid var(--tc-line-strong);
}
.tc-table tbody tr:hover { background: var(--tc-accent-soft); }
.tc-table__empty { text-align: center; color: var(--tc-muted); padding: var(--tc-sp-4); }

@media (max-width: 40rem) {
  .tc-card { padding: var(--tc-sp-3); }
  .tc-card__head { flex-wrap: wrap; }
  /* Manche Rechts- und Wissensseiten besitzen noch keine äußere
     .tc-tablewrap. Die Tabelle selbst übernimmt dort den Scrollbereich. */
  .tc-table { display: block; max-width: 100%; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   10. HINWEISE, CHIPS, STATUS
   -------------------------------------------------------------------------- */
.tc-note {
  display: flex; gap: var(--tc-sp-2); align-items: flex-start;
  border: 1px solid var(--tc-line);
  border-left-width: var(--tc-keyline);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card);
  padding: var(--tc-sp-3);
  font-size: var(--tc-fs-sm);
}
.tc-note__icon { flex: 0 0 auto; line-height: 1.4; }
.tc-note p:last-child { margin-bottom: 0; }
.tc-note--info { border-left-color: var(--tc-accent); background: var(--tc-info-bg); }
.tc-note--ok { border-left-color: var(--tc-ok); background: var(--tc-ok-bg); }
.tc-note--warn { border-left-color: var(--tc-wait); background: var(--tc-wait-bg); }
.tc-note--danger { border-left-color: var(--tc-err); background: var(--tc-err-bg); }

.tc-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  background: var(--tc-card);
  padding: .2rem .75rem;
  font-size: var(--tc-fs-sm);
  color: var(--tc-muted);
  text-decoration: none;
}
a.tc-chip:hover { border-color: var(--tc-accent); color: var(--tc-accent-ink); }
.tc-chip--accent { border-color: var(--tc-accent); color: var(--tc-accent); }
.tc-chip--ok { border-color: var(--tc-ok); color: var(--tc-ok); }
.tc-chiprow { display: flex; flex-wrap: wrap; gap: var(--tc-sp-1); }

.tc-status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--tc-fs-sm); font-weight: 600;
  padding: .15rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--tc-line);
}
.tc-dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.tc-status--ok { color: var(--tc-ok); border-color: var(--tc-ok); background: var(--tc-ok-bg); }
.tc-status--wait { color: var(--tc-wait); border-color: var(--tc-wait); background: var(--tc-wait-bg); }
/* P11 (RC76, P19): .tc-status--warn wurde in admin.html verwendet (Hinweiszeilen, „wartend“, „Umsatz unvollständig"), hatte aber keine Regel.
   Gleiche Warnfarben wie .tc-note--warn / .tc-status--wait. */
.tc-status--warn { color: var(--tc-wait); border-color: var(--tc-wait); background: var(--tc-wait-bg); }
.tc-status--err { color: var(--tc-err); border-color: var(--tc-err); background: var(--tc-err-bg); }
.tc-status--run { color: var(--tc-accent); border-color: var(--tc-accent); background: var(--tc-info-bg); }

.tc-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--tc-accent);
  border-radius: 999px;
  background: var(--tc-accent-soft);
  color: var(--tc-accent-ink);
  font-weight: 700; font-size: var(--tc-fs-sm);
  padding: .25rem .85rem;
}

.tc-spinner {
  display: inline-block;
  width: 1.1rem; height: 1.1rem;
  border: 2px solid var(--tc-line);
  border-top-color: var(--tc-accent);
  border-radius: 50%;
  animation: tc-spin .8s linear infinite;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }

.tc-toast {
  position: fixed; left: 50%; bottom: var(--tc-sp-4); transform: translateX(-50%);
  z-index: 70;
  max-width: min(34rem, calc(100vw - 2rem));
  border: 1px solid var(--tc-line-strong);
  border-left-width: var(--tc-keyline);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card);
  padding: var(--tc-sp-3) var(--tc-sp-4);
  font-size: var(--tc-fs-sm); font-weight: 600;
}
.tc-toast--ok { border-left-color: var(--tc-ok); }
.tc-toast--info { border-left-color: var(--tc-accent); }
.tc-toast--err { border-left-color: var(--tc-err); }

.tc-overlay {
  position: fixed; inset: 0; z-index: 65;
  background: var(--tc-paper);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--tc-sp-3);
  text-align: center; padding: var(--tc-sp-4);
}

.tc-modal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(22, 19, 17, .45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--tc-sp-4);
}
.tc-modal__box {
  background: var(--tc-card);
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-radius);
  max-width: 34rem; width: 100%;
  padding: var(--tc-sp-4);
}
.tc-modal__head { display: flex; align-items: center; justify-content: space-between; }
.tc-modal__close { border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--tc-muted); }

/* AUFTRAG Passwortfeld-m04-uf5 (10.09.2026): Sicherheitsabfrage zeigt das
   eingegebene Passwort einmal in Klarschrift — fuehrende/abschliessende
   Leerzeichen sind sonst unsichtbar und der haeufigste Tippfehler. */
.tc-pwbox {
  background: var(--tc-alt);
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-radius-sm);
  padding: var(--tc-sp-3);
  font-size: 1.05rem;
  white-space: pre-wrap;
  word-break: break-all;
  margin: var(--tc-sp-2) 0 var(--tc-sp-3);
}
.tc-pw-leerblock { background: var(--tc-wait-bg); outline: 1px solid var(--tc-wait); border-radius: 3px; }
.tc-pw-leer { opacity: .7; }

/* --------------------------------------------------------------------------
   11. KENNZAHLEN, PREISE
   -------------------------------------------------------------------------- */
.tc-kpis { display: grid; gap: var(--tc-sp-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tc-kpi {
  background: var(--tc-card);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  padding: var(--tc-sp-3);
}
.tc-kpi__label {
  font-size: var(--tc-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--tc-muted);
}
.tc-kpi__value {
  font-family: var(--tc-font-head);
  font-size: 1.45rem; font-weight: 700;
  margin-top: var(--tc-sp-1);
}

.tc-pricebar {
  border: 1px solid var(--tc-accent);
  border-left-width: var(--tc-keyline);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-accent-soft);
  padding: var(--tc-sp-3) var(--tc-sp-4);
  font-size: var(--tc-fs-lead);
}

/* Aufladepakete */
.tc-packs { display: grid; gap: var(--tc-sp-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tc-pack {
  position: relative;
  display: block;
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  background: var(--tc-card);
  padding: var(--tc-sp-3);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.tc-pack:hover { border-color: var(--tc-accent); }
.tc-pack.is-selected {
  border-color: var(--tc-accent);
  border-left-width: var(--tc-keyline);
  background: var(--tc-accent-soft);
}
.tc-pack__flag {
  position: absolute; top: -.7rem; right: var(--tc-sp-2);
  background: var(--tc-accent); color: var(--tc-accent-on);
  font-size: var(--tc-fs-xs); font-weight: 700;
  padding: .1rem .55rem; border-radius: 999px;
}
.tc-pack__amount { font-family: var(--tc-font-head); font-size: 1.35rem; font-weight: 700; }
.tc-pack__tokens { color: var(--tc-accent-ink); font-weight: 600; margin-top: .1rem; }
.tc-pack__meta { color: var(--tc-muted); font-size: var(--tc-fs-sm); margin-top: var(--tc-sp-1); }

/* --------------------------------------------------------------------------
   12. OPTIONSKATALOG (Karten, Gruppen)
   -------------------------------------------------------------------------- */
.tc-optgrid { display: grid; gap: var(--tc-sp-3); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }

.tc-opt {
  display: flex; flex-direction: column; gap: var(--tc-sp-2);
  width: 100%; text-align: left;
  font: inherit;
  background: var(--tc-card);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius);
  padding: var(--tc-sp-3);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.tc-opt:hover { border-color: var(--tc-accent); }
.tc-opt.is-selected {
  border-color: var(--tc-accent);
  border-left-width: var(--tc-keyline);
  background: var(--tc-accent-soft);
}
.tc-opt[disabled], .tc-opt.is-locked { cursor: not-allowed; opacity: .62; }
.tc-opt__top { display: flex; align-items: center; gap: var(--tc-sp-2); }
.tc-opt__icon { flex: 0 0 auto; display: inline-flex; }
.tc-opt__title { font-weight: 700; font-size: var(--tc-fs-base); }
.tc-opt__check {
  position: absolute;
  visibility: hidden;
}
.tc-opt.is-selected .tc-opt__check { visibility: visible; color: var(--tc-accent); }
.tc-opt__desc { color: var(--tc-muted); font-size: var(--tc-fs-sm); }
.tc-opt__example { color: var(--tc-faint); font-size: var(--tc-fs-xs); }
.tc-opt__foot {
  margin-top: auto;
  display: flex; align-items: baseline; gap: var(--tc-sp-2);
  border-top: 1px solid var(--tc-line);
  padding-top: var(--tc-sp-2);
}
.tc-opt__price { font-weight: 700; color: var(--tc-accent-ink); font-size: var(--tc-fs-lead); }
.tc-opt__unit { color: var(--tc-faint); font-size: var(--tc-fs-xs); }
/* BP-6: Folgeschritt-Schalter in der Optionskarte (Kette bis 3 Schritte) */
.tc-opt__chain {
  margin-left: auto;
  font-size: var(--tc-fs-xs); font-weight: 700;
  color: var(--tc-accent); cursor: pointer;
  border: 1px solid var(--tc-accent); border-radius: 999px;
  padding: .1rem .55rem; white-space: nowrap;
}
.tc-opt__chain:hover { background: var(--tc-accent); color: #fff; }
.tc-opt__chain--on { background: var(--tc-accent); color: #fff; }
.tc-opt__chain--off {
  color: var(--tc-faint); border-color: var(--tc-line); cursor: not-allowed;
}
.tc-opt__chain--off:hover { background: none; color: var(--tc-faint); }
.tc-opt.is-chain { border-color: var(--tc-accent); box-shadow: inset 0 0 0 1px var(--tc-accent); }
.tc-opt__soon {
  color: var(--tc-wait); font-weight: 700; font-size: var(--tc-fs-sm);
}

.tc-optgroup { border: 1px solid var(--tc-line); border-radius: var(--tc-radius); background: var(--tc-card); margin-bottom: var(--tc-sp-3); }
.tc-optgroup__head {
  display: flex; align-items: center; gap: var(--tc-sp-2);
  padding: var(--tc-sp-3) var(--tc-sp-4);
  cursor: pointer;
  font-family: var(--tc-font-head);
  font-size: var(--tc-fs-lead); font-weight: 600;
  list-style: none;
}
.tc-optgroup__head::-webkit-details-marker { display: none; }
.tc-optgroup__count { margin-left: auto; font-family: var(--tc-font-ui); font-size: var(--tc-fs-sm); color: var(--tc-faint); font-weight: 400; }
.tc-optgroup__arrow { transition: transform .15s ease; color: var(--tc-muted); }
.tc-optgroup[open] .tc-optgroup__arrow { transform: rotate(180deg); }
.tc-optgroup__body { padding: 0 var(--tc-sp-4) var(--tc-sp-4); }
.tc-optgroup__lead { color: var(--tc-muted); font-size: var(--tc-fs-sm); margin-bottom: var(--tc-sp-3); }

/* --------------------------------------------------------------------------
   13. WIZARD (Schritte, Zubuchungen, mitlaufender Preis)
   -------------------------------------------------------------------------- */
.tc-steps {
  display: flex; align-items: center; gap: var(--tc-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--tc-sp-4);
}
.tc-step {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--tc-fs-sm); font-weight: 600;
  color: var(--tc-faint);
  border: 1px solid var(--tc-line);
  border-radius: 999px;
  background: var(--tc-card);
  padding: .3rem .85rem;
  cursor: pointer;
}
.tc-step.is-active { color: var(--tc-accent-ink); border-color: var(--tc-accent); background: var(--tc-accent-soft); }
.tc-step.is-done { color: var(--tc-ok); border-color: var(--tc-ok); }
.tc-wizard__sep { color: var(--tc-faint); }

/* Zubuchungen: Zeilen statt Kacheln — Preis steht rechts, spaltengenau. */
.tc-addon {
  display: flex; align-items: flex-start; gap: var(--tc-sp-2);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card);
  padding: var(--tc-sp-2) var(--tc-sp-3);
  margin-bottom: var(--tc-sp-2);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.tc-addon:hover { border-color: var(--tc-accent); }
.tc-addon.is-selected { border-color: var(--tc-accent); border-left-width: var(--tc-keyline); background: var(--tc-accent-soft); }
.tc-addon.is-locked { cursor: not-allowed; opacity: .62; }
.tc-addon input { margin-top: .25rem; accent-color: var(--tc-accent); }
.tc-addon__body { flex: 1 1 auto; }
.tc-addon__label { font-weight: 600; }
.tc-addon__hint { font-size: var(--tc-fs-xs); color: var(--tc-muted); }
.tc-addon__price { font-weight: 700; color: var(--tc-accent-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tc-addon__soon { color: var(--tc-wait); font-weight: 700; font-size: var(--tc-fs-sm); white-space: nowrap; }

/* Inklusive-Block: "was ist schon dabei" — Vertrauensbaustein. */
.tc-included {
  border: 1px dashed var(--tc-line-strong);
  border-radius: var(--tc-radius-sm);
  padding: var(--tc-sp-3);
  background: var(--tc-alt);
  font-size: var(--tc-fs-sm);
}
.tc-included ul { margin: var(--tc-sp-1) 0 0; padding-left: 1.1rem; }

/* Mitlaufender Preis — der "Wow"-Träger: ruhig, aber unübersehbar. */
.tc-running {
  position: sticky; top: var(--tc-sp-3);
  border: 1px solid var(--tc-accent);
  border-left-width: var(--tc-keyline);
  border-radius: var(--tc-radius);
  background: var(--tc-card);
  padding: var(--tc-sp-4);
}
.tc-running__label { font-size: var(--tc-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tc-muted); }
.tc-running__value { font-family: var(--tc-font-head); font-size: 1.9rem; font-weight: 700; color: var(--tc-accent-ink); font-variant-numeric: tabular-nums; }
.tc-running__rows { font-size: var(--tc-fs-sm); color: var(--tc-muted); margin-top: var(--tc-sp-2); }
.tc-running__rows td { padding: .15rem 0; }

/* --------------------------------------------------------------------------
   14. DATEIEN, LISTEN
   -------------------------------------------------------------------------- */
.tc-drop {
  border: 2px dashed var(--tc-line-strong);
  border-radius: var(--tc-radius);
  background: var(--tc-card);
  padding: var(--tc-sp-5);
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.tc-drop:hover, .tc-drop.is-over { border-color: var(--tc-accent); background: var(--tc-accent-soft); }
.tc-drop__icon { color: var(--tc-accent); margin-bottom: var(--tc-sp-2); }

.tc-filelist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tc-sp-1); }
.tc-filelist li {
  display: flex; align-items: center; gap: var(--tc-sp-2);
  border: 1px solid var(--tc-line);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card);
  padding: .45rem .7rem;
  font-size: var(--tc-fs-sm);
}
/* UX-003: Lange Dateinamen duerfen Groesse und Loesch-Button nicht
   aus der Zeile druecken — Name wird gekuerzt, Rest bleibt sichtbar. */
.tc-filelist li > span:first-child {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-filelist li > .tc-iconbtn { flex: 0 0 auto; }

.tc-todo { list-style: none; padding: 0; margin: 0; }
.tc-todo li { padding-left: 1.4rem; position: relative; margin-bottom: var(--tc-sp-1); }
.tc-todo li::before { content: '—'; position: absolute; left: 0; color: var(--tc-accent); }

/* --------------------------------------------------------------------------
   15. TOOLTIP, FAQ, ADV, RECHTSTEXTE, HERO
   -------------------------------------------------------------------------- */
.tc-tip { position: relative; display: inline-flex; }
.tc-tip__btn {
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  border: 1px solid var(--tc-line-strong);
  background: var(--tc-card);
  color: var(--tc-muted);
  font-size: .7rem; font-weight: 700;
  cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.tc-tip__btn:hover { border-color: var(--tc-accent); color: var(--tc-accent); }
.tc-tip__box {
  position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%);
  width: 16rem;
  background: var(--tc-card);
  border: 1px solid var(--tc-line-strong);
  border-radius: var(--tc-radius-sm);
  padding: var(--tc-sp-2) var(--tc-sp-3);
  font-size: var(--tc-fs-xs); font-weight: 400;
  color: var(--tc-ink);
  visibility: hidden; opacity: 0;
  transition: opacity .12s ease;
  z-index: 40;
  text-align: left;
}
.tc-tip.is-open .tc-tip__box { visibility: visible; opacity: 1; }

.tc-faq { border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm); background: var(--tc-card); margin-bottom: var(--tc-sp-2); }
.tc-faq summary { padding: var(--tc-sp-3); cursor: pointer; font-weight: 600; }
.tc-faq__body { padding: 0 var(--tc-sp-3) var(--tc-sp-3); color: var(--tc-muted); }

.tc-adv summary { color: var(--tc-accent); cursor: pointer; font-size: var(--tc-fs-sm); font-weight: 600; }

.tc-legal h2 { margin-top: var(--tc-sp-5); }
.tc-legal__meta { color: var(--tc-faint); font-size: var(--tc-fs-sm); }
.tc-legal__toc { border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm); background: var(--tc-card); padding: var(--tc-sp-3); font-size: var(--tc-fs-sm); }

.tc-eyebrow {
  font-size: var(--tc-fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--tc-accent);
  margin-bottom: var(--tc-sp-2);
}

.tc-hero { padding: var(--tc-sp-6) 0; }
.tc-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); }

/* Linien-Icons (SVG, erben die Textfarbe) */
.tc-icon { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; }
.tc-icon svg { display: block; width: 100%; height: 100%; }

/* Beweis-Kacheln (sechs Fakten) */
.tc-proof { display: grid; gap: var(--tc-sp-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.tc-proof__tile {
  border: 1px solid var(--tc-line);
  border-top: var(--tc-keyline) solid var(--tc-accent);
  border-radius: var(--tc-radius-sm);
  background: var(--tc-card);
  padding: var(--tc-sp-3);
}
.tc-proof__tile h3 { font-family: var(--tc-font-ui); font-size: var(--tc-fs-base); font-weight: 700; margin-bottom: var(--tc-sp-1); }

/* Vertrauenssiegel (07.08.2026) — SVG primaer, PNG als Fallback */
.tc-siegel-band { padding: var(--tc-sp-6) 0 var(--tc-sp-5); }
.tc-siegel-band img { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; }
.tc-recht03-trust {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--tc-line);
  border-radius: 14px;
  background: var(--tc-surface);
  color: var(--tc-ink-muted);
  line-height: 1.55;
  text-align: center;
}
.tc-recht03-trust strong { color: var(--tc-ink); }
.tc-siegel-rund { display: block; width: 150px; height: auto; margin: 0 auto var(--tc-sp-3); }
.tc-siegel-kachel { display: block; width: 100%; max-width: 480px; height: auto; margin: var(--tc-sp-3) auto 0; }
@media (max-width: 640px) {
  .tc-siegel-rund { width: 120px; }
}


/* ==========================================================================
   HINTERLEGUNG VON KUNDENDATEIEN (P16-Frontend, 18.08.2026)
   Ein Baustein, drei Zwecke (Logo / Signaturbild / Referenztabelle).
   Bewusst schlicht: er sitzt sowohl in der Einstellungs-Karte als auch
   kompakt im Auftragsformular und darf beides nicht sprengen.
   ========================================================================== */
.tc-hl { border: 1px solid var(--tc-line); border-radius: var(--tc-radius); padding: var(--tc-sp-3); }
.tc-hl + .tc-hl { margin-top: var(--tc-sp-3); }
.tc-hl__kopf { display: flex; align-items: center; gap: var(--tc-sp-2); }
.tc-hl__titel { font-size: .98rem; }
.tc-hl__balken { height: 6px; border-radius: 999px; background: var(--tc-line); overflow: hidden; }
.tc-hl__balken > span { display: block; height: 100%; width: 0; background: var(--tc-accent); transition: width .18s linear; }
.tc-hl__fehler { color: var(--tc-err); }
/* Kompaktfassung im Auftragsformular: keine doppelte Rahmung in der
   ohnehin gerahmten Einstellungs-Box. */
.tc-cfgbox__in .tc-hl { border-style: dashed; padding: var(--tc-sp-2); }

/* P11 (RC81, Robin 08.10.2026): Upload-/Download-Fenster (T.fortschrittFenster in titancore.js). */
.tc-fw { z-index: 95; }
.tc-fw__box { max-width: 36rem; max-height: 90vh; overflow: auto; }
.tc-fw__box:focus { outline: none; }
.tc-fw__titel { margin: 0 0 var(--tc-sp-2); font-size: 1.15rem; }
.tc-fw__label { display: flex; justify-content: space-between; gap: .75rem; font-size: .92rem; }
.tc-fw__name { overflow-wrap: anywhere; font-weight: 600; }
.tc-fw__label > span:last-child { white-space: nowrap; }
.tc-fw__bar { height: .85rem; background: var(--tc-alt); border: 1px solid var(--tc-line-strong); border-radius: 1rem; overflow: hidden; margin-top: .3rem; }
.tc-fw__bar > span { display: block; height: 100%; width: 0; background: var(--tc-accent); transition: width .15s; }
.tc-ki-hinweis { margin: var(--tc-sp-2) 0 0; padding: .45rem .7rem; border-left: 4px solid var(--tc-accent); background: var(--tc-accent-soft); color: var(--tc-ink); font-size: .88rem; border-radius: 0 .4rem .4rem 0; }
.tc-ki-tag { display: inline-block; margin-left: .4rem; padding: 0 .35rem; border: 1px solid var(--tc-accent); border-radius: .3rem; color: var(--tc-accent-ink); font-size: .68rem; font-weight: 700; letter-spacing: .02em; vertical-align: .08rem; }
.tc-fw__gesamt--unbestimmt .tc-fw__bar { position: relative; }
.tc-fw__gesamt--unbestimmt .tc-fw__bar > span { width: 35%; position: absolute; left: 0; animation: tc-fw-lauf 1.3s ease-in-out infinite alternate; }
@keyframes tc-fw-lauf { from { left: 0; } to { left: 65%; } }
@media (prefers-reduced-motion: reduce) { .tc-fw__gesamt--unbestimmt .tc-fw__bar > span { animation: none; width: 100%; opacity: .55; } }
.tc-fw__liste { list-style: none; margin: var(--tc-sp-3) 0 0; padding: 0; max-height: 14rem; overflow: auto; display: grid; gap: .8rem; }
.tc-fw__zeile--fertig .tc-fw__bar > span { background: var(--tc-ok); }
.tc-fw__zeile--fehler .tc-fw__bar > span { background: var(--tc-err); }
.tc-fw__zeile--fehler .tc-fw__zustand { color: var(--tc-err); font-weight: 600; }
.tc-fw__status { margin-top: var(--tc-sp-3); padding: .7rem .9rem; border: 1px solid var(--tc-line-strong); border-left-width: 4px; border-radius: var(--tc-radius-sm); font-weight: 600; overflow-wrap: anywhere; }
.tc-fw__status--ok { border-left-color: var(--tc-ok); background: var(--tc-ok-bg); }
.tc-fw__status--err { border-left-color: var(--tc-err); background: var(--tc-err-bg); }
.tc-fw .tc-btn { min-height: 2.75rem; min-width: 2.75rem; }
@media (prefers-reduced-motion: reduce) { .tc-fw__bar > span { transition: none; } }

/* --------------------------------------------------------------------------
   FOOTER: Zahlungsarten als Logo-Leiste (Robin 10.10.2026)
   Reine CSS-Zierleiste in der Bodenzeile, keine Markup-Aenderung, kein
   Platzverbrauch auf breiten Bildschirmen. Logos lokal: assets/img/zahlarten
   (Wikimedia Commons, als gemeinfrei markiert; Markenrechte bei den Firmen).
   -------------------------------------------------------------------------- */
.tc-footer__bottom::after {
  content: "";
  flex: 0 0 auto; margin-left: auto; align-self: center;
  width: 10.5rem; height: 1.1rem;
  background-repeat: no-repeat;
  background-image:
    url(img/zahlarten/visa.svg), url(img/zahlarten/mastercard.svg), url(img/zahlarten/applepay.svg),
    url(img/zahlarten/googlepay.svg), url(img/zahlarten/paypal.svg),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size:
    auto .45rem, auto .8rem, auto .5rem, auto .5rem, auto .45rem,
    1.9rem 1.1rem, 1.9rem 1.1rem, 1.9rem 1.1rem, 1.9rem 1.1rem, 1.9rem 1.1rem;
  background-position:
    .255rem .325rem, 2.585rem .15rem, 4.64rem .3rem, 6.735rem .3rem, 8.88rem .325rem,
    0 0, 2.15rem 0, 4.3rem 0, 6.45rem 0, 8.6rem 0;
  border-radius: 3px;
}
@media (max-width: 40rem) { .tc-footer__bottom::after { margin-left: 0; } }

/* P42_ADMIN_SCHALTER (RC88): gesperrte Optionen bleiben sichtbar, sind nicht bestellbar.
   Kein Absenken der Deckkraft des Textes (Kontrast): Kennzeichnung durch gestrichelten Rahmen,
   Textzeile und aria-disabled, nicht allein durch Farbe. */
.tc-gesperrt { border-style: dashed; cursor: not-allowed; }
.tc-gesperrt__hinweis { color: var(--tc-ink); font-weight: 600; }
.tc-btn.tc-btn--gesperrt, .tc-btn.tc-btn--gesperrt:hover { border-style: dashed; cursor: not-allowed; color: var(--tc-ink); border-color: var(--tc-line-strong); }
.tc-baum__opt.tc-gesperrt, .tc-kachel__opt.tc-gesperrt { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; }