/* ============================================================
   Dein Atem-Reset – Kurs-Styles
   Ergänzt /css/style.css (Design-System bleibt führend)
   ============================================================ */

/* ── Atemball ── */
.ak-ball { text-align: center; margin: 2.5rem auto; max-width: 420px; }

.ak-ball-stage {
  position: relative;
  width: min(300px, 70vw);
  margin: 0 auto;
  cursor: pointer;
}

.ak-ball-svg { width: 100%; height: auto; display: block; }

.ak-ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
}
.ak-ring-gold {
  fill: none;
  stroke: #C4A050;
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.3s linear;
}
.ak-halo {
  fill: var(--sage-light);
  opacity: 0.35;
}
.ak-core {
  fill: var(--sage-bg);
  stroke: var(--sage-dark);
  stroke-width: 2;
}
.ak-ball-stage.is-running .ak-core { fill: #DCE9DF; }

.ak-ball-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: 0 15%;
}
.ak-phase {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--sage-dark);
  line-height: 1.3;
}
.ak-count {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 500;
  color: var(--sage-dark);
  line-height: 1;
  min-height: 3rem;
}
.ak-demo-text .ak-count { display: none; }
.ak-demo-text .ak-phase { font-size: 1.1rem; color: var(--gray); }

/* Zentrierung über inset+margin statt transform — der Hover-Effekt der Website
   (translateY(-2px)) überschreibt transform und würde den Button sonst verschieben */
.ak-start {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  white-space: nowrap;
}

.ak-controls { margin-top: 1.5rem; }
.ak-durations {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.ak-dur {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-btn);
  border: 1.5px solid var(--sage-dark);
  background: transparent;
  color: var(--sage-dark);
  cursor: pointer;
  transition: var(--transition);
  min-height: 44px;
}
.ak-dur:hover { background: var(--sage-bg); }
.ak-dur.is-active { background: var(--sage-dark); color: var(--white); }
.ak-status {
  font-size: 0.85rem;
  color: var(--gray-light);
  min-height: 1.4em;
}

/* ── CP-Timer ── */
.ak-cp {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2.5rem 2rem;
  margin: 2.5rem 0;
}
.ak-cp-display { margin-bottom: 1.5rem; }
.ak-cp-secs {
  font-family: var(--font-heading);
  font-size: 4.5rem;
  font-weight: 500;
  color: var(--sage-dark);
  line-height: 1;
  display: block;
}
.ak-cp-unit {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--earth);
}
.ak-cp-btn.ak-cp-running { background: var(--earth); }
.ak-cp-cta { display: inline-block; margin: 1.25rem 0 0.5rem; }

/* Wert-Skala (Einordnung ohne Bewertung — nur sage-Töne, keine Warnfarben) */
.ak-scale { margin: 1.25rem 0 1.75rem; }
.ak-scale-bar {
  position: relative;
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: visible;
}
.ak-seg { flex: 1; }
.ak-seg:nth-child(1) { background: #E6EEE8; border-radius: 7px 0 0 7px; }
.ak-seg:nth-child(2) { background: #C8D8CA; }
.ak-seg:nth-child(3) { background: #8FB49B; }
.ak-seg:nth-child(4) { background: #2D5C3C; border-radius: 0 7px 7px 0; }
.ak-scale-marker {
  position: absolute;
  top: -5px;
  width: 4px;
  height: 24px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--charcoal);
  box-shadow: 0 0 0 2px var(--white);
}
.ak-scale-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--gray-light);
  margin-top: 0.4rem;
}
.ak-cp-hint { font-size: 0.9rem; color: var(--gray); margin-top: 1rem; }
.ak-cp-result {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  text-align: left;
}
.ak-cp-result h4 { color: var(--sage-dark); margin-bottom: 0.5rem; }
.ak-cp-wert { font-size: 1.05rem; margin-bottom: 1rem; }
.ak-cp-fuss { font-size: 0.9rem; color: var(--gray-light); margin-top: 1rem; }

/* ── Kursraum: Lektionskarten ── */
.ak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) { .ak-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ak-grid { grid-template-columns: 1fr; } }

.ak-card {
  display: block;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
  transition: var(--transition);
  position: relative;
}
.ak-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.ak-card .ak-card-nr {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--earth);
  display: block;
  margin-bottom: 0.4rem;
}
.ak-card h3 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--sage-dark);
  margin-bottom: 0.4rem;
}
.ak-card p { font-size: 0.92rem; color: var(--gray); line-height: 1.6; margin: 0; }
.ak-card .ak-card-state {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-light);
  margin-top: 0.75rem;
  display: block;
}
.ak-card.is-done { background: var(--sage-bg); }
.ak-card.is-done .ak-card-state { color: var(--sage); }
.ak-card.is-done .ak-card-state::before { content: "✓ "; }
.ak-card.is-locked { opacity: 0.55; pointer-events: auto; cursor: not-allowed; }
.ak-card.is-locked:hover { transform: none; box-shadow: var(--shadow-card); }

/* ── Lektionsseiten ── */
.ak-lektion-header { background: var(--cream); padding: 120px 0 48px; }
.ak-lektion-header .ak-eyebrow { margin-bottom: 0.75rem; }
.ak-eyebrow {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--earth);
  display: block;
}
.ak-lektion-body { padding: 56px 0 80px; }
.ak-lektion-body h2 { margin-top: 2.5rem; }
.ak-lektion-body h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.ak-lektion-body p { margin-bottom: 1.2rem; }
.ak-lektion-body blockquote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--charcoal);
  border-left: 4px solid var(--sage-light);
  padding-left: 1.25rem;
  margin: 2rem 0;
}

.ak-merkbox {
  background: var(--sage-bg);
  border-left: 5px solid var(--sage-dark);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.ak-merkbox h4 { color: var(--sage-dark); margin-bottom: 0.5rem; }
.ak-merkbox p:last-child { margin-bottom: 0; }

.ak-hinweisbox {
  background: var(--earth-light);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  font-size: 0.95rem;
}
.ak-hinweisbox h4 { margin-bottom: 0.5rem; }
.ak-hinweisbox p:last-child { margin-bottom: 0; }

/* Navigation zwischen Lektionen */
.ak-lektion-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ak-back {
  color: var(--gray);
  font-size: 0.95rem;
  transition: var(--transition);
}
.ak-back:hover { color: var(--earth); }

/* Gate (Lektion 0 zuerst) */
.ak-gate {
  background: var(--cream);
  border-radius: var(--radius-card);
  padding: 3rem 2rem;
  text-align: center;
  margin: 3rem 0;
}
.ak-gate h3 { color: var(--sage-dark); margin-bottom: 1rem; }

/* Checkbox Lektion 0 */
.ak-check {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  cursor: pointer;
  font-size: 0.98rem;
}
.ak-check input {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  accent-color: var(--sage-dark);
  flex-shrink: 0;
}
.is-disabled { opacity: 0.45; pointer-events: none; }

/* Video-Platzhalter: bleibt unsichtbar, bis data-video gesetzt ist */
.ak-video[hidden] { display: none; }
.ak-video video, .ak-video iframe {
  width: 100%;
  border-radius: var(--radius-card);
  aspect-ratio: 16 / 9;
}

/* Kursraum-Footer-Hinweis */
.ak-fussnote {
  font-size: 0.85rem;
  color: var(--gray-light);
  text-align: center;
  margin-top: 2rem;
}

/* Landingpage: Demo-Ball Section */
.ak-demo-wrap { max-width: 340px; margin: 0 auto; }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .ak-card:hover { transform: none; }
  .ak-ring-gold { transition: none; }
}