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

/* ===== sc-podcast-motion ===== */
/* ============================================================
     Podcast „Auf Sendung": die Frage wird hörbar.
     Stimmwelle unter der Frage (spricht bei jedem getippten Zeichen,
     atmet in der Pause), Funkwellen aus der Sonne am Horizont,
     Resonanz der Bereiche im Absatz. Startzustände nur mit .pc-armed.
     ============================================================ */
.pc-wave {
  display: block;
  width: min(440px,78vw);
  height: 46px;
  margin: 0 auto 14px;
  position: relative;
}
.subhero--q {
  padding-top: 96px !important;
}
.pc-wave svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.pc-wave rect {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* Funkwellen aus der Sonne (hinter dem Boden, nur oberhalb des Horizonts sichtbar) */
.sun-ring {
  position: absolute;
  left: 50%;
  top: 94.7%;
  z-index: 1;
  pointer-events: none;
  width: clamp(88px, 12vw, 168px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  border: 1px solid rgba(255,244,222,.8);
  transform: translate(-50%,-50%) scale(1);
  opacity: 0;
  animation: sunRing 9s cubic-bezier(.22,.61,.36,1) infinite;
}
.sun-ring:nth-of-type(2) {
  animation-delay: 3s;
}
.sun-ring:nth-of-type(3) {
  animation-delay: 6s;
}
@keyframes sunRing{
    0%  { opacity:0;   transform:translate(-50%,-50%) scale(1); }
    10% { opacity:.42; }
    100%{ opacity:0;   transform:translate(-50%,-50%) scale(3.2); }
  }
/* Resonanz: der passende Bereich im Absatz leuchtet zur getippten Phrase */
.sphere-coral {
  position: relative;
  transition: color .9s ease;
}
.sphere-coral::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.05em;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: .8;
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.sphere-coral.is-resonant {
  color: var(--pc-c, #A44BA7);
}
.sphere-coral.is-resonant::after {
  transform: scaleX(1);
}
/* Auftritt beim Laden */
.pc-armed .subhero--q .page-label {
  opacity: 0;
  transform: translate3d(0,-10px,0);
  letter-spacing: .5em;
}
.pc-armed .subhero--q .jt-static {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0,22px,0);
  filter: blur(8px);
}
.pc-armed .pc-wave rect {
  transform: scaleY(0);
}
.pc-armed .subhero--q .lede {
  opacity: 0;
  transform: translate3d(0,16px,0);
  filter: blur(5px);
}
.pc-in .subhero--q .page-label {
  opacity: 1;
  transform: none;
  letter-spacing: .26em;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1), letter-spacing 1.6s cubic-bezier(.16,1,.3,1);
}
.pc-in .subhero--q .jt-static {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 1s ease .2s, transform 1.3s cubic-bezier(.16,1,.3,1) .2s, filter 1.2s cubic-bezier(.16,1,.3,1) .2s;
}
.pc-in .subhero--q .lede {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 1.1s ease .9s, transform 1.4s cubic-bezier(.16,1,.3,1) .9s, filter 1.2s ease .9s;
}
@media (max-width:720px) {
  .pc-wave {
    width: min(300px,80vw);
    height: 46px;
    margin: 2px auto 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sun-ring {
    display: none;
  }
  .pc-armed .subhero--q .page-label,
  .pc-armed .subhero--q .jt-static,
  .pc-armed .subhero--q .lede {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ===== 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;
}

/* ===== Sonnenaufgang im Bild der Startseite =====
   Morgenhimmel und Meer stammen aus dem Tagbild der Startseite. Gerader Horizont bei 94,7 %,
   die Sonne steht halb ueber dem Wasser, darueber laufen weiter die Funkwellen.
   Die hellen Wellenkaemme leuchten wie auf der Startseite nacheinander auf. */
.poster-ground {
  display: none;
}
.poster-dawn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5.3%;
  height: 30%;
  z-index: 0;
  pointer-events: none;
  background: url(../img/sunrise-sky.webp) center bottom / cover no-repeat;
}
.poster-sea {
  position: absolute;
  left: 0;
  right: 0;
  top: 94.7%;
  bottom: 0;
  z-index: 2;
  overflow: hidden;
  background: #C9532A url(../img/sunrise-sea.webp) center top / cover no-repeat;
}
.poster-sea i {
  position: absolute;
  inset: 0;
  background: no-repeat center top / cover;
  opacity: .1;
  animation: pcSeaGlint 6s ease-in-out infinite both;
}
.poster-sea i:nth-child(1) { background-image: url(../img/sea-day-h-g1.webp); animation-duration: 5.8s; }
.poster-sea i:nth-child(2) { background-image: url(../img/sea-day-h-g2.webp); animation-duration: 7.3s; animation-delay: -2.6s; }
.poster-sea i:nth-child(3) { background-image: url(../img/sea-day-h-g3.webp); animation-duration: 6.5s; animation-delay: -4.9s; }
@keyframes pcSeaGlint{ 0%,100%{ opacity: .1; } 38%{ opacity: .75; } }
.poster-sun {
  background: radial-gradient(circle at 50% 46%, #FFF8E6 0%, #FEF1D6 75%, #FBE6C0 100%);
}
.sun-ring {
  border-color: rgba(255,240,205,.85);
}
@media (prefers-reduced-motion: reduce) {
  .poster-sea i { animation: none; opacity: .3; }
}

/* Erster Bildschirm: der Sonnenaufgang bleibt ganz sichtbar, die Fusszeile kommt erst beim Scrollen.
   Danach schiebt sie sich mit einem weichen Verlauf ueber das Meer statt mit einer harten Kante. */
main { min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
.sc-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: clamp(90px, 16vh, 180px);
  background: linear-gradient(180deg, rgba(196,198,232,0) 0%, rgba(196,198,232,.55) 55%, #C4C6E8 100%);
  pointer-events: none;
}

/* Match-Cut: das Schluesselwort der Frage als Zeitungsausschnitt.
   Auftakt (mc-intro.js): das ganze Video laeuft gross hinter der Ueberschrift, das Wort genau auf seinem
   Platz, und zieht sich dann auf diese eine Zeile zusammen. Danach steht hier das stille Endbild.
   Das Wort selbst steht unsichtbar im Text (Screenreader, Suche). */
.mc-word {
  position: relative; display: inline-block;
  height: 1.04em; aspect-ratio: var(--mc-ar, 480 / 104);
  vertical-align: middle; margin: 0 .04em;
}
.mc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-composite: intersect;
  transition: opacity .32s ease;
}
.mc-word.mc-hidden .mc-img { opacity: 0; }
.mc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* das grosse Video: hinter dem Text der Ueberschrift, ueber dem Himmel */
.mc-full {
  position: absolute; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity .45s ease;
  will-change: transform, clip-path;
  /* der Himmel im Video loest sich an den Raendern in den Himmel der Seite auf; nur das Blatt bleibt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.mc-full.is-on { opacity: 1; }
.mc-full video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* waehrend des Auftakts steht die Ueberschrift sofort ruhig da (kein Einblenden) */
.mc-on .subhero--q .jt-static { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
/* waehrend des Auftakts nur Ueberschrift und Video; Fragezeichen-Teil, Welle und Text kommen danach */
.mc-on .subhero--q .jt-suffix, .mc-on .subhero--q .jt-cursor { visibility: hidden; }
.pc-wave { transition: opacity .8s ease .25s; }
.mc-on .subhero--q .lede, .mc-on .pc-wave { opacity: 0 !important; transition: none !important; }