/* =========================================================
   Psychotherapie — eigener Klangraum
   Baut auf style.css auf, verschiebt die Palette ins Violette.
   Wird auf index.html (Teaser) und psychotherapie.html geladen.
   ========================================================= */

.psy {
  --psy-void: #15121b;
  --psy-void-2: #1f1a28;
  --psy-moon: #a9a3c4;
  --psy-moon-dk: #6f688c;
  --psy-veil: rgba(169, 163, 196, 0.14);
  --psy-bone: #e9e4ee;

  background: var(--psy-void);
  color: var(--psy-bone);
  position: relative;
  isolation: isolate;
}

/* ---------- Korn: liegt über allem, bewegt sich unmerklich ---------- */
.psy::after {
  content: '';
  position: absolute;
  inset: -120px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-14px, 9px); }
  33%  { transform: translate(11px, -16px); }
  50%  { transform: translate(-9px, -11px); }
  66%  { transform: translate(16px, 7px); }
  83%  { transform: translate(-12px, 14px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Aura: folgt dem Zeiger, sehr langsam ---------- */
.psy > .psy-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      46vmax 46vmax at var(--mx, 50%) var(--my, 38%),
      rgba(169, 163, 196, 0.17) 0%,
      rgba(169, 163, 196, 0.06) 34%,
      transparent 66%
    );
  transition: background 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.psy > * { position: relative; z-index: 1; }
.psy-hero > .wrap { position: relative; z-index: 2; }

.psy .eyebrow { color: var(--psy-moon); }
.psy .lead { color: rgba(233, 228, 238, 0.78); }

/* =========================================================
   Hero der Psychotherapie-Seite
   ========================================================= */
.psy-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('images/gen-psy-veil.jpg');
  background-size: cover;
  background-position: 50% 42%;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(70% 70% at 62% 46%, #000 10%, transparent 78%);
  mask-image: radial-gradient(70% 70% at 62% 46%, #000 10%, transparent 78%);
}

.psy-hero {
  min-height: 100svh;
  /* Spalte statt Zeile: der Inhalt sitzt mittig, das Laufband darunter im
     normalen Fluss. Vorher lag es absolut positioniert über den Schaltflächen
     und hat deren Klicks abgefangen. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(7rem, 16vh, 11rem);
  padding-bottom: clamp(6.5rem, 13vh, 9rem);
  overflow: hidden;
}

.psy-hero__foot {
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}

/* Zwei sehr langsam driftende Lichthöfe im Hintergrund */
.psy-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.psy-orb--a {
  width: 46vmax; height: 46vmax;
  right: -14vmax; top: -12vmax;
  background: radial-gradient(circle, rgba(111, 104, 140, 0.75), transparent 68%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.psy-orb--b {
  width: 34vmax; height: 34vmax;
  left: -10vmax; bottom: -10vmax;
  background: radial-gradient(circle, rgba(182, 127, 58, 0.30), transparent 66%);
  animation: drift-b 46s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-7vmax, 6vmax, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(6vmax, -5vmax, 0) scale(0.92); }
}

/* ---------- Überschrift, die sich beim Scrollen sortiert ---------- */
.settle { display: block; }
.settle .w {
  display: inline-block;
  font-variation-settings: 'wdth' var(--wd, 78), 'opsz' 96;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  opacity: 0;
  filter: blur(6px);
  transition:
    transform 1.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 1.1s ease,
    filter 1.3s ease;
  transition-delay: calc(var(--i, 0) * 85ms);
  will-change: transform, opacity;
}
.settle.is-settled .w {
  transform: none;
  opacity: 1;
  filter: blur(0);
}

.psy-hero .psy-hero__claim {
  font-size: clamp(2.7rem, 7.4vw, 5.9rem);
  max-width: 15ch;
}
.psy-hero .psy-hero__claim .soft {
  color: var(--psy-moon);
  font-weight: 200;
  padding-left: 10vw;
}

.psy-hero__lead {
  margin-top: 2rem;
  max-width: 46ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: rgba(233, 228, 238, 0.76);
}

.psy-hero__actions {
  margin-top: 2.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  position: relative;
  z-index: 3;
}

.btn--moon {
  background: transparent;
  border-color: rgba(169, 163, 196, 0.45);
  color: var(--psy-bone);
}
.btn--moon:hover {
  background: var(--psy-moon);
  border-color: var(--psy-moon);
  color: var(--psy-void);
}

/* Leiser Hinweis, dass es weitergeht */
.psy-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(233, 228, 238, 0.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}
.psy-scroll-hint i {
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--psy-moon), transparent);
  animation: hint 2.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hint {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Bei niedriger Fensterhöhe wird es unten eng — dann entfällt der Hinweis */
@media (max-height: 720px) {
  .psy-scroll-hint { display: none; }
  .psy-hero { padding-bottom: clamp(3rem, 8vh, 5rem); }
}

/* =========================================================
   Diptychon: Körper links (klebt), Psyche rechts (läuft)
   ========================================================= */
.diptych {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}
@media (min-width: 940px) {
  .diptych { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .diptych__anchor { position: sticky; top: 22vh; align-self: start; }
}

.diptych__anchor h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }

.diptych__thread { position: relative; padding-left: clamp(1.6rem, 3vw, 2.8rem); }
.diptych__thread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--psy-veil) 8%,
    var(--psy-veil) 92%,
    transparent
  );
}

.beat { padding-block: clamp(2rem, 4.5vw, 3.4rem); position: relative; }
.beat::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.6rem, 3vw, 2.8rem) * -1 - 3px);
  top: calc(clamp(2rem, 4.5vw, 3.4rem) + 0.65em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--psy-void);
  border: 1px solid var(--psy-moon-dk);
  transition: background 0.6s ease, box-shadow 0.6s ease;
}
.beat.is-in::before {
  background: var(--psy-moon);
  box-shadow: 0 0 0 5px rgba(169, 163, 196, 0.12);
}
.beat h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); margin-bottom: 0.8rem; }
.beat p { color: rgba(233, 228, 238, 0.74); font-size: 0.99rem; }

