/* ==========================================================================
   Das Team: eine Person je Ansicht

   Die Folien liegen uebereinander statt nebeneinander und blenden ineinander.
   Zuerst erscheint die Person, drei Zehntelsekunden spaeter der Text mit dem
   Buchstabeneinflug. Gewechselt wird ueber die Namen darunter, nicht ueber
   Pfeilknoepfe.
   ========================================================================== */

.ts-section {
  padding: 72px 0 78px;
  background: transparent;
}

.ts-head {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 24px;
}

.ts-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   Der Wechsel von Person zu Person

   Vorher sprang es hart. Der Grund stand in diesem Stylesheet: die
   Uebergaenge waren nur im Zustand is-aktiv beschrieben. Beim Verlassen
   galt die Regel ohne Uebergang, also sprang das abgehende Bild in
   einem Bild auf unsichtbar, waehrend die Folie darunter noch eine halbe
   Sekunde ausblendete. Das sah nicht nach Ueberblendung aus, sondern nach
   Blinken.

   Jetzt gibt es drei Zustaende statt zwei:
     ohne Klasse   wartet ausserhalb des Bildes
     is-aktiv      steht
     is-geht       verabschiedet sich, bleibt dabei sichtbar

   Die alte Person geht in 260 ms, die neue kommt ab 160 ms. Die kleine
   Ueberlappung macht es weich, ohne dass zwei Namen gleichzeitig lesbar
   uebereinander liegen. Bewegt wird nur transform und opacity, beides
   laeuft auf der Grafikkarte.
   -------------------------------------------------------------------------- */
.ts-slider {
  position: relative;
  /* Woher die neue Person kommt, wohin die alte geht. Beim Rueckwaerts-
     blaettern dreht team-slider.js die Vorzeichen um, damit die Bewegung
     der Richtung folgt, in die man geblaettert hat. */
  --ts-ein: 46px;
  --ts-aus: -32px;
  /* Eine Kurve fuer die ganze Seite (Etappe 3). Vorher stand hier
     cubic-bezier(0.22,0.68,0.24,1), also fast, aber nicht genau die
     Kurve des Stilblatts. Zwei Kurven, die sich um vier Hundertstel
     unterscheiden, sind kein Gestaltungsmittel, sondern ein Versehen.
     Jetzt dieselbe wie --ease und --takt-kurve. */
  --ts-kurve: cubic-bezier(0.22, 1, 0.36, 1);
  /* Wie weit die Ebene HINTER der Person mitwandert. Die Person geht den
     ganzen Weg, der Text 0,55, die Flaeche dahinter 0,22 - drei
     Geschwindigkeiten ergeben die Tiefe. */
  --ts-tiefe: 0.22;

  /* Der wichtigste Riegel dieser Datei. Die wartenden Folien stehen mit
     Versatz bereit, und visibility:hidden nimmt ein Element NICHT aus dem
     Layout: es schiebt die Seite trotzdem waagerecht auf. Gemessen am
     03.09.2026 bei 375 Punkten Fensterbreite, 384 statt 375. clip
     schneidet, ohne einen Rollbereich anzulegen, hidden ist der
     Rueckfall. Der Rand laesst den Schlagschatten stehen. */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 44px;
}

.ts-slider.ts-rueckwaerts {
  --ts-ein: -46px;
  --ts-aus: 32px;
}

/* Zweite Fassung zum Vergleich: die Personen schieben sich seitlich durch,
   wie eine Bilderreihe. Wird ueber die Klasse ts-schieben am Slider
   eingeschaltet. */
.ts-slider.ts-schieben {
  --ts-ein: 62%;
  --ts-aus: -46%;
  /* Gemessen am 03.09.2026: ohne diesen Riegel schob die kommende Person
     die Seite waagerecht auf, in allen elf aufgenommenen Bildern des
     Uebergangs. clip schneidet, ohne einen Rollbereich zu erzeugen,
     hidden ist der Rueckfall fuer aeltere Browser. Der Rand von 40
     Punkten laesst den Schlagschatten stehen. */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 40px;
}

/* --------------------------------------------------------------------------
   Folien liegen im selben Rasterfeld uebereinander. Die hoechste bestimmt
   die Hoehe, es braucht keine gerechnete Hoehe aus dem Skript.
   -------------------------------------------------------------------------- */
