:root {
  --color-bg:           #F1F5F2;
  --color-bg-card:      #FFFFFF;
  --color-bg-elevated:  #E8F0EA;
  --color-primary:      #376d42;
  --color-accent:       #52a464;
  --color-text:         #1A2E1F;
  --color-text-muted:   #4a6b52;
  --color-text-dim:     #8fad97;
  --color-border:       #d4e6d8;
  --color-shadow:       rgba(55, 109, 66, 0.12);
}
.dark {
  --color-bg:           #0f1f12;
  --color-bg-card:      #1a2e1f;
  --color-bg-elevated:  #223327;
  --color-primary:      #52a464;
  --color-accent:       #6dbf7e;
  --color-text:         #e8f5eb;
  --color-text-muted:   #9dbfa5;
  --color-text-dim:     #4a6b52;
  --color-border:       #2d4d33;
  --color-shadow:       rgba(82, 164, 100, 0.15);
}
/* TODO: Dark mode - button present but not fully active */
/* ─── SHARED CASE-STUDY STYLES (SKD Media Portfolio) ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;background: var(--color-bg);color: var(--color-text);line-height:1.65;overflow-x:hidden;padding-top:72px}

/* ─── SKDM NAVBAR (einheitlich mit Startseite/Portfolio) ─── */
.skdm-nav{position:fixed;top:0;left:0;right:0;height:72px;background:var(--color-bg);border-bottom:1px solid var(--color-border);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px, calc((100% - 1104px) / 2));z-index:9999;font-family:'Poppins',sans-serif;transition:background .3s,border-color .3s}
.skdm-nav-logo{display:flex;align-items:center;flex-shrink:0}
.skdm-nav-logo img{height:48px;width:auto;display:block;object-fit:contain}
.skdm-nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
.skdm-nav-links a{position:relative;color:var(--color-text-muted);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s ease}
.skdm-nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:100%;height:1.5px;background:var(--color-primary);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.skdm-nav-links a:hover{color:var(--color-text)}
.skdm-nav-links a:hover::after{transform:scaleX(1)}
.skdm-nav-links a.active{color:var(--color-primary)}
.skdm-nav-links a.active::after{transform:scaleX(1)}
.skdm-nav-right{display:flex;align-items:center;gap:12px}
.skdm-nav-toggle{padding:8px;border-radius:9999px;border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s}
.skdm-nav-toggle:hover{color:var(--color-text)}
.skdm-nav-toggle .icon-sun{display:none}
.skdm-nav-toggle .icon-moon{display:block}
.dark .skdm-nav-toggle .icon-sun{display:block}
.dark .skdm-nav-toggle .icon-moon{display:none}
.skdm-nav-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skdm-nav-cta{display:inline-flex;align-items:center;background:var(--color-primary);color:#fff !important;border-radius:9999px;padding:10px 20px;font-weight:700;font-size:14px;letter-spacing:.01em;text-decoration:none;box-shadow:0 4px 16px var(--color-shadow);transition:transform .15s ease,background .2s ease;border-bottom:none !important}
.skdm-nav-cta:hover{transform:scale(1.03)}
.skdm-nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.skdm-nav-hamburger span{display:block;width:24px;height:2px;background:var(--color-text);border-radius:2px;transition:all .3s}
.skdm-nav-mobile{display:none;position:fixed;top:72px;left:0;right:0;background:var(--color-bg-card);border-bottom:1px solid var(--color-border);padding:12px max(24px, calc((100% - 1104px) / 2));z-index:9998;flex-direction:column;gap:2px}
.skdm-nav-mobile.open{display:flex}
.skdm-nav-mobile a{color:var(--color-text-muted);text-decoration:none;font-size:14px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--color-border)}
.skdm-nav-mobile a:last-child{border-bottom:none}
@media(max-width:768px){.skdm-nav-links{display:none}.skdm-nav-cta{display:none}.skdm-nav-hamburger{display:flex}}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(1.25rem,3vw,3rem)}
.narrow{max-width:900px;margin-inline:auto;padding-inline:clamp(1.25rem,3vw,3rem)}

