/* =====================================================================
   Zeitstrahl-Fokus: Uebersicht (/zeitstrahl) und Fokusansicht
   (/zeitstrahl/modell/{slug}, /zeitstrahl/firma/{slug}).

   Alle Klassen tragen das Praefix zf-, weil der HTML-Download in
   app/views/zeitstrahl-export.php dieselben Partials rendert und sein
   Inline-CSS diese Regeln eins zu eins nachbaut (dort mit literalen
   Farben und Systemschriften statt Tokens und Geist).
   ===================================================================== */

.zf-main{padding-bottom:96px;}
.zf-head .page-head-inner{padding-bottom:8px;}
.zf-summary{font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--ink-2);margin-top:18px;}
.zf-back{font-size:13px;margin:28px 0 0;}
.zf-back a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line);}
.zf-back a:hover{color:var(--ink);border-color:var(--ink);}

/* ---------- Zeitband ----------
   Die Achse liegt so tief, dass darueber genau lanes_top Beschriftungs-
   ebenen Platz haben. --lt und --lb kommen aus dem Partial. */
.zf-band{margin:34px 0 0;padding:6px 0 0;}
.zf-band-inner{
  --laneH:38px;
  position:relative;
  /* 34 px Sockel fuer die Jahresleiste unter der letzten Beschriftungsebene. */
  height:calc((var(--lt) + var(--lb)) * var(--laneH) + 62px);
  margin:0 14px;
}
.zf-axis{
  position:absolute;left:0;right:0;
  top:calc(var(--lt) * var(--laneH) + 8px);
  height:1px;background:var(--ink);
}
.zf-axis::after{
  content:"";position:absolute;right:-1px;top:-3px;
  border-left:7px solid var(--ink);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}

.zf-pt{
  position:absolute;top:calc(var(--lt) * var(--laneH) + 8px);
  width:9px;height:9px;margin:-4px 0 0 -4.5px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink-3);
}
.zf-pt.is-prom{background:var(--accent);border-color:var(--accent);width:11px;height:11px;margin:-5px 0 0 -5.5px;transition:background .4s,border-color .4s;}

/* Beschriftung: Lane 0 liegt direkt an der Achse, hoehere Lanes weiter weg.
   Der Verbindungsstrich waechst mit der Lane mit. */
.zf-lab{
  position:absolute;transform:translateX(-50%);
  display:block;text-align:center;white-space:nowrap;
  font-size:11.5px;line-height:1.25;pointer-events:none;
}
/* Am Bandrand buendig statt zentriert, sonst ragt der Kasten hinaus. */
.zf-lab.al-start{transform:translateX(0);text-align:left;}
.zf-lab.al-end{transform:translateX(-100%);text-align:right;}
.zf-lab.al-start::after{left:2px;}
.zf-lab.al-end::after{left:auto;right:2px;}
.zf-lab b{display:block;font-weight:500;color:var(--ink);letter-spacing:-.01em;}
.zf-lab i{display:block;font-family:var(--mono);font-size:10px;font-style:normal;color:var(--ink-3);}
.zf-lab.is-top{top:calc((var(--lt) - 1 - var(--lane)) * var(--laneH));}
.zf-lab.is-bottom{top:calc((var(--lt) + var(--lane)) * var(--laneH) + 22px);}
.zf-lab::after{
  content:"";position:absolute;left:50%;width:1px;background:var(--line);
}
.zf-lab.is-top::after{top:100%;height:calc(var(--lane) * var(--laneH) + 6px);}
.zf-lab.is-bottom::after{bottom:100%;height:calc(var(--lane) * var(--laneH) + 6px);}

.zf-year{
  position:absolute;bottom:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);
}
.zf-year::before{
  content:"";position:absolute;left:50%;bottom:100%;width:1px;height:8px;background:var(--line);
}

/* ---------- Exportleiste ---------- */
.zf-export{margin-top:44px;border-top:1px solid var(--ink);padding-top:22px;}
.zf-export h2{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.zf-export-sub{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:60ch;margin-top:8px;}
.zf-export-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:20px;}

.zf-fmt{display:flex;align-items:center;gap:6px;}
.zf-fmt-lab{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:4px;}
.zf-fmt-btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  padding:7px 11px;border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink-2);cursor:pointer;transition:.2s;
}
.zf-fmt-btn:hover{border-color:var(--ink-3);color:var(--ink);}
.zf-fmt-btn[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--paper);}

