/* ============================================================
   cartoso – Landing „Soft Social" (Design v3)
   Vollständig gescoped unter .cartoso-v3, damit nichts in das
   WordPress-Theme oder andere Plugin-Seiten durchschlägt.
   ============================================================ */

/* ---------- Fonts (lokal gehostet, DSGVO-konform) ---------- */
/* scroll-behavior gehört in den prefers-reduced-motion-Block und darf nicht
   ungescoped auf html stehen — es galt bisher fuer jede Seite der Website. */
.cartoso-v3 { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .cartoso-v3 { scroll-behavior: auto; }
}

/* ---------- Landing-Tokens: nur noch Ableitungen aus tokens.css ---------- */
.cartoso-v3 {
  /* Farben */
  --ground: var(--cartoso-surface-2);
  --card: var(--cartoso-surface);
  --text: var(--cartoso-text);
  --text-2: var(--cartoso-text-muted);
  /* #9a90a6 auf Weiß ergab 3,04:1 — drei Verstöße auf einen Streich. */
  --text-3: var(--cartoso-text-muted);
  --hairline: var(--cartoso-border);
  --iris: var(--cartoso-action);
  --iris-dark: var(--cartoso-action-hover);
  --iris-tint: var(--cartoso-action-tint);
  --iris-selection: var(--cartoso-action-tint);
  --iris-on: var(--cartoso-action-on);
  --gradient: var(--cartoso-action);

  /* Plattformfarben (nur Anspielungen) */
  --ig-gradient: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
  --tiktok-cyan: #25f4ee;
  --tiktok-pink: #fe2c55;
  --facebook: #1877f2;
  --whatsapp: #25d366;
  --wa-bubble: #dcf8c6;
  --wa-check: #34b7f1;
  --wa-price: #128c7e;

  /* Status */
  --ok: var(--cartoso-ok);
  --ok-tint: var(--cartoso-ok-tint);
  --amber: var(--cartoso-warn);
  --amber-tint: var(--cartoso-warn-tint);

  /* Form */
  --r-btn: var(--cartoso-radius-sm);
  --r-card: var(--cartoso-radius);
  --r-pill: var(--cartoso-radius-pill);
  --shadow-rest: var(--cartoso-shadow-sm);
  --shadow-hover: var(--cartoso-shadow);
  --shadow-btn: var(--cartoso-shadow-sm);

  /* Typo */
  --font-display: var(--cartoso-font-display);
  --font-body: var(--cartoso-font-body);

  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.cartoso-v3 *, .cartoso-v3 *::before, .cartoso-v3 *::after { box-sizing: border-box; }

.cartoso-v3 ::selection { background: var(--iris-selection); }

.cartoso-v3 h1, .cartoso-v3 h2, .cartoso-v3 h3, .cartoso-v3 .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: inherit;
}

.cartoso-v3 h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
.cartoso-v3 h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
.cartoso-v3 h3 { font-size: 1.15rem; }

.cartoso-v3 p { margin: 0 0 1em; }
.cartoso-v3 img { max-width: 100%; display: block; }
.cartoso-v3 a { color: var(--iris); }

/* Der zweifarbige Ring aus base.css gilt auch hier — eine einfache outline in
   Aktionsfarbe wäre auf dem Primärknopf 1:1 und damit unsichtbar. */

.cartoso-v3 .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.cartoso-v3 .muted { color: var(--text-2); }
.cartoso-v3 .small { font-size: 0.85rem; color: var(--text-3); }

/* Gradient-Text für große Zahlen/Wörter */
.cartoso-v3 .grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.cartoso-v3 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-btn);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
}
.cartoso-v3 .btn:hover { filter: brightness(1.05); }

.cartoso-v3 .btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.cartoso-v3 .btn-outline {
  background: var(--card);
  color: var(--text);
  border-color: var(--hairline);
}
.cartoso-v3 .btn-outline:hover { border-color: var(--iris); color: var(--iris); }
.cartoso-v3 .btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.cartoso-v3 .btn-ghost-light { color: var(--cartoso-text); border: 1px solid var(--cartoso-border-strong); background: transparent; }
.cartoso-v3 .btn-ghost-light:hover { background: var(--cartoso-surface-2); }

/* ---------- Chips & Badges ---------- */
.cartoso-v3 .chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--r-pill);
  background: var(--iris-tint);
  color: var(--iris-dark);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 6px 14px;
}
.cartoso-v3 .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-pill);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 11px;
}
.cartoso-v3 .badge-green { background: var(--ok-tint); color: var(--ok); }
.cartoso-v3 .badge-violet { background: var(--iris-tint); color: var(--iris-dark); }
.cartoso-v3 .badge-amber { background: var(--amber-tint); color: var(--amber); }

