/* Die fuenf Bausteine. Regeln fuer Aufnahmen: Kern max. 380 breit, Schrift ab 14 px, neue Inhalte oben/mittig,
   feste Hoehen fuer wechselnde Inhalte (kein Springen beim Tippen) */
.karte {
  width: 100%; max-width: 380px; padding: 24px; border-radius: 28px; background: var(--weiss);
  box-shadow: 0 1px 0 var(--rand), 0 20px 48px -24px rgba(34, 22, 58, .28); position: relative;
}
.karte-frage { font: 400 28px/1.1 var(--serif); margin-bottom: 16px; }
.chip, .gelenk-chip, .umschalter button, .slot, .haken {
  font-family: var(--sans); color: var(--tinte); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.chip:active, .gelenk-chip:active, .umschalter button:active, .slot:active, .haken:active { transform: scale(.97); }
@keyframes rein { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) { .neu { animation: rein 320ms var(--ease-out) both; } }

/* ---------- Koerperkarte ---------- */
.koerper-panel { height: 262px; padding: 16px; border-radius: 18px; background: var(--apricot-hell); overflow: hidden; display: flex; flex-direction: column; gap: 6px; }
.panel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.panel-titel { font: 400 28px/1 var(--serif); }
.panel-grad { font-size: 14px; font-weight: 600; color: var(--koralle-tief); font-variant-numeric: tabular-nums; }
.panel-text { font-size: 14px; line-height: 1.45; color: var(--tinte-2); }
.panel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.panel-liste li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 8px; font-size: 14px; line-height: 22px; }
.panel-liste b { font-weight: 700; }
.panel-liste span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-liste i { font-style: normal; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.panel-preise { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel-preise span { display: grid; grid-template-rows: 1fr auto; padding: 4px 12px; border-radius: 10px; background: var(--weiss); font-size: 14px; color: var(--tinte-2); line-height: 1.3; }
.panel-preise b { color: var(--tinte); font-size: 18px; font-variant-numeric: tabular-nums; }
.figur-flaeche { position: relative; aspect-ratio: 380 / 344; margin-top: 12px; }
.grad-marke { position: absolute; top: 0; right: 4px; margin: 0; font: 400 44px/1 var(--serif); color: var(--koralle-tief); font-variant-numeric: tabular-nums; }
.figur { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.figur .koerper { fill: none; stroke: var(--tinte); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.figur .fern, .figur .fern path { fill: none; stroke: var(--tinte); stroke-opacity: .3; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.figur .kopf { fill: var(--tinte); }
.figur .boden { stroke: var(--tinte); stroke-opacity: .18; stroke-width: 3; stroke-linecap: round; }
.figur .punkt { fill: var(--weiss); stroke: var(--koralle); stroke-width: 3; transition: r 200ms var(--ease-out), fill 150ms ease; }
.figur-linien path { fill: none; stroke: var(--tinte-2); stroke-opacity: .4; stroke-width: 1.2; transition: stroke-opacity 200ms ease; }
.bogen { fill: rgba(255, 91, 58, .12); stroke: var(--koralle); stroke-width: 2; }
.bogen-skala { fill: none; stroke: var(--koralle); stroke-width: 2; stroke-linecap: round; }
.gelenk-chip {
  position: absolute; transform: translateY(-50%); height: 36px; padding: 0 8px; border-radius: 10px;
  border: 1.5px solid var(--rand); background: var(--weiss); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.gelenk-chip:active { transform: translateY(-50%) scale(.97); }
.gelenk-chip:hover { background: var(--apricot-hell); border-color: rgba(198, 58, 27, .35); }
.gelenk-chip[aria-pressed="true"] { background: var(--koralle); border-color: var(--koralle); }
[data-aktiv]:not([data-aktiv=""]) .figur-linien path { stroke-opacity: .12; }
[data-aktiv="nacken"] [data-zu="nacken"], [data-aktiv="schulter"] [data-zu="schulter"], [data-aktiv="ruecken"] [data-zu="ruecken"],
[data-aktiv="huefte"] [data-zu="huefte"], [data-aktiv="knie"] [data-zu="knie"], [data-aktiv="fuss"] [data-zu="fuss"] { stroke: var(--koralle); stroke-opacity: 1 !important; stroke-width: 2; }
[data-aktiv="nacken"] [data-punkt="nacken"], [data-aktiv="schulter"] [data-punkt="schulter"], [data-aktiv="ruecken"] [data-punkt="ruecken"],
[data-aktiv="huefte"] [data-punkt="huefte"], [data-aktiv="knie"] [data-punkt="knie"], [data-aktiv="fuss"] [data-punkt="fuss"] { fill: var(--koralle); r: 7px; }
@media (prefers-reduced-motion: no-preference) {
  [data-aktiv=""] .figur .punkt[data-punkt] { animation: puls 2.4s ease-in-out infinite; }
  @keyframes puls { 50% { stroke-width: 6; } }
  [data-aufnahme="1"] .figur .punkt { animation: none !important; }
}

/* ---------- Rezept-Uebersetzer ---------- */
.zettel {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; border-radius: 6px; background: var(--weiss);
  border: 1px solid var(--rand); box-shadow: 0 6px 16px -8px rgba(34, 22, 58, .3); transform: rotate(-1.2deg);
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(90, 79, 108, .12) 27px 28px);
}
.zettel-feld { font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.zettel-kuerzel { font: italic 400 44px/1 var(--serif); color: var(--koralle-tief); min-width: 3ch; }
.rezept-ergebnis { height: 250px; margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.erg-titel { font: 400 26px/1.1 var(--serif); }
.erg-text { font-size: 15px; line-height: 1.45; color: var(--tinte-2); }
.erg-werte { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.erg-werte div { padding: 8px 12px; border-radius: 12px; background: var(--lavendel); }
.erg-werte dt { font-size: 14px; color: var(--tinte-2); }
.erg-werte dd { margin: 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.erg-werte small { font-size: 14px; font-weight: 500; color: var(--tinte-2); }
.erg-fuss { font-size: 14px; color: var(--tinte-2); margin-top: auto; }
.erg-tipp { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--lavendel); font-size: 14px; line-height: 1.45; }
.rezept-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.chip { height: 44px; border-radius: 12px; border: 1.5px solid var(--rand); background: var(--weiss); font-size: 15px; font-weight: 700; white-space: nowrap; padding: 0 4px; }
.chip:hover { border-color: rgba(198, 58, 27, .35); background: var(--apricot-hell); }
.chip[aria-pressed="true"] { background: var(--koralle); border-color: var(--koralle); }

/* ---------- Erster Termin ---------- */
.tasche { display: flex; align-items: center; gap: 16px; min-height: 80px; }
.tasche-ring {
  --anteil: 0; width: 80px; height: 80px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, var(--weiss) 78%, transparent 79%), conic-gradient(var(--koralle) calc(var(--anteil) * 360deg), var(--apricot) 0);
  transition: --anteil 400ms var(--ease-out);
}
@property --anteil { syntax: '<number>'; inherits: true; initial-value: 0; }
.tasche-zahl { font: 400 34px/1 var(--serif); font-variant-numeric: tabular-nums; }
.tasche-ring small { font-size: 14px; color: var(--tinte-2); }
.tasche-satz { font: 400 24px/1.15 var(--serif); }
[data-voll="true"] .tasche-satz { color: var(--koralle-tief); }
.ablauf-schritte { list-style: none; margin: 20px 0 0; padding: 12px 0; display: grid; gap: 6px; border-block: 1px solid var(--rand); }
.ablauf-schritte li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.schritt-nr { width: 24px; height: 24px; border-radius: 50%; background: var(--tinte); color: var(--papier); font-size: 14px; font-weight: 700; display: grid; place-content: center; }
.ablauf-schritte i { font-style: normal; font-size: 14px; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.ablauf-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.haken { width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; text-align: left; padding: 6px 8px; margin-inline: -8px; width: calc(100% + 16px); border: 0; border-radius: 12px; background: transparent; }
.haken:hover { background: var(--apricot-hell); }
.kasten { width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--rand); display: grid; place-content: center; transition: background-color 150ms ease, border-color 150ms ease; }
.kasten svg { width: 18px; height: 18px; fill: none; stroke: var(--tinte); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset 260ms var(--ease-out); }
.haken[aria-pressed="true"] .kasten { background: var(--koralle); border-color: var(--koralle); }
.haken[aria-pressed="true"] .kasten svg { stroke-dashoffset: 0; }
.haken-text { display: grid; line-height: 1.3; }
.haken-text b { font-size: 15px; font-weight: 600; }
.haken-text small { font-size: 14px; color: var(--tinte-2); }
.haken[aria-pressed="true"] .haken-text b { text-decoration: line-through; text-decoration-color: var(--koralle); text-decoration-thickness: 2px; }

/* ---------- Preise ---------- */
.umschalter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--apricot-hell); }
.umschalter button { height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 15px; font-weight: 600; }
.umschalter button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); }
.preis-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.preis-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rand); }
.preis-name { display: grid; line-height: 1.3; min-width: 0; }
.preis-name b { font-size: 15px; font-weight: 600; }
.preis-name small { font-size: 14px; color: var(--tinte-2); }
.preis-wert { min-width: 5.6em; text-align: right; font-size: 17px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.preis-wert.neu { animation-delay: calc(var(--i, 0) * 30ms); }
[data-modus="kasse"] .preis-wert { color: var(--koralle-tief); }
.preis-fuss { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--tinte-2); min-height: 82px; }
.preis-fuss a { color: inherit; }

/* ---------- Uebung zum Mitmachen ---------- */
.karte--uebung { color: var(--tinte); }
.karte--uebung .umschalter { grid-template-columns: repeat(3, 1fr); }
.uebung-kopf { height: 76px; margin-top: 16px; }
.uebung-titel { font: 400 28px/1.1 var(--serif); }
.uebung-hinweis { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--tinte-2); }
.karte--uebung .figur-flaeche { margin-top: 4px; }
.takt-wort { position: absolute; top: 0; left: 4px; margin: 0; font: italic 400 34px/1 var(--serif); color: var(--tinte); }
.uebung-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); }
.wdh-punkte { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.wdh-punkte li { width: 10px; height: 10px; border-radius: 50%; background: var(--apricot); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.wdh-punkte li.voll { background: var(--koralle); }
.wdh-punkte li.jetzt { background: var(--tinte); transform: scale(1.2); }
.wdh-text { margin-top: 8px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.takt-knopf {
  width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; background: var(--koralle); display: grid; place-content: center; cursor: pointer;
  transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.takt-knopf:hover { background: #ff7559; }
.takt-knopf:active { transform: scale(.95); }
.takt-knopf svg { width: 22px; height: 22px; fill: none; stroke: var(--tinte); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Terminanfrage (dunkle Karte) ---------- */
.karte--termin { background: var(--tinte); color: var(--papier); }
.termin-info { min-height: 42px; font-size: 14px; line-height: 1.5; color: #ffd9c4; }
.termin-info.fehler { color: #ffb4a3; font-weight: 600; }
.raster { display: grid; grid-template-columns: 76px repeat(var(--spalten, 5), 1fr); gap: 6px; align-items: center; margin-top: 8px; }
.raster-tag { text-align: center; font-size: 14px; font-weight: 600; }
.raster-zeit { font-size: 14px; font-weight: 600; line-height: 1.1; }
.raster-zeit small { display: block; font-size: 14px; font-weight: 400; color: rgba(255, 251, 247, .72); white-space: nowrap; }
.slot { height: 36px; border: 1px solid rgba(255, 251, 247, .18); border-radius: 8px; background: rgba(255, 251, 247, .06); position: relative; }
.slot:hover { background: rgba(255, 251, 247, .14); }
/* Trefferflaeche bis an die Rasterluecke (6 px) erweitert, ohne die Optik zu aendern */
.slot::before { content: ''; position: absolute; inset: -4px; } /* 1 px Rahmen + 3 px halbe Luecke */
.raster.fehlt .slot { border-color: #ffb4a3; }
.felder input[aria-invalid="true"] { border-color: #ffb4a3; }
.slot[aria-pressed="true"] { background: var(--koralle); border-color: var(--koralle); }
.slot[aria-pressed="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 7px; border: solid var(--tinte); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.felder label { display: grid; gap: 4px; font-size: 14px; }
.felder input { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 251, 247, .24); background: rgba(255, 251, 247, .06); color: var(--papier); font: 500 16px var(--sans); width: 100%; min-width: 0; }
.felder input:focus { outline: 2px solid var(--koralle); outline-offset: 1px; }
fieldset { border: 0; padding: 0; margin: 12px 0 0; min-width: 0; }
legend { padding: 0; margin-bottom: 4px; font-size: 14px; }
.versicherung { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: -4px; }
.versicherung input { position: absolute; opacity: 0; pointer-events: none; }
/* 44 px Trefferflaeche bei 36 px sichtbarer Hoehe: echte Labelhoehe, oben gleicht das Raster mit negativem Rand aus,
   unten der Knopf (12 statt 16 px). Was unten aus dem Fieldset ragt, trifft Chromium nicht */
.versicherung label { padding: 4px 0; }
.versicherung span { display: grid; place-content: center; height: 36px; border-radius: 8px; border: 1px solid rgba(255, 251, 247, .2); font-size: 14px; font-weight: 600; cursor: pointer; }
.versicherung input:checked + span { background: var(--papier); color: var(--tinte); }
.versicherung input:focus-visible + span { outline: 2px solid var(--koralle); outline-offset: 2px; }
.karte--termin .knopf { width: 100%; margin-top: 12px; }
.demo-hinweis { margin-top: 8px; font-size: 14px; text-align: center; color: rgba(255, 251, 247, .72); }
.bestaetigung { position: absolute; inset: 0; padding: 32px 24px; display: none; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.bestaetigung > p:not(.best-titel):not(.demo-hinweis) { font-size: 15px; color: rgba(255, 251, 247, .8); }
[data-gesendet="true"] .termin-teil { visibility: hidden; }
[data-gesendet="true"] .bestaetigung { display: flex; }
.best-haken { width: 64px; height: 64px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.best-haken circle { fill: var(--koralle); }
.best-haken path { stroke: var(--tinte); stroke-width: 4; stroke-dasharray: 34; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) { .bestaetigung.neu .best-haken path { animation: haken 500ms var(--ease-out) 200ms both; } @keyframes haken { from { stroke-dashoffset: 34; } } }
.best-titel { font: 400 32px/1.1 var(--serif); outline: none; }
.best-slots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.best-slots li { padding: 6px 10px; border-radius: 8px; background: rgba(255, 251, 247, .1); font-size: 15px; font-weight: 600; }
.bestaetigung .zweit { color: var(--papier); margin-top: 8px; }

@media (max-width: 899px) {
  .karte { max-width: none; padding: 20px; }
}