/* Sensus Communis | colloquium-night.css
   Founding Colloquium in der Nacht: oben die Nachtszene der Startseite (Himmel mit funkelnden
   Sternen, Mond, Nachtmeer, Enso und Name im Blau der Nacht), ohne Scroll-Animation. Darunter
   setzt sich das Meer gespiegelt fort und endet in einem gewoelbten Horizont mit feiner Linie;
   unter dem Bogen liegt schon der Nachtgrund der Seite. Die ganze Seite steht im Nachtblau,
   Schrift hell.
   Geladen von: colloquium, colloquium-en (als letztes Stylesheet). */

/* ---------- Nachtgrund (fest, mit den Sternen der Seite) ---------- */
.poster-wrap { background: linear-gradient(180deg, #091B49 0%, #0B1E52 55%, #0F235C 100%) !important; }
.poster-stars-svg { height: 100% !important; }

/* ---------- Kopf: die Nachtszene ---------- */
.cn-hero {
  --nb: 140,158,245;
  position: relative; z-index: 1; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 520px;
  background: #091B49; color: #F5F1E8;
}
.cn-frame {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: max(100vw, calc(100vh * 3840 / 1949)); aspect-ratio: 3840 / 1949;
}
.cn-hero .cn-frame { width: max(100vw, calc(max(100svh, 520px) * 3840 / 1949)); }
.cn-img { position: absolute; inset: 0; background: url(../img/home-night-h-2560.webp) 0 0 / 100% 100% no-repeat; }
/* Sterne im Kopfbild wie im Aquarell-Hintergrund (Nov. 2026): runde, weiche Punkte in derselben
   Groessenmischung, gemalt als eigene Ebene (img/cn-stars-h/-v.webp); nur im Himmel, nicht im Spiegel.
   Darueber leuchten einige der groesseren Sterne sanft auf (nur Deckkraft und Groesse). */
.cn-hero .cn-img { background-image: url(../img/cn-stars-h.webp), url(../img/home-night-h-2560.webp); background-size: 100% 100%, 100% 100%; }
.cn-img .nstars { position: absolute; inset: 0; }
.cn-img .nstars i {
  position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, rgb(255 255 255 / .85) 14%, rgb(214 224 255 / .35) 34%, rgb(214 224 255 / 0) 68%);
  opacity: 0; will-change: opacity, transform; animation: cnTw var(--td,6s) ease-in-out var(--dl,0s) infinite;
}
.cn-img .nstars--v { display: none; }
@keyframes cnTw { 0%,100% { opacity: 0; transform: scale(.55); } 45% { opacity: 0; } 62% { opacity: .95; transform: scale(1); } 80% { opacity: 0; transform: scale(.7); } }

.cn-moon {
  position: absolute; left: var(--ml, 50%); top: var(--mt, calc(50px + 8vh)); width: var(--mw, clamp(38px, 7vmin, 70px));
  aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 44% 42%, #FBF8EE 0, #EFE9DA 78%, #DCD4BC 100%);
  box-shadow: 0 0 40px 14px rgba(223,224,242,.28), 0 0 120px 40px rgba(195,197,232,.14);
}
.cn-moon::before, .cn-moon::after { content: ""; position: absolute; border-radius: 50%; background: #C9C2AC; opacity: .32; }
.cn-moon::before { left: 28%; top: 30%; width: 17%; height: 17%; }
.cn-moon::after { left: 58%; top: 58%; width: 11%; height: 11%; }

.cn-mark {
  position: absolute; left: 50%; z-index: 3;
  top: calc(50px + 8vh + clamp(19px, 3.5vmin, 35px) + 4vh); translate: -50% 0;
  width: min(30vmin, 300px);
  display: flex; flex-direction: column; align-items: center; gap: min(3.4vmin, 26px);
}
.cn-enso {
  width: 100%; aspect-ratio: 1; background: rgb(var(--nb));
  -webkit-mask: url(../img/intro-enso-weiss.webp) center / 100% 100% no-repeat;
          mask: url(../img/intro-enso-weiss.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 18px rgba(140,158,245,.25));
}
.cn-name {
  margin: 0; text-align: center; white-space: nowrap; color: rgb(var(--nb));
  font-family: "EB Garamond", serif; font-weight: 500; text-transform: uppercase;
  font-size: clamp(14px, 1.7vw, 21px); letter-spacing: .3em; padding-left: .3em; line-height: 1.25;
}
.cn-name span { display: block; margin-top: .55em; font-size: .72em; letter-spacing: .5em; padding-left: .5em; opacity: .85; }

.cn-info {
  position: absolute; left: 0; right: 0; bottom: max(64px, 9vh); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 0 22px;
}
/* die Mondspiegelung laeuft durch die Infos: weicher Nachtschleier dahinter */
.cn-info::before {
  content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; pointer-events: none;
  width: min(680px, 120vw); height: calc(100% + 90px);
  background: radial-gradient(closest-side, rgba(7,18,58,.82), rgba(7,18,58,.55) 55%, rgba(7,18,58,0));
}
.cn-claim {
  margin: 0; max-width: 30ch; font-family: "EB Garamond", serif; font-style: italic;
  font-size: clamp(19px, 2.3vw, 25px); line-height: 1.3; color: #F5F1E8;
  text-shadow: 0 1px 10px rgba(7,18,58,.9);
}
.cn-year { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: rgba(245,241,232,.8); }
.cn-scroll { font-size: 8px; letter-spacing: .36em; text-transform: uppercase; font-weight: 600; color: rgba(245,241,232,.5); }

/* Hochformat: Bild fuer Hochformat, Mond oben, Enso mittig ueber dem Horizont */
@media (orientation: portrait) {
  .cn-frame, .cn-hero .cn-frame { width: max(100vw, calc(max(100svh, 520px) * 1450 / 2383)); aspect-ratio: 1450 / 2383; }
  .cn-img { background-image: url(../img/home-night-v.webp); }
  .cn-hero .cn-img { background-image: url(../img/cn-stars-v.webp), url(../img/home-night-v.webp); }
  .cn-img .nstars--h { display: none; }
  .cn-img .nstars--v { display: block; }
  .cn-hero { --mt: 16.8%; --mw: clamp(34px, 11vmin, 58px); }
  .cn-mark { top: 38%; translate: -50% -50%; width: min(34vmin, 300px); }
  .cn-info { bottom: max(56px, 8vh); }
}
/* Handy quer: wenig Hoehe, Mond neben dem Enso */
@media (orientation: landscape) and (max-height: 520px) {
  .cn-hero { --ml: calc(50% + 11vmin + 80px); --mt: 34%; --mw: 30px; min-height: 0; }
  .cn-hero .cn-frame { width: max(100vw, calc(100svh * 3840 / 1949)); }
  .cn-mark { top: 36%; translate: -50% -50%; width: min(22vmin, 150px); gap: 7px; }
  .cn-info { bottom: max(10px, 3svh); gap: 6px; }
  .cn-claim { font-size: 16px; }
  .cn-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cn-img .nstars i { animation: none; } }

/* ---------- Uebergang: das Meer setzt sich gespiegelt fort, gewoelbter Horizont ---------- */
.cn-tail {
  --ah: 115px; position: relative; z-index: 2; pointer-events: none; overflow: hidden;
  height: 26vh; height: 26svh; min-height: 170px; margin-top: -1px; margin-bottom: calc(-1 * var(--ah));
  -webkit-mask: linear-gradient(#000,#000) top / 100% calc(100% - var(--ah) + 1px) no-repeat, url(../img/intro-arch-mask.svg) bottom / 100% var(--ah) no-repeat;
          mask: linear-gradient(#000,#000) top / 100% calc(100% - var(--ah) + 1px) no-repeat, url(../img/intro-arch-mask.svg) bottom / 100% var(--ah) no-repeat;
}
.cn-mirror { position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; transform: scaleY(-1); }
.cn-mirror .cn-frame { width: max(100vw, calc(max(100svh, 520px) * 3840 / 1949)); }
.cn-arch { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--ah); display: block; z-index: 1; }
@media (max-width: 720px) { .cn-tail { --ah: 81px; } }
@media (orientation: landscape) and (max-height: 520px) { .cn-mirror { min-height: 0; } .cn-mirror .cn-frame { width: max(100vw, calc(100svh * 3840 / 1949)); } }

/* der Inhalt beginnt unter dem Bogen */
.cn-tail + main { padding-top: 112px; }
@media (max-width: 720px) { .cn-tail + main { padding-top: 96px; } }
.cn-tail + main > .panel:first-child { margin-top: 0; }

/* ---------- Seite in Nachtfarben ---------- */
main .panel h2, main .panel h3.q-h, .ort-titel, .rhythm-h, .coll-stat span { color: #F5F1E8 !important; text-shadow: none !important; }
main .panel p, .mb-text, .ort-adresse, .ort-kicker, .ort-zitat p, .benefit-close { color: rgba(245,241,232,.86) !important; text-shadow: none !important; }
main .panel p.muted { color: rgba(245,241,232,.7) !important; }
main .panel em, .q-h em, .rhythm-h em, .ort-titel em { color: #FFB4A7 !important; }
.page-label, .q-label, .rhythm-label, .mb-tag, .coll-stat small, .ort-kicker { color: #FFB4A7 !important; }
.panel .hero-spheres { color: #B9C0FF !important; }
.panel a { color: #FFB4A7; border-bottom-color: rgba(255,180,167,.4); }
main b { color: inherit; }

/* Glas: dunkel statt milchig */
.coll-stat.sc-glass-light {
  background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.03) 100%) !important;
  border-color: rgba(204,206,242,.24) !important;
  box-shadow: 0 14px 34px rgba(3,8,30,.38), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.mb-item {
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(204,206,242,.06) 60%, rgba(204,206,242,.04) 100%);
  border-color: rgba(204,206,242,.22);
  box-shadow: 0 12px 28px rgba(3,8,30,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.mb-item:hover { box-shadow: 0 16px 34px rgba(3,8,30,.45), 0 0 0 4px rgb(var(--c-coral-rgb) / .10), inset 0 1px 0 rgba(255,255,255,.16); }
.enso__core span { color: #B9C0FF !important; }
.enso__core em { color: #FFB4A7 !important; }
@media (max-width: 720px) { .enso__pt b { color: #FFB4A7 !important; } }
/* Stempel: auf dem Nachtgrund hell statt multipliziert */
.fm-stamp img { mix-blend-mode: normal; filter: brightness(1.15); }

/* der helle Verlauf in den Bildhimmel entfaellt: alles bleibt Nachtblau */
.cl-blend::before { display: none !important; }

/* Fusszeile schiebt sich weich aus dem Nachtblau */
.sc-footer::before { background: linear-gradient(180deg, rgba(196,198,232,0) 0%, rgba(196,198,232,.35) 55%, #C4C6E8 100%) !important; }

/* Spiegelung im Hochformat: dasselbe Hochformatbild wie oben (muss nach der Querformat-Regel stehen) */
@media (orientation: portrait) {
  .cn-mirror .cn-frame { width: max(100vw, calc(max(100svh, 520px) * 1450 / 2383)); aspect-ratio: 1450 / 2383; }
}
/* Handy quer: kurzer Uebergang, sonst spiegelt sich der helle Horizont mit hinein */
@media (orientation: landscape) and (max-height: 520px) {
  .cn-tail { --ah: 72px; min-height: 0; height: 30svh; }
  .cn-tail + main { padding-top: 84px; }
}

/* ===== Alles Lila in das Blau des Enso (#8C9EF5) ===== */
:root { --pl: 140 158 245; --c-violet: #8C9EF5; --c-violet-rgb: 140 158 245; }
/* "Die erste Edition" in Koralle hervorgehoben */
.cn-tail + main > .panel:first-child > h2:first-child { color: #FFB4A7 !important; }
.panel .hero-spheres, .enso__core span { color: #8C9EF5 !important; }
.ort-titel em { color: #FFB4A7 !important; }
.ort-zitat { border-left-color: rgba(140,158,245,.45); }
/* Sonnenpunkte: Ring und Schein blau, der Kern bleibt warm */
.mb-sun { box-shadow: inset 0 0 0 2px #8C9EF5, 0 0 14px rgb(var(--pl) / .6); }
@keyframes mbBreath { 0%,100% { box-shadow: inset 0 0 0 2px #8C9EF5, 0 0 10px rgb(var(--pl) / .45); } 50% { box-shadow: inset 0 0 0 2px #8C9EF5, 0 0 24px rgb(var(--pl) / .85); } }
.mb-sun::before { background: radial-gradient(circle, rgba(240,244,255,1) 0%, rgba(206,214,252,.95) 12%, rgb(var(--pl) / .72) 26%, rgba(120,140,240,.34) 44%, transparent 68%); }
.mb-item::after { background: linear-gradient(105deg, transparent 30%, rgba(206,214,252,.6) 47%, rgb(var(--pl) / .55) 52%, transparent 70%); }
/* Polaroids: Fotopapier hellblau statt lavendel-violett */
.ort .ort-bilder figure {
  background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
              linear-gradient(165deg, #EAEDFE 0%, #D3DAFB 38%, #B6C2F7 72%, #9AAAF3 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(80,100,200,.2) inset, 0 14px 30px rgba(3,8,30,.4), 0 3px 8px rgba(3,8,30,.25);
}
.ort .ort-bilder figure:focus-visible { outline-color: #8C9EF5; }
/* Mond-Trenner und Stempel: vom Lila ins Blau gedreht */
.cl-moon-divider img { filter: hue-rotate(-22deg) saturate(1.15); }
/* Stempel: eigene blaue Fassung (img/fm-stamp-blau-*.webp), freigestellt, ohne Farbfilter */
.fm-stamp img { filter: none; }
/* kein heller 1-px-Schatten mehr (lag als grauer Versatz unter dem Stempel und machte ihn unscharf) */
.fm-stamp { filter: none !important; }
@keyframes fmStamp {
  0%   { opacity: 0; transform: translate(40px,-90px) scale(2.3) rotate(-9deg); }
  35%  { opacity: 1; transform: translate(26px,-60px) scale(1.9) rotate(-6deg); }
  54%  { transform: translate(0,0) scale(.93) rotate(.8deg); }
  66%  { transform: scale(1.04) rotate(-.6deg); }
  80%  { transform: scale(.99) rotate(.2deg); }
  100% { opacity: 1; transform: none; }
}
.fm-stamp__ink { border-color: rgba(140,158,245,.55); }
.fm-stamp__dust {
  background: radial-gradient(circle, transparent 46%, rgba(140,158,245,.35) 48%, transparent 52%),
              radial-gradient(2px 2px at 12% 40%, #8C9EF5 99%, transparent), radial-gradient(3px 3px at 86% 30%, #8C9EF5 99%, transparent),
              radial-gradient(2px 2px at 78% 82%, #8C9EF5 99%, transparent), radial-gradient(3px 3px at 20% 78%, #8C9EF5 99%, transparent),
              radial-gradient(2px 2px at 50% 6%, #8C9EF5 99%, transparent), radial-gradient(2px 2px at 95% 60%, #8C9EF5 99%, transparent);
}
/* Knopf: im Blau des Enso (dunklere Stufe, damit die weisse Schrift lesbar bleibt) */
.coll-cta-wrap .sc-glass-cta {
  background: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #8C9EF5 0%, #7389EE 100%) !important;
  border-color: rgb(var(--pl) / .8) !important;
  box-shadow: 0 10px 24px rgba(3,8,30,.4), 0 0 0 3px rgb(var(--pl) / .22), 0 0 28px rgb(var(--pl) / .55), inset 0 1px 1px rgba(255,255,255,.4) !important;
}
.coll-cta-wrap .sc-glass-cta:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.07) 40%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #97A8F7 0%, #7D92F1 100%) !important;
}

/* ===== Seitenende: kein weicher Verlauf in die Fusszeile ===== */
.sc-footer::before { display: none !important; }

/* ===== Infoteile: Raender und Animationen im Enso-Blau statt Lavendel/Koralle ===== */
.coll-stat.sc-glass-light { border-color: rgba(140,158,245,.38) !important; }
.coll-stat.sc-glass-light:hover {
  border-color: rgba(140,158,245,.75) !important;
  box-shadow: 0 18px 40px rgba(3,8,30,.45), 0 0 22px rgba(140,158,245,.22), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.cs-armed .coll-stat::after {
  background: linear-gradient(105deg, rgba(140,158,245,0) 30%, rgba(140,158,245,.5) 47%, rgba(178,192,252,.7) 50%, rgba(140,158,245,.5) 53%, rgba(140,158,245,0) 70%);
}
.mb-item { border-color: rgba(140,158,245,.32); }
.mb-item:hover { border-color: rgba(140,158,245,.7); box-shadow: 0 16px 34px rgba(3,8,30,.45), 0 0 0 4px rgba(140,158,245,.12), inset 0 1px 0 rgba(255,255,255,.16); }
.mb-list::before { background: linear-gradient(180deg, rgba(140,158,245,0), rgba(140,158,245,.55) 12%, rgba(140,158,245,.45) 88%, rgba(140,158,245,0)); }
/* Sonnenpunkte: auch der Kern im Blau (vorher orange) */
.mb-sun { background: radial-gradient(circle, #F4F6FF 0 10%, #B9C4FB 22%, #6F84EC 38%, #EEF1FE 41% 57%, transparent 60%); }

/* ===== Enso zeichnen: schneller und fliessender (passend zu D=1.9 in mb-js) ===== */
.mb-in .enso__m { transition: stroke-dashoffset 1.9s cubic-bezier(.36,.12,.32,1) .05s; }
.mb-in .enso__core { transition: opacity 1s ease 1.95s, transform 1.2s cubic-bezier(.16,1,.3,1) 1.95s; }

/* Pinselzug ruhiger: Enso auf eigener Ebene, damit sein Neuzeichnen nichts anderes mitreisst;
   der feste Sternengrund wird abgeschottet */
.enso__svg { will-change: transform; transform: translateZ(0); }
.poster-wrap { contain: strict; }

/* Stempel: ein leichter weisser Schein wie bei den Sonnenpunkten der Aufzaehlung (mittig, ohne Versatz) */
.fm-stamp { filter: drop-shadow(0 0 3px rgba(236,240,255,.55)) drop-shadow(0 0 12px rgba(140,158,245,.45)) !important; }

/* Die vier Infokarten: von Anfang an im helleren Blau, das sie frueher erst nach der Animation
   (mit Glas-Unschaerfe) bekamen. Keine Unschaerfe mehr, daher kein Farbwechsel. */
.coll-stat.sc-glass-light,
.cs-armed .coll-stat.sc-glass-light,
.cs-armed.cs-done .coll-stat.sc-glass-light {
  background: linear-gradient(180deg, #1D3678 0%, #10296F 45%, #08236D 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Stempel lesbarer: dieselbe Regel wie beim Kant-Zitat ueber dem Mond (ein enger dunkler Hof um die
   Schrift), die Tinte etwas heller, darum der leichte weisse Schein wie bei den Sonnenpunkten */
.fm-stamp {
  filter: brightness(1.28) saturate(1.1)
          drop-shadow(0 0 1px rgba(10,16,62,.95)) drop-shadow(0 0 3px rgba(10,16,62,.8))
          drop-shadow(0 0 10px rgba(170,185,250,.35)) !important;
}

/* Bogen zwischen Startbild und Seite: weicher, im Enso-Blau, an den Raendern auslaufend, mit zartem Schein */
.cn-arch__glow { filter: blur(3px); opacity: .55; }

/* Farbregel 60/30/10: Koralle nur fuer Rubriken, Ueberschrift-Akzente und hervorgehobene Woerter;
   kleine Kartenrubriken und die Nummern am Enso im Enso-Blau; Button-Schrift dunkelblau */
.mb-tag, .coll-stat small, .ort-kicker, .enso__pt b { color: #8C9EF5 !important; }
.coll-cta-wrap .sc-glass-cta, .coll-cta-wrap .sc-glass-cta span { color: #FFFFFF !important; }