/* ---------- Karten ---------- */
.cartoso-v3 .card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 26px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.cartoso-v3 .card-hover:hover { box-shadow: var(--shadow-hover); }

/* Gradient-Border (Beliebt / aktive Auswahl) */
.cartoso-v3 .grad-border {
  position: relative;
  border: 2px solid transparent;
  background:
    var(--card) padding-box,
    var(--cartoso-action) border-box;
}

/* ---------- Navigation ---------- */
.cartoso-v3 .nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Deckende Flächenfarbe aus der Semantikschicht. Vorher eine fast weiße
     Festfarbe — die blieb im Dunkelmodus hell und legte einen weißen Balken
     über die dunkle Seite. */
  background: var(--card);
  border-bottom: 1px solid var(--hairline);
}
body.admin-bar .cartoso-v3 .nav { top: 32px; }
.cartoso-v3 .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  max-width: 1120px;
  margin: 0 auto;
}
.cartoso-v3 .nav-logo { display: flex; align-items: center; text-decoration: none; }
.cartoso-v3 .nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.cartoso-v3 .nav-links li { margin: 0; }
.cartoso-v3 .nav-links a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 0.93rem; }
.cartoso-v3 .nav-links a:hover { color: var(--iris); }
.cartoso-v3 .nav-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.cartoso-v3 .nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--r-btn);
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
}

/* ---------- Sektionen ---------- */
.cartoso-v3 .section { padding: 84px 0; }
.cartoso-v3 .section-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }

/* ---------- Grids ---------- */
.cartoso-v3 .grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.cartoso-v3 .grid-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.cartoso-v3 .grid-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; align-items: start; }
.cartoso-v3 .grid-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cartoso-v3 .grid-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; align-items: stretch; }

/* Icon-Kachel (pastellfarbenes Rounded-Square) */
.cartoso-v3 .icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.cartoso-v3 .icon-tile svg { stroke-width: 1.8; }
.cartoso-v3 .tile-violet { background: var(--iris-tint); color: var(--iris-dark); }
.cartoso-v3 .tile-pink { background: #fdeef5; color: #d6337a; }
.cartoso-v3 .tile-cyan { background: #e5fbfa; color: #0e9c96; }
.cartoso-v3 .tile-green { background: #e8f9ef; color: #189a4d; }
.cartoso-v3 .tile-blue { background: #e9f2fe; color: #1877f2; }
.cartoso-v3 .tile-amber { background: #fdf3e2; color: #c07207; }

/* Nummern-Kreis mit Gradient */
.cartoso-v3 .step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

/* ---------- Mockups: Plattform-Anspielungen ---------- */
.cartoso-v3 .mock {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: var(--shadow-rest);
  overflow: hidden;
}
.cartoso-v3 .mock-topbar { height: 4px; }
.cartoso-v3 .topbar-ig { background: var(--ig-gradient); }
.cartoso-v3 .topbar-tiktok { background: linear-gradient(90deg, var(--tiktok-cyan), var(--tiktok-pink)); }
.cartoso-v3 .topbar-fb { background: var(--facebook); }
.cartoso-v3 .topbar-wa { background: var(--whatsapp); }
.cartoso-v3 .mock-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.cartoso-v3 .mock-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cartoso-v3 .dot-ig { background: var(--ig-gradient); }
.cartoso-v3 .dot-tiktok { background: linear-gradient(45deg, var(--tiktok-cyan), var(--tiktok-pink)); }
.cartoso-v3 .dot-fb { background: var(--facebook); }
.cartoso-v3 .dot-wa { background: var(--whatsapp); }
.cartoso-v3 .mock-name { font-weight: 600; font-size: 0.85rem; }

/* Avatar mit Instagram-Gradient-Ring (nur Mockup) */
.cartoso-v3 .avatar-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--ig-gradient);
  flex: none;
}
.cartoso-v3 .avatar-ring .avatar-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--iris-tint);
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--iris-dark);
}

/* Bild-Platzhalter (Fahrzeugfotos) */
.cartoso-v3 .ph {
  background: var(--cartoso-surface-3);
  display: grid;
  place-items: center;
  color: #9a8fb0;
}
.cartoso-v3 .ph svg { stroke-width: 1.8; }
.cartoso-v3 .ratio-45 { aspect-ratio: 4 / 5; }
.cartoso-v3 .ratio-916 { aspect-ratio: 9 / 16; }
.cartoso-v3 .ratio-169 { aspect-ratio: 16 / 9; }
.cartoso-v3 .ratio-11 { aspect-ratio: 1 / 1; }

