/* Sensus Communis | motion.css
   Komponente: Horizont-Animation der Raster und Karten (gesteuert von sc-motion.js).
   Geladen von: annual-en, annual, colloquium-en, colloquium, contact-en, contact, danke, datenschutz-en, datenschutz, en, fellows-en, fellows, founding-member-en, founding-member, impressum-en, impressum, index, papers-en, papers, podcast-en, podcast, thank-you, tradition-en, tradition, zeitgeist-en, zeitgeist
   Reihenfolge je Seite: fonts, tokens, [subpage], Seite, glass-cards, motion, Seite.layers, site */

/* ============================================================
   Sensus Communis — Motion "Horizont"
   ------------------------------------------------------------
   Idee: Jeder Erklaerblock ist ein kleiner Sonnenaufgang, wie der
   Hero. Ueber einem Raster zeichnet sich der Horizontbogen der
   Wortmarke, eine kleine Sonne wandert ihn entlang, und jede Karte
   steigt in dem Moment ueber den Horizont, in dem die Sonne ihre
   Spalte passiert. Danach legt sich der Bogen flach und verlischt.

   Alle Ausgangszustaende haengen an Klassen, die nur sc-motion.js
   setzt (.hz-cell, .hz-kid, .hz-armed). Ohne JavaScript oder bei "reduzierter Bewegung" bleibt die
   Seite unveraendert sichtbar. Nach dem Ablauf entfernt das Skript
   alle Hilfsklassen wieder, Hover und Layout sind dann wie vorher.
   ============================================================ */
:root {
  --hz-out: cubic-bezier(.16, 1, .3, 1);
  --hz-rise: 880ms;
}
/* ---------- Karten steigen ueber den Horizont ---------- */
/* Der Ausschnitt traegt den Eckenradius der Karte (--hz-r, von
   sc-motion.js gesetzt): die Ecken bleiben auch im Aufstieg rund. */
.hz-cell {
  clip-path: inset(100% 0 0 0 round var(--hz-r, 0px));
}
.hz-cell.hz-in {
  clip-path: inset(0 0 0 0 round var(--hz-r, 0px));
  transition: clip-path var(--hz-rise) var(--hz-out);
}
.hz-cell.hz-in.hz-done {
  clip-path: inset(-44px -44px -72px -44px round var(--hz-r, 0px));
  transition: clip-path 720ms ease;
}
/* Mehrspaltig: die Kachel wird nicht angehoben, sondern entfaltet sich
   unter der Sonne (Maske auf dem Raster, gesteuert von sc-motion.js) */
