/* ═══════════ TAGESKARTE — das Soul-Grow-Set live ═══════════ */

/* Hero-CTA zur Karte */
.hero-cta {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 26px;
  font-family: var(--serif); font-size: .82rem; letter-spacing: .14em;
  color: var(--gold-hi); text-decoration: none;
  border: 1px solid var(--gold-lo); border-radius: 99px;
  padding: 13px 26px;
  background: rgba(212, 175, 55, .07);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.hero-cta:hover { border-color: var(--gold); box-shadow: 0 0 26px rgba(226, 184, 62, .25); transform: translateY(-2px); }

/* Live-Links in den Welten-Karten */
.world-live { margin-top: 14px; font-size: .85rem; }
.world-live a { text-decoration: none; }
.world-live a:hover { text-decoration: underline; }

.tageskarte { text-align: center; }
.karte-buehne { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* An-die-Hand-nehmen-Block unter der offenen Karte (baut tageskarte.js dynamisch) */
.karte-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -6px; }
.karte-cta-gold {
  display: inline-block; max-width: 420px;
  border: 1px solid var(--gold); border-radius: 18px;
  padding: 14px 22px;
  background: linear-gradient(165deg, rgba(226, 184, 62, .12), rgba(154, 122, 34, .05));
  box-shadow: 0 0 28px rgba(226, 184, 62, .16);
  color: var(--text); font-size: .88rem; line-height: 1.5; text-decoration: none;
  transition: box-shadow .3s, border-color .3s, transform .3s;
  animation: ctain .5s ease;
}
.karte-cta-gold strong { color: var(--gold-hi); }
.karte-cta-gold:hover { box-shadow: 0 0 40px rgba(226, 184, 62, .3); transform: translateY(-2px); }
.karte-cta-frei { color: var(--muted); font-size: .8rem; }
.karte-cta-check { color: var(--gold); font-size: .86rem; letter-spacing: .04em; animation: ctain .5s ease; }
.karte-cta-link {
  color: var(--gold-hi); font-size: .84rem; letter-spacing: .06em; text-decoration: none;
  border-bottom: 1px dashed var(--gold-lo); padding-bottom: 2px;
}
.karte-cta-link:hover { border-bottom-style: solid; }
@keyframes ctain { from { opacity: 0; transform: translateY(8px); } }

/* Weg in die Tageskarten-Welt (Homepage-Sektion) */
.karte-welt-link {
  font-size: .85rem; letter-spacing: .06em;
}
.karte-welt-link a { color: var(--gold); text-decoration: none; border-bottom: 1px dashed var(--gold-lo); padding-bottom: 2px; }
.karte-welt-link a:hover { color: var(--gold-hi); border-bottom-style: solid; }

/* Topic-Chips mit Erklärsatz (Seite /tageskarte/) */
.topics-erklaert { list-style: none; padding: 0; display: grid; gap: 14px; }
.topics-erklaert li { display: flex; gap: 14px; align-items: flex-start; padding-left: 0; }
.topics-erklaert li::before { content: none; } /* page.css-✦ aus — das Emoji ist der Marker */
.topics-erklaert .topic-emoji { font-size: 1.35rem; flex: none; filter: drop-shadow(0 0 12px rgba(226, 184, 62, .35)); }
.topics-erklaert strong { color: var(--gold); font-weight: 600; font-size: .92rem; letter-spacing: .04em; }
.topics-erklaert p { color: var(--muted); font-size: .86rem; margin: 2px 0 0; }

.karte {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 2 / 3;
  perspective: 1400px;
}
/* Reststapel hinter der Karte */
.karte::before, .karte::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(165deg, #121009, #0a0806);
}
.karte::before { transform: rotate(-4deg) translate(-9px, 7px); }
.karte::after { transform: rotate(3deg) translate(9px, 5px); }

.karte-flip {
  display: block; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: inherit;
  -webkit-tap-highlight-color: transparent;
}
.karte-flip:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 20px; }

.karte-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.4, 0, .18, 1);
}
.karte.flipped .karte-inner { transform: rotateY(180deg); }
.karte.instant .karte-inner { transition: none; }

.karte-back, .karte-front {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: 20px; border: 1px solid var(--gold-lo);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 26px 22px;
  overflow: hidden;
}
.karte-back {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(226, 184, 62, .14), transparent 60%),
    linear-gradient(165deg, #16120a 0%, #0b0906 90%);
  box-shadow: inset 0 0 0 6px #0b0906, inset 0 0 0 7px var(--gold-lo);
}
.karte-back svg { width: 60%; color: var(--gold); }
.karte-back svg path { stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.karte-back-brand { font-family: var(--serif); letter-spacing: .3em; font-size: .6rem; color: var(--muted); margin-top: 20px; }
.karte-back-line {
  font-family: 'Vibes', cursive; font-size: 1.6rem; color: var(--gold); margin-top: 2px;
  text-shadow: 0 0 16px rgba(226, 184, 62, .45);
}
.karte-back-hint { position: absolute; bottom: 20px; font-size: .68rem; color: var(--muted); letter-spacing: .1em; }

.karte-front {
  transform: rotateY(180deg);
  background:
    radial-gradient(ellipse 100% 55% at 50% 115%, rgba(154, 122, 34, .16), transparent 65%),
    linear-gradient(160deg, #14110a 0%, #0d0b07 85%);
  box-shadow: inset 0 0 0 6px #0d0b07, inset 0 0 0 7px var(--gold-lo), 0 0 44px rgba(226, 184, 62, .18);
  justify-content: space-between;
}
.karte-topic {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px;
}
.karte-mitte { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.karte-titel {
  font-family: 'Vibes', cursive; font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.15rem); color: var(--gold-hi);
  text-shadow: 0 0 22px rgba(226, 184, 62, .4);
}
.karte-text { color: var(--text); font-size: .93rem; line-height: 1.6; }
.karte-foot { font-family: var(--serif); font-size: .58rem; letter-spacing: .34em; color: var(--gold-lo); }

/* Ziehen: kurzes Mischen · Hinweis: kurzes Wackeln */
@keyframes karteshuffle {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(-7px, 3px) rotate(-2.4deg); }
  55% { transform: translate(8px, -4px) rotate(2deg); }
  80% { transform: translate(-4px, 2px) rotate(-1.2deg); }
}
.karte.shuffle { animation: karteshuffle .6s ease-in-out; }
@keyframes kartenudge {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-1.6deg); }
  65% { transform: rotate(1.4deg); }
}
.karte.nudge { animation: kartenudge .45s ease-in-out; }

.karte-status { color: var(--gold); font-size: .92rem; min-height: 1.5em; font-family: var(--marker); }
.karte-hint { color: var(--muted); font-size: .82rem; max-width: 440px; }
.karte-hint strong { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .karte-inner { transition: none; }
  .karte.shuffle, .karte.nudge { animation: none; }
  .hero-cta { transition: none; }
  .karte-cta-gold, .karte-cta-check { animation: none; }
}