/* Sensus Communis | home.layers.css
   Seitenspezifische Ergaenzungen, geladen nach Glas und Motion.
   Geladen von: en, index
   Reihenfolge je Seite: fonts, tokens, [subpage], Seite, glass-cards, motion, Seite.layers, site */

/* ===== sc-en-tweaks ===== */
/* Nur englische Fassung: der kursive Teil der Hauptzeile bleibt auf breiten
     Bildschirmen zusammen, wie "Urteilsfähigkeit" in der deutschen Fassung. */
@media (min-width:600px) {
  html[lang="en"] .sea-masthead h1 em {
    white-space: nowrap;
  }
}

/* ===== sc-edition-claim ===== */
/* Claim ueber dem Founding-Colloquium-Button. Liegt im selben Container
     (.ocean-hint), erbt also dessen Scroll-Ausblendung: sobald die Sonne
     aufgeht, verschwindet er zusammen mit dem Button. */
.ocean-edition-claim {
  margin: 0 0 6px;
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(19px, 1.65vw, 26px);
  line-height: 1.2;
  letter-spacing: .035em;
  color: #FFFDF8;
  text-shadow: 0 1px 2px rgb(var(--c-navy-deep-rgb) / .55), 0 2px 18px rgb(var(--c-navy-deep-rgb) / .55);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width:380px) {
  .ocean-edition-claim {
    font-size: 17.5px;
    letter-spacing: .02em;
  }
}
/* ===== sc-arch-seam-fix ===== */
/* Der Bogen lag exakt auf top:0. Bei gebrochenen Pixelwerten (etwa 393px Breite
     auf dem iPhone 15) blitzte darunter die orange Hintergrundebene als duenner
     roter Strich durch. Der Bogen ueberlappt jetzt nach oben. */
.arch-transition {
  top: -3px !important;
  height: 115px !important;
}
@media (max-width:720px) {
  .arch-transition {
    height: 81px !important;
  }
}
/* ===== sc-btn-entrance ===== */
/* ===== Hero: "Founding Colloquium" ===================================
     Der Block wippte ueber die Eigenschaft bottom. Das ist Layout, nicht
     Compositing: auf dem Handy rastete er dabei pixelweise und zitterte.
     Jetzt wippt er ueber translate (GPU), und die Glas-Unschaerfe hinter
     dem Button faellt weg, weil sie ueber der animierten Szene in jedem
     Frame neu berechnet werden musste. */
.ocean-hint {
  animation: edBob 6.5s ease-in-out 2.4s infinite !important;
}
@keyframes edBob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }
.ocean-edition-label {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(206,208,242,.16);
}
/* Auftritt beim Laden: Claim steigt aus der Unschaerfe, der Button
     oeffnet sich, ein Lichtstreif laeuft hindurch, kurz funkeln die
     Glitzerpunkte, dann Jahr und Scroll-Hinweis. */
.ocean-edition-claim {
  animation: edUp 1.1s cubic-bezier(.16,1,.3,1) .45s backwards;
}
.ocean-edition-label {
  animation: edPill 1.15s cubic-bezier(.16,1,.3,1) .85s backwards,
      edRing 1.6s ease-out 1.45s backwards;
  background-image: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255,250,236,.55) 50%, transparent 62%, transparent 100%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 130% 0;
}
.ocean-edition-label > span {
  display: inline-block;
  animation: edText .9s cubic-bezier(.16,1,.3,1) 1.15s backwards;
}
.ocean-edition-label::before {
  animation: edSpark 1.8s ease-in-out 1.7s both;
}
.ocean-edition-label::after {
  animation: edSpark 2.1s ease-in-out 1.95s both;
}
.ocean-edition-year {
  animation: edFade .9s ease 1.55s backwards;
}
.ocean-edition-scroll {
  animation: edFade .9s ease 1.8s backwards;
}
/* nur Startwerte: jede Animation laeuft auf den normalen Zustand zu und
     haelt danach nichts fest (Hover, Klick und JS bleiben unberuehrt) */
@keyframes edUp{ from{ opacity:0; transform:translate3d(0,12px,0); filter:blur(6px); } }
@keyframes edPill{
    0%  { opacity:0; transform:scale(.82); filter:blur(5px); background-position:130% 0; }
    55% { opacity:1; filter:blur(0); }
    100%{ transform:none; background-position:-30% 0; }
  }
@keyframes edRing{
    0%  { box-shadow:0 0 0 0 rgba(214,216,255,.55); }
    100%{ box-shadow:0 0 0 14px rgba(214,216,255,0); }
  }
@keyframes edText{ from{ opacity:0; transform:translate3d(0,5px,0); } }
@keyframes edSpark{ 0%,100%{ opacity:0; } 45%{ opacity:1; } }
@keyframes edFade{ from{ opacity:0; } }
/* Hover/Fokus behalten ihr eigenes Funkeln */
.ocean-edition-label:hover::before,
.ocean-edition-label:focus-visible::before {
  animation: ctaSparkle 3s ease-in-out infinite;
}
.ocean-edition-label:hover::after,
.ocean-edition-label:focus-visible::after {
  animation: ctaSparkle 4.2s ease-in-out .9s infinite;
}
/* ===== Masthead: "Founding Member werden" ===========================
     Glas ohne backdrop-filter: dahinter liegt nur ein ruhiger Verlauf,
     die Unschaerfe war unsichtbar, liess den Button auf iOS beim
     Hineinscrollen aber flackern. Etwas dichter, damit der Ton bleibt. */
.founder-btn {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.14) 36%, rgba(255,255,255,0) 60%),
      rgba(212,214,244,.84) !important;
}
.founder-btn:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.18) 36%, rgba(255,255,255,0) 60%),
      rgba(222,224,248,.9) !important;
}
.fb-sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.85) 48%, rgba(255,255,255,.2) 56%, transparent 68%);
  transform: translate3d(-120%,0,0);
  opacity: 0;
}
.masthead-cta {
  position: relative;
}
.masthead-cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(440px,92%);
  height: 110px;
  transform: translate(-50%,-50%) scale(.6);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(225,227,255,.55), rgba(225,227,255,0));
  opacity: 0;
}
/* Ausgangszustand nur, wenn JS den Auftritt uebernimmt (.fb-armed) */
.masthead-cta.fb-armed .founder-btn {
  opacity: 0;
  transform: translate3d(0,22px,0) scale(.9) !important;
  filter: blur(6px);
}
.masthead-cta.fb-armed .founder-btn > span {
  opacity: 0;
  transform: translate3d(0,8px,0);
  display: inline-block;
}
.masthead-cta.fb-armed .founder-btn::before,
.masthead-cta.fb-armed .founder-btn::after {
  opacity: 0 !important;
  animation: none !important;
}
.masthead-cta.fb-armed.fb-in .founder-btn {
  opacity: 1;
  transform: none !important;
  filter: none;   /* Endzustand: none statt blur(0), sonst bleibt ein Extra-Zeichendurchgang */
  transition: opacity .7s ease, transform 1.1s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1) !important;
}
/* Glitzer blendet weich auf den Startwert seiner Schleife (.32) ein */
.masthead-cta.fb-armed.fb-in .founder-btn::before,
.masthead-cta.fb-armed.fb-in .founder-btn::after {
  opacity: .33 !important;
  transition: opacity .8s ease .95s;
}
.masthead-cta.fb-armed.fb-in .founder-btn > span {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease .3s, transform .9s cubic-bezier(.16,1,.3,1) .3s;
}
.masthead-cta.fb-in .fb-sheen {
  animation: fbSheen 1.3s cubic-bezier(.45,0,.2,1) .55s both;
}
.masthead-cta.fb-in::before {
  animation: fbHalo 1.8s ease-out .35s both;
}
@keyframes fbSheen{
    0%  { transform:translate3d(-120%,0,0); opacity:0; }
    15% { opacity:1; }
    100%{ transform:translate3d(120%,0,0); opacity:0; }
  }
