/* Counterglow · Gegenschein. Hausregeln des Projekts: Chalk/Charcoal/Dannebrog-Rot,
   Haarlinien, sichtbares Raster, keine Rundungen, keine Schatten, keine Verläufe, mobile first. */
:root{
  --bg:#ece9e1;--surface:#f6f4ee;--ink:#1b2320;--mute:#4b5450;--line:#c4bfb2;--line2:#1b2320;
  --acc:#c8102e;--acc-text:#a80d26;--acc-ink:#ffffff;--focus:#a80d26;
  --star:#1b2320;--dust:#5a625e;--core:#1b2320;
  --display:'Hanken Grotesk',system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1b2320;--surface:#212a27;--ink:#ece9e1;--mute:#a7ada6;--line:#3b4642;--line2:#ece9e1;
  --acc:#ff6b7a;--acc-text:#ff8592;--acc-ink:#1b2320;--focus:#ff8592;
  --star:#ece9e1;--dust:#9aa29c;--core:#ece9e1;color-scheme:dark}}

.lp-counterglow{font-family:var(--font)}
.lp-counterglow .lp-coffee,.lp-counterglow .lp-lang,.lp-counterglow .lp-more a,.lp-counterglow .lp-copy,
.lp-counterglow .lp-toast,.lp-counterglow .skip{border-radius:0}
.lp-counterglow .lp-mark i{border-radius:0;background:var(--acc);box-shadow:none;width:14px;height:14px}
.lp-counterglow .lp-copy{background:var(--bg);border-color:var(--line2)}
.lp-counterglow .lp-copy button{border-left-color:var(--line2)}
.lp-counterglow :focus-visible{border-radius:0}

.cg{padding-left:var(--gut);padding-right:var(--gutr)}
.cg>section{max-width:var(--max);margin-inline:auto}
.cg code{font:500 .88em/1.4 var(--mono)}
.cg a{color:var(--ink)}
.cg-label,.cg-cap,.cg-kicker{font:500 .74rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}

/* Aufmacher */
.cg-hero{display:grid;gap:28px;padding-block:24px 56px;border-bottom:1px solid var(--line2)}
.cg-hero-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.cg-kicker{color:var(--acc-text)}
.cg-hero h1{font-size:clamp(2.6rem,9vw,5.6rem);font-weight:800;letter-spacing:-.035em;line-height:.98}
.cg-word{display:block;font:500 .26em/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.6em;color:var(--mute)}
.cg-lead{font-size:1.15rem;line-height:1.55;color:var(--ink);max-width:38em}
.cg-ctas{display:flex;flex-wrap:wrap;gap:10px}
.cg-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:var(--acc);color:var(--acc-ink)!important;
  font-weight:700;text-decoration:none;border:1px solid var(--acc)}
