/* Ruhige Bühne (0.9.0) — gemeinsame Körperbühne und Seitenbausteine für Startseite und Lernplattform.
   Raster: Abstände 8/16/24/40/64/96, Schriftgrade 12 · 15 · 17 · 22 · 32 · 52, Maxbreite 1240px mit 32px Rand.
   Farben und Schriften ausschließlich aus den Tokens in screen.css. */

/* ---------- Bausteine: Einstieg auf dunkler Fläche, Eyebrow, Inhaltskarten ---------- */
.tbl-raster { width: 100%; max-width: var(--maxw-wide, 1240px); margin: 0 auto; padding: 0 32px; }
.tbl-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--terracotta-deep); font: 400 12px/1.5 var(--f-mono); letter-spacing: 1.6px; text-transform: uppercase; }
.tbl-eyebrow--punkt::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.tbl-dunkel .tbl-eyebrow, .tbl-eyebrow--dunkel { color: var(--terracotta-on-dark); }
.tbl-titel { margin: 0; color: var(--cream); font: 400 52px/1.08 var(--f-serif); letter-spacing: -.6px; overflow-wrap: normal; hyphens: manual; }
.tbl-titel em { font-style: normal; color: inherit; }
.tbl-lede { margin: 0; color: var(--text-on-dark); font: 400 17px/1.6 var(--f-sans); }
.tbl-h2 { margin: 0; color: var(--soft-black); font: 400 32px/1.15 var(--f-serif); letter-spacing: 0; }
.tbl-h2::after { display: none; }
.tbl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tbl-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 200px;
  padding: 28px 28px 24px; border: 1px solid var(--hair-card); border-radius: 8px;
  background: var(--card); color: var(--soft-black); text-decoration: none;
  box-shadow: 0 1px 2px rgba(30,34,31,.04);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tbl-card:hover { border-color: rgba(180,95,62,.35); box-shadow: 0 8px 24px rgba(30,34,31,.07); transform: translateY(-2px); }
.tbl-card::after { display: none; }
.tbl-card__type { color: var(--muted-strong); font: 400 11px/1.5 var(--f-mono); letter-spacing: 1.2px; text-transform: uppercase; }
.tbl-card h3 { margin: 0; color: var(--soft-black); font: 500 22px/1.25 var(--f-serif); letter-spacing: 0; }
.tbl-card p { margin: 0; color: var(--muted-strong); font-size: 15px; line-height: 1.6; }
.tbl-card p:empty { display: none; }
.tbl-card__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hair-card);
  color: var(--terracotta-deep); font: 500 13.5px/1.4 var(--f-sans); letter-spacing: 0; text-transform: none;
}
.tbl-card__meta b { display: inline; font-weight: 500; }
.tbl-leer { margin: 0; padding: 28px; border: 1px dashed rgba(30,34,31,.2); border-radius: 8px; color: var(--muted-strong); }
@media (prefers-reduced-motion: reduce) { .tbl-card, .tbl-card:hover { transition: none; transform: none; } }
@media (max-width: 700px) {
  .tbl-titel { font-size: 32px; }
  .tbl-h2 { font-size: 26px; }
}

