/* Seite „Unser Weg“ (/historie/): Einleitung von Ino Holling und Zeitstrahl 1996–2026 in der Gestaltung der Startseite
   (Bausteine in style.css). Klassen mit Präfix hist-, nach style.css einbinden. */

/* Seitenkopf (Andrea Tissen, 2026-10-22: „füge das freigestellte Gruppenfoto hier ein“): das freigestellte Team von oben
   (wie auf der Startseite) vor einer organischen Verlaufsfläche, dazu ein Kärtchen „30 Jahre“.
   Das Foto hat transparente Ränder: 117,5 % breit und um 8,46 % nach links versetzt füllt das Team die Fläche (wie
   .hero-media__team auf der Startseite). Beim Laden steigt das Team einmal auf, nicht bei „Bewegung reduzieren“. */
.hist-held { position: relative; width: min(100%, 540px); margin-inline: auto; aspect-ratio: 1 / .92; }
.hist-held__flaeche {
  position: absolute; inset: 6% 8% 8% 10%;
  border-radius: 46% 54% 52% 48% / 44% 42% 58% 56%;
  background: var(--gradient-diag); box-shadow: 0 40px 80px -40px rgba(0, 73, 148, .6);
}
.hist-held__team {
  position: absolute; left: -8.46%; bottom: 4%; z-index: 1;
  width: 117.5%; max-width: none;
  filter: drop-shadow(0 16px 20px rgba(0, 38, 80, .26));
}
.hist-held__chip {
  position: absolute; z-index: 2; top: 3%; left: 0;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1rem .6rem .6rem; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: var(--shadow-l);
  color: var(--muted); font-size: .8125rem; line-height: 1.3; white-space: nowrap; rotate: -3deg;
}
.hist-held__chip strong { display: block; color: var(--ink); font-size: 1rem; }
.hist-held__chip-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--gradient); color: var(--white); }
.hist-held__chip-icon .icon { width: 17px; height: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .hist-held__team { animation: hist-team-rein .9s var(--ease) .15s both; }
  .hist-held__flaeche { animation: hist-flaeche-rein 1.1s var(--ease) both; }
  .hist-held__chip { animation: hist-chip-rein .6s var(--ease) .8s both; }
}
@keyframes hist-team-rein { from { opacity: 0; translate: 0 12%; } }
@keyframes hist-flaeche-rein { from { opacity: 0; scale: .85; } }
@keyframes hist-chip-rein { from { opacity: 0; scale: .6; } }

/* Einleitung „Wie alles begann …“: Text links, Porträt rechts (am Rechner mitlaufend, seit 2026-10-22 kleiner, Andrea Tissen:
   „stelle das Bild kleiner dar“); auf Handy und Tablet steht das Porträt rund mit Name und Rolle unter dem Text wie eine
   Unterschrift (wie .person) */
