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

/* ===== 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: var(--c-navy);
  color-scheme: dark;
}
/* ===== sc-ort ===== */
/* Der Ort — Abschnitt unter den vier Kaesteln */
.ort {
  margin: 38px 0 6px;
}
.ort-kicker {
  font-family: "Manrope",sans-serif;
  font-size: 11.5px !important;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 10px;
}
.ort-titel {
  font-family: "EB Garamond",Georgia,serif;
  font-weight: 500;
  font-size: clamp(25px,3vw,34px);
  line-height: 1.14;
  margin: 0 0 6px;
  color: var(--navy);
}
.ort-titel em {
  font-style: italic;
  color: var(--c-violet);
}
.ort-adresse {
  font-family: "Manrope",sans-serif;
  font-size: 15px !important;
  letter-spacing: .04em;
  color: var(--ink-mute);
  margin: 0 0 20px;
}
.ort-zitat {
  margin: 0 0 22px;
  padding: 0 0 0 18px;
  border-left: 2px solid rgb(var(--c-violet-rgb) / .35);
}
.ort-zitat p {
  margin: 0 0 8px;
}
/* Bildreihe: drei Aufnahmen, leicht ueberlappend. Die mittlere fuehrt,
     die beiden anderen liegen versetzt an den Raendern darunter. */
.ort-bilder {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 26px auto 0;
  aspect-ratio: 700/430;
}
.ort-bilder figure {
  position: absolute;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 3px solid var(--c-paper);
  cursor: zoom-in;
  box-shadow: 0 16px 40px rgb(var(--c-navy-rgb) / .26);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
                                box-shadow .4s;
}
.ort-bilder img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ort-bilder figure:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 22px 52px rgb(var(--c-navy-rgb) / .34);
}
/* mittlere, fuehrende Aufnahme */
.ob-mitte {
  left: 25%;
  top: 14%;
  width: 50%;
  aspect-ratio: 1/1;
  z-index: 2;
}
/* oben links, hinter der Mitte hervorschauend */
.ob-links {
  left: 0;
  top: 2%;
  width: 29%;
  aspect-ratio: 595/357;
  z-index: 3;
}
/* unten rechts, ebenfalls leicht ueberlappend */
.ob-rechts {
  right: 0;
  bottom: 2%;
  width: 29%;
  aspect-ratio: 590/357;
  z-index: 3;
}
@media (max-width:720px) {
  /* schmaler Container: Breiten und Randabstaende so, dass die beiden
       Seitenbilder die Mitte auch hier nur an einer Ecke ueberlappen */
  .ort-bilder {
    aspect-ratio: 360/380;
    max-width: 360px;
  }
  .ob-mitte {
    left: 21%;
    width: 58%;
    top: 24%;
  }
  .ob-links {
    width: 30%;
    top: 14%;
  }
  .ob-rechts {
    width: 30%;
    bottom: 16%;
  }
  .ort-bilder figure {
    border-width: 2px;
  }
}
/* Lichtbox: oeffnet ein angeklicktes Bild gross. Schliesst per Klick daneben,
     per Escape oder ueber die Schaltflaeche. */
.lichtbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px,4vw,48px);
  background: rgb(var(--c-navy-deep-rgb) / .86);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity .28s ease;
}
.lichtbox[hidden] {
  display: none;
}
.lichtbox.offen {
  opacity: 1;
}
.lichtbox figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: scale(.97);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.lichtbox.offen figure {
  transform: scale(1);
}
.lichtbox img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  border: 3px solid var(--c-paper);
  box-shadow: 0 30px 80px rgb(var(--c-navy-deep-rgb) / .6);
  cursor: default;
}
.lichtbox figcaption {
  font-family: "Manrope",system-ui,sans-serif;
  font-size: 14px !important;
  line-height: 1.5;
  color: rgb(var(--c-cream-rgb) / .9);
  text-align: center;
  max-width: 56ch;
}
.lichtbox-zu {
  position: absolute;
  top: clamp(12px,2.5vw,26px);
  right: clamp(12px,2.5vw,26px);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope",sans-serif;
  font-size: 22px;
  line-height: 1;
  color: var(--c-cream);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  transition: background .25s,transform .25s;
}
.lichtbox-zu:hover {
  background: rgba(255,255,255,.26);
  transform: scale(1.06);
}
/* Steuerung der Lichtbox: Pfeile und Zaehler unter dem Bild */
.lichtbox-steuer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.lichtbox-pfeil {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope",sans-serif;
  font-size: 24px;
  line-height: 1;
  color: var(--c-cream);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .25s,transform .25s;
}
.lichtbox-pfeil:hover {
  background: rgba(255,255,255,.28);
  transform: scale(1.07);
}
.lichtbox-pfeil:active {
  transform: scale(.96);
}
.lichtbox-zaehler {
  font-family: "Manrope",sans-serif;
  font-size: 14px !important;
  letter-spacing: .12em;
  color: rgb(var(--c-cream-rgb) / .72);
  min-width: 52px;
  text-align: center;
}
.lichtbox img {
  touch-action: pan-y;
}
@media (max-width:720px) {
  .lichtbox-pfeil {
    width: 58px;
    height: 58px;
    font-size: 26px;
  }
  .lichtbox-steuer {
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lichtbox-pfeil {
    transition: none;
  }
}
body.lichtbox-offen {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .lichtbox,
  .lichtbox figure,
  .lichtbox-zu {
    transition: none;
  }
  .lichtbox figure {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ort-bilder figure {
    transition: none;
  }
  .ort-bilder figure:hover {
    transform: none;
  }
  .ob-mitte:hover {
    transform: translate(-50%,-50%);
  }
}
/* Ortsbeschreibung als eigener Text, nicht als Zitat */
.ort-zitat.ort-text {
  padding: 0;
  border-left: 0;
}
/* ===== Infokarten: weicher Aufstieg mit hellem Lichtschein ===== */
.cs-armed .coll-stat {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.985);
}
.cs-armed .coll-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(214,212,255,0) 30%, rgba(206,202,255,.8) 47%, rgba(196,190,252,.95) 50%, rgba(206,202,255,.8) 53%, rgba(214,212,255,0) 70%); /* helles Lavendel */
  opacity: 0;
  transform: translate3d(-120%, 0, 0);
}
.cs-armed.cs-in .coll-stat {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease calc(var(--i, 0) * 140ms), transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i, 0) * 140ms);
}
.cs-armed.cs-in .coll-stat::after {
  animation: csSheen 1.1s cubic-bezier(.4,0,.2,1) calc(var(--i, 0) * 140ms + 260ms) 1 both;
}
@keyframes csSheen{
  0%   { opacity: 0; transform: translate3d(-120%, 0, 0); }
  20%  { opacity: .9; }
  100% { opacity: 0; transform: translate3d(120%, 0, 0); }
}
/* die Glas-Unschaerfe blendet erst ein, wenn alle Karten stehen */
.cs-armed.cs-done .coll-stat {
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
}


/* ===== Kueste bei Sonnenaufgang (Seitenende) =====
   Das Bild ersetzt den Sonnenaufgang im Hintergrund: die Seite steht ganz im Lavendel, die Sonne
   kommt nur noch aus dem Bild. Randlos von Bildschirmkante zu Bildschirmkante, direkt vor der Fusszeile.
   Oben: ein langer Verlauf vom Lavendel der Seite in genau das Blau, mit dem der Bildhimmel beginnt
   (oberste Bildzeile: Querformat #8D92F3, Hochformat #818CF9), dann folgt das Bild ohne Maske.
   Unten geht der Dunstschleier des Bildes in die Farbe der Fusszeile ueber. */
.poster-wrap { background: var(--c-lavender); }
.poster-stars-svg { height: 100%; }
main:has(> .cl-shore:last-child) { padding-bottom: 0; }
.cl-shore {
  position: relative; z-index: 0;
  width: 100vw; margin: clamp(28px, 3vw, 56px) 0 0 calc(50% - 50vw);
  aspect-ratio: 3840 / 2560;
}
/* Der Verlauf beginnt erst unter dem letzten Absatz (sonst verliert der helle Fliesstext Kontrast);
   der Knopf steht mitten im Verlauf, schon im Himmel des Bildes. */
main:has(> .cl-shore) { --g: clamp(200px, 18vw, 320px); --top: 125 138 250; --m: clamp(28px, 3vw, 56px); }
main:has(> .cl-shore) .coll-cta-wrap { margin-top: calc(var(--g) * .5); }
.cl-shore picture, .cl-shore img { display: block; width: 100%; height: 100%; }
.cl-shore::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16%; pointer-events: none;
  background: linear-gradient(180deg, rgba(196,198,232,0) 0%, rgba(196,198,232,.35) 40%, rgba(196,198,232,.8) 75%, #C4C6E8 100%);
}
.coll-cta-wrap { position: relative; z-index: 2; }
@media (orientation: portrait) {
  main:has(> .cl-shore) { --g: clamp(160px, 40vw, 320px); --top: 113 127 251; }
  .cl-shore { aspect-ratio: 2160 / 3840; }
  .cl-shore::after { height: 9%; }
}

