/* Yoga-Welten: Innerer Weg, Wegweiser und Praxistimer
 * Version 1.0.0 – eigenständig, ohne externe Schriften oder Bibliotheken.
 */

:root {
  --yw-wine: var(--site-red, #760e0f);
  --yw-olive: var(--site-secondary, #809023);
  --yw-brown: var(--site-brown, #945620);
  --yw-ink: #20231f;
  --yw-muted: #62675f;
  --yw-paper: #fffdf9;
  --yw-cream: #f6f3e8;
  --yw-line: #ddd9ca;
  --yw-shadow: 0 0.6rem 1.8rem rgb(55 48 35 / 10%);
  --yw-radius: 1rem;
}

.yw-path,
.yw-path *,
.yw-path-card,
.yw-path-card *,
.yw-timer,
.yw-timer * {
  box-sizing: border-box;
}

/* Dauerhafte Übersichtsseite „Der innere Weg“ */
.yw-path {
  color: var(--yw-ink);
}

.yw-path__lead {
  margin: 0 0 2rem;
  padding: 1.35rem 1.5rem;
  border-left: 5px solid var(--yw-olive);
  background: linear-gradient(135deg, var(--yw-paper), var(--yw-cream));
  box-shadow: var(--yw-shadow);
}

.yw-path__lead p:last-child {
  margin-bottom: 0;
}

.yw-path__goals,
.yw-path__movements,
.yw-path__years {
  display: grid;
  gap: 1rem;
  margin: 1.3rem 0 2.2rem;
}

.yw-path__goals {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yw-path__movements {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yw-path__years {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yw-path__card,
.yw-path__year {
  min-width: 0;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--yw-line);
  border-radius: var(--yw-radius);
  background: #fff;
}

.yw-path__goal-number,
.yw-path__year-number {
  display: inline-flex;
  min-width: 2rem;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: #fff;
  background: var(--yw-olive);
  font-size: 0.82rem;
  font-weight: 800;
}

.yw-path__card h3,
.yw-path__year h3 {
  margin: 0 0 0.55rem !important;
  color: var(--yw-wine) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.3rem !important;
  line-height: 1.2 !important;
}

.yw-path__card p,
.yw-path__year p,
.yw-path__year li {
  font-size: 0.98rem;
  line-height: 1.55;
}

.yw-path__card p:last-child,
.yw-path__year p:last-child {
  margin-bottom: 0;
}

.yw-path__movement {
  position: relative;
  padding-left: 3.2rem;
}

.yw-path__movement::before {
  content: attr(data-short);
  position: absolute;
  top: 1.05rem;
  left: 1rem;
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--yw-olive) 55%, white);
  border-radius: 50%;
  color: var(--yw-olive);
  background: color-mix(in srgb, var(--yw-olive) 8%, white);
  font-size: 0.74rem;
  font-weight: 850;
}

.yw-path__year ul {
  margin: 0.8rem 0 0;
  padding-left: 1.15rem;
}

.yw-path__year li + li {
  margin-top: 0.35rem;
}

.yw-path__note {
  margin: 2rem 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--yw-brown) 28%, white);
  border-radius: var(--yw-radius);
  background: color-mix(in srgb, var(--yw-brown) 7%, white);
}

.yw-path__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.4rem 0 2rem;
}

.yw-path__button,
.yw-timer__button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  padding: 0.65rem 1rem;
  font: inherit;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.yw-path__button:hover,
.yw-timer__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.35rem 0.8rem rgb(0 0 0 / 12%);
}

.yw-path__button--primary,
.yw-timer__button--primary {
  color: #fff !important;
  background: var(--yw-olive);
}

.yw-path__button--secondary,
.yw-timer__button--secondary {
  color: var(--yw-wine) !important;
  border-color: var(--yw-wine);
  background: #fff;
}

/* Wiederverwendbarer Kasten in Beiträgen */
.yw-path-card {
  position: relative;
  margin: 2rem 0;
  overflow: hidden;
  border: 1px solid var(--yw-line);
  border-radius: var(--yw-radius);
  background: linear-gradient(145deg, #fff 0%, var(--yw-paper) 58%, var(--yw-cream) 100%);
  box-shadow: var(--yw-shadow);
}

.yw-path-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--yw-olive);
}

.yw-path-card__inner {
  padding: 1.25rem 1.35rem 1.35rem 1.55rem;
}