/* =========================================================
   Themenfelder — bewusst versetzt, nicht im Raster
   ========================================================= */
.themes {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.theme {
  border: 1px solid var(--psy-veil);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: rgba(233, 228, 238, 0.02);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s ease, background 0.5s ease;
}
.theme:hover {
  transform: translateY(-6px);
  border-color: rgba(169, 163, 196, 0.42);
  background: rgba(169, 163, 196, 0.06);
}
/* Versatz: jede zweite Karte sitzt tiefer, ab Tablet */
@media (min-width: 700px) {
  .theme:nth-child(even) { transform: translateY(clamp(1.6rem, 3vw, 3rem)); }
  .theme:nth-child(even):hover { transform: translateY(calc(clamp(1.6rem, 3vw, 3rem) - 6px)); }
  .themes { padding-bottom: clamp(1.6rem, 3vw, 3rem); }
}
.theme__no {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: var(--psy-moon-dk);
  margin-bottom: 1.1rem;
  font-family: var(--font-mono);
  font-variation-settings: 'wdth' 87.5;
  text-transform: none;
  line-height: 1.5;
}
.theme h3 { font-size: 1.16rem; margin-bottom: 0.6rem; }
.theme p { font-size: 0.93rem; color: rgba(233, 228, 238, 0.68); line-height: 1.65; }

/* =========================================================
   Sitzungsverlauf — horizontale Spur, per Wischen/Ziehen
   ========================================================= */
.track-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.track-hint {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--psy-moon-dk);
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.track-hint::after {
  content: '';
  width: 34px;
  height: 1px;
  background: currentColor;
  animation: nudge 2.6s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100% { transform: translateX(0); opacity: 0.5; }
  50%      { transform: translateX(9px); opacity: 1; }
}

.track {
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.6rem;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--psy-moon-dk) transparent;
  /* Randabschluss weich auslaufen lassen */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 94%, transparent);
}
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.track::-webkit-scrollbar { height: 3px; }
.track::-webkit-scrollbar-track { background: var(--psy-veil); }
.track::-webkit-scrollbar-thumb { background: var(--psy-moon-dk); }

.stop {
  flex: 0 0 min(78vw, 340px);
  scroll-snap-align: center;
  border-top: 1px solid var(--psy-veil);
  padding-top: 1.5rem;
  user-select: none;
}
.stop__phase {
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--signal);
  font-family: var(--font-mono);
  font-variation-settings: 'wdth' 75;
}
.stop h3 { font-size: 1.3rem; margin: 0.9rem 0 0.7rem; }
.stop p { font-size: 0.93rem; color: rgba(233, 228, 238, 0.68); }

/* =========================================================
   Atem-Anker — der eine große Moment der Seite
   ========================================================= */
.breath {
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .breath { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}

.breath__stage {
  position: relative;
  aspect-ratio: 1;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.breath__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--psy-veil);
}
.breath__ring:nth-child(2) { inset: 12%; }
.breath__ring:nth-child(3) { inset: 24%; }

.breath__core {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(169, 163, 196, 0.85), rgba(111, 104, 140, 0.25) 62%, transparent 74%);
  box-shadow: 0 0 60px rgba(169, 163, 196, 0.25);
}
.breath.is-running .breath__core { animation: breathe 12s ease-in-out infinite; }
.breath.is-running .breath__ring { animation: halo 12s ease-in-out infinite; }
.breath__ring:nth-child(2) { animation-delay: 0.4s !important; }
.breath__ring:nth-child(3) { animation-delay: 0.8s !important; }

