/* ELS Connect — Downloadbereich
   Farben aus .claude/DESIGN.md, damit Webseite und Anwendung zusammenpassen.
   Wird von build/Publish-Web.ps1 unverändert nach web/elsconnect/ kopiert. */

:root{
  --bg:#141517; --surface:#1B1D20; --raised:#212429;
  --line:#2C3036; --line-strong:#3A3F47;
  --tx:#E6E8EA; --tx2:#9BA1A8; --tx3:#6C737B;
  --accent:#29B6F6; --ok:#3FBF7F;
  --radius:4px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--tx);
  font:15px/1.6 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:56rem; margin:0 auto; padding:0 1.5rem}

/* ── Kopfzeile ───────────────────────────────────────────── */
header{border-bottom:1px solid var(--line); background:var(--surface)}
.bar{display:flex; align-items:center; gap:.85rem; height:60px}
.bar img{height:26px; width:auto; display:block}
.bar .sep{width:1px; height:20px; background:var(--line-strong)}
.bar .co{color:var(--tx3); font-size:13px; letter-spacing:.02em}
.bar .spacer{flex:1}
.bar nav a{color:var(--tx2); font-size:13px}
.bar nav a:hover{color:var(--tx)}

/* ── Kopfbereich mit Download ────────────────────────────── */
.hero{
  padding:3.5rem 0 3rem; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:""; position:absolute; inset:-40% 30% auto -10%; height:80%;
  background:radial-gradient(closest-side,rgba(41,182,246,.11),transparent 70%);
  pointer-events:none;
}
.hero > *{position:relative}
h1{margin:0; font-size:2.1rem; font-weight:600; letter-spacing:-.015em}
.pill{
  display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1rem;
  padding:.2rem .6rem; border:1px solid var(--line-strong); border-radius:999px;
  font-size:12px; color:var(--tx2); background:var(--surface);
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--ok)}

.card{
  margin:2rem 0 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.35rem 1.5rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
}
.card .grow{flex:1 1 16rem; min-width:0}
.card .name{font-weight:600; font-size:1rem}
.card .meta{color:var(--tx3); font-size:13px; margin-top:.2rem}
.btn{
  display:inline-block; padding:0 1.35rem; height:38px; line-height:38px;
  background:var(--accent); color:#0B1013; border-radius:var(--radius);
  font-weight:600; font-size:14px; white-space:nowrap; border:0; cursor:pointer;
}
.btn:hover{background:#4FC3F7; text-decoration:none}
.btn.ghost{
  background:transparent; color:var(--tx); border:1px solid var(--line-strong);
  font-weight:500;
}
.btn.ghost:hover{background:var(--raised)}

/* ── Abschnitte ──────────────────────────────────────────── */
section{padding:2.75rem 0}
h2{font-size:1.05rem; font-weight:600; margin:0 0 1.35rem; letter-spacing:.01em}

ol.steps{margin:0; padding:0; list-style:none; counter-reset:s}
ol.steps li{
  counter-increment:s; position:relative; padding:0 0 1.35rem 2.4rem;
  color:var(--tx2); font-size:14px;
}
ol.steps li:last-child{padding-bottom:0}
ol.steps li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:22px; height:22px; border-radius:50%; background:var(--raised);
  border:1px solid var(--line-strong); color:var(--tx); font-size:12px;
  display:grid; place-items:center; font-weight:600;
}
ol.steps strong{color:var(--tx); font-weight:600; display:block; margin-bottom:.15rem}

code{
  font-family:Consolas,"Cascadia Mono",monospace; font-size:13px;
  background:var(--raised); border:1px solid var(--line);
  border-radius:3px; padding:.08em .35em; color:var(--tx);
}

/* ── Bildschirmfotos ─────────────────────────────────────
   Bewusst zurückhaltend: dünner Rahmen statt Schlagschatten, keine Rundung über
   4 px. Die Anwendung ist selbst dunkel — ein heller Rahmen oder eine Aufhellung
   würde sie aus der Seite herausreißen, statt sie hineinzusetzen. */
/* Das schmale Fenster (Normalmodus) und das breite (Expertenmodus) haben sehr
   verschiedene Seitenverhältnisse. Deshalb feste Verhältnisse statt gleicher Spalten:
   sonst wird das schmale Bild riesig hochskaliert und erschlägt das breite. */
.shots{display:flex; flex-wrap:wrap; gap:1.5rem; align-items:flex-start}
.shots figure{margin:0; min-width:0}
.shots figure:first-child{flex:1 1 12rem; max-width:15rem}
.shots figure:last-child{flex:3 1 22rem}
.shots img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface);
  cursor:zoom-in;
  transition:border-color .12s ease;
}
.shots img:hover,
.shots img:focus-visible{border-color:var(--line-strong); outline:none}
.shots img:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.shots figcaption{
  margin-top:.6rem; color:var(--tx3); font-size:13px; line-height:1.5;
}
.shots figcaption strong{color:var(--tx2); font-weight:600}

/* ── Vollbildansicht ─────────────────────────────────────
   Kein Bibliotheksballast: ein Overlay, ein Bild, eine Unterschrift. */
.lightbox{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1rem; padding:clamp(1rem, 4vw, 3rem);
  background:rgba(10,11,12,.92);
  cursor:zoom-out;
  /* -webkit-backdrop-filter zuerst: aeltere WebKit-Fassungen kennen nur diese Schreibweise. */
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.lightbox[hidden]{display:none}
.lightbox img{
  max-width:100%; max-height:calc(100vh - 9rem);
  width:auto; height:auto;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface);
}
.lb-cap{
  margin:0; color:var(--tx2); font-size:13px; text-align:center;
  max-width:44rem;
}
.lb-close{
  position:absolute; top:1rem; right:1.25rem;
  width:36px; height:36px; line-height:1;
  font-size:22px; color:var(--tx2);
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius); cursor:pointer;
}
.lb-close:hover{color:var(--tx); background:var(--raised)}

/* Wer Bewegung reduziert haben moechte, bekommt keine Uebergaenge. */
@media (prefers-reduced-motion:reduce){
  .shots img{transition:none}
}

/* ── Versionsverlauf ─────────────────────────────────────── */
.rel{
  padding:1.5rem 0; border-top:1px solid var(--line);
}
.rel:first-of-type{border-top:0; padding-top:0}
.rel .head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem .85rem}
.rel .ver{font-size:1.15rem; font-weight:600; color:var(--tx); margin:0}
.rel .when{color:var(--tx3); font-size:13px}
.rel .now{
  font-size:11px; padding:.1rem .45rem; border-radius:999px;
  background:rgba(63,191,127,.12); border:1px solid rgba(63,191,127,.35);
  color:var(--ok); font-weight:600; letter-spacing:.02em;
}
.rel .sum{margin:.35rem 0 .75rem; color:var(--tx2); font-size:14px}
.rel ul{margin:0; padding-left:1.15rem; color:var(--tx2); font-size:14px}
.rel ul li{margin:.3rem 0}
.rel ul li::marker{color:var(--tx3)}

.backlink{display:inline-block; margin-bottom:1.25rem; font-size:13px; color:var(--tx2)}
.backlink:hover{color:var(--tx)}

/* ── Fußzeile ────────────────────────────────────────────── */
footer{padding:2rem 0 3rem; color:var(--tx3); font-size:13px;
       border-top:1px solid var(--line)}
footer .row{display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; align-items:center}

@media (max-width:34rem){
  .hero{padding:2.5rem 0 2.25rem}
  h1{font-size:1.65rem}
  .card{padding:1.15rem}
  .btn{width:100%; text-align:center}
}