@keyframes fbHalo{
    0%  { opacity:0; transform:translate(-50%,-50%) scale(.6); }
    35% { opacity:1; }
    100%{ opacity:0; transform:translate(-50%,-50%) scale(1.25); }
  }
@media (prefers-reduced-motion: reduce) {
  .ocean-hint {
    animation: none !important;
  }
  .ocean-edition-claim,
  .ocean-edition-label,
  .ocean-edition-label > span,
  .ocean-edition-label::before,
  .ocean-edition-label::after,
  .ocean-edition-year,
  .ocean-edition-scroll {
    animation: none !important;
  }
  .ocean-edition-label {
    background-image: none;
  }
  .fb-sheen,
  .masthead-cta::before {
    display: none;
  }
}
/* ===== sc-perf ===== */
/* Leistung: die Szene liegt in getrennten Ebenen. Was sich beim Scrollen
     aendert (Tag-Deckkraft, Sonne, Mond, Funkeln), ist eine eigene GPU-Ebene;
     die grosse Nachtszene mit Filtern und Wolken wird nur einmal gezeichnet. */
.ocean-layer--day,
.ocean-layer--stars,
#twinkleLayer {
  will-change: opacity;
}
.ocean-layer--moon,
.ocean-layer--sun,
#twinkleSeaLayer {
  will-change: transform;
}
.ocean-layer {
  pointer-events: none;
}
/* ===== sc-perf-2 ===== */
/* Funkeln, Glitzer und Sternschnuppe laufen endlos. Ausserhalb des Bildes
     werden sie angehalten (animation:none, "paused" spart bei SVG nichts).
     Beim Wiederkommen starten sie unsichtbar knapp vor dem Bildrand neu. */
.sc-off,
.sc-off *,
.sc-off::before,
.sc-off::after,
.sc-off *::before,
.sc-off *::after {
  animation: none !important;
}
/* Hover: Karten und Buttons bekommen auf Geraeten mit Maus eine eigene
     Ebene, ein Hover zeichnet dann nur das Element neu, nicht die Umgebung. */
@media (hover:hover) and (pointer:fine) {
  .pillar,
  .concept-card,
  .pillar-cta,
  .colloquium-cta,
  .founder-btn,
  .giants-more {
    will-change: transform;
  }
}
.lineage-stars svg {
  will-change: transform;
}
/* ===== sc-flaechenfarbe ===== */
/* Safari faerbt die Flaechen ausserhalb des Inhalts — hinter der unteren
     Leiste und beim Ueberziehen oben und unten — mit dem Hintergrund des
     html-Elements. Ohne Angabe bleibt der weiss. */
/* damit die Systemleisten hell auf dunkel zeichnen */
html {
  background: #10123A;
  color-scheme: dark;
}
/* ===== sc-stats-years ===== */
/* Mobil: Jahreszahl immer in eigener Zeile unter der Jahreszeit,
     damit beide "2027" exakt auf einer Hoehe stehen */
.colloquium-stats .br-m {
  display: none;
}
@media (max-width:720px) {
  .colloquium-stats .br-m {
    display: inline;
  }
  .colloquium .colloquium-inner--solo .colloquium-stats {
    align-items: flex-start;
  }
  .colloquium-stats > div {
    display: flex;
    flex-direction: column;
  }
  .colloquium-stats small {
    min-height: 2.6em;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
  }
}

/* ===== sc-quote-weil ===== */
/* Simone Weil: grosses Zitat innerhalb der Formate, zwischen den
     blauen Kaesten und Annual Logicus. Gleiche Typografie wie die
     Zitatbaender, eigener Abstand, transparenter Grund. */
.quote-band--weil {
  background: transparent !important;
  padding: 16px 0 64px !important;
  margin: 0;
}
.quote-band--weil .pull-quote {
  padding: 0 32px;
}
.quote-band--weil .pull-quote cite {
  color: #E4701F !important;
  opacity: 1 !important;
}
@media (max-width:720px) {
  .quote-band--weil {
    padding: 8px 0 48px !important;
  }
}
/* ===== sc-cc-css ===== */
/* ===== Aufklappbare Format-Module (nur mit JS aktiv: .cc-js) ===== */
.concept-grid.cc-js {
  grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width:1040px) {
  .concept-grid.cc-js {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
.cc-js .concept-card {
  min-height: 0;
  padding: 38px 30px 34px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cc-js .concept-roman {
  font-size: clamp(38px,3.4vw,54px);
  margin-bottom: 18px;
}
.cc-js .concept-card h3 {
  font-size: clamp(24px,2.1vw,31px);
  margin-bottom: 0;
  min-height: 2.1em;
  max-width: none;
  padding-right: 8px;
}
.cc-js .concept-card > .cc-body {
  display: none;
}
.cc-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.cc-hit:focus-visible {
  outline: 2px solid var(--c-rust);
  outline-offset: -6px;
}
.concept-grid--lav .cc-hit:focus-visible {
  outline-color: var(--c-violet);
}
/* Plus, das sich beim Oeffnen zum Kreuz dreht */
.cc-plus {
  --c: #B92C08;
  position: absolute;
  top: 30px;
  right: 26px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.8,.3,1), background .45s ease, border-color .45s ease;
}
.concept-grid--lav .cc-plus {
  --c: #4C4FA6;
}
.cc-plus::before,
.cc-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin: -.75px 0 0 -5.5px;
  background: var(--c);
  border-radius: 1px;
  transition: background .45s ease;
}
.cc-plus::after {
  transform: rotate(90deg);
}
.cc-js .concept-card:hover .cc-plus {
  border-color: var(--c);
}
.cc-js .concept-card.is-open .cc-plus {
  transform: rotate(135deg);
  background: var(--c);
  border-color: var(--c);
}
.cc-js .concept-card.is-open .cc-plus::before,
.cc-js .concept-card.is-open .cc-plus::after {
  background: #FFF8EC;
}
.cc-js .concept-card.is-open {
  background: rgb(var(--c-paper-rgb) / .9) !important;
}
.cc-js .concept-card.is-open::after {
  opacity: 1;
}
/* gemeinsames Panel unter der Reihe */
.cc-panel {
  grid-column: 1 / -1;
  position: relative;
  height: 0;
  overflow: hidden;
  background: rgb(var(--c-paper-rgb) / .78);
  border-radius: 12px;
  transition: height .56s cubic-bezier(.4, 0, .2, 1);
}
.cc-panel[hidden] {
  display: block;
}
.cc-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 1px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cc-c,var(--c-rust)) 55%, transparent) 18%, color-mix(in srgb, var(--cc-c,var(--c-rust)) 55%, transparent) 82%, transparent);
  opacity: 0;
  transition: opacity .5s ease .1s;
}
.cc-panel.is-open::before {
  opacity: 1;
}
.concept-grid--lav .cc-panel {
  --cc-c: #4C4FA6;
}
.cc-sun {
  position: absolute;
  top: 26px;
  left: 0;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  pointer-events: none;
  transform: translate3d(var(--x,0px),0,0) scale(.4);
  opacity: 0;
  transition: transform .8s cubic-bezier(.22,.8,.3,1), opacity .5s ease;
}
.cc-sun.is-on {
  opacity: 1;
  transform: translate3d(var(--x,0px),0,0) scale(1);
}
.cc-sun.no-slide {
  transition: opacity .5s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}