.cg-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)!important}
.cg-ghost{background:transparent;color:var(--ink)!important;border-color:var(--line2)}
.cg-status{display:flex;align-items:center;gap:10px;font:500 .82rem var(--mono);color:var(--mute)}
.cg-dot{width:10px;height:10px;background:var(--acc)}
.cg-fig{margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.cg-sky{display:block;width:100%;height:auto;border:1px solid var(--line2)}
.cg-stars{fill:var(--star);opacity:.55}
.cg-dust{fill:var(--dust)}
.cg-core{fill:var(--core)}
.cg-ecl,.cg-tick{stroke:var(--acc);stroke-width:1.2;fill:none}
.cg-anti{stroke:var(--acc);stroke-width:3;fill:none;stroke-linecap:square}
.cg-deg,.cg-lab{font:500 15px var(--mono);fill:var(--ink);letter-spacing:.06em}
.cg-lab{text-transform:uppercase;font-size:14px;fill:var(--acc-text)}
.cg-fig figcaption{font-size:.88rem;line-height:1.5;color:var(--mute);max-width:60ch}

/* Auf einen Blick */
.cg-glance{display:grid;gap:20px;padding-block:48px;border-bottom:1px solid var(--line)}
.cg-glance-p{font-size:1.08rem;line-height:1.65;max-width:65ch}
.cg-facts{display:grid;grid-template-columns:1fr;margin:0;border-top:1px solid var(--line2)}
.cg-facts div{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.cg-facts dt{font:500 .78rem/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.cg-facts dd{margin:0;font-weight:600;min-width:0}

/* Abschnittsköpfe */
.cg>section:not(.cg-hero):not(.cg-glance){padding-block:64px 8px}
.cg-head{display:grid;gap:12px;margin-bottom:28px}
.cg-head h2{font-size:clamp(1.8rem,5vw,2.9rem);font-weight:800;letter-spacing:-.025em}
.cg-head p{color:var(--mute);max-width:62ch}

/* Ordner-Demo */
.cg-demo-grid{display:grid;gap:0;border:1px solid var(--line2)}
.cg-treebox{padding:18px;border-bottom:1px solid var(--line2);min-width:0}
.cg-tree{list-style:none;margin:12px 0 0;padding:0;font:500 .9rem/1.4 var(--mono)}
.cg-tree li{padding-left:calc(var(--d) * 1.2em)}
.cg-node{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;width:100%;min-height:44px;padding:8px 10px;border:0;
  border-left:3px solid transparent;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.cg-node:hover{background:var(--surface)}
.cg-node[aria-pressed=true]{border-left-color:var(--acc);background:var(--surface)}
.cg-dir{color:var(--ink);font-weight:500}
.cg-file{color:var(--mute)}
.cg-st{margin-left:auto;padding-left:12px;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.cg-st-listed{color:var(--acc-text)}
.cg-st-draft{text-decoration:line-through;text-decoration-thickness:1px}
html:not(.js) .cg-node{cursor:default;pointer-events:none}
.cg-cover{margin-top:14px;font-size:.85rem;color:var(--mute)}
.cg-panels{display:grid;min-width:0}
.cg-panel{min-width:0;border-bottom:1px solid var(--line)}
.cg-panel:last-child{border-bottom:0}
.js .cg-panel{display:none;border-bottom:0}
.js .cg-panel.on{display:block}
.cg-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line2);background:var(--surface)}
.cg-dots{display:flex;gap:5px}.cg-dots i{width:9px;height:9px;border:1px solid var(--line2)}
.cg-addr{flex:1;min-width:0;font:500 .85rem var(--mono);padding:4px 10px;border:1px solid var(--line);background:var(--bg);overflow-wrap:anywhere}
.cg-split{display:grid}
.cg-src{padding:16px;border-bottom:1px solid var(--line);min-width:0}
.cg-src pre{margin:10px 0 0;font:500 .85rem/1.6 var(--mono);overflow-x:auto;white-space:pre;color:var(--ink)}
.cg-out{padding:20px 16px 24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cg-out b{color:var(--acc-text);font-weight:500}
.cg-out-h{font:800 1.6rem/1.1 var(--display);letter-spacing:-.02em;padding-top:8px;border-top:3px solid var(--ink);margin-top:6px}
.cg-note{color:var(--mute)}

/* Funktionen: Raster mit Haarlinien */
.cg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line2);border-left:1px solid var(--line)}
.cg-grid li{padding:22px 20px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.cg-n{font:500 .78rem var(--mono);color:var(--acc-text)}
.cg-grid h3{font-size:1.15rem;font-weight:700}
.cg-grid p{color:var(--mute);font-size:.97rem;line-height:1.55}
.cg-grid code{color:var(--ink);overflow-wrap:anywhere}

/* Themes */
.cg-tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line2)}
.cg-tl li{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;padding:14px 0;border-bottom:1px solid var(--line);min-width:0}
.cg-sw{grid-row:1/4;width:40px;height:40px;background:var(--c);border:1px solid var(--line2)}
.cg-tl b{font-weight:700}
.cg-tl span:not(.cg-sw){color:var(--mute);font-size:.92rem;line-height:1.45}
.cg-tl code{font-size:.75rem;color:var(--mute)}

/* Schnellstart */
.cg-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line2)}
.cg-steps li{counter-increment:s;display:grid;grid-template-columns:2.6em 1fr;gap:6px 12px;padding:18px 0;border-bottom:1px solid var(--line);min-width:0}
.cg-steps li::before{content:counter(s,decimal-leading-zero);font:500 .9rem/1.7 var(--mono);color:var(--acc-text)}
.cg-steps li>*{grid-column:2;min-width:0}
.cg-steps .lp-copy{margin-top:10px}
.cg-deploy{margin-top:28px;padding:20px;border:1px solid var(--line2);display:grid;gap:10px;max-width:75ch}
.cg-deploy h3{font-size:1.1rem}
.cg-deploy p{color:var(--mute)}
.cg-deploy code{color:var(--ink)}

