/* Meducated · Anatomie (3D-Skelett) – nach tokens.css, teamwork.css, liquid-glass.css laden.
   Bühne vollflächig; Glas nur auf zwei Bedienflächen: Werkzeugkapsel oben, Karte unten. */
.twc.med-ana {
  --ana-rot: #e5484d;
  --ana-gruen: #22a06b;
  --ana-gruen-weich: #e3f5ec;
  --ana-rot-weich: #fde8e8;
  --ana-karte-b: min(700px, calc(100% - 32px));
  /* Glas-Abstände: einzige Stelle; koerper-seite.mjs liest sie für den Freiraum der 3D-Ansicht aus */
  --ana-leiste-platz: 344px; /* Seitenleiste (breit): 12 Rand + 320 Leiste + 12 Luft */
  --ana-oben: 80px;          /* Kopfzeile des Prototyps bzw. Modus-Kapsel */
  --ana-hauptleiste: 84px;   /* Hauptleiste des Prototyps unten (schmal) */
  position: relative; height: 100%; min-height: 560px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(34% 46% at 50% 46%, rgba(213,200,251,.38), rgba(213,200,251,0) 70%),
    radial-gradient(70% 62% at 50% 36%, #ffffff 0%, rgba(255,255,255,0) 62%),
    linear-gradient(180deg, var(--twc-page) 0%, #f5f0ea 100%);
}
.med-ana__buehne { position: absolute; inset: 0; z-index: 0; }
.med-ana__buehne canvas { cursor: grab; }
.med-ana__buehne canvas:active { cursor: grabbing; }

/* ── Laden ─────────────────────────────────────────────────────────── */
.med-ana__laden { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; gap: 14px; justify-items: center; color: var(--twc-text-2); pointer-events: none; transition: opacity .4s var(--twc-ease-std); }
.med-ana__laden[data-fertig] { opacity: 0; }
.med-ana__laden-balken { width: 180px; height: 4px; border-radius: 4px; background: var(--twc-sand-2); overflow: hidden; }
.med-ana__laden-balken i { display: block; height: 100%; width: var(--p, 8%); background: var(--twc-grad-horizontal); border-radius: inherit; transition: width .25s ease-out; }
.med-ana__laden p { font-size: 14px; letter-spacing: var(--twc-ls-small); }

/* ── Kopf: Wortmarke frei, Werkzeugkapsel schwebend ────────────────── */
.med-ana__kopf { position: absolute; z-index: 3; top: calc(16px + env(safe-area-inset-top, 0px)); left: max(20px, env(safe-area-inset-left, 0px)); right: max(20px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: space-between; gap: 12px; pointer-events: none; }
.med-ana__kopf > * { pointer-events: auto; }
.med-ana__titel { display: grid; gap: 2px; }
.med-ana__titel .twc-wordmark { padding-top: 0; }
.med-ana__titel small { font-size: 12px; font-weight: var(--twc-w-medium); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); }
.med-ana__kapsel { display: inline-flex; align-items: center; gap: 4px; }
.med-ana__kapsel .twc-tabbar__tab { border: 0; background: none; cursor: pointer; font-family: inherit; }
.med-ana__trenner { width: 1px; height: 24px; background: rgba(29,28,57,.12); margin-inline: 4px; }
.med-ana__rund { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--twc-ink); cursor: pointer; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.med-ana__rund:hover { background: var(--twc-glass-fill); }
.med-ana__rund svg { width: 20px; height: 20px; }
.med-ana__platz { width: 180px; } /* hält die Kapsel mittig */

/* ── Karte unten ───────────────────────────────────────────────────── */
/* .twc.med-ana davor: .twc .twc-glass setzt sonst position: relative */
.twc.med-ana .med-ana__karte { position: absolute; z-index: 3; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: var(--ana-karte-b); transform: translateX(-50%); }
.med-ana__karte.twc-glass--popover { padding: 18px 20px 20px; }
.med-ana__karte-inhalt { display: grid; gap: 14px; }
.med-ana__zeile { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.med-ana__ueber { font-size: 12px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); }
.med-ana__name { font-size: 26px; line-height: 1.15; font-weight: var(--twc-w-semibold); letter-spacing: -.3px; color: var(--twc-ink); text-wrap: balance; }
.med-ana__latein { font-size: 16px; font-style: italic; color: var(--twc-text-2); letter-spacing: .2px; }
.med-ana__hinweis { font-size: 15px; color: var(--twc-text-2); letter-spacing: var(--twc-ls-small); }
.med-ana__gesten { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--twc-muted); letter-spacing: var(--twc-ls-small); }
.med-ana__gesten b { color: var(--twc-text); font-weight: var(--twc-w-semibold); }

.med-ana__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.med-ana__chip { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--twc-r-pill); background: var(--twc-glass-fill); color: var(--twc-ink); font: inherit; font-size: 14px; font-weight: var(--twc-w-medium); letter-spacing: var(--twc-ls-small); cursor: pointer; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui), color var(--twc-dur-ui) var(--twc-ease-ui); }
.med-ana__chip:hover { background: var(--twc-glass-fill-hover); }
.med-ana__chip[aria-pressed="true"] { background: var(--twc-ink); color: var(--twc-white); }