.hist-anfang { align-items: start; }
.hist-anfang .split__text { max-width: 40rem; }
.hist-portraet figcaption { margin-top: 1rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.hist-portraet figcaption strong { display: block; color: var(--ink); font-size: 1rem; }
@media (min-width: 1024px) {
  .hist-anfang { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .hist-portraet { position: sticky; top: calc(var(--header-h) + var(--header-gap) + 2rem); width: 100%; max-width: 280px; justify-self: end; }
}
@media (max-width: 1023.98px) {
  .hist-anfang { gap: 2rem; }
  .hist-portraet { display: flex; align-items: center; gap: 1rem; }
  .hist-portraet .foto { width: 84px; height: 84px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 25%; box-shadow: 0 0 0 4px var(--white), var(--shadow-s); }
  .hist-portraet figcaption { margin: 0; }
}

/* Zeitstrahl: Verlaufslinie, Icon-Kacheln im Verlauf, Jahreszahlen mit Verlauf wie die Kennzahlen der Startseite, Stationen als
   weiße Kacheln (.karte), die Station 2026 im Verlauf. Handy und Tablet: Linie links, Jahr und Kachel daneben; ab 1024 px Linie
   in der Mitte, Kacheln abwechselnd links und rechts, Icon und Jahr laufen neben langen Kacheln mit (sticky, ohne Animation). */
.hist-zeitstrahl { --icon: 44px; position: relative; display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.hist-zeitstrahl::before {
  content: ""; position: absolute; top: calc(var(--icon) / 2); bottom: 0; left: calc(var(--icon) / 2 - 2px); width: 4px;
  border-radius: 99px; background: linear-gradient(180deg, var(--primary), var(--accent) 80%, rgba(0, 158, 227, 0));
}
.hist-station { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: clamp(.875rem, 3vw, 1.5rem); align-items: center; }
.hist-station__icon {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1;
  display: grid; place-items: center; width: var(--icon); height: var(--icon);
  border-radius: 12px; background: var(--gradient-diag); color: var(--white);
  /* Ring in der Farbe des Abschnitts trennt die Kachel von der Linie */
  box-shadow: 0 0 0 6px var(--tile-2), 0 10px 20px -10px rgba(0, 73, 148, .7);
}
.hist-station__icon .icon { width: 45%; height: 45%; }
.hist-station__jahr {
  grid-column: 2; grid-row: 1; justify-self: start;
  color: var(--primary); font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .hist-station__jahr { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.hist-station__karte { grid-column: 2; grid-row: 2; margin-top: 1rem; }
@media (min-width: 1024px) {
  .hist-zeitstrahl { --icon: 56px; }
  .hist-zeitstrahl::before { left: calc(50% - 2px); }
  .hist-station { grid-template-columns: minmax(0, 1fr) var(--icon) minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
  .hist-station__icon, .hist-station__jahr { position: sticky; top: calc(var(--header-h) + var(--header-gap) + 1.5rem); }
  .hist-station__icon { z-index: 1; grid-column: 2; border-radius: 14px; }
  .hist-station__jahr { grid-column: 3; line-height: var(--icon); }
  .hist-station__karte { grid-column: 1; grid-row: 1; margin-top: 0; }
  .hist-station:nth-child(even) .hist-station__jahr { grid-column: 1; justify-self: end; }
  .hist-station:nth-child(even) .hist-station__karte { grid-column: 3; }
}

/* Inhalt der Kacheln (.karte): weitere Überschriften mit Trennlinie; die Kachel ist Container für .hist-mit-logo */
.hist-station__karte { container-type: inline-size; }
.hist-station__karte > * + h3 { margin-top: .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hist-station__karte > :is(.hist-bilder, .hist-zitat, .hist-meilenstein, .hist-logo, .hist-mit-logo) { margin-top: .4rem; }

/* Station 2026 im Verlauf wie .quote--featured */
.hist-station--heute .hist-station__karte { background: var(--gradient); box-shadow: var(--shadow-l); }
.hist-station--heute .hist-station__karte h3, .hist-station--heute .hist-station__karte a { color: var(--white); }
.hist-station--heute .hist-station__karte p { color: rgba(255, 255, 255, .9); }
.hist-station--heute .hist-station__karte :focus-visible { outline-color: var(--white); }

/* Zitat in der Kachel: hellblaue Fläche mit Verlaufsbalken */
.hist-zitat { position: relative; padding: 1rem 1.25rem 1rem 1.75rem; border-radius: var(--radius-s); background: var(--tile-hell); }
.hist-zitat::before { content: ""; position: absolute; left: .75rem; top: 1rem; bottom: 1rem; width: 4px; border-radius: 99px; background: linear-gradient(180deg, var(--primary), var(--accent)); }
.hist-zitat p { color: var(--ink); font-weight: 600; line-height: 1.55; }
.hist-zitat footer { margin-top: .5rem; color: var(--muted); font-size: .875rem; }

/* Meilenstein ohne eigenen Text (Gründung der GmbH): Icon-Kachel im Verlauf */
.hist-station__karte .hist-meilenstein {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 1rem .75rem .75rem; border-radius: var(--radius-s); background: var(--accent-50);
  color: var(--ink); font-weight: 600; line-height: 1.4;
}
.hist-meilenstein__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--gradient-diag); color: var(--white); }
.hist-meilenstein__icon .icon { width: 16px; height: 16px; }

/* Fotos und Bildschirmfotos in der Kachel */
.hist-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.hist-bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--tile-hell); }
.hist-bilder figcaption { margin-top: .4rem; color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.hist-bilder--1 { grid-template-columns: minmax(0, 1fr); }
.hist-bilder--1 img { aspect-ratio: auto; }
.hist-bilder .hist-bild--breit { grid-column: 1 / -1; }
.hist-bilder .hist-bild--breit img { aspect-ratio: 16 / 9; }
.hist-bilder img.hist-bild--ganz { object-fit: contain; padding: .5rem; }
.hist-bilder img.hist-bild--oben { object-position: 50% 20%; }

/* Logos und Siegel neben dem Text; in schmalen Kacheln (Handy, Rechner bis 1200 px) darunter */
.hist-logo { display: block; align-self: flex-start; border-radius: 4px; }
.hist-mit-logo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; }
@container (max-width: 26rem) { .hist-mit-logo { grid-template-columns: minmax(0, 1fr); } }