/* Inhaltsseiten: Lösungen (Module), Über Vivid Data, Fahrzeugortung/Preise.
   Baut auf site.css auf. */

.section-label{display:flex;width:fit-content;align-items:center;gap:10px;font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.section-label::before{content:"";display:block;width:22px;height:2px;background:var(--accent)}

/* Kopfbereich */
.pillar-hero{padding:clamp(48px,7vw,104px) var(--gut) clamp(36px,5vw,64px);border-bottom:1px solid var(--line);background:radial-gradient(ellipse 80% 70% at 8% 0%,rgba(59,76,171,.28),transparent 60%),var(--bg)}
.pillar-hero-inner{max-width:var(--max-text);margin:0 auto}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--ink-subtle);margin-bottom:26px}
.breadcrumb a{color:var(--ink-subtle);text-decoration:none}
.breadcrumb a:hover{color:var(--accent)}
.erp-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border:1px solid var(--line-strong);padding:6px 12px;margin-bottom:18px}
h1.pillar-title{font-family:var(--f-display);font-weight:600;font-size:clamp(40px,5.6vw,76px);line-height:.98;letter-spacing:-.01em;margin-bottom:20px}
.pillar-lead{font-size:clamp(18px,1.35vw,21px);color:var(--ink-muted);max-width:60ch;margin-bottom:28px;text-wrap:pretty}
.pillar-lead a{color:var(--accent);text-underline-offset:3px}
.pillar-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Text */
.content-wrap{max-width:var(--max-text);margin:0 auto;padding:clamp(32px,4vw,56px) var(--gut) 24px}
.content-wrap.content h2{margin-top:2.2em}

/* Schritte */
.steps{display:grid;gap:12px;margin:1.6em 0 2em}
.step{display:grid;grid-template-columns:48px 1fr;gap:16px;background:var(--surface);border:1px solid var(--line-strong);padding:18px 20px}
.step-num{width:40px;height:40px;border:1px solid var(--accent);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:600;font-size:22px}
.step h3{margin:0 0 4px;font-size:19px;color:var(--ink)}
.step p{margin:0;font-size:16px}

/* Hinweisbox (Vivid Data als System) */
.erp-box{margin:2.2em 0;border:1px solid var(--accent);background:linear-gradient(135deg,rgba(94,181,224,.10),var(--surface))}
.erp-box-inner{padding:clamp(20px,2.6vw,30px)}
.erp-box h3{margin:0 0 8px;font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.2vw,30px);line-height:1.05;color:var(--ink)}
.erp-box p{margin:0;font-size:16px;color:var(--ink-muted)}
.erp-box.flush{margin:0}
.erp-box .btn{margin-top:16px;color:var(--accent-ink);text-decoration:none}
.content .btn,.content a.btn{color:var(--accent-ink);text-decoration:none}
.cta-box-inner{padding:0}

/* FAQ */
.faq{margin:1.6em 0 1em}
.faq details{background:var(--surface);border:1px solid var(--line-strong);padding:0;margin-bottom:10px}
.faq summary{cursor:pointer;font-family:var(--f-label);font-weight:600;font-size:19px;letter-spacing:.01em;color:var(--ink);list-style:none;padding:16px 52px 16px 20px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:24px;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details > :not(summary){padding:0 20px}
.faq details p{margin:0 0 14px;font-size:16px}
.faq details > p:last-child{padding-bottom:6px}

/* Weiterführend-Bereich */
.band{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(36px,5vw,64px) var(--gut)}
.band-in{max-width:var(--max-text);margin:0 auto}

/* Modul-Übersicht */
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:980px;margin:0 auto;padding:clamp(28px,4vw,48px) var(--gut) clamp(48px,6vw,80px)}
.hub-card{display:block;background:var(--surface);border:1px solid var(--line-strong);padding:22px 24px;text-decoration:none;transition:border-color .2s,transform .3s var(--ease)}
.hub-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.hub-card .section-label{margin-bottom:12px}
.hub-card h2{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.2vw,32px);line-height:1.05;margin:0 0 8px;color:var(--ink)}
.hub-card p{font-size:16px;color:var(--ink-muted);margin:0}
@media (max-width:760px){.hub-grid{grid-template-columns:1fr}}