/* ─── NAV ─── */
.navbar-fixed{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.2rem 3rem;background-color: var(--color-bg);box-shadow:0 2px 20px var(--color-shadow);z-index:1000;transition:all .3s ease}
.navbar-fixed .logo-link{display:flex;align-items:center;text-decoration:none;z-index:1001}
.navbar-fixed .logo{height:60px;cursor:pointer;mix-blend-mode:screen;filter:brightness(1.08) contrast(1.05)}
.navbar-fixed .nav-links{display:flex;list-style:none;gap:2.5rem;margin:0;padding:0}
.navbar-fixed .nav-links li a{text-decoration:none;color: var(--color-text);font-weight:600;font-size:1.1rem;transition:color .3s ease;position:relative;padding:.5rem 0}
.navbar-fixed .nav-links li a:hover{color:var(--color-primary)}
.navbar-fixed .nav-links li a::after{content:'';position:absolute;width:0;height:2px;bottom:0;left:0;background:var(--color-primary);transition:width .3s ease}
.navbar-fixed .nav-links li a:hover::after{width:100%}
.navbar-fixed .hamburger{display:none;flex-direction:column;cursor:pointer;z-index:1001;position:relative}
.navbar-fixed .hamburger div{width:28px;height:3px;background: var(--color-bg-card);margin:4px 0;transition:all .3s ease}

/* ─── BACK STRIP ─── */
.back-strip{padding:1.5rem 0;border-bottom:1px solid var(--color-border);background:var(--color-bg-card);backdrop-filter:blur(10px)}
.back-strip .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;color: var(--color-text-muted);text-decoration:none;font-size:.9rem;font-weight:600;transition:color .25s ease}
.back-link:hover{color:var(--color-primary)}
.back-link::before{content:'←';font-size:1.1rem;transition:transform .25s ease}
.back-link:hover::before{transform:translateX(-4px)}
.case-progress{font-family:'JetBrains Mono',monospace;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color: var(--color-text-muted)}
.case-progress .green{color:var(--color-primary)}