.ts-viewport {
  display: grid;
}

.ts-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}

.ts-slide.is-aktiv {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* kommt erst, wenn die vorige fast weg ist */
  transition: opacity 0.40s ease 0.16s, visibility 0s;
}

/* Die abgehende Folie. Ohne sie waere die alte Person sofort weg, weil
   visibility ohne Verzoegerung auf hidden springt. */
.ts-slide.is-geht {
  visibility: visible;
  transition: opacity 0.26s ease, visibility 0s linear 0.26s;
}

.ts-inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1fr;   /* Person links, Text rechts */
  gap: 18px;
  align-items: end;
  min-height: 560px;
}

/* --------------------------------------------------------------------------
   Tiefenstaffelung (Etappe 3, Stelle 3)

   Wie ein Magazinaufschlag: die freigestellte Person steht VORN, Name
   und Zitat liegen auf einer eigenen, leicht zurueckgesetzten Flaeche
   DAHINTER. Die Flaeche laeuft links unter das Bild, dadurch tritt die
   Person sichtbar aus ihr heraus, statt neben ihr zu stehen.

   Gebaut mit einem ::before, nicht mit einem zusaetzlichen Element: die
   Sperrliste bleibt unberuehrt, es kommt keine Klasse und kein Knoten
   in die index.html.
   -------------------------------------------------------------------------- */
.ts-foto { position: relative; z-index: 2; }
.ts-text { position: relative; z-index: 1; }

.ts-text::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -32px -36px -32px -72px;    /* laeuft nach links unter die Person */
  border-radius: 18px;
  border: 1px solid var(--line, rgba(26, 31, 27, 0.07));
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.74) 0%,
              rgba(248, 245, 238, 0.44) 100%);
  box-shadow: 0 24px 60px rgba(40, 30, 18, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.60);
  opacity: 0;
  transform: translate3d(calc(var(--ts-ein) * var(--ts-tiefe)), 8px, 0) scale(0.994);
  transition: opacity 0.42s ease, transform 0.58s var(--ts-kurve);
}

.ts-slide.is-aktiv .ts-text::before {
  opacity: 1;
  transform: none;
  transition: opacity 0.50s ease 0.30s, transform 0.62s var(--ts-kurve) 0.30s;
}

.ts-slide.is-geht .ts-text::before {
  opacity: 0;
  transform: translate3d(calc(var(--ts-aus) * var(--ts-tiefe)), 0, 0);
  transition: opacity 0.20s ease, transform 0.30s ease;
}

/* Spiegelbildlich, wenn die Person rechts steht. */
.ts-slide.ts-bild-rechts .ts-text::before { inset: -32px -72px -32px -36px; }

/* Die Ueberlappung selbst. Nur auf breiten Schirmen, und nur so weit,
   dass der Schlagschatten des Bildes auf der Flaeche liegt. */
@media (min-width: 1040px) {
  .ts-inner { grid-template-columns: 0.95fr 1fr; }
  .ts-foto { margin-right: -44px; }
  .ts-slide.ts-bild-rechts .ts-foto { margin-right: 0; margin-left: -44px; }
}

/* Person rechts, Text links */
.ts-slide.ts-bild-rechts .ts-inner { grid-template-columns: 1fr 0.95fr; }

/* --------------------------------------------------------------------------
   Person
   -------------------------------------------------------------------------- */
.ts-foto {
  display: flex;
  justify-content: center;
  /* center, nicht end. Mit end hing das Bild an der Unterkante der Zeile,
     waehrend der Text daneben mittig stand. Solange das Bild 560 Punkte
     hoch war, fiel das nicht auf, weil es die Zeile ohnehin fuellte. Bei
     390 rutschte die Person sichtbar nach unten und fluchtete mit nichts.
     Auf derselben Achse ragt das Bild oben und unten gleich weit ueber
     den Text hinaus. */
  align-self: center;
}

.ts-foto picture {
  display: block;
  text-align: center;
}

/* Begrenzt wird die Hoehe, nicht die Breite: die drei Aufnahmen sind gleich
   hoch, aber verschieden breit. Ueber die Breite begrenzt stuenden sie
   unterschiedlich gross nebeneinander. */