/* Preise (Fahrzeugortung) */
.price-trust-row{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:8px}
.price-trust-item{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-muted)}
.tick{color:var(--accent);font-weight:700;flex:none}
.pricing-section{padding:clamp(24px,3vw,40px) var(--gut) clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.pricing-inner{max-width:980px;margin:0 auto}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.pricing-card{background:var(--surface);border:1px solid var(--line-strong);padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;position:relative}
.pricing-card.featured{border-color:var(--accent);background:linear-gradient(180deg,rgba(94,181,224,.10),var(--surface) 160px)}
.pricing-badge{position:absolute;top:-13px;left:24px;background:var(--accent);color:var(--accent-ink);font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px}
.pricing-name{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,2.4vw,34px);line-height:1;margin-bottom:8px}
.pricing-tagline{font-size:16px;color:var(--ink-muted);margin-bottom:22px;min-height:48px}
.pricing-amount{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-bottom:6px}
.pricing-amount .num{font-family:var(--f-display);font-weight:600;font-size:clamp(46px,4vw,60px);line-height:1;white-space:nowrap}
.pricing-amount .num .cents{font-size:.55em;color:var(--ink-muted)}
.pricing-amount .unit{font-size:16px;color:var(--ink-muted)}
.pricing-setup{font-size:15px;color:var(--ink-subtle);margin-bottom:22px}
.pricing-includes{font-family:var(--f-label);font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.pricing-features{list-style:none;padding:0;margin:0 0 8px;flex-grow:1}
.pricing-features li{display:flex;align-items:flex-start;gap:10px;font-size:16px;color:var(--ink-muted);margin-bottom:10px}
.pricing-install-note{font-size:15px;color:var(--ink-subtle);font-style:italic;padding-top:14px;border-top:1px solid var(--line);margin-bottom:20px}
.pricing-cta{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:transparent;color:var(--ink);font-family:var(--f-label);font-weight:600;font-size:17px;letter-spacing:.04em;padding:14px 20px;text-decoration:none;border:1px solid var(--line-strong);transition:background .2s,border-color .2s}
.pricing-cta:hover{border-color:var(--accent)}
.pricing-card.featured .pricing-cta{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pricing-card.featured .pricing-cta:hover{background:#7CC6EA}
.pricing-footnote{text-align:center;font-size:15px;color:var(--ink-subtle);margin-top:28px}
@media (max-width:760px){.pricing-grid{grid-template-columns:1fr}.pricing-tagline{min-height:0}}

/* Entwurfs-Platzhalter (vor dem Livegang ersetzen oder entfernen) */
.ph{display:inline-block;border:1px dashed var(--signal);color:var(--signal);padding:1px 8px;font-size:.86em;font-family:var(--f-label);letter-spacing:.02em}
.ph-block{border:1px dashed var(--signal);color:var(--signal);padding:22px 22px;margin:20px 0;font-family:var(--f-label);letter-spacing:.04em;text-wrap:balance}

/* Bewertungsstufen */
.rate{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:8px}
.rate li{display:grid;grid-template-columns:116px 1fr;gap:16px;align-items:baseline;border:1px solid var(--line-strong);background:var(--surface);padding:12px 16px;color:var(--ink-muted);margin:0}
.badge{font-family:var(--f-label);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;text-align:center;display:block}
.b-crit{background:#FF9B8F;color:#2A0A06}
.b-tight{background:#FFB23F;color:#1C1204}
.b-check{border:1px solid var(--accent);color:var(--accent)}
.b-ok{background:var(--accent);color:var(--accent-ink)}
@media (max-width:560px){.rate li{grid-template-columns:1fr;gap:8px}.badge{width:fit-content;padding:4px 12px}}
.hero-micro{font-size:15px;color:var(--ink-subtle);margin:14px 0 0}
.src-note{font-size:14px;color:var(--ink-subtle);border-left:2px solid var(--line-strong);padding-left:12px;margin:14px 0}

/* Screenshots: breiter als die Textspalte, anklickbar */
.shot{margin:26px 0 30px;position:relative;left:50%;transform:translateX(-50%);width:min(1100px,calc(100vw - 2*var(--gut) - 16px))}
.shot a{display:block}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line-strong);background:var(--surface)}
.shot figcaption{font-size:14px;color:var(--ink-subtle);margin-top:10px;max-width:70ch}

/* Nummerierte Hervorhebungen auf Screenshot-Ausschnitten */
.shot-frame{position:relative}
.pin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;background:var(--accent);color:var(--accent-ink);font:600 13px/22px var(--f-label);text-align:center;box-shadow:0 0 0 4px rgba(94,181,224,.28);pointer-events:none}
.pin-legend{list-style:none;counter-reset:pin;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 32px;margin:14px 0 0;padding:0}
.pin-legend li{counter-increment:pin;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;color:var(--ink-muted);font-size:15px;margin:0}
.pin-legend li::before{content:counter(pin);background:var(--accent);color:var(--accent-ink);font:600 14px/26px var(--f-label);text-align:center;height:26px}
@media (max-width:560px){.pin{width:18px;height:18px;font-size:11px;line-height:18px}.pin-legend{grid-template-columns:1fr}}

/* Rundgang durch Screenshots */
.shot-frame{overflow:hidden}
.tour-stage{transform-origin:0 0;transition:transform 1.1s cubic-bezier(.5,0,.2,1)}
.tour-stage img{display:block;width:100%;height:auto}
.tour-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:14px;padding:10px 12px;background:linear-gradient(transparent,rgba(7,10,20,.85))}
.tour-btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:0;font:600 14px/1 var(--f-label);letter-spacing:.04em;text-transform:uppercase;padding:10px 14px;cursor:pointer}
.tour-ico{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.playing .tour-ico{width:10px;height:10px;border:0;background:currentColor}
.tour-prog{flex:1;height:2px;background:var(--line-strong)}
.tour-prog i{display:block;height:100%;width:0;background:var(--accent)}
.pin.off{opacity:.25}
.tour-stage .pin{transform:translate(-50%,-50%) scale(calc(1/var(--z,1)));transition:transform 1.1s cubic-bezier(.5,0,.2,1),opacity .4s}
.tour-stage .pin.on{transform:translate(-50%,-50%) scale(calc(1.25/var(--z,1)))}
.pin-legend li{transition:color .3s}
.pin-legend li.on{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tour-stage{transition:none}}

/* Rahmen um Screenshots */
.shot-frame{border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 0 0 1px rgba(94,181,224,.08),0 24px 60px -20px rgba(94,181,224,.28),0 40px 80px -30px rgba(0,0,0,.8)}
.shot-frame .shot-img,.shot-frame img{border:0}
.tour-head{display:flex;align-items:center;gap:12px;height:34px;padding:0 14px;border-bottom:1px solid var(--line-strong);background:linear-gradient(90deg,rgba(94,181,224,.12),transparent 60%);font:600 12px/1 var(--f-label);letter-spacing:.14em;color:var(--ink-muted)}
.tour-head b{color:var(--accent)}
.tour-head span{width:18px;height:1px;background:var(--line-strong)}
.tour-head em{font-style:normal;letter-spacing:.06em;text-transform:none;font-size:13px}
.tour-body{position:relative;overflow:hidden}
.shot-frame{overflow:visible}
.tour-stage{position:relative}

/* Steuerleiste unter dem Bild statt darüber, Abstand zur Legende */
.tour-body{display:flex;flex-direction:column}
.tour-body .tour-stage{overflow:hidden}
.tour-bar{position:static;background:var(--surface);border-top:1px solid var(--line-strong);padding:10px 14px}
.shot .pin-legend{margin-top:22px}
.tour-clip{overflow:hidden;position:relative}

/* Fristentabelle im Blog: Spalten umbrechen statt seitlich scrollen */
.compare-wrap .tbl-wrap,.tbl-fit{min-width:0}
.compare-wrap .compare-table.tbl-fit{table-layout:fixed;width:100%;min-width:0}
.compare-wrap .tbl-fit thead th,.compare-wrap .tbl-fit tbody th{white-space:normal}
.tbl-fit th:nth-child(1){width:28%}
.tbl-fit th:nth-child(2){width:24%}
.tbl-fit th:nth-child(3){width:48%}
.tbl-fit td,.tbl-fit th{overflow-wrap:break-word;hyphens:manual}
.tbl-fit tbody th{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .tbl-fit{table-layout:auto}
  .tbl-fit thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-fit,.tbl-fit tbody,.tbl-fit tr,.tbl-fit th,.tbl-fit td{display:block;width:100%}
  .tbl-fit tr{border-bottom:1px solid var(--line-strong);padding:10px 0}
  .tbl-fit th,.tbl-fit td{border:0;padding:4px 16px}
  .tbl-fit td:nth-of-type(1)::before{content:"Frist: ";color:var(--ink-subtle);font-weight:600}
  .tbl-fit td:nth-of-type(2)::before{content:"Hinweis: ";color:var(--ink-subtle);font-weight:600}
}

/* Erklärvideo im Seitenkopf */
.video-frame{margin:28px 0 8px;border:1px solid var(--line-strong);background:var(--surface);max-width:960px}
.video-frame video{display:block;width:100%;height:auto;background:#000}
.video-frame .ph-block{margin:0;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}

/* Kurzfakten, Zwischen-Knopf, Transkript */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);margin:22px 0 8px}
.facts>div{background:var(--surface);padding:14px 16px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.facts dt{font:600 12px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.facts dd{margin:0;color:var(--ink-muted);font-size:16px}
.cta-inline{margin:26px 0 8px}
.transcript{margin:24px 0;border:1px solid var(--line-strong);background:var(--surface)}
.transcript summary{cursor:pointer;padding:14px 18px;font:600 16px/1.2 var(--f-label);color:var(--ink)}
.transcript p{padding:0 18px 16px;margin:0}
.more{list-style:none;margin:0 0 1.4em;padding:0}
.more li{border-bottom:1px solid var(--line);padding:10px 0}

/* Hero mit Text links und Video rechts */
.pillar-hero--split .pillar-hero-inner{max-width:var(--max)}
.hero-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:8px}
.hero-split .pillar-title{font-size:clamp(36px,4.2vw,62px)}
.hero-split .pillar-lead{max-width:44ch}
.hero-split .video-frame{margin:0;max-width:none}
@media (max-width:900px){.hero-split{grid-template-columns:1fr}.hero-split .video-frame{order:2}}
.voices{margin:28px 0;display:grid;gap:12px}
.voices-lbl{font-family:var(--f-label);font-size:14px;letter-spacing:.06em;color:var(--ink-subtle);margin:0}
.voices blockquote{margin:0;padding:14px 18px;border-left:3px solid var(--accent);background:var(--bg-2);color:var(--ink);font-size:1.05em;line-height:1.5}
.shot.shot-narrow{width:min(460px,calc(100vw - 2*var(--gut) - 16px))}
.solo-offer{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;max-width:680px;padding:18px 22px;border:1px solid var(--line-strong);border-left:3px solid var(--accent);background:var(--surface)}
.solo-offer p{margin:0;font-size:16px;color:var(--ink-muted)}
.solo-offer strong{display:block;margin-bottom:2px;font-weight:600;color:var(--ink)}