/* ==========================================================================
   pages/historie.css
   /unternehmen/historie/ - der Weg von 1993 bis heute als Zeitstrahl.

   WARUM EIN ZEITSTRAHL UND NICHT EINE FOLGE VON ABSAETZEN: hier traegt die
   Reihenfolge selbst Information. Das ist die einzige Vorlage im Projekt, bei
   der eine Achse und Jahreszahlen begruendet sind und nicht Zierde - genau die
   Probe, die man vor jedem numerierten Baustein machen sollte.

   INFOSEITE nach der Hero-Regel: kein Bogen, kein Motiv. Auf der Liveseite
   liegt zu keiner Station ein Bild. Kommen spaeter Bilder, passt eines je
   Station rechts neben den Text, ohne dass die Achse sich aendert.

   FUER WORDPRESS: ACF-Repeater "stationen" mit den Feldern jahr, titel, text
   und optional bild. Die Reihenfolge zieht der Kunde, sie kommt nicht aus einer
   Sortierung - bei Zeitraeumen wie "1993 - 1999" gibt es kein Datum, nach dem
   sich sortieren liesse.
   ========================================================================== */

/* --- Kopf ---------------------------------------------------------------- */
/* Bauform in components/bogenhero.css.
   DER FUSSABSTAND RECHNET DIE BOGENHOEHE MIT: der Bogen ist
   min(6.25vw, 6rem) hoch, darunter kommt der eigentliche Abstand. Ein fester
   Wert wie auf /herstellung/ laesst den Text auf schmalen Schirmen zu dicht
   an den Bogen ruecken. Deshalb bleibt das hier so und wird NICHT
   vereinheitlicht. */
.hikopf {
  --hero-hoehe: max(26rem, calc(72vh - var(--h-nav)));
  --hero-polster: var(--sp-8);
  --hero-polster-fuss: calc(min(6.25vw, 6rem) + var(--sp-7));
  --hero-fokus: 60% 62%;
  --schwung-grund: var(--bg-page);
}

.hikopf > .schwung { position: absolute; left: 0; right: 0; bottom: -1px; }

/* --- Epochen ------------------------------------------------------------ */
/* ==========================================================================
   Epochen: AM 02.09.2026 ENTFALLEN
   ==========================================================================
   Hier standen .hiepoche mit Nummer, Kapitelnamen und Jahresspanne, dazu ein
   Raster 15rem zu 1fr und ein klebender Kapitelkopf. Kundenwunsch Folie 19:
   keine Kapitel. Die Kapitelnamen waren ohnehin von der Agentur und nie
   bestaetigt.
   ========================================================================== */

/* Die Sektion, die den Zeitstrahl jetzt allein traegt. */
.hizeitraum { padding-block: var(--sp-sektion); background: var(--bg-page); }

/* --- Der Zeitstrahl ----------------------------------------------------- */
.hizeit {
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* JAHR LINKS, INHALT RECHTS. Kundenwunsch vom 02.09.2026, Folie 19.

   Diese Anordnung gab es frueher schon und sie wurde aufgegeben: das Jahr
   kostete als eigene Spalte 10rem, die dem Text fehlten. Der Einwand traegt
   nicht mehr, weil die Kapitelspalte von 15rem mit weggefallen ist. Nachdem
   der Text auf 36rem Lesebreite gedeckelt ist, gewinnt er dadurch NICHTS an
   Breite - das waere auch falsch. Was gewonnen ist: eine Spalte weniger und
   886 px weniger Seitenhoehe, gemessen.

   Die goldene Achse liegt jetzt ZWISCHEN Jahr und Inhalt, wo eine Zeitachse
   hingehoert. Vorher lief sie links neben allem her.

   8rem fuer die Jahresspalte: die laengste Angabe ist "1993 – 1999", das sind
   bei --fs-200 mit tabular-nums rund 88 px. 8rem = 128 px lassen Luft, ohne
   Platz zu verschenken. */
.histation {
  position: relative;
  display: grid;
  /* 8rem BLEIBT, auch nachdem die Jahreszahl am 04.09.2026 auf 18 px kam.
     Ich hatte zwischenzeitlich auf 9rem verbreitert, weil eine Messung
     "1993 - 1999" mit 128 px in einer 128-px-Spalte ergab - also ohne
     Reserve. Die Messung war falsch: gemessen war der ABSATZ, und der fuellt
     die Spalte immer. Der Text selbst ist 109 px breit, es waren also von
     Anfang an 19 px Reserve. Die 16 px bleiben damit bei der Textspalte, wo
     sie mehr nuetzen.
     Nachgemessen mit einer Range ueber den Textinhalt, nicht ueber das
     Element - dieselbe Falle wie bei der Grafolita-Zeile der Produktseiten. */
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  column-gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 34rem) {
  /* Unter 544 px bleiben neben 8rem Jahresspalte keine 20 Zeichen fuer die
     Ueberschrift. Dann wieder untereinander, Jahr als Label darueber. */
  .histation { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-2); }
  .histation::before, .histation::after { display: none; }
}
.histation::after {
  content: "";
  position: absolute;
  /* An der Spaltengrenze: 8rem Jahresspalte plus halber Spaltenabstand. */
  left: calc(8rem + var(--sp-6) / 2);
  top: 1.5em;
  bottom: calc(var(--sp-6) * -1);
  width: 1px;
  background: var(--line);
}
.histation:last-child::after { display: none; }
.histation::before {
  content: "";
  position: absolute;
  left: calc(8rem + var(--sp-6) / 2);
  top: 0.5em;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-radius: 50%;
  background: var(--toem-gold);
  z-index: 1;
}
/* Das Jahr ist Spalte eins, Ueberschrift und Text teilen sich Spalte zwei.
   grid-column an beiden, weil sonst der Text in eine dritte, nicht
   existierende Spalte rutschen wuerde.
   NUR AB 34rem, und das ist der Grund: die Regeln standen frueher ohne
   Bedingung und galten damit auch im einspaltigen Raster darunter. Das Grid
   legte fuer grid-column: 2 eine zweite Spalte an, die erste blieb 0 px
   breit - und die Jahreszahl quoll aus ihrer Spalte heraus und lag unter der
   Ueberschrift. GEMESSEN am 22.09.2026 bei 320 bis 414 px: Spaltenmass
   "0px 248px" bei 320 px.
   Die Reihenfolge im Stylesheet war schuld: der Media-Query steht weiter
   oben, diese Regeln danach - und bei gleicher Spezifitaet gewinnt die
   spaetere. */