.med-ana__aktionen { display: flex; flex-wrap: wrap; gap: 6px; }
.med-ana__aktionen .twc-glass-fill { border: 0; padding: 0 14px; gap: 7px; font: inherit; font-size: 14px; font-weight: var(--twc-w-semibold); cursor: pointer; }
.med-ana__aktionen .twc-glass-fill[aria-pressed="true"] { background: var(--twc-ink); color: var(--twc-white); }
.med-ana__aktionen svg { width: 18px; height: 18px; }
.med-ana__schliessen { flex: none; }
.med-ana__textknopf { white-space: nowrap; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: var(--twc-w-semibold); color: var(--twc-purple-80); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.med-ana__pille { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 6px 0 14px; border-radius: var(--twc-r-pill); background: var(--twc-sand); font-size: 14px; color: var(--twc-text); }
.med-ana .twc-btn { border: 0; font-family: inherit; cursor: pointer; }
.med-ana .twc-btn--small { height: 44px; padding: 10px 20px; border-radius: var(--twc-r-btn-small); font-size: 15px; }

/* ── Eingebettet in den Klickprototyp (Seite „Anatomie“) ─────────── */
.med-home-root--anatomie .med-ana-wirt { position: absolute; inset: 0; z-index: 0; height: 100svh; }
.med-ana-flaeche { height: 100%; }
.med-ana-fehler { display: grid; place-content: center; height: 100%; margin: 0; padding: 24px; text-align: center; color: var(--twc-text-2); }
.answer-box [data-action="zeige-anatomie"] { display: inline-flex; align-items: center; gap: 8px; margin-top: .75rem; }
.answer-box [data-action="zeige-anatomie"] svg { width: 18px; height: 18px; }
@media (max-width: 699px) {
  /* Hauptleiste liegt hier unten (fest), Kopfzeile oben im Fluss */
  .med-home-root--anatomie .med-ana-wirt { position: relative; height: calc(100svh - 64px); }
  .twc.med-ana--eingebettet .med-ana__quellen-link { top: 10px; bottom: auto; }
  /* Sechs Reiter (mit „Anatomie“): Beschriftung nicht umbrechen, etwas engere Reiter */
  .med-home-root .med-glass-nav .twc-tabbar__tab { padding-inline: 6px; }
  .med-home-root .med-glass-nav .twc-tabbar__tab span { white-space: nowrap; }
}
@media (max-width: 480px) {
  .med-ana__gesten { display: none; }
  .med-ana__chip { min-height: 36px; padding: 0 12px; font-size: 13px; }
  .med-ana__karte-inhalt { gap: 10px; }
  .med-ana__karte.twc-glass--popover { padding: 14px 14px 16px; }
}

/* ── Eingebettet: Modus-Zeile oben in der Karte ──────────────────── */
.med-ana__modus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(29,28,57,.08); }
/* Blickrichtung (Vorne/Hinten) und Zurücksetzen; in der schmalen Seitenleiste rutscht die Gruppe in eine zweite Zeile */
.med-ana__ansicht { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.med-ana__blick { display: flex; gap: 4px; }
.med-ana__kapsel .med-ana__blick { margin-inline: 2px; }
.med-ana--eingebettet .med-ana__quellen-link { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }

/* ── Quiz ──────────────────────────────────────────────────────────── */
.med-ana__fortschritt { display: grid; gap: 8px; }
.med-ana__fortschritt-kopf { display: flex; justify-content: space-between; font-size: 13px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); font-variant-numeric: tabular-nums; }
.med-ana__fortschritt-spur { height: 4px; border-radius: 4px; background: rgba(29,28,57,.08); overflow: hidden; }
.med-ana__fortschritt-spur i { display: block; height: 100%; width: var(--p, 0%); background: var(--twc-pink); border-radius: inherit; transition: width .5s var(--twc-ease-spring); }
.med-ana__frage { font-size: 20px; font-weight: var(--twc-w-semibold); color: var(--twc-ink); letter-spacing: -.1px; }
.med-ana__frage em { font-style: normal; color: var(--ana-rot); }
.med-ana__optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.med-ana__option { display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 10px 16px; border: 0; border-radius: calc(var(--twc-glass-r-popover) - var(--twc-glass-inset)); background: var(--twc-glass-fill); color: var(--twc-ink); text-align: left; font: inherit; cursor: pointer; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui), box-shadow var(--twc-dur-ui) var(--twc-ease-ui), transform var(--twc-dur-fast) var(--twc-ease-btn); }
.med-ana__option:hover:not(:disabled) { background: var(--twc-glass-fill-hover); }
.med-ana__option:active:not(:disabled) { transform: scale(.985); }
.med-ana__option b { font-size: 16px; font-weight: var(--twc-w-semibold); }
.med-ana__option span { font-size: 13px; font-style: italic; color: var(--twc-text-2); }
.med-ana__option:disabled { cursor: default; }
.med-ana__option[data-ergebnis="richtig"] { background: var(--ana-gruen-weich); box-shadow: inset 0 0 0 2px var(--ana-gruen); }
.med-ana__option[data-ergebnis="falsch"] { background: var(--ana-rot-weich); box-shadow: inset 0 0 0 2px var(--ana-rot); }
.med-ana__option[data-ergebnis="aus"] { opacity: .45; }
.med-ana__urteil { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.med-ana__urteil p { font-size: 15px; font-weight: var(--twc-w-semibold); }
.med-ana__urteil p[data-ok] { color: var(--ana-gruen); }
.med-ana__urteil p[data-nein] { color: var(--ana-rot); }
.med-ana__einstellung { display: grid; gap: 8px; }
.med-ana__einstellung > span { font-size: 13px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); }
.med-ana__ergebnis { display: flex; align-items: baseline; gap: 10px; }
.med-ana__ergebnis b { font-size: 46px; line-height: 1; font-weight: var(--twc-w-semibold); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.med-ana__ergebnis span { font-size: 16px; color: var(--twc-text-2); }

/* ── Quellen ───────────────────────────────────────────────────────── */
.med-ana__quellen-link { position: absolute; z-index: 2; left: max(20px, env(safe-area-inset-left, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); border: 0; background: none; font: inherit; font-size: 13px; color: var(--twc-muted); cursor: pointer; letter-spacing: var(--twc-ls-small); }
.med-ana__quellen-link:hover { color: var(--twc-ink); }
.med-ana__quellen { font-size: 13px; line-height: 1.55; color: var(--twc-text); display: grid; gap: 8px; max-height: 46vh; overflow: auto; }
.med-ana__quellen a { color: var(--twc-purple-80); }

/* ── Sprung aus Frage ──────────────────────────────────────────────── */
.med-ana__herkunft { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-purple-80); }
.med-ana__herkunft::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--twc-purple); }