/* WhatsApp-Chat */
.cartoso-v3 .wa-chat { background: #ece5dd; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cartoso-v3 .wa-bubble {
  background: var(--wa-bubble);
  border-radius: 10px 10px 2px 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  max-width: 85%;
  align-self: flex-end;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.cartoso-v3 .wa-bubble-in {
  background: #fff;
  border-radius: 10px 10px 10px 2px;
  align-self: flex-start;
}
.cartoso-v3 .wa-meta { display: flex; justify-content: flex-end; gap: 4px; font-size: 0.68rem; color: var(--text-3); margin-top: 2px; }
.cartoso-v3 .wa-ticks { color: var(--wa-check); font-weight: 700; letter-spacing: -0.12em; }
.cartoso-v3 .wa-price { color: var(--wa-price); font-weight: 700; }

/* ---------- Footer ---------- */
.cartoso-v3 .footer {
  border-top: 1px solid var(--hairline);
  padding: 36px 0;
  color: var(--text-3);
  font-size: 0.88rem;
}
.cartoso-v3 .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.cartoso-v3 .footer a { color: var(--text-2); text-decoration: none; margin-left: 20px; }
.cartoso-v3 .footer a:hover { color: var(--iris); }
.cartoso-v3 .footer-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }
.cartoso-v3 .footer-brand img { border-radius: 6px; }

/* ---------- FAQ ---------- */
/* Der Kasten traegt Rahmen und Radius, der Kopf ist die Aufklappkachel
   aus tiles.css — dieselbe Form wie im Portal. Das frueher eigene
   +/--Zeichen weicht dem Chevron, den alle anderen Aufklapper tragen. */
.cartoso-v3 .faq details {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  margin-bottom: 10px;
  overflow: hidden;
}
.cartoso-v3 .faq details p {
  color: var(--text-2);
  margin: 0;
  padding: 0 16px 16px;
}
.cartoso-v3 .faq details[open] > .cts-tile--row {
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 14px;
}