.hz-cell.hz-wipe,
.hz-cell.hz-wipe.hz-in {
  clip-path: none !important;
  transition: none;
}
/* Inhalt folgt leicht versetzt, Zeile fuer Zeile */
.hz-kid {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
/* kurzer Weg, kein langes Auslaufen: der Inhalt steht, sobald die Karte steht */
.hz-in > .hz-kid {
  opacity: 1;
  transform: none;
  transition: opacity 640ms ease calc(112ms + var(--k, 0) * 48ms),
    transform 720ms cubic-bezier(.25, .9, .3, 1) calc(112ms + var(--k, 0) * 48ms);
}
/* Roemische Ziffern setzen sich aus weiter Sperrung zusammen */
.concept-roman.hz-kid {
  letter-spacing: .32em;
}
.hz-in > .concept-roman.hz-kid {
  letter-spacing: 0;
  transition: opacity 720ms ease 96ms,
    transform 920ms var(--hz-out) 96ms,
    letter-spacing 1120ms var(--hz-out) 96ms;
}
/* ---------- Alpha / Omega: das Zeichen geht auf wie die Sonne ---------- */
.hz-armed.part-head .part-symbol {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 38%, 0);
}
.hz-armed.part-head.hz-in .part-symbol {
  clip-path: inset(-20% -20% -20% -20%);
  transform: none;
  transition: clip-path 960ms var(--hz-out), transform 1040ms var(--hz-out);
}
.hz-armed.part-head > div:not(.part-symbol) {
  opacity: 0;
  transform: translate3d(-14px, 0, 0);
}
.hz-armed.part-head.hz-in > div:not(.part-symbol) {
  opacity: 1;
  transform: none;
  transition: opacity 720ms ease 208ms, transform 880ms var(--hz-out) 208ms;
}
.hz-armed.part-intro {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
.hz-armed.part-intro.hz-in {
  opacity: .82;
  transform: none;
  transition: opacity 800ms ease 304ms, transform 960ms var(--hz-out) 304ms;
}
/* ---------- Dunkle Glaskarten: erstes Licht streift das Glas ---------- */
.sc-glass-card > .hz-sheen {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 34%,
    rgba(255,236,214,.16) 47%,
    rgba(255,255,255,.26) 50%,
    rgba(255,236,214,.12) 53%,
    rgba(255,255,255,0) 66%);
  transform: translate3d(-110%, 0, 0);
  opacity: 0;
}
.hz-in > .hz-sheen {
  animation: hzSheen 1360ms var(--hz-out) 416ms 1 both;
}
@keyframes hzSheen{
  0%   { transform: translate3d(-110%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate3d(110%, 0, 0); opacity: 0; }
}
/* ---------- Horizontbogen mit wandernder Sonne ---------- */
.hz-arc {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  overflow: visible;
}
.hz-arc path {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
/* ---------- Hover: die ganze Kachel hellt ruhig auf ----------
   Kein Licht, das dem Zeiger folgt, keine Bewegung. Unter einer gewoelbten
   Oberkante wuerde ein Anheben die Kante anschneiden, deshalb bleibt die
   Kachel an ihrem Platz. */
.fmt-grid .fmt-card {
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.fmt-grid .fmt-card:hover,
.fmt-grid .fmt-card:focus-within {
  transform: none !important;
  background: rgb(var(--c-cream-rgb) / .13) !important;
  border-color: rgb(var(--c-cream-rgb) / .34) !important;
}
@media (prefers-reduced-motion: reduce) {
  .hz-arc,
  .hz-sheen {
    display: none !important;
  }
}
/* ============================================================
   Horizont-Raster wie auf Annual
   ------------------------------------------------------------
   Auf Annual laeuft der Bogen technisch am saubersten: einzelne,
   gerundete Karten mit Abstand, ohne backdrop-filter. Chrome malt
   Elemente mit backdrop-filter bei GPU-Darstellung teils ausserhalb
   von Maske und clip-path des Elternelements; genau das liess Linie
   und Kacheln ueberlappen. Deshalb hier dieselbe Technik, in den
   bisherigen Farben der Startseite.
   ============================================================ */
.pillars,
.concept-grid {
  gap: 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: none !important;
}
.pillars > .pillar,
.concept-grid > .concept-card {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.18) 40%, rgba(255,255,255,.02) 70%),
    rgb(var(--c-paper-rgb) / .70) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.85) !important;
}
.pillars > .pillar:hover,
.pillars > .pillar:focus-within,
.concept-grid > .concept-card:hover,
.concept-grid > .concept-card:focus-within {
  transform: none !important;
  border-color: rgba(255,255,255,.85) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.30) 40%, rgba(255,255,255,.08) 70%),
    rgba(253,251,247,.86) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,1) !important;
}
/* Tradition-Karussell: gleiche Technik. Die Glaskarten verzichten auf
   backdrop-filter und werden dafuer etwas deckender, damit die Zitate
   auch vor dem Mond gut lesbar bleiben. Maske und Bogen liegen auf einer
   ruhenden Huelle (.hz-stage), nicht auf dem Scroll-Container. */