.cc-sun::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0, rgba(255,217,160,.9) 18%, rgba(255,190,120,.35) 42%, rgba(255,190,120,0) 70%);
}
.concept-grid--lav .cc-sun::before {
  background: radial-gradient(circle, #FFFFFF 0, rgba(214,216,255,.95) 18%, rgba(176,182,240,.4) 42%, rgba(176,182,240,0) 70%);
}
.cc-sun::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #FFF8EC;
}
.cc-panel__in {
  padding: 58px 44px 44px;
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(0,1fr);
  gap: 30px 56px;
  align-items: start;
}
.cc-panel__in p {
  font-size: 17.5px;
  color: var(--navy);
  opacity: .82;
  line-height: 1.66;
  max-width: 62ch;
  margin: 0;
}
.cc-panel__in .concept-role {
  margin: 0;
  padding: 2px 0 2px 24px;
  min-height: 0;
  font-size: 23px;
  line-height: 1.35;
  border-left: 1px solid color-mix(in srgb, var(--cc-c,var(--c-rust)) 40%, transparent);
}
/* Inhalt: weich aus der Unschaerfe, leicht versetzt */
.cc-panel__in > *,
.cc-body__in > * {
  opacity: 0;
  transform: translate3d(0,8px,0);
  transition: opacity .4s ease .1s, transform .5s cubic-bezier(.4,0,.2,1) .06s;
}
.cc-panel__in > *:nth-child(2),
.cc-body__in > *:nth-child(2) {
  transition-delay: .12s;
}
.cc-panel.is-shown .cc-panel__in > *,
.concept-card.is-open .cc-body__in > * {
  opacity: 1;
  transform: none;
}
.concept-card:not(.is-open) .cc-body__in > * {
  transition: opacity .18s ease, transform .18s ease;
}
.cc-panel.is-leaving .cc-panel__in > * {
  opacity: 0;
  transform: translate3d(0,-4px,0);
  transition-duration: .18s;
  transition-delay: 0s;
}
@media (max-width:720px) {
  .concept-grid.cc-js {
    grid-template-columns: 1fr;
  }
  .cc-js .concept-card {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    column-gap: 18px;
    align-items: center;
    padding: 24px 22px;
  }
  .cc-js .concept-kicker,
  .cc-js .concept-card h3 {
    padding-right: 44px;
  }
  .cc-js .concept-roman {
    grid-row: 1 / span 2;
    font-size: 38px;
    margin: 0;
    min-width: 1.4em;
    text-align: center;
  }
  .cc-js .concept-kicker {
    margin-bottom: 6px;
  }
  .cc-js .concept-card h3 {
    font-size: 23px;
    min-height: 0;
    padding: 0 44px 0 0;
  }
  .cc-plus {
    top: 50%;
    right: 20px;
    margin-top: -14px;
  }
  .cc-js .concept-card.is-open .cc-plus {
    top: 30px;
    margin-top: 0;
  }
  .cc-js .concept-card > .cc-body {
    display: block;
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    height: 0;
    overflow: hidden;
    transition: height .56s cubic-bezier(.4, 0, .2, 1);
  }
  .cc-body__in {
    padding: 18px 0 4px;
  }
  .cc-body__in p {
    font-size: 16px;
    margin: 0;
    max-width: none;
  }
  .cc-js .concept-card.is-open::after {
    opacity: 0;
  }
  .cc-body__in .concept-role {
    margin: 16px 0 0;
    padding: 0 0 0 18px;
    min-height: 0;
    font-size: 19px;
    line-height: 1.35;
    border-left: 1px solid rgb(var(--c-rust-rgb) / .35);
  }
  .concept-grid--lav .cc-body__in .concept-role {
    border-left-color: rgb(var(--c-violet-rgb) / .4);
  }
  .cc-panel {
    display: none !important;
  }
  .cc-hit {
    height: var(--cc-head, 100%);
    bottom: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-panel,
  .cc-js .concept-card > .cc-body,
  .cc-sun,
  .cc-plus,
  .cc-panel__in > *,
  .cc-body__in > * {
    transition: none !important;
  }
}
/* ===== sc-sky-m ===== */
/* Phones / portrait: the slice crop hides the desktop clouds and flocks,
     so a few small ones are shown inside the visible frame instead.
     Desktop stays exactly as it is. */
.ocean-scene .sky-m {
  display: none;
}
@media (max-aspect-ratio: 1/1) {
  .ocean-scene .sky-m {
    display: inline;
  }
}
/* ===== sc-sky-v8 ===== */
/* ============ V8 — SKY-FIRST HERO ============
     The horizon drops to ~75% of the frame so the night sky carries the composition.
     Logo, moon, arched horizon and the palette stay exactly as they were. */
/* Only the water and the wordmark move now. The moon's glow used to breathe,
     but that animation lived inside the scene SVG and forced the whole scene to
     repaint every frame -- the glow stays, it simply holds still. */
.ocean-scene .sun-pulse {
  animation: none !important;
}
/* Stars: same rotated-square technique, now with a per-star brightness range
     so the field reads as depth rather than a uniform sprinkle. */
/* The twinkle lives in its own thin SVG. The scene SVG is fully static, so an
     animation frame repaints only these few specks instead of gradients,
     clip paths, filters and several hundred ellipses. */
.ocean-twinkle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.ocean-scene .st,
.ocean-twinkle .st {
  opacity: var(--o1, .3);
  animation: stTwinkle var(--td, 4s) ease-in-out var(--dl, 0s) infinite both;
}
@keyframes stTwinkle{
    0%, 100% { opacity: var(--o1, .3); }
    50%      { opacity: var(--o2, .9); }
  }
@keyframes driftSkyA{ from{ transform:translateX(0)     } to{ transform:translateX(14px) } }
@keyframes driftSkyB{ from{ transform:translateX(0)     } to{ transform:translateX(-22px)} }
@keyframes driftSkyC{ from{ transform:translateX(0)     } to{ transform:translateX(30px) } }
@keyframes driftSkyD{ from{ transform:translateX(0)     } to{ transform:translateX(-40px)} }
/* SVG has no compositor layers: while any animation runs, the entire scene
     repaints. So stop them outright whenever the hero isn't actually on screen. */
.ocean-sticky.is-idle .ocean-scene *,
.ocean-sticky.is-idle .ocean-scene,
.ocean-sticky.is-idle .ocean-twinkle *,
.ocean-sticky.is-idle .ocean-twinkle {
  animation: none !important;
}
/* Atembewegung der Szene: sehr flach und langsam, als eigene GPU-Ebene mit Subpixel-Bewegung.
   Ausserhalb des Bildes nur anhalten (nicht zuruecksetzen), sonst springt die Szene beim Zurueckkommen. */
.ocean-bob {
  animation: oceanBreath 14s cubic-bezier(.45,0,.55,1) infinite !important;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes oceanBreath{ 0%,100%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(0,-3px,0); } }
.ocean-sticky.is-idle .ocean-bob {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .ocean-bob {
    animation: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ocean-scene .st,
  .ocean-twinkle .st {
    animation: none !important;
  }
}
/* Logo is pinned to the *measured* horizon (JS sets --horizon-top), so it keeps
     its relationship to the curve on every aspect ratio instead of a fixed %. */
/* Wordmark dead centre; the artwork is centred inside its own box, so a plain
     -50% puts the ink exactly on the middle of the frame. */
.ocean-logo-wrap {
  top: 51.4% !important;
  transform: translate(-50%, calc(-50% - var(--logo-lift, 0px))) !important;
  will-change: transform;
}
/* The mark now floats far above the water, so a mirrored wordmark would not
     line up with anything -- the sea carries the cloud reflection instead. */
.ocean-logo--refl {
  display: none !important;
}
/* No halo around the wordmark: the inherited drop-shadow bloomed into a soft
     patch once the mark sat dead centre on an open sky. */
.ocean-logo,
.ocean-logo--night,
.ocean-logo--day {
  filter: none !important;
}
/* Moon rotates/lifts around its new centre. */
#moonGrp {
  transform-box: fill-box;
  transform-origin: 720px 279px;
}
@media (max-width:720px) {
  .ocean-logo-wrap {
    top: 51.4% !important;
    transform: translate(-50%, calc(-50% - var(--logo-lift, 0px))) !important;
  }
}

/* ===== ff-collapse: Zeitgeist und Mentor & Fellowship Programm als aufklappbare Karten ===== */
/* Der Tempel: Zeitgeist ist Giebel und Gebaelk, die acht Formate von Logicus und Aestheticus
   stehen darunter als Saeulen, Mentor & Fellowship Programm ist der Sockel mit drei Stufen.
   Zwei feine Linien verbinden Gebaelk und Sockel. Ohne JavaScript oder bei reduzierter
   Bewegung steht alles vollstaendig und still da (Zeichnung: sc-frame-js). */
.formats .fa-frame {
  position: relative;
  --ext: 18px;
  --st: 10px;
  --ease-fold: cubic-bezier(.4, 0, .2, 1);
  margin-top: 64px;
}
/* Giebel, Gebaelk, Sockel und Stufen ragen etwas ueber die Saeulenreihe hinaus */
.formats .fa-frame.fa-temple > .fa-pediment,
.formats .fa-frame.fa-temple > .fa-temple-card,
.formats .fa-frame.fa-temple > .fa-steps {
  margin-left: calc(var(--ext) * -1);
  margin-right: calc(var(--ext) * -1);
}
/* Saeulenbereich: die beiden Linien laufen exakt von der Unterkante des Gebaelks bis zur
   Oberkante des Sockels. Reines CSS, beim Aufklappen wird nichts nachgemessen. */
.formats .fa-cols {
  position: relative;
  display: flow-root;
  padding-bottom: 76px;
}
.formats .fa-cols::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(var(--ext) / -2);
  right: calc(var(--ext) / -2);
  border-left: 1px solid rgb(var(--c-violet-rgb) / .42);
  border-right: 1px solid rgb(var(--c-violet-rgb) / .42);
  pointer-events: none;
}
.formats .fa-frame.fr-armed .fa-cols::before {
  clip-path: inset(0 0 100% 0);
}
.formats .fa-frame.fr-armed.fr-drawn .fa-cols::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.8s cubic-bezier(.45,0,.25,1);
}
/* Giebel */
.formats .fa-pediment {
  position: relative;
  z-index: 3;
  height: clamp(54px, 9.4vw, 124px);
  margin-bottom: -1px;
  pointer-events: none;
}
.fa-pediment__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fa-ped-in {
  fill: none;
  stroke: rgb(var(--c-lavender-rgb) / .32);
  stroke-width: 1;
}
.fa-ped-edge {
  fill: none;
  stroke: rgba(163,173,255,.6);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
.fa-pediment__sun {
  position: absolute;
  left: 50%;
  top: var(--sun-y, 51%);
  width: var(--sun-s, 46px);
  height: var(--sun-s, 46px);
  overflow: visible;
  transform: translate(-50%, -50%);
}
.fa-sun-rays line {
  stroke: #FFCB45;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.fa-sun-spark {
  fill: #FFF8EC;
  transform-box: fill-box;
  transform-origin: center;
  animation: faSpark 8s ease-in-out infinite;
}
.fa-sun-spark + .fa-sun-spark {
  animation-delay: -4s;
}
/* ruhiges Atmen statt Blinken */
@keyframes faSpark{ 0%,100%{ opacity:.7; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }
/* Sterne im Giebelfeld: dieselben Rauten wie im Nachthimmel bei "Auf den Schultern von Riesen" */
.fa-ped-stars {
  position: absolute;
  inset: 0;
  transition: opacity 1s ease 1.2s;
}
.fa-ped-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 1px;
  background: var(--c-cream);
  box-shadow: 0 0 4px rgba(255,246,228,.4);
  transform: rotate(45deg);
  opacity: .6;
  animation: faTwinkle 9s ease-in-out var(--dl, 0s) infinite;
}
/* alle im selben langsamen Takt, nur versetzt: eine ruhige Welle, kein Flackern */
@keyframes faTwinkle{ 0%,100%{ opacity:.38; } 50%{ opacity:.85; } }
.fa-temple.fr-armed .fa-ped-stars {
  opacity: 0;
}
.fa-temple.fr-ped .fa-ped-stars {
  opacity: 1;
}
/* Glanzpunkte auf Gebaelk und Sockel: wenige, ruhig atmend statt blinkend */
.formats .fa-temple .fa-temple-card::before {
  background-image: radial-gradient(2.4px 2.4px at 8% 30%, #fff, transparent 60%),
    radial-gradient(2px 2px at 27% 72%, #fff, transparent 60%),
    radial-gradient(2.4px 2.4px at 74% 26%, #fff, transparent 60%),
    radial-gradient(2px 2px at 92% 68%, #fff, transparent 60%);
  animation: faGlint 10s ease-in-out infinite;
}
.formats .fa-temple .fa-temple-card::after {
  background-image: radial-gradient(2.2px 2.2px at 16% 54%, #fff, transparent 60%),
    radial-gradient(2px 2px at 64% 80%, #fff, transparent 60%),
    radial-gradient(2.2px 2.2px at 86% 16%, #fff, transparent 60%);
  animation: faGlint 10s ease-in-out -5s infinite;
}
@keyframes faGlint{ 0%,100%{ opacity:.4; } 50%{ opacity:.75; } }
/* Gebaelk und Sockel: gerade Kanten, Titel mittig wie eine Inschrift */
.formats .fa-frame .format-feature {
  margin: 0;
}
.formats .fa-temple .fa-temple-card {
  text-align: center;
}
.formats .fa-temple .fa-entab {
  border-radius: 0 0 6px 6px !important;
  border-top-color: rgba(163,173,255,.6) !important;
}
.formats .fa-temple .fa-base {
  border-radius: 6px 6px 2px 2px !important;
}
/* Die Flaeche ist fast deckend: ohne backdrop-filter sieht sie gleich aus, muss beim
   Aufklappen aber nicht in jedem Bild neu weichgezeichnet werden. */
.formats .fa-temple .fa-temple-card,
.formats .fa-temple .fa-temple-card:hover {
  transform: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 12px 28px rgba(6,12,45,.24),
    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;
}
.formats .fa-temple .fa-temple-card .format-feature__title {
  padding-left: 48px;
  padding-right: 48px;
}
.formats .fa-temple .fa-temple-card .ff-body__in > p {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* Stufen: jede eine Spur breiter, nach unten leichter */
.formats .fa-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.formats .fa-steps i {
  display: block;
  height: 10px;
  width: calc(100% + var(--n) * 2 * var(--st));
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(186,194,255,.62) 0, rgba(186,194,255,.62) 1px, rgba(255,255,255,.07) 1px, transparent 45%),
    linear-gradient(180deg, #23399A 0%, #14266F 100%);
  box-shadow: 0 2px 4px rgba(6,12,45,.16);
  opacity: var(--o);
}
.formats .fa-steps i:nth-child(1) { --n: 1; --o: .95; }
.formats .fa-steps i:nth-child(2) { --n: 2; --o: .87; }
.formats .fa-steps i:nth-child(3) { --n: 3; --o: .79; }
.formats .fa-steps i:nth-child(4) { --n: 4; --o: .71; }
.formats .fa-steps i:nth-child(5) { --n: 5; --o: .63; }
/* Die unterste Stufe darf nie ueber den Seitenrand hinausragen */
@media (max-width:1400px) {
  .formats .fa-frame {
    --ext: 12px;
    --st: 8px;
  }
}
@media (max-width:1340px) {
  .formats .fa-frame {
    --ext: 10px;
    --st: 4px;
  }
}
/* Aufbau beim ersten Hineinscrollen: Giebel, Linien, Stufen */
.fa-temple.fr-armed .fa-ped-fill,
.fa-temple.fr-armed .fa-ped-in {
  opacity: 0;
}
.fa-temple.fr-armed .fa-ped-edge {
  stroke-dashoffset: 1;
}
.fa-temple.fr-armed .fa-pediment__sun {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4) rotate(-30deg);
}
.fa-temple.fr-armed .fa-steps i {
  opacity: 0;
  transform: translate3d(0, -8px, 0) scaleX(.92);
}
.fa-temple.fr-ped .fa-ped-edge {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s cubic-bezier(.45,0,.25,1);
}
.fa-temple.fr-ped .fa-ped-fill {
  opacity: 1;
  transition: opacity 1s ease .5s;
}
.fa-temple.fr-ped .fa-ped-in {
  opacity: 1;
  transition: opacity .8s ease 1s;
}
.fa-temple.fr-ped .fa-pediment__sun {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity .8s ease 1.05s, transform 1.6s cubic-bezier(.16,1,.3,1) 1.05s;
}
.fa-temple.fr-steps .fa-steps i {
  opacity: var(--o);
  transform: none;
  transition: opacity .6s ease calc(var(--n) * 110ms), transform .8s cubic-bezier(.25,.9,.3,1) calc(var(--n) * 110ms);
}
@media (max-width:720px) {
  .formats .fa-frame {
    --ext: 5px;
    --st: 3px;
    margin-top: 48px;
  }
  .formats .fa-cols {
    padding-bottom: 56px;
  }
  .formats .fa-temple .fa-temple-card .format-feature__title {
    padding-left: 36px;
    padding-right: 36px;
  }
  .formats .fa-steps i {
    height: 6px;
  }
}
.ff-js .format-feature {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ff-js .format-feature .format-feature__title {
  margin-bottom: 0;
  padding-right: 48px;
}
/* Hoehe: zuegig an, weich und ohne Nachlaufen aus. Was darunter liegt (Saeulen,
   Sockel, Stufen) faehrt im selben Takt mit und steht im selben Moment. */
.ff-js .format-feature > .ff-body {
  height: 0;
  overflow: hidden;
  transition: height .56s cubic-bezier(.4, 0, .2, 1);
}
.ff-body__in {
  padding-top: 16px;
}
/* Text: nur Deckkraft und ein kurzer Weg, fertig bevor die Hoehe steht; beim
   Zuklappen verschwindet er zuerst */
.ff-body__in > * {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity .2s ease, transform .2s ease;
}
.ff-js .format-feature.is-open .ff-body__in > * {
  opacity: 1;
  transform: none;
  transition: opacity .4s ease .12s, transform .48s cubic-bezier(.4, 0, .2, 1) .08s;
}
.ff-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: var(--ff-head, 100%);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.ff-hit:focus-visible {
  outline: 2px solid var(--c-lavender);
  outline-offset: -6px;
}
/* Plus, das sich zum Kreuz dreht (hell auf dem blauen Glas) */
.ff-plus {
  position: absolute;
  top: 30px;
  right: 28px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgb(var(--c-lavender-rgb) / .55);
  pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.8,.3,1), background .45s ease, border-color .45s ease;
}
.ff-plus::before,
.ff-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin: -.75px 0 0 -6px;
  background: var(--c-cream);
  border-radius: 1px;
  transition: background .45s ease;
}
.ff-plus::after {
  transform: rotate(90deg);
}
.ff-js .format-feature:hover .ff-plus {
  border-color: var(--c-lavender);
}
.ff-js .format-feature.is-open .ff-plus {
  transform: rotate(135deg);
  background: var(--c-lavender);
  border-color: var(--c-lavender);
}
.ff-js .format-feature.is-open .ff-plus::before,
.ff-js .format-feature.is-open .ff-plus::after {
  background: var(--c-navy);
}
@media (max-width:720px) {
  .ff-plus {
    top: 24px;
    right: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ff-js .format-feature > .ff-body,
  .ff-body__in > *,
  .ff-plus {
    transition: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fa-sun-spark,
  .fa-ped-stars i,
  .formats .fa-temple .fa-temple-card::before,
  .formats .fa-temple .fa-temple-card::after {
    animation: none;
  }
  .fa-ped-stars i {
    opacity: .7;
  }
}
@media (max-width:720px) {
  .fa-ped-stars i {
    width: calc(var(--s) * .72);
    height: calc(var(--s) * .72);
    margin: calc(var(--s) * -.36) 0 0 calc(var(--s) * -.36);
  }
}


/* ===== Hero: Nacht- und Tagbild (Illustration) =====
   Eine Buehne im Seitenverhaeltnis des Bildes deckt den Bildschirm wie object-fit: cover, so
   dass Prozentwerte auf das Bild zeigen. Beim Scrollen blendet das Tagbild ueber das Nachtbild;
   beide verschieben sich dabei so, dass ihre Horizonte deckungsgleich bleiben. Das Logo steigt
   von seiner Nachtposition zur Tagposition und wird etwas kleiner (--e: 0 Nacht, 1 Tag). */
.hx-stage {
  --ar: 1672 / 849;
  --arn: 1.9694;
  --dh: .0445;                 /* Horizont Nacht minus Horizont Tag, in Bildhoehe */
  --ly0: 47.17%;               /* Logomitte Nacht */
  --ly1: 35.66%;               /* Logomitte Tag */
  --ls1: .72;                  /* Logogroesse Tag relativ zur Nacht */
  --lw: 44.3%;                 /* Breite der Logobox (Tinte ca. 49 % davon) */
  --e: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100lvh * var(--arn)));
  aspect-ratio: var(--ar);
  transform: translate(-50%, -50%);
}
@media (orientation: portrait) {
  .hx-stage {
    --ar: 941 / 1547;
    --arn: .6083;
    --dh: .0142;
    --ly0: 44.76%;
    --ly1: 41.5%;
    --ls1: .87;
    --lw: 84.1%;
  }
}
.hx-img,
.hx-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.hx-img {
  will-change: transform, opacity;
}
.hx-night {
  transform: translate3d(0, calc(var(--dh) * var(--e) * -100%), 0);
}
.hx-day {
  transform: translate3d(0, calc(var(--dh) * (1 - var(--e)) * 100%), 0);
}
.ocean-logo--refl {
  display: none !important;
}
.hx-pic,
.hx-pic img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.ocean-sticky.is-idle .hx-stars i {
  animation-play-state: paused;
}

/* ===== Mond und Sonne als eigene Ebenen (wie in der alten Szene) =====
   Beide sind aus den Bildern geloest. Der Mond steigt beim Scrollen auf und verblasst, die Sonne
   steigt aus dem Meer: unten am Horizont abgeschnitten, so dass immer nur die Kappe ueber dem
   Wasser zu sehen ist. --e: 0 Nacht, 1 Tag. */
.hx-v { display: none !important; }
@media (orientation: portrait) {
  .hx-h { display: none !important; }
  .hx-v { display: block !important; }
}
.hx-sunclip {
  position: absolute;
  left: 42.109%;
  top: 47.044%;
  width: 15.313%;
  height: 12.494%;
  overflow: hidden;
}
.hx-sunclip.hx-v {
  left: 28.828%;
  top: 52.652%;
  width: 42.276%;
  height: 8.796%;
}
.hx-sunclip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: translate3d(0, calc((1 - var(--e, 0)) * 100%), 0);
  will-change: transform;
}
/* Logo: Groesse wie in der alten Fassung, Lage auf dem Bild (steigt von der Nacht- zur Tagposition) */
.hx-stage .ocean-logo-wrap {
  top: calc(var(--ly0) + (var(--ly1) - var(--ly0)) * var(--e)) !important;
  width: clamp(270px, 34vw, 500px) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2;
}
@media (max-width:720px) {
  .hx-stage .ocean-logo-wrap {
    width: min(74vw, 360px) !important;
  }
}

/* Mentor & Fellowship: Illustration unter dem Text, erscheint mit dem Aufklappen.
   Quer- oder Hochformat je nach Bildschirm (picture/source). */
.mf-art {
  margin: 22px auto 4px;
  max-width: 840px;
}
.mf-art img {
  display: block;
  width: 100%;
  height: auto;
}
@media (orientation: portrait) {
  .mf-art { max-width: 460px; margin-top: 18px; }
}

/* Offene Karten schliessen bei Klick irgendwo darauf */
.ff-js .format-feature.is-open,
.cc-js .concept-card.is-open,
.cc-panel.is-open {
  cursor: pointer;
}

/* ===== Meer: die Lichtbahnen auf dem Wasser leuchten leise auf =====
   Die hellen Wellenkaemme sind aus Nacht- und Tagbild geloest und liegen als weicher Schein in
   drei Gruppen genau darueber (img/sea-*-g1..3). Jede Gruppe atmet in eigenem Takt, so dass das
   Licht ueber das Wasser zu wandern scheint. Nur Deckkraft wird animiert; bei is-idle steht alles. */
.hx-glint {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--gt);
  height: var(--gh);
  pointer-events: none;
}
.hx-glint i {
  position: absolute;
  inset: 0;
  background: no-repeat 0 0 / 100% 100%;
  opacity: var(--glo, .12);
  animation: seaGlint var(--gd, 6s) ease-in-out var(--gl, 0s) infinite both;
  will-change: opacity;
}
.hx-glint i:nth-child(1) { --gd: 5.8s; --gl: 0s; }
.hx-glint i:nth-child(2) { --gd: 7.3s; --gl: -2.6s; }
.hx-glint i:nth-child(3) { --gd: 6.5s; --gl: -4.9s; }
@keyframes seaGlint{
  0%, 100% { opacity: var(--glo, .12); }
  38%      { opacity: var(--ghi, .9); }
}
.hx-glint--night { --gt: 65.162%; --gh: 34.838%; --glo: .06; --ghi: .72; }
.hx-glint--night i:nth-child(1) { background-image: url(../img/sea-night-h-g1.webp); }
.hx-glint--night i:nth-child(2) { background-image: url(../img/sea-night-h-g2.webp); }
.hx-glint--night i:nth-child(3) { background-image: url(../img/sea-night-h-g3.webp); }
.hx-glint--day { --gt: 60.257%; --gh: 39.743%; --ghi: .75; }
.hx-glint--day i:nth-child(1) { background-image: url(../img/sea-day-h-g1.webp); }
.hx-glint--day i:nth-child(2) { background-image: url(../img/sea-day-h-g2.webp); }
.hx-glint--day i:nth-child(3) { background-image: url(../img/sea-day-h-g3.webp); }
@media (orientation: portrait) {
  .hx-glint--night { --gt: 63.953%; --gh: 36.047%; }
  .hx-glint--night i:nth-child(1) { background-image: url(../img/sea-night-v-g1.webp); }
  .hx-glint--night i:nth-child(2) { background-image: url(../img/sea-night-v-g2.webp); }
  .hx-glint--night i:nth-child(3) { background-image: url(../img/sea-night-v-g3.webp); }
  .hx-glint--day { --gt: 62.332%; --gh: 37.668%; }
  .hx-glint--day i:nth-child(1) { background-image: url(../img/sea-day-v-g1.webp); }
  .hx-glint--day i:nth-child(2) { background-image: url(../img/sea-day-v-g2.webp); }
  .hx-glint--day i:nth-child(3) { background-image: url(../img/sea-day-v-g3.webp); }
}
.ocean-sticky.is-idle .hx-glint i {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .hx-glint i {
    animation: none;
    opacity: .3;
  }
}

/* ===== Aufklappen der Rahmenkarten: weich statt harter Kante =====
   Waehrend der Hoehenaenderung blendet die Unterkante ueber 90 px aus; die Illustration
   erscheint etwas spaeter und gleitet sanft herein. */
.ff-js .format-feature > .ff-body.ff-moving {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%);
}
.ff-js .format-feature .ff-body__in > .mf-art {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.985);
  transition: opacity .25s ease, transform .25s ease;
}
.ff-js .format-feature.is-open .ff-body__in > .mf-art {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease .22s, transform 1.2s cubic-bezier(.16,1,.3,1) .18s;
}
@media (prefers-reduced-motion: reduce) {
  .ff-js .format-feature .ff-body__in > .mf-art { transition: none; transform: none; }
}

/* Sternenhimmel der Nacht: genau EINE Sternenebene je Format. .ocean-twinkle (display:block)
   hob das Ausblenden der jeweils anderen Ebene auf, dadurch lagen Quer- und Hochformat-Sterne
   uebereinander und jeder Stern erschien doppelt. */
.ocean-twinkle.hx-old--v { display: none; }
@media (orientation: portrait) {
  .ocean-twinkle.hx-old--h { display: none; }
  .ocean-twinkle.hx-old--v { display: block; }
}

/* ===== Meer, lebendiger: Lichtwellen laufen durch die Glanzlichter =====
   ::after  ein heller Lichtstreifen wandert vom Horizont nach vorn, sichtbar nur dort, wo das
            Wasser Glanzlichter hat (Maske = die drei Glanzlicht-Ebenen),
   ::before ein weicher Schein unter Mond/Sonne, der langsam atmet,
   i        die Glanzlicht-Gruppen leuchten wie bisher und wiegen sich minimal seitlich. */
.hx-glint::before,
.hx-glint::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hx-glint::before {
  background: radial-gradient(38% 46% at 50% 6%, var(--gc, rgba(236,232,255,.55)) 0%, rgba(236,232,255,0) 70%);
  opacity: .25;
  animation: seaBreath 9s ease-in-out infinite;
}
@keyframes seaBreath{ 0%,100%{ opacity: .18; transform: scaleX(.96); } 50%{ opacity: .5; transform: scaleX(1.04); } }
.hx-glint::after {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--gs, rgba(255,250,235,1)) 50%, rgba(255,255,255,0) 100%) 0 0 / 100% 34% no-repeat;
  -webkit-mask-image: var(--m1), var(--m2), var(--m3);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-composite: source-over;
  mask-image: var(--m1), var(--m2), var(--m3);
  mask-size: 100% 100%;
  mask-composite: add;
  opacity: .85;
  animation: seaWave 6.5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes seaWave{ 0%{ background-position: 0 -40%; } 100%{ background-position: 0 150%; } }
.hx-glint i {
  animation-name: seaGlint, seaSway;
  animation-duration: var(--gd, 6s), 11s;
  animation-delay: var(--gl, 0s), var(--gl, 0s);
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
}
@keyframes seaSway{ 0%,100%{ transform: translateX(-.35%); } 50%{ transform: translateX(.35%); } }
.hx-glint--night { --m1: url(../img/sea-night-h-g1.webp); --m2: url(../img/sea-night-h-g2.webp); --m3: url(../img/sea-night-h-g3.webp); }
.hx-glint--day { --m1: url(../img/sea-day-h-g1.webp); --m2: url(../img/sea-day-h-g2.webp); --m3: url(../img/sea-day-h-g3.webp);
  --gc: rgba(255,226,170,.6); --gs: rgba(255,246,214,1); }
@media (orientation: portrait) {
  .hx-glint--night { --m1: url(../img/sea-night-v-g1.webp); --m2: url(../img/sea-night-v-g2.webp); --m3: url(../img/sea-night-v-g3.webp); }
  .hx-glint--day { --m1: url(../img/sea-day-v-g1.webp); --m2: url(../img/sea-day-v-g2.webp); --m3: url(../img/sea-day-v-g3.webp); }
}
.ocean-sticky.is-idle .hx-glint::before,
.ocean-sticky.is-idle .hx-glint::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hx-glint::before, .hx-glint::after { animation: none; }
  .hx-glint::after { display: none; }
}

/* Tagbild der Startseite: Sterne deutlich kleiner und leiser */
.hx-day .hx-stars i {
  width: calc(var(--s) * .26%);
  animation-name: scStarDay;
}
@keyframes scStarDay{
  0%,100% { opacity: calc(var(--lo, .35) * .45); }
  50%     { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-day .hx-stars i { opacity: .3; }
}

/* ===== Hero: mehr ruhige Bewegung =====
   Alles langsam, weich und nur ueber transform/opacity (GPU), steht still, wenn der Hero
   nicht zu sehen ist, und entfaellt bei reduzierter Bewegung.
   1. Dunst ueber dem Horizont: zwei feine Schleier ziehen gegenlaeufig sehr langsam vorbei.
   2. Nacht: ab und zu (etwa alle 10 s) zieht eine Sternschnuppe ueber den Himmel.
*/
.hx-mist {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--mt);
  height: var(--mh);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 35%, #000 70%, transparent 100%);
}
.hx-mist i {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background:
    radial-gradient(14% 42% at 8% 55%, var(--mc) 0%, transparent 70%),
    radial-gradient(18% 36% at 27% 45%, var(--mc) 0%, transparent 72%),
    radial-gradient(12% 48% at 41% 60%, var(--mc) 0%, transparent 70%);
  background-size: 50% 100%;
  background-repeat: repeat-x;
  opacity: var(--mo);
  will-change: transform;
  animation: hxMist 110s linear infinite;
}
.hx-mist i:nth-child(2) {
  top: 18%;
  opacity: calc(var(--mo) * .7);
  animation-duration: 150s;
  animation-direction: reverse;
  background-position: 23% 0;
}
@keyframes hxMist{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }
.hx-mist--night { --mt: 55%; --mh: 16%; --mc: rgba(196,196,240,.55); --mo: .55; }
.hx-mist--day   { --mt: 50%; --mh: 16%; --mc: rgba(255,226,206,.6);  --mo: .5; }
@media (orientation: portrait) {
  .hx-mist--night { --mt: 55%; --mh: 12%; }
  .hx-mist--day   { --mt: 52%; --mh: 13%; }
}

/* Sternschnuppen: duenne Lichtspur, kurz sichtbar, dann lange Pause */
.hx-shoot { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hx-shoot i {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--sl, 9%);
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(214,216,255,.45) 55%, #FFFDF4 100%);
  box-shadow: 0 0 6px rgba(230,232,255,.55);
  transform-origin: 100% 50%;
  rotate: var(--sr, 20deg);
  opacity: 0;
  animation: hxShoot 30s linear infinite;
  animation-delay: var(--sd, 0s);
}
.hx-shoot i:nth-child(1) { --sx: 18%; --sy: 9%;  --sr: 18deg; --sd: 4s; }
.hx-shoot i:nth-child(2) { --sx: 62%; --sy: 6%;  --sr: 24deg; --sd: 14s; --sl: 7%; }
.hx-shoot i:nth-child(3) { --sx: 36%; --sy: 18%; --sr: 15deg; --sd: 24s; --sl: 8%; }
@keyframes hxShoot{
  0%    { opacity: 0; transform: translate3d(0,0,0) scaleX(.2); }
  .6%   { opacity: 1; }
  3.2%  { opacity: 0; transform: translate3d(260%,0,0) scaleX(1); }
  100%  { opacity: 0; transform: translate3d(260%,0,0) scaleX(1); }
}
@media (orientation: portrait) {
  .hx-shoot i { width: calc(var(--sl, 9%) * 2.4); }
  .hx-shoot i:nth-child(1) { --sx: 8%; --sy: 10%; }
  .hx-shoot i:nth-child(2) { --sx: 48%; --sy: 7%; }
  .hx-shoot i:nth-child(3) { --sx: 20%; --sy: 20%; }
}

.ocean-sticky.is-idle .hx-mist i,
.ocean-sticky.is-idle .hx-shoot i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hx-mist i { animation: none; }
  .hx-shoot { display: none; }
}

