.geschichte {
  background: var(--bg);
}

/* Überschrift links, Markenwahl rechts. Kein max-width mehr auf dem
   ganzen Kopf, sonst klebt der Umschalter am Text statt am Rand — die
   Begrenzung sitzt jetzt auf der Überschrift selbst. */
.geschichte__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .geschichte__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .geschichte__head { margin-bottom: 64px; }
}

/* Beide Überschriften liegen in DERSELBEN Rasterzelle übereinander.
   Damit ist die Höhe des Kopfes immer die der längeren — egal, ob eine
   Überschrift bei dieser Fensterbreite zwei Zeilen braucht und die
   andere drei. Ohne das sprang der ganze Abschnitt beim Umschalten.

   Die Länge der Texte aneinander anzugleichen wäre keine Lösung: was
   auf dem Desktop gleich lang umbricht, tut es auf dem Tablet nicht. */
.geschichte__headings {
  display: grid;
  max-width: 720px;
}

/* Auf breiten Schirmen mehr Zeile zulassen: mit 720 px brach «Höffner –
   ein Familienunternehmen» auf drei Zeilen um, obwohl rechts neben dem
   Text noch reichlich Platz frei war. 820 px reichen beiden
   Überschriften für zwei Zeilen und lassen den Logos ihren Rand. */
@media (min-width: 1024px) {
  .geschichte__headings { max-width: 820px; }
}

.geschichte__title {
  grid-area: 1 / 1;
  font-size: clamp(1.875rem, 3.8vw, 2.75rem);
}

/* Die versteckte Überschrift muss im Fluss BLEIBEN, sonst misst das
   Raster nur die sichtbare und der Sprung ist zurück. visibility statt
   display: unsichtbar, nicht anklickbar und aus dem
   Accessibility-Baum — aber sie belegt weiter ihren Platz.
   Achtung: das gilt nur für die Überschriften. Die Zeitstrahlen
   darunter werden weiterhin per display: none entfernt. */
.geschichte__title[hidden] {
  display: block !important;
  visibility: hidden;
}

/* Der Umschalter zwischen den beiden Geschichten: nur die Logos, ohne
   Rahmen, Fläche oder Beschriftung. Die Marke IST die Beschriftung.

   Den Zustand trägt allein die Farbe: die nicht gewählte Marke steht
   grau da, die gewählte in ihren eigenen Farben. Das braucht keine
   Erklärung und funktioniert für beide Logos gleich, obwohl das eine
   eine einfarbige Wortmarke ist und das andere ein roter Block. */
.geschichte__switch {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-shrink: 0;
}

.geschichte__brand {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
}

/* Beim Überfahren schon einen Schritt in Richtung Farbe — so ist vorher
   erkennbar, dass hier etwas zu holen ist. */
.geschichte__brand:hover {
  opacity: 0.8;
  filter: grayscale(0.4);
}

.geschichte__brand.is-active {
  opacity: 1;
  filter: none;
  cursor: default;
}

/* Beide Logos wachsen in denselben Stufen — bewusst EINE Regel für
   beide, sonst laufen die Werte beim nächsten Umbau auseinander.
   Zwei Stufen und nicht eine: bei voller Höhe nimmt der Umschalter auf
   einem 1100-px-Laptop der Überschrift so viel Breite, dass sie wieder
   auf drei Zeilen umbricht. Groß wird er erst, wenn daneben auch
   wirklich Platz ist. */
.geschichte__brand-logo {
  height: 30px;
  width: auto;
  display: block;
}

@media (min-width: 1024px) {
  .geschichte__brand-logo { height: 42px; }
}

@media (min-width: 1280px) {
  .geschichte__brand-logo { height: 70px; }
}

/* Das Translogistik-Logo ist einfarbig dunkel gezeichnet und muss im
   dunklen Theme umgedreht werden (gleiche Regel wie .brand__mark in
   layout.css). Mehrfarbige Fremdlogos dürfen das NICHT — deshalb die
   Ausnahme --full, sonst würde aus dem roten Höffner-Block ein cyaner.
   Der Graufilter des inaktiven Zustands sitzt auf dem Button, dieser
   hier auf dem Bild: beide greifen unabhängig voneinander. */
:root[data-theme='dark'] .geschichte__brand-logo:not(.geschichte__brand-logo--full) {
  filter: brightness(0) invert(1);
}

/* --full markiert ein mehrfarbiges Fremdlogo: gleiche Höhe wie das
   eigene, aber ausgenommen von der Theme-Invertierung oben. Der Radius
   bricht nur die harte Ecke des roten Blocks. */
.geschichte__brand-logo--full {
  border-radius: 3px;
}

@media (max-width: 560px) {
  .geschichte__switch { gap: 20px; }
}

.geschichte__grid {
  --geschichte-gap: 28px;
  display: grid;
  gap: var(--geschichte-gap);
}

/* display: grid schlägt die UA-Regel für [hidden] — ohne das hier stünden
   beide Geschichten gleichzeitig auf der Seite, sobald timeline.js
   umschaltet. Gleiche Falle wie bei .map-zones[hidden] und
   .standort-picker__panel[hidden]. Die Überschrift ist ein <h2> und
   bräuchte es nicht, steht aber daneben, damit die Regel beim nächsten
   Umbau nicht halb vergessen wird. */
.geschichte__grid[hidden] { display: none !important; }

@media (min-width: 1024px) {
  .geschichte__grid {
    --geschichte-gap: 64px;
    grid-template-columns: 0.42fr 0.58fr;
    align-items: start;
  }
}