.hz-stage {
  position: relative;
  z-index: 3;
}
.lineage .lineage-rail .thinker {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.30), inset 0 -16px 32px rgba(44,66,170,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 55%),
    linear-gradient(168deg, rgba(40,60,158,.66) 0%, rgba(20,38,110,.62) 52%, rgba(11,24,74,.68) 100%) !important;
}
.lineage .lineage-rail .thinker:hover,
.lineage .lineage-rail .thinker.is-lit {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.48), inset 0 -16px 32px rgba(52,76,190,.24) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 55%),
    linear-gradient(168deg, rgba(52,76,186,.74) 0%, rgba(26,46,128,.70) 52%, rgba(13,28,84,.74) 100%) !important;
}
/* Startseite, weitere Kacheln wie Annual: gebuendelte Glaskarten (.hz-group,
   derzeit ohne Treffer, die Tempelkarten sind ausgenommen) und die Zitatkarten der Riesen. Kein backdrop-filter, kein
   Aussenschatten; das Innenlicht der Glaskarten bleibt. */
.hz-group {
  z-index: 2;
}
.hz-group > .sc-glass-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.46),
    inset 0 -16px 34px rgba(44,66,170,.24),
    inset 0 -1px 1px rgba(163,173,255,.18) !important;
}
.lineage .giants-grid .thinker {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.30), inset 0 -16px 32px rgba(44,66,170,.18) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.04) 26%, rgba(255,255,255,0) 55%),
    linear-gradient(168deg, rgba(40,60,158,.66) 0%, rgba(20,38,110,.62) 52%, rgba(11,24,74,.68) 100%) !important;
}
.lineage .giants-grid .thinker:hover,
.lineage .giants-grid .thinker.is-lit {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.48), inset 0 -16px 32px rgba(52,76,190,.24) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 55%),
    linear-gradient(168deg, rgba(52,76,186,.74) 0%, rgba(26,46,128,.70) 52%, rgba(13,28,84,.74) 100%) !important;
}
.hz-group > .sc-glass-card:hover,
.hz-group > .sc-glass-card:focus-within {
  transform: none !important;
}
/* ============================================================
   Founding Colloquium (Startseite): "Gemeinsames Urteil"
   ------------------------------------------------------------
   1. Das Label setzt sich aus weiter Sperrung zusammen.
   2. Die Leitfrage steigt Wort fuer Wort aus einer Grundlinie;
      die hervorgehobenen Worte ("eines gemeinsamen Urteils")
      kommen zuletzt und ziehen aus der Unschaerfe in den Fokus:
      das Urteil schaerft sich.
   3. Der Text folgt weich.
   4. Die Trennlinie zeichnet sich von beiden Seiten zur Mitte:
      zwei Perspektiven, die sich treffen. Am Treffpunkt leuchtet
      kurz ein Licht auf.
   5. Die beiden Termine fallen aus der Linie heraus, danach der
      Button.
   Alle Ausgangszustaende haengen an .hzc-armed (nur per JS gesetzt).
   ============================================================ */
:root {
  --hzc-out: cubic-bezier(.16,1,.3,1);
}
.colloquium.hzc-armed .colloquium-inner--solo .colloquium-tag {
  opacity: 0 !important;
  letter-spacing: .7em !important;
}
.colloquium.hzc-armed.hzc-1 .colloquium-inner--solo .colloquium-tag {
  opacity: .8 !important;
  letter-spacing: .28em !important;
  transition: opacity 720ms ease, letter-spacing 1200ms var(--hzc-out);
}
/* Wortspans erben die Farbe (alte Regel ".colloquium span" faerbt sonst navy) */
.colloquium h2 .hz-w,
.colloquium h2 .hz-wi {
  color: inherit !important;
}
/* Wortmasken: etwas Luft fuer Akzente, Unterlaengen und kursiven Ueberhang.
   Das Layout der Wortspans bleibt auch NACH der Animation bestehen: faellt es
   beim Aufraeumen weg, bricht der Text neu um und die Woerter springen. */
