/* AK86 2026 – Code of the Week: Übersicht (page-code-of-the-week.php, Alex 09.11.2026, „Überrasch mich“).
   Ein Code-Editor als Changelog. Das Editorfenster (.ed aus base.css) bleibt in beiden Modi dunkel, wie auf einem Schirm. */

.cw-hero, .cw, .cw-auf { --acc: #50BBB8; }
html.lightmode .cw-hero, html.lightmode .cw, html.lightmode .cw-auf { --acc: #1d7f7c; }

/* ---------- Kopf ---------- */
.cw-hero { min-height: 74vh; min-height: 74svh; }
.cw-sub { color: var(--acc); }
.cw-intro { max-width: 46ch; margin-top: clamp(22px, 3.4vh, 40px); font-size: clamp(18px, 1.4vw, 24px); line-height: 1.45; color: rgba(var(--gridcolor-rgb), .86); }

/* ---------- Aufmacher: aktuelle Folge, rechts ihre Demo live ---------- */
.cw-auf { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(30px, 5vw, 100px); align-items: center; padding: clamp(60px, 10vh, 130px) var(--gut) clamp(80px, 12vh, 150px); }
.cw-auf .kick { color: var(--acc); margin-bottom: 18px; }
.cw-auf .cw-ew { color: var(--static-maincolor); margin-left: 10px; }
.cw-auf-t { margin: 0; font-size: clamp(40px, 4.6vw, 96px); text-transform: none; line-height: .95; }
.cw-auf-t a { color: inherit; text-decoration: none; }
.cw-auf-s { margin: 16px 0 0; font-weight: 700; font-size: clamp(19px, 1.7vw, 30px); line-height: 1.2; letter-spacing: -.01em; color: var(--acc); }
.cw-auf-tx { max-width: 52ch; margin: clamp(18px, 2.4vw, 30px) 0 0; font-size: clamp(17px, 1.3vw, 22px); line-height: 1.5; color: rgba(var(--gridcolor-rgb), .86); }
.cw-auf-m { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 24px; margin: clamp(24px, 3vw, 40px) 0 0; border-top: 1px solid var(--line); max-width: 640px; }
.cw-auf-m > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cw-auf-m dt { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px; }
.cw-auf-m dd { margin: 0; font-size: 15px; line-height: 1.4; }
.cw-auf-m .cw-nerd { display: flex; gap: 5px; padding-top: 3px; }
.cw-auf-m .cw-nerd i { width: 14px; height: 14px; border-color: rgba(var(--gridcolor-rgb), .5); }
.cw-auf-m .cw-check.ja { color: var(--acc); }
.cw-auf-go { margin: clamp(20px, 3vw, 36px) 0 0 -24px; }
html.lightmode .cw-auf-go { color: var(--textcolor); }
html.lightmode .cw-auf-go::before { border-color: currentColor; mix-blend-mode: normal; }
.cw-auf-demo { margin: 0; }
.cw-auf-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid rgba(var(--gridcolor-rgb), .26); border-bottom: 0; font: 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.cw-auf-bar b { font-weight: 600; color: var(--static-maincolor); }
.cw-auf-bar b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: currentColor; vertical-align: 1px; animation: cw-blink 1.6s steps(1) infinite; }
.cw-auf-demo .lab-buehne { padding: clamp(18px, 2.4vw, 34px); }
.cw-auf-demo figcaption { margin-top: 12px; font: 13px/1.5 var(--f-mono); color: rgba(var(--gridcolor-rgb), .7); }

/* ---------- Ältere Folgen: dezente Kacheln (Glas 8 %, Hover 15 %, eckig) ---------- */
.cw { position: relative; z-index: 2; padding: 0 var(--gut) clamp(80px, 12vh, 150px); }
.cw-leer { font: 13px var(--f-mono); color: rgba(var(--gridcolor-rgb), .7); }
.cw-h { margin: 0 0 clamp(20px, 3vh, 32px); font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--gridcolor-rgb), .6); }
.cw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.cw-k { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: clamp(20px, 2vw, 30px); background: rgba(var(--gridcolor-rgb), .08); border: 1px solid rgba(var(--gridcolor-rgb), .12); color: var(--textcolor); text-decoration: none; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: background-color .3s, border-color .3s; }
.cw-k:hover, .cw-k:focus-visible { background: rgba(var(--gridcolor-rgb), .15); border-color: rgba(var(--gridcolor-rgb), .3); outline: 0; }
.cw-kw { font: 12px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.cw-ew { margin-left: 8px; font-style: normal; color: var(--static-maincolor); }
.cw-kt { margin-top: 6px; font-weight: 700; font-size: clamp(22px, 1.9vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
.cw-ks { font-size: 15px; line-height: 1.35; color: var(--acc); }
.cw-kx { font-size: 15px; line-height: 1.5; color: rgba(var(--gridcolor-rgb), .75); }
.cw-km { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font: 12px var(--f-mono); }
.cw-nerd { display: inline-flex; gap: 4px; }
.cw-nerd i { width: 10px; height: 10px; border: 1px solid rgba(var(--gridcolor-rgb), .45); }
.cw-nerd i.an { background: var(--static-maincolor); border-color: var(--static-maincolor); }
.cw-check.ja { color: var(--acc); }
.cw-check.nein { color: var(--static-maincolor); }
.cw-pf { margin-left: auto; font-size: 18px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.cw-k:hover .cw-pf, .cw-k:focus-visible .cw-pf { transform: translateX(6px); }
@keyframes cw-blink { 50% { opacity: 0; } }

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  .cw-hero { min-height: 0; padding-top: 170px; }
  .cw-auf { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
  .cw-auf-go { margin-left: -16px; }
}