/* ===== Startsequenz: ruhig stehendes Bild, dafuer mehr Glitzer =====
   Keine Bewegung im Hero mehr: kein Atmen der Szene, kein Wiegen der Glanzlichter, kein
   wandernder Lichtstreifen, kein ziehender Dunst. Es bleiben die Sternschnuppen und reines
   Funkeln (nur Deckkraft): Sterne am Himmel, mehr funkelnde Rauten auf dem Wasser
   (#twinkleSea) und die Glanzlichter. */
.ocean-bob { animation: none !important; transform: none !important; will-change: auto; }
.hx-mist i { animation: none !important; transform: none !important; }
.hx-glint::after { display: none !important; }
.hx-glint::before { animation: none !important; transform: none !important; opacity: .42; }
.hx-glint i {
  animation: seaGlint var(--gd, 6s) ease-in-out var(--gl, 0s) infinite both !important;
  transform: none !important;
}
.hx-glint--night { --glo: .2; --ghi: 1; }
.hx-glint--day   { --glo: .22; --ghi: 1; }
/* Sterne: tiefer ausatmen, heller aufleuchten, so dass das Funkeln deutlich zu sehen ist */
.ocean-twinkle .st { animation-name: stTwinkleHx !important; }
@keyframes stTwinkleHx{
  0%, 100% { opacity: calc(var(--o1, .3) * .45); }
  50%      { opacity: 1; }
}
.hx-stars i { animation-name: scStarHx; }
@keyframes scStarHx{ 0%,100% { opacity: calc(var(--lo, .35) * .5); } 50% { opacity: 1; } }