/* ---------- Landing-spezifisch ---------- */
.cartoso-v3 .hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 56px clamp(32px, 5vw, 80px); align-items: center; padding: clamp(56px, 8vw, 100px) 0 72px; }
.cartoso-v3 .hero h1 { font-size: clamp(38px, 4.6vw, 62px); line-height: 1.08; letter-spacing: -0.03em; margin: 22px 0 0; }
.cartoso-v3 .hero-sub { font-size: 17px; line-height: 1.65; max-width: 54ch; margin: 22px 0 0; color: var(--text-2); }
.cartoso-v3 .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.cartoso-v3 .hero-checks { display: flex; gap: 20px; flex-wrap: wrap; margin: 26px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 500; color: var(--text-3); }
.cartoso-v3 .hero-checks li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cartoso-v3 .hero-mocks { display: flex; gap: 20px; align-items: flex-start; justify-content: center; }
.cartoso-v3 .mock-hero { box-shadow: 0 12px 40px rgba(60, 20, 90, 0.12); }
.cartoso-v3 .carousel-badge { position: absolute; top: 10px; right: 10px; pointer-events: none; font-size: 11px; font-weight: 600; color: #fff; background: rgba(28, 22, 38, 0.65); border-radius: var(--r-pill); padding: 4px 10px; }
.cartoso-v3 .section-chip { display: inline-block; font-size: 13px; font-weight: 600; color: var(--iris); background: var(--iris-tint); border-radius: var(--r-pill); padding: 6px 14px; }
.cartoso-v3 .section-h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; margin: 16px 0 0; }
.cartoso-v3 .kpi-num { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1; display: inline-block; }
.cartoso-v3 .story-progress { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; pointer-events: none; }
.cartoso-v3 .story-progress span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(28, 22, 38, 0.2); }
.cartoso-v3 .story-progress span.active { background: var(--ig-gradient); }
.cartoso-v3 .tiktok-rail { position: absolute; right: 8px; bottom: 48px; display: flex; flex-direction: column; gap: 12px; align-items: center; pointer-events: none; color: #3a3344; font-size: 11px; font-weight: 600; text-shadow: 0 0 4px rgba(255, 255, 255, 0.6); }
.cartoso-v3 .tiktok-rail span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cartoso-v3 .wa-cat-item { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #f7f2fa; align-items: center; font-size: 13px; }
.cartoso-v3 .wa-cat-thumb { width: 52px; height: 52px; border-radius: 8px; flex: none; }
.cartoso-v3 .price-credits { font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -0.02em; }
.cartoso-v3 .price-eur { font-family: var(--font-display); font-weight: 700; font-size: 24px; white-space: nowrap; }
.cartoso-v3 .price-ul { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; flex: 1; color: var(--text-2); }
.cartoso-v3 .price-ul li { display: flex; gap: 8px; margin: 0; }
.cartoso-v3 .price-ul svg { flex: none; margin-top: 2px; color: var(--iris); }
.cartoso-v3 .credit-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid #f7f2fa; padding-bottom: 14px; }
.cartoso-v3 .cta-dark { background: var(--cartoso-surface-3); border-radius: 12px; padding: clamp(40px, 5vw, 72px); text-align: center; position: relative; overflow: hidden; }
.cartoso-v3 .cta-dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient); }
.cartoso-v3 .cta-dark h2 { color: var(--cartoso-text); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; margin: 0; }
.cartoso-v3 .cta-dark p { font-size: 16px; line-height: 1.6; margin: 16px auto 0; max-width: 56ch; color: var(--cartoso-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .cartoso-v3 .nav-links { display: none; }
  .cartoso-v3 .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--hairline);
    padding: 18px 24px;
    gap: 16px;
    box-shadow: var(--shadow-hover);
  }
  .cartoso-v3 .nav-toggle { display: inline-flex; }
  .cartoso-v3 .section { padding: 60px 0; }
  /* Mit Umschalter waren es vier Elemente in einer Zeile — die Kopfzeile lief
     über den Bildschirmrand und riss die Seite ins Querscrollen. Auf dem Telefon
     bleiben Logo, Login und Menü. Der CTA steht direkt darunter im Hero noch
     einmal, und für das Farbschema genügt hier die Systemeinstellung — den
     Umschalter braucht man im Portal, nicht auf einer Marketingseite. */
  .cartoso-v3 .nav-actions > .btn-primary { display: none; }
  /* Der Schalter ist jetzt ein 40-px-Knopf und passt in die Zeile. */
  .cartoso-v3 .nav-actions { gap: 8px; flex-wrap: nowrap; }
}
@media (max-width: 720px) {
  .cartoso-v3 .footer-inner { flex-direction: column; }
  .cartoso-v3 .footer a { margin: 0 10px; }
}

/* ============================================================
   Aus den Inline-Attributen herausgelöst

   Die Landingpage trug 122 style="…"-Attribute. Die 64, die sich
   wiederholten, stehen jetzt hier. Die verbleibenden ~58 sind
   Einzelmaße in den aria-hidden-Mockups — Seitenverhältnisse und
   Positionen einzelner Illustrationsteile. Dafür 58 Klassen mit je
   einem Aufrufer anzulegen wäre keine Verbesserung, sondern dieselbe
   Einmaligkeit mit einem Namen davor.
   ============================================================ */
.cartoso-v3 .lp-section { padding-bottom: 88px; }
.cartoso-v3 .lp-flush { margin: 0; }
.cartoso-v3 .lp-shrink { min-width: 0; }
.cartoso-v3 .lp-nowrap { white-space: nowrap; }
.cartoso-v3 .lp-14 { font-size: 14px; }
.cartoso-v3 .lp-15 { font-weight: 600; font-size: 15px; }
.cartoso-v3 .lp-tiny { font-size: 11px; color: var(--text-2); }
.cartoso-v3 .lp-label { font-size: 13px; font-weight: 600; }
.cartoso-v3 .lp-accent { font-size: 14px; font-weight: 600; color: var(--iris); }
.cartoso-v3 .lp-kpi-label { margin-top: 8px; font-weight: 500; }

.cartoso-v3 .lp-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cartoso-v3 .lp-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cartoso-v3 .lp-ellipsis {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Preiskarten */
.cartoso-v3 .lp-price-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  white-space: nowrap;
}

.cartoso-v3 .lp-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
}

/* Trennlinie war #f7f2fa — ein Wert, den sonst nichts kannte. */
.cartoso-v3 .lp-price-sub {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

/* Mockups */
.cartoso-v3 .lp-mock-frame {
  position: relative;
  aspect-ratio: 9 / 15;
}

.cartoso-v3 .lp-fill {
  position: absolute;
  inset: 0;
}

.cartoso-v3 .lp-mock-head {
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
  font-weight: 600;
}