/* ── Schmal (iPad hochkant, iPhone) ────────────────────────────────── */
@media (max-width: 760px) {
  .med-ana__platz { display: none; }
  .med-ana__kopf { flex-wrap: wrap; }
  .med-ana__titel small { display: none; }
  .med-ana__quellen-link { bottom: auto; top: calc(74px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 480px) {
  .med-ana__optionen { grid-template-columns: 1fr; }
  .med-ana__name { font-size: 22px; }
  .med-ana__karte { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
/* ── Ganzer Körper: Schichten, Regler, Lupe, Leuchtfarbe im Quiz ──── */
.med-ana--koerper { --ana-leucht: #ff9a1f; --ana-leucht-text: #b85f00; }
.med-ana__schicht { display: inline-flex; align-items: center; gap: 8px; }
.med-ana__schicht small { font-size: 12px; font-weight: var(--twc-w-medium); opacity: .7; }
.med-ana__schicht[aria-busy="true"] { opacity: .6; }
.med-ana__punkt { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(29,28,57,.15); }
.med-ana__chip[aria-pressed="false"] .med-ana__punkt { opacity: .45; }
/* Farbe der Punkte kommt aus schichten.mjs (style am Element) */
.med-ana__regler { display: grid; grid-template-columns: auto 1fr 3.5em; align-items: center; gap: 12px; font-size: 13px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); }
.med-ana__regler input { width: 100%; accent-color: var(--twc-ink); min-height: 32px; }
.med-ana__regler output { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; color: var(--twc-text); letter-spacing: 0; text-transform: none; }
.med-ana__lahinweis { font-size: 12px; color: var(--twc-muted); letter-spacing: var(--twc-ls-small); }
.med-ana--koerper .med-ana__frage em { color: var(--ana-leucht-text); }
.med-ana__lupe { background: #f7f3ee; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--ana-leucht, #ff9a1f), 0 12px 32px rgba(29,28,57,.22); }
@media (max-width: 480px) { .med-ana__regler { grid-template-columns: 1fr 3em; } .med-ana__regler span { grid-column: 1 / -1; } }
/* ── Form „Seitenleiste“ (breit): Glas in voller Höhe links, wie die iPadOS-Seitenleiste ── */
.twc.med-ana[data-form="seitenleiste"] .med-ana__karte {
  --twc-glass-r: 30px;
  left: max(12px, env(safe-area-inset-left, 0px)); top: 12px; bottom: 12px; width: calc(var(--ana-leiste-platz) - 24px); transform: none;
  border-radius: var(--twc-glass-r); padding: 18px 12px 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.med-ana[data-form="seitenleiste"] .med-ana__karte-inhalt { gap: 18px; }
/* Im Prototyp: unter dessen Kopfzeile (Wortmarke, Hauptleiste) beginnen */
.twc.med-ana--eingebettet[data-form="seitenleiste"] .med-ana__karte { top: var(--ana-oben); }
.med-ana[data-form="seitenleiste"] .med-ana__titel { display: none; } /* Marke steht in der Leiste */
.med-ana[data-form="seitenleiste"] .med-ana__kopf { left: var(--ana-leiste-platz); }
.med-ana[data-form="seitenleiste"] .med-ana__platz { display: none; }
.med-ana[data-form="seitenleiste"] .med-ana__kopf { justify-content: center; }
.med-ana[data-form="seitenleiste"] .med-ana__optionen { grid-template-columns: 1fr; }
.med-ana[data-form="seitenleiste"] .med-ana__name { font-size: 22px; }
.med-ana__marke { display: grid; gap: 2px; padding: 0 8px; }
.med-ana__marke .twc-wordmark { padding-top: 0; }
.med-ana__marke small { font-size: 11px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); }
.med-ana__hinweis--leiste { padding: 0 8px; font-size: 14px; }
.med-ana__auswahl { display: grid; gap: 12px; padding: 14px; border-radius: calc(var(--twc-glass-r) - 12px); background: var(--twc-glass-fill); }
.med-ana__abschnitt { display: grid; gap: 6px; }
.med-ana__abschnitt h3 { margin: 0; padding: 0 8px; font-size: 12px; font-weight: var(--twc-w-semibold); letter-spacing: 1.2px; text-transform: uppercase; color: var(--twc-muted); }
/* Gruppierte Liste (konzentrisch: Innenradius = 30 − 12) */
.med-ana__liste { list-style: none; margin: 0; padding: 4px; display: grid; border-radius: calc(var(--twc-glass-r) - 12px); background: var(--twc-glass-fill); }
.med-ana__reihe { display: grid; grid-template-columns: 12px 1fr auto 44px; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 14px; /* konzentrisch: 18 − 4 */ background: transparent; color: var(--twc-ink); font: inherit; font-size: 15px; font-weight: var(--twc-w-medium); text-align: left; cursor: pointer; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.med-ana__reihe:hover { background: rgba(255,255,255,.45); }
.med-ana__reihe small { font-size: 12px; color: var(--twc-muted); font-variant-numeric: tabular-nums; }
.med-ana__reihe[aria-busy="true"] small { color: var(--twc-purple-80); }
.med-ana__reihe[aria-checked="false"] .med-ana__punkt { opacity: .4; }
.med-ana__reihe[aria-checked="false"] > span:not(.med-ana__schalter) { color: var(--twc-text-2); }
/* Schalter wie in iOS: Spur + Knopf, Knopf gleitet */
.med-ana__schalter { position: relative; width: 44px; height: 26px; border-radius: 13px; background: rgba(29,28,57,.16); transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.med-ana__schalter::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(29,28,57,.25), 0 0 0 .5px rgba(29,28,57,.08); transition: transform var(--twc-dur-ui) var(--twc-ease-spring); }
.med-ana__reihe[aria-checked="true"] .med-ana__schalter { background: var(--twc-ink); }
.med-ana__reihe[aria-checked="true"] .med-ana__schalter::after { transform: translateX(18px); }
.med-ana__reihe-unter { padding: 2px 10px 10px 32px; }
.med-ana__regler--leiste { grid-template-columns: 1fr 3.2em; gap: 6px 10px; font-size: 11px; }
.med-ana__regler--leiste span { grid-column: 1 / -1; }
.med-ana__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.med-ana__raster .med-ana__chip { min-height: 38px; padding: 0 6px; font-size: 13px; }
.med-ana__raster .med-ana__chip[data-region="alle"] { grid-column: 1 / -1; }
.med-ana__fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 8px 4px; font-size: 13px; color: var(--twc-muted); }
.med-ana__fuss .med-ana__textknopf { font-size: 13px; }
/* Werkzeuge zum ausgewählten Teil: Symbol über kurzer Beschriftung */
.med-ana__werkzeuge { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.med-ana__werkzeuge .twc-glass-fill { flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 58px; padding: 6px 2px; border: 0; font: inherit; font-size: 11px; font-weight: var(--twc-w-semibold); cursor: pointer; background: rgba(255,255,255,.6); }
.med-ana__werkzeuge span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-ana__werkzeuge .twc-glass-fill[aria-pressed="true"] { background: var(--twc-ink); color: var(--twc-white); }
.med-ana__werkzeuge svg { width: 20px; height: 20px; }

/* ── Form „Bottombar“ (schmal): kompakte Glasleiste unten, Reihen wischbar ── */
.twc.med-ana[data-form="bottombar"] .med-ana__karte { --twc-glass-r: 28px; border-radius: var(--twc-glass-r); width: min(760px, calc(100% - 24px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 12px; }
.med-ana[data-form="bottombar"] .med-ana__karte-inhalt { gap: 10px; }
.med-ana__bar-reihe { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin-inline: -12px; padding-inline: 12px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); }
.med-ana__bar-reihe::-webkit-scrollbar { display: none; }
.med-ana__bar-reihe .med-ana__chip { flex: none; white-space: nowrap; scroll-snap-align: start; }
.med-ana__chip--klein { min-height: 34px; padding: 0 12px; font-size: 13px; }
.med-ana__regler--bar { grid-template-columns: auto 1fr 3em; gap: 10px; font-size: 11px; padding: 0 4px; }
.med-ana[data-form="bottombar"] .med-ana__auswahl { padding: 4px; background: none; }
/* Im Prototyp auf schmalen Geräten liegt dessen Hauptleiste unten: Bottombar darüber */
@media (max-width: 699px) {
  .twc.med-ana--eingebettet[data-form="bottombar"] .med-ana__karte { bottom: calc(var(--ana-hauptleiste) + env(safe-area-inset-bottom, 0px)); max-height: 48svh; overflow-y: auto; }
}

/* ── Seitenleiste als lila getöntes Glas (Chris' Wahl 18.10.2026) ──
   Die Tönung sitzt im Glas selbst (Meducated-Lila, oben heller, unten kräftiger); keine Farbinseln dahinter.
   Füllung sonst klar, Innenflächen ohne Tönung, nur Haarlinien. */
.twc.med-ana[data-form="seitenleiste"] .med-ana__karte {
  --twc-glass-tint-top: rgba(213,200,251,.55);
  --twc-glass-tint: rgba(213,200,251,.30);
  --twc-glass-tint-bottom: rgba(137,94,247,.24);
  --twc-glass-legibility: rgba(255,255,255,.34);
  --twc-glass-blur: 12px; --twc-glass-blur-lens: 8px; --twc-glass-saturate: 190%;
  /* Schrift auf der lila Tönung dunkler: Grau und Violett, sonst unter 4,5 : 1 */
  --twc-muted: var(--twc-text-2);
  --twc-purple-80: #4520aa;
}
/* Urteil im Quiz auf der lila Tönung: dunkleres Grün und Rot (sonst unter 4,5 : 1) */
.med-ana[data-form="seitenleiste"] .med-ana__urteil p[data-ok] { color: #0a5034; }
.med-ana[data-form="seitenleiste"] .med-ana__urteil p[data-nein] { color: #8c1217; }
.med-ana[data-form="seitenleiste"] .med-ana__liste,
.med-ana[data-form="seitenleiste"] .med-ana__auswahl { background: none; box-shadow: inset 0 0 0 .5px rgba(29,28,57,.10), inset 0 1px 0 rgba(255,255,255,.55); }
.med-ana[data-form="seitenleiste"] .med-ana__liste > li + li { box-shadow: 0 -.5px 0 rgba(29,28,57,.10); }
.med-ana[data-form="seitenleiste"] .med-ana__reihe:hover { background: rgba(255,255,255,.32); }
.med-ana[data-form="seitenleiste"] .med-ana__chip { background: rgba(255,255,255,.30); box-shadow: inset 0 0 0 .5px rgba(29,28,57,.10); }
.med-ana[data-form="seitenleiste"] .med-ana__chip[aria-pressed="true"] { background: var(--twc-ink); color: var(--twc-white); box-shadow: none; }
.med-ana[data-form="seitenleiste"] .med-ana__werkzeuge .twc-glass-fill:not([aria-pressed="true"]) { background: rgba(255,255,255,.34); }
/* Deckend machen liquid-glass.css (Glasregel 5); hier nur die Innenflächen: bei erhöhtem Kontrast klare Kante */
@media (prefers-contrast: more) {
  .med-ana[data-form="seitenleiste"] .med-ana__liste,
  .med-ana[data-form="seitenleiste"] .med-ana__auswahl { box-shadow: inset 0 0 0 1px var(--twc-ink); }
}

/* ── Suche in der Seitenleiste: getöntes Feld (kein Glas auf Glas), Vorschläge als gruppierte Liste darunter ── */
.med-ana__suche { display: grid; gap: 6px; }
.med-ana__suchfeld { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: calc(var(--twc-glass-r) - 12px); /* konzentrisch */
  background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 .5px rgba(29,28,57,.12); color: var(--twc-text-2); cursor: text; transition: box-shadow var(--twc-dur-ui) var(--twc-ease-ui); }
.med-ana__suchfeld:focus-within { box-shadow: inset 0 0 0 1.5px var(--twc-purple); }
.med-ana__suchfeld svg { flex: none; width: 18px; height: 18px; }
/* 16 px: kleiner zoomt Safari auf dem iPad beim Antippen die Seite heran */
.med-ana__suchfeld input { flex: 1; min-width: 0; height: 44px; border: 0; padding: 0; background: none; color: var(--twc-ink); font: inherit; font-size: 16px; letter-spacing: var(--twc-ls-small); outline: none; -webkit-appearance: none; appearance: none; }
/* Fokus zeigt der Rahmen des ganzen Feldes (:focus-within); der Prototyp setzt sonst zusätzlich einen 3-px-Ring ums Eingabefeld */
.twc.med-ana .med-ana__suchfeld input:focus, .twc.med-ana .med-ana__suchfeld input:focus-visible { outline: none; }
.med-ana__suchfeld input::placeholder { color: var(--twc-text-2); opacity: 1; }
.med-ana__vorschlaege { list-style: none; margin: 0; padding: 4px; display: grid; border-radius: calc(var(--twc-glass-r) - 12px); background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 .5px rgba(29,28,57,.12); }
.med-ana__vorschlaege li + li { box-shadow: 0 -.5px 0 rgba(29,28,57,.10); }
/* Eintrag selbst antippbar (kein Knopf in der Option); Ecke konzentrisch: Liste (Glas − 12) − 4 Innenabstand */
.med-ana__vorschlaege [data-treffer] { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: calc(var(--twc-glass-r) - 16px);
  color: var(--twc-ink); cursor: pointer; transition: background-color var(--twc-dur-ui) var(--twc-ease-ui); }
.med-ana__vorschlaege [data-treffer] > span { display: grid; gap: 1px; min-width: 0; }
.med-ana__vorschlaege b { font-size: 15px; font-weight: var(--twc-w-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-ana__vorschlaege i { font-size: 13px; color: var(--twc-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.med-ana__vorschlaege small { font-size: 12px; color: var(--twc-text-2); font-variant-numeric: tabular-nums; }
.med-ana__vorschlaege [data-treffer]:hover, .med-ana__vorschlaege [aria-selected="true"] { background: rgba(137,94,247,.14); }
.med-ana__vorschlag-leer { padding: 12px 10px; font-size: 14px; color: var(--twc-text-2); }
/* Kontrast erhöhen: klare Kanten auch an Suchfeld und Vorschlägen (Glasregel 5) */
@media (prefers-contrast: more) {
  .med-ana__suchfeld, .med-ana__vorschlaege { box-shadow: inset 0 0 0 1px var(--twc-ink); }
  .med-ana__suchfeld:focus-within { box-shadow: inset 0 0 0 2px var(--twc-purple-80); }
}

:where(.med-ana) button:focus-visible { outline: 2px solid var(--twc-purple); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .med-ana__fortschritt-spur i, .med-ana__laden-balken i, .med-ana__option,
  .med-ana__reihe, .med-ana__schalter, .med-ana__schalter::after,
  .med-ana__suchfeld, .med-ana__vorschlaege [data-treffer] { transition: none; }
}