/* Mentor & Fellowship: beim Aufklappen nur einblenden, nicht hereingleiten */
.ff-js .format-feature .ff-body__in > .mf-art.mf-live,
.ff-js .format-feature.is-open .ff-body__in > .mf-art.mf-live { transform: none; }

/* Tradition auf der Startseite: Werkangabe wie auf der Traditionsseite
   (kleines Etikett "Werk" in Versalien, darunter Titel, Jahr und Seite kursiv) */
.lineage .thinker .thinker-work {
  margin-top: 14px;
  font-family: "EB Garamond", serif;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.4;
  color: rgba(198,184,206,.95);
}
.lineage .thinker .thinker-work span {
  display: block;
  margin-bottom: 3px;
  font-family: "Manrope", sans-serif;
  font-style: normal;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--c-coral-soft-rgb) / .8);
}

/* ===== Hero unten: Claim und "Founding Colloquium" besser lesbar =====
   Steht still (kein Wippen mehr), etwas groesser, und bekommt eine leichte Hervorhebung:
   hinter dem Block ein weicher dunkler Hof, der die hellen Glanzlichter des Wassers beruhigt,
   darauf ein rosa-lavendelfarbener Schein wie auf der Colloquium-Seite. */
.ocean-hint { animation: none !important; translate: none; isolation: isolate; --pl: 226 178 240; }
.ocean-edition-marker::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: min(680px, 108vw); height: 175%;
  translate: -50% -50%;
  background:
    radial-gradient(closest-side, rgb(var(--pl) / .20), rgb(var(--pl) / .08) 55%, rgb(var(--pl) / 0) 100%),
    radial-gradient(closest-side, rgb(10 20 70 / .62), rgb(10 20 70 / .38) 50%, rgb(10 20 70 / 0) 100%);
}
.ocean-edition-marker { gap: 11px; }
.ocean-edition-claim {
  font-size: clamp(22px, 2.05vw, 32px);
  text-shadow: 0 1px 2px rgb(var(--c-navy-deep-rgb) / .7), 0 0 22px rgb(var(--pl) / .45), 0 2px 18px rgb(var(--c-navy-deep-rgb) / .6);
}
.ocean-edition-label {
  font-size: clamp(16px, 1.3vw, 20px);
  padding: 9px 22px;
  border-color: rgb(var(--pl) / .8);
  background-color: rgba(30,40,110,.42);
  box-shadow: 0 4px 16px rgb(var(--c-navy-deep-rgb) / .3), 0 0 20px rgb(var(--pl) / .5), inset 0 1px 1px rgba(255,255,255,.3);
}
.ocean-edition-label:hover,
.ocean-edition-label:focus-visible {
  border-color: rgb(var(--pl) / .95);
  box-shadow: 0 8px 24px rgb(var(--c-navy-deep-rgb) / .42), 0 0 32px rgb(var(--pl) / .75);
}
.ocean-edition-year { font-size: 10.5px; opacity: .85; }
.ocean-edition-scroll { font-size: 9px; opacity: .6; }
@media (max-width: 380px) {
  .ocean-edition-claim { font-size: 20px; }
}