/* ─── HERO ─── */
.case-hero{padding:6rem 0 5rem;position:relative;overflow:hidden;background:var(--color-bg-elevated)}
.case-hero::before{content:'';position:absolute;top:0;right:0;width:600px;height:600px;background:radial-gradient(circle,rgba(55,109,66,.08) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.case-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:4rem;align-items:end}
.case-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-primary);margin-bottom:1.5rem}
.case-eyebrow::before{content:'';width:1.5rem;height:1px;background:var(--color-primary)}
.case-title{font-size:clamp(2.8rem,6vw,5rem);font-weight:900;line-height:.98;letter-spacing:-.025em;margin-bottom:1.5rem}
.case-title .accent{color:var(--color-primary)}
.case-sub{font-size:1.15rem;color: var(--color-text-muted);line-height:1.7;max-width:50ch}
.case-meta{padding:2rem;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:16px;border-left:3px solid var(--color-primary)}
.cm-row{display:flex;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid var(--color-border);font-size:.92rem}
.cm-row:last-child{border-bottom:none}
.cm-k{color: var(--color-text-muted);font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.cm-v{color: var(--color-text);font-weight:600;text-align:right}
@media(max-width:820px){.case-hero-inner{grid-template-columns:1fr;gap:2.5rem}}

/* ─── PREVIEW ─── */
.preview-section{padding:4rem 0;background: var(--color-bg)}
.preview-frame{position:relative;max-width:1200px;margin:0 auto;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background: var(--color-bg-card);box-shadow:0 40px 100px var(--color-shadow),0 0 0 1px rgba(55,109,66,.08)}
.preview-chrome{padding:.8rem 1rem;display:flex;align-items:center;gap:.5rem;background:linear-gradient(180deg,var(--color-bg-card) 0%,var(--color-bg) 100%);border-bottom:1px solid var(--color-border)}
.pc-dot{width:11px;height:11px;border-radius:50%}
.pc-dot.red{background:#ff5f57}
.pc-dot.yellow{background:#febc2e}
.pc-dot.green{background:#28c941}
.pc-url{flex:1;text-align:center;font-family:'JetBrains Mono',monospace;font-size:.75rem;color: var(--color-text-muted);padding:.3rem .9rem;background:var(--color-bg-elevated);border-radius:6px;margin-left:.6rem}
.pc-action{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem 1rem;background:var(--color-primary);color:#000;font-size:.78rem;font-weight:700;letter-spacing:.04em;border-radius:6px;text-decoration:none;margin-left:.6rem;transition:transform .15s ease}
.pc-action:hover{transform:translateY(-1px)}
.preview-body{position:relative;width:100%;height:calc(100% - 47px);overflow:hidden;background: var(--color-bg)}
.preview-body iframe{position:absolute;top:0;left:0;width:200%;height:200%;border:0;transform:scale(.5);transform-origin:top left;pointer-events:none}

/* ─── CHAPTERS ─── */
.chapter{padding:6rem 0;border-top:1px solid var(--color-border)}
.chapter-num{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-primary);margin-bottom:1.5rem;display:inline-flex;align-items:center;gap:.7rem}
.chapter-num::before{content:'';width:1.5rem;height:1px;background:var(--color-primary)}
.chapter h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:1.5rem}
.chapter h2 .accent{color:var(--color-primary)}
.chapter-lead{font-size:1.2rem;color: var(--color-text-muted);line-height:1.7;max-width:60ch;margin-bottom:3rem}
.chapter-body{font-size:1.05rem;color: var(--color-text-muted);line-height:1.8;max-width:62ch}
.chapter-body p{margin-bottom:1.5rem}
.chapter-body strong{color: var(--color-text);font-weight:600}
.chapter-body .green{color:var(--color-primary);font-weight:600}

.cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.cs-card{padding:2rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:16px;border-top:3px solid;transition:all .3s ease}
.cs-card:hover{transform:translateY(-4px);background:var(--color-bg-elevated)}
.cs-card.challenge{border-top-color:#ff5b1f}
.cs-card.solution{border-top-color:var(--color-primary)}
.cs-card .label{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.8rem;color: var(--color-text-muted)}
.cs-card.challenge .label{color:#ff5b1f}
.cs-card.solution .label{color:var(--color-primary)}
.cs-card h3{font-size:1.25rem;font-weight:700;color: var(--color-text);margin-bottom:.7rem;line-height:1.3}
.cs-card p{color: var(--color-text-muted);font-size:.95rem;line-height:1.65}
@media(max-width:820px){.cs-grid{grid-template-columns:1fr}}

.feat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.feat{padding:1.8rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:14px;display:flex;gap:1.2rem;align-items:flex-start}
.feat-num{flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--color-primary);padding:.4rem .7rem;background:rgba(55,109,66,.1);border-radius:6px;letter-spacing:.1em}
.feat h4{font-size:1.1rem;font-weight:700;color: var(--color-text);margin-bottom:.4rem}
.feat p{color: var(--color-text-muted);font-size:.92rem;line-height:1.6}
@media(max-width:820px){.feat-list{grid-template-columns:1fr}}

.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.5rem}
.result{padding:2.5rem 1.5rem;text-align:center;background:linear-gradient(180deg,rgba(55,109,66,.06) 0%,rgba(55,109,66,.01) 100%);border:1px solid rgba(55,109,66,.15);border-radius:16px}
.result-v{font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:var(--color-primary);line-height:1;letter-spacing:-.025em;margin-bottom:.6rem;text-shadow:0 0 30px rgba(55,109,66,.3)}
.result-l{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color: var(--color-text-muted)}
.result-ctx{font-size:.85rem;color: var(--color-text-muted);margin-top:.6rem;line-height:1.4}
.result-note{margin-top:1.4rem;font-size:.8rem;line-height:1.5;color:var(--color-text-dim);max-width:60ch;display:flex;gap:.5rem}
.result-note::before{content:"*";color:var(--color-primary);font-weight:700}
@media(max-width:820px){.results-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.results-grid{grid-template-columns:1fr}.result{padding:1.8rem 1.2rem}}

.timeline{position:relative;padding-left:2rem;border-left:2px solid var(--color-border);margin-top:2.5rem}
.tl-step{position:relative;padding:1.2rem 0 2rem 1.5rem}
.tl-step::before{content:'';position:absolute;left:-2.6rem;top:1.5rem;width:1.1rem;height:1.1rem;background: var(--color-bg);border:2px solid var(--color-primary);border-radius:50%}
.tl-step::after{content:'';position:absolute;left:-2.1rem;top:1.9rem;width:.3rem;height:.3rem;background:var(--color-primary);border-radius:50%;box-shadow:0 0 10px rgba(55,109,66,.6)}
.tl-week{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);margin-bottom:.4rem}
.tl-step h4{font-size:1.2rem;font-weight:700;color: var(--color-text);margin-bottom:.4rem}
.tl-step p{color: var(--color-text-muted);font-size:.95rem}

.stack-grid{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.stack-tag{padding:.6rem 1.1rem;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:.82rem;color: var(--color-text-muted);letter-spacing:.02em;transition:all .25s ease}
.stack-tag:hover{border-color:var(--color-primary);color:var(--color-primary);background:rgba(55,109,66,.05)}

.quote-block{padding:8rem 0;background:var(--color-bg-elevated);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);position:relative;overflow:hidden}
.quote-block::before{content:'"';position:absolute;font-family:Georgia,serif;font-size:32rem;line-height:.5;color:rgba(55,109,66,.04);top:50%;left:50%;transform:translate(-50%,-30%);pointer-events:none}
.quote-inner{position:relative;z-index:1;text-align:center;max-width:820px;margin:0 auto}
.quote-text{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:500;color: var(--color-text);line-height:1.45;margin-bottom:2.5rem;font-style:italic;letter-spacing:-.005em}
.quote-author{display:flex;align-items:center;justify-content:center;gap:1rem}
.qa-avatar{width:54px;height:54px;border-radius:50%;color: var(--color-text);display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.qa-info{text-align:left}
.qa-name{font-size:1.05rem;font-weight:700;color: var(--color-text)}
.qa-role{font-size:.85rem;color: var(--color-text-muted)}

.next-case{padding:6rem 0;text-align:center;border-top:1px solid var(--color-border)}
.nc-label{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color: var(--color-text-muted);margin-bottom:1.5rem}
.nc-link{display:inline-block;text-decoration:none;color: var(--color-text);transition:color .3s ease}
.nc-link h2{font-size:clamp(2rem,5vw,4rem);font-weight:900;line-height:1;letter-spacing:-.025em;margin-bottom:.5rem;transition:color .3s ease}
.nc-link:hover h2{color:var(--color-primary)}
.nc-link .arrow{font-size:2.5rem;color:var(--color-primary);display:inline-block;transition:transform .3s ease;margin-left:.5rem}
.nc-link:hover .arrow{transform:translateX(8px)}
.nc-tag{display:block;font-family:'JetBrains Mono',monospace;font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-primary);margin-top:1rem}

.foot-slim{padding:2.5rem 0;border-top:1px solid var(--color-border);background: var(--color-bg)}
.foot-slim .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;font-size:.85rem;color: var(--color-text-muted)}
.foot-slim a{color: var(--color-text-muted);text-decoration:none;transition:color .2s ease}
.foot-slim a:hover{color:var(--color-primary)}

@media screen and (max-width:968px){
  body{padding-top:70px}
  .navbar-fixed{padding:1rem 1.5rem}
  .navbar-fixed .logo{height:50px}
  .navbar-fixed .nav-links{position:fixed;left:0;height:100vh;top:0;background: var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;width:70%;transform:translateX(-100%);transition:transform .5s ease;z-index:999;gap:0}
  .navbar-fixed .nav-links.active{transform:translateX(0)}
  .navbar-fixed .nav-links li{margin:1.5rem 0}
  .navbar-fixed .nav-links li a{font-size:1.6rem}
  .navbar-fixed .hamburger{display:flex}
  .navbar-fixed .hamburger.active .line1{transform:rotate(45deg) translate(5px,5px)}
  .navbar-fixed .hamburger.active .line2{opacity:0}
  .navbar-fixed .hamburger.active .line3{transform:rotate(-45deg) translate(7px,-6px)}
  .chapter{padding:4rem 0}
}


/* ─── Dark Mode Toggle ─── */
.dm-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--color-border, #d4e6d8);
  background: transparent; color: var(--color-text-muted, #4a6b52);
  cursor: pointer; transition: border-color .2s, background .2s, color .2s; flex-shrink: 0;
}
.dm-btn:hover { border-color: var(--color-primary); background: rgba(55,109,66,.08); color: var(--color-primary); }
.dm-btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dm-btn .icon-sun  { display: none; }
.dm-btn .icon-moon { display: block; }
.dark .dm-btn .icon-sun  { display: block; }
.dark .dm-btn .icon-moon { display: none; }