@keyframes breathe {
  0%   { transform: scale(0.72); }
  33%  { transform: scale(1.62); }
  50%  { transform: scale(1.62); }
  100% { transform: scale(0.72); }
}
@keyframes halo {
  0%   { opacity: 0.3; transform: scale(0.94); }
  33%  { opacity: 0.9; transform: scale(1.02); }
  50%  { opacity: 0.9; transform: scale(1.02); }
  100% { opacity: 0.3; transform: scale(0.94); }
}

.breath__phase {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono);
  font-variation-settings: 'wdth' 75;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.6vw, 1.05rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--psy-bone);
  transition: opacity 0.7s ease;
}

.breath__controls { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.breath__note { font-size: 0.85rem; color: rgba(233, 228, 238, 0.55); }

/* =========================================================
   Methoden — schmale Liste, die beim Hover aufgeht
   ========================================================= */
.methods { border-top: 1px solid var(--psy-veil); }
.method {
  border-bottom: 1px solid var(--psy-veil);
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
  display: grid;
  gap: 0.4rem 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;
}
@media (min-width: 800px) {
  .method { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: baseline; }
  .method:hover { padding-left: 1.4rem; background: rgba(169, 163, 196, 0.05); }
}
.method h3 { font-size: 1.22rem; }
.method p { font-size: 0.95rem; color: rgba(233, 228, 238, 0.7); }

/* =========================================================
   Rahmen & Hinweis
   ========================================================= */
.frame-grid {
  display: grid;
  gap: 1px;
  background: var(--psy-veil);
  border: 1px solid var(--psy-veil);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.frame-cell { background: var(--psy-void); padding: clamp(1.6rem, 3vw, 2.3rem); }
.frame-cell h3 { font-size: 1.1rem; margin-bottom: 0.8rem; }
.frame-cell p { font-size: 0.93rem; color: rgba(233, 228, 238, 0.7); }

.notice {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border: 1px solid rgba(182, 127, 58, 0.5);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 68ch;
}
.notice h3 { font-size: 1.1rem; margin-bottom: 0.9rem; color: var(--psy-bone); }
.notice p { font-size: 0.93rem; color: rgba(233, 228, 238, 0.76); }
.notice a { color: var(--psy-moon); }
/* Notrufnummern: große, eindeutige Tippflächen */
.notice a[href^="tel:"] {
  display: inline-block;
  white-space: nowrap;
  padding: 0.35rem 0;
  font-weight: 600;
}
.notice strong { font-variation-settings: 'wght' 600; font-weight: 400; }

/* =========================================================
   Teaser auf der Startseite
   ========================================================= */
.psy-teaser { padding-block: clamp(5rem, 10vw, 9rem); overflow: hidden; }
.psy-teaser__inner { align-items: center; }
.psy-teaser p { color: rgba(233, 228, 238, 0.75); max-width: 44ch; }

.psy-teaser__glyph {
  position: relative;
  aspect-ratio: 1;
  max-width: 320px;
  margin-inline: auto;
  width: 100%;
}
.psy-teaser__glyph span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--psy-veil);
  border-radius: 50%;
  animation: pulse-ring 9s ease-in-out infinite;
}
.psy-teaser__glyph span:nth-child(2) { inset: 14%; animation-delay: 1.1s; }
.psy-teaser__glyph span:nth-child(3) { inset: 28%; animation-delay: 2.2s; }
.psy-teaser__glyph span:nth-child(4) {
  inset: 42%;
  background: radial-gradient(circle, rgba(169, 163, 196, 0.5), transparent 70%);
  border-color: transparent;
  animation-delay: 3.3s;
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(0.96); opacity: 0.35; }
  50%      { transform: scale(1.04); opacity: 0.85; }
}

/* =========================================================
   Ruhemodus respektieren
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .psy::after,
  .psy-orb,
  .psy-teaser__glyph span,
  .track-hint::after,
  .psy-scroll-hint i { animation: none; }
  .psy-aura { transition: none; }
  .settle .w { opacity: 1; transform: none; filter: none; transition: none; }
  .breath.is-running .breath__core,
  .breath.is-running .breath__ring { animation: none; }
  .theme:nth-child(even) { transform: none; }
}


/* =========================================================
   Nachtrag Ausgabe 2 — schmalere Displaybreite, harte Kanten
   ========================================================= */
.psy h1, .psy h2, .psy .display-xl { font-variation-settings: 'wdth' 75, 'opsz' 96; }
/* Die H1 im Psy-Hero ist als Mono-Augenbraue gesetzt und behält ihre eigene Breite */
.psy h1.eyebrow { font-variation-settings: 'wdth' 87.5; }