/* ===== Leistung (Okt. 2026): Funkeln auf der Grafikkarte =====
   Vorher atmete jeder Stern einzeln als SVG-Element; das zwingt den Browser, die ganze
   Sternenebene in jedem Bild neu zu zeichnen. Jetzt liegen die funkelnden Sterne in einigen
   duennen Ebenen, und nur deren Deckkraft atmet, jede Ebene in eigenem Takt. Das laeuft auf
   der Grafikkarte, ohne Neuzeichnen. Das Bild bleibt gleich: dieselben Sterne an denselben
   Stellen, dieselbe Tiefe des Funkelns. */
.ocean-twinkle.hx-tw {
  animation: hxTw var(--twd, 4.6s) ease-in-out var(--twl, 0s) infinite both;
}
@keyframes hxTw{
  0%, 100% { opacity: .15; }
  50%      { opacity: 1; }
}
.lineage-stars .lsg {
  position: absolute;
  inset: 0;
  animation: twinkle var(--td, 3.4s) ease-in-out var(--dl, 0s) infinite both;
}
.lineage-stars .lsg .nstar { animation: none !important; }
/* Glanzlichter auf dem Wasser stehen still, solange der Hero nicht im Bild ist
   (die spaetere !important-Regel hatte das Anhalten aufgehoben) */