/* ---------- Körperbühne ---------- */
.tbl-body-atlas {
  --atlas-picture-height: min(620px, 100vw, calc((100vw - 440px) * 4 / 3), max(340px, calc(100svh - var(--atlas-mast-height, 0px) - 190px)));
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; width: 100%;
  padding: 24px 0 32px; overflow: hidden;
  color: var(--cream); background: var(--soft-black); font-family: var(--f-sans);
}
.tbl-body-atlas::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 46%;
  width: min(900px, 140vw); height: min(900px, 140vw); transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(250,249,246,.05) 0%, rgba(250,249,246,0) 60%);
}
.tbl-body-atlas__figure { position: relative; width: 100%; min-width: 0; user-select: none; touch-action: pan-y; outline: none; }
.tbl-body-atlas__figure:focus-visible { outline: 2px solid var(--terracotta-on-dark); outline-offset: -4px; }
.tbl-body-atlas__figure.is-dragging { cursor: grabbing; }
.tbl-body-atlas__image-box {
  position: relative; height: var(--atlas-picture-height); width: calc(var(--atlas-picture-height) * .75);
  margin: 0 auto; overflow: visible; isolation: isolate; background: transparent;
}
.tbl-body-atlas__image {
  position: absolute; z-index: 0; top: 0; left: 50%; display: block;
  width: auto; height: 100%; max-width: none; transform: translateX(-50%);
  object-fit: contain; opacity: 0; pointer-events: none;
  transition: opacity .56s cubic-bezier(.22,.61,.36,1);
}
.tbl-body-atlas__poster { z-index: 0; opacity: 1; transition: opacity .35s ease; }
.tbl-body-atlas__poster.is-faded { opacity: 0; }
.tbl-body-atlas__frame { z-index: 1; }
.tbl-body-atlas__image.is-current { opacity: 1; }
.tbl-body-atlas__image.is-next.is-visible { opacity: 1; z-index: 2; }
.tbl-body-atlas__image.is-outgoing { opacity: 1; }
.tbl-body-atlas--sequence .tbl-body-atlas__frame { transition: none; }
.tbl-body-atlas__highlight { z-index: 2; opacity: 0; transition: opacity .32s ease; }
.tbl-body-atlas__highlight.is-visible { opacity: .92; }

/* Regionen: Punkt am gemessenen Anker, feine Linie bis zum Bildrand, Beschriftung außerhalb der Figur. */
.tbl-body-atlas__regions { position: absolute; z-index: 3; inset: 0; transition: opacity .3s ease, visibility 0s; }
.tbl-body-atlas__regions[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s .3s; }
.tbl-body-atlas--changing .tbl-body-atlas__regions { opacity: 0; }
.tbl-body-atlas__region {
  position: absolute; display: flex; align-items: center;
  width: var(--label-space); min-height: 44px; padding: 0; border: 0; margin: 0;
  color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer;
  transform: translate(-4.5px, -50%); transition: opacity .24s ease;
}
.tbl-body-atlas__region.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 4.5px), -50%); }
.tbl-body-atlas__region.is-unavailable { cursor: default; }
.tbl-body-atlas__dot {
  flex: 0 0 auto; box-sizing: border-box; width: 9px; height: 9px; border-radius: 50%;
  border: 1px solid #d98c6f; background: var(--terracotta); box-shadow: 0 0 0 4px rgba(180,95,62,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tbl-body-atlas__line { flex: 1 1 auto; min-width: 0; height: 0; border-top: 1px solid var(--hair-strong-on-dark); }
.tbl-body-atlas__text {
  position: absolute; top: calc(50% - 11px); left: calc(100% + 12px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  white-space: nowrap; text-align: left; pointer-events: none;
}
.tbl-body-atlas__region.is-left .tbl-body-atlas__text { left: auto; right: calc(100% + 12px); align-items: flex-end; text-align: right; }
.tbl-body-atlas__label { color: var(--cream); font: 500 15px/1.2 var(--f-serif); text-shadow: none; }
.tbl-body-atlas__meta { color: var(--terracotta-on-dark); font: 400 10.5px/1.35 var(--f-mono); letter-spacing: .8px; text-transform: uppercase; text-shadow: none; }
.tbl-body-atlas__meta:empty { display: none; }
.tbl-body-atlas__region.is-unavailable .tbl-body-atlas__dot { border-color: rgba(245,243,238,.5); background: rgba(41,47,43,.6); box-shadow: none; }
.tbl-body-atlas__region.is-unavailable .tbl-body-atlas__line { border-top-color: var(--hair-on-dark); }
.tbl-body-atlas__region.is-unavailable .tbl-body-atlas__label { color: var(--label-on-dark); }
.tbl-body-atlas__region.is-unavailable .tbl-body-atlas__meta { display: none; }
.tbl-body-atlas__region:not(.is-unavailable):hover .tbl-body-atlas__dot,
.tbl-body-atlas__region:focus-visible .tbl-body-atlas__dot,
.tbl-body-atlas__region.is-selected .tbl-body-atlas__dot { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(180,95,62,.3); }
.tbl-body-atlas__region:not(.is-unavailable):hover .tbl-body-atlas__line { border-top-color: rgba(245,243,238,.5); }
.tbl-body-atlas__region:focus-visible { outline: 2px solid var(--terracotta-on-dark); outline-offset: 2px; border-radius: 4px; }

/* Ebenenwahl: Haarlinie direkt unter den Füßen, aktive Ebene als Punkt auf der Linie. */
.tbl-body-atlas__layers { position: relative; width: min(100% - 40px, 480px); margin: -6px auto 0; text-align: center; }
.tbl-body-atlas__layer-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tbl-body-atlas__layer-list { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; }
.tbl-body-atlas__layer-list::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,243,238,0), rgba(245,243,238,.28) 20%, rgba(245,243,238,.28) 80%, rgba(245,243,238,0));
}
.tbl-body-atlas__layer-item { position: relative; display: flex; justify-content: center; min-width: 0; }
.tbl-body-atlas__layer-button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 48px; padding: 14px 12px 8px; border: 0; border-radius: 0;
  background: none; color: var(--text-on-dark); font: 500 14px/1.2 var(--f-sans); cursor: pointer;
  transition: color .25s ease;
}
.tbl-body-atlas__layer-button::before {
  content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: transparent; transition: background-color .25s ease;
}
.tbl-body-atlas__layer-button:hover:not(:disabled) { color: var(--cream); }
.tbl-body-atlas__layer-button.is-active { color: var(--cream); }
.tbl-body-atlas__layer-button.is-active::before { background: var(--terracotta-on-dark); }
.tbl-body-atlas__layer-button:disabled { color: var(--dim-on-dark); cursor: not-allowed; }
.tbl-body-atlas__layer-button[data-layer="nerves"] { padding-bottom: 24px; }
.tbl-body-atlas__layer-unavailable {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  color: var(--dim-on-dark); font: 400 9.5px/1.2 var(--f-mono); letter-spacing: .6px; text-transform: uppercase;
}
.tbl-body-atlas__layer-button:focus-visible { outline: 2px solid var(--terracotta-on-dark); outline-offset: -2px; border-radius: 4px; }