.psy .ghost { --ghost: var(--psy-moon); }
.psy .rune { color: var(--psy-moon); }

/* Themenkarten: leicht rotiert, unterschiedlich breit */
@media (min-width: 900px) {
  .themes { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .theme { grid-column: span 3; }
  .theme:nth-child(1) { grid-column: 1 / 5; }
  .theme:nth-child(2) { grid-column: 6 / 10; }
  .theme:nth-child(3) { grid-column: 10 / 13; }
  .theme:nth-child(4) { grid-column: 2 / 6; }
  .theme:nth-child(5) { grid-column: 7 / 11; }
  .theme:nth-child(6) { grid-column: 1 / 4; }
  .theme:nth-child(7) { grid-column: 5 / 9; }
  .theme:nth-child(8) { grid-column: 9 / 13; }
  .theme:nth-child(even) { transform: translateY(clamp(1.5rem, 3vw, 3rem)); }
}

/* Sitzungsspur: Stationen unterschiedlich breit */
.stop:nth-child(3n+1) { flex-basis: min(78vw, 300px); }
.stop:nth-child(3n+2) { flex-basis: min(78vw, 390px); }
.stop:nth-child(3n+3) { flex-basis: min(78vw, 330px); }

/* Methodenzeilen: von oben nach unten schmaler werdende Displaybreite */
.method h3 { font-variation-settings: 'wdth' 92, 'opsz' 24; }
.method:nth-child(2) h3 { font-variation-settings: 'wdth' 86, 'opsz' 24; }
.method:nth-child(3) h3 { font-variation-settings: 'wdth' 82, 'opsz' 24; }
.method:nth-child(4) h3 { font-variation-settings: 'wdth' 78, 'opsz' 24; }
.method:nth-child(5) h3 { font-variation-settings: 'wdth' 75, 'opsz' 24; }

/* Rahmenraster ungleichmaessig */
@media (min-width: 900px) {
  .frame-grid { grid-template-columns: 1.3fr 1fr 1.1fr; }
}

/* =========================================================
   Signet im Psychotherapie-Bereich
   Mondgrau statt Kupfer, mit weichem Schein
   ========================================================= */
.psy .sigil { color: var(--psy-moon); }

.psy .sigil__glyph::after {
  content: '';
  position: absolute;
  inset: -38%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 163, 196, 0.20), transparent 66%);
  opacity: 0;
  transition: opacity 1.8s var(--ease) 0.4s;
}
.psy .sigil.is-in .sigil__glyph::after { opacity: 1; }

/* Ring läuft hier langsamer und in die andere Richtung */
.psy .sigil__ring,
.psy .sigil.is-in .sigil__ring {
  animation: sigil-turn-back 140s linear infinite;
}
@keyframes sigil-turn-back { to { transform: rotate(-360deg); } }

/* Zweiter, größerer Ring als stiller Widerhall */
.sigil__echo {
  position: absolute;
  inset: -22%;
  background: currentColor;
  opacity: 0.16;
  -webkit-mask-image: url('images/sigil-ring.svg');
  mask-image: url('images/sigil-ring.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: sigil-turn 200s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .psy .sigil__ring,
  .sigil__echo { animation: none !important; }
  .psy .sigil.is-in .sigil__glyph::after { opacity: 1; transition: none; }
}


/* Mobile-Optimierung (Stand 08.10.2026) */
@media (max-width: 640px) {
  .theme__no, .stop__phase, .track-hint, .breath__note { font-size: 0.72rem; }
  .breath__phase { font-size: 0.8rem; }
  /* Versetzte Themenkarten auf dem Handy bündig untereinander */
  .theme:nth-child(even) { transform: none; }
  .themes { padding-bottom: 0; }
  /* Atemanker kleiner, damit Text und Kreis gemeinsam auf den Bildschirm passen */
  .breath__stage { max-width: 260px; }
  .psy-teaser__glyph { max-width: 170px; }
}

/* Körnung reicht 120px über den Bereich hinaus — auch nach unten abschneiden,
   sonst schimmert sie in die Fußzeile. 'clip' hält position:sticky intakt. */
.psy { overflow: clip; }

/* Sitzungsspur: links nicht ausblenden, sonst wird die erste Karte angeschnitten */
.track {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 90%, transparent);
  mask-image: linear-gradient(to right, #000 0, #000 90%, transparent);
}

@media (max-width: 640px) {
  .psy-scroll-hint { display: none; }
  .theme__no { letter-spacing: 0.06em; }
  .psy-hero__actions { flex-direction: column; align-items: stretch; }
  .psy-hero__actions .btn { justify-content: center; }
}