.timeline__rail {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  padding-inline: 8px 4px;
  scroll-padding-inline: 8px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.timeline__rail::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
  .timeline__rail {
    position: sticky;
    top: calc(var(--header-h) + 52px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: fit-content;
    overflow: visible;
    padding-inline: 0;
    padding-bottom: 0;
  }
}


.timeline__rail-bar {
  position: relative;
  height: 6px;
  margin: calc(8px - var(--geschichte-gap, 28px)) 8px 0;
  border-radius: var(--radius-pill);
  background: var(--border);
  cursor: grab;
  touch-action: none;
}

.timeline__rail-bar.is-dragging { cursor: grabbing; }

.timeline__rail-thumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  min-width: 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transition: background-color var(--dur-fast) var(--ease);
}

.timeline__rail-bar:hover .timeline__rail-thumb { background: var(--accent-hover); }

@media (min-width: 1024px) {
  .timeline__rail-bar { display: none; }
}

.timeline__year {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 2px;
  text-align: left;
  white-space: nowrap;
  flex-shrink: 0;
}

.timeline__year-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--border-strong);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.timeline__year-num {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: 24px;
  color: var(--faint);
  transition: font-size var(--dur) var(--ease), color var(--dur) var(--ease);
}

.timeline__year:hover .timeline__year-num { color: var(--muted); }

.timeline__year[aria-current='true'] .timeline__year-dot {
  background: var(--accent);
  transform: scale(1.8);
}

.timeline__year[aria-current='true'] .timeline__year-num {
  color: var(--ink);
  font-size: 34px;
}

@media (min-width: 1024px) {
  .timeline__year-num { font-size: 32px; }
  .timeline__year[aria-current='true'] .timeline__year-num { font-size: 52px; }
}

.timeline__note {
  display: none;
}

@media (min-width: 1024px) {
  .timeline__note {
    display: block;
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    max-width: 300px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--muted);
  }
}

.timeline__track {
  position: relative;
}

@media (min-width: 1024px) {
  .timeline__track { padding-left: 32px; }

  .timeline__track::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
  }
}

.timeline__item {
  position: relative;
  padding-block: 28px;
  border-bottom: 1px solid var(--border);
  opacity: 0.45;
  transition: opacity var(--dur) var(--ease);
}

@media (max-width: 1023px) {
  .timeline__item:first-child { padding-top: 0; }
  .timeline__item:last-child { padding-bottom: 0; }
}

.timeline__item:last-child { border-bottom: 0; }

.timeline__item.is-active { opacity: 1; }
.timeline__item:hover { opacity: 0.75; }
.timeline__item.is-active:hover { opacity: 1; }

@media (min-width: 1024px) {
  .timeline__item {
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: 48px;
    border-bottom: 0;
  }

  .timeline__item::before {
    content: '';
    position: absolute;
    left: -36px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-50%) scale(0);
    transition: transform var(--dur) var(--ease);
  }

  .timeline__item.is-active::before { transform: translateY(-50%) scale(1); }
}

.timeline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.timeline__stat {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.timeline__item.is-active .timeline__stat {
  background: var(--accent);
  color: var(--accent-ink);
}

.timeline__sub {
  font-size: 15px;
  font-weight: 500;
  color: var(--faint);
}

.timeline__title {
  max-width: 520px;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.timeline__text {
  margin-top: 16px;
  max-width: 520px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
}

.timeline__foot {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.timeline__foot::before {
  content: '';
  width: 32px;
  height: 1px;
  flex-shrink: 0;
  background: var(--accent);
}

/* Ordnet jeden Meilenstein visuell Translogistik zu. Logo ist dunkel
   gezeichnet (siehe layout.css .brand__mark) — im Dark-Theme invertiert,
   damit es auf dunklem Hintergrund lesbar bleibt. */
/* Volle Farbe, kein Dämpfer mehr: der ganze Meilenstein wird ohnehin
   abgedunkelt, solange er nicht der aktive ist (.timeline__item), ein
   zweiter Schleier auf dem Logo machte die Marke darin nur unkenntlich.
   Jeder Meilenstein trägt sein eigenes <img> — steht für ein Jahr eine
   andere Marke der Gruppe an, wird hier einfach deren Datei eingesetzt. */
.timeline__logo {
  height: 20px;
  width: auto;
  margin-left: auto;
  flex-shrink: 0;
}

:root[data-theme='dark'] .timeline__logo:not(.timeline__logo--full) {
  filter: brightness(0) invert(1);
}

/* Mehrfarbiges Fremdlogo (Höffner): weder invertieren noch abdunkeln —
   es steht für sich und muss in beiden Themes gleich aussehen. */
.timeline__logo--full {
  opacity: 1;
  border-radius: 3px;
}

.werte {
  background: var(--bg);
  color: var(--ink);
  --wert-icon-bg: var(--accent);
  --wert-icon-ink: var(--accent-ink);
}

.werte__head {
  max-width: 720px;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .werte__head { margin-bottom: 56px; }
}

.werte__title {
  font-size: clamp(1.875rem, 3.8vw, 2.75rem);
}

.werte__lead {
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (min-width: 1024px) {
  .werte__lead { font-size: 1.0625rem; }
}

.werte__grid {
  display: grid;
  gap: 18px;
}

@media (min-width: 640px) {
  .werte__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

@media (min-width: 1024px) {
  .werte__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
  }
}

.wert {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--dur-fast) var(--ease),
              opacity var(--dur) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.wert:hover {
  transform: translateY(-4px);
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.wert__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--wert-icon-bg);
  color: var(--wert-icon-ink);
}

.wert__icon svg {
  width: 22px;
  height: 22px;
}

.wert__body {
  display: grid;
  gap: 8px;
}

.wert__title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.wert__text {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

@media (min-width: 640px) {
  .wert--wide {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .wert--wide .wert__body { max-width: 620px; }
}