/* Sensus Communis | intro.css
   Nov. 2026: Buehne in der grossen Viewport-Hoehe (lvh), damit auf dem iPhone bei eingeklappter
   Leiste kein schwarzer Streifen unter dem Bild bleibt; Laufstrecke so bemessen, dass die Seite
   direkt weiterlaeuft, sobald die Oeffnung fertig ist (kein Stehenbleiben).
   Neuer Einstieg der Startseite ("Simpel"): Auf Schwarz steht der weisse Enso mit dem Namen
   darunter wie auf der Visitenkarte. Beim Scrollen fuellt sich der Enso mit Farbe und glueht,
   in seiner Oeffnung bricht ein Stern durch, am Horizont zieht sich eine Roehren-Linie
   auseinander, der Bildschirm blitzt, dann oeffnet sich vom Horizont aus der Tag, und die
   Sonne steigt im selben Mass. Gesteuert von intro.js ueber CSS-Variablen.
   Geladen von: index, en. */
.sc-intro{position:relative;height:258vh;height:calc(100lvh + 158svh);background:#000;--ink:255,255,255;--nink:255,255,255}
.sc-intro__stage{position:sticky;top:0;height:100vh;height:100lvh;overflow:hidden;background:#000;color:rgb(var(--ink))}
.sc-intro__frame{--sl:42.109%;--st:47.044%;--sw:15.313%;--sh:12.494%;
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100vw, calc(100vh * 2560 / 1297));aspect-ratio:2560/1297;
  clip-path:inset(var(--dt,60%) var(--dx,50%) var(--db,40%) var(--dx,50%))}
.sc-intro__day{position:absolute;inset:0;background:url(../img/home-day-h-2560.webp) 0 0/100% 100% no-repeat}
@media (orientation: portrait){
  .sc-intro__frame{--sl:28.828%;--st:52.652%;--sw:42.276%;--sh:8.796%;width:max(100vw, calc(100vh * 1450 / 2376));aspect-ratio:1450/2376}
  .sc-intro__day{background-image:url(../img/home-day-v.webp)}
}
.sc-intro__sun{position:absolute;left:var(--sl);top:var(--st);width:var(--sw);height:var(--sh);overflow:hidden}
.sc-intro__sun img{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translate3d(0,var(--sun,100%),0)}

.sc-intro__mark{position:absolute;left:50%;top:26%;translate:-50% -50%;width:min(34vmin,320px);display:flex;flex-direction:column;align-items:center;gap:min(4vmin,30px);z-index:5}
@media (orientation: portrait){.sc-intro__mark{top:38%}}
.sc-intro__enso{position:relative;width:100%;aspect-ratio:1}
.sc-intro__enso img{position:absolute;inset:0;width:100%;height:100%;display:block}
.sc-intro__enso .farbe{-webkit-mask-image:conic-gradient(from 188deg,#000 0 var(--fill,0deg),transparent var(--fill,0deg));
                              mask-image:conic-gradient(from 188deg,#000 0 var(--fill,0deg),transparent var(--fill,0deg))}
.sc-intro__enso::before{content:"";position:absolute;inset:-18%;border-radius:50%;opacity:var(--eg,0);
  background:conic-gradient(from 0deg,rgba(150,140,255,.75),rgba(196,150,240,.7) 25%,rgba(250,175,150,.75) 45%,rgba(255,205,120,.8) 55%,rgba(250,175,150,.75) 65%,rgba(196,150,240,.7) 80%,rgba(150,140,255,.75));
  -webkit-mask-image:radial-gradient(circle,transparent 38%,#000 48%,rgba(0,0,0,.35) 60%,transparent 72%);mask-image:radial-gradient(circle,transparent 38%,#000 48%,rgba(0,0,0,.35) 60%,transparent 72%)}
.sc-intro__name{display:block;font-family:"EB Garamond",serif;font-weight:500;text-transform:uppercase;font-size:clamp(14px,1.7vw,21px);
  letter-spacing:.3em;padding-left:.3em;white-space:nowrap;line-height:1.2;color:rgb(var(--nink))}

/* Stern in der Oeffnung des Enso */
.sc-intro__star{position:absolute;left:var(--gx);top:var(--gy);width:calc(var(--ew) * .3);aspect-ratio:1;translate:-50% -50%;z-index:6;pointer-events:none;
  opacity:var(--dm,0);transform:scale(var(--dms,.5))}
.sc-intro__star::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fff 0 12%,rgba(255,220,150,.9) 24%,rgba(250,165,140,.55) 40%,rgba(170,150,255,.25) 56%,rgba(170,150,255,0) 72%)}
.sc-intro__star i{position:absolute;left:50%;top:50%;translate:-50% -50%}
.sc-intro__star i:nth-child(1){width:1100%;height:3%;background:linear-gradient(90deg,transparent,rgba(160,150,255,.8) 22%,rgba(250,170,150,.95) 40%,#FFF4DC 50%,rgba(250,170,150,.95) 60%,rgba(160,150,255,.8) 78%,transparent)}
.sc-intro__star i:nth-child(2){height:700%;width:3%;background:linear-gradient(180deg,transparent,rgba(160,150,255,.85) 25%,#FFF4DC 50%,rgba(255,200,110,.9) 70%,transparent)}
/* Roehren-Linie am Horizont, Blitz, Bildzeilen */
.sc-intro__crt{position:absolute;left:0;right:0;top:var(--hzpx);height:0;z-index:5;pointer-events:none}
.sc-intro__crt i{position:absolute;left:50%;top:0;width:100%;translate:-50% -50%;border-radius:999px}
.sc-intro__crt .core{height:var(--ch,3px);background:#fff;transform:scaleX(var(--cx,0));opacity:var(--co,0);
  background:transparent;box-shadow:0 0 10px 2px rgba(255,214,150,.55),0 0 40px 10px rgba(250,170,150,.3),0 0 110px 26px rgba(170,150,255,.18)}
.sc-intro__crt .r{height:2px;background:rgba(255,60,120,.75);transform:translateY(-3px) scaleX(calc(var(--cx,0) * .985));opacity:calc(var(--co,0) * .18);mix-blend-mode:screen}
.sc-intro__crt .b{height:2px;background:rgba(60,200,255,.75);transform:translateY(3px) scaleX(calc(var(--cx,0) * 1.01));opacity:calc(var(--co,0) * .18);mix-blend-mode:screen}
.sc-intro__flash{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:var(--fl,0);
  background:radial-gradient(140% 70% at 50% var(--hzpx),rgba(255,214,150,.9) 0,rgba(250,170,150,.5) 32%,rgba(170,150,255,.22) 62%,rgba(170,150,255,0) 88%)}
.sc-intro__scan{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:var(--sc,0);mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px)}

/* Founding Colloquium unten: Negativ, dann Tag */
.sc-intro__info{position:absolute;left:0;right:0;bottom:max(26px,4vh);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;z-index:8;
  color:rgb(var(--ink));text-shadow:0 1px 12px rgba(255,240,215,var(--tsh,0))}
.sc-intro__claim{font-family:"EB Garamond",serif;font-size:clamp(17px,2.2vw,22px);margin:0}
.sc-intro__pill{font-family:"EB Garamond",serif;font-size:clamp(15px,1.8vw,18px);padding:9px 22px;border-radius:999px;
  border:1px solid rgba(var(--ink),.9);color:rgb(var(--ink));text-decoration:none;background:rgba(255,248,236,var(--pilla,0));transition:background .3s}
.sc-intro__pill:hover{background:rgba(255,248,236,.35)}
.sc-intro__year{font-size:9px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;opacity:.75}
.sc-intro__scroll{font-size:8px;letter-spacing:.36em;text-transform:uppercase;font-weight:600;opacity:var(--so,.55)}

@media (prefers-reduced-motion: reduce){
  .sc-intro{height:auto}
  .sc-intro__stage{position:relative}
}

/* Uebergang in den naechsten Abschnitt: ruhig, ohne Bewegung.
   Unter dem Sonnenaufgang setzt sich das Meer fort: exakt dasselbe Bild in derselben Groesse,
   an der Unterkante gespiegelt, damit Farbe und Struktur 1:1 anschliessen. Die Flaeche endet in
   einem gewoelbten Horizont; unter dem Bogen ist sie durchsichtig, dort liegt schon der
   naechste Abschnitt, so dass auch der Lavendel 1:1 der des Abschnitts ist. */
.sc-intro__tail{--ah:115px;position:relative;z-index:2;pointer-events:none;overflow:hidden;
  height:20vh;height:20svh;min-height:140px;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}
@media (max-width:720px){.sc-intro__tail{--ah:81px}}
.sc-intro__mirror{position:absolute;left:0;right:0;top:0;height:100vh;height:100lvh;overflow:hidden;transform:scaleY(-1)}
.sc-intro__frame--m{clip-path:none}
.sc-intro__arch{position:absolute;left:0;bottom:0;width:100%;height:var(--ah);display:block;z-index:1}
.sc-intro__tail + .sea-masthead,.sc-intro__tail ~ .sea-masthead{position:relative;z-index:1}
/* Infos etwas hoeher */
.sc-intro__info{bottom:max(64px,9vh)}
@media (max-width:720px){.sc-intro__info{bottom:max(56px,8vh)}}
/* der naechste Abschnitt liegt unter dem Bogen: etwas mehr Luft ueber der Ueberschrift */
.sc-intro__tail ~ .sea-masthead{padding-top:calc(96px + 70px) !important}
@media (max-width:720px){.sc-intro__tail ~ .sea-masthead{padding-top:calc(72px + 50px) !important}}

/* Menue waehrend des Einstiegs (Klassen setzt intro.js) */
.sc-nav.sc-nav--hold,.sc-nav.sc-nav--sky{border-bottom-color:transparent !important;transition:background .6s ease,border-color .6s ease !important}
.sc-nav.sc-nav--hold{background:#000 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
.sc-nav.sc-nav--hold .sc-nav-logo,.sc-nav.sc-nav--hold .sc-nav-links a:not(.sc-nav-cta),.sc-nav.sc-nav--hold .sc-nav-back,
.sc-nav.sc-nav--hold .sc-nav-lang,.sc-nav.sc-nav--hold .sc-nav-burger{color:#F5F1E8 !important}
.sc-nav.sc-nav--hold .sc-nav-lang b{color:#FFFFFF !important}
.sc-nav.sc-nav--sky .sc-nav-lang b,.sc-nav.menu-open.sc-nav--hold .sc-nav-lang b{color:#6F84EC !important}
.sc-nav.sc-nav--hold .sc-nav-mark .w{opacity:1 !important}
.sc-nav.sc-nav--hold .sc-nav-mark .c{opacity:0 !important}
.sc-nav.sc-nav--sky{background:rgba(255,255,255,.12) !important}
.sc-nav.sc-nav--sky .sc-nav-logo,.sc-nav.sc-nav--sky .sc-nav-links a:not(.sc-nav-cta),.sc-nav.sc-nav--sky .sc-nav-back,
.sc-nav.sc-nav--sky .sc-nav-lang,.sc-nav.sc-nav--sky .sc-nav-burger{color:#0A1A4F !important}
.sc-nav.sc-nav--sky .sc-nav-mark .w{opacity:0 !important}
.sc-nav.sc-nav--sky .sc-nav-mark .c{opacity:1 !important}
.sc-nav.menu-open.sc-nav--hold,.sc-nav.menu-open.sc-nav--sky{background:rgba(250,247,240,.98) !important}
.sc-nav.menu-open.sc-nav--hold .sc-nav-burger,.sc-nav.menu-open.sc-nav--hold .sc-nav-lang,.sc-nav.menu-open.sc-nav--hold .sc-nav-logo{color:#0A1A4F !important}
.sc-nav.menu-open.sc-nav--hold .sc-nav-mark .w{opacity:0 !important}
.sc-nav.menu-open.sc-nav--hold .sc-nav-mark .c{opacity:1 !important}

/* Handy quer (niedrige Hoehe): Enso kleiner zwischen Menue und Horizont, Infos kompakt unter dem Horizont */
@media (orientation: landscape) and (max-height: 520px){
  .sc-intro__mark{top:calc(50px + (var(--hzpx, 60svh) - 50px) * .5);width:min(22vmin,150px);gap:7px}
  .sc-intro__info{bottom:max(10px,3svh) !important;gap:6px}
  .sc-intro__claim{font-size:16px}
  .sc-intro__pill{font-size:14px;padding:6px 18px}
  .sc-intro__scroll{display:none}
}

/* ===== Variante "Nacht" (Klasse sc-intro--nacht an .sc-intro) =====
   Zu Beginn liegt die ganze Nachtszene da (Himmel und Meer), am Himmel mit funkelnden Sternen,
   oben der Mond; Enso und Name leuchten im Blau der Nacht. Danach laeuft der Effekt wie gehabt:
   der Enso fuellt sich mit Farbe, der Stern bricht durch, vom Horizont oeffnet sich der Tag. */
.sc-intro__night,.sc-intro__moon,.sc-intro__enso .blau{display:none}
.sc-intro--nacht .sc-intro__night{display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:max(100vw, calc(100vh * 2560 / 1297));aspect-ratio:2560/1297;overflow:hidden}
/* der Horizont des Nachtbilds liegt tiefer als der des Tagbilds: Nachtbild gleichmaessig vergroessert und verschoben,
   so dass beide Horizontlinien deckungsgleich sind und das Nachtmeer bis unten reicht */
.sc-intro__nimg{position:absolute;left:-6.47%;width:112.94%;top:-13.14%;height:113.14%;background:url(../img/home-night-h-2560.webp) 0 0/100% 100% no-repeat}
.sc-intro__nimg .nstars{position:absolute;inset:0}
.sc-intro__nimg .nstars i{position:absolute;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,#fff 0 14%,rgba(255,250,236,.6) 24%,rgba(255,246,226,0) 50%);opacity:.5;animation:scnTw var(--td,4s) ease-in-out var(--dl,0s) infinite both}
.sc-intro__nimg .nstars i.s{background:radial-gradient(circle,rgba(255,250,236,.5) 0,rgba(255,246,226,0) 55%)}
.sc-intro__nimg .nstars i.s::before{content:"";position:absolute;inset:22%;background:#FFFBF1;clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%)}
@keyframes scnTw{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.sc-intro__nimg .nstars--v{display:none}
.sc-intro--nacht.is-day .sc-intro__night,.sc-intro--nacht.is-day .sc-intro__moon{visibility:hidden}
.sc-intro--nacht.is-day .nstars i{animation-play-state:paused}

.sc-intro--nacht .sc-intro__moon{display:block;position:absolute;left:var(--ml,50%);top:var(--mt);width:var(--mw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  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)}
.sc-intro__moon::before,.sc-intro__moon::after{content:"";position:absolute;border-radius:50%;background:#C9C2AC;opacity:.32}
.sc-intro__moon::before{left:28%;top:30%;width:17%;height:17%}
.sc-intro__moon::after{left:58%;top:58%;width:11%;height:11%}

/* Enso im Blau der Nacht (der weisse Pinselstrich als Maske) */
.sc-intro--nacht .sc-intro__enso img:not(.farbe){opacity:0}
.sc-intro--nacht .sc-intro__enso .blau{display:block;position:absolute;inset:0;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}
.sc-intro--nacht{--nb:140,158,245}

/* Lage: Mond oben, Enso darunter, beide ueber dem Horizont */
@media (orientation: landscape){
  .sc-intro--nacht{--mt:calc(50px + 8vh);--mw:clamp(38px,7vmin,70px)}
  .sc-intro--nacht .sc-intro__mark{top:calc(50px + 8vh + clamp(19px,3.5vmin,35px) + 4vh);translate:-50% 0;width:min(26vmin,270px)}
}
@media (orientation: portrait){
  .sc-intro--nacht .sc-intro__night{width:max(100vw, calc(100vh * 1450 / 2376));aspect-ratio:1450/2376}
  .sc-intro__nimg{left:-1.69%;width:103.38%;top:-3.68%;height:103.68%;background-image:url(../img/home-night-v.webp)}
  .sc-intro__nimg .nstars--h{display:none}
  .sc-intro__nimg .nstars--v{display:block}
  .sc-intro--nacht{--mt:16.8%;--mw:clamp(34px,11vmin,58px)}
}
@media (orientation: landscape) and (max-height: 520px){
  .sc-intro--nacht{--ml:calc(50% + 11vmin + 70px);--mt:calc(50px + (var(--hzpx, 60svh) - 50px) * .3);--mw:30px}
  .sc-intro--nacht .sc-intro__mark{top:calc(50px + (var(--hzpx, 60svh) - 50px) * .5);translate:-50% -50%;width:min(22vmin,150px)}
}
@media (prefers-reduced-motion: reduce){.sc-intro__nimg .nstars i{animation:none}}

/* Menue in der Nacht-Variante: waehrend des Einstiegs durchsichtig ueber dem Nachthimmel */
.sc-nav.sc-nav--hold.sc-nav--nacht{background:transparent !important}
/* Nacht-Variante: die Mondspiegelung laeuft durch die Infos; ein weicher Nachtschleier dahinter haelt sie lesbar
   und verschwindet, sobald der Tag da ist */
.sc-intro--nacht .sc-intro__info::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(640px,118vw);height:calc(100% + 90px);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,18,58,.82),rgba(7,18,58,.55) 55%,rgba(7,18,58,0));opacity:calc(1 - var(--pilla,0) / .45)}
.sc-intro--nacht .sc-intro__claim,.sc-intro--nacht .sc-intro__year{text-shadow:0 1px 8px rgba(7,18,58,calc(.9 - 2 * var(--pilla,0)))}
/* Startansicht ganz Schwarz-Weiss: auch der Founding-Member-Knopf im Menue */
html body .sc-nav.sc-nav--hold.sc-nav--hold .sc-nav-cta{color:#FFFFFF !important;background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.5) !important;box-shadow:none !important}
html body .sc-nav.sc-nav--hold.sc-nav--hold .sc-nav-cta::before,html body .sc-nav.sc-nav--hold.sc-nav--hold .sc-nav-cta::after{opacity:0 !important}

/* Voegel am Morgenhimmel: aus dem Tagbild entfernt und hier klein und weit rechts neu gesetzt
   (4 Stueck wie frueher), sie gehen mit dem Tag auf und treiben ganz langsam */
.sc-intro__birds{position:absolute;overflow:visible;fill:none;stroke:#4A3F6E;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.62;
  animation:scBirds 28s ease-in-out infinite alternate}
.sc-intro__birds path{vector-effect:non-scaling-stroke}
.sc-intro__birds--h{left:78.5%;top:17%;width:4.2%}
.sc-intro__birds--v{display:none}
@media (orientation: portrait){
  .sc-intro__birds--h{display:none}
  .sc-intro__birds--v{display:block;left:71%;top:12%;width:14%}
}
@keyframes scBirds{from{translate:0 0}to{translate:18px -5px}}
@media (prefers-reduced-motion: reduce){.sc-intro__birds{animation:none}}