/* ============================================================
   CLAIVO — Brand components (logo, buttons, trust strip)
   Requires colors_and_type.css to be loaded first.
   ============================================================ */

/* ---------- WORDMARK (FIXED STRUCTURE — never rebuild differently) ----------
   CLAIVO in Jura 300, weite Laufweite. Darunter ein roter Strich links
   (~13% der Breite), eine feine Linie füllt den Rest, das Wort SCHWEIZ
   sitzt klein und gesperrt am rechten Ende. */
.claivo-logo {
  --logo-size: 34px;          /* Höhe der Wortmarke "CLAIVO" */
  --logo-ink: var(--navy);    /* Farbe der Wortmarke + Linie */
  --logo-sub: var(--steel-soft);
  display: inline-flex;
  flex-direction: column;
  gap: calc(var(--logo-size) * 0.16);
  line-height: 1;
  user-select: none;
}
.claivo-logo__word {
  font-family: var(--font-logo);
  font-weight: 300;
  font-size: var(--logo-size);
  letter-spacing: calc(var(--logo-size) * 0.30); /* ~10px @ 34px */
  padding-left: calc(var(--logo-size) * 0.30);   /* visuelle Zentrierung der Sperrung */
  color: var(--logo-ink);
}
.claivo-logo__base {
  display: flex;
  align-items: center;
  gap: 0;
}
.claivo-logo__tick {
  flex: 0 0 auto;
  width: calc(var(--logo-size) * 1.05);
  height: 2px;
  background: var(--red);
}
.claivo-logo__line {
  flex: 1 1 auto;
  height: 1px;
  background: color-mix(in srgb, var(--logo-ink), transparent 88%);
}
.claivo-logo__schweiz {
  flex: 0 0 auto;
  margin-left: calc(var(--logo-size) * 0.34);
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: calc(var(--logo-size) * 0.30);
  letter-spacing: calc(var(--logo-size) * 0.22);
  color: var(--logo-sub);
}
/* Dunkle Variante */
.claivo-logo[data-variant="light"] {
  --logo-ink: var(--cream);
  --logo-sub: rgba(245, 243, 239, 0.55);
}

/* ---------- BUTTONS ---------- */
.claivo .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--t);
}
/* Primär — Navy */
.claivo .btn--primary { background: var(--navy); color: var(--cream); }
.claivo .btn--primary:hover { background: var(--navy-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Wichtigster CTA — Red */
.claivo .btn--accent { background: var(--red); color: #fff; }
.claivo .btn--accent:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(220,0,0,0.22); }
/* Sekundär — Outline */
.claivo .btn--ghost { background: transparent; color: var(--navy); border-color: color-mix(in srgb, var(--navy), transparent 78%); }
.claivo .btn--ghost:hover { background: rgba(10,22,34,0.04); border-color: color-mix(in srgb, var(--navy), transparent 55%); }
/* Auf dunklem Grund */
.claivo .on-dark .btn--ghost, .claivo.on-dark .btn--ghost { color: var(--cream); border-color: rgba(245,243,239,0.28); }
.claivo .on-dark .btn--ghost:hover, .claivo.on-dark .btn--ghost:hover { background: rgba(245,243,239,0.08); }
.claivo .btn--sm { padding: 10px 16px; }
.claivo .btn--lg { padding: 17px 30px; font-size: var(--text-base); }

/* ---------- TRUST PILLS ---------- */
.claivo .trust-strip { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.claivo .trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--fg-muted);
}
.claivo .trust-item svg { width: 18px; height: 18px; flex: none; }
.claivo .on-dark .trust-item { color: var(--d-fg-muted); }

/* ---------- BADGE / TAG ---------- */
.claivo .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  padding: 6px 12px; border-radius: var(--r-pill);
}
.claivo .badge--gold { background: color-mix(in srgb, var(--gold), transparent 84%); color: #7a6225; }
.claivo .badge--red  { background: color-mix(in srgb, var(--red), transparent 90%); color: var(--red); }
.claivo .badge--navy { background: color-mix(in srgb, var(--navy), transparent 92%); color: var(--navy); }

/* ---------- ICONS (Material Symbols Rounded, weight 500) ----------
   Inline SVG via icons.js. Recolour über currentColor.
   <i class="icon" data-icon="check"></i> — Größe per width/height. */
.claivo .icon {
  display: inline-flex;
  width: 24px; height: 24px;
  flex: none;
  color: currentColor;
}
.claivo .icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* ---------- CARD ---------- */
.claivo .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: var(--t);
}
.claivo .card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }