/* ==========================================================================
   RezeptPilot – Mobile Web App
   Alle Masse 1:1 aus Figma (File 49enhO247FkzKJ8EEwJ3qm, Page 1),
   ausgelesen per Dev-Mode-MCP je Node – nicht geschaetzt.

   Variablen: mittelblau #3399CC · Farbe #66CC99 · grau #D9D9D9
   Schrift:   Inter Tight (Regular 400 / SemiBold 600 / Bold 700)
   Frame:     390 x 942, Padding 20 horizontal / 10 vertikal, Abstand 25
   ========================================================================== */

/* Variable Schrift: eine Datei fuer alle Schnitte (400/600/700).
   Spart gegenueber den drei statischen TTF rund ein Drittel.
   Laesst sich spaeter mit fonttools auf woff2 druecken (~200 KB). */
@font-face {
  font-family: 'Inter Tight';
  src: url('../assets/fonts/Inter_Tight/InterTight-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --mittelblau: #3399cc;
  --farbe:      #66cc99;
  --grau:       #d9d9d9;

  --verlauf: linear-gradient(180deg, var(--mittelblau) 0%, var(--farbe) 100%);
  --weiss:   #ffffff;
  --schwarz: #000000;
  --hairline: #efedf5;

  --pad-x: 20px;
  --pad-y: 10px;
  --gap:   25px;

  --r-gross: 20px;   /* Karten, Buttons, Zeilen */
  --r-klein: 10px;   /* Schritt-Chips, Checkbox, Seiten-Select */
  --r-pill:  30px;   /* nur der Segment-Toggle */

  --shadow-card:  0 4px 4px 0 rgba(0, 0, 0, 0.35);
  --shadow-inset: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);

  /* Bewegung: eine Kurve fuer Wege, eine mit leichtem Ueberschwingen fuer
     Zustandswechsel (Radio, Haken). Kurz halten – das hier ist ein
     Arbeitswerkzeug, keine Show. */
  --weg:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --federn: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-kurz: 180ms;
  --t-mittel: 260ms;
  --t-lang: 380ms;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { margin: 0; padding: 0; background: var(--weiss); }

body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background: var(--weiss);
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--schwarz);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* --- App-Rahmen ---------------------------------------------------------
   Figma-Frame ist 390 breit; das Layout ist durchgehend Auto-Layout mit
   w-full, bleibt also fluid. Auf breiteren Geraeten zentriert bei 480.
------------------------------------------------------------------------- */
.app {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--weiss);
}

/* Kopfbereich: Logo und Fortschritt sind auf allen Screens gleich und
   bleiben deshalb stehen. Er traegt das obere Padding, .screen setzt mit
   dem gewohnten Blockabstand darunter an. */
.kopfbereich {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--pad-y) var(--pad-x) 0;
  padding-top: calc(var(--pad-y) + env(safe-area-inset-top, 0px));
}
.kopfbereich > * { width: 100%; }

/* Fortschritt und Ueberschrift stehen mobil untereinander, auf dem Desktop
   nebeneinander (Figma Node 9:666). Die Reihenfolge dreht die Media-Query. */
.kopf__zeile { display: flex; flex-direction: column; gap: var(--gap); }
.kopf__titel:empty { display: none; }

/* Das Logo in der Toolbar gehoert zur Desktop-Sidebar. */
.toolbar__logo, .toolbar__label, .toolbar__recht { display: none; }

.screen {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap);
  padding: var(--gap) var(--pad-x) var(--pad-y);
  padding-bottom: calc(var(--pad-y) + var(--reserve, 0px) + env(safe-area-inset-bottom, 0px));
}

.screen > * { width: 100%; flex-shrink: 0; }

.app[data-toolbar='1'] { --reserve: 100px; }
.app[data-sticky='1']  { --reserve: 102px; }
.app[data-toolbar='1'][data-sticky='1'] { --reserve: 192px; }

/* ==========================================================================
   Logo – logo_bunt, Node 3:403 (194 x 65) bzw. 43:6 (300 x 101)
   ========================================================================== */
.logo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo { width: 194px; height: 65px; }
.logo--xl { width: 300px; height: 101px; }
.logo img { width: 100%; height: 100%; }

/* Partnerlogo fussschmerz-ratgeber.de (375x53) – breit und flach. */
.partnerlogo { width: 184px; height: 26px; object-fit: contain; }

/* ==========================================================================
   Fortschritt – Node 3:251
   7 Zellen: Schritt / Linie / Schritt / Linie / Schritt / Linie / Schritt
   ========================================================================== */
.progress { display: flex; gap: 10px; align-items: flex-start; overflow: hidden; }

.progress__step,
.progress__line {
  flex: 1 0 0;
  min-width: 0;
  height: 40px;
  border-radius: var(--r-klein);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  overflow: hidden;
}

.progress__step {
  position: relative;
  border: 2px solid var(--mittelblau);
  background: var(--weiss);
  font-size: 20px;
  line-height: normal;
  font-weight: 600;
  color: var(--schwarz);
  transition:
    color var(--t-mittel) ease var(--verzug, 0ms),
    border-color var(--t-mittel) ease var(--verzug, 0ms),
    transform var(--t-kurz) var(--weg);
}

/* Verlauf als eigene Ebene, damit er sich ein-/ausblenden laesst –
   background-image selbst ist nicht animierbar. Weil die Leiste ueber alle
   Screens stehenbleibt, genuegt hier ein Uebergang. */
.progress__step::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: var(--verlauf);
  opacity: 0;
  transition: opacity var(--t-mittel) ease var(--verzug, 0ms);
}

.progress__step > span { position: relative; }

.progress__step:disabled { cursor: default; }
.progress__step:not(:disabled) { cursor: pointer; }
.progress__step:not(:disabled):active { transform: scale(0.92); }

.progress__step.is-active { border-color: transparent; color: var(--weiss); }
.progress__step.is-active::before { opacity: 1; }

.progress__line { position: relative; background: var(--weiss); }
.progress__line::before {
  content: '';
  display: block;
  width: 34px;
  height: 1px;
  background: var(--schwarz);
}

/* --- Schrittwechsel -----------------------------------------------------
   Ein Impuls laeuft ueber die Verbindungslinie, danach fuellt sich der
   erreichte Chip und die Zahl trifft ein. Bei Spruengen ueber mehrere
   Schritte staffelt `--verzug` die Kette.
------------------------------------------------------------------------- */
.progress__line.laeuft::after {
  content: '';
  position: absolute;
  top: calc(50% - 1.5px);
  left: calc(50% - 17px);
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--mittelblau) 35%, var(--farbe) 65%, transparent 100%);
  animation: linie-impuls 300ms var(--weg) var(--verzug, 0ms) both;
}
.progress__line.laeuft--zurueck::after { animation-name: linie-impuls-zurueck; }

@keyframes linie-impuls {
  from { transform: translateX(-115%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  to   { transform: translateX(115%); opacity: 0; }
}
@keyframes linie-impuls-zurueck {
  from { transform: translateX(115%); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  to   { transform: translateX(-115%); opacity: 0; }
}

/* Der frisch erreichte Chip bekommt zusaetzlich einen kurzen Stups, und die
   Zahl trifft einen Tick spaeter ein – so steht sie nie weiss auf Weiss. */
.progress__step.ist-erreicht {
  animation: schritt-stups 420ms var(--federn) var(--verzug, 0ms) both;
}
.progress__step.ist-erreicht > span {
  animation: zahl-eintreffen 360ms var(--federn) calc(var(--verzug, 0ms) + 80ms) both;
}

@keyframes schritt-stups {
  from { transform: scale(0.82); }
  55%  { transform: scale(1.08); }
  to   { transform: none; }
}
@keyframes zahl-eintreffen {
  from { opacity: 0; transform: translateY(5px) scale(0.55); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Ueberschrift-Block – Node 6:218
   ========================================================================== */
.head { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

.head__row { display: flex; gap: 10px; align-items: center; }

.head__badge {
  flex: none;
  width: 24px;
  height: 24px;
  border: 2px solid var(--mittelblau);
  border-radius: var(--r-klein);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.head__title { font-size: 20px; line-height: normal; font-weight: 600; }
.head__sub   { font-size: 14px; line-height: 22px; font-weight: 400; }

/* ==========================================================================
   Segment-Toggle – Node 3:266 (einziges Element mit Radius 30)
   ========================================================================== */
.toggle {
  position: relative;
  display: flex;
  gap: 10px;
  height: 51px;
  padding: 5px;
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--weiss);
  box-shadow: var(--shadow-inset);
}

/* Der aktive Zustand ist eine eigene Pille, die zwischen den beiden
   Positionen gleitet – statt zwei Hintergruende hart zu tauschen. */
.toggle__pille {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 40px;
  width: calc((100% - 30px) / 3);   /* drei Optionen, 5px Rand, 10px Luecken */
  border: 0.5px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--verlauf);
  transition: transform var(--t-lang) var(--weg);
}

/* Reihenfolge seit 24.09.2026: Direktsuche · Einlagen · Schadensregionen */
.toggle[data-modus='einlagen'] .toggle__pille { transform: translateX(calc(100% + 10px)); }
.toggle[data-modus='schaden']  .toggle__pille { transform: translateX(calc(200% + 20px)); }

.toggle__opt {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  white-space: nowrap;
  color: var(--schwarz);
  transition: color var(--t-mittel) ease;
}

.toggle__opt.is-active { color: var(--weiss); }

/* Auf sehr schmalen Geraeten passt „Schadensbilder" zu dritt sonst nicht. */
@media (max-width: 379px) {
  .toggle__opt { font-size: 13px; }
}

/* ==========================================================================
   Auswahl-Karte – Nodes 3:272 (inaktiv) / 3:280 (aktiv)
   Spalten: Bild 100 · Text (flex) · Radio 45
   ========================================================================== */
.card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: left;
  width: 100%;
}

/* Aktiv: 2px statt 0.5px Rahmen – Padding gleicht das Innenmass aus. */
.card.is-active { border: 2px solid var(--mittelblau); padding: 8.5px; }

.card__media {
  flex: none;
  width: 116px;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Das Einlagen-Render lag in Figma um -30.15deg gedreht in einem 100px
   breiten Feld. Die SPANNRIT-Fotos zeigen das Paar aufrecht im Hochformat
   und werden deshalb ungedreht auf die Feldhoehe eingepasst. */
.card__media img { width: 126px; height: auto; transform: rotate(-30.15deg); }
.card__media--foto img { width: auto; height: 112px; max-width: 100%; object-fit: contain; transform: none; }

/* Modellkarte: das aufrechte Foto braucht weniger Breite als das gedrehte
   Render, der gewonnene Platz geht an den Namen. */
.card--modell .card__media { width: 88px; }
.card--modell .card__title { font-size: 18px; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }   /* deutsche Silbentrennung statt Bruch mitten im Wort */
.card--modell .card__text--kurz { -webkit-line-clamp: 2; line-clamp: 2; }

.card__text--hmv { font-weight: 600; }

/* Regionskarte – Node 42:97: feste Hoehe 124, Fussgrafik 69 x 106 */
.card--region { height: 124px; align-items: center; }
.card--region.is-active { height: 124px; }
.card--region .card__media {
  position: relative;
  width: 69px;
  height: 106px;
  min-height: 0;
}
.card--region .card__body,
.card--region .card__aside { min-height: 0; }

.card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 112px;
  padding: 10px;
  overflow: hidden;
}

.card__title { font-size: 20px; line-height: normal; font-weight: 600; }
.card__text  { font-size: 14px; line-height: 22px; font-weight: 400; }

/* Regionskarte: die Liste der Schadensbilder wird nach drei Zeilen mit
   Auslassungspunkten gekuerzt – so wie in der Figma-Vorlage. */
.card__text--kurz {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__aside {
  flex: none;
  width: 45px;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* --- Radio – Node 3:287: 30px Ring in grau, 25px Verlaufspunkt ---------- */
.radio {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background: var(--grau);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
}
.radio::after {
  content: '';
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background: var(--verlauf);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.radio.is-on::after { opacity: 1; }

/* ==========================================================================
   Info-Karte – Nodes 44:349 / 3:554 (Schmerzregion, Empfehlung, Produkt)
   ========================================================================== */
.info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;                  /* Node 3:554 / 44:349 */
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Label ist in Figma kein Volltonblau, sondern der Verlauf als Textfuellung. */
.info__label {
  width: max-content;
  max-width: 100%;
  font-size: 14px;
  line-height: normal;
  font-weight: 600;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.info__title { font-size: 20px; line-height: normal; font-weight: 600; }

.info__media { display: flex; align-items: center; justify-content: center; padding: 6px 0 2px; }
.info__media img { width: 100%; height: auto; }

/* Modellfoto (Hochformat) und Schichten-Mock (fast quadratisch) werden auf
   eine feste Hoehe eingepasst, sonst fuellt das Hochformat den Screen. */
.info__media--foto img { width: auto; height: 200px; max-width: 100%; object-fit: contain; }
.info__media--mock img { width: auto; height: 220px; max-width: 100%; object-fit: contain; }

.info__sub  { font-size: 14px; line-height: 22px; }
.info__text { font-size: 14px; line-height: 22px; margin-top: 6px; }

/* HMV-Positionen auf dem Empfehlungs-Screen */
.hmv { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.hmv__zeile { font-size: 14px; line-height: 22px; }
.hmv__zeile b { font-weight: 700; }

/* Alternative Modelle zum Schadensbild */
.alternativen { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.alternativen__label {
  width: max-content;
  font-size: 14px;
  line-height: normal;
  font-weight: 600;
  background: var(--verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.row--alternative svg { flex: none; width: 18px; height: 16px; color: var(--mittelblau); }
.row--alternative .row__label b { font-weight: 700; }

/* --- Fussgrafik auf dem Ursachen-Screen – Node 44:220 -------------------
   Das Bild liegt um 60 Grad gedreht in einer 61px hohen Zeile und ragt
   oben wie unten aus der Karte heraus; die Karte schneidet es ab.
------------------------------------------------------------------------- */
.info--fuss { height: 243px; overflow: hidden; }

.fuss { height: 61px; display: flex; align-items: center; justify-content: center; }

.fuss__rahmen {
  flex: none;
  position: relative;
  width: 170.042px;
  height: 261.199px;
  transform: rotate(60deg);
  overflow: hidden;
}

/* Ausschnitt exakt wie in Figma */
.fuss__rahmen img,
.card--region .card__media img {
  position: absolute;
  height: 100%;
  width: 120.22%;
  left: -6.85%;
  top: 0.47%;
  max-width: none;
  transform: none;
}

/* --- Seiten- und Rueckansichten (Sprunggelenk, Achillessehne) ----------
   Diese Grafiken stehen schon aufrecht und sind breiter als die
   Sohlenansichten. Sie werden deshalb eingepasst statt beschnitten,
   und die 60-Grad-Drehung entfaellt.
------------------------------------------------------------------------- */
.card--seite .card__media img,
.info--seite .fuss__rahmen img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.info--seite { height: auto; }
.info--seite .fuss { height: 240px; padding: 4px 0 8px; }
.info--seite .fuss__rahmen { width: 100%; height: 100%; transform: none; }

/* ==========================================================================
   Zeilen-Auswahl (Schmerzursache) – Node 44:222 / 44:250
   ========================================================================== */
.row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 47px;
  padding: 10px 10px 10px 15px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.row.is-active { height: 44px; border: 2px solid var(--mittelblau); padding: 8.5px 8.5px 8.5px 13.5px; }

.row__label { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: normal; }

.stack { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.stack--tight { gap: 10px; }

/* ==========================================================================
   Direktsuche (Startboard, dritter Toggle-Punkt) – nicht aus Figma.
   Das Feld uebernimmt Mass und Rahmen der Auswahlzeile (47 hoch, Radius 20),
   die Treffer darunter sind gewoehnliche Zeilen mit Regions-Tag.
   ========================================================================== */
.board { display: flex; flex-direction: column; gap: 15px; width: 100%; }
.treffer { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.suche {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 47px;
  padding: 10px 10px 10px 15px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-mittel) ease;
}
.suche:focus-within { border-color: var(--mittelblau); }

.suche__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: #9a9a9a;
  display: flex;
  transition: color var(--t-mittel) ease;
}
.suche__icon svg { width: 100%; height: 100%; }
.suche:focus-within .suche__icon,
.suche.hat-text .suche__icon { color: var(--mittelblau); }

.suche input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  color: var(--schwarz);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}
.suche input::placeholder { color: #9a9a9a; }
.suche input::-webkit-search-decoration,
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.suche__leeren {
  flex: none;
  width: 27px;
  height: 27px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--grau);
  display: flex;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity var(--t-kurz) ease, transform var(--t-mittel) var(--federn), color var(--t-kurz) ease;
}
.suche__leeren svg { width: 100%; height: 100%; }
.suche.hat-text .suche__leeren { opacity: 1; transform: none; pointer-events: auto; }
.suche__leeren:active { transform: scale(0.85); }
@media (hover: hover) { .suche__leeren:hover { color: var(--mittelblau); } }

/* Trefferzeile: Indikation links, Region als kleines Tag vor dem Punkt. */
.row--treffer .row__label { font-weight: 600; }
.row__tag {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: var(--r-klein);
  border: 0.5px solid var(--grau);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--schwarz);
  background: var(--weiss);
}

/* Gefundene Buchstaben – ohne Hintergrundbalken, nur farbig und fett. */
.row--treffer mark {
  background: none;
  color: var(--mittelblau);
  font-weight: 700;
}

.suche__leer {
  font-size: 14px;
  line-height: 22px;
  color: #6b6b6b;
  padding: 0 15px;
}

/* Mobil stapeln sich die beiden Bloecke; erst ab 900px stehen sie
   nebeneinander (siehe Desktop-Block am Dateiende). */
.zweispaltig { display: flex; flex-direction: column; gap: 15px; width: 100%; }

/* ==========================================================================
   Zusatz-Liste – Node 3:571 (Container) / 3:572 ff. (Zeilen)
   ========================================================================== */
.addons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
}

.addon {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 70px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--grau);
}
.addon:last-child { border-bottom: 0; }

.addon__haupt {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 51px;
  padding: 10px;
}

.addon__label { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 22px; }

/* Checkbox – Node 3:599: 30px, Radius 10, Icon 19px */
.check {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-klein);
  background: var(--grau);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--weiss);
}

/* Verlauf als ausblendbare Ebene – siehe Kommentar bei .progress__step. */
.check::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--verlauf);
  opacity: 0;
  transition: opacity var(--t-mittel) ease;
}
.check.is-on::before { opacity: 1; }

.check svg { position: relative; width: 19px; height: 19px; }

/* Seiten-Auswahl – Node 3:604: 2px Rahmen mittelblau, Radius 10, h 40 */
.addon__seite {
  flex: none;
  width: 90px;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.side {
  position: relative;
  width: 100%;
  height: 40px;
  border: 2px solid var(--mittelblau);
  border-radius: var(--r-klein);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  font-size: 16px;
  line-height: 22px;
}
.side__chevron { width: 10.7px; height: 21.1px; flex: none; transform: rotate(89.57deg); }
.side__chevron svg { width: 100%; height: 100%; }
.side select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* ==========================================================================
   Hinweisbox – Node 3:672: grau auf 30 % Deckkraft
   ========================================================================== */
.note {
  padding: 10px 20px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--grau);
  opacity: 0.3;
  font-size: 14px;
  line-height: 22px;
  color: var(--schwarz);
}

/* ==========================================================================
   Buttons – Nodes 3:392 / 3:676 / 6:160 / 44:383 / 44:389 / 9:346 ff.
   Alle: Radius 20, Padding 20, Gap 10, Text Bold 15/20
   ========================================================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;                 /* eine Hoehe fuer alle Buttons (25.09.2026) */
  padding: 16px 20px;
  border-radius: var(--r-gross);
  font-size: 17px;
  line-height: 22px;
  font-weight: 700;
  text-align: center;
}

.btn svg { width: 22px; height: 20px; flex: none; }

.btn--primary { background: var(--verlauf); color: var(--weiss); }
.btn--ghost   { border: 2px solid var(--mittelblau); background: var(--weiss); color: var(--schwarz); }

.btn--zurueck svg { transform: rotate(180deg); }

.btn:disabled { opacity: 0.4; }

.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.btn-grid .btn { padding: 16px 12px; gap: 8px; }

/* ==========================================================================
   Diagnose-Eingabe – Node 6:10
   ========================================================================== */
.editor {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 20px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
}

.editor textarea {
  flex: 1 1 auto;
  width: 100%;
  min-height: 170px;
  border: 0;
  outline: none;
  resize: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  color: var(--schwarz);
  background: transparent;
}
.editor textarea::placeholder { color: #9a9a9a; }

.editor__count { align-self: flex-end; font-size: 14px; line-height: 22px; padding-top: 8px; }
/* Schritt 3: Anamnese (kompakt) ueber der Diagnose, beide mit Feldnamen. */
.editor__label { display: block; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mittelblau); margin-bottom: 6px; }
.editor--anamnese { min-height: 0; }
.editor--anamnese textarea { min-height: 140px; }   /* hoeher seit 05.10.2026 */

/* ==========================================================================
   Rezeptvorschau – Node 6:316: Karte p 20, Text Regular 12/20, Labels Bold
   ========================================================================== */
.receipt {
  padding: 20px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  line-height: 22px;
}

.receipt p { font-size: 14px; line-height: 22px; }
.receipt b { font-weight: 700; }
.receipt__leer { height: 20px; }

/* Schriftgroessen am 06.10.2026 auf Kundenwunsch („Schrift allgemein recht
   klein") um eine Stufe angehoben: 10→12, 11→13, 12→14, 13→15, 14→16, 15→17,
   16→18, 18→20, 22→24 px; Zeilenhoehen entsprechend. Vorher: scratchpad/
   style.vor-schrift.css. */

/* ==========================================================================
   Sticky-Button – Node 3:316 (Frame 390 x 92, Button h 60)
   ========================================================================== */
.sticky-slot {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  padding: 16px var(--pad-x);
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--weiss) 40%);
  pointer-events: none;
  z-index: 20;
}
.sticky-slot > * { pointer-events: auto; }

.app[data-toolbar='1'] .sticky-slot {
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  padding-bottom: 16px;
}

/* ==========================================================================
   Toolbar – Node 3:248: Border-top 0.5px grau, Gap 30, Padding 30/15
   ========================================================================== */
.toolbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 15px 30px calc(15px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--grau);
  background: var(--weiss);
  z-index: 30;
  transition: transform var(--t-lang) var(--weg), opacity var(--t-mittel) ease;
}
.toolbar.ist-versteckt {
  transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;
}

