/* Themenkatalog auf learning.html (#themen) — Logik in themenkatalog.js */
.tk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tk-erklaerung {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-5);
  margin: var(--space-7) 0 var(--space-5);
}
.tk-tiefen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.tk-tiefen > div {
  padding: var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface-card);
}
.tk-tiefen dt { font-weight: var(--weight-semibold); color: var(--text-strong); margin-bottom: var(--space-2); }
.tk-tiefen dd { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-body); }
.tk-arten { display: grid; gap: var(--space-3); }
.tk-arten p { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-body); }
.tk-arten .tk-marke { margin-right: var(--space-2); }

.tk-marke {
  display: inline-block; vertical-align: 2px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--text-badge); letter-spacing: var(--tracking-badge);
  text-transform: uppercase; font-weight: var(--weight-semibold);
  border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-page);
}
.tk-marke--mass { border-color: var(--terra-600); color: var(--terra-700); background: var(--peach-100); }

.tk-vorlagen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); }
.tk-vorlagen__titel { font-size: var(--text-body-sm); color: var(--text-muted); margin-right: var(--space-2); }
.tk-vorlage {
  font: inherit; font-size: var(--text-body-sm); cursor: pointer;
  padding: 8px 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--terra-600); background: var(--surface-card); color: var(--terra-700);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.tk-vorlage:hover, .tk-vorlage:focus-visible { background: var(--terra-600); color: #fff; }
.tk-vorlage--leer { border-color: var(--border-strong); color: var(--text-muted); }
.tk-vorlage--leer:hover, .tk-vorlage--leer:focus-visible { background: var(--bg-alt); color: var(--text-strong); }

.tk-gruppe { margin-bottom: var(--space-7); }
.tk-gruppe__titel { margin: 0 0 var(--space-2); font-size: var(--text-h3); color: var(--text-strong); letter-spacing: var(--tracking-tight); }
.tk-gruppe__text { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--text-body-sm); }
.tk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.tk-thema {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.tk-thema--an { border-color: var(--terra-600); box-shadow: inset 4px 0 0 var(--terra-600); }
.tk-thema h4 { margin: 0 0 var(--space-2); font-size: var(--text-card-title, 1.05rem); color: var(--text-strong); line-height: var(--leading-snug); }
.tk-thema h4 .tk-marke { margin-left: var(--space-2); }
.tk-thema p { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-body); color: var(--text-body); }