.ocean-sticky.is-idle .hx-glint i { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ocean-twinkle.hx-tw { animation: none !important; opacity: .55; }
  .lineage-stars .lsg { animation: none !important; opacity: .6; }
}

/* ===== Bewegtes Wasser (Okt. 2026) =====
   Glitzer: kleine Lichtpunkte blitzen auf dem Wasser auf, dicht in der Lichtbahn unter Mond
   bzw. Sonne, vereinzelt daneben. Sparsam gebaut: je Bild und Format nur vier Ebenen, jede
   traegt ihre Punkte als Hintergrundbilder (keine einzelnen Elemente), und animiert wird nur
   die Deckkraft dieser vier Ebenen, jede in eigenem Takt. Das laeuft vollstaendig auf der
   Grafikkarte, ohne Neuzeichnen und ohne Layout. Start erst kurz nach dem Laden, Stillstand,
   solange der Hero nicht im Bild ist. */
.hx-glitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hx-glitter--v { display: none; }
@media (orientation: portrait) {
  .hx-glitter--h { display: none; }
  .hx-glitter--v { display: block; }
}
.hx-glitter i {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: waterGlit 4s ease-in-out 1.8s infinite both;
}
.hx-glitter i:nth-child(2) { animation-duration: 4.7s; animation-delay: 2.9s; }
.hx-glitter i:nth-child(3) { animation-duration: 5.3s; animation-delay: 2.2s; }
.hx-glitter i:nth-child(4) { animation-duration: 3.6s; animation-delay: 3.5s; }
@keyframes waterGlit {
  0%, 52% { opacity: 0; }
  64%     { opacity: 1; }
  78%     { opacity: .2; }
  100%    { opacity: 0; }
}
.ocean-sticky.is-idle .hx-glitter i { animation-play-state: paused; }

/* Info unten: schwebt ruhig nur auf und ab (translate, auf der Grafikkarte) */
.ocean-hint {
  animation: edFloat 7s ease-in-out 2.4s infinite both !important;
}
@keyframes edFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
.ocean-sticky.is-idle .ocean-hint { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hx-glitter { display: none; }
  .ocean-hint { animation: none !important; }
}

/* ===== Okt. 2026: Linien ersetzt =====
   1. Die gerade Linie ueber Founding Colloquium / Annual Forum / Setting entfaellt.
   2. Statt der Bogenlinie im Colloquium-Block steht das farbige Sonnen-Emblem der Visitenkarte
      in einem Lila-Ton, ohne Hinterlegung. Ruhend, ohne Animation. */
.sea-masthead .hero-meta,
.hero-meta { border-top: 0 !important; }
.colloquium .colloquium-inner--solo .colloquium-stats { background: none !important; padding-top: 10px !important; }
.cs-sunrise {
  position: relative;
  width: min(440px, 78%);
  aspect-ratio: 1200 / 284;
  margin: 6px auto 8px;
}
.cs-sunrise__hz,
.cs-sunrise__sun img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}