.toolbar__item {
  flex: 1 0 0;
  min-width: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--schwarz);
  overflow: hidden;
}
/* Alle vier Eintraege gleich behandelt: Icon plus ruhiger Marker, keine
   Farbflaeche. */
.toolbar__item { position: relative; }
.toolbar__item::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: var(--verlauf);
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity var(--t-mittel) ease, transform var(--t-mittel) var(--weg);
}
.toolbar__item.is-active::after { opacity: 1; transform: none; }

/* Icon-Groessen wie in Figma; der Standort-Pin liegt dazwischen. */
.toolbar__item svg { width: 39px; height: 39px; }
.toolbar__item[data-aktion='verlauf']  svg { width: 25px; height: 25px; }
.toolbar__item[data-aktion='standort'] svg { width: 34px; height: 34px; }
.toolbar__item[data-aktion='hilfe']    svg { width: 44px; height: 44px; }

/* ==========================================================================
   Rezeptverlauf – nicht aus Figma. Karten in Mass und Rahmen der
   Auswahlkarte (Radius 20, 0.5px Grau, Schatten), Zeitstempel als
   Verlaufstext wie die Info-Labels.
   ========================================================================== */
.eintrag {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 15px 15px 12px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-mittel) ease, transform var(--t-kurz) var(--weg);
}
.eintrag:active { transform: scale(0.985); }
.eintrag:focus-visible { outline: none; border-color: var(--mittelblau); }
@media (hover: hover) { .eintrag:hover { border-color: var(--mittelblau); } }

.eintrag__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 27px;
}

.eintrag__loeschen {
  flex: none;
  width: 27px;
  height: 27px;
  margin: -4px -6px 0 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--grau);
  display: flex;
  transition: color var(--t-kurz) ease, transform var(--t-kurz) var(--weg);
}
.eintrag__loeschen svg { width: 100%; height: 100%; }
.eintrag__loeschen:active { transform: scale(0.85); }
@media (hover: hover) { .eintrag__loeschen:hover { color: var(--mittelblau); } }

.eintrag__titel { font-size: 17px; line-height: 22px; font-weight: 600; }
.eintrag__text  { font-size: 14px; line-height: 22px; }

/* Diagnose nur angerissen – der ganze Text steht in der Vorschau. */
.eintrag__diagnose {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 22px;
  color: #6b6b6b;
}

.eintrag__oeffnen {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--mittelblau);
}
.eintrag__oeffnen svg { width: 18px; height: 16px; }

/* ==========================================================================
   Hilfe / Anleitung – nicht aus Figma. Schritt-Karten mit denselben
   Nummern-Badges wie der Kopfbereich.
   ========================================================================== */
.schritt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 15px 20px 18px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  background: var(--weiss);
  box-shadow: var(--shadow-card);
}

.schritt__text { font-size: 14px; line-height: 22px; }

.schritt__punkte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0 0 0 18px;
  font-size: 14px;
  line-height: 22px;
}
.schritt__punkte li::marker { color: var(--mittelblau); }
.schritt__punkte b { font-weight: 700; }

.funktionen { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }

.funktion { display: flex; align-items: center; gap: 12px; }

/* Die Symbole in einheitlicher Kachel, damit die vier verschiedenen
   Figma-Groessen hier gleich wirken. */
.funktion__icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-klein);
  color: var(--schwarz);
}
.funktion__icon svg { width: 30px; height: 30px; }

.funktion__body { display: flex; flex-direction: column; min-width: 0; }
.funktion__titel { font-size: 14px; line-height: 22px; font-weight: 700; }
.funktion__text  { font-size: 14px; line-height: 22px; }

/* ==========================================================================
   Eingebettete Fremdseite (Fussexperten)
   ========================================================================== */
.rahmen {
  width: 100%;
  height: calc(100dvh - 300px);
  min-height: 340px;
  border: 0.5px solid var(--grau);
  border-radius: var(--r-gross);
  overflow: hidden;
  background: var(--weiss);
  box-shadow: var(--shadow-card);
  -webkit-overflow-scrolling: touch;
}
.rahmen iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   Splash – Node 43:4
   ========================================================================== */
/* Der Ladescreen ist exakt so hoch wie der Bildschirm und scrollt nicht.
   Deshalb uebernimmt er das Padding und .screen gibt seines ab. */
.app[data-screen='splash'] {
  height: 100dvh;
  max-height: 100vh;
  min-height: 0;
  overflow: hidden;
}
/* Die Hoehenkette muss bis zum Splash durchgehen: .app -> .inhalt -> .screen.
   Ohne Hoehe an .inhalt ist „100 %" am Splash wirkungslos und das
   SPANNRIT-Logo klebt unter der Wortmarke statt am unteren Rand. */
.app[data-screen='splash'] .inhalt { height: 100%; display: flex; flex-direction: column; }
.app[data-screen='splash'] .screen { padding: 0; gap: 0; height: 100%; flex: 1 1 auto; min-height: 0; }

body.kein-scroll { overflow: hidden; }