.zf-acts{display:flex;flex-wrap:wrap;gap:10px;}
.zf-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;padding:10px 18px;
  border:1px solid var(--line);border-radius:999px;
  background:var(--paper);color:var(--ink);text-decoration:none;cursor:pointer;transition:.2s;
}
.zf-btn:hover{border-color:var(--ink);}
.zf-btn[disabled]{opacity:.5;cursor:progress;}
.zf-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;transition:background .4s,border-color .4s;}
.zf-btn-primary:hover{filter:brightness(1.15);}

/* ---------- Release-Leiter ---------- */
.zf-list{margin-top:52px;}
.zf-list-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;border-top:1px solid var(--ink);padding-top:22px;}
.zf-list-head h2{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.zf-filter{margin:0;}

.zf-ladder{list-style:none;margin:22px 0 0;padding:0;}
.zf-rel{display:flex;gap:26px;padding:20px 0;border-bottom:1px solid var(--line-2);position:relative;}
/* display:flex schlaegt sonst das eingebaute [hidden]{display:none} und der
   Kategoriefilter haette keine Wirkung. */
.zf-rel[hidden]{display:none;}
.zf-rel::before{
  content:"";position:absolute;left:96px;top:26px;
  width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--ink-3);
}
.zf-rel.is-prom::before{background:var(--accent);border-color:var(--accent);transition:background .4s,border-color .4s;}
/* Durchgezogene Linie zwischen den Punkten, als Andeutung der Achse. */
.zf-rel::after{content:"";position:absolute;left:96px;top:0;bottom:0;width:1px;background:var(--line);z-index:-1;}
.zf-rel:first-child::after{top:26px;}
.zf-rel:last-child::after{bottom:auto;height:26px;}

.zf-when{flex:0 0 78px;font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-3);padding-top:3px;}
.zf-what{flex:1;min-width:0;padding-left:16px;}
.zf-name{font-size:16.5px;font-weight:600;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.zf-cat{
  font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:3px 9px;
}
.zf-caps{margin:10px 0 0;padding:0 0 0 16px;}
.zf-caps li{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin-top:4px;}
.zf-caps li::marker{color:var(--line);}
.zf-meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;}
.zf-meta:empty{display:none;}
.zf-fam,.zf-src{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line);}
.zf-fam:hover,.zf-src:hover{color:var(--accent);border-color:var(--accent);}

.zf-foot-note{margin-top:34px;font-size:12.5px;line-height:1.6;color:var(--ink-3);}

/* ---------- Uebersicht ---------- */
.zf-search{display:flex;align-items:center;gap:12px;margin:34px 0 8px;}
.zf-search label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.zf-search label[hidden]{display:none;}
.zf-search input{
  flex:1 1 260px;max-width:340px;font-family:inherit;font-size:14px;
  padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);
}
.zf-search input:focus{outline:none;border-color:var(--ink);}
.zf-search-n{font-family:var(--mono);font-size:11px;color:var(--ink-3);}

.zf-group{margin-top:44px;}
.zf-group-sub{font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:56ch;margin-top:14px;}
.zf-tiles{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));}
.zf-tile{
  display:block;height:100%;padding:16px 18px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);transition:.2s;
}
.zf-tile:hover{border-color:var(--ink);transform:translateY(-2px);}
.zf-tile-name{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.zf-tile-sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.zf-tile-meta{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--ink-3);margin-top:10px;}
.zf-tile-meta b{color:var(--accent);font-weight:500;transition:color .4s;}

/* ---------- schmale Bildschirme ---------- */
@media (max-width:900px){
  .zf-band-inner{--laneH:34px;}
}
@media (max-width:640px){
  /* Das Band braucht Breite, sonst kleben die Punkte aufeinander. */
  .zf-band{overflow-x:auto;padding-bottom:6px;}
  .zf-band-inner{min-width:560px;}
  .zf-rel{gap:0;flex-direction:column;}
  .zf-rel::before,.zf-rel::after{display:none;}
  .zf-what{padding-left:0;}
  .zf-when{flex:none;margin-bottom:6px;}
  .zf-export-row{gap:14px 18px;}
}

/* ---------- Druck ----------
   Ohne die Farbanpassung fallen die gefuellten Punkte im PDF weg. */
@media print{
  .zf-pt.is-prom,.zf-rel.is-prom::before{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .zf-export,.zf-back,.zf-search,.zf-filter{display:none;}
  .zf-rel{break-inside:avoid;}
}