/* Drehsteuerung: am Desktop vertikal am rechten Rand, schmal horizontal unter der Ebenenleiste. */
.tbl-body-atlas__controls {
  position: absolute; right: 40px; top: 50%; transform: translateY(-58%); height: 320px; width: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px;
}
.tbl-body-atlas__view-button {
  flex: 0 0 auto; min-width: 44px; min-height: 32px; padding: 4px 0; border: 0; border-radius: 0;
  background: transparent; color: var(--muted-on-dark); font: 400 9.5px/1.2 var(--f-mono); letter-spacing: .6px; text-transform: uppercase; cursor: pointer;
  transition: color .2s ease;
}
.tbl-body-atlas__view-button:hover { color: var(--cream); }
.tbl-body-atlas__controls button[aria-label="Vorderansicht einstellen"] { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); opacity: .75; }
.tbl-body-atlas__range {
  flex: 1 1 auto; writing-mode: vertical-lr; width: 16px; min-height: 90px; margin: 0;
  appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer;
}
.tbl-body-atlas__range::-webkit-slider-runnable-track { width: 1px; height: 100%; background: rgba(245,243,238,.22); border: 0; }
.tbl-body-atlas__range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 9px; height: 9px; margin-left: -4px; border: 0; border-radius: 50%; background: var(--terracotta-on-dark); }
.tbl-body-atlas__range::-moz-range-track { width: 1px; background: rgba(245,243,238,.22); }
.tbl-body-atlas__range::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--terracotta-on-dark); }
.tbl-body-atlas__angle { display: none; }
.tbl-body-atlas__view-button:focus-visible, .tbl-body-atlas__range:focus-visible { outline: 2px solid var(--terracotta-on-dark); outline-offset: 3px; }

