/* ============================================================
   tokens.css — Design-Tokens aus Mockup-Iter1 (Vision-KI 8/10)
   Quelle: /srv/media/claude-scratch/reports/2026-06-07-A2-mockup-bsh-iter1.md
   Stand: 2026-06-07 (Subagent Implementer Block 1)

   Eigenstaendiges Token-Layer — wirkt ADDITIV zu site.css.
   Klassen-Praefix: .tk- ueberall ausser fuer die etablierten
   Marken-Custom-Properties (--c-*, --s-*, --ts-*) die als
   Erweiterung dienen.
   ============================================================ */

:root {
  /* phi-Spacing (modulare Skala aus Mockup) */
  --s-4: 4px;
  --s-6: 6px;
  --s-10: 10px;
  --s-16: 16px;
  --s-26: 26px;
  --s-42: 42px;
  --s-68: 68px;

  /* Typo: 5 Stufen (Mockup-Spezifikation) */
  --ts-tiny: 11px;
  --ts-base: 13px;
  --ts-lg: 16px;
  --ts-h2: 22px;
  --ts-h1: 28px;

  --font-display: "DM Serif Display", Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;

  /* 2 Akzent + Cream (Mockup-DNA, kompatibel mit bestehender purple-Welt) */
  --c-cream: #F6F2EA;
  --c-sage: #2B4A3E;
  --c-sage-50: #4A6B5C;
  --c-flieder: #2B4A3E;
  --c-fg: #1F2924;
  --c-fg-mute: #54615A;
  --c-line: #DFE6E0;
  --radius-tk: 6px;
}

/* === Eyebrow === */
.eyebrow-tk {
  font-size: var(--ts-tiny);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-fg-mute);
  font-family: var(--font-ui);
  font-weight: 600;
}

/* === Headings === */
.h1-tk {
  font-family: var(--font-display);
  font-size: var(--ts-h1);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.h2-tk {
  font-family: var(--font-display);
  font-size: var(--ts-h2);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.body-tk {
  font-family: var(--font-ui);
  font-size: var(--ts-base);
  line-height: 1.5;
}

/* === Buttons (CTA-Mockup-Konform) === */
.btn-primary-tk {
  background: var(--c-sage);
  color: var(--c-cream);
  padding: var(--s-10) var(--s-26);
  border-radius: var(--radius-tk);
  font-family: var(--font-ui);
  font-size: var(--ts-base);
  font-weight: 600;
  border: 0;
  text-decoration: none;
  display: inline-block;
  min-height: 52px;
  line-height: 32px;
}
.btn-primary-tk:hover { background: #213A30; }

.btn-secondary-tk {
  background: var(--c-cream);
  color: var(--c-sage);
  border: 1px solid var(--c-sage);
  padding: var(--s-10) var(--s-26);
  border-radius: var(--radius-tk);
  font-family: var(--font-ui);
  font-size: var(--ts-base);
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  min-height: 52px;
  line-height: 32px;
}

/* === Trust-Chip + Flieder-Dot (aus Mockup 1 Sektion "Trust-Chip") === */
.trust-chip-tk {
  font-size: var(--ts-tiny);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-fg-mute);
  font-family: var(--font-ui);
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
}
.flieder-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-flieder);
  display: inline-block;
  flex-shrink: 0;
}

/* === Markenslogan (Mockup 3, 1x pro Seite) === */
.markenslogan {
  font-family: var(--font-display);
  font-size: var(--ts-h2);
  letter-spacing: -0.02em;
  font-style: italic;
  color: var(--c-fg);
  max-width: 28em;
  line-height: 1.3;
  margin-top: var(--s-26);
}
.markenslogan::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-flieder);
  margin-right: var(--s-10);
  vertical-align: middle;
}

/* === Sticky-Mobile-CTA (Mockup 1+3 Bottom-Bar) ===
   Vorhandene .sticky-cta in site.css ist Desktop-Variante mit Single-Link.
   Diese tk-Variante: nur Mobile <=768px, 2 Buttons (Anrufen | Termin). */
.sticky-cta-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
  padding: var(--s-10) var(--s-16);
  box-shadow: 0 -4px 12px rgba(31, 32, 37, .08);
}
.sticky-cta-mobile-inner {
  display: flex;
  gap: var(--s-10);
  max-width: 480px;
  margin: 0 auto;
}
.sticky-cta-mobile a {
  flex: 1;
  text-align: center;
  padding: var(--s-10) var(--s-6);
  border-radius: var(--radius-tk);
  font-family: var(--font-ui);
  font-size: var(--ts-base);
  font-weight: 600;
  text-decoration: none;
  min-height: 44px;
  line-height: 24px;
}
.sticky-cta-mobile .call {
  background: var(--c-cream);
  border: 1px solid var(--c-sage);
  color: var(--c-sage);
}
.sticky-cta-mobile .termin {
  background: var(--c-sage);
  color: var(--c-cream);
  border: 1px solid var(--c-sage);
}
@media (max-width: 768px) {
  .sticky-cta-mobile { display: block; }
  body { padding-bottom: 76px; }
}

/* === Image-Slot-Defaults (CLS-Fix-Pflicht aus Brief) === */
.tk-img-slot {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: var(--c-cream);
}

/* === Preis-Anker (Mockup 1 Sub-Hero) === */
.preis-anker-tk {
  font-size: var(--ts-base);
  color: var(--c-fg-mute);
  text-align: center;
  font-family: var(--font-ui);
}

/* === Tel-Klick-Affordance === */
.tel-link-tk {
  color: var(--c-sage);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-ui);
}
.tel-link-tk:hover { text-decoration: underline; }