.tk-tiefe { border: 0; margin: 0; padding: 0; display: flex; gap: 4px; }
.tk-wahl { position: relative; cursor: pointer; }
.tk-wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tk-wahl span {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 96px; min-height: 52px; padding: 6px 10px; box-sizing: border-box;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  font-size: var(--text-body-sm); line-height: 1.25; color: var(--text-body); background: var(--bg-page);
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.tk-wahl b { font-weight: var(--weight-semibold); }
.tk-wahl i { font-style: normal; font-family: var(--font-mono); font-size: var(--text-badge); color: var(--text-muted); margin-top: 2px; }
.tk-wahl--aus span { min-width: 0; width: 52px; padding: 0; font-size: 0; }
.tk-wahl--aus span::before { content: "–"; font-size: var(--text-body-sm); color: var(--text-muted); }
.tk-wahl:hover span { border-color: var(--terra-500); }
.tk-wahl input:focus-visible + span { outline: 2px solid var(--terra-600); outline-offset: 2px; }
.tk-wahl input:checked + span { background: var(--terra-600); border-color: var(--terra-600); color: #fff; }
.tk-wahl input:checked + span i { color: #fff; opacity: .85; }
.tk-wahl--aus input:checked + span { background: var(--bg-alt); border-color: var(--border-strong); }
.tk-wahl--aus input:checked + span::before { color: var(--text-strong); }

.tk-summe {
  position: sticky; bottom: var(--space-4); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); background: var(--bg-dark); color: var(--text-on-terra);
  box-shadow: var(--shadow-soft);
}
.tk-summe[hidden] { display: none; }
.tk-summe__zahlen { min-width: 0; flex: 1; }
.tk-summe__dauer { margin: 0 0 var(--space-2); font-size: var(--text-lead); line-height: var(--leading-snug); }
.tk-summe__dauer strong { color: #fff; }
.tk-summe__dauer span { font-size: var(--text-body-sm); opacity: .8; margin-left: var(--space-2); white-space: nowrap; }
.tk-summe__info { margin: var(--space-2) 0 0; font-size: var(--text-body-sm); opacity: .8; }
.tk-summe__tage { display: flex; flex-wrap: wrap; gap: 2px; max-width: 520px; }
.tk-summe__tage:empty { display: none; }
.tk-summe__tage span { width: calc(10% - 2px); min-width: 14px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.14); }
.tk-summe__tage span.an { background: var(--orange-400); }
.tk-summe__tage span.tk-tagende { margin-right: 3px; }
.tk-summe__tage span.tk-wochenende { margin-right: 0; }
.tk-summe__knopf { flex: none; }
.tk-summe__knopf[disabled] { opacity: .45; cursor: not-allowed; }
.tk-fuss { margin: var(--space-4) 0 0; font-size: var(--text-body-sm); color: var(--text-muted); line-height: var(--leading-body); }

@media (max-width: 980px) {
  .tk-erklaerung { grid-template-columns: 1fr; }
  .tk-thema { grid-template-columns: 1fr; gap: var(--space-3); }
  .tk-tiefe { flex-wrap: nowrap; }
  .tk-wahl:not(.tk-wahl--aus) { flex: 1; }
  .tk-wahl span { min-width: 0; }
}
@media (max-width: 560px) {
  .tk-tiefen { grid-template-columns: 1fr; }
  .tk-thema { padding: var(--space-4); }
  .tk-wahl span { min-height: 48px; padding: 4px 4px; font-size: 0.8rem; }
  .tk-wahl--aus span { width: 40px; }
  .tk-summe { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-3) var(--space-4); bottom: 8px; }
  .tk-summe__dauer { font-size: var(--text-body-sm); }
  .tk-summe__dauer span { display: block; margin: 2px 0 0; }
  .tk-summe__info { display: none; }
  .tk-summe__knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-thema, .tk-wahl span, .tk-vorlage { transition: none; }
}
.tk-erklaerung, .tk-katalog, .tk-vorlagen, .tk-fuss { text-align: left; }
.tk-tiefen > div { text-align: left; }
#themen .tk-thema h4 { font-size: 1.125rem; font-weight: var(--weight-semibold); letter-spacing: 0; }
#themen .tk-gruppe__titel { font-size: 1.5rem; }
.tk-summe__tage { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px 2px; }
.tk-summe__tage span { width: auto; min-width: 0; }
@media (max-width: 560px) {
  .tk-wahl.tk-wahl--aus span { font-size: 0; }
  .tk-summe { bottom: 76px; } /* über dem Knopf «Fragen Sie Vaia» */
}

/* Gruppen zum Aufklappen (details/summary). */
.tk-gruppe { margin-bottom: var(--space-4); border: 1px solid var(--border-soft); border-radius: var(--radius-lg, 14px); background: var(--surface-card); }
.tk-gruppe__kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; }
.tk-gruppe__kopf::-webkit-details-marker { display: none; }
.tk-gruppe__kopf .tk-gruppe__titel { display: block; margin: 0; font-weight: 700; }
.tk-gruppe__kopf .tk-gruppe__text { grid-column: 1 / -1; margin: 0; }
.tk-gruppe__zahl { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-sm); color: var(--text-muted); white-space: nowrap; }
.tk-gruppe__zahl::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--terra-500); border-bottom: 2px solid var(--terra-500); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s ease; }
.tk-gruppe[open] .tk-gruppe__zahl::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tk-gruppe--an .tk-gruppe__zahl { color: var(--terra-600); font-weight: 600; }
.tk-gruppe__kopf:hover .tk-gruppe__titel { color: var(--terra-600); }
.tk-gruppe__kopf:focus-visible { outline: 2px solid var(--terra-500); outline-offset: 2px; border-radius: var(--radius-lg, 14px); }
.tk-gruppe > .tk-liste { padding: 0 var(--space-5) var(--space-4); margin-top: 0; }
@media (max-width: 640px) { .tk-gruppe__kopf, .tk-gruppe > .tk-liste { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* Schmale Handys (11.10.2026): Die vier Tiefen-Knöpfe brauchten 300 px Mindestbreite
   (fieldset min-content), die Karten wurden darum unter 360 px breiter als die Seite
   und standen rechts über. Jetzt dürfen Spur, Karte und Knöpfe schrumpfen. */
.tk-katalog, .tk-gruppe, .tk-liste, .tk-thema, .tk-thema__text { min-width: 0; }
.tk-tiefe { min-width: 0; min-inline-size: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 980px) {
  .tk-thema { grid-template-columns: minmax(0, 1fr); }
  .tk-wahl:not(.tk-wahl--aus) { min-width: 0; flex: 1 1 0; }
  .tk-wahl b { display: block; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
}
@media (max-width: 359px) {
  /* drei Tiefen nebeneinander, «Nicht gewählt» darunter als schmale Zeile */
  .tk-tiefe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .tk-wahl:not(.tk-wahl--aus) { flex: none; }
  .tk-wahl b { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; }
  .tk-wahl span { padding: 4px 2px; font-size: 0.72rem; }
  .tk-wahl--aus { grid-column: 1 / -1; order: 4; }
  .tk-wahl.tk-wahl--aus span { width: auto; min-height: 34px; font-size: 0; }
  .tk-wahl--aus span::before { content: "Nicht gewählt"; font-size: 0.72rem; }
  .tk-thema { padding: var(--space-3); }
}