.tbl-body-atlas__credit { align-self: flex-end; max-width: 560px; margin: 20px 28px 0; color: var(--dim-on-dark); font-size: 10.5px; line-height: 1.5; text-align: right; }
.tbl-body-atlas__credit a { color: inherit; text-underline-offset: .15em; }
.tbl-body-atlas__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tbl-body-atlas__status[data-error="true"] { position: static; width: auto; height: auto; max-width: 52ch; margin: 16px auto 0; padding-inline: 20px; overflow: visible; clip-path: none; white-space: normal; color: #e8c3ae; font-size: 13px; text-align: center; }
.tbl-body-atlas__region-nav { display: none; }

.tbl-body-atlas--reduced-motion *,
.tbl-body-atlas--reduced-motion *::before,
.tbl-body-atlas--reduced-motion *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }

@media (max-width: 1024px) {
  .tbl-body-atlas__controls { position: static; transform: none; flex-direction: row; justify-content: center; width: auto; height: auto; gap: 10px; padding-top: 14px; }
  .tbl-body-atlas__controls .tbl-body-atlas__view-button { min-height: 44px; }
  .tbl-body-atlas__controls button[aria-label="Vorderansicht einstellen"] { position: static; transform: none; order: 4; margin-left: 6px; }
  .tbl-body-atlas__range { writing-mode: horizontal-tb; flex: 0 0 140px; width: 140px; height: 16px; min-height: 0; }
  .tbl-body-atlas__range::-webkit-slider-runnable-track { width: 100%; height: 1px; }
  .tbl-body-atlas__range::-webkit-slider-thumb { margin-left: 0; margin-top: -4px; }
  .tbl-body-atlas__range::-moz-range-track { width: 100%; height: 1px; }
}
@media (max-width: 700px) {
  .tbl-body-atlas { --atlas-picture-height: min(620px, calc(100vw - 30px), max(300px, calc(100svh - var(--atlas-mast-height, 0px) - 230px))); }
  /* Beschriftung umbricht, nutzt den Rand neben der Figur und überdeckt deren äußere 34px. */
  .tbl-body-atlas__text {
    --lab-w: calc((var(--atlas-page-width, 100vw) - var(--atlas-picture-height) * .75) / 2 + 28px);
    left: calc(100% - 34px); width: var(--lab-w); white-space: normal; gap: 2px;
  }
  .tbl-body-atlas__region.is-left .tbl-body-atlas__text { left: auto; right: calc(100% - 34px); }
  .tbl-body-atlas__region.is-right .tbl-body-atlas__line { margin-right: 38px; }
  .tbl-body-atlas__region.is-left .tbl-body-atlas__line { margin-left: 38px; }
  /* Der Fuß liegt am unteren Bildrand: seine Beschriftung wächst nach oben, damit sie die Ebenenleiste nicht berührt. */
  .tbl-body-atlas__region[data-region="fuss"] .tbl-body-atlas__text { top: auto; bottom: calc(50% - 8px); }
  .tbl-body-atlas__label { max-width: 100%; font-size: 12.5px; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; }
  .tbl-body-atlas__meta { font-size: 9px; letter-spacing: .4px; overflow-wrap: anywhere; }
  .tbl-body-atlas__layers { width: min(100% - 32px, 480px); }
  .tbl-body-atlas__layer-button { padding: 12px 7px 8px; font-size: 13px; }
  .tbl-body-atlas__layer-button[data-layer="nerves"] { padding-bottom: 22px; }
  .tbl-body-atlas__layer-unavailable { font-size: 8.5px; letter-spacing: .3px; }
  .tbl-body-atlas__credit { align-self: stretch; margin: 16px 20px 0; max-width: none; }
}