/* ═══════════════════════════════════════════════════
   ClipCar Landing CSS - CLEAN v2.0
   Mobile First: 320px → 768px → 1024px → 1440px+
═══════════════════════════════════════════════════ */

/* ── HERO VIDEO ─────────────────────────────────── */
.cc-landing-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #0b0d12;
}
.cc-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cc-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0,0,0,0.22);
}
[data-theme="dark"] .cc-hero-overlay { background: rgba(0,0,0,0.42); }

/* Schwarze Kanten links+rechts — nur Desktop */
.cc-hero-edge-left,
.cc-hero-edge-right {
  display: none;
  position: absolute;
  top: 0; bottom: 0;
  width: 20%;
  z-index: 2;
  pointer-events: none;
}
.cc-hero-edge-left  { left: 0;  background: linear-gradient(to right, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 50%, transparent 100%); }
.cc-hero-edge-right { right: 0; background: linear-gradient(to left,  rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 50%, transparent 100%); }

/* ── CARDS CONTAINER ────────────────────────────── */
.cc-hero-cards {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 20px;
}

/* ── GLASS KARTEN ───────────────────────────────── */
.cc-landing-hero .cc-glass {
  border-radius: 18px;
}
.cc-hero-stats { padding: 20px 18px; }
.cc-hero-mq    { padding: 14px 0 12px; overflow: hidden; }