.splash {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
  padding: var(--pad-y) var(--pad-x);
  padding-top: calc(var(--pad-y) + env(safe-area-inset-top, 0px));
  padding-bottom: calc(var(--pad-y) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.splash__main { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
.splash__foot { flex: none; display: flex; align-items: center; justify-content: center; height: 81px; }

/* Logo setzt sich ruhig, die Wortmarke darunter folgt kurz danach. */
.splash__main .logo { animation: splash-logo 700ms var(--weg) both; }
.splash__foot        { animation: splash-fuss 600ms var(--weg) 260ms both; }

@keyframes splash-logo {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes splash-fuss {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Uebergang Splash -> Startboard */
.screen.ist-raus {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--t-mittel) ease, transform var(--t-mittel) var(--weg);
}

/* ==========================================================================
   Kurzmeldung
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(120px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 8px);
  max-width: 320px;
  padding: 10px 18px;
  border-radius: var(--r-gross);
  background: rgba(0, 0, 0, 0.82);
  color: var(--weiss);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 60;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Bewegung
   Grundsatz: nur transform und opacity animieren. Die einzigen Ausnahmen
   sind Rahmen und Padding der Auswahl-Karten – dort veraendert Figma beides
   gegenlaeufig (0.5px/10px zu 2px/8.5px), das Aussenmass bleibt also gleich
   und der Wechsel laeuft ohne Sprung durch.
   ========================================================================== */

/* --- Screenwechsel ------------------------------------------------------
   Die Bloecke laufen leicht versetzt ein, in Navigationsrichtung.
------------------------------------------------------------------------- */
.screen.ist-neu > * { animation: block-ein var(--t-lang) var(--weg) both; }
.screen.ist-neu[data-richtung='zurueck'] > * { animation-name: block-ein-zurueck; }

.screen.ist-neu > *:nth-child(1) { animation-delay: 0ms; }
.screen.ist-neu > *:nth-child(2) { animation-delay: 40ms; }
.screen.ist-neu > *:nth-child(3) { animation-delay: 70ms; }
.screen.ist-neu > *:nth-child(4) { animation-delay: 95ms; }
.screen.ist-neu > *:nth-child(5) { animation-delay: 115ms; }
.screen.ist-neu > *:nth-child(6) { animation-delay: 130ms; }
.screen.ist-neu > *:nth-child(n + 7) { animation-delay: 140ms; }

@keyframes block-ein {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes block-ein-zurueck {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- Listenwechsel (Einlagen / Schadensbilder / Direktsuche) ------------ */
.stack.ist-neu > *, .treffer.ist-neu > * { animation: karte-ein var(--t-mittel) var(--weg) both; }
.stack.ist-neu > *:nth-child(1), .treffer.ist-neu > *:nth-child(1) { animation-delay: 0ms; }
.stack.ist-neu > *:nth-child(2), .treffer.ist-neu > *:nth-child(2) { animation-delay: 45ms; }
.stack.ist-neu > *:nth-child(3), .treffer.ist-neu > *:nth-child(3) { animation-delay: 85ms; }
.stack.ist-neu > *:nth-child(4), .treffer.ist-neu > *:nth-child(4) { animation-delay: 120ms; }
.stack.ist-neu > *:nth-child(n + 5), .treffer.ist-neu > *:nth-child(n + 5) { animation-delay: 145ms; }

@keyframes karte-ein {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* --- Auswahl ------------------------------------------------------------ */
.card, .row {
  transition:
    border-color var(--t-mittel) ease,
    border-width var(--t-mittel) ease,
    padding var(--t-mittel) ease,
    height var(--t-mittel) var(--weg),
    transform var(--t-kurz) var(--weg);
}

.radio::after {
  transform: scale(0.4);
  transition: transform var(--t-mittel) var(--federn), opacity var(--t-kurz) ease;
}
.radio.is-on::after { transform: none; }

.check svg {
  transform: scale(0.5);
  opacity: 0;
  transition: transform var(--t-mittel) var(--federn), opacity var(--t-kurz) ease;
}
.check.is-on svg { transform: none; opacity: 1; }

/* --- Sticky-Button: faehrt von unten ein -------------------------------- */
.sticky-slot {
  transition: transform var(--t-lang) var(--weg), opacity var(--t-mittel) ease;
}
.sticky-slot.ist-versteckt {
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
}

/* Der freigehaltene Platz unten wandert mit, statt zu springen. */
.screen { transition: padding-bottom var(--t-lang) var(--weg); }

/* --- Tippen ------------------------------------------------------------- */
@media (hover: hover) {
  .card:hover, .row:hover { border-color: var(--mittelblau); }
}

.btn, .toolbar__item, .toggle__opt, .check {
  transition: transform var(--t-kurz) var(--weg), opacity var(--t-kurz) ease;
}
.card:active, .row:active { transform: scale(0.985); }
.btn:active, .toolbar__item:active, .check:active { transform: scale(0.94); }

/* --- Abschalten --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
  .sticky-slot.ist-versteckt { transform: translate(-50%, 130%); }
}

/* ==========================================================================
   Druck / PDF – nur der Rezepttext
   ========================================================================== */
@media print {
  .toolbar, .sticky-slot, .toast, .progress, .head, .logo-area, .btn-grid, .note { display: none !important; }
  .app { max-width: none; }
  .screen { padding: 0; gap: 0; }
  .receipt { border: 0; box-shadow: none; padding: 0; }
  body { font-size: 12pt; }
}

/* ==========================================================================
   Breite Fenster (Desktop, iPad quer)
   23.09.2026 entfernt, seit 05.10.2026 wieder da (Kundenwunsch): die
   Sidebar-/Karten-Variante nach Figma-Node 9:389. Der Block steht ganz am
   Dateiende (nach Glas-Look und Bewegung), damit er beide ueberschreibt.
   ========================================================================== */

/* ==========================================================================
   Glas-Look (iOS 26) – seit 23.09.2026, Noahs Wunsch
   Der Verlaufs-Hintergrund der frueheren Desktop-Ansicht liegt jetzt auf
   allen Geraeten fix hinter der App. Alle Flaechen werden halbtransparent
   und weichgezeichnet (backdrop-filter); Masse, Radien und Farben aus Figma
   bleiben unveraendert – dieser Block ueberschreibt nur Hintergrund, Rand
   und Schatten und steht deshalb bewusst am Dateiende.
   ========================================================================== */
:root {
  --glas:        rgba(255, 255, 255, 0.58);
  --glas-stark:  rgba(255, 255, 255, 0.78);
  --glas-leicht: rgba(255, 255, 255, 0.42);
  --glas-rand:   rgba(255, 255, 255, 0.85);
  --glas-schatten:
    0 10px 30px rgba(20, 70, 100, 0.14),
    0 1px 2px rgba(20, 70, 100, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --glas-blur:   blur(22px) saturate(170%);
}

html, body { background: #dbebef; }

/* Das Bild liegt unter einem weissen Schleier (--hintergrund-schleier), damit
   es dezent bleibt und die Verlaufsbuchstaben im Logo lesbar sind. Hoeher =
   blasser; 0 zeigt das Bild pur. */
:root { --hintergrund-schleier: 0.62; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, var(--hintergrund-schleier)), rgba(255, 255, 255, var(--hintergrund-schleier))),
    url('../assets/img/hintergrund.jpg') center / cover no-repeat;
  pointer-events: none;
  z-index: 0;
}

.app { z-index: 1; background: transparent; }
.splash { background: transparent; }

/* Die Verlaufsbuchstaben in „Pilot" brauchen ueber dem Blau-Gruen einen
   weichen weissen Schein, sonst gehen sie im Hintergrund unter. */
.logo img { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.9)); }

/* --- Glasflaechen -------------------------------------------------------- */
.card, .row, .info, .editor, .receipt, .eintrag, .schritt,
.suche, .toggle, .addons, .rahmen {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}

/* Aktive Karte/Zeile: Rahmen bleibt Mittelblau, Fläche wird etwas dichter. */
.card.is-active, .row.is-active { background: var(--glas-stark); }
@media (hover: hover) { .card:hover, .row:hover, .eintrag:hover { background: var(--glas-stark); } }

/* Toggle: der Trog ist Glas, die Pille bleibt der Verlauf und wirft Schatten. */
.toggle { box-shadow: var(--glas-schatten); }
.toggle__pille { border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 4px 12px rgba(51, 153, 204, 0.35); }

/* Fortschritt: Chips als Glas, die Verbindungslinien ohne eigene Fläche. */
.progress__step {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.progress__line { background: transparent; }

/* Hinweisbox: statt 30 % Grau eine leichte Glasfläche mit lesbarem Text. */
.note {
  background: var(--glas-leicht);
  border: 1px solid var(--glas-rand);
  opacity: 1;
  color: #2a2a2a;
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}

/* Kleinteile */
.check { background: rgba(60, 90, 110, 0.18); }
.row__tag, .funktion__icon, .suche__leer { background: transparent; }
.row__tag { background: var(--glas-leicht); border-color: var(--glas-rand); }
.funktion__icon { background: var(--glas-leicht); border-color: var(--glas-rand); }
.editor textarea, .suche input { background: transparent; }

/* Buttons: Verlauf bekommt Tiefe, Ghost wird Glas. */
.btn--primary { box-shadow: 0 10px 28px rgba(51, 153, 204, 0.38); background-origin: border-box; }
.btn--ghost {
  background: var(--glas-stark);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}

/* Sticky-Button schwebt frei ueber dem Inhalt – keine weisse Fahne mehr. */
.sticky-slot { background: none; }

/* Toolbar als Glasleiste */
.toolbar {
  background: var(--glas-stark);
  border-top: 1px solid var(--glas-rand);
  box-shadow: 0 -8px 30px rgba(20, 70, 100, 0.10);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}

/* Ohne backdrop-filter (alte Browser) oder auf Wunsch weniger Transparenz:
   dichtere Flaechen, damit Text lesbar bleibt. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .row, .info, .editor, .receipt, .eintrag, .schritt, .suche, .toggle,
  .addons, .rahmen, .progress__step, .note, .btn--ghost, .toolbar { background: rgba(255, 255, 255, 0.94); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .row, .info, .editor, .receipt, .eintrag, .schritt, .suche, .toggle,
  .addons, .rahmen, .progress__step, .note, .btn--ghost, .toolbar { background: rgba(255, 255, 255, 0.96); }
}

/* Druck: weiss, ohne Hintergrundbild und Blur. */
@media print {
  body::before { display: none; }
  html, body, .app { background: var(--weiss); }
  .receipt { background: var(--weiss); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================================
   Bewegung im Stil von iOS 26 – seit 23.09.2026, Noahs Wunsch
   Federnde Kurven mit leichtem Ueberschwingen, Screens kommen mit Zoom und
   Unschaerfe statt von der Seite, die Toggle-Pille schwappt, gewaehlte
   Karten poppen, Toolbar-Icons federn, der Hintergrund treibt langsam.
   Steht am Dateiende und ueberschreibt nur Kurven, Dauern und Keyframes.
   ========================================================================== */
:root {
  --weg:    cubic-bezier(0.2, 0.8, 0.2, 1);        /* schnell los, weich aus */
  --federn: cubic-bezier(0.34, 1.56, 0.64, 1);     /* deutlicher Schwung */
  --fluessig: cubic-bezier(0.32, 1.25, 0.45, 1);   /* Pille, Sticky, Toast */
  --t-lang: 460ms;
}

/* --- Screenwechsel: Zoom + Unschaerfe statt seitlichem Einlauf ------------ */
@keyframes block-ein {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.97); filter: blur(8px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes block-ein-zurueck {
  from { opacity: 0; transform: translate3d(0, -10px, 0) scale(1.03); filter: blur(8px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}
.screen.ist-neu > * { animation-duration: 520ms; animation-timing-function: var(--weg); }
.screen.ist-neu > *:nth-child(2) { animation-delay: 50ms; }
.screen.ist-neu > *:nth-child(3) { animation-delay: 95ms; }
.screen.ist-neu > *:nth-child(4) { animation-delay: 130ms; }
.screen.ist-neu > *:nth-child(5) { animation-delay: 160ms; }

/* Listenwechsel: Karten federn von unten ein. */
@keyframes karte-ein {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.96); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.stack.ist-neu > *, .treffer.ist-neu > * { animation-duration: 480ms; animation-timing-function: var(--federn); }

/* --- Auswahl: gewaehlte Karte/Zeile poppt kurz ----------------------------- */
@keyframes auswahl-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.025); }
  100% { transform: scale(1); }
}
.card.is-active, .row.is-active, .eintrag:active { animation: auswahl-pop 420ms var(--federn); }
.card:active, .row:active { transform: scale(0.975); transition-duration: 90ms; }

/* Radio-Punkt und Haken schwingen etwas kraeftiger ein. */
.radio::after { transition: transform 420ms var(--federn), opacity var(--t-kurz) ease; }
.check svg    { transition: transform 420ms var(--federn), opacity var(--t-kurz) ease; }

/* --- Toggle: die Pille gleitet fluessig und schwappt am Ziel --------------- */
.toggle__pille { transition: transform 520ms var(--fluessig); }
@keyframes pille-schwappt {
  0%   { scale: 1 1; }
  35%  { scale: 1.08 0.92; }
  70%  { scale: 0.97 1.03; }
  100% { scale: 1 1; }
}
.toggle__pille.schwappt { animation: pille-schwappt 520ms var(--weg); }
.toggle__opt:active { transform: scale(0.96); }

/* --- Fortschritt: erreichter Chip huepft ----------------------------------- */
@keyframes chip-huepft {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
.progress__step.ist-erreicht { animation: chip-huepft 480ms var(--federn) var(--verzug, 0ms) both; }

/* --- Buttons: Druck mit Federkraft, Sticky faehrt schwungvoll ein --------- */
.btn { transition: transform 420ms var(--federn), opacity var(--t-kurz) ease, box-shadow var(--t-mittel) ease; }
.btn:active { transform: scale(0.95); transition-duration: 80ms; }
.btn--primary:active { box-shadow: 0 4px 12px rgba(51, 153, 204, 0.3); }
.sticky-slot { transition: transform 560ms var(--fluessig), opacity var(--t-mittel) ease; }

/* --- Toolbar: Icon federt beim Tippen, Marker gleitet ---------------------- */
.toolbar__item svg { transition: transform 420ms var(--federn); }
.toolbar__item:active svg { transform: scale(0.82); transition-duration: 80ms; }
@keyframes icon-federt {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) translateY(-2px); }
  100% { transform: scale(1); }
}
.toolbar__item.is-active svg { animation: icon-federt 480ms var(--federn); }
.toolbar__item::after { transition: opacity var(--t-mittel) ease, transform 480ms var(--federn); }

/* --- Suche: Trefferzeilen kommen gestaffelt, Kreuz federt ------------------ */
.suche__leeren { transition: opacity var(--t-kurz) ease, transform 420ms var(--federn), color var(--t-kurz) ease; }

/* --- Toast schwingt ein ----------------------------------------------------- */
.toast { transition: opacity 0.2s ease, transform 480ms var(--fluessig); transform: translate(-50%, 16px) scale(0.96); }
.toast.is-on { transform: translate(-50%, 0) scale(1); }

/* --- Splash: Wortmarke zoomt aus der Unschaerfe ---------------------------- */
@keyframes splash-logo {
  from { opacity: 0; transform: scale(0.9); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.splash__main .logo { animation-duration: 900ms; animation-timing-function: var(--fluessig); }

/* --- Hintergrund treibt kaum merklich --------------------------------------- */
@keyframes hintergrund-drift {
  from { transform: scale(1.04) translate3d(-1.2%, -0.8%, 0); }
  to   { transform: scale(1.1) translate3d(1.2%, 1%, 0); }
}
body::before {
  will-change: transform;
  animation: hintergrund-drift 36s ease-in-out infinite alternate;
}

/* Weniger Bewegung: Drift aus, keine Unschaerfe, alles kurz (siehe oben). */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; transform: none; }
  .screen.ist-neu > *, .stack.ist-neu > *, .treffer.ist-neu > * { filter: none; }
}

/* ==========================================================================
   Fußexperten-Suche (nativ, seit 24.09.2026) – ersetzt den iframe.
   Suchfeld wie die Direktsuche, darunter Standort-Knopf, Status und die
   Betriebskarten mit Entfernung und drei Aktionen.
   ========================================================================== */
.standort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  padding: 10px 15px;
  border: 2px solid var(--mittelblau);
  border-radius: var(--r-gross);
  background: var(--glas-stark);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--schwarz);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
  transition: transform 420ms var(--federn), background var(--t-mittel) ease, color var(--t-mittel) ease;
}
.standort svg { width: 22px; height: 22px; flex: none; }
.standort:active { transform: scale(0.97); transition-duration: 80ms; }
/* Aktiv: deckender Verlauf. Ohne backdrop-filter und mit Verlauf ueber die
   ganze Rahmenbox – sonst malt iOS-WebKit den Verlauf zweimal (Rahmen- und
   Innenbox) und oben/unten bleibt ein einfarbiger Streifen stehen. */
.standort.is-on {
  background: var(--verlauf);
  background-origin: border-box;
  background-clip: border-box;
  border-color: transparent;
  color: var(--weiss);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.betrieb {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 14px 15px 12px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-gross);
  background: var(--glas);
  box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.betrieb__kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.betrieb__name { font-size: 17px; line-height: 22px; font-weight: 600; min-width: 0; }
.betrieb__km   { flex: none; margin-top: 2px; font-weight: 700; color: var(--mittelblau); border-color: rgba(51, 153, 204, 0.4); }
.betrieb__adresse { font-size: 14px; line-height: 22px; }
.betrieb__aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Kleine Aktionspillen: Anrufen, Route, Website */
.mini {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border: 2px solid var(--mittelblau);
  border-radius: var(--r-gross);
  background: var(--glas-stark);
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
  color: var(--schwarz);
  text-decoration: none;
  transition: transform 420ms var(--federn), background var(--t-kurz) ease, color var(--t-kurz) ease;
}
.mini:active { transform: scale(0.94); transition-duration: 80ms; background: var(--verlauf); background-origin: border-box; color: var(--weiss); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) { .mini:hover { background: var(--verlauf); background-origin: border-box; color: var(--weiss); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } }

.fe-quelle { font-size: 12px; line-height: 18px; color: #6b6b6b; padding: 0 15px; }
.fe-quelle a { color: var(--mittelblau); text-decoration: none; font-weight: 600; }

/* Gestaffeltes Einfedern der Betriebskarten */
#fe-liste > * { animation: karte-ein 480ms var(--federn) both; }
#fe-liste > *:nth-child(1) { animation-delay: 0ms; }
#fe-liste > *:nth-child(2) { animation-delay: 40ms; }
#fe-liste > *:nth-child(3) { animation-delay: 80ms; }
#fe-liste > *:nth-child(4) { animation-delay: 115ms; }
#fe-liste > *:nth-child(n + 5) { animation-delay: 140ms; }

/* Naechstgelegene Fussexperten unter dem Rezeptvorschlag */
.naehe { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.naehe .suche__leer { padding: 0; }
#naehe-liste > * { animation: karte-ein 480ms var(--federn) both; }
#naehe-liste > *:nth-child(2) { animation-delay: 45ms; }
#naehe-liste > *:nth-child(3) { animation-delay: 90ms; }

/* Produktangaben (Flyer „eben") auf Empfehlung und Konfiguration */
.info__text--wirkung { color: #3a3a3a; }
.info__text--wirkung b { font-weight: 700; color: var(--schwarz); }
.info__meta { font-size: 12px; line-height: 18px; color: #6b6b6b; margin-top: 8px; word-break: break-word; }
.info__meta b { font-weight: 700; color: var(--mittelblau); }

/* ==========================================================================
   Einwilligungs-Banner (Nutzungsstatistik) – Glaskarte ueber der Toolbar
   ========================================================================== */
.consent {
  position: fixed;
  left: 50%;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  padding: 0 var(--pad-x);
  z-index: 40;
  transition: transform 560ms var(--fluessig), opacity var(--t-mittel) ease;
}
.consent.ist-versteckt { transform: translate(-50%, 40px); opacity: 0; pointer-events: none; }

.consent__karte {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-gross);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 40px rgba(20, 70, 100, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.consent__titel { font-size: 17px; line-height: 22px; font-weight: 700; }
.consent__text  { font-size: 14px; line-height: 20px; }
.consent__link  { display: inline; padding: 0; font: inherit; font-weight: 700; color: var(--mittelblau); text-decoration: underline; }
.consent__buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.consent__buttons .btn { padding: 10px 12px; font-size: 16px; }

/* Solange der Banner steht, bekommt der Inhalt unten mehr Luft. */
.app[data-consent='1'] .screen { padding-bottom: calc(var(--pad-y) + var(--reserve, 0px) + 230px + env(safe-area-inset-bottom, 0px)); }

/* Rechtstexte: Links in Karten */
.schritt__text a { color: var(--mittelblau); font-weight: 600; text-decoration: none; }

/* Kompaktes PLZ-Feld unter dem Rezeptvorschlag */
.suche--klein { height: 44px; }
.naehe .standort { height: 44px; }
#naehe-fuss { padding: 0; }

/* Regionszeile in der Direktsuche */
.row--region svg { flex: none; width: 18px; height: 16px; color: var(--mittelblau); }
.row--region .row__label b { font-weight: 700; }

/* HMV-Position hinter einem Zusatz im Rezepttext */
.receipt__hmv { color: #555; font-weight: 400; }

/* Toolbar-Seiten: Symbol in der Schritt-Box statt Zahl */
.head__badge--icon { color: var(--schwarz); overflow: hidden; }
.head__badge--icon svg { width: 16px; height: 16px; }
.head__badge--verlauf svg  { width: 15px; height: 15px; }
.head__badge--standort svg { width: 22px; height: 22px; }
.head__badge--hilfe svg    { width: 30px; height: 30px; }   /* Glyphe sitzt klein in der 44er-Box */

/* Vorschau: E-Mail und Speichern nebeneinander, Text darf umbrechen */
.btn-grid--aktionen { gap: 10px; }
.btn-grid--aktionen .btn { height: auto; min-height: 60px; padding: 12px 12px; font-size: 16px; line-height: 20px; text-align: center; }
.btn-grid--aktionen .btn svg { width: 18px; height: 16px; }

/* Die globale Regel img,svg{max-width:100%} wuerde die Box-Symbole auf 20px deckeln. */
.head__badge--icon svg { max-width: none; flex: none; }

/* ==========================================================================
   Anamnese-Feld (mehrzeilig) und ICD-Feld – 24.09.2026
   ========================================================================== */
.suche--anamnese { height: auto; min-height: 150px; align-items: flex-start; padding: 12px 10px 12px 15px; }
.suche--anamnese .suche__icon { margin-top: 3px; }
.suche--anamnese textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 126px;               /* hoeher seit 05.10.2026 (Noah) */
  border: 0;
  outline: none;
  resize: none;
  padding: 0;
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  color: var(--schwarz);
  background: transparent;
}
.suche--anamnese textarea::placeholder { color: #9a9a9a; }

.icd {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 47px;
  padding: 10px 15px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--r-gross);
  background: var(--glas);
  box-shadow: var(--glas-schatten);
  -webkit-backdrop-filter: var(--glas-blur);
  backdrop-filter: var(--glas-blur);
}
.icd__label { flex: none; font-size: 14px; line-height: 22px; font-weight: 700; color: var(--mittelblau); }
.icd input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; padding: 0;
  font: inherit; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--schwarz); background: transparent; text-transform: uppercase;
}
.icd input::placeholder { color: #9a9a9a; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ==========================================================================
   KI-Auswertung (Anamnese) – Marke, Status, Trefferzeilen mit Konfidenz
   ========================================================================== */
.ki { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
/* Marke statt Schalter – die KI-Auswertung ist Pflicht (24.09.2026). */
.ki__marke {
  flex: none; height: 26px; padding: 0 9px; border-radius: 13px;
  display: inline-flex; align-items: center; background: var(--verlauf); color: var(--weiss);
  font-size: 13px; font-weight: 800; letter-spacing: .06em;
}
.ki__text { font-size: 14px; line-height: 20px; min-width: 0; }
.ki__text b { font-weight: 700; }
.ki__status { display: block; color: var(--mittelblau); font-weight: 600; }
.ki__status:empty { display: none; }
.ki__hinweis { padding: 0 6px; font-size: 13px; line-height: 18px; }

.row--ki { flex-direction: column; align-items: stretch; height: auto; min-height: 47px; padding: 10px 10px 10px 15px; gap: 4px; }
.row--ki.is-active { height: auto; padding: 8.5px 8.5px 8.5px 13.5px; }
.row__kopf { display: flex; align-items: center; gap: 10px; width: 100%; }
.row__tag--ki { color: var(--mittelblau); font-weight: 700; border-color: rgba(51, 153, 204, 0.4); }
.row__grund { font-size: 13px; line-height: 18px; color: #555; }

/* HMV-Varianten und Gruppen-Unterzeile auf dem Empfehlungs-Screen */
.hmv__zeile--variante { color: #555; font-size: 13px; line-height: 18px; }

/* ==========================================================================
   Desktop – Sidebar + Inhaltskarte (Figma Node 9:389), wieder seit 05.10.2026
   Raster aus der Vorlage, gilt fuer alle Screens:
     Rahmen        1400 breit, zentriert, Padding 10/20, Spaltenabstand 10
     Sidebar       336 – Logo oben, Eintraege mittig
     Inhaltskarte  Rest, Glas, Radius 20, Padding 20, Blockabstand 30
     Kopfzeile     Ueberschrift links, Fortschritt rechts (337 breit)
     Hauptbereich  wo es zwei Bloecke gibt: links flexibel, rechts 339
     Weiter-Button 276 breit, linksbuendig, haengt unten an der Karte
   Gegenueber der Fassung vom August an den Glas-Look angepasst: Karte und
   Sidebar sind Glas statt Weiss, die Sidebar bleibt beim Scrollen stehen.
   ========================================================================== */
@media (min-width: 900px) {

  .app {
    max-width: none;            /* volle Fensterbreite (Noah, 05.10.2026) – Vorlage hatte 1400 */
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 336px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 10px;
    padding: 10px 20px;
    align-items: start;
  }

  .toolbar     { grid-column: 1; grid-row: 1 / span 2; }
  .inhalt      { grid-column: 2; grid-row: 1; }
  .sticky-slot { grid-column: 2; grid-row: 2; }

  /* --- Inhaltskarte ----------------------------------------------------- */
  .inhalt {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: calc(100dvh - 20px);
    padding: 20px;
    border: 1px solid var(--glas-rand);
    border-radius: var(--r-gross);
    background: var(--glas-leicht);
    box-shadow: var(--glas-schatten);
    -webkit-backdrop-filter: var(--glas-blur);
    backdrop-filter: var(--glas-blur);
  }
  .app[data-sticky='1'] .inhalt { padding-bottom: 96px; }

  .kopfbereich { padding: 0; gap: 0; }
  .kopfbereich .logo-area { display: none; }   /* Logo steht in der Sidebar */

  .kopf__zeile { flex-direction: row; align-items: center; gap: 10px; }
  .kopf__titel { order: 0; flex: 1 1 auto; min-width: 0; }
  .progress    { order: 1; flex: none; width: 337px; }

  .screen {
    padding: 0;
    gap: 30px;
    flex: 1 1 auto;
  }
  .app[data-consent='1'] .screen { padding-bottom: 0; }

  /* --- Sidebar ---------------------------------------------------------- */
  .toolbar {
    position: sticky;
    top: 10px;
    left: auto;
    transform: none;
    width: auto;
    max-width: none;
    height: calc(100dvh - 20px);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--glas-rand);
    border-radius: var(--r-gross);
    box-shadow: var(--glas-schatten);
  }
  .toolbar.ist-versteckt { transform: none; opacity: 0; }

  .toolbar__logo { display: flex; justify-content: center; flex: none; }

  .toolbar__item {
    flex: none;
    height: 44px;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px;
    border-radius: var(--r-gross);
  }
  .toolbar__item:first-of-type { margin-top: auto; }
  .toolbar__item:last-of-type  { margin-bottom: auto; }

  .toolbar__label {
    display: inline;
    font-size: 20px;
    line-height: normal;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Die Icons haben unterschiedlich viel Luft im viewBox – dieselben
     Verhaeltnisse wie mobil, nur kleiner. */
  .toolbar__item svg { flex: none; width: 24px; height: 24px; }
  .toolbar__item[data-aktion='verlauf']  svg { width: 17px; height: 17px; }
  .toolbar__item[data-aktion='standort'] svg { width: 22px; height: 22px; }
  .toolbar__item[data-aktion='hilfe']    svg { width: 28px; height: 28px; }

  @media (hover: hover) {
    .toolbar__item:not([data-aktion='neu']):hover { background: var(--glas-stark); }
  }

  /* „Neuer Rezepttext" ist hier ein beschrifteter Hauptbutton (Vorlage). */
  .toolbar__item[data-aktion='neu'] {
    height: 52px;
    padding: 20px 10px;
    background: var(--verlauf);
    background-origin: border-box;
    color: var(--weiss);
    box-shadow: 0 10px 28px rgba(51, 153, 204, 0.38);
  }
  .toolbar__item[data-aktion='neu']::after { display: none; }

  .toolbar__item::after { bottom: 3px; left: 10px; width: 24px; }

  /* Impressum / Datenschutz klein am Fuss der Sidebar */
  .toolbar__recht {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex: none;
  }
  .toolbar__link {
    padding: 4px 2px;
    font-size: 14px;
    line-height: 18px;
    color: #6b7680;
  }
  .toolbar__link.is-active { color: var(--mittelblau); font-weight: 600; }
  @media (hover: hover) { .toolbar__link:hover { color: var(--mittelblau); text-decoration: underline; } }

  /* --- Weiter-Button: haengt unten an der Inhaltskarte ------------------- */
  .app[data-toolbar='1'],
  .app[data-sticky='1'],
  .app[data-toolbar='1'][data-sticky='1'] { --reserve: 0px; }

  .sticky-slot,
  .app[data-toolbar='1'] .sticky-slot {
    position: sticky;
    bottom: 10px;
    left: auto;
    align-self: end;
    transform: none;
    width: auto;
    max-width: none;
    margin-top: -86px;          /* sitzt im freigehaltenen Fuss der Karte */
    padding: 0 20px 20px;
  }
  .sticky-slot.ist-versteckt { transform: translateY(20px); }
  .app[data-sticky='0'] .sticky-slot { display: none; }
  .sticky-slot .btn { width: auto; min-width: 276px; }   /* Node 9:549 */

  /* Einwilligung unten rechts statt ueber der Toolbar */
  .consent {
    left: auto;
    right: 30px;
    bottom: 30px;
    transform: none;
    max-width: 420px;
    padding: 0;
  }
  .consent.ist-versteckt { transform: translateY(40px); }

  .toast { bottom: 40px; left: calc(50% + 173px); }

  /* Kartenlisten laufen in mehrere Spalten statt endlos nach unten. */
  .stack--raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 15px;
  }

  /* --- Einzelheiten ------------------------------------------------------ */
  .btn-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .btn-grid .btn { width: auto; }

  .toggle { max-width: 520px; }
  .note { width: 100%; }

  .info { padding: 20px; }        /* Node 9:555 */
  .editor { min-height: 160px; }
  .rahmen { height: calc(100dvh - 260px); }

  /* Der Ladescreen bleibt bildschirmfuellend. */
  .app[data-screen='splash'] {
    display: block;
    max-width: none;
    padding: 0;
    height: 100dvh;
  }
  .app[data-screen='splash'] .inhalt {
    min-height: 0;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Breiter Desktop – zweispaltiger Inhalt. Darunter waere die feste rechte
   Spalte breiter als die flexible, deshalb erst ab 1200. */
@media (min-width: 1200px) {
  .zweispaltig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 339px;
    gap: 20px;
    align-items: start;
  }
  /* In der schmalen rechten Spalte stehen die Aktionen untereinander. */
  .btn-grid { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .app { display: block; max-width: none; padding: 0; }
  .inhalt { border: 0; box-shadow: none; background: none; padding: 0; min-height: 0; }
}

/* ==========================================================================
   Fußexperten: Karte neben der Liste (nur Desktop, seit 05.10.2026)
   Mobil loesen sich die Huellen auf (display: contents) und die Karte fehlt.
   ========================================================================== */
.fe-layout, .fe-spalte { display: contents; }
.fe-karte { display: none; }

@media (min-width: 900px) {
  .fe-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .fe-spalte { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
  .fe-spalte > * { width: 100%; flex-shrink: 0; }
  .fe-karte {
    display: block;
    position: sticky;
    top: 30px;
    height: calc(100dvh - 160px);
    min-height: 420px;
    border: 1px solid var(--glas-rand);
    border-radius: var(--r-gross);
    box-shadow: var(--glas-schatten);
    overflow: hidden;
    background: #e8eef0;
    z-index: 0;
  }
  .fe-karte.ist-fehler::after {
    content: 'Karte konnte nicht geladen werden.';
    display: grid; place-items: center; height: 100%;
    font-size: 15px; color: #6b7680;
  }
  .fe-karte .leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--glas-schatten); }
  .fe-karte .leaflet-popup-content { margin: 12px 14px; font-family: inherit; }
  .fe-popup { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 20px; }
  .fe-popup b { font-size: 16px; }
  .fe-popup__links a { color: var(--mittelblau); font-weight: 600; text-decoration: none; }
  .fe-karte .leaflet-control-attribution { font-size: 12px; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .fe-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

/* ==========================================================================
   Hilfe als Akkordeon (05.10.2026) – mobil und Desktop
   ========================================================================== */
.akk { padding: 0; gap: 0; }
.akk__kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; min-height: 60px;
  list-style: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.akk__kopf::-webkit-details-marker { display: none; }
.akk__kopf .head__title { flex: 1 1 auto; min-width: 0; }
.akk__pfeil { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--mittelblau); background: rgba(51, 153, 204, 0.1); transition: transform 320ms var(--federn, ease); }
.akk__pfeil svg { width: 14px; height: 14px; }
.akk[open] .akk__pfeil { transform: rotate(90deg); }
.akk__inhalt { display: flex; flex-direction: column; gap: 10px; padding: 0 20px 18px; }
.akk[open] .akk__inhalt { animation: akk-auf 280ms ease both; }
@keyframes akk-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .akk__kopf:hover .head__title { color: var(--mittelblau); } }
.akk__kopf:focus-visible { outline: 2px solid var(--mittelblau); outline-offset: -2px; border-radius: var(--r-gross); }

@media (min-width: 900px) {
  .hilfe__intro { padding: 24px 28px; }
  .hilfe__intro .info__title { font-size: 24px; }
  .hilfe__intro .info__text { font-size: 16px; line-height: 25px; max-width: 80ch; }

  .hilfe-akk { gap: 12px; }
  .akk__kopf { padding: 16px 26px; }
  .akk__inhalt { padding: 0 26px 24px 74px; gap: 12px; }
  .hilfe-akk .schritt__text,
  .hilfe-akk .schritt__punkte { font-size: 16px; line-height: 25px; max-width: 80ch; }
  .hilfe-akk .schritt__punkte { gap: 8px; }

  .hilfe-akk .funktionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }
  .hilfe-akk .funktion { align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--glas-leicht); border: 1px solid var(--glas-rand); }
  .hilfe-akk .funktion__titel { font-size: 16px; line-height: 24px; }
  .hilfe-akk .funktion__text  { font-size: 15px; line-height: 22px; }
  /* Symbole und Rechtliches haben keine Nummer – Inhalt nicht einruecken. */
  .hilfe-akk .akk:not(:has(.head__badge)) .akk__inhalt { padding-left: 26px; }

  .schritt--recht .akk__inhalt { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
  .schritt--recht .recht__knoepfe { flex: 1 0 100%; display: flex; flex-direction: row; gap: 10px; }
  .schritt--recht .btn { width: auto; min-width: 220px; }

  /* Einzelne Buttons im Screen (z. B. „Neues Rezept erstellen") nicht
     ueber die ganze Kartenbreite ziehen. */
  .screen > .btn { align-self: flex-start; width: auto; min-width: 276px; }
}
@media (prefers-reduced-motion: reduce) { .akk[open] .akk__inhalt { animation: none; } }

/* ==========================================================================
   Desktop-Startboard: drei Einstiege untereinander statt Toggle (05.10.2026)
   ========================================================================== */
.einstiege { display: flex; flex-direction: column; gap: 34px; }
.einstieg { display: flex; flex-direction: column; gap: 14px; }
.einstieg > * { width: 100%; }
.einstieg + .einstieg { padding-top: 30px; border-top: 1px solid rgba(60, 90, 110, 0.14); position: relative; }
.einstieg__kopf { display: flex; flex-direction: column; gap: 2px; }
.einstieg__oder {
  position: absolute; top: -11px; left: 0;
  padding: 2px 12px; border-radius: 999px;
  background: var(--glas-stark); border: 1px solid var(--glas-rand);
  font-size: 13px; line-height: 18px; font-weight: 600; color: #6b7680;
}
.einstieg__titel { font-size: 20px; line-height: 26px; font-weight: 700; }
.einstieg__text { font-size: 15px; line-height: 21px; color: #555; }
.einstieg.is-aktiv .einstieg__titel { color: var(--mittelblau); }

@media (min-width: 900px) {
  .suche--anamnese { min-height: 200px; }
  .suche--anamnese textarea { min-height: 176px; font-size: 16px; line-height: 24px; }
  .editor--anamnese textarea { min-height: 180px; }
}

/* Groessere Schrift (06.10.2026): lange deutsche Woerter in schmalen
   Spalten sauber trennen statt mitten im Wort umbrechen. */
.card__title, .row__label, .head__title, .info__title, .einstieg__titel,
.betrieb__name, .funktion__titel, .toggle__opt {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Desktop: Fliesstext noch eine Stufe groesser (06.10.2026, Kundenwunsch
   „Schrift allgemein recht klein") – am Rechner sitzt man weiter weg. */
@media (min-width: 900px) {
  body,
  .head__sub, .card__text, .info__sub, .info__text, .hmv__zeile,
  .alternativen__label, .row__label, .suche input, .suche__leer,
  .addon__label, .note, .editor textarea, .editor__label, .receipt, .receipt p,
  .eintrag__text, .eintrag__diagnose, .schritt__text, .schritt__punkte,
  .funktion__text, .standort, .betrieb__adresse, .consent__text, .icd__label,
  .ki__text, .suche--anamnese textarea, #icd {
    font-size: 16px;
    line-height: 24px;
  }
  .row__grund, .ki__hinweis, .hmv__zeile--variante, .editor__count, .info__label { font-size: 14px; line-height: 20px; }
  .toggle__opt { font-size: 15px; }
  .head__title { font-size: 22px; }
  .card__title { font-size: 20px; }
}

/* Schritt-/Symbolkaesten im Kopf groesser (06.10.2026): nach der groesseren
   Schrift stiessen Zahl und Symbole an den Rand. Kasten 32px, Symbole so
   skaliert, dass die sichtbare Glyphe ~18px hat und ringsum gleich viel Luft
   bleibt (die Figma-Icons haben unterschiedlich viel Leerraum im viewBox). */
.head__row { gap: 12px; }
.head__badge { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; }
.head__badge--icon svg     { width: 20px; height: 20px; }
.head__badge--verlauf svg  { width: 18px; height: 18px; }
.head__badge--standort svg { width: 25px; height: 25px; }
.head__badge--hilfe svg    { width: 28px; height: 28px; }
.head__badge--neu svg      { width: 26px; height: 26px; }
@media (min-width: 900px) {
  .head__badge { width: 36px; height: 36px; font-size: 19px; }
  .head__badge--icon svg     { width: 22px; height: 22px; }
  .head__badge--verlauf svg  { width: 20px; height: 20px; }
  .head__badge--standort svg { width: 28px; height: 28px; }
  .head__badge--hilfe svg    { width: 32px; height: 32px; }
  .head__badge--neu svg      { width: 30px; height: 30px; }
}

/* Datenschutz/Impressum: ein Kasten, Abschnitte nur ueber Zwischen-
   ueberschriften (06.10.2026). */
.rechtstext { gap: 22px; padding: 20px 20px 24px; }
.rechtstext__abschnitt { display: flex; flex-direction: column; gap: 6px; }
.rechtstext__titel { margin: 0; font-size: 17px; line-height: 23px; font-weight: 700; }
.rechtstext__abschnitt .schritt__text { margin: 0; }
@media (min-width: 900px) {
  .rechtstext { padding: 28px 32px 32px; gap: 26px; }
  .rechtstext__titel { font-size: 19px; line-height: 26px; }
  .rechtstext .schritt__text { max-width: 80ch; }
}

/* ==========================================================================
   Datenschutz-Einstellungen als zentrales Fenster (06.10.2026, Noah):
   Kategorien einzeln schaltbar, Nutzungshinweis wird mitbestaetigt.
   Ueberschreibt die fruehere Glaskarte ueber der Toolbar / unten rechts.
   ========================================================================== */
.consent,
.consent.ist-versteckt {
  position: fixed;
  inset: 0;
  left: 0; right: 0; top: 0; bottom: 0;
  transform: none;
  width: auto;
  max-width: none;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  background: rgba(20, 45, 60, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 100;
  overflow-y: auto;
  transition: opacity 280ms ease;
}
.consent.ist-versteckt { opacity: 0; pointer-events: none; }
.consent__karte {
  width: 100%;
  max-width: 560px;
  gap: 12px;
  padding: 22px 20px 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 30px 80px rgba(10, 40, 60, 0.35);
}
.consent__titel { font-size: 22px; line-height: 28px; }
.consent__block { display: flex; flex-direction: column; gap: 4px; }
.consent__untertitel { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--mittelblau); }
.consent__text { font-size: 14px; line-height: 21px; margin: 0; }
.consent__links { margin: 0; font-size: 14px; line-height: 20px; color: #6b7680; }
.consent__bestaetigung { margin: 0; font-size: 13px; line-height: 18px; color: #555; }
.consent__buttons { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 2px; }
.consent__buttons .btn { height: auto; min-height: 48px; padding: 10px 14px; font-size: 16px; white-space: normal; text-align: center; justify-content: center; }
.consent__buttons .btn svg { display: none; }
.app[data-consent='1'] .screen { padding-bottom: calc(var(--pad-y) + var(--reserve, 0px) + env(safe-area-inset-bottom, 0px)); }
body.consent-offen { overflow: hidden; }

/* Kategorie-Zeilen mit Schalter */
.cset__liste { display: flex; flex-direction: column; gap: 8px; }
.cset {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; text-align: left;
  border: 1px solid rgba(60, 90, 110, 0.18); border-radius: 14px;
  background: rgba(255, 255, 255, 0.7); color: var(--schwarz);
  cursor: pointer;
}
.cset--fest { cursor: default; }
.cset__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cset__titel { font-size: 15px; line-height: 20px; font-weight: 700; }
.cset__text { font-size: 13px; line-height: 18px; color: #555; }
.cset__immer { flex: none; font-size: 12px; font-weight: 600; color: #1d7a4f; }
.cset__schalter {
  flex: none; position: relative; width: 46px; height: 28px; border-radius: 14px;
  background: rgba(60, 90, 110, 0.25); transition: background 200ms ease;
}
.cset__schalter i {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 260ms var(--federn, ease);
}
.cset.is-on .cset__schalter { background: var(--mittelblau); }
.cset.is-on .cset__schalter i { transform: translateX(18px); }
.cset:focus-visible { outline: 2px solid var(--mittelblau); outline-offset: 2px; }

/* Hinweis, wenn eine Funktion ohne Zustimmung genutzt werden soll */
.zustimmung {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(51, 153, 204, 0.08); border: 1px solid rgba(51, 153, 204, 0.3);
}
.zustimmung__text { margin: 0; font-size: 14px; line-height: 21px; }
.zustimmung__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.zustimmung__knoepfe .btn { width: auto; }
.fe-karte.ist-gesperrt { display: grid; place-items: center; padding: 24px; background: var(--glas-leicht); }

@media (min-width: 900px) {
  .consent__karte { max-width: 640px; padding: 30px 32px 28px; gap: 14px; }
  .consent__titel { font-size: 26px; line-height: 32px; }
  .consent__text { font-size: 16px; line-height: 24px; }
  .consent__buttons { grid-template-columns: repeat(3, 1fr); }
  .cset__titel { font-size: 16px; }
  .cset__text { font-size: 14px; line-height: 20px; }
  .zustimmung__text { font-size: 16px; line-height: 24px; }
}

/* ==========================================================================
   Desktop-Feinschliff Schritt 1/2 (06.10.2026, Noahs Screenshots)
   ========================================================================== */
/* Empfehlung: Foto nur auf dem Desktop, rechts neben dem Text. */
.empfehlung__bild { display: none; }
.empfehlung__text { display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 900px) {
  .info--empfehlung { display: flex; flex-direction: row-reverse; align-items: center; gap: 32px; }
  .empfehlung__text { flex: 1 1 auto; }
  .empfehlung__bild {
    display: grid; place-items: center; flex: none;
    width: 220px; height: 200px; border-radius: 16px;
    background: var(--glas-leicht);
  }
  .empfehlung__bild img { max-width: 90%; max-height: 180px; width: auto; height: auto; object-fit: contain; }
}

@media (min-width: 1200px) {
  /* Schmerzursache: Fuss und Liste je halbe Breite, gleich hoch, Fuss groesser. */
  .zweispaltig--fuss { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .zweispaltig--fuss .info--fuss { height: auto; min-height: 340px; display: flex; flex-direction: column; }
  .zweispaltig--fuss .fuss { flex: 1 1 auto; height: auto; min-height: 260px; }
  .zweispaltig--fuss .fuss__rahmen { transform: rotate(60deg) scale(1.35); }
  .zweispaltig--fuss .info--seite .fuss__rahmen { transform: none; }

  /* Zusaetze: Liste und Produktkarte gleich hoch. */
  .zweispaltig--gleich { grid-template-columns: minmax(0, 1fr) 380px; align-items: stretch; }
  .zweispaltig--gleich > * { height: 100%; }
}