/* ==========================================================================
OTG CARD-SYSTEM – wiederverwendbare, voll SKALIERENDE Karten
Aufbau:
.otg-scope ist der Mess-Container (container-type). Alle Innenmaße in cqw
(= % der Kartenbreite) -> Text, Icons, Abstände skalieren proportional mit.
max-width legt die "Designgröße" fest; in schmaleren Spalten skaliert alles runter.
Assets: /wp-content/themes/OTG2026/assets/cards/{icons,logos}/
========================================================================== */
:root{
--otg-brand:#1d48c0; --otg-dark:#1b1c20; --otg-ink:#1a1a1a;
--otg-pill:#f1efe9; --otg-pill-arrow:#e0ddd6; --otg-red:#ec3b2b;
--otg-beige:#e1d7cc; --otg-beige-line:#ddd3c6; --otg-tan:#b3a690;
}
.otg-scope{container-type:inline-size; width:100%; margin-inline:auto}
.otg-card{border-radius:5cqw; box-shadow:0 6cqw 12cqw -5cqw rgba(20,20,30,.28);
transition:transform .25s ease, box-shadow .25s ease;
font-family:"Roboto Flex","Inter",system-ui,sans-serif; font-stretch:normal}
.otg-card *{font-stretch:normal; box-sizing:border-box}
.otg-card:hover{transform:translateY(-1.2cqw)}
/* ---------- Nav-Card (dunkel) · Design-Breite 420 ---------- */
.nav-card{background:var(--otg-dark); padding:0 6.67cqw 4.76cqw}
.nav-card__head{padding:4.29cqw 0 3.1cqw;border-bottom:1px solid rgba(255,255,255,.16)}
.nav-burger{width:7.14cqw;display:grid;gap:1.43cqw}
.nav-burger i{height:.6cqw;border-radius:1px;background:rgba(255,255,255,.42)}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:2.38cqw 0}
.nav-row__logo{height:5.95cqw;width:auto;display:block}
.nav-row__go{flex:0 0 auto;width:8.57cqw;height:8.57cqw;border-radius:50%;background:#fff;color:#222;
display:grid;place-items:center;transition:transform .2s ease}
.nav-row__go svg{width:4.05cqw;height:4.05cqw}
.nav-row:hover .nav-row__go{transform:translateX(.7cqw)}
/* ---------- Quick check-ups (hell) · 360 ---------- */
.qc-card{background:#fff; padding:6.11cqw 6.67cqw 6.67cqw}
.qc-head{display:flex;align-items:center;gap:3.33cqw;padding-bottom:4.44cqw;border-bottom:1px solid #eceae5}
.qc-head h3{margin:0!important;font-size:5.56cqw!important;font-weight:600!important;font-stretch:normal!important;
letter-spacing:normal!important;line-height:1.15!important;color:var(--otg-ink)!important;text-transform:none!important}
.qc-badge{background:var(--otg-red);color:#fff;font-size:3.1cqw;font-weight:700;line-height:1;
width:7cqw;height:7cqw;border-radius:50%;display:grid;place-items:center;padding:0}
.qc-list{display:flex;flex-direction:column;gap:2.1cqw;margin-top:4.44cqw}
.qc-row{display:flex;align-items:center;justify-content:space-between;background:var(--otg-pill);
border-radius:999px;padding:1cqw 1.6cqw 1cqw 5cqw;transition:transform .2s ease}
.qc-row span{font-size:3.47cqw;line-height:1;letter-spacing:.1cqw;color:#3a3a3a;font-weight:500}
.qc-row__go{width:7.22cqw;height:7.22cqw;border-radius:50%;background:var(--otg-pill-arrow);color:#8d877c;
display:grid;place-items:center;flex:0 0 auto}
.qc-row__go svg{width:3.6cqw;height:3.6cqw}
.qc-row.is-active{background:var(--otg-brand)}
.qc-row.is-active span{color:#fff}
.qc-row.is-active .qc-row__go{background:#fff;color:var(--otg-brand)}
.qc-row:hover{transform:translateX(.6cqw)}
/* ---------- Analytics-Card (hell + .is-dark) · 400 ---------- */
.an-card{background:#fff; padding:7cqw 8cqw 6.5cqw}
.an-title{font-size:4.2cqw;font-weight:700;font-stretch:150%;color:#111;margin:0 0 2.5cqw;letter-spacing:normal}
.an-top{display:flex;align-items:flex-start;gap:4cqw}
.an-val{font-size:7.75cqw!important;font-weight:600!important;font-stretch:normal!important;letter-spacing:normal!important;
color:#111!important;line-height:1!important;white-space:nowrap}
.an-lab{font-size:3.5cqw;color:#555;line-height:1.2;padding-top:1.5cqw;white-space:nowrap}
.an-pills{display:flex;gap:2.25cqw;margin:5cqw 0 4.5cqw}
.an-pills span{font-size:2.6cqw;line-height:1;padding:1.4cqw 3cqw;border-radius:999px;background:#f0eee9;color:#444;font-weight:500;white-space:nowrap}
.an-pills span.on{background:var(--otg-brand);color:#fff}
.an-chart{width:100%;height:30cqw;display:block}
.an-chart polyline{stroke:var(--otg-brand);stroke-width:1.4;vector-effect:non-scaling-stroke}
.an-card.is-dark{background:var(--otg-dark)}
.an-card.is-dark .an-title{color:#fff}
.an-card.is-dark .an-val{color:#fff!important}
.an-card.is-dark .an-lab{color:#aeb1ba}
.an-card.is-dark .an-pills span{background:#2c2e36;color:#c2c5cd}
.an-card.is-dark .an-pills span.on{background:var(--otg-brand);color:#fff}
.an-card.is-dark .an-chart polyline{stroke:#fff}
/* ---------- Workflow-Leiste (hell) · 720 ---------- */
.wf-card{background:#fff; padding:3.61cqw 1cqw 4.17cqw}
.wf-title{margin:0 0 3cqw 3.7cqw!important;font-size:3.5cqw!important;font-weight:700!important;font-stretch:150%!important;
letter-spacing:normal!important;line-height:1.15!important;color:#111!important;text-transform:none!important}
.wf-steps{display:flex;justify-content:space-between}
.wf-step{position:relative;text-align:center;width:25%}
.wf-step::after{content:"";position:absolute;top:6.5cqw;left:calc(50% + 7.6cqw);width:calc(100% - 15.2cqw);
height:.8cqw;background:var(--otg-beige-line);border-radius:2px}
.wf-step:last-child::after{display:none}
.wf-step.seg-blue::after{background:var(--otg-brand)}
.wf-ico{width:13cqw;height:13cqw;margin:0 auto 2cqw;display:block}
.wf-step small{display:block;font-size:1.45cqw;line-height:1.25;letter-spacing:.03cqw;color:var(--otg-tan);
text-transform:uppercase;font-weight:600}
.wf-step.is-active small{color:var(--otg-brand)}
/* ==========================================================================
„LEBEN" – Float / Screenshot-Schatten / pulsierender Datenpunkt
========================================================================== */
/* Float (opt-in): Klasse otg-float auf den .otg-scope-Wrapper.
Für organische Bewegung je Karte ein eigenes animation-delay setzen
(z.B. style="animation-delay:1.2s"). */
@keyframes otg-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.otg-float{animation:otg-float 6s ease-in-out infinite}
/* je Kartentyp andere Dauer + negatives Delay -> versetzt & driftet (kein Sync) */
.otg-float:has(.nav-card){animation-duration:5.8s;animation-delay:-.4s}
.otg-float:has(.qc-card){animation-duration:6.7s;animation-delay:-1.1s}
.otg-float:has(.an-card){animation-duration:7.3s;animation-delay:-2.4s}
.otg-float:has(.wf-card){animation-duration:6.2s;animation-delay:-3.5s}
/* Screenshot-Schatten: Klasse hero-shot aufs Divi-Bild-Modul */
.hero-shot,.hero-shot img{border-radius:14px;display:block}
.hero-shot{box-shadow:0 38px 80px -34px rgba(20,30,60,.5)}
/* Pulsierender Datenpunkt am Graph-Ende (Marker-Grün) */
.an-chartwrap{position:relative}
.an-dot{position:absolute;right:.6cqw;top:6.4cqw;width:2.3cqw;height:2.3cqw;border-radius:50%;background:#00ff9f}
.an-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#00ff9f;animation:otg-ping 1.9s ease-out infinite}
@keyframes otg-ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(4);opacity:0}}
/* ==========================================================================
CARD-STAGE – Collage-Wrapper für mehrere Karten (wiederverwendbar)
Snippet (nur HTML, KEIN Inline-Layout):
Proportionen wie Original; keine :has() (Optimizer-sicher).
========================================================================== */
.otg-stage{display:flex;flex-direction:column;width:100%;margin-inline:auto}
.otg-stage--platform{max-width:940px}
.otg-stage__row{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
/* obere Reihe: Nav 39% (tiefer gestaffelt) · Analytics 59% */
.otg-stage--platform .otg-stage__row > .otg-scope:nth-child(1){flex:0 0 39%;margin-top:9%}
.otg-stage--platform .otg-stage__row > .otg-scope:nth-child(2){flex:0 0 59%}
/* Workflow = einziges direktes Kind der Stage: 58% breit, nach rechts versetzt */
.otg-stage--platform > .otg-scope{width:58%;margin-left:20%;margin-top:2%}
/* Nav-Card: 3 Produkte, aber Höhe wie mit 4 (eine Zeile ~13,3cqw + Basis 4,76) */
.otg-stage--platform .nav-card{padding-bottom:18cqw}
/* Float-Desync positionsbasiert (kein :has) */
.otg-stage__row > .otg-scope:nth-child(1).otg-float{animation-duration:5.8s;animation-delay:-.4s}
.otg-stage__row > .otg-scope:nth-child(2).otg-float{animation-duration:7.3s;animation-delay:-2.4s}
.otg-stage > .otg-scope.otg-float{animation-duration:6.2s;animation-delay:-3.5s}
/* Mobil/schmal: alles untereinander, zentriert */
@media (max-width:980px){
.otg-stage__row{flex-direction:column;align-items:center;gap:18px}
.otg-stage--platform .otg-stage__row > .otg-scope:nth-child(1),
.otg-stage--platform .otg-stage__row > .otg-scope:nth-child(2){flex:0 1 auto;width:100%;max-width:420px;margin-top:0}
.otg-stage--platform > .otg-scope{width:100%;max-width:560px;margin:18px auto 0}
}
/* ==========================================================================
STAGE-VARIANTE „services" – Nav (4 Produkte) + Analytics oben, breiter
6-Schritt-Workflow unten. Eigene Proportionen (kein Nav-Padding-Hack).
========================================================================== */
.otg-stage--services{max-width:980px}
.otg-stage--services .otg-stage__row > .otg-scope:nth-child(1){flex:0 0 38%;margin-top:9%} /* Nav */
.otg-stage--services .otg-stage__row > .otg-scope:nth-child(2){flex:0 0 58%} /* Analytics */
.otg-stage--services > .otg-scope{width:88%;margin-left:6%;margin-top:2%} /* Workflow breit */
/* Workflow mit 6 Schritten (Standard ist 4 -> .wf-step:25%) */
.wf-6 .wf-step{width:16.666%}
.wf-6 .wf-ico{width:8cqw;height:8cqw}
.wf-6 .wf-step::after{top:4cqw;left:calc(50% + 4.8cqw);width:calc(100% - 9.6cqw)}
.wf-6 .wf-title{margin-left:3cqw!important}