/* Knopf hebt sich vom Himmel ab: Nachtblau mit cremefarbener Schrift, Funkeln bleibt;
   beim Ueberfahren ein warmer, orangefarbener Schein wie die Sonne im Bild. */
.coll-cta-wrap .sc-glass-cta {
  color: var(--c-cream);
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 60%), var(--c-navy);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 34px rgb(var(--c-navy-rgb) / .38), inset 0 1px 1px rgba(255,255,255,.35);
}
.coll-cta-wrap .sc-glass-cta:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 60%), #13246A;
  border-color: rgba(253,168,132,.85);
  box-shadow: 0 18px 44px rgb(var(--c-navy-rgb) / .42), 0 0 26px rgba(253,150,100,.55), inset 0 1px 1px rgba(255,255,255,.4);
}
.coll-cta-wrap .sc-glass-cta:focus-visible { outline: 2px solid #FDA884; outline-offset: 3px; }

/* Der Verlauf vom Lavendel der Seite in den Bildhimmel beginnt schon bei "Founding Membership"
   und laeuft ueber Liste, Absatz und Knopf bis an die Oberkante des Bildes (randlos, ohne Stufe). */
.cl-blend { position: relative; isolation: isolate; }
.cl-blend::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -48px; bottom: calc(-1 * var(--m) - 1px); left: 50%; width: 100vw; translate: -50% 0;
  background: linear-gradient(180deg,
    rgb(var(--top) / 0) 0%, rgb(var(--top) / .02) 10%, rgb(var(--top) / .05) 20%, rgb(var(--top) / .09) 30%,
    rgb(var(--top) / .15) 40%, rgb(var(--top) / .23) 50%, rgb(var(--top) / .34) 60%, rgb(var(--top) / .48) 70%,
    rgb(var(--top) / .65) 80%, rgb(var(--top) / .83) 90%, rgb(var(--top) / .96) 97%, rgb(var(--top)) 100%);
}
.cl-shore { margin-top: var(--m); }
/* Knopf: helleres Blau */
.coll-cta-wrap .sc-glass-cta {
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 40%, rgba(255,255,255,0) 60%), #3240B6;
  box-shadow: 0 14px 34px rgba(30,40,130,.35), inset 0 1px 1px rgba(255,255,255,.4);
}
.coll-cta-wrap .sc-glass-cta:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 60%), #3D4CCB;
}
/* Naht ohne Linie: das Bild steht auf genau dem Blau, in dem der Verlauf endet, und blendet
   seine obersten Zeilen weich darueber ein (kleine Farbschwankungen der Bildkante verschwinden).
   Der Knopf samt Schatten liegt ueber dem Bild, damit der Schatten nicht an der Bildkante abreisst. */
.cl-shore { background: rgb(var(--top)); }
.cl-shore img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 clamp(40px, 5vw, 90px));
  mask-image: linear-gradient(180deg, transparent 0, #000 clamp(40px, 5vw, 90px));
}
.cl-blend { z-index: 1; }
.coll-cta-wrap .sc-glass-cta { box-shadow: 0 10px 24px rgba(30,40,130,.28), inset 0 1px 1px rgba(255,255,255,.4); }
/* Unterkante: auf dem iPhone blitzte zwischen Bild und Fusszeile ein Pixel des blauen Grundes durch
   (Rundung der Bildhoehe). Unten ist der Grund jetzt fusszeilenfarben, der Schleier greift 2 px
   ueber die Kante, und die Fusszeile rueckt 1 px darunter. */