@media (min-width: 34.001rem) {
  .histation__jahr { grid-column: 1; }
  .histation__titel,
  .histation__text { grid-column: 2; }
}
/* GROESSER, Wunsch vom 04.09.2026. Vorher --fs-200, also 15 px, gedaempft
   und mit Versalabstand - die Jahreszahl war damit die leiseste Zeile der
   Station, obwohl sie in einer Zeitleiste die Ordnungsgroesse ist.
   Jetzt --fs-400 (18 px), Gewicht 700 und Markenblau statt --text-muted.
   NICHT --fs-500 wie der Titel: gemessen ist "1993 - 1999" bei 18 px 109 px
   breit und passt damit in die 8rem-Spalte (128 px, also 19 px Reserve). Bei
   --fs-500, also 28 px, waeren es rund 170 px - Ueberlauf oder eine breitere
   Spalte, die dem Text Platz nimmt.
   letter-spacing zurueck auf 0: der Versalabstand gehoert zu Kapitaelchen,
   nicht zu Zahlen. Bei 15 px half er der Lesbarkeit, bei 18 px zerrt er die
   Zahl nur auseinander.
   tabular-nums bleibt - die Jahre stehen untereinander und sollen auf
   derselben Ziffernbreite laufen. */
.histation__jahr {
  margin: 0;
  font-size: var(--fs-400);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--toem-blau);
}
/* GLEICHE BREITE WIE DER TEXT. Ohne die Begrenzung lief die Ueberschrift bis
   1324 px, waehrend der Text bei 576 px endet - gemessen, und es sah nach
   Versehen aus. Jetzt schliessen beide rechts auf derselben Kante ab. */
