/* ══ Case Studies (Prefix .cs-) — nutzt Tokens aus tokens.css + Hero aus branchen.css ══ */

/* Überblick / Liste */
.cs-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1.5rem;margin-bottom:4rem}
.cs-card{display:flex;flex-direction:column;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s,box-shadow .2s}
.cs-card:hover{border-color:var(--brand);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.10)}
[data-theme="dark"] .cs-card{background:#13131f;border-color:#2a2a3d}
[data-theme="dark"] .cs-card:hover{border-color:#b146f8}
.cs-card-top{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#001d2f,#0a2f4a);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cs-card-top img{width:100%;height:100%;object-fit:cover}
.cs-card-logo{font-size:1.05rem;font-weight:800;color:#fff;letter-spacing:-.01em;padding:0 1.5rem;text-align:center;opacity:.95}
.cs-card-body{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;gap:.6rem}
.cs-card-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
[data-theme="dark"] .cs-card-eyebrow{color:#c084fc}
.cs-card-title{font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
.cs-card-desc{font-size:.92rem;color:var(--text-muted);line-height:1.6}
.cs-card-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.cs-card-tags span{font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:7px;background:var(--brand-light);color:var(--brand)}
[data-theme="dark"] .cs-card-tags span{background:rgba(177,70,248,.14);color:#c084fc}
.cs-card-link{margin-top:.4rem;font-size:.88rem;font-weight:800;color:var(--brand);display:inline-flex;align-items:center;gap:.45rem}
[data-theme="dark"] .cs-card-link{color:#c084fc}
.cs-card-link svg{width:15px;height:15px;transition:transform .18s}
.cs-card:hover .cs-card-link svg{transform:translateX(4px)}

/* "Auf einen Blick" Fakten-Box */
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem 1.25rem;background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:2rem 2.1rem;margin-bottom:1.2rem}
[data-theme="dark"] .cs-meta{background:#13131f;border-color:#2a2a3d}
.cs-meta-item{display:flex;flex-direction:column;gap:.25rem}
.cs-meta-k{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.cs-meta-v{font-size:.98rem;font-weight:700;color:var(--text);line-height:1.4}
.cs-meta-v a{color:var(--brand);text-decoration:none}
[data-theme="dark"] .cs-meta-v a{color:#c084fc}
.cs-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:4rem}
.cs-tags span{font-size:.8rem;font-weight:700;padding:.45rem .9rem;border-radius:9px;background:var(--brand-light);color:var(--brand)}
[data-theme="dark"] .cs-tags span{background:rgba(177,70,248,.14);color:#c084fc}

/* Screenshot-Showcase (Browser-Rahmen) */
.cs-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem;margin-bottom:4.5rem}
.cs-shots--single{grid-template-columns:1fr;max-width:900px;margin-inline:auto}
.cs-shot{border:1.5px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:0 14px 40px rgba(0,0,0,.10)}
[data-theme="dark"] .cs-shot{background:#13131f;border-color:#2a2a3d}
.cs-shot-bar{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,.02)}
[data-theme="dark"] .cs-shot-bar{border-color:#2a2a3d;background:rgba(255,255,255,.03)}
.cs-shot-dots{display:flex;gap:.4rem}
.cs-shot-dots i{width:11px;height:11px;border-radius:50%;display:block}
.cs-shot-dots i:nth-child(1){background:#ff5f57}.cs-shot-dots i:nth-child(2){background:#febc2e}.cs-shot-dots i:nth-child(3){background:#28c840}
.cs-shot-url{flex:1;font-size:.78rem;color:var(--text-muted);background:var(--bg,rgba(0,0,0,.04));border-radius:7px;padding:.32rem .7rem;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-theme="dark"] .cs-shot-url{background:rgba(255,255,255,.05)}
.cs-shot-img{aspect-ratio:16/10;background:linear-gradient(135deg,#eef2f7,#dde6f0);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:#7a8aa0}
[data-theme="dark"] .cs-shot-img{background:linear-gradient(135deg,#0e1626,#0a1120);color:#54627a}
.cs-shot-img img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-shot-img svg{width:34px;height:34px;opacity:.7}
.cs-shot-ph{font-size:.8rem;font-weight:600}
.cs-shot-ph small{display:block;font-weight:500;opacity:.8;margin-top:.2rem}
.cs-shot-cap{padding:.7rem 1rem;font-size:.8rem;color:var(--text-muted);border-top:1px solid var(--border)}
[data-theme="dark"] .cs-shot-cap{border-color:#2a2a3d}

/* Abschnitte */
.cs-lead{font-size:1.12rem;line-height:1.75;color:var(--text-muted);max-width:760px;margin-bottom:4.5rem}
.cs-lead strong{color:var(--text)}

/* Leistungsfelder */
.cs-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:4.5rem}
.cs-area{background:var(--surface);border:1.5px solid var(--border);border-radius:20px;padding:2rem 1.9rem;display:flex;flex-direction:column;gap:1rem}
[data-theme="dark"] .cs-area{background:#13131f;border-color:#2a2a3d}
.cs-area-ico{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#b146f8,#5ccbf9);color:#fff}
.cs-area-ico svg{width:26px;height:26px}
.cs-area-h{font-size:1.22rem;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.cs-area-p{font-size:.92rem;color:var(--text-muted);line-height:1.65}
.cs-area ul{list-style:none;padding:0;margin:.2rem 0 0;display:flex;flex-direction:column;gap:.6rem}
.cs-area li{display:flex;gap:.6rem;font-size:.9rem;color:var(--text);line-height:1.5}
.cs-area li svg{width:17px;height:17px;flex-shrink:0;margin-top:.15rem;color:#22c55e}

/* Ergebnis */
.cs-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-bottom:4.5rem}
.cs-result{background:var(--surface);border:1.5px solid var(--border);border-radius:16px;padding:1.6rem 1.5rem}
[data-theme="dark"] .cs-result{background:#13131f;border-color:#2a2a3d}
.cs-result-h{font-size:1rem;font-weight:800;color:var(--text);margin-bottom:.4rem;display:flex;align-items:center;gap:.5rem}
.cs-result-h svg{width:18px;height:18px;color:var(--brand)}
[data-theme="dark"] .cs-result-h svg{color:#c084fc}
.cs-result-p{font-size:.88rem;color:var(--text-muted);line-height:1.6}

/* Zitat */
.cs-quote{background:linear-gradient(135deg,rgba(177,70,248,.07),rgba(92,203,249,.06));border:1.5px solid rgba(177,70,248,.22);border-radius:22px;padding:2.6rem 2.4rem;margin-bottom:1rem}
[data-theme="dark"] .cs-quote{background:linear-gradient(135deg,rgba(177,70,248,.12),rgba(92,203,249,.07));border-color:rgba(177,70,248,.3)}
.cs-quote-mark{font-size:3rem;line-height:.6;color:var(--brand);font-weight:800;opacity:.5}
[data-theme="dark"] .cs-quote-mark{color:#c084fc}
.cs-quote-text{font-size:1.25rem;line-height:1.6;font-weight:600;color:var(--text);margin:.6rem 0 1.4rem;letter-spacing:-.01em}
.cs-quote-by{display:flex;align-items:center;gap:.9rem}
.cs-quote-av{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#b146f8,#5ccbf9);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0}
.cs-quote-name{font-size:.95rem;font-weight:800;color:var(--text)}
.cs-quote-role{font-size:.82rem;color:var(--text-muted)}
.cs-todo{font-size:.78rem;color:#b45309;background:#fef3c7;border:1px solid #fde68a;border-radius:8px;padding:.5rem .8rem;margin-top:1.2rem;display:inline-block}
[data-theme="dark"] .cs-todo{color:#fbbf24;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.25)}

/* ── Meta-Panel Redesign (übersichtlicher) ─────────────────────────────────── */
.cs-meta{position:relative;overflow:hidden;gap:1.6rem 2rem;padding:2.3rem 2.2rem 2rem;border-radius:22px;box-shadow:0 12px 36px rgba(0,0,0,.06)}
.cs-meta::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#b146f8,#5ccbf9)}
[data-theme="dark"] .cs-meta{box-shadow:none}
.cs-meta-item{gap:.4rem;padding-left:.95rem;border-left:2px solid var(--brand-light)}
[data-theme="dark"] .cs-meta-item{border-left-color:rgba(177,70,248,.28)}
.cs-meta-k{font-size:.68rem;letter-spacing:.1em;color:var(--brand)}
[data-theme="dark"] .cs-meta-k{color:#c084fc}
.cs-meta-v{font-size:1rem;font-weight:800;letter-spacing:-.01em}
.cs-meta-v a{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .75rem;border-radius:9px;background:var(--brand-light);font-weight:800;transition:opacity .15s}
.cs-meta-v a:hover{opacity:.8}
[data-theme="dark"] .cs-meta-v a{background:rgba(177,70,248,.16)}
.cs-tags{gap:.55rem;margin-top:.2rem}
.cs-tags span{padding:.5rem 1.05rem;border-radius:999px;font-size:.82rem;border:1.5px solid transparent}
[data-theme="dark"] .cs-tags span{border-color:rgba(177,70,248,.25)}