.ts-foto img {
  width: auto;
  max-width: 100%;
  height: auto;
  /* 390. Der Weg dahin, damit ihn niemand zurueckdreht: 560 war der
     Ausgangswert, 480 der erste Versuch, und der war Dirk immer noch zu
     gross. Seine Vorgabe: das Bild soll nicht viel groesser sein als die
     Schrift daneben, gleich gross oder nur leicht groesser.

     Gemessen am 04.09.2026 bei 1920, 1440 und 1280 Punkten ist der
     Textblock je nach Laenge des Zitats 328, 375 oder 424 Punkte hoch,
     im Mittel 376. Bei 480 stand das Bild also beim 1,13- bis 1,45-fachen.
     Mit 390 liegt es im Mittel beim 1,04-fachen.

     Begrenzt wird weiter die HOEHE, nicht die Breite: die drei Aufnahmen
     und die vier Platzhalter haben verschiedene Seitenverhaeltnisse und
     stuenden ueber die Breite begrenzt unterschiedlich hoch nebeneinander. */
  /* Feste Hoehe, nicht nur eine Obergrenze. Mit max-height blieb ein Bild
     mit anderem Seitenverhaeltnis niedriger als die uebrigen: gemessen 384
     bei den Platzhaltern gegen 390 beim Foto. Jetzt sind alle sieben exakt
     gleich hoch, die drei Aufnahmen wie die vier Platzhalter. Die Breite
     bleibt frei, sonst waeren sie unterschiedlich hoch. */
  height: 390px;
  max-height: 390px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 30px 34px rgba(40, 30, 18, 0.32))
          drop-shadow(0 5px 10px rgba(40, 30, 18, 0.16));
  /* Person kommt zuerst. Der Uebergang steht hier in der Grundregel und
     nicht erst bei is-aktiv, sonst wirkt er nur in eine Richtung. */
  opacity: 0;
  transform: translate3d(var(--ts-ein), 14px, 0) scale(0.985);
  transition: opacity 0.46s ease, transform 0.62s var(--ts-kurve);
}

.ts-slide.is-aktiv .ts-foto img {
  opacity: 1;
  transform: none;
  transition: opacity 0.46s ease 0.16s,
              transform 0.68s var(--ts-kurve) 0.16s;
}

.ts-slide.is-geht .ts-foto img {
  opacity: 0;
  transform: translate3d(var(--ts-aus), 0, 0) scale(0.992);
  transition: opacity 0.26s ease, transform 0.34s ease;
}

/* --------------------------------------------------------------------------
   Text, folgt der Person mit drei Zehntelsekunden Abstand
   -------------------------------------------------------------------------- */
.ts-text {
  align-self: center;
  /* Kein padding-bottom mehr. Bei mittiger Ausrichtung schob es den Text
     um die halbe Polsterung nach oben, also genau die Verschiebung, die
     hier vermieden werden soll. */
  opacity: 0;
  /* Der Text folgt der Person, geht aber nur den halben Weg. Wanderten
     beide gleich weit, wirkte die Karte wie eine verschobene Flaeche
     statt wie zwei Ebenen. */
  transform: translate3d(calc(var(--ts-ein) * 0.55), 12px, 0);
  transition: opacity 0.42s ease, transform 0.50s var(--ts-kurve);
}

.ts-slide.is-aktiv .ts-text {
  opacity: 1;
  transform: none;
  transition: opacity 0.50s ease 0.30s, transform 0.56s var(--ts-kurve) 0.30s;
}

.ts-slide.is-geht .ts-text {
  opacity: 0;
  transform: translate3d(calc(var(--ts-aus) * 0.55), 0, 0);
  transition: opacity 0.20s ease, transform 0.30s ease;
}

.ts-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #A88948);
  margin-bottom: 16px;
}