.yw-path-card__eyebrow {
  margin: 0 0 0.35rem !important;
  color: var(--yw-olive);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yw-path-card h2,
.yw-path-card h3 {
  margin: 0 0 0.85rem !important;
  color: var(--yw-wine) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.55rem !important;
  line-height: 1.2 !important;
}

.yw-path-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.yw-path-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  color: var(--yw-ink);
  background: color-mix(in srgb, var(--yw-olive) 11%, white);
  font-size: 0.8rem;
  font-weight: 700;
}

.yw-path-card__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1.2rem;
  margin: 0;
}

.yw-path-card__item {
  margin: 0;
}

.yw-path-card__item dt {
  margin: 0 0 0.15rem;
  color: var(--yw-olive);
  font-size: 0.79rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.yw-path-card__item dd {
  margin: 0;
  line-height: 1.52;
}

.yw-path-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--yw-line);
}

.yw-path-card__footer a {
  color: var(--yw-wine);
  font-weight: 750;
}

/* Allgemeiner Praxistimer */
.yw-timer {
  --yw-timer-progress: 0deg;
  width: min(100%, 620px);
  margin: 2rem auto;
  padding: 1.35rem;
  border: 1px solid var(--yw-line);
  border-radius: 1.2rem;
  background: linear-gradient(145deg, #fff, var(--yw-paper));
  box-shadow: var(--yw-shadow);
  text-align: center;
}

.yw-timer__eyebrow {
  margin: 0 0 0.35rem !important;
  color: var(--yw-olive);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yw-timer h2,
.yw-timer h3 {
  margin: 0 !important;
  color: var(--yw-wine) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.65rem !important;
  line-height: 1.2 !important;
}

.yw-timer__intro {
  max-width: 36rem;
  margin: 0.7rem auto 0 !important;
  color: var(--yw-muted);
  line-height: 1.55;
}

.yw-timer__dial {
  display: grid;
  width: 184px;
  height: 184px;
  place-items: center;
  margin: 1.25rem auto 1rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 63%, transparent 64%),
    conic-gradient(var(--yw-olive) var(--yw-timer-progress), #e8e6dc var(--yw-timer-progress));
}

.yw-timer__time {
  color: var(--yw-wine);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1;
}

.yw-timer__status {
  min-height: 1.55rem;
  margin: 0 0 0.8rem !important;
  color: var(--yw-muted);
  font-size: 0.9rem;
}

.yw-timer__presets,
.yw-timer__controls,
.yw-timer__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.yw-timer__presets {
  margin: 0 0 0.9rem;
}

.yw-timer__preset {
  min-width: 3.2rem;
  min-height: 2.25rem;
  border: 1px solid var(--yw-line);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  color: var(--yw-wine);
  background: #fff;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 750;
  cursor: pointer;
}

.yw-timer__preset[aria-pressed="true"] {
  color: #fff;
  border-color: var(--yw-olive);
  background: var(--yw-olive);
}

.yw-timer__options {
  margin-top: 0.9rem;
  color: var(--yw-muted);
  font-size: 0.86rem;
}

.yw-timer__sound {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  cursor: pointer;
}

.yw-timer__sound input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--yw-olive);
}

.yw-timer__finish {
  margin: 1rem 0 0 !important;
  color: var(--yw-wine);
  font-weight: 750;
}

.yw-timer.is-finished .yw-timer__dial {
  animation: yw-timer-finish 800ms ease-in-out 2;
}

.yw-timer__button:focus-visible,
.yw-timer__preset:focus-visible,
.yw-path__button:focus-visible,
.yw-path-card a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--yw-olive) 48%, white);
  outline-offset: 3px;
}

@keyframes yw-timer-finish {
  50% { transform: scale(1.035); }
}

@media (max-width: 760px) {
  .yw-path__goals,
  .yw-path__movements,
  .yw-path__years,
  .yw-path-card__grid {
    grid-template-columns: 1fr;
  }

  .yw-path__years {
    gap: 1.2rem;
  }
}

@media (max-width: 480px) {
  .yw-timer {
    padding: 1.1rem 0.9rem;
  }

  .yw-timer__dial {
    width: 158px;
    height: 158px;
  }

  .yw-timer__controls .yw-timer__button {
    flex: 1 1 7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yw-path__button,
  .yw-timer__button,
  .yw-timer__dial {
    animation: none !important;
    transition: none !important;
  }
}