/* Leilani – Kartenorakel
   Uebernimmt Schrift und Farbe der umgebenden Seite. Anpassen ueber:
   --lo-gold, --lo-gold-hell, --lo-titelschrift, --lo-flaeche */
.lo {
  --lo-gold: #e0ae68;
  --lo-gold-dunkel: #b8813a;
  --lo-titelschrift: var(--theme-title-font, "Bodoni Moda"), Didot, Georgia, serif;
  --lo-flaeche: rgba(255, 255, 255, .04);
  --lo-linie: color-mix(in srgb, var(--lo-gold) 38%, transparent);
  --lo-w: clamp(52px, 8.4vw, 118px);           /* Breite einer Faecherkarte */
  --lo-h: calc(var(--lo-w) * 1.428);
  --lo-span: 72deg;                            /* Oeffnung des Faechers */
  position: relative;
  color: inherit;
}
.lo *, .lo *::before, .lo *::after { box-sizing: border-box; }
.lo [hidden] { display: none !important; }

/* Typografie */
.lo-kicker { margin: 0 0 .6rem; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--lo-gold); }
.lo-titel { margin: 0 0 .7rem; font-family: var(--lo-titelschrift); font-variation-settings: "opsz" 28; font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.12; color: inherit; }
.lo-titel.is-gross { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.lo-text { margin: 0 auto; max-width: 38rem; opacity: .86; }
.lo-fluestern { margin: 0 0 1.2rem; font-family: var(--lo-titelschrift); font-style: italic; font-size: 1.2rem; color: var(--lo-gold); }
.lo-hinweis { margin: .9rem 0 0; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.lo-fehler { text-align: center; opacity: .8; }

.lo-kopf, .lo-steuer { text-align: center; }
.lo-kopf { margin-bottom: 1.5rem; }

/* Knoepfe */
.lo-reihe { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.4rem; }
.lo-knopf {
  appearance: none; cursor: pointer; border: 0; border-radius: var(--config-button-radius, 2px);
  padding: .95em 1.6em; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #1f1915; background: linear-gradient(180deg, #f3d199 0%, #d9a45c 45%, #ad732c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -14px rgba(184,129,58,.9);
  transition: filter .2s, transform .2s;
}
.lo-knopf:hover { filter: brightness(1.07); transform: translateY(-1px); }
.lo-knopf:focus-visible { outline: 2px solid var(--lo-gold); outline-offset: 3px; }
.lo-knopf.is-umriss { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.lo-knopf.is-umriss:hover { color: var(--lo-gold); }
.lo-knopf.is-leise { background: transparent; color: var(--lo-gold); box-shadow: inset 0 0 0 1px var(--lo-linie); }

/* Buehne und Faecher */
.lo-buehne { position: relative; padding-top: 1rem; }
.lo-schein {
  position: absolute; left: 50%; top: 45%; width: min(780px, 92%); aspect-ratio: 2 / 1; translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lo-gold) 22%, transparent), transparent);
  pointer-events: none; filter: blur(6px);
}
.lo-faecher { position: relative; height: calc(var(--lo-h) * 1.95); margin-inline: auto; }
.lo-karte {
  position: absolute; left: 50%; top: calc(var(--lo-h) * .18);
  width: var(--lo-w); aspect-ratio: 720 / 1028; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--lo-w) * .07); overflow: hidden;
  box-shadow: 0 6px 14px -6px rgba(10,7,5,.7), 0 0 0 1px rgba(224,174,104,.25);
  transform-origin: 50% 380%;
  transform: translateX(-50%) rotate(calc(var(--lo-pos) * var(--lo-span)));
  transition: transform .75s cubic-bezier(.2,.7,.2,1) calc(var(--lo-i) * 9ms), opacity .45s ease, filter .3s;
}
.lo-karte img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lo-karte:not(:disabled):hover,
.lo-karte:not(:disabled):focus-visible { transform: translateX(-50%) rotate(calc(var(--lo-pos) * var(--lo-span))) translateY(-16%); filter: brightness(1.12); z-index: 50; outline: none; }
.lo-karte:disabled { cursor: default; }
.lo-faecher.is-mischen .lo-karte { transform: translateX(-50%) rotate(0deg) translateY(4%); transition-delay: calc((var(--lo-n) - var(--lo-i)) * 6ms); }
.lo-karte.is-gezogen { opacity: 0; transform: translateX(-50%) rotate(calc(var(--lo-pos) * var(--lo-span))) translateY(-60%); pointer-events: none; }
.lo-buehne.hat-wahl .lo-karte { opacity: .28; filter: saturate(.6); }
.lo-buehne.hat-wahl .lo-karte.is-gewaehlt { opacity: 0; }

/* Die gezogene Karte: gross, mit Umdrehen */
.lo-enthuellung { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.lo-gross {
  pointer-events: auto; cursor: pointer; width: min(250px, 54vw); aspect-ratio: 720 / 1028; perspective: 1400px;
  animation: lo-auftauchen .7s cubic-bezier(.2,.7,.2,1) both;
}
.lo-gross-innen { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3,.7,.2,1) .15s; }
.lo-gross.is-offen .lo-gross-innen { transform: rotateY(180deg); }
.lo-seite { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(10,7,5,.85), 0 0 0 1px rgba(224,174,104,.4); }
.lo-seite img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lo-vorn { transform: rotateY(180deg); }
.lo-gross:focus-visible { outline: 2px solid var(--lo-gold); outline-offset: 6px; border-radius: 14px; }
@keyframes lo-auftauchen { from { opacity: 0; transform: translateY(40px) scale(.7); } }
.lo-buehne.hat-wahl { min-height: calc(min(250px, 54vw) * 1.43 + 1rem); }