.histation__titel {
  max-width: 36rem;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.histation__text {
  max-width: 36rem;
  margin: 0;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Sprungmarken: ENTFALLEN ------------------------------------------- */
/* Im Hero standen drei Ankerlinks zu den Epochen. Am 28.08.2026 auf Wunsch von
   Thorsten entfernt - der Hero soll das Motiv und den Satz tragen, nicht eine
   Bedienzeile. Wird die Zeile doch gebraucht, steht dasselbe Muster als
   .fkopf__themen in css/pages/faq.css: Textlinks mit Pfeil, keine Pillen.
   Die id an jeder Epoche bleibt: sie ist von aussen verlinkbar. */

/* --- Wo wir heute stehen ------------------------------------------------ */
/* Der Zeitstrahl endete 2022 und danach kam nichts - vier Jahre vor heute,
   ohne Abschluss. Dieser Block ist keine Station, sondern der Stand: was aus
   den dreizehn Stationen geworden ist. Wortlaut vom Fuss der Liveseite.
   DASS ZWISCHEN 2016 UND 2022 SECHS JAHRE FEHLEN und nach 2022 gar nichts
   kommt, ist eine Luecke im Material, keine Gestaltungsfrage. */
/* MOTIV IM ABBINDER, wie in .pschael auf der Produktseite - Kundenwunsch vom
   28.08.2026. DICHTER ALS DORT: auf der Produktseite laeuft der Verlauf von
   0.93 links auf 0.58 rechts, weil der Text nur links steht und rechts das
   Motiv durchkommen darf. Hier fuellt der Text beide Spalten, also muss die
   Deckung ueber die ganze Breite tragen: 0.95 auf 0.88. Gemessen wird das am
   gerenderten Pixel, nicht an der Rechnung - weisse Schrift auf einem Motiv
   ist genau die Stelle, an der Annahmen scheitern.

   DAS MOTIV IST EIN PLATZHALTER: die Abfuellanlage liegt mit 600 x 450 px vor
   und ist auf 1440 hochgerechnet. Unter dieser Deckung fallen die
   Hochrechnungsartefakte nicht auf - deshalb ist ein Platzhalter hier weniger
   heikel als im Hero. */
.hiheute {
  position: relative;
  overflow: hidden;
  background: var(--toem-blau);
  color: var(--on-blau-2);
  padding-block: var(--sp-sektion);
}
.hiheute__media { position: absolute; inset: 0; }
.hiheute__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hiheute__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg,
      rgba(12, 36, 62, 0.95) 0%,
      rgba(12, 36, 62, 0.93) 45%,
      rgba(12, 36, 62, 0.88) 100%);
}
.hiheute__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
}
/* EINSPALTIG AB HIER. Der Umbruch fehlte: die zwei Spalten standen bis 414 px
   nebeneinander, die Titelspalte war dort gemessen nur 148 px breit. Solange
   der Titel "Wo wir heute stehen" hiess und keine Schreibschrift trug, fiel es
   nicht auf - mit der Schwungzeile brach sie ab 896 px um.
   Derselbe fehlende Umbruch wie bei .stdbewerb__grid, gefunden am 29.08.2026.
   Umbruchpunkt wie ueberall sonst in diesem Projekt: 56rem. */
@media (max-width: 56rem) {
  .hiheute__grid { grid-template-columns: minmax(0, 1fr); }
}
.hiheute__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sektion);
  /* Eine Stufe unter dem Seitentitel, wie alle Sektionstitel seit dem
     31.08.2026. Diese Regel ueberschreibt das Bauteil und musste deshalb
     einzeln nachgezogen werden - sonst waere dieser eine Titel bei 48 px
     stehen geblieben, waehrend alle anderen auf 38 gehen. */
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-on-dark);
}
.hiheute__text {
  max-width: 34rem;
  margin: 0;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
}
.hiheute__zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
/* KACHELN EINER ZEILE AUF GEMEINSAME ZEILEN, 15.09.2026.
   GEMESSEN: in zwei Nachbarkacheln ist ein Textblock unterschiedlich hoch -
   ein zweizeiliger Vorspann gegen einen einzeiligen -, und alles darunter
   rutscht mit. Bei den Kennzahlen der Historie waren es 12 px: "100.000 t"
   bricht auf schmalen Spalten, "über 90" nicht, und die Beschriftung darunter
   stand dann auf zwei verschiedenen Hoehen.
   SUBGRID STATT MINDESTHOEHEN. Eine Mindesthoehe muesste raten, wie viele
   Zeilen der laengste Text auf der schmalsten Spalte braucht, und waere beim
   naechsten Kundentext wieder falsch. Mit subgrid teilen sich alle Kacheln
   einer Zeile dieselben Zeilen, egal was drinsteht.
   Wo subgrid fehlt, bleibt es beim heutigen Verhalten - schlechter wird es
   nicht. Dieselbe Ueberlegung wie bei der Labelspalte der Filterleiste. */
@supports (grid-template-rows: subgrid) {
  .hiheute__zahlen { grid-template-rows: repeat(2, auto); }
  .hiheute__zahlen > .hiheute__zahl { grid-row: span 2; grid-template-rows: subgrid; }
}

.hiheute__zahl { display: grid; gap: var(--sp-1); }
.hiheute__zahl b {
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark);
}
.hiheute__zahl span { font-size: var(--fs-200); }

/* --- Wege in den Zweig -------------------------------------------------- */
/* Der Abbinder ist seit Runde 61 derselbe wie auf den drei Geschwisterseiten
   des Zweigs: .unwege/.unweg aus pages/unternehmen.css. Die frueheren Regeln
   .hiweiter, .hiweiter__title und .hiweiter__grid sind damit entfallen,
   ebenso der Eintrag .hiweiter__title in components/sektionstitel.css. */

/* EINSPALTIG AB HIER. GEMESSEN: zweispaltig lief der Inhalt bei 414 px
   Fensterbreite auf 537 px hinaus, bei 360 px auf 537 - die Seite liess sich
   waagerecht schieben. Ab 560 px passt das Raster; 38rem (608 px) laesst
   Reserve. Derselbe Fehler wie zuvor bei .stdbewerb__grid und .hiheute__grid:
   ein zweispaltiges Raster ohne Umbruchpunkt. */
@media (max-width: 38rem) {
  .hiepoche__grid { grid-template-columns: minmax(0, 1fr); }
}