/* ── STATS INHALTE ──────────────────────────────── */
.cc-hs-header  { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.cc-hs-icon    { width:36px; height:36px; border-radius:10px; background:rgba(0,113,227,0.11); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cc-hs-icon svg { width:16px; height:16px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; }
.cc-hs-big     { font-size:1.7rem; font-weight:600; letter-spacing:-.04em; color:var(--glass-text); line-height:1; }
.cc-hs-lbl     { font-size:11px; color:var(--glass-t3); margin-top:1px; }
.cc-hs-prog-row { display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px; }
.cc-hs-prog-row span:first-child { color:var(--glass-t2); }
.cc-hs-prog-row span:last-child  { color:var(--glass-text); font-weight:500; }
.cc-hs-prog-track { height:3px; background:var(--prog-bg); border-radius:20px; overflow:hidden; margin-bottom:12px; }
.cc-hs-prog-fill  { height:100%; border-radius:20px; background:var(--prog-fill); }
.cc-hs-divider    { height:1px; background:var(--glass-div); margin:10px 0; }
.cc-hs-mini { display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr; align-items:center; text-align:center; }
.cc-hs-mv   { font-size:1.4rem; font-weight:600; letter-spacing:-.035em; color:var(--glass-text); }
.cc-hs-ml   { font-size:9px; letter-spacing:.07em; text-transform:uppercase; color:var(--glass-t3); margin-top:1px; }
.cc-hs-md   { width:1px; height:24px; background:var(--glass-div); justify-self:center; }
.cc-hs-pills { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.cc-hs-pill  { display:inline-flex; align-items:center; gap:4px; background:var(--pill-bg); border:1px solid var(--pill-b); border-radius:100px; padding:3px 9px; font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--glass-t2); }
.cc-hs-live-dot  { width:6px; height:6px; border-radius:50%; background:#22c55e; position:relative; flex-shrink:0; }
.cc-hs-live-ring { position:absolute; inset:-3px; border-radius:50%; border:1.5px solid #22c55e; }

/* Marquee */
.cc-hero-mq-label { font-size:11px; color:var(--glass-t3); padding:0 14px; margin-bottom:8px; }
.cc-marquee-outer { overflow:hidden; mask-image:var(--mq-mask); -webkit-mask-image:var(--mq-mask); }
.cc-marquee-track { display:flex; white-space:nowrap; animation:cc-marquee 32s linear infinite; }

/* ── HERO BADGE / H1 / SUB ──────────────────────── */
.cc-hero-badge { display:inline-flex; align-items:center; gap:6px; background:var(--pill-bg); border:1px solid var(--glass-b); border-radius:100px; padding:4px 11px; width:fit-content; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--glass-t2); }
.cc-hero-h1    { font-weight:300; letter-spacing:-.045em; line-height:1.04; color:var(--glass-text); }
.cc-hero-h1 strong { font-weight:600; background:linear-gradient(130deg,var(--blue) 0%,#60a5fa 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cc-hero-sub   { font-size:13.5px; line-height:1.7; color:var(--glass-t2); font-weight:300; }
.cc-hero-ctas  { display:flex; gap:9px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════
   MOBILE FIRST  (default = Handy)
   Cards stapeln vertikal, volle Breite, oben
══════════════════════════════════════════════════ */
.cc-hero-edge-left,
.cc-hero-edge-right { display: none; }

.cc-hero-cards {
  position: absolute;
  top: 64px; /* unter Nav */
  left: 0; right: 0;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 14px 16px;
  gap: 10px;
  overflow-y: auto;
}

.cc-hero-left,
.cc-hero-right {
  width: 100%;
  max-width: 440px;
}

/* Mobile: transparenteres Glas damit Video durchscheint */
.cc-landing-hero .cc-glass {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
[data-theme="dark"] .cc-landing-hero .cc-glass {
  background: rgba(10,12,20,0.60) !important;
}

.cc-hero-h1 { font-size: 1.85rem; }
.cc-hero-stats { padding: 16px 14px; }
.cc-hs-mv { font-size: 1.2rem; }

/* ══════════════════════════════════════════════════
   TABLET  768px+
══════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .cc-hero-cards {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin-top: 28px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    overflow-y: visible;
    width: 92%;
    max-width: 820px;
    gap: 16px;
  }
  .cc-hero-left  { width: 320px; max-width: none; }
  .cc-hero-right { width: 290px; max-width: none; }
  .cc-hero-h1 { font-size: 2.2rem; }
  .cc-hero-stats { padding: 20px 18px; }
  .cc-hs-mv { font-size: 1.35rem; }
  .cc-landing-hero .cc-glass {
    background: rgba(255,255,255,0.60) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  [data-theme="dark"] .cc-landing-hero .cc-glass {
    background: rgba(10,12,20,0.65) !important;
  }
}

/* ══════════════════════════════════════════════════
   DESKTOP  1100px+
══════════════════════════════════════════════════ */
@media (min-width: 1100px) {
  .cc-hero-edge-left,
  .cc-hero-edge-right { display: block; }

  .cc-hero-cards {
    width: 88%;
    max-width: 1280px;
    gap: 24px;
    margin-top: 28px;
  }
  .cc-hero-left  { width: 360px; }
  .cc-hero-right { width: 320px; }
  .cc-hero-h1 { font-size: clamp(2.2rem, 3.8vw, 3.6rem); }
  .cc-hero-stats { padding: 22px 20px; }
  .cc-hs-mv { font-size: 1.45rem; }
  .cc-landing-hero .cc-glass {
    background: rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  [data-theme="dark"] .cc-landing-hero .cc-glass {
    background: rgba(10,12,20,0.68) !important;
  }
}

/* ══════════════════════════════════════════════════
   KLEINE HANDYS  400px-
══════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .cc-hero-h1 { font-size: 1.6rem !important; }
  .cc-hero-ctas { flex-direction: column; }
  .cc-hero-ctas .cc-btn { width: 100%; justify-content: center; }
  .cc-hero-left, .cc-hero-right { max-width: 100%; }
}

/* ── STATS STRIP ────────────────────────────────── */
.cc-stats-strip { background:var(--panel); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 80px; display:flex; gap:0; transition:background .3s; }
.cc-stat { flex:1; padding:0 40px 0 0; border-right:1px solid var(--border); transition:transform .3s; }
.cc-stat:first-child { padding-left:0; }
.cc-stat:last-child  { border-right:none; }
.cc-stat:hover { transform:translateY(-2px); }
.cc-stat-num { font-size:2.6rem; font-weight:300; letter-spacing:-.04em; color:var(--text); line-height:1; margin-bottom:5px; }
.cc-stat-num sup { font-size:1.1rem; font-weight:400; vertical-align:super; }
.cc-stat-label { font-size:13px; color:var(--text3); line-height:1.5; }
.cc-stat-label small { font-size:11.5px; }

/* ── TEMPLATES ──────────────────────────────────── */
.cc-templates-header { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; }
.cc-templates-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cc-template-card    { background:var(--panel2); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; transition:border-color .3s,transform .3s; cursor:pointer; }
.cc-template-card:hover { border-color:var(--blue); transform:translateY(-4px); }
.cc-template-card:hover .cc-tc-arrow { transform:translate(2px,-2px); color:var(--blue); }
.cc-tc-media          { position:relative; aspect-ratio:16/9; background:var(--panel2); overflow:hidden; }
.cc-tc-placeholder    { width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.cc-tc-placeholder-bg { position:absolute; inset:0; background:repeating-linear-gradient(135deg,transparent,transparent 40px,rgba(0,0,0,0.02) 40px,rgba(0,0,0,0.02) 41px); }
[data-theme="dark"] .cc-tc-placeholder-bg { background:repeating-linear-gradient(135deg,transparent,transparent 40px,rgba(255,255,255,0.02) 40px,rgba(255,255,255,0.02) 41px); }
.cc-tc-placeholder-code { font-size:2.5rem; font-weight:300; letter-spacing:-.04em; color:var(--text3); z-index:1; opacity:.35; }
.cc-tc-tag  { position:absolute; top:12px; left:12px; font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,.7); padding:4px 10px; border-radius:20px; }
.cc-tc-body { padding:18px 20px; }
.cc-tc-head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; }
.cc-tc-name { font-size:15px; font-weight:500; color:var(--text); }
.cc-tc-arrow { width:16px; height:16px; color:var(--text3); transition:transform .25s,color .25s; flex-shrink:0; margin-top:2px; }
.cc-tc-desc  { font-size:13px; color:var(--text3); line-height:1.55; margin-bottom:12px; }
.cc-tc-formats { display:flex; gap:5px; margin-bottom:14px; }
.cc-tc-fmt     { font-size:10.5px; font-weight:500; border:1px solid var(--border); color:var(--text3); padding:3px 9px; border-radius:20px; }
.cc-tc-footer  { display:flex; align-items:center; justify-content:space-between; }
.cc-tc-price   { font-size:1.1rem; font-weight:500; letter-spacing:-.02em; color:var(--text); }
.cc-tc-price-sub { font-size:11px; color:var(--text3); font-weight:400; margin-left:3px; }

/* ── HIW ────────────────────────────────────────── */
.cc-hiw-grid  { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; margin-top:56px; }
.cc-hiw-steps { display:flex; flex-direction:column; }
.cc-hiw-step  { display:flex; gap:24px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.07); cursor:pointer; }
.cc-hiw-step:first-child { border-top:1px solid rgba(255,255,255,.07); }
.cc-hiw-num   { width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:500; color:rgba(255,255,255,.35); flex-shrink:0; margin-top:2px; transition:border-color .3s,color .3s,background .3s; }
.cc-hiw-step.active .cc-hiw-num { border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.06); }
.cc-hiw-title { font-size:14px; font-weight:500; color:rgba(255,255,255,.45); margin-bottom:5px; transition:color .3s; }
.cc-hiw-step.active .cc-hiw-title { color:#fff; }
.cc-hiw-desc  { font-size:13px; color:rgba(255,255,255,.28); line-height:1.65; transition:color .3s; }
.cc-hiw-step.active .cc-hiw-desc { color:rgba(255,255,255,.55); }
.cc-hiw-visual { aspect-ratio:4/3; background:rgba(255,255,255,.03); border-radius:var(--r); border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; overflow:hidden; }

/* ── FEATURES ───────────────────────────────────── */
.cc-features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:56px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.cc-feature       { background:var(--panel2); padding:32px 26px; transition:background .2s; }
.cc-feature:hover { background:var(--panel); }
.cc-feature-icon  { width:38px; height:38px; border:1px solid var(--border2); border-radius:var(--r3); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:var(--text3); }
.cc-feature-icon svg { width:20px; height:20px; }
.cc-feature-title { font-size:13.5px; font-weight:500; color:var(--text); margin-bottom:6px; }
.cc-feature-desc  { font-size:13px; color:var(--text3); line-height:1.65; }

/* ── PRICING ────────────────────────────────────── */
.cc-pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:680px; margin-top:56px; }
.cc-pricing-card { background:var(--panel2); border:1px solid var(--border); border-radius:var(--r); padding:32px; transition:border-color .3s,transform .3s; }
.cc-pricing-card:hover { border-color:var(--blue); transform:translateY(-2px); }
.cc-pricing-name   { font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-bottom:18px; }
.cc-pricing-price  { font-size:3rem; font-weight:300; letter-spacing:-.04em; color:var(--text); line-height:1; margin-bottom:4px; }
.cc-pricing-period { font-size:13px; color:var(--text3); margin-bottom:24px; }
.cc-pricing-feats  { list-style:none; margin-bottom:24px; }
.cc-pricing-feat   { display:flex; align-items:flex-start; gap:9px; font-size:13px; color:var(--text2); padding:7px 0; border-bottom:1px solid var(--border); }
.cc-pricing-feat:first-child { border-top:1px solid var(--border); }
.cc-pricing-check  { width:13px; height:13px; flex-shrink:0; margin-top:1px; stroke:var(--blue); fill:none; stroke-width:1.8; stroke-linecap:round; }
.cc-pricing-btn-outline { display:block; width:100%; padding:11px 0; font-family:var(--font); font-size:13.5px; font-weight:500; background:transparent; color:var(--text2); border:1px solid var(--border2); border-radius:var(--r3); cursor:pointer; transition:all .2s; text-align:center; text-decoration:none; }
.cc-pricing-btn-outline:hover { background:var(--panel); color:var(--text); border-color:var(--blue); }
.cc-pricing-btn-filled { display:block; width:100%; padding:11px 0; font-family:var(--font); font-size:13.5px; font-weight:500; background:var(--text); color:var(--page-bg); border:none; border-radius:var(--r3); cursor:pointer; transition:all .2s; text-align:center; }
.cc-pricing-btn-filled:hover { opacity:.86; }

/* ── CTA ────────────────────────────────────────── */
.cc-cta { text-align:center; position:relative; overflow:hidden; }
.cc-cta::before { content:''; position:absolute; inset:-50%; background:radial-gradient(ellipse 50% 40% at 50% 60%, rgba(0,113,227,0.05) 0%, transparent 70%); pointer-events:none; }
.cc-cta-h2     { font-size:clamp(2.2rem,5vw,4.5rem); font-weight:300; letter-spacing:-.04em; line-height:1.04; color:var(--text); margin-bottom:16px; }
.cc-cta-h2 em  { font-style:italic; color:var(--blue); }
.cc-cta-sub    { font-size:16px; color:var(--text2); max-width:500px; margin:0 auto 32px; line-height:1.65; font-weight:300; }
.cc-cta-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ── RESPONSIVE SECTIONS ────────────────────────── */
@media (max-width: 1024px) {
  .cc-stats-strip { padding:32px; }
  .cc-templates-grid { grid-template-columns:1fr 1fr; }
  .cc-features-grid  { grid-template-columns:1fr 1fr; }
  .cc-hiw-grid { gap:40px; }
}
@media (max-width: 768px) {
  .cc-stats-strip { padding:24px 20px; flex-direction:column; gap:18px; }
  .cc-stat { border-right:none; border-bottom:1px solid var(--border); padding:0 0 18px; }
  .cc-stat:last-child { border-bottom:none; padding-bottom:0; }
  .cc-templates-header { flex-direction:column; align-items:flex-start; gap:12px; }
  .cc-templates-grid,.cc-hiw-grid,.cc-pricing-grid,.cc-features-grid { grid-template-columns:1fr; }
  .cc-hiw-grid { gap:32px; }
  .cc-cta-h2 { font-size:2rem; }
}

/* ── FINAL FIXES ────────────────────────────────── */
/* Cards weiter auseinander auf Desktop */
@media (min-width: 1100px) {
  .cc-hero-cards {
    justify-content: space-between !important;
    width: 82% !important;
    max-width: 1200px !important;
  }
}
/* H1 passt zur Card-Breite */
.cc-hero-h1 {
  font-size: clamp(1.7rem, 3.2vw, 3.2rem) !important;
}
@media (min-width: 768px) {
  .cc-hero-h1 { font-size: clamp(2rem, 3.5vw, 3.2rem) !important; }
}

/* ── NAV OVERLAP FIX ────────────────────────────── */
.cc-nav { z-index: 500 !important; }
.cc-landing-hero { z-index: 1; }

/* ── CARD INNEN PADDING ─────────────────────────── */
.cc-hero-left.cc-glass {
  padding: 24px 24px 24px 24px !important;
}

/* ── LAUFBAND SCHNELLER ─────────────────────────── */
.cc-marquee-track {
  animation-duration: 20s !important;
}

/* ── SPECS RTL ANIMATION ────────────────────────── */
@keyframes cc-specs-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── CARDS VERTIKAL ZENTRIERT MIT NAV-OFFSET ─────── */
@media (min-width: 768px) {
  .cc-hero-cards {
    top: calc(50% + 28px) !important;
    transform: translate(-50%, -50%) !important;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE STORY-STYLE  — NUR ≤ 767px
   Video dominiert, Cards als Bottom-Overlay
══════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Hero: voller Screen */
  .cc-landing-hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  /* Cards: weg vom Bildschirm-Mitte, ans untere Ende */
  .cc-hero-cards {
    position: absolute !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Linke Card (Text) — auf Mobile verstecken */
  .cc-hero-left {
    display: none !important;
  }

  /* Rechte Card — volle Breite, kein Radius oben */
  .cc-hero-right {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Stats Card: kompakt, kein Radius oben */
  .cc-hero-stats {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 14px 16px !important;
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  [data-theme="dark"] .cc-hero-stats {
    background: rgba(10,12,20,0.85) !important;
  }

  /* Marquee Card: direkt darunter, kein Gap */
  .cc-hero-mq {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    padding: 10px 0 12px !important;
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  [data-theme="dark"] .cc-hero-mq {
    background: rgba(10,12,20,0.90) !important;
  }

  /* Stats kompakter auf Mobile */
  .cc-hs-mv   { font-size: 1.15rem !important; }
  .cc-hs-ml   { font-size: 8.5px !important; }
  .cc-hs-divider { margin: 8px 0 !important; }

  /* Preis kleiner */
  .cc-hero-stats [style*="1.55rem"] {
    font-size: 1.25rem !important;
  }

  /* Kanten-Gradienten auf Mobile aus */
  .cc-hero-edge-left,
  .cc-hero-edge-right { display: none !important; }

  /* Video Overlay dunkler damit Text lesbar */
  .cc-hero-overlay {
    background: rgba(0,0,0,0.15) !important;
  }
}

/* Sehr kleine Handys 375px- */
@media (max-width: 375px) {
  .cc-hs-mv { font-size: 1rem !important; }
  .cc-hero-stats { padding: 11px 13px !important; }
}

/* ── MOBILE: NUR BIS PREIS, KONTAKT BEIM SCROLLEN ── */
@media (max-width: 767px) {

  /* Marquee komplett verstecken — kommt beim Scrollen */
  .cc-hero-right .cc-hero-mq {
    display: none !important;
  }

  /* Stats Card noch kompakter — nur Modell + Zahlen + Preis */
  .cc-hero-stats {
    padding: 12px 14px 14px !important;
  }

  /* Specs-Scroll Zeile auf Mobile ausblenden (zu eng) */
  .cc-specs-scroll,
  .cc-specs-scroll + div,
  [style*="cc-specs-rtl"] {
    display: none !important;
  }

  /* Farbe + Getriebe Zeile verstecken */
  .cc-hero-stats [style*="v_color"],
  .cc-hero-stats [style*="v_trans"] {
    display: none !important;
  }

  /* Nur Marke, Modell, 3 Zahlen, Preis sichtbar */
  .cc-hs-mini {
    margin-bottom: 8px !important;
  }
}

/* ── CC-HW CARDS FINAL ── */
.cc-hw{padding:80px 24px 96px;background:var(--page-bg,#f5f5f7)}
.cc-hw-in{max-width:1100px;margin:0 auto}
.cc-hw-hd{text-align:center;margin-bottom:56px}
.cc-hw-ey{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue,#007aff);margin-bottom:14px}
.cc-hw-ttl{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:300;letter-spacing:-.03em;line-height:1.06;color:var(--text,#1d1d1f);margin-bottom:13px}
.cc-hw-sub{font-size:16px;color:var(--text2,#6e6e73);max-width:400px;margin:0 auto;line-height:1.65;font-weight:300}
.cc-hw-gr{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.cc-hw-gr{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cc-hw-gr{grid-template-columns:1fr;gap:14px}.cc-hw{padding:44px 16px 52px}}
.cc-hw-c{border-radius:24px;overflow:hidden;opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease,box-shadow .35s ease;position:relative;background:linear-gradient(175deg,#fafbff 0%,#f2f5fc 100%);border:0.5px solid rgba(0,0,0,.06);box-shadow:0 1px 3px rgba(0,0,0,.03),0 4px 20px rgba(0,0,0,.04)}
[data-theme="dark"] .cc-hw-c{background:linear-gradient(175deg,#111520 0%,#0d1018 100%);border-color:rgba(255,255,255,.06);box-shadow:0 1px 3px rgba(0,0,0,.2),0 4px 20px rgba(0,0,0,.3)}
.cc-hw-c:nth-child(2){transition-delay:.12s}
.cc-hw-c:nth-child(3){transition-delay:.24s}
.cc-hw-c.vis{opacity:1;transform:translateY(0)}
.cc-hw-c.vis:hover{box-shadow:0 2px 6px rgba(0,0,0,.04),0 16px 48px rgba(0,0,0,.07);transform:translateY(-4px)}
[data-theme="dark"] .cc-hw-c.vis:hover{box-shadow:0 2px 6px rgba(0,0,0,.3),0 16px 48px rgba(0,0,0,.45)}
.cc-hw-inner{display:flex;flex-direction:column;height:100%}
.cc-hw-visual{display:flex;align-items:center;justify-content:center;padding:32px 24px 20px;min-height:190px;position:relative}
.cc-hw-body{padding:8px 28px 32px}
.cc-hw-num{font-size:10px;font-weight:600;letter-spacing:.14em;color:rgba(0,122,255,.5);margin-bottom:9px;font-family:-apple-system,sans-serif}
[data-theme="dark"] .cc-hw-num{color:rgba(10,132,255,.55)}
.cc-hw-title{font-size:15px;font-weight:600;color:var(--text,#1d1d1f);letter-spacing:-.02em;line-height:1.3;margin-bottom:7px}
[data-theme="dark"] .cc-hw-title{color:#f0f2f8}
.cc-hw-desc{font-size:13px;color:var(--text2,#6e6e73);line-height:1.6;font-weight:300}
[data-theme="dark"] .cc-hw-desc{color:rgba(255,255,255,.4)}