/* ══════════════════════════════════════════════════════════════════════
   KLANGREISEN-Kacheln · „Klick zum Abspielen"
   ----------------------------------------------------------------------
   Jede Kachel zeigt nur das Cover + einen Play-Knopf. Der echte
   Mixcloud-Player (und damit jede Datenübertragung an Mixcloud) wird
   ERST geladen, wenn jemand bewusst auf die Reise klickt.
   → schnelle Seite, egal ob 8 oder 500 Reisen · datensparsam (DSGVO).
   Nutzt die Farb-/Schrift-Variablen der jeweiligen Seite (:root).
══════════════════════════════════════════════════════════════════════ */

/* Cover-Vorschau als Knopf, füllt den 16:10-Rahmen der .journey .embed */
.km-facade{
  position:absolute; inset:0; width:100%; height:100%;
  padding:0; border:0; margin:0; cursor:pointer; display:block;
  background:#0b0e1a; overflow:hidden; font:inherit; color:inherit;
}
.km-facade img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1);
}
.km-facade:hover img,
.km-facade:focus-visible img{ transform:scale(1.045); }

.km-veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,14,26,.04) 35%, rgba(11,14,26,.46));
}

.km-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#1a1305;
  background:linear-gradient(135deg,#e6b842,#bd861d);
  box-shadow:0 12px 28px -8px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s;
}
.km-play svg{ margin-left:3px; }
.km-facade:hover .km-play,
.km-facade:focus-visible .km-play{
  transform:translate(-50%,-50%) scale(1.09);
  box-shadow:0 18px 38px -10px rgba(227,167,43,.72);
}
.km-facade:focus-visible{ outline:2px solid var(--gold,#9a6a12); outline-offset:3px; }

.km-cue{
  position:absolute; bottom:.65rem; right:.9rem;
  font-family:'Spectral',serif; font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:#fff; opacity:.9;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* Genre-Zeile in der Karte */
.km-genre{
  font-family:'Spectral',serif !important;
  font-size:.68rem !important; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold,#9a6a12) !important; margin-top:.55rem !important;
}

/* dezenter Hinweis unter dem Raster */
.km-hint{
  margin-top:1.6rem; font-size:.8rem; line-height:1.6;
  color:var(--cream-faint, rgba(59,51,37,.6)); max-width:60ch;
}

/* ───────────── Archiv-Seite: Kategorien als goldene Klangwelle ───────────── */
.km-wave-archive{ margin-top:.4rem; }
.km-catmain{ min-width:0; margin-top:.6rem; }   /* erlaubt dem Kachel-Raster zu schrumpfen */

/* Klangwelle (Desktop/Tablet) */
.km-wave{ padding:.2rem 0 1.9rem; }
.km-wave-caption{
  text-align:center; margin-bottom:.2rem; min-height:3em;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.km-wave-title{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:600;
  font-size:clamp(1.5rem,3vw,2.25rem); color:var(--gold-soft,#a4760e); line-height:1.1;
}
.km-wave-sub{
  font-family:'Spectral',serif; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--cream-faint,rgba(59,51,37,.6));
}
.km-wave-stage{ position:relative; width:100%; height:clamp(132px,15vw,178px); }
.km-wave-line{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:.9; }

.km-node{
  position:absolute; transform:translate(-50%,-50%);
  padding:11px; margin:0; border:0; background:transparent; cursor:pointer;
  line-height:0; border-radius:50%;
}
/* ── kleine Planeten (unser Sonnensystem): Glanzlicht + Nachtseite je Kugel ── */
.km-node-dot{
  --b1:#f2cd6e; --b2:#d29a37; --b3:#a56e1e;   /* Körperfarben, je Planet überschrieben */
  position:relative;
  display:block; width:15px; height:15px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.30) 13%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 73% 80%, rgba(0,0,0,.44) 0%, rgba(0,0,0,0) 56%),
    radial-gradient(circle at 50% 46%, var(--b1) 0%, var(--b2) 56%, var(--b3) 100%);
  box-shadow:0 3px 9px -3px rgba(0,0,0,.5);
  transition:transform .35s var(--ease,ease), box-shadow .35s var(--ease,ease), filter .35s;
}
/* Sonne = „Alle" (etwas größer, goldenes Leuchten) */
.km-node-dot.km-pl-sun{
  --b1:#fff8e0; --b2:#ffd45f; --b3:#f2a72e;
  width:17px; height:17px;
  box-shadow:0 0 0 3px rgba(255,210,90,.22), 0 0 16px 3px rgba(255,196,60,.6), 0 3px 9px -3px rgba(0,0,0,.4);
}
/* Farbwelten */
.km-node-dot.km-pl-mercury{ --b1:#dcd3c8; --b2:#9a8f80; --b3:#615849; }
.km-node-dot.km-pl-venus{   --b1:#f8edca; --b2:#e6bd72; --b3:#b3853a; }
.km-node-dot.km-pl-mars{    --b1:#f2b48c; --b2:#cf5a30; --b3:#8b3216; }
.km-node-dot.km-pl-uranus{  --b1:#dcf5f2; --b2:#93d7d3; --b3:#559f9c; }
.km-node-dot.km-pl-neptune{ --b1:#c2d6f5; --b2:#3f6fc9; --b3:#213f88; }
/* Erde: Ozean + Landmassen */
.km-node-dot.km-pl-earth{
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.26) 13%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 73% 80%, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 56%),
    radial-gradient(45% 34% at 62% 40%, #6fae5a 0%, rgba(111,174,90,0) 72%),
    radial-gradient(38% 28% at 34% 66%, #5c9a4e 0%, rgba(92,154,78,0) 74%),
    radial-gradient(circle at 50% 46%, #a9d4f0 0%, #3f86c4 55%, #1d5488 100%);
}
/* Jupiter: Bänder + roter Fleck */
.km-node-dot.km-pl-jupiter{
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.22) 13%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 73% 80%, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 56%),
    radial-gradient(22% 13% at 64% 62%, #b64a32 0%, rgba(182,74,50,0) 78%),
    repeating-linear-gradient(0deg, #e9c99c 0, #e9c99c 2px, #c99b64 2px, #c99b64 3px, #ddb583 3px, #ddb583 5px, #bd8f57 5px, #bd8f57 6px);
}
/* Saturn: heller Körper + Ring */
.km-node-dot.km-pl-saturn{ --b1:#f4e7be; --b2:#ddbe83; --b3:#a98a52; }
.km-node-dot.km-pl-saturn::after{
  content:""; position:absolute; left:50%; top:50%;
  width:235%; height:82%;
  transform:translate(-50%,-50%) rotate(-17deg);
  border-radius:50%;
  border:1.6px solid rgba(224,196,128,.9);
  box-shadow:0 0 3px rgba(224,196,128,.45);
  pointer-events:none;
}
.km-node-label{
  position:absolute; top:calc(50% + 16px); left:50%; transform:translateX(-50%);
  white-space:nowrap; line-height:1;
  font-family:'Spectral',serif; font-size:.8rem; letter-spacing:.02em;
  color:var(--cream-dim,rgba(59,51,37,.72)); transition:color .3s var(--ease,ease);
}
.km-node:hover .km-node-dot,
.km-node:focus-visible .km-node-dot{
  transform:scale(1.32);
  box-shadow:0 0 0 4px rgba(255,255,255,.20), 0 6px 16px -4px rgba(0,0,0,.5);
  filter:brightness(1.06);
}
.km-node:hover .km-node-label,
.km-node:focus-visible .km-node-label{ color:var(--gold-soft,#a4760e); }
.km-node:focus-visible{ outline:none; }
.km-node[aria-current="true"] .km-node-dot{
  transform:scale(1.5);
  box-shadow:0 0 0 5px rgba(230,184,66,.24), 0 0 22px 3px rgba(230,184,66,.55);
}
.km-node[aria-current="true"] .km-node-label{ color:var(--gold-deep,#7d5417); font-weight:600; }

/* Senkrechte Klangwelle (nur Handy): Welle fließt oben → unten, Namen rechts daneben */
.km-wave-v{ display:none; position:relative; margin:.4rem 0 1.4rem; }
.km-wave-v-line{
  position:absolute; left:0; top:0; width:64px; height:100%;
  overflow:visible; opacity:.9; pointer-events:none;
}
.km-node-v{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.2rem; width:100%; height:48px;
  border:0; background:transparent; cursor:pointer; text-align:left; padding:0; margin:0;
}
.km-node-v .km-vcell{ position:relative; flex:0 0 64px; align-self:stretch; }
.km-node-v .km-node-dot{ position:absolute; top:50%; transform:translate(-50%,-50%); }
.km-node-vlabel{
  flex:1 1 auto; font-family:'Spectral',serif; font-size:1rem; letter-spacing:.01em;
  color:var(--cream-dim,rgba(59,51,37,.72)); transition:color .3s var(--ease,ease);
}
.km-node-vcount{
  flex:0 0 auto; font-size:.74rem; color:var(--gold,#9a6a12); opacity:.6;
  font-variant-numeric:tabular-nums; padding-right:.3rem;
}
.km-node-v:focus-visible{ outline:2px solid var(--gold,#9a6a12); outline-offset:2px; border-radius:6px; }
.km-node-v[aria-current="true"] .km-node-vlabel{ color:var(--gold-deep,#7d5417); font-weight:600; }
.km-node-v[aria-current="true"] .km-node-vcount{ color:var(--gold-deep,#7d5417); opacity:.8; }
.km-node-v[aria-current="true"] .km-node-dot{
  transform:translate(-50%,-50%) scale(1.5);
  box-shadow:0 0 0 5px rgba(230,184,66,.24), 0 0 20px 2px rgba(230,184,66,.55);
}

@media (max-width:760px){
  .km-wave{ display:none; }
  .km-wave-v{ display:block; }
}

.km-result-head{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;
  font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--cream,#3b3325);
  margin:.2rem 0 1.2rem;
}
.km-tiles .grid-journeys{ animation:km-acc-in .45s cubic-bezier(.22,.61,.36,1) both; }
@keyframes km-acc-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .km-tiles .grid-journeys{ animation:none; } }

/* kleinere Kacheln im Archiv */
.grid-journeys.compact{ grid-template-columns:repeat(auto-fill,minmax(185px,1fr)); gap:1.1rem; margin-top:0; }
.grid-journeys.compact .km-play{ width:48px; height:48px; }
.grid-journeys.compact .km-cue{ font-size:.62rem; bottom:.5rem; right:.65rem; }
.grid-journeys.compact .meta{ padding:.8rem 1rem 1rem; }
.grid-journeys.compact .meta h3{ font-size:1.05rem; }
.grid-journeys.compact .meta p{ font-size:.82rem; line-height:1.45; margin-top:.25rem; }
.grid-journeys.compact .km-genre{ font-size:.62rem !important; margin-top:.45rem !important; }

/* ───────────── Startseite: Karussell (3 nebeneinander, nur per Pfeil) ───────────── */
.km-carousel{ --km-gap:1.5rem; --km-visible:3; margin-top:1rem; }
.km-stage{ display:flex; align-items:center; gap:.5rem; }

.km-viewport{
  flex:1 1 auto; overflow-x:auto; overflow-y:hidden; min-width:0;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                 /* Firefox: Scrollbalken aus */
}
.km-viewport::-webkit-scrollbar{ display:none; }  /* WebKit: Scrollbalken aus */
.km-viewport:focus-visible{ outline:2px solid var(--gold,#9a6a12); outline-offset:4px; border-radius:6px; }

.km-track{ display:flex; gap:var(--km-gap); }
.km-track > .journey{
  flex:0 0 calc((100% - (var(--km-visible) - 1) * var(--km-gap)) / var(--km-visible));
  scroll-snap-align:start;
}

.km-arrow{
  flex:0 0 auto; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0; line-height:1;
  font-family:'Spectral',serif; font-size:1.7rem;
  color:#1a1305; background:linear-gradient(135deg,#e6b842,#bd861d); border:0;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.km-arrow:hover{ transform:scale(1.09); box-shadow:0 18px 38px -12px rgba(227,167,43,.7); }
.km-arrow:focus-visible{ outline:2px solid var(--gold,#9a6a12); outline-offset:3px; }
.km-arrow[hidden]{ display:none; }

.km-dots{ display:flex; justify-content:center; gap:.55rem; margin-top:1.3rem; }
.km-dots[hidden]{ display:none; }
.km-dot{
  width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--gold,#9a6a12); background:transparent;
  transition:background .3s, transform .3s, border-color .3s;
}
.km-dot[aria-current="true"]{
  background:linear-gradient(135deg,#e6b842,#bd861d); border-color:transparent; transform:scale(1.2);
}
.km-dot:focus-visible{ outline:2px solid var(--gold,#9a6a12); outline-offset:2px; }

@media (max-width:820px){ .km-carousel{ --km-visible:2; } }
@media (max-width:560px){
  .km-carousel{ --km-visible:1; }
  .km-arrow{ width:40px; height:40px; font-size:1.5rem; }
  .km-stage{ gap:.3rem; }
}
@media (prefers-reduced-motion:reduce){ .km-viewport{ scroll-behavior:auto; } }