.colloquium h2 .hz-w {
  display: inline-block;
  vertical-align: top;
  padding: .12em .08em .16em;
  margin: -.12em -.08em -.16em;
}
.colloquium h2 .hz-wi {
  display: inline-block;
}
/* Wackelfrei: keine Wortmaske, keine Drehung, keine Sperrung. Die Sperrung
   der hervorgehobenen Woerter aenderte deren Breite, der Satz brach dabei
   laufend neu um. Jetzt nur Deckkraft, Unschaerfe und ein kurzer Weg nach
   oben, alles auf der GPU, die Zeilen stehen von Anfang an fest. */
.hzc-armed .hz-w {
  overflow: visible;
}
.hzc-armed .hz-wi {
  opacity: 0;
  transform: translate3d(0,.32em,0);
  filter: blur(6px);
}
.hzc-armed .hz-wi.hz-em {
  filter: blur(9px);
}
.hzc-armed.hzc-2 .hz-wi {
  opacity: 1;
  transform: none;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: opacity 720ms ease calc(var(--i,0) * 56ms),
    transform 1040ms var(--hzc-out) calc(var(--i,0) * 56ms),
    filter 960ms var(--hzc-out) calc(var(--i,0) * 56ms + 48ms);
}
.hzc-armed.hzc-2 .hz-wi.hz-em {
  transition: opacity 880ms ease calc(var(--i,0) * 56ms + 96ms),
    transform 1120ms var(--hzc-out) calc(var(--i,0) * 56ms + 96ms),
    filter 1200ms var(--hzc-out) calc(var(--i,0) * 56ms + 128ms);
}
.colloquium.hzc-armed .colloquium-inner--solo .colloquium-panel > p {
  opacity: 0 !important;
  transform: translate3d(0,18px,0);
  filter: blur(4px);
}
.colloquium.hzc-armed.hzc-3 .colloquium-inner--solo .colloquium-panel > p {
  opacity: .84 !important;
  transform: none;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: opacity 880ms ease, transform 1040ms var(--hzc-out), filter 1040ms var(--hzc-out);
}
/* Trennlinie: ein flacher Bogen, zwei Haelften laufen von aussen zum Scheitel */
.colloquium.hzc-armed .colloquium-inner--solo .colloquium-stats {
  position: relative;
  background-image: none !important;
}
.hzc-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
}
.hzc-line svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.hzc-line path {
  fill: none;
  stroke: var(--c-navy);
  stroke-opacity: .22;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.hzc-4 .hzc-line path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 920ms cubic-bezier(.65,0,.35,1);
}
.hzc-line b {
  position: absolute;
  left: 50%;
  top: 0;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  background: radial-gradient(circle,
    #FFFDF4 0 4px,
    rgba(255,236,170,.98) 6px,
    rgba(255,204,110,.80) 16px,
    rgba(255,170,70,.45) 34px,
    rgba(255,150,50,.18) 58px,
    rgba(255,140,40,0) 85px);
  mix-blend-mode: screen;
  transform: scale(0);
  opacity: 0;
}
.hzc-5 .hzc-line b {
  animation: hzcMeet 1280ms var(--hzc-out) both;
}
@keyframes hzcMeet{
  0%  { transform:scale(.1); opacity:0; }
  18% { transform:scale(1);  opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}
/* Termine fallen aus der Linie */
.hzc-armed .colloquium-stats > div {
  overflow: hidden;
}
.hzc-armed .colloquium-stats > div > * {
  transform: translate3d(0,-110%,0);
  opacity: 0;
}
.hzc-armed.hzc-5 .colloquium-stats > div > * {
  transform: none;
  opacity: 1;
  transition: transform 880ms var(--hzc-out) var(--d,0ms), opacity 560ms ease var(--d,0ms);
}
.hzc-armed .colloquium-cta-wrap {
  opacity: 0;
  transform: translate3d(0,22px,0) scale(.97);
}
.hzc-armed.hzc-6 .colloquium-cta-wrap {
  opacity: 1;
  transform: none;
  transition: opacity 720ms ease, transform 960ms var(--hzc-out);
}
/* ============================================================
   Zitate: "Das Wort ergreifen"
   ------------------------------------------------------------
   Grosse Zitate: « oeffnet, die Zeilen steigen nacheinander aus
   der Grundlinie und ziehen aus der Unschaerfe in den Fokus,
   » schliesst, die Quelle steigt weich aus der Unschaerfe.
   Randzitate: die Koralle-Linie zeichnet sich zuerst von oben
   nach unten, dann folgen Zeilen und Quelle.
   Alle Ausgangszustaende haengen an .hzq-armed (nur per JS).
   ============================================================ */
:root {
  --hzq-out: cubic-bezier(.19,1,.22,1);
}
.hzq-armed .hzq-w,
.hzq-armed .hzq-wi {
  color: inherit !important;
}
.hzq-armed .hzq-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .1em .07em .2em;
  margin: -.1em -.07em -.2em;
}
.hzq-armed .hzq-wi {
  display: inline-block;
  transform: translate3d(0,108%,0);
  opacity: 0;
  filter: blur(7px);
}
.hzq-armed.hzq-in .hzq-wi {
  transform: none;
  opacity: 1;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: transform 920ms var(--hzq-out) var(--d,0ms),
    opacity 560ms ease var(--d,0ms),
    filter 880ms var(--hzq-out) calc(var(--d,0ms) + 64ms);
}
/* Anfuehrungszeichen « » der grossen Zitate */
.hzq-marks.hzq-armed .pull-quote p::before,
.hzq-marks.hzq-armed.pull-quote p::before,
.hzq-marks.hzq-armed .t-hero-quote::before {
  display: inline-block;
  opacity: 0;
  transform: translate3d(-14px,0,0) scale(.6);
}
.hzq-marks.hzq-armed .pull-quote p::after,
.hzq-marks.hzq-armed.pull-quote p::after,
.hzq-marks.hzq-armed .t-hero-quote::after {
  display: inline-block;
  opacity: 0;
  transform: translate3d(14px,0,0) scale(.6);
}
.hzq-marks.hzq-armed.hzq-in.pull-quote p::before,
.hzq-marks.hzq-armed.hzq-in .t-hero-quote::before {
  opacity: 1;
  transform: none;
  transition: opacity 560ms ease 48ms, transform 800ms var(--hzq-out) 48ms;
}
.hzq-marks.hzq-armed.hzq-in.pull-quote p::after,
.hzq-marks.hzq-armed.hzq-in .t-hero-quote::after {
  opacity: 1;
  transform: none;
  transition: opacity 560ms ease var(--hzq-close,640ms), transform 800ms var(--hzq-out) var(--hzq-close,640ms);
}
/* Quelle: steigt weich aus der Unschaerfe (ohne Sperrung, damit nichts umbricht) */
.hzq-armed.hzq-armed.hzq-armed.pull-quote cite,
.hzq-armed.hzq-armed.hzq-armed .t-hero-cite,
.hzq-armed.hzq-armed.hzq-armed.kant-quote cite,
.hzq-armed.hzq-armed.hzq-armed.zg-quote cite {
  opacity: 0 !important;
  filter: blur(4px);
  transform: translate3d(0,10px,0);
  transition: none;
}
.hzq-armed.hzq-armed.hzq-in.pull-quote cite,
.hzq-armed.hzq-armed.hzq-in .t-hero-cite,
.hzq-armed.hzq-armed.hzq-in.kant-quote cite,
.hzq-armed.hzq-armed.hzq-in.zg-quote cite {
  opacity: 1 !important;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transform: none;
  transition: opacity 720ms ease var(--hzq-cite,720ms),
    filter 880ms var(--hzq-out) var(--hzq-cite,720ms),
    transform 960ms var(--hzq-out) var(--hzq-cite,720ms);
}
/* Randzitate: Koralle-Linie zeichnet sich */
.hzq-has-rule {
  position: relative;
  border-left-color: transparent !important;
}
.hzq-rule {
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  pointer-events: none;
}
.hzq-in .hzq-rule {
  transform: scaleY(1);
  transition: transform 720ms cubic-bezier(.65,0,.35,1);
}