/* Case-Seiten (/case/*) — gemeinsame Vorlage.
   Basis identisch zu den Inline-Styles von case/vjsual.html + case/flexovo.html,
   ergänzt um: Bild statt Video im Hero, farbige Meta-Badges, Fakten-Raster,
   Links im Fließtext und Footer-Referenzspalte. */

:root{--max:1080px;--ease:cubic-bezier(.4,0,.2,1);--text2:rgba(255,255,255,.82);--text3:rgba(255,255,255,.6)}
body{background:#09090b}
main{padding-top:80px;padding-bottom:0}

/* Breadcrumb */
.crumb{max-width:var(--max);margin:0 auto;padding:20px 5% 0;font-size:.74rem;color:var(--text3)}
.crumb a{color:var(--text3);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.crumb a:hover{color:var(--text2)}

/* Hero */
.case-hero{max-width:var(--max);margin:0 auto;padding:32px 5% 16px;text-align:left}
.case-overline{font-size:.62rem;color:#c0b4ff;letter-spacing:.18em;text-transform:uppercase;font-weight:700;margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.case-overline::before{content:'';width:18px;height:1px;background:#c0b4ff}
.case-hero h1{font-size:clamp(2rem,5vw,3.4rem);font-weight:560;letter-spacing:-.035em;line-height:1.05;margin-bottom:1rem;color:var(--text)}
.case-hero h1 em{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:400;color:inherit;font-synthesis:none}
.case-hero p{font-size:1.05rem;color:var(--text3);line-height:1.6;max-width:640px;margin-bottom:1.6rem}
.case-meta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.06)}
.case-meta .cm-logo{width:48px;height:48px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.case-meta .cm-logo img{max-width:80%;max-height:60%;object-fit:contain}
.case-meta .cm-info{display:flex;flex-direction:column;gap:2px}
.case-meta .cm-info strong{font-size:.86rem;color:var(--text);font-weight:600}
.case-meta .cm-info span{font-size:.68rem;color:var(--text3)}
.case-meta .cm-stat{font-size:.7rem;color:var(--text3);display:inline-flex;flex-direction:column;gap:2px}
.case-meta .cm-stat strong{color:var(--text);font-size:.84rem;font-weight:600;display:block}
.case-meta .cm-link{margin-left:auto;font-size:.74rem;text-decoration:none;padding:8px 16px;border-radius:50px;background:linear-gradient(120deg,#8b8cfe,#c0b4ff);color:#0b0b0e;font-weight:600;display:inline-flex;align-items:center;gap:6px;box-shadow:0 8px 24px -6px rgba(139,140,254,.5)}
.case-meta .cm-link:hover{transform:translateY(-1px)}
.case-meta .cm-note{margin-left:auto;font-size:.68rem;color:var(--text3);max-width:230px;line-height:1.45;text-align:right}
.case-meta .cm-badge{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c0b4ff;padding:4px 10px;border-radius:50px;background:rgba(192,180,255,.08);box-shadow:inset 0 0 0 1px rgba(192,180,255,.22)}
.case-meta .cm-badge.primary{color:var(--brand-mint);background:rgba(139,140,254,.08);box-shadow:inset 0 0 0 1px rgba(139,140,254,.22)}

/* Hero-Medium (Video oder Screenshot) */
.case-video{max-width:var(--max);margin:32px auto 0;padding:0 5%}
.case-video-wrap{position:relative;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 100px -30px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.05)}
.case-video-wrap video,.case-video-wrap img{width:100%;height:auto;display:block}

/* Lighthouse-Scores */
.lh-section{max-width:var(--max);margin:80px auto 0;padding:0 5%}
.lh-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.4rem;flex-wrap:wrap;gap:1rem}
.lh-title h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--text)}
.lh-title h2 em{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:400;color:inherit;font-synthesis:none}
.lh-meta{font-size:.68rem;color:var(--text3);letter-spacing:.06em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.lh-meta::before{content:'';width:5px;height:5px;border-radius:50%;background:#5fd47a;box-shadow:0 0 6px #5fd47a}
.lh-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:760px){.lh-grid{grid-template-columns:repeat(2,1fr)}}
.lh-card{padding:1.6rem 1.4rem;border-radius:18px;background:linear-gradient(160deg,rgba(95,212,122,.06),transparent);box-shadow:inset 0 0 0 1px rgba(95,212,122,.18);position:relative;overflow:hidden}
.lh-card.warn{background:linear-gradient(160deg,rgba(251,191,36,.06),transparent);box-shadow:inset 0 0 0 1px rgba(251,191,36,.2)}
.lh-card-label{font-size:.56rem;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.lh-card-score{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:400;font-size:2.6rem;color:var(--text);line-height:.95;letter-spacing:-.03em;display:flex;align-items:baseline;gap:4px}
.lh-card-score small{font-style:normal;font-family:inherit;font-size:.85rem;color:var(--text3);font-weight:500}
.lh-card-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.05);margin-top:14px;overflow:hidden}
.lh-card-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,#5fd47a,#86efac)}
.lh-card.warn .lh-card-bar i{background:linear-gradient(90deg,#fbbf24,#fcd34d)}

/* Core Web Vitals */
.cwv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;margin-top:1.2rem}
@media(max-width:760px){.cwv-grid{grid-template-columns:repeat(2,1fr)}}
.cwv-cell{padding:1.1rem 1.2rem;border-radius:14px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.cwv-cell-l{font-size:.5rem;color:var(--text3);letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.cwv-cell-v{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:400;font-size:1.35rem;letter-spacing:-.02em;color:var(--text);line-height:1}
.cwv-cell-v small{font-style:normal;font-family:inherit;font-size:.55rem;color:var(--text3);font-weight:500;margin-left:3px}

/* Fakten-Raster (für Projekte ohne Live-Messung) */
.fact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:760px){.fact-grid{grid-template-columns:repeat(2,1fr)}}
.fact-card{padding:1.6rem 1.4rem;border-radius:18px;background:linear-gradient(160deg,rgba(139,140,254,.06),transparent);box-shadow:inset 0 0 0 1px rgba(139,140,254,.18)}
.fact-card-label{font-size:.56rem;color:var(--text3);letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin-bottom:10px}
.fact-card-value{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:400;font-size:2.2rem;color:var(--text);line-height:.95;letter-spacing:-.03em}
.fact-card-note{font-size:.66rem;color:var(--text3);line-height:1.5;margin-top:12px}
.lh-meta.neutral::before{background:#c0b4ff;box-shadow:0 0 6px #c0b4ff}

/* Story */
.story{max-width:760px;margin:90px auto 0;padding:0 5%;color:var(--text2);font-size:1rem;line-height:1.75}
.story h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:500;letter-spacing:-.025em;line-height:1.15;color:var(--text);margin:3rem 0 1rem;font-family:inherit}
.story h2 em,.story h3 em{font-family:'Playfair',Georgia,serif;font-style:italic;font-weight:400;color:inherit;font-synthesis:none}
.story h2:first-of-type{margin-top:0}
.story p{margin-bottom:1.2rem}
.story strong{color:var(--text);font-weight:600}
.story ul{margin:0 0 1.4rem 1.2rem;padding:0}
.story li{margin-bottom:.5rem}
.story a{color:var(--brand-mint);text-decoration:none;border-bottom:1px solid rgba(139,140,254,.35)}
.story a:hover{border-bottom-color:var(--brand-mint)}
.story blockquote{margin:1.8rem 0;padding:1.4rem 1.7rem;border-left:3px solid #8b8cfe;background:rgba(139,140,254,.04);border-radius:0 14px 14px 0;font-style:normal;color:var(--text2);font-size:.95rem;line-height:1.7}

/* Weitere Referenzen */
.more-cases{max-width:var(--max);margin:80px auto 0;padding:0 5%}
.more-cases h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:500;letter-spacing:-.025em;color:var(--text);margin-bottom:1.4rem}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
@media(max-width:860px){.more-grid{grid-template-columns:repeat(2,1fr)}}
.more-card{display:block;padding:1.3rem 1.4rem;border-radius:16px;text-decoration:none;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .3s var(--ease),box-shadow .3s}
.more-card:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(139,140,254,.28)}
.more-card strong{display:block;font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:5px;letter-spacing:-.01em}
.more-card span{font-size:.7rem;color:var(--text3);line-height:1.5}

/* Globaler CTA-Block (gleiche Vorlage wie News + Homepage) */
.s-label{font-size:.65rem;font-weight:450;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:1.2rem}
.s-title{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;margin-bottom:.6rem}
.cta-wrap{max-width:var(--max);margin:90px auto 60px;padding:0 5%}
.cta{position:relative;text-align:center;padding:100px 5% 90px;border-radius:32px;overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px var(--glass-hi),0 30px 80px var(--shadow)}
.cta .s-label{color:var(--brand-mint)}
.cta .s-title{max-width:500px;margin:0 auto .8rem}
.cta p{max-width:480px;margin:0 auto;font-size:.92rem;color:var(--text2);line-height:1.65;margin-bottom:2rem}
.cta-meta{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:2rem;font-size:.76rem;color:var(--text3)}
.cta-meta a{color:var(--text3);transition:color .2s}
.cta-meta a:hover{color:var(--text2)}

/* Buttons — globales Muster */
.btn-primary,.btn-secondary{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:50px;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;border:none;transition:all .3s var(--ease);letter-spacing:-.005em;line-height:1;white-space:nowrap}
.btn-primary{color:#0b0b0e;background:linear-gradient(120deg,#8b8cfe 0%,#c0b4ff 100%);background-size:200% auto;box-shadow:0 8px 24px -6px rgba(139,140,254,.55),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-primary:hover{background-position:right center;transform:translateY(-1px)}
.btn-secondary{color:var(--text);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.btn-secondary:hover{background:rgba(139,140,254,.08);box-shadow:inset 0 0 0 1px var(--brand-mint-line);color:var(--text);transform:translateY(-1px)}
.hero-btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:.5rem}

@font-face{font-family:'Playfair';src:url('/fonts/PlayfairDisplay-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}