.ts-zitat {
  position: relative;
  margin: 0 0 24px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(24px, 2.7vw, 35px);
  line-height: 1.34;
  font-weight: 300;
  letter-spacing: -0.012em;
  color: var(--ink, #1A1F1B);
}

.ts-zitat::before {
  content: "\201C";
  position: absolute;
  left: -18px;
  top: -42px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 74px;
  color: var(--gold, #A88948);
  opacity: 0.28;
  pointer-events: none;
}

.ts-name {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #1A1F1B);
}

.ts-rolle {
  margin: 5px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--text, #2C332E);
  opacity: 0.75;
}

.ts-bio {
  margin: 16px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text, #2C332E);
  max-width: 48ch;
}

/* Kennzeichnung, solange die Zitate Beispiele sind */
.ts-hinweis {
  display: inline-block;
  margin-top: 16px;
  padding: 4px 13px;
  border: 1px dashed var(--line-strong, rgba(26, 31, 27, 0.14));
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text, #2C332E);
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Buchstaben fliegen ein, siehe /assets/zitat-effekt.js
   -------------------------------------------------------------------------- */
.zt-buchstabe {
  display: inline-block;
  will-change: transform, opacity;
}

/* Huelle je Wort: verhindert einen Zeilenwechsel mitten im Wort */
.zt-wort {
  display: inline-block;
  white-space: nowrap;
}

.zt-luecke {
  width: 0.3em;
  white-space: pre;
}

/* --------------------------------------------------------------------------
   Wechsel ueber die Namen statt ueber Pfeile
   -------------------------------------------------------------------------- */
.ts-namen {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 26px;
  border-top: 1px solid var(--line, rgba(26, 31, 27, 0.09));
  padding-top: 4px;
  /* Mit sieben Namen brach die Leiste auf voller Breite 6 + 1 um, und
     "Alexandra Glorius" stand allein in der zweiten Zeile. Die Begrenzung
     erzwingt 4 + 3. Die Knoepfe bleiben unangetastet: sie halten seit
     Commit 3bb8b25 ihre 44 Punkte Trefferflaeche, daran wird nicht
     gedreht, um eine Zeile zu sparen. */
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.ts-name-knopf {
  position: relative;
  border: none;
  background: transparent;
  cursor: pointer;
  /* Gemessen am 03.09.2026: bis 768 Punkte waren die Knoepfe nur 40 Punkte
     hoch, die Regel verlangt 44. Auf breiten Schirmen sind es 47, deshalb
     faellt es dort nicht auf. min-height statt mehr Innenabstand, damit
     die Optik auf dem Desktop unveraendert bleibt. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text, #2C332E);
  opacity: 0.55;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.ts-name-knopf:hover { opacity: 0.9; }

.ts-name-knopf.is-aktiv {
  opacity: 1;
  color: var(--forest, #2A4A38);
  font-weight: 600;
}

.ts-name-knopf:focus-visible {
  outline: 3px solid var(--forest, #2A4A38);
  outline-offset: -3px;
  border-radius: 8px;
}

/* Der laufende Strich zeigt zugleich, wie lange die Person noch steht */
.ts-name-knopf::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--gold, #A88948);
  border-radius: 2px;
}

.ts-name-knopf.is-aktiv::after { width: var(--lauf, 0%); }

/* Vorlesegeraete bekommen den Wechsel angesagt */
.ts-ansage {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Bis 1039 Pixel
   -------------------------------------------------------------------------- */
@media (max-width: 1039px) {
  .ts-inner { min-height: 470px; gap: 12px; }
  .ts-foto img { max-height: 440px; }
  .ts-text { padding-bottom: 18px; }
}

/* --------------------------------------------------------------------------
   Bis 768 Pixel: Person oben, Text darunter
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Auf dem Handy steht alles untereinander und mittig. Ein grosser
     Seitenversatz wirkt dort unruhig, deshalb halber Weg. */
  .ts-slider { --ts-ein: 22px; --ts-aus: -16px; }
  .ts-slider.ts-schieben { --ts-ein: 52%; --ts-aus: -38%; }
  .ts-section { padding: 52px 0 58px; }
  .ts-wrap { padding: 0 18px; }
  .ts-inner,
  .ts-slide.ts-bild-rechts .ts-inner {
    grid-template-columns: 1fr;
    gap: 6px;
    text-align: center;
    min-height: 0;
  }
  .ts-foto { order: 1; }
  .ts-text { order: 2; padding-bottom: 0; }
  /* Untereinander gibt es kein Vorn und Hinten mehr: die Flaeche legt
     sich gleichmaessig hinter den Text, ohne Ueberlappung. */
  .ts-foto { margin-right: 0; margin-left: 0; }
  .ts-text::before,
  .ts-slide.ts-bild-rechts .ts-text::before { inset: -20px -14px; border-radius: 14px; }
  .ts-foto img { max-height: 330px; }
  .ts-zitat { font-size: 21px; }
  .ts-zitat::before {
    position: static;
    display: block;
    font-size: 48px;
    line-height: 0.5;
    margin-bottom: 12px;
  }
  .ts-bio { margin-left: auto; margin-right: auto; }
  .ts-name-knopf { padding: 13px 14px 11px; font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Wer weniger Bewegung will, sieht alles sofort
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ts-slide,
  .ts-slide.is-aktiv,
  .ts-slide.is-geht,
  .ts-slide .ts-foto img,
  .ts-slide .ts-text,
  .ts-slide .ts-text::before,
  .ts-slide.is-aktiv .ts-foto img,
  .ts-slide.is-aktiv .ts-text,
  .ts-slide.is-geht .ts-foto img,
  .ts-slide.is-geht .ts-text { transition: none !important; }
  /* kein Verschieben, nur da oder nicht da */
  .ts-foto img,
  .ts-text { opacity: 1; transform: none !important; }
  .ts-text::before { opacity: 1; transform: none !important; }
  .ts-slide.is-geht { visibility: hidden; }
  .zt-buchstabe { transform: none !important; opacity: 1 !important; will-change: auto; }
}

/* Sprungziel der frueheren Praxis-Sektion, siehe Anker in index.html */
.ts-anker {
  display: block;
  height: 0;
  scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   Knopf des Mega-Menues: erscheint, wenn im Menue eine einzelne Person
   gewaehlt wurde. Formatierung wie in megamenu.css fuer .team .focus-reset,
   hier auf die neue Sektion uebertragen. Ohne diese Regeln steht er
   unformatiert oben links in der Sektion.
   -------------------------------------------------------------------------- */
.ts-section .focus-reset {
  display: none;
  width: fit-content;
  margin: 0 auto 22px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--forest, #2A4A38);
  background: transparent;
  color: var(--forest, #2A4A38);
  font: inherit;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  transition: background 280ms ease, color 280ms ease;
}

.ts-section.focus-ragnitz .focus-reset,
.ts-section.focus-oettel .focus-reset,
.ts-section.focus-reuter .focus-reset,
.ts-section.focus-marschall .focus-reset,
.ts-section.focus-wolfgang .focus-reset,
.ts-section.focus-eichhorn .focus-reset,
.ts-section.focus-glorius .focus-reset { display: flex; }

.ts-section .focus-reset:hover {
  background: var(--forest, #2A4A38);
  color: var(--cream, #F8F5EE);
}

.ts-section .focus-reset:focus-visible {
  outline: 3px solid var(--forest, #2A4A38);
  outline-offset: 3px;
}


/* =========================================================================
   lehrpraxis-20260909: Ernennung zur Lehrpraxis
   Friedrich-Schiller-Universitaet Jena, Medizinische Fakultaet, 20.12.2025.

   Zwei Bausteine, bewusst unterschiedlich stark:
     .ts-auszeichnung  einmal oben, fuer die ganze Praxis, mit Zeichen
     .ts-lehramt       je Person, leiser, nur eine Zeile

   Keine fremde Grafik, kein Siegel, kein Scan. Das Zeichen ist ein
   Inline-SVG mit currentColor, es erbt also die Textfarbe und bleibt in
   jedem Zustand lesbar.
   ========================================================================= */

.ts-auszeichnung {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 22px auto 0;
  padding: 9px 18px;
  border: 1px solid rgba(42, 74, 56, 0.22);
  border-radius: 999px;
  background: rgba(42, 74, 56, 0.045);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--forest, #2A4A38);
  text-align: left;
  max-width: 46ch;
}

.ts-auszeichnung .ts-ausz-ic {
  flex: 0 0 auto;
  color: var(--forest, #2A4A38);
}

/* Auf schmalen Schirmen bricht die Zeile, das Zeichen bleibt oben stehen.
   Kein display:none, der Inhalt bleibt vollstaendig erreichbar. */
@media (max-width: 490px) {
  .ts-auszeichnung {
    align-items: flex-start;
    padding: 10px 15px;
    font-size: 13.5px;
    max-width: none;
  }
  .ts-auszeichnung .ts-ausz-ic { margin-top: 2px; }
}

.ts-lehramt {
  margin: 10px 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--forest, #2A4A38);
  max-width: 48ch;
}