/* =========================================================================
   Seite «Gebaut»: die alten Stände, der Weg dahin, die anderen Apps.
   Nur diese Seite lädt diese Datei. Alles darin lebt vom Grundgerüst in
   site.css (Farben, Schriften, Abstände). Hier steht nur, was neu ist.
   ========================================================================= */

/* ---------- Die Stände (Anreisser) ----------
   Die ausführliche Vorschau steht auf /design-entwicklung. Hier reicht die
   Leiste mit den fünf Daten als Vorgeschmack, sie lädt nichts nach. */
.ent__rail{display:flex;gap:8px;overflow-x:auto;margin-top:26px;padding:4px 0 6px;
  list-style:none;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ent__rail::-webkit-scrollbar{display:none}
.ent__r{position:relative;flex:1 0 auto;min-width:132px;
  padding:14px 16px;border-radius:14px;color:var(--muted);
  background:rgba(255,255,255,.02);border:1px solid var(--line)}
.ent__r--jetzt{color:#fff;background:linear-gradient(150deg,var(--primary-dim),transparent 80%);
  border-color:var(--primary-line)}
.ent__punkt{display:block;width:9px;height:9px;border-radius:50%;
  background:var(--line-strong);margin-bottom:10px}
.ent__r--jetzt .ent__punkt{background:var(--primary);
  box-shadow:0 0 10px rgba(95,181,171,.6)}
.ent__datum{display:block;font-size:12px;font-weight:700;white-space:nowrap}
.ent__label{display:block;font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:16px;letter-spacing:.02em;margin-top:3px;color:inherit}
.ent__r--jetzt .ent__label{color:var(--primary)}

/* ---------- Der Weg dahin ---------- */
.weg{margin-top:26px;display:grid;gap:2px}
@media(min-width:820px){.weg{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 40px}}
.weg li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  align-items:start;padding:18px 0;border-top:1px solid var(--line)}
.weg b{font-family:'Anton',Impact,sans-serif;font-size:17px;color:#3f4a49;line-height:1.3}
.weg h3{font-size:17px;font-weight:700;margin-bottom:5px}
.weg p{font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- Andere Apps ---------- */
.apps{display:grid;gap:14px;margin-top:26px}
@media(min-width:760px){.apps{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
.appk{padding:22px 24px;border-radius:var(--r-lg);background:var(--card);
  border:1px solid var(--line);transition:border-color .2s,transform .2s var(--ease)}
.appk:hover{border-color:var(--primary-line);transform:translateY(-2px)}
.appk__n{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(22px,3.6vw,28px);line-height:1;margin-bottom:10px}
.appk__d{font-size:14.5px;line-height:1.55;color:var(--faint)}
.appk__s{margin-top:14px;font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.apps__klein{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;line-height:1.7;color:var(--muted)}
.apps__klein b{color:#fff;font-weight:700}
.apps__klein span{color:var(--muted)}

/* ---------- Der Urknall ---------- */
.zitat{margin:22px 0 24px;padding:0 0 0 22px;border-left:3px solid var(--primary);
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;
  font-size:clamp(20px,3.4vw,29px);line-height:1.35;color:#fff;max-width:30ch}

/* ---------- Recherche ---------- */
.rech{display:grid;gap:2px;margin-top:26px}
@media(min-width:820px){.rech{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 44px}}
.rech article{padding:20px 0;border-top:1px solid var(--line)}
.rech h3{font-size:17px;font-weight:700;margin-bottom:7px}
.rech p{font-size:14.5px;line-height:1.6;color:var(--muted)}
.rech em{color:var(--faint);font-style:italic}

/* ---------- Was sich geändert hat / Was sein könnte ---------- */
.dann,.spaeter{margin-top:26px;display:grid;gap:2px}
@media(min-width:820px){.dann{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 44px}}
.dann li,.spaeter li{padding:16px 0;border-top:1px solid var(--line)}
.dann b,.spaeter b{display:block;font-size:15.5px;color:#fff;margin-bottom:4px}
.dann span,.spaeter span{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
.spaeter{margin-top:22px}

/* ---------- Die Vergessenskurve ----------
   Das Bild zum Urknall-Satz: fünf Punkte an Tag 0, drei davon verblassen.
   Die Kurve steht für sich, der Erklärsatz darunter ist weg. Den Abstand nach
   unten trägt darum jetzt die Kurve selbst, nicht mehr die Bildunterschrift. */
.urk{margin:26px 0 28px;max-width:600px}
.urk__svg{width:100%;height:auto;display:block;overflow:visible}
.urk__t{fill:#fff;font-family:'Anton',Impact,sans-serif;font-size:15px;letter-spacing:.02em}
.urk__k{fill:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase}

/* ---------- Farben je Stand in der Leiste ---------- */
.ent__p{display:flex;gap:4px;margin-top:10px}
.ent__p i{width:14px;height:6px;border-radius:99px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* ---------- Die Buchwand: 51 Rücken in fünf Gruppen ---------- */
.bw{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px);align-items:flex-end;
  margin-top:26px;padding-bottom:4px}
.bw__g{display:flex;flex-direction:column;gap:10px;min-width:0}
.bw__reihe{display:flex;align-items:flex-end;gap:3px;height:clamp(56px,9vw,86px)}
.bw__reihe i{width:clamp(5px,1.1vw,9px);border-radius:2px;background:var(--f);
  opacity:0;transform:scaleY(.3);transform-origin:bottom;
  box-shadow:inset -1px 0 0 rgba(0,0,0,.45);
  transition:opacity .4s var(--ease),transform .5s var(--ease)}
.bw__reihe i.an{opacity:.92;transform:none}
.bw__n{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:baseline;gap:7px;white-space:nowrap}
.bw__n b{font-family:'Anton',Impact,sans-serif;font-size:14px;letter-spacing:0;color:#fff}
.bw__satz{margin-top:16px;font-size:13.5px;color:var(--muted)}

/* ---------- Vorher → Nachher ---------- */
.dann li{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;
  gap:6px 12px;padding:16px 0;border-top:1px solid var(--line)}
.dann__v{font-size:15px;color:var(--muted);text-decoration:line-through;
  text-decoration-color:rgba(222,86,80,.6)}
.dann__p{color:var(--primary);font-size:15px}
.dann__n{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;font-size:17px;color:#fff}
.dann__d{grid-column:1/-1;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---------- Jahr 1 → Jahr 2 ---------- */
.jahr{display:flex;align-items:center;gap:clamp(14px,3vw,30px);margin:24px 0 18px;flex-wrap:wrap}
.jahr span{display:flex;flex-direction:column;gap:2px}
.jahr b{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--primary)}
.jahr span:last-of-type b{color:var(--pop)}
.jahr span{font-family:'Anton',Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(26px,5vw,44px);line-height:1;color:#fff}
.jahr i{font-style:normal;font-size:clamp(20px,3vw,30px);color:var(--muted)}