/* Fahrplan */
.cg-roadlist{list-style:none;margin:0;padding:0;display:grid;border-top:3px solid var(--acc);counter-reset:r}
.cg-roadlist li{counter-increment:r;display:grid;gap:4px;padding:16px 0 16px 3em;position:relative;border-bottom:1px solid var(--line)}
.cg-roadlist li::before{content:counter(r);position:absolute;left:0;top:16px;width:1.9em;height:1.9em;display:grid;place-items:center;
  border:1px solid var(--line2);font:500 .85rem var(--mono)}
.cg-roadlist span{color:var(--mute)}

/* Fragen */
.cg-faqlist{display:grid;border-top:1px solid var(--line2)}
.cg-faqlist div{padding:18px 0;border-bottom:1px solid var(--line);display:grid;gap:6px}
.cg-faqlist h3{font-size:1.08rem;font-weight:700}
.cg-faqlist p{color:var(--mute);max-width:65ch}

/* Schluss */
.cg>.cg-end{margin-top:56px;padding:40px 24px!important;background:var(--ink);color:var(--bg);display:grid;gap:16px}
.cg-end h2{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;letter-spacing:-.03em}
.cg-end p{color:var(--bg);max-width:60ch}
.cg-end a:not(.cg-btn){color:var(--bg)}
.cg-end .cg-btn:hover{background:var(--bg);color:var(--ink)!important;border-color:var(--bg)}
.cg-end :focus-visible{outline-color:var(--bg)}

@media (min-width:700px){
  .cg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-tl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .cg-split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
  .cg-src{border-bottom:0;border-right:1px solid var(--line)}
  .cg-facts{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
}
@media (min-width:980px){
  .cg-hero{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;column-gap:24px;padding-top:40px}
  .cg-hero-text{grid-column:1/7}
  .cg-fig{grid-column:7/-1}
  .cg-glance{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
  .cg-glance h2{grid-column:1/3}
  .cg-glance-p{grid-column:3/9}
  .cg-facts{grid-column:9/-1;grid-template-columns:1fr}
  .cg-facts div{grid-template-columns:8em 1fr}
  .cg-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end}
  .cg-head h2{grid-column:1/6}
  .cg-head p{grid-column:7/-1}
  .cg-demo-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .cg-treebox{grid-column:1/5;border-bottom:0;border-right:1px solid var(--line2)}
  .cg-panels{grid-column:5/-1}
  .cg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cg-tl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cg-steps{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
  .cg-steps li{grid-template-columns:1fr;border-bottom:0;padding-top:16px}
  .cg-steps li>*{grid-column:1}
  .cg-roadlist{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
  .cg-roadlist li{padding:56px 0 16px;border-bottom:0}
  .cg-faqlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
  .cg>.cg-end{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:64px 48px!important;align-items:end}
  .cg-end h2{grid-column:1/8}
  .cg-end p{grid-column:1/8}
  .cg-end .cg-ctas{grid-column:9/-1;grid-row:1/3;justify-self:end}
}

/* Teilen-Bild 1200×630 */
html.og .lp-top{display:none}
html.og .cg-hero{min-height:630px;padding:44px 0 0;border:0;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
html.og .cg-hero-text{grid-column:1/7}
html.og .cg-fig{grid-column:7/-1}
html.og .cg-fig figcaption,html.og .cg-ctas{display:none}
html.og .cg-hero h1{font-size:4.6rem}

@media (forced-colors:active){
  .cg-sky path{fill:CanvasText;stroke:CanvasText}
  .cg-dot,.cg-sw{forced-color-adjust:none}
  .cg-node[aria-pressed=true]{border-left-color:Highlight}
  .cg-btn{border:2px solid ButtonText}
}
/* Kurzer Befehl: umbrechen statt scrollen (Scrollbereich wäre nicht per Tastatur erreichbar) */
.lp-counterglow .lp-copy code{overflow-x:visible;white-space:pre-wrap;overflow-wrap:anywhere}
.cg-lead{stroke:var(--acc);stroke-width:1.2;stroke-dasharray:4 5;fill:none}
.cg-dust{opacity:.85}