/* Fortschritt in den Legungen */
.lo-punkte { display: flex; gap: .55rem; justify-content: center; margin-top: .9rem; }
.lo-punkte i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--lo-gold); }
.lo-punkte i.is-voll { background: var(--lo-gold); }
.lo-punkte i.is-jetzt { box-shadow: inset 0 0 0 1px var(--lo-gold), 0 0 0 4px color-mix(in srgb, var(--lo-gold) 25%, transparent); }

/* Ausgelegte Karten */
.lo-legung { margin: 1rem auto 0; }
.lo-legekarte { appearance: none; border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; animation: lo-auftauchen .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--lo-n) * 120ms); }
.lo-legekarte img { display: block; width: 100%; aspect-ratio: 720 / 1028; object-fit: cover; border-radius: 10px; box-shadow: 0 18px 34px -18px rgba(10,7,5,.85), 0 0 0 1px rgba(224,174,104,.35); transition: transform .3s; }
.lo-legekarte:hover img, .lo-legekarte:focus-visible img { transform: translateY(-6px); }
.lo-legekarte:focus-visible { outline: none; }
.lo-legetext { display: block; margin-top: .55rem; line-height: 1.3; }
.lo-legetext b { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lo-gold); font-weight: 600; }
.lo-legetext small { font-family: var(--lo-titelschrift); font-size: .95rem; }
.lo-legung.is-ahninnen { display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); grid-template-rows: repeat(3, auto); gap: 1rem 1.6rem; justify-content: center; }
.lo-legung.is-traum { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.5rem, 2vw, 1.4rem); }
.lo-legung.is-traum .lo-legekarte { width: clamp(88px, 15vw, 150px); }
.lo-legung.is-traum .lo-platz-crescent-bottom { margin-top: 0; rotate: -14deg; }
.lo-legung.is-traum .lo-platz-crescent-low    { margin-top: 3.2rem; rotate: -7deg; }
.lo-legung.is-traum .lo-platz-crescent-center { margin-top: 4.6rem; }
.lo-legung.is-traum .lo-platz-crescent-high   { margin-top: 3.2rem; rotate: 7deg; }
.lo-legung.is-traum .lo-platz-crescent-top    { margin-top: 0; rotate: 14deg; }

/* Botschaft */
.lo-botschaft {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start;
  margin-top: clamp(2.5rem, 6vw, 5rem); padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--lo-flaeche); border: 1px solid var(--lo-linie); border-radius: var(--config-border-radius, 4px);
  scroll-margin-top: 110px;
}
.lo-botschaft-bild { position: sticky; top: 120px; }
.lo-botschaft-bild img { display: block; width: 100%; border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(10,7,5,.85), 0 0 0 1px rgba(224,174,104,.35); }
.lo-botschaft-text { text-align: left; }
.lo-botschaft-text p { line-height: 1.7; }
.lo-platzhinweis { font-style: italic; opacity: .8; margin-top: -.3rem; }
.lo-ornament { color: var(--lo-gold); margin: .2rem 0 1.2rem; letter-spacing: .5em; }
.lo-ritual { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--lo-linie); }
.lo-botschaft .lo-reihe { justify-content: flex-start; }

/* Vertiefende Legungen */
.lo-legungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: clamp(3rem, 7vw, 6rem); scroll-margin-top: 110px; }
.lo-legungen-kopf { grid-column: 1 / -1; text-align: center; margin-bottom: .5rem; }
.lo-methode { padding: clamp(1.4rem, 3vw, 2.4rem); border: 1px solid var(--lo-linie); border-radius: var(--config-border-radius, 4px); background: var(--lo-flaeche); display: flex; flex-direction: column; }
.lo-methode.is-aktiv { box-shadow: inset 0 0 0 1px var(--lo-gold); }
.lo-methode p { opacity: .86; line-height: 1.65; }
.lo-methode ol { list-style: none; counter-reset: lo; padding: 0; margin: .6rem 0 1.6rem; }
.lo-methode li { counter-increment: lo; display: grid; grid-template-columns: 2rem 1fr; padding: .7rem 0; border-top: 1px solid var(--lo-linie); }
.lo-methode li::before { content: counter(lo); grid-row: span 2; font-family: var(--lo-titelschrift); color: var(--lo-gold); font-size: 1.2rem; }
.lo-methode li b { font-weight: 600; }
.lo-methode li span { opacity: .75; font-size: .92em; }
.lo-methode .lo-knopf { align-self: flex-start; margin-top: auto; }

/* Klein */
@media (max-width: 760px) {
  .lo { --lo-w: clamp(40px, 11vw, 64px); --lo-span: 64deg; }
  .lo-botschaft { grid-template-columns: 1fr; }
  .lo-botschaft-bild { position: static; max-width: 240px; margin-inline: auto; }
  .lo-legungen { grid-template-columns: 1fr; }
  .lo-legung.is-ahninnen { grid-template-columns: repeat(3, minmax(0, 96px)); gap: .8rem; }
  .lo-legung.is-traum { flex-wrap: wrap; }
  .lo-legung.is-traum .lo-legekarte { width: 28%; margin-top: 0 !important; rotate: 0deg !important; }
  .lo-legetext small { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-karte, .lo-gross, .lo-gross-innen, .lo-legekarte { transition: none !important; animation: none !important; }
}
@media (max-width: 760px) {
  .lo-legetext b { letter-spacing: .05em; font-size: .66rem; }
}