/*
 * TYCETOOLZ Components v2 — Apple-Anmutung in Dark/Gold
 * Stand 2026-05-14
 *
 * Komponenten werden erst aktiv, wenn V2-Markup verwendet wird (.tc-btn, .tc-card, .tc-eyebrow etc.).
 * Bis dahin: kein visueller Effekt auf bestehendes Markup.
 *
 * Anti-Pattern respektiert: kein Scale/Lift auf Hover (außer subtle), Animationen ≤300ms,
 * Gold nur als Akzent, font-weight max 700.
 */

@layer components {

  /* ===========================================================
   * BUTTONS — Apple-konform: kein Scale, kein Lift, nur Farb-Transition
   * =========================================================== */
  .tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 28px;
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    font-weight: var(--tc-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    border: none;
    border-radius: var(--tc-radius-sm);
    cursor: pointer;
    transition:
      background-color var(--tc-dur-fast) var(--tc-ease-standard),
      color var(--tc-dur-fast) var(--tc-ease-standard),
      border-color var(--tc-dur-fast) var(--tc-ease-standard);
    -webkit-tap-highlight-color: transparent;
  }

  .tc-btn:focus-visible {
    outline: var(--tc-focus-ring-width) solid var(--tc-focus-ring-color);
    outline-offset: var(--tc-focus-ring-offset);
  }

  .tc-btn--primary {
    background: var(--tc-color-accent);
    color: var(--tc-color-accent-text);
  }
  .tc-btn--primary:hover {
    background: var(--tc-color-accent-hover);
    color: var(--tc-color-accent-text);
  }

  .tc-btn--ghost {
    background: transparent;
    color: var(--tc-color-text-primary);
    border: 1.5px solid var(--tc-color-border);
    padding-block: 12.5px;
    padding-inline: 26.5px;
  }
  .tc-btn--ghost:hover {
    border-color: var(--tc-color-accent);
    color: var(--tc-color-accent);
  }

  /* CTA-Pair: Container für Hero-CTA-Group */
  .tc-cta-pair {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tc-space-2);
    margin-top: var(--tc-space-4);
  }

  /* ===========================================================
   * INLINE LINKS — Apple Underline-Animation
   * =========================================================== */
  .tc-link {
    color: var(--tc-color-accent);
    text-decoration: none;
    background-image: linear-gradient(to right, currentColor, currentColor);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition:
      background-size 250ms var(--tc-ease-out),
      color var(--tc-dur-fast) var(--tc-ease-standard);
  }
  .tc-link:hover {
    background-size: 100% 1px;
    color: var(--tc-color-accent-hover);
  }

  /* Pfeil-Link "Standardmodelle ansehen →" */
  .tc-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tc-color-text-primary);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    font-weight: var(--tc-weight-semibold);
    text-decoration: none;
    transition: color var(--tc-dur-fast) var(--tc-ease-standard);
  }
  .tc-link-arrow::after {
    content: '→';
    display: inline-block;
    transition: transform var(--tc-dur-fast) var(--tc-ease-out);
  }
  .tc-link-arrow:hover {
    color: var(--tc-color-accent);
  }
  .tc-link-arrow:hover::after {
    transform: translateX(4px);
  }

  /* ===========================================================
   * CARDS — Border-Shift statt Lift (Apple-konform)
   * =========================================================== */
  .tc-card {
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border-subtle);
    border-radius: var(--tc-radius-md);
    padding: var(--tc-space-4);
    transition: border-color var(--tc-dur-base) var(--tc-ease-standard);
  }
  .tc-card:hover {
    border-color: var(--tc-color-border-strong);
  }

  .tc-card__media {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: var(--tc-radius-md);
    background: var(--tc-color-bg-elevated);
  }
  .tc-card__media img,
  .tc-card__media picture > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tc-card__body {
    padding-block-start: var(--tc-space-4);
  }

  /* ===========================================================
   * TYPOGRAFIE-KLASSEN (vermeiden Element-Override aus style.css)
   * =========================================================== */
  .tc-eyebrow {
    display: inline-block;
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-eyebrow);
    font-weight: var(--tc-weight-semibold);
    line-height: 1;
    letter-spacing: var(--tc-tracking-eyebrow);
    color: var(--tc-color-accent);
    text-transform: uppercase;
  }

  .tc-display {
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-display);
    font-weight: var(--tc-weight-bold);
    line-height: var(--tc-leading-display);
    letter-spacing: var(--tc-tracking-display);
    color: var(--tc-color-text-primary);
    margin: 0;
  }

  .tc-h1 {
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h1);
    font-weight: var(--tc-weight-bold);
    line-height: var(--tc-leading-h1);
    letter-spacing: var(--tc-tracking-h1);
    color: var(--tc-color-text-primary);
    margin: 0;
  }

  .tc-h2 {
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h2);
    font-weight: var(--tc-weight-semibold);
    line-height: var(--tc-leading-h2);
    letter-spacing: var(--tc-tracking-h2);
    color: var(--tc-color-text-primary);
    margin: 0;
  }

  .tc-h3 {
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h3);
    font-weight: var(--tc-weight-semibold);
    line-height: var(--tc-leading-tight);
    letter-spacing: 0;
    color: var(--tc-color-text-primary);
    margin: 0;
  }

  .tc-lead {
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body-large);
    font-weight: var(--tc-weight-regular);
    line-height: var(--tc-leading-body);
    color: var(--tc-color-text-secondary);
    max-width: var(--tc-content-max);
    margin: 0;
  }

  .tc-caption {
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-caption);
    font-weight: var(--tc-weight-regular);
    line-height: var(--tc-leading-tight);
    color: var(--tc-color-text-tertiary);
    margin: 0;
  }

  /* ===========================================================
   * PREIS — Tabular Numbers Pflicht für B2B-Konsistenz
   * =========================================================== */
  .tc-price {
    font-family: var(--tc-font-display);
    font-size: var(--tc-type-h2);
    font-weight: var(--tc-weight-bold);
    line-height: 1;
    letter-spacing: var(--tc-tracking-h2);
    color: var(--tc-color-text-primary);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .tc-price__suffix {
    font-size: var(--tc-type-caption);
    font-weight: var(--tc-weight-regular);
    color: var(--tc-color-text-tertiary);
    margin-inline-start: var(--tc-space-1);
  }

  /* ===========================================================
   * FORM-FIELDS — Vorbereitung für tc-request (Phase 3)
   * =========================================================== */
  .tc-form-field {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    background: var(--tc-color-bg-surface);
    border: 1px solid var(--tc-color-border);
    border-radius: var(--tc-radius-sm);
    color: var(--tc-color-text-primary);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-body);
    line-height: 1.4;
    transition:
      border-color var(--tc-dur-fast) var(--tc-ease-standard),
      background var(--tc-dur-fast) var(--tc-ease-standard);
  }
  .tc-form-field::placeholder {
    color: var(--tc-color-text-tertiary);
  }
  .tc-form-field:hover {
    border-color: var(--tc-color-border-strong);
  }
  .tc-form-field:focus {
    outline: none;
    border-color: var(--tc-color-accent);
    background: var(--tc-color-bg-elevated);
  }
  .tc-form-field:focus-visible {
    outline: var(--tc-focus-ring-width) solid var(--tc-focus-ring-color);
    outline-offset: var(--tc-focus-ring-offset);
  }

  .tc-form-label {
    display: block;
    margin-block-end: var(--tc-space-1);
    font-family: var(--tc-font-text);
    font-size: var(--tc-type-caption);
    font-weight: var(--tc-weight-medium);
    color: var(--tc-color-text-secondary);
    letter-spacing: 0.02em;
  }

  /* ===========================================================
   * SKIP-LINK (A11y-Pflicht)
   * =========================================================== */
  .tc-skip-link {
    position: absolute;
    top: -100px;
    inset-inline-start: 0;
    z-index: 99999;
    padding: 10px 16px;
    background: var(--tc-color-accent);
    color: var(--tc-color-accent-text);
    font-family: var(--tc-font-text);
    font-weight: var(--tc-weight-semibold);
    text-decoration: none;
    transition: top var(--tc-dur-fast) var(--tc-ease-standard);
  }
  .tc-skip-link:focus,
  .tc-skip-link:focus-visible {
    top: 0;
    outline: var(--tc-focus-ring-width) solid var(--tc-color-text-primary);
    outline-offset: var(--tc-focus-ring-offset);
  }
}

@layer utilities {

  /* === Tabular Numbers — wenn der Wrapper-Selector nicht greift === */
  .tc-u-tabular-nums {
    font-variant-numeric: tabular-nums lining-nums;
  }

  /* === Screen-Reader-Only === */
  .tc-u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* === Center inline auf festen max-width === */
  .tc-u-container {
    max-width: var(--tc-container-max);
    margin-inline: auto;
    padding-inline: var(--tc-space-3);
  }
  @media (max-width: 768px) {
    .tc-u-container {
      padding-inline: var(--tc-space-2);
    }
  }
}