.cl-shore { background: linear-gradient(180deg, rgb(var(--top)) 0 50%, #C4C6E8 50% 100%); }
.cl-shore::after { bottom: -2px; }
main:has(> .cl-shore:last-child) + #sc-fallback-nav + [data-site-footer] .sc-footer,
body:has(.cl-shore) .sc-footer { margin-top: -1px; }

/* Auftritt des Kuestenbildes: Daemmerung -> Morgenlicht (nur Helligkeit und Farbe). */
.cl-shore { overflow: hidden; }
/* ohne Bewegung: kein Zoom, kein Verschieben; das Bild steht von Anfang an fest an beiden
   Seitenraendern und hellt sich nur aus der Daemmerung auf */
.cl-shore.cl-armed img { filter: brightness(.72) saturate(.65) hue-rotate(-8deg); }
.cl-shore.cl-in img {
  filter: none;
  transition: filter 2.6s cubic-bezier(.3,.6,.3,1);
}

/* ===== Der Ort als Polaroids =====
   Links und rechts je ein Wide-Polaroid (Rahmen 4,2 x 3,3, Bild 99 x 62 mm), in der Mitte ein
   Standard-Polaroid (Rahmen 3,5 x 4,2, quadratisches Bild). Das Fotopapier ist lavendel bis violett
   wie die Seite, mit dem breiten Rand unten. Leicht gedreht und ueberlappend, wie hingelegt. */
.ort .ort-bilder {
  aspect-ratio: auto; max-width: 820px; container-type: inline-size;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 0 10px;
}
.ort .ort-bilder figure {
  position: relative; left: auto; right: auto; top: auto; bottom: auto; flex: none;
  aspect-ratio: auto; overflow: visible;
  border: 0; border-radius: 3px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    linear-gradient(165deg, #ECE9FC 0%, #D9D3F7 38%, #C6BCF0 72%, #B6A6E6 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(120,90,170,.18) inset,
              0 14px 30px rgb(var(--c-navy-rgb) / .22), 0 3px 8px rgb(var(--c-navy-rgb) / .14);
  transform: rotate(var(--r, 0deg));
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.ort .ort-bilder img {
  width: 100%; height: auto; border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgba(40,30,90,.25), 0 0 0 1px rgba(80,60,140,.18);
  filter: saturate(.95) contrast(1.02);
}
/* Wide: Seitenrand 3,6 %, unten 18 % */
.ort .ob-links, .ort .ob-rechts {
  --w: 35cqw; width: var(--w); padding: calc(var(--w) * .036) calc(var(--w) * .036) calc(var(--w) * .17); z-index: 1;
}
.ort .ob-links img, .ort .ob-rechts img { aspect-ratio: 99 / 62; object-fit: cover; }
.ort .ob-links  { --r: -4deg; order: 1; margin-right: -4cqw; margin-top: 7cqw; }
.ort .ob-rechts { --r: 3.5deg; order: 3; margin-left: -4cqw; margin-top: 11cqw; }
/* Standard: Seitenrand 5,7 %, unten 26 % */
.ort .ob-mitte {
  --w: 33cqw; width: var(--w); padding: calc(var(--w) * .057) calc(var(--w) * .057) calc(var(--w) * .257);
  order: 2; z-index: 2; --r: -.8deg;
}
.ort .ob-mitte img { aspect-ratio: 1 / 1; object-fit: cover; }
.ort .ort-bilder figure:hover, .ort .ort-bilder figure:focus-visible {
  transform: rotate(0deg) translateY(-6px) scale(1.03); z-index: 4;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 22px 46px rgb(var(--c-navy-rgb) / .3), 0 4px 10px rgb(var(--c-navy-rgb) / .16);
}
.ort .ort-bilder figure:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 4px; }
@media (max-width: 720px) {
  /* Handy: das Standard-Polaroid oben in der Mitte, die beiden Wide darunter, leicht ueberlappend */
  .ort .ort-bilder { flex-wrap: wrap; max-width: 380px; padding-top: 6px; }
  .ort .ob-mitte  { order: 1; --w: 60cqw; margin: 0 20cqw -10cqw; }
  .ort .ob-links  { order: 2; --w: 54cqw; margin: 0 -8cqw 0 0; }
  .ort .ob-rechts { order: 3; --w: 54cqw; margin: 8cqw 0 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ort .ort-bilder figure, .ort .ort-bilder figure:hover { transition: none; transform: rotate(var(--r, 0deg)); }
}

/* ===== Founding Membership: die fuenf Leistungen =====
   Fuenf Karten an einem Lichtfaden. Jede Karte: Abzeichen mit gezeichnetem Symbol, kleine
   Kennzeile (Nummer und Stichwort), darunter die Leistung. Auftritt nacheinander (mb-js):
   Faden laeuft nach unten, Abzeichen springt auf, Symbol zeichnet sich, Text gleitet herein.
   Danach laeuft ein Glanz einmal ueber jede Karte, das Siegel der Auszeichnung leuchtet auf. */
.mb-list {
  --badge: 52px; --gap: 14px;
  position: relative; list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; gap: var(--gap); counter-reset: none;
}
/* Lichtfaden durch die Mitte der Abzeichen */
.mb-list::before {
  content: ""; position: absolute; left: calc(18px + var(--badge) / 2 - 1px); top: 30px; bottom: 30px; width: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--c-coral-rgb) / .0), rgb(var(--c-coral-rgb) / .55) 12%, rgb(var(--c-violet-rgb) / .45) 88%, rgb(var(--c-violet-rgb) / 0));
  transform-origin: 50% 0;
}
.mb-item {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: var(--badge) 1fr; align-items: center; gap: 18px;
  padding: 16px 22px 16px 18px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(240,238,255,.42) 55%, rgba(226,222,252,.34) 100%);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgb(var(--c-navy-rgb) / .10), inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.mb-item:hover { transform: translateY(-3px); border-color: rgb(var(--c-coral-rgb) / .45);
  box-shadow: 0 16px 34px rgb(var(--c-navy-rgb) / .16), 0 0 0 4px rgb(var(--c-coral-rgb) / .08), inset 0 1px 0 #fff; }
.mb-badge {
  position: relative; width: var(--badge); height: var(--badge); border-radius: 50%;
  display: grid; place-items: center; color: #FBF3DE;
  background: radial-gradient(circle at 32% 28%, #5562D6 0%, #3240B6 45%, #1B2A86 100%);
  box-shadow: 0 6px 16px rgba(30,40,130,.32), inset 0 1px 1px rgba(255,255,255,.45), 0 0 0 4px rgba(255,255,255,.55);
}
.mb-badge svg { width: 28px; height: 28px; overflow: visible; }
.mb-badge::after {                                     /* kleine Koralle-Raute am Faden */
  content: ""; position: absolute; right: -3px; top: -1px; width: 9px; height: 9px; rotate: 45deg;
  background: var(--c-coral); box-shadow: 0 0 0 2px rgba(255,255,255,.85);
}
.mb-body { display: grid; gap: 3px; min-width: 0; }
.mb-tag {
  font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--c-rust, #B92C08);
}
.mb-text { font-size: 17.5px; line-height: 1.45; color: #13225C; }
/* das Siegel (5.) etwas waermer */
.mb-item:nth-of-type(5) .mb-badge { background: radial-gradient(circle at 32% 28%, #FFB48C 0%, #F0794A 45%, #C2481F 100%); box-shadow: 0 6px 16px rgba(190,70,30,.32), inset 0 1px 1px rgba(255,255,255,.5), 0 0 0 4px rgba(255,255,255,.55); }
.mb-item:nth-of-type(5) .mb-badge::after { background: #3240B6; }

/* ---------- Auftritt ---------- */
.mb-armed::before { transform: scaleY(0); }
.mb-armed .mb-item { opacity: 0; transform: translate3d(-18px, 14px, 0) scale(.985); }
.mb-armed .mb-badge { transform: scale(.4) rotate(-25deg); opacity: 0; }
.mb-armed .mb-badge svg * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mb-armed .mb-body > * { opacity: 0; transform: translateX(10px); }

.mb-in::before { transform: scaleY(1); transition: transform 1.6s cubic-bezier(.45,0,.2,1) .1s; }
.mb-in .mb-item {
  opacity: 1; transform: none;
  transition: opacity .6s ease calc(var(--d, var(--i) * .26s)), transform .8s cubic-bezier(.16,1,.3,1) calc(var(--d, var(--i) * .26s));
}
.mb-in .mb-badge {
  opacity: 1; transform: none;
  transition: opacity .3s ease calc(var(--d, var(--i) * .26s) + .12s), transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--d, var(--i) * .26s) + .12s);
}
.mb-in .mb-badge svg * { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1) calc(var(--d, var(--i) * .26s) + .35s); }
.mb-in .mb-tag  { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--d, var(--i) * .26s) + .3s), transform .6s cubic-bezier(.16,1,.3,1) calc(var(--d, var(--i) * .26s) + .3s); }
.mb-in .mb-text { opacity: 1; transform: none; transition: opacity .6s ease calc(var(--d, var(--i) * .26s) + .42s), transform .7s cubic-bezier(.16,1,.3,1) calc(var(--d, var(--i) * .26s) + .42s); }
/* nach dem Auftritt: Glanz laeuft einmal ueber jede Karte, Siegel pulsiert einmal */
.mb-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(206,202,255,.8) 47%, rgba(190,184,250,.7) 52%, transparent 70%); /* helles Lavendel */
  transform: translateX(-120%);
}
.mb-done .mb-item::after { animation: mbSheen 1.3s cubic-bezier(.4,0,.2,1) calc(var(--i) * .14s) 1 both; }
@keyframes mbSheen { 0% { opacity: 0; transform: translateX(-120%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }
.mb-done .mb-item:nth-of-type(5) .mb-badge { animation: mbSeal 1.6s ease-out .7s 1 both; }
@keyframes mbSeal {
  0% { box-shadow: 0 6px 16px rgba(190,70,30,.32), 0 0 0 4px rgba(255,255,255,.55), 0 0 0 4px rgba(255,140,90,.6); }
  100% { box-shadow: 0 6px 16px rgba(190,70,30,.32), 0 0 0 4px rgba(255,255,255,.55), 0 0 0 22px rgba(255,140,90,0); }
}
@media (max-width: 720px) {
  .mb-list { --badge: 44px; --gap: 12px; }
  .mb-item { gap: 14px; padding: 14px 16px 14px 14px; border-radius: 16px; }
  .mb-list::before { left: calc(14px + var(--badge) / 2 - 1px); }
  .mb-badge svg { width: 24px; height: 24px; }
  .mb-text { font-size: 16.5px; }
}
.panel .mb-item::before { content: none; display: none; }
.mb-badge svg { width: 32px; height: 32px; stroke-width: 1.65; }
@media (max-width: 720px) { .mb-badge svg { width: 27px; height: 27px; } }

/* ===== Enso: die fuenf Leistungen auf dem Pinselkreis ===== */
.mb-list { position: relative; }
.mb-list::before { display: none; }
.enso { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.enso__svg { position: absolute; overflow: visible; }
.enso__core { position: absolute; translate: -50% -50%; text-align: center; line-height: 1.05; font-family: "EB Garamond", serif; }
.enso__core span { display: block; font: 600 13px/1 "Manrope", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #4C4FA6; }
.enso__core em { display: block; font-size: 34px; font-style: italic; color: #B92C08; margin-top: 6px; }

/* Sonnenpunkt wie auf der Tradition-Seite am Tag: oranger Kern, heller Ring, Schein */
.mb-sun {
  --dot: 22px; position: relative; display: block; width: var(--dot); height: var(--dot); border-radius: 50%;
  background: radial-gradient(circle, #FFF4DC 0 10%, #FFB463 22%, #EE7A2C 38%, #FBF6EE 41% 57%, transparent 60%);
  box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 14px rgba(255,160,80,.45);
}
.mb-sun::before, .mb-sun::after { content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0; }
.mb-sun::before {
  width: calc(var(--dot) * 3.3); height: calc(var(--dot) * 3.3); margin: calc(var(--dot) * -1.65) 0 0 calc(var(--dot) * -1.65);
  background: radial-gradient(circle, rgba(255,246,222,1) 0%, rgba(255,206,128,.95) 12%, rgba(255,150,72,.7) 26%, rgba(236,102,48,.34) 44%, transparent 68%);
}
.mb-sun::after {
  width: calc(var(--dot) * 3.9); height: calc(var(--dot) * 3.9); margin: calc(var(--dot) * -1.95) 0 0 calc(var(--dot) * -1.95);
  background: repeating-conic-gradient(from 8deg, rgba(255,160,90,.6) 0deg, rgba(255,160,90,0) 8deg, rgba(255,160,90,0) 22deg, rgba(255,160,90,.6) 30deg);
  filter: blur(1.6px);
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
  mask: radial-gradient(circle, transparent 24%, #000 34%, rgba(0,0,0,.55) 48%, transparent 66%);
}
.mb-item:nth-of-type(5) .mb-sun, .enso__pt:last-of-type .mb-sun { --dot: 30px; }
.mb-done .mb-sun, .mb-static .mb-sun { animation: mbBreath 7s ease-in-out infinite; }
.mb-item:nth-of-type(2n) .mb-sun { animation-delay: -2.3s; }
.mb-item:nth-of-type(3n) .mb-sun { animation-delay: -4.6s; }
@keyframes mbBreath { 0%,100% { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 10px rgba(255,160,80,.32); } 50% { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 22px rgba(255,160,80,.62); } }

/* Desktop: Sonnen auf dem Kreis, Text aussen daneben */
@media (min-width: 721px) {
  .mb-list { display: block; height: var(--enso-h, 640px); padding: 0; margin: 14px 0 6px; }
  .enso__pt { display: none; }
  .mb-item {
    position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; padding: 0; display: block;
    background: none; border: 0; box-shadow: none; overflow: visible; z-index: 2;
  }
  .mb-item:hover { transform: none; box-shadow: none; }
  .mb-item::after { display: none; }
  .mb-item > .mb-sun { position: absolute; left: calc(var(--dot) / -2); top: calc(var(--dot) / -2); }
  .mb-body { position: absolute; top: 0; width: var(--tw, 200px); transform: translateY(-50%); }
  .mb-item[data-side="l"] .mb-body { right: var(--off, 60px); text-align: right; }
  .mb-item[data-side="r"] .mb-body { left: var(--off, 60px); text-align: left; }
  .mb-item[data-side="b"] .mb-body { left: 50%; top: 34px; width: 360px; transform: translateX(-50%); text-align: center; }
  .mb-text { font-size: 15.5px; line-height: 1.42; }
}
/* Handy: Kreis mit Sonnen und Nummern oben, Karten darunter */
@media (max-width: 720px) {
  .mb-list { padding-top: calc(var(--enso-h, 360px) + 4px); }
  .enso__pt { position: absolute; translate: -50% -50%; }
  .enso__pt b { position: absolute; font: 700 12px/1 "Manrope", sans-serif; color: #B92C08; top: 50%; translate: 0 -50%; }
  .enso__pt[data-side="l"] b { right: calc(100% + 8px); }
  .enso__pt[data-side="r"] b { left: calc(100% + 8px); }
  .enso__pt[data-side="b"] b { top: calc(100% + 10px); left: 50%; translate: -50% 0; }
  .mb-item { position: relative; grid-template-columns: 30px 1fr; }
  .mb-item > .mb-sun { justify-self: center; }
  .enso__core span { font-size: 10px; } .enso__core em { font-size: 24px; }
}

/* ---------- Zeichnen und Aufgehen ---------- */
.mb-armed .enso__m { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mb-armed .enso__core { opacity: 0; transform: scale(.9); }
.mb-armed .mb-sun, .mb-armed .enso__pt { opacity: 0; transform: scale(.3); }
.mb-armed .enso__pt b { opacity: 0; }
.mb-in .enso__m { stroke-dashoffset: 0; transition: stroke-dashoffset 3s cubic-bezier(.42,.05,.4,1) .1s; }
.mb-in .enso__core { opacity: 1; transform: none; transition: opacity 1.2s ease 3.3s, transform 1.4s cubic-bezier(.16,1,.3,1) 3.3s; }
.mb-in .mb-sun, .mb-in .enso__pt { opacity: 1; transform: none; transition: opacity .3s ease var(--d), transform .7s cubic-bezier(.34,1.56,.64,1) var(--d); }
.mb-in .enso__pt b { opacity: 1; transition: opacity .5s ease calc(var(--d) + .3s); }
.mb-in .mb-sun::before { animation: tlSun 2.2s cubic-bezier(.16,1,.3,1) var(--d) 1 both; }
.mb-in .mb-sun::after  { animation: tlRays 2.4s cubic-bezier(.16,1,.3,1) calc(var(--d) + .03s) 1 both; }
.mb-in .enso__pt .mb-sun, .mb-in .mb-item .mb-sun { transition-delay: var(--d); }
@keyframes tlSun { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: .95; transform: scale(1.05); } 100% { opacity: .4; transform: scale(.72); } }
@keyframes tlRays { 0% { opacity: 0; transform: scale(.55) rotate(0deg); } 35% { opacity: .9; transform: scale(1) rotate(5deg); } 100% { opacity: 0; transform: scale(1.08) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .enso *, .mb-item, .mb-sun, .mb-sun::before, .mb-sun::after { animation: none !important; transition: none !important; } }

/* ===== Stempel "Founding Member MMXXVII" =====
   Liegt unten rechts, greift leicht ueber den Text von Punkt 5. Auftritt: der Stempel schwebt gross
   und schraeg ueber dem Papier, saust herunter, schlaegt auf (kurzes Nachfedern, die Liste bebt),
   ein Tintenkranz spritzt auf, Staub stiebt, dann liegt er leicht schief und satt eingefaerbt. */
.fm-stamp {
  position: absolute; z-index: 3; aspect-ratio: 420 / 455; pointer-events: none;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
.fm-stamp img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.fm-stamp__ink, .fm-stamp__dust { position: absolute; left: 50%; top: 52%; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; }
.fm-stamp__ink { width: 120%; aspect-ratio: 1; border: 3px dashed rgba(140,110,200,.55); }
.fm-stamp__dust { width: 150%; aspect-ratio: 1;
  background: radial-gradient(circle, transparent 46%, rgba(160,130,215,.35) 48%, transparent 52%),
              radial-gradient(2px 2px at 12% 40%, #9C86D6 99%, transparent), radial-gradient(3px 3px at 86% 30%, #9C86D6 99%, transparent),
              radial-gradient(2px 2px at 78% 82%, #9C86D6 99%, transparent), radial-gradient(3px 3px at 20% 78%, #9C86D6 99%, transparent),
              radial-gradient(2px 2px at 50% 6%, #9C86D6 99%, transparent), radial-gradient(2px 2px at 95% 60%, #9C86D6 99%, transparent);
}
.mb-item[data-side="b"] .mb-body { top: 74px; }
.mb-armed .fm-stamp { opacity: 0; }
.mb-stamp .fm-stamp { animation: fmStamp 1.15s cubic-bezier(.55,0,.35,1) both; }
.mb-stamp .fm-stamp img { animation: fmInk 1.6s ease-out both; }
.mb-stamp .fm-stamp__ink { animation: fmRing .9s cubic-bezier(.2,.7,.3,1) .62s both; }
.mb-stamp .fm-stamp__dust { animation: fmDust 1.1s cubic-bezier(.2,.7,.3,1) .62s both; }
.mb-stamp { animation: fmShake .38s ease-out .62s both; }
@keyframes fmStamp {
  0%   { opacity: 0; transform: translate(40px,-90px) scale(2.3) rotate(-9deg); filter: blur(5px) drop-shadow(0 40px 30px rgba(10,26,79,.35)); }
  35%  { opacity: 1; transform: translate(26px,-60px) scale(1.9) rotate(-6deg); filter: blur(1.5px) drop-shadow(0 34px 26px rgba(10,26,79,.3)); }
  54%  { transform: translate(0,0) scale(.93) rotate(.8deg); filter: blur(0) drop-shadow(0 2px 2px rgba(10,26,79,.25)); }
  66%  { transform: scale(1.04) rotate(-.6deg); }
  80%  { transform: scale(.99) rotate(.2deg); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 1px 0 rgba(255,255,255,.35)); }
}
@keyframes fmInk { 0%,50% { filter: saturate(.5) brightness(1.25); opacity: .55; } 62% { filter: saturate(1.4) brightness(.9); opacity: 1; } 100% { filter: none; opacity: 1; } }
@keyframes fmRing { 0% { opacity: .8; transform: scale(.55) rotate(0); } 100% { opacity: 0; transform: scale(1.25) rotate(25deg); } }
@keyframes fmDust { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes fmShake { 0%,100% { transform: none; } 25% { transform: translate(0,3px); } 50% { transform: translate(-2px,-1px); } 75% { transform: translate(1px,1px); } }

@media (prefers-reduced-motion: reduce) { .fm-stamp, .fm-stamp *, .mb-stamp { animation: none !important; opacity: 1; } }
/* Handy: Karte 5 bekommt unten Platz fuer den Stempel; er greift nur ans Ende der letzten Zeile */
@media (max-width: 720px) { .mb-item:nth-of-type(5) { padding-bottom: 38px; } }

/* ===== Hervorhebung in Rosa-Lavendel =====
   Der Schein der Sonnenpunkte (Hof, Atmen, Aufgehen) und der Schein des Knopfes leuchten nicht
   mehr weiss und orange, sondern in einem hellen Rosa-Lavendel. Der Kern der Sonne bleibt warm. */
:root { --pl: 226 178 240; }
.mb-sun { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 14px rgb(var(--pl) / .6); }
@keyframes mbBreath { 0%,100% { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 10px rgb(var(--pl) / .45); } 50% { box-shadow: inset 0 0 0 2px #C3C5E8, 0 0 24px rgb(var(--pl) / .85); } }
.mb-sun::before {
  background: radial-gradient(circle, rgba(250,240,255,1) 0%, rgba(236,206,248,.95) 12%, rgb(var(--pl) / .72) 26%, rgba(196,160,236,.34) 44%, transparent 68%);
}
.mb-sun::after {
  background: repeating-conic-gradient(from 8deg, rgb(var(--pl) / .65) 0deg, rgb(var(--pl) / 0) 8deg, rgb(var(--pl) / 0) 22deg, rgb(var(--pl) / .65) 30deg);
}
.mb-item::after {
  background: linear-gradient(105deg, transparent 30%, rgba(236,206,248,.8) 47%, rgb(var(--pl) / .7) 52%, transparent 70%);
}
.coll-cta-wrap .sc-glass-cta {
  border-color: rgb(var(--pl) / .7);
  box-shadow: 0 10px 24px rgba(30,40,130,.28), 0 0 0 3px rgb(var(--pl) / .28), 0 0 30px rgb(var(--pl) / .75), inset 0 1px 1px rgba(255,255,255,.4);
}
.coll-cta-wrap .sc-glass-cta:hover {
  border-color: rgb(var(--pl) / .95);
  box-shadow: 0 14px 30px rgba(30,40,130,.32), 0 0 34px rgb(var(--pl) / .8), inset 0 1px 1px rgba(255,255,255,.45);
}
.coll-cta-wrap .sc-glass-cta:focus-visible { outline-color: rgb(var(--pl)); }

/* ===== Freigestellte Kueste (Okt. 2026) =====
   Wie auf der Zeitgeist-Seite: Der Papiergrund um die Pinselstriche ist ausgeschnitten, die
   Szene liegt direkt auf dem Himmel der Seite. Kein eigener Bildgrund mehr; oben blendet das
   Bild weiter weich ein, unten fuehrt der Schleier in die Fusszeile. */
.cl-shore { background: none; }