:root {
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111111;
  background: #ececf2;
}

* {
  box-sizing: border-box;
}

/* =========================================================
   Kopierschutz: Text lässt sich in der App nicht markieren/kopieren.
   Eingabefelder (input/textarea/select/contenteditable) bleiben nutzbar.
========================================================= */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select,
[contenteditable="true"], [contenteditable=""] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Seitenhöhe: NICHT height:100dvh auf body — zusammen mit overflow-x:hidden
   macht das den body zu einem eigenen, auf Bildschirmhöhe abgeschnittenen
   Scroll-Bereich. Das Fenster selbst kann dann nicht mehr scrollen
   (document.scrollingElement.scrollHeight == clientHeight), und auf dem
   iPhone liess sich die Übersicht gar nicht mehr bewegen. Mit min-height
   wächst das Dokument mit dem Inhalt und scrollt wieder normal. */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  width: 100%;
}
html {
  overflow-x: hidden;
}

#app {
  width: 100%;
  min-height: 100dvh;
}

body {
  background: #ececf2;
}

a {
  color: inherit;
  text-decoration: none;
}

.page {
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f7f8fa;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.home-section[aria-label="Primary actions"] {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  gap: 12px;
  justify-content: center;
}

/* 4 Karten in 2×2: Patienten | Behandlung / Fallbibliothek | Community */
/* (frühere Regel "3. Karte spannt 2 Spalten" wurde entfernt) */

/* Community-Admin-Sektion in gleicher Breite wie Primary Actions, aber volle Breite */
.home-section[aria-label="Community admin"] {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  gap: 12px;
  justify-content: center;
}
.home-section[aria-label="Community admin"] a {
  grid-column: span 2;
}

.home-section[aria-label="Quick references"] 
.ios-card-trailing,
.ios-quick-trailing{
  display:grid;
  justify-items:end;
  align-items:center;
  align-self:stretch;
  padding-top: 2px;
}

.ios-lock-badge{
  display:inline-grid;
  place-items:center;
  color:#7d8088;
  margin-bottom: 6px;
}

.ios-lock-badge ion-icon{
  font-size: 18px;
}

.ios-card-title-row,
.ios-quick-copy{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.ios-quick-title{
  display:block;
}

.ios-card.is-locked,
.ios-quick-link.is-locked{
  background:#f6f6f8;
}

.ios-card.is-locked .ios-card-title,
.ios-card.is-locked .ios-card-subtitle,
.ios-quick-link.is-locked .ios-quick-title,
.ios-quick-link.is-locked .ios-quick-icon{
  color:#a7acb6 !important;
}

.ios-card.is-locked .ios-card-icon{
  opacity:0.55;
}

.ios-card.is-locked .ios-chevron,
.ios-quick-link.is-locked .ios-chevron{
  color:#d4d7de;
}

.ios-card.is-locked .ios-lock-badge,
.ios-quick-link.is-locked .ios-lock-badge{
  color:#7f838c;
}

.ios-quick-link.is-locked{
  color:#a7acb6;
}

.home-section-header {
  grid-column: span 2;
}

.home-section[aria-label="Quick references"] {
  display: grid;
  grid-template-columns: repeat(2, 500px);
  gap: 12px;
  justify-content: center;
}
/* Früher lief pauschal die dritte Kachel über beide Spalten. Seit der
   Neuordnung vom 06.09.2026 entscheidet das die Seite selbst über die Klasse
   `is-wide` — gesetzt wird sie nur bei der Diagnostik, wenn die Reha-Kachel
   fehlt und die Diagnostik sonst allein in der Zeile stünde (Jf). */
.home-section[aria-label="Quick references"] a.is-wide {
  grid-column: span 2;
}

.home-page {
  flex: 1;                    /* wächst und füllt den verfügbaren Raum */
  padding: 
    calc(20px + var(--sat))     /* oben: Statusleiste/Notch */
    calc(16px + var(--sar))     /* rechts */
    calc(40px + var(--sab))     /* unten: mehr Reserve für Home-Indicator + Toolbar */
    calc(16px + var(--sal));    /* links */

  background: #ececf2;
  box-sizing: border-box;
  gap: 18px;
}

.home-header {
  text-align: center;
  margin-bottom: 12px;
}

.home-header h1 {
  margin: 8px 0 18px;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;

  text-align: center;   /* wichtig */
}

.home-section {
  display: grid;
  gap: 12px;
}

/* 2-Spalten-Variante: Fallbibliothek + Community nebeneinander */
.home-section-grid-2 {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .home-section-grid-2 {
    grid-template-columns: 1fr;
  }
}

.ios-card {
  display: grid;
  grid-template-columns: 86px 1fr 20px;
  align-items: center;
  gap: 12px;
  min-height: 98px;
  background: #fbfbfc;
  border-radius: 20px;
  padding: 14px 18px;
}
/* HTML hidden-Attribut respektieren — sonst überschreibt das display:grid
   oben die User-Agent-Defaults und versteckte Cards bleiben sichtbar. */
.ios-card[hidden] { display: none !important; }

.ios-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
}

.ios-card-icon ion-icon {
  font-size: clamp(24px, 4.8vw, 36px);
}

.tone-blue {
  background: #dcebfb;
  color: #63aef7;
}

.tone-green {
  background: #def2e3;
  color: #4ac56a;
}

.tone-orange {
  background: #f7eadf;
  color: #f0b06a;
}

.ios-card-copy {
  display: grid;
  gap: 2px;
}

.ios-card-title {
  font-size: clamp(16px, 3vw, 18px);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.ios-card-subtitle {
  font-size: clamp(16px, 3.2vw, 15px);
  color: #8f949d;
  line-height: 1.18;
}

.ios-chevron {
  color: #c2c3c8;
  font-size: clamp(26px, 5vw, 40px);
  line-height: 1;
  justify-self: end;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.home-section-header h2 {
  margin: 0;
  font-size: clamp(16px, 3vw, 22px);
  letter-spacing: -0.01em;
}

/* Desktop-Dashboard: Species-Umschalter (Kleintier/Pferd) mittig in der
   Schnellzugriff-Sektion ausrichten, damit die Trennlinie zwischen den
   beiden Segmenten genau auf der Mittelachse der darunterliegenden
   Rubrik-Karten sitzt. Beide Segmente werden dafür gleich breit gemacht
   (Trennlinie = Pillen-Mitte), dann wird die Pille absolut zentriert. */
@media (min-width: 821px){
  .home-section[aria-label="Quick references"] .home-section-header{
    position: relative;
  }
  .home-section[aria-label="Quick references"] .home-section-header .species-toggle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
  }
  .home-section[aria-label="Quick references"] .home-section-header .species-toggle .species-toggle-btn{
    flex: 1 1 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.language-pill {
  border: 0;
  background: #fbfbfc;
  border-radius: 18px;
  color: #63aef7;
  padding: 10px 16px;
  font-size: clamp(14px, 3vw, 22px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.ios-quick-link {
  display: grid;
  grid-template-columns: 48px 1fr 23px;
  align-items: center;
  background: #fbfbfc;
  border-radius: 20px;
  color: #63aef7;
  min-height: 76px;
  padding: 10px 18px;
  font-size: clamp(16px, 3vw, 20px);
}

.ios-quick-icon {
  font-size: clamp(20px, 4.6vw, 34px);
  opacity: 0.55;
}

.language-pill ion-icon {
  font-size: clamp(16px, 3vw, 22px);
}

.home-footer {
  margin-top: 8px;
  justify-content: center;
  text-align: center;
  color: #7e8088;
  font-size: clamp(18px, 3.3vw, 18px);
  gap: 12px;
  flex-wrap: wrap;
}

.home-footer p {
  width: 100%;
  margin: 4px 0 0;
}

@media (max-width: 820px){

  .home-section[aria-label="Primary actions"],
  .home-section[aria-label="Quick references"],
  .home-section[aria-label="Community admin"]{
    grid-template-columns: 1fr;   /* 🔥 statt 500px */
    justify-content: stretch;
  }

  /* keine 2-spaltigen Elemente mehr */
  .home-section[aria-label="Primary actions"] a:nth-child(3),
  .home-section[aria-label="Quick references"] a.is-wide,
  .home-section[aria-label="Quick references"] .home-section-header,
  .home-section[aria-label="Community admin"] a{
    grid-column: span 1;
  }

  /* 🔥 Header umbrechen lassen, damit der Sprach-Umschalter (Globus)
     auf schmalen Screens nicht rechts abgeschnitten wird */
  .home-section-header{
    flex-wrap: wrap;
  }
  .home-section-header > *{
    flex-shrink: 0;
  }

  /* --- Quick references (mobil) — an iOS-App (2_iOs) angeglichen ----------
     Zeile 1: Titel links, Sprach-Symbol rechts (bei DE zusätzlich DE-Punkte,
     kompakt genug, um neben den Titel zu passen).
     Zeile 2: Species-Umschalter (Kleintier/Pferd) volle Breite, Segmente 50/50. */
  .home-section[aria-label="Quick references"] .home-section-header{
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 12px;
    align-items: center;
  }
  .home-section[aria-label="Quick references"] .home-section-header h2{
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .home-section[aria-label="Quick references"] .home-section-header > div:last-child{
    order: 0;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 8px !important;
  }
  .home-section[aria-label="Quick references"] .home-section-header .species-toggle{
    order: 1;
    flex: 0 0 100%;
    width: 100%;
  }
  .home-section[aria-label="Quick references"] .home-section-header .species-toggle .species-toggle-btn{
    flex: 1 1 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Sprachpille + DE-Punkte kompakter, damit die DE-Gruppe in Zeile 1 passt */
  .home-section[aria-label="Quick references"] .home-section-header .language-dropdown{
    padding: 7px 10px;
    gap: 6px;
  }
  .home-section[aria-label="Quick references"] .home-section-header .lang-icon,
  .home-section[aria-label="Quick references"] .home-section-header .lang-chevron{
    font-size: 15px;
  }
  .home-section[aria-label="Quick references"] .home-section-header .pointcode-toggle{
    gap: 5px;
  }
  .home-section[aria-label="Quick references"] .home-section-header .pointcode-toggle > span{
    font-size: 11px !important;
  }

  /* 🔥 NEU: Abstand Icon ↔ Text reduzieren */
.ios-card{
  grid-template-columns: 60px 1fr 20px; /* vorher 86px */
  gap: 6px; /* vorher 12px */

}

/* Community-Karte mit Fortschrittsbalken */
.community-card .community-progress{
  display:block;
  height:6px;
  border-radius:999px;
  background:rgba(15,23,42,.08);
  overflow:hidden;
  margin-top:8px;
}
.community-card .community-progress-fill{
  display:block;
  height:100%;
  background:linear-gradient(90deg, #ff3b6b 0%, #5e5ce6 100%);
  transition:width .35s ease;
}
.community-card .community-progress-text{
  display:block;
  font-size:11px;
  color:rgba(15,23,42,.55);
  margin-top:4px;
  font-weight:600;
}
.community-pill{
  display:inline-flex;
  align-items:center;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:999px;
  background:linear-gradient(90deg, #ff3b6b 0%, #5e5ce6 100%);
  color:#fff;
  margin-left:8px;
}
.tone-pink{
  background:linear-gradient(135deg, #ffd0e0 0%, #ffb0c8 100%);
  color:#e11d48;
}
.ios-quick-link{
  grid-template-columns: 40px 1fr 20px; /* kleineres Icon-Feld */
  gap: 6px; /* Abstand reduzieren */
}  
.home-header h1 {
  margin: 8px 0 8px;   /* vorher 18px → jetzt viel enger */
}
}

.top-bar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;

  height: 56px;
  padding: 0 12px;

  border-bottom: 1px solid #e5e7eb;
  background: white;
}

.top-bar h1 {
  text-align: center;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.icon-btn,
.text-btn {
  border: none;
  background: none;
  color: #1d1d1f;
  font-size: 18px;
  cursor: pointer;
}

.placeholder-card {
  background: #fff;
  margin: 0 12px;
  border-radius: 12px;
  padding: 16px;
}

.placeholder-card h2 {
  margin: 0 0 8px;
}

.back-link {
  display: inline-block;
  padding: 8px 0;
  color: #2463eb;
}

.search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
}

.search-row input {
  border: 1px solid #d7d9de;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
}

.text-btn {
  font-size: 16px;
  font-weight: 600;
  padding: 8px 6px;
}

.image-section {
  width: 100%;
}

.acu-footnote {
  margin: 8px 4px 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(0,0,0,0.55);
  text-align: center;
}

.image-container {
  width: 100%;
  max-height: 70vh;
  min-height: 60vh;
  overflow: hidden;
  touch-action: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.transform-layer {
  position: relative;
  transform-origin: top left;
  will-change: transform;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-frame {
  position: relative;
  width: 100%;
}

.image-container img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.acupuncture-page .image-container {
  width: 100%;
  height: 65vh;
  overflow: hidden;
  touch-action: none;
  background: #fff;
  position: relative;
}

.acupuncture-page .transform-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acupuncture-page .image-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.acupuncture-page .image-container img {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  object-fit: contain;
}

.acupuncture-page .marker {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #df1d1d;
  transform: translate(-50%, -50%);
}

.details-panel {
  margin: 0 12px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
}

.details-panel h2 {
  margin: 0 0 8px;
}

.details-panel ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.4;
}

.hint {
  margin: 0;
  text-align: center;
  color: #6d6d73;
  padding: 0 12px;
}

.toolbar {
  margin-top: auto;
  background: #fff;
  border-top: 1px solid #e7e8ec;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
}

.toolbar .icon-btn {
  font-size: 24px;
}

.legal-links {
  display: flex;
}

.point-selection-page,
.point-category-page {
  background: #ececf2;
  padding: 8px 12px 20px;
}

.point-category-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 12px;
}

.point-category-scroll {
  flex: 1;
  overflow-y: auto;
}

.ios-nav-bar {
  padding-top: max(10px, env(safe-area-inset-top));
}

.back-link-btn {
  color: #63aef7;
  font-size: 30px;
  line-height: 1;
  padding: 0;
  text-align: left;
}

.ios-list-card,
.description-card {
  background: #fbfbfc;
  border-radius: 18px;
  margin: 8px 0;
  overflow: hidden;
}

.ios-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 56px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e6eb;
  font-size: 18px;
}

.ios-list-row:last-child {
  border-bottom: none;
}

.description-card {
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}

.description-card p {
  margin: 0;
  color: #6e717a;
  font-size: 14px;
}

.five-level-header {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 4px;
  margin: 8px 0;
}

.five-level-header span {
  text-align: center;
  color: #6e717a;
  font-size: 12px;
}

.pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.five-level-grid .point-pill {
  min-width: calc(20% - 8px);
}

.point-pill {
  border: none;
  background: #fbfbfc;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  color: #1d1d1f;
}

.fivelevel-table-scroll {
  max-height: 65vh;
  overflow-y: auto;
}

.five-level-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.five-level-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
/* --- Global app scale to mimic 67% browser zoom --- */
html { font-size: 67%; }


.language-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 999px;

  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.language-dropdown .lang-icon,
.language-dropdown .lang-chevron {
  font-size: 18px;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: 0;
  background: transparent;
  outline: none;

  font: inherit;
  font-weight: 700;
  letter-spacing: 0.02em;

  padding-right: 6px;
  cursor: pointer;
}

/* ---------- Diagnostics page ---------- */
.diagnostics-page { padding-top: 14px; }

.diagnostics-page.page {
  padding: 24px 28px;
}
.diag-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}

.diag-topbar-title{
  margin:0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.diag-topbar-spacer{ width:40px; }

.diag-surface{
  background: rgba(255,255,255,0.0);
}

/* header inside page */
.diag-header{
  margin: 4px 2px 12px;
}
.diag-header-text{
  margin:0 0 10px;
  font-size: 14px;
  color: rgba(0,0,0,0.55);
  text-align: center;
}

.diag-divider{
  height:1px;
  background: rgba(0,0,0,0.10);
}

/* grid */
.diag-grid{
  display: grid;
  grid-template-columns: repeat(2, 360px);
  gap: 14px;
  justify-content: center;
}

/* card */
.diag-card{
  display:block;
  text-decoration:none;
  color: inherit;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  padding: 14px;
}

.diag-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

.diag-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
}
.diag-icon ion-icon{ font-size: 20px; }

.diag-chevron{
  font-size: 20px;
  color: rgba(0,0,0,0.25);
}

.diag-title{
  font-size: 16px;       /* ähnlich titleMedium */
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  /* `pre-line` damit explizite "\n"-Umbrüche aus i18n-Strings
     (z. B. "Lahmheits-\nDiagnostik", "Zusammen-\nfassung") rendern. */
  white-space: pre-line;
  overflow: hidden;
}

.diag-subtitle{
  font-size: 13px;       /* ähnlich bodySmall */
  color: rgba(0,0,0,0.55);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* wide card spans 2 columns */
.diag-card-wide{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 14px;
}

.diag-wide-copy{ flex:1; }

/* ---------- Pro-Sperre: gesperrte Menü-Karten (Schloss + grau) ---------- */
.diag-card-top-trailing{
  display:inline-flex;
  align-items:center;
  gap:2px;
}
.diag-lock-badge{
  display:inline-grid;
  place-items:center;
  color:#7f838c;
}
.diag-lock-badge ion-icon{ font-size:18px; }

.diag-card.is-locked{ background:#f6f6f8; }
.diag-card.is-locked .diag-title,
.diag-card.is-locked .diag-subtitle{ color:#a7acb6; }
.diag-card.is-locked .diag-icon{ opacity:0.55; }
.diag-card.is-locked .diag-chevron{ color:#d4d7de; }

/* ---------- Pro-Sperre: ganzseitige Sperr-Seite ---------- */
.pro-lock-card{
  max-width: 420px;
  margin: 32px auto 0;
  padding: 28px 22px;
  background:#fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  text-align:center;
}
.pro-lock-badge{
  display:inline-grid;
  place-items:center;
  width:56px;
  height:56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: rgba(156,39,176,0.12);
  color:#9c27b0;
}
.pro-lock-badge ion-icon{ font-size:28px; }
.pro-lock-title{ font-size:19px; font-weight:800; margin:0 0 8px; }
.pro-lock-text{ font-size:14px; color:rgba(0,0,0,0.6); line-height:1.5; margin:0 0 18px; }
.pro-lock-cta{ display:inline-block; }

/* spacer like your GridItemSpan spacer */
.diag-spacer{
  grid-column: 1 / -1;
  height: 4px;
}

/* tones like Android tint boxes */
.tone-red    { background: rgba(244,67,54,0.14); color:#f44336; }
.tone-teal   { background: rgba(0,150,136,0.14); color:#009688; }
.tone-purple { background: rgba(156,39,176,0.14); color:#9c27b0; }

/* ---------- Mu Points Page ---------- */
.mu-page { padding-top: 14px; }

.mu-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.mu-topbar .back-button{
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: #0a84ff;
  text-decoration: none;
}

.mu-topbar .back-button ion-icon{
  font-size: 22px;
}

.mu-title{
  margin:0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align:center;
  flex: 1;
}

.mu-actions{
  display:flex;
  gap: 8px;
  flex: 0 0 auto;
}

.mu-icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  cursor: pointer;
  display:grid;
  place-items:center;
}

.mu-icon-btn ion-icon { font-size: 20px; }

/* chips grid 4 columns */
.mu-chips {
  display: flex;
  gap: 8px;
}

.mu-chip {
  flex: 1;              /* alle gleich breit */
  text-align: center;
}

.mu-chip{
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 14px;
  height: 48px;
  padding: 6px 6px;
  cursor:pointer;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
}

.mu-chip-title{
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.mu-chip-code{
  font-size: 11px;
  color: rgba(0,0,0,0.55);
  line-height: 1.1;
}

.mu-chip.is-selected{
  border-color: rgba(46,125,50,0.35);
  background: rgba(46,125,50,0.10);
}

.mu-canvas-wrap{
  margin-top: 8px;
  background: rgba(0,0,0,0.00);
}

.mu-canvas{
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  touch-action: none; /* important for pointer drag */
}

/* image + overlay share same transform */
.mu-image,
.mu-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin: center center;
}

.mu-image{
  object-fit: contain;
  user-select: none;
  pointer-events: none; /* clicks go to svg */
}

.mu-overlay{
  pointer-events: auto;
}

/* summary */
.mu-summary{
  margin-top: 14px;
  padding: 0 4px;
}

.mu-summary-title{
  font-weight: 800;
  margin-bottom: 8px;
  font-size:16px;
}

.mu-summary-text{
  color: rgba(0,0,0,0.65);
  line-height: 1.35;
  font-size:14px;
}

@media (max-width: 900px) {
  .mu-page {
    padding: 12px 0 0;
    min-height: 100dvh;
  }

  .mu-topbar {
    padding: 0 14px;
  }

  .mu-title {
    font-size: 18px;
  }

  .mu-back{
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    color: #0a84ff;
  }

  .mu-back ion-icon{
    font-size: 28px;
  }

  .mu-chips {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px 4px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .mu-chip {
    flex: 0 0 auto;
    min-width: 84px;
    padding: 6px 8px;
    scroll-snap-align: start;
  }

  .mu-canvas-wrap {
    padding: 0 0 8px;
    flex: 1;
    min-height: 0;
  }

  .mu-canvas {
    height: min(58vh, 620px);
    border-radius: 14px;
  }

  .mu-image {
    object-position: center 36%;
  }

  .mu-summary {
    padding: 0 14px 14px;
  }
}

/* ---------- Diagnostics Save button (shared) ---------- */
.dx-save-btn{
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  border:1px solid #166534;
  border-radius:6px;
  background:#22c55e;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.dx-save-btn:hover{ background:#16a34a; }
.dx-save-btn:active{ background:#15803d; }

/* Save-Button immer rechts in der Topbar (nicht im Flex-Flow) */
.topbar .dx-save-btn,
.top-bar .dx-save-btn{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}

/* Pulse-Page: Titel zentriert, Toggle links neben Save-Button */
.pulse-page .topbar{
  justify-content:center;
}
.pulse-page .topbar h1{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100% - 340px); /* Platz für back-button + toggle + Mülleimer + save */
  pointer-events:none;          /* Klicks gehen durch zum Toggle/Save */
}
.pulse-page .topbar .pulse-mode-toggle{
  position:absolute;
  right:120px;                  /* links neben dem Save-Button */
  top:50%;
  transform:translateY(-50%);
}

/* Tongue-Page: Titel zentriert, Save-Button rechts, kein Überlapp */
.tongue-page .topbar{
  justify-content:center;
}
.tongue-page .topbar h1{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100% - 230px); /* Platz für back-button + Mülleimer + save */
  pointer-events:none;
}

@media (max-width: 480px){
  .pulse-page .topbar h1{
    font-size:15px;
    max-width:calc(100% - 290px);
  }
  .pulse-page .topbar .pulse-mode-toggle{
    font-size:11px;
    right:108px;
    max-width:150px;
  }
  .tongue-page .topbar h1{
    font-size:15px;
    max-width:calc(100% - 160px);
  }
}

/* ---------- Horse Mu Points — mobile layout ---------- */
@media (max-width: 768px) {
  /* List above skeleton, full width */
  .mu-h-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  .mu-h-grid #mu-side {
    order: 1;
    border-left: none !important;
    border-bottom: 1px solid #ddd;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px !important;
    max-height: none;
  }
  .mu-h-grid #mu-stage-wrap {
    order: 2;
  }
  /* Hide title + hint on mobile to save vertical space */
  .mu-h-grid .mu-side-title,
  .mu-h-grid .mu-side-hint {
    display: none;
  }
  /* Rows container becomes a horizontal strip */
  .mu-h-grid .mu-side-rows {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: max-content;
  }
  /* Each row becomes an inline chip — keep left-border state indicator */
  .mu-h-grid .mu-side-rows > [data-toggle] {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 6px 10px !important;
    white-space: nowrap;
    border-radius: 6px !important;
  }
}
/* ---------- Shu Points Page ---------- */
/* ---------- Shu Points (iOS-like) ---------- */
.shu-page { padding-top: 14px; display: flex;
  flex-direction: column;
  height: 100vh;}

.shu-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.shu-title{
  margin:0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-align:center;
  flex: 1;

}

.shu-spacer{ width:44px; }

.shu-stage {
  display: flex;
  justify-content: center;
  padding: 8px 0 20px;
  flex: 1;
  overflow-y: auto;
}

.shu-chart{
  position: relative;
  background: transparent; 
  border-radius: 18px;
  padding: 6px 0; /* minimaler Sicherheitsrand */
}

.shu-chart-plain{
  position: relative;
  background: transparent;   /* keine Box */
  border-radius: 0;          /* keine runden Ecken */
  overflow: visible;         /* ganz wichtig: nix abschneiden */
}

/* layer order: grid -> labels -> points */
.shu-grid, .shu-labels, .shu-points{
  position:absolute;
  inset:0;
}

.shu-grid{ pointer-events:none; }

/* Black crisp lines like screenshot */
.shu-vline{
  position:absolute;
  width: 2px;
  background: #000;
}

.shu-hline{
  position:absolute;
  height: 2px;
  background: #000;
}

/* Labels always visible (T1..S2) */
.shu-labels{ pointer-events:none; }
.shu-vertebra{
  position:absolute;
  left: 18px;
  font-size: 18px;
  font-weight: 600;
  color: #6b6b6f;
}

/* Points rows */
.shu-row{
  position:absolute;
  display:flex;
  align-items:center;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 4px 0;
  cursor:pointer;
  text-align:left;
}

.shu-dot-wrap{ position:relative; display:inline-block; }
.shu-dot{ position:absolute; inset:0; border-radius:999px; }

.shu-ring{
  position:absolute;
  left:-4px; top:-4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border-radius: 999px;
  border: 2px solid #fff;
  box-sizing:border-box;
}

.shu-name{
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* Selected-Liste unter dem Chart — fließend wie .mu-summary (nicht fixed) */
.shu-selected{
  flex: none;
  background: rgba(255,255,255,0.95);
  border-top: 1px solid rgba(0,0,0,0.10);
  padding: 16px;
}

.shu-selected-title{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.shu-selected-text{
  font-size: 14px;
  color: rgba(0,0,0,0.75);
}



/* =======================
   Tongue Diagnostics (Web)
======================= */
.tongue-topbar{
  display: flex;
  align-items: center;
  justify-content: center;   /* zentriert den Titel */
  position: relative;
}

.tongue-title{
  text-align: center;
  font-size: 22px;
  font-weight: 800;
}

.tongue-page .tongue-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 18px;
}

.tongue-subtitle{
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin: 6px 0 6px;
}

/* =========================================================
   GLOBALE BEURTEILUNG (ohne Regionzuordnung)
========================================================= */
.tongue-global-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
  margin: 6px auto 14px;
  padding: 10px 14px;
  border: 1px solid rgba(26,115,232,0.25);
  border-radius: 10px;
  background: rgba(26,115,232,0.08);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tongue-global-btn:hover{
  background: rgba(26,115,232,0.14);
}
.tongue-global-btn.is-filled{
  background: rgba(46,125,50,0.10);
  border-color: rgba(46,125,50,0.35);
}
.tongue-global-mark{
  display: inline-block;
  width: 18px;
  text-align: center;
  font-weight: 700;
  color: #1a73e8;
}
.tongue-global-btn.is-filled .tongue-global-mark{
  color: #2e7d32;
}
.tongue-global-label{
  flex: 1;
  text-align: left;
}
.tongue-global-chev{
  color: #888;
  font-size: 20px;
  line-height: 1;
}

/* =========================================================
   MAIN LAYOUT (Bild bleibt zentriert, Panel "schwebt" rechts)
========================================================= */
.tongue-main{
  position: relative;
  width: fit-content;     /* Container ist so breit wie das Bild */
  max-width: 100%;
  margin: 0 auto;         /* zentriert den ganzen Block auf der Seite */
}
/* Bild + Marker müssen die EXAKT gleiche Fläche haben */
.tongue-overlay{
  position: relative;
  display: inline-block;       /* Größe kommt vom Bild */
  margin: 0 auto;
  padding: 0;
  border: 0;
  line-height: 0;              /* verhindert extra whitespace */
  z-index: 1;
}

/* Hier stellst du die Größe ein, damit es auf eine Seite passt */
.tongue-img {
  display: block;
  width: auto;
  height: auto;
  max-height: 56vh;
  max-width: min(92vw, 520px);

  /* 🔥 WICHTIG */
  pointer-events: none;   /* Touch geht durch zum Marker */
  position: relative;
  z-index: 1;
}

.tongue-markers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  /* 🔥 WICHTIG */
  z-index: 2;             /* über dem Bild */
}

/* Marker wie iOS: blaue Kreise */
.tongue-marker{
  position: absolute;
  transform: translate(-40%, -50%);
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.tongue-marker-dot{
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(90, 170, 255, 0.35);
  box-shadow: 0 0 0 0 rgba(90, 170, 255, 0.0);
}


/* =========================================================
   RIGHT PANEL (nimmt keinen Platz weg -> Bild rutscht nicht)
========================================================= */
.tongue-side{
  position: absolute;

  /* immer direkt neben dem Bild – egal wie breit die Seite ist */
  left: 100%;
  margin-left: 20px;       /* Abstand zum Bild (kleiner = näher) */

  /* vertikal mittig + etwas nach unten */
  top: 50%;
  transform: translateY(-35%); /* -50% wäre exakt Mitte, -35% ist etwas tiefer */

  width: 290px;
  max-width: 90vw;

  max-height: 56vh;
  overflow: auto;

  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  z-index: 5;
}
.tongue-side h2 {
  font-size: 16px; /* kleiner machen */
}
.tongue-field {
  display: grid;
  grid-template-columns: 80px 160px; /* Label kompakt, Dropdown schmaler */
  align-items: center;
  gap: 4px;
}
/* Farbe / Belag / Form standen direkt aufeinander — etwas Luft dazwischen
   (Jf, 27.8.2026). Nur zwischen den Feldern, damit der Abstand zur
   Kopfzeile unverändert bleibt. */
.tongue-field + .tongue-field {
  margin-top: 10px;
}
.tongue-label{
  font-size: 15px;
}

.tongue-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
  align-items: center;
}
.tongue-select{
  width: 100%;                      /* alle gleich breit */
  height: 36px;
  border-radius: 10px;
  border: none;
  background: #f1f1f1;
  padding: 0 10px;
  font-size: 14px;
}

/* Optional: kleiner Abstand zum Rand */
@media (max-width: 820px){

  .tongue-side {
      position: fixed;
    
      left: 50%;
      top: 50%;
    
      width: min(90vw, 290px);
      max-height: 80vh;
    
      background: #fff;
      border-radius: 20px 20px 0 0;
      padding: 12px 14px;
    
      overflow-y: auto;
      overflow-x: hidden;
    
      box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
      z-index: 999;
    
      /* 🔥 kombiniert */
      transform: translate(-50%, calc(-50% + 100%));
      transition: transform 0.25s ease;
    }
    
    .tongue-side:not([hidden]) {
      transform: translate(-50%, -50%);
    }
}

.tongue-panel-title{
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 12px;
}

.tongue-panel-subtitle{
  font-weight: 500;
  font-size: 13px;
  color: #6b7280;
  margin-left: 4px;
}

/* =========================================================
   Diagnosen Bereich
========================================================= */

.tongue-dx{
  width: 100%;
  max-width: min(92vw, 520px);

  margin: 20px auto 0;      /* zentriert + Abstand nach oben */
  text-align: center;

  max-height: 220px;        /* begrenzt Höhe */
  overflow-y: auto;         /* scrollbar bei vielen Diagnosen */

  padding-right: 6px;       /* verhindert Scrollbar-Überlappung */
}

.tongue-dx-title{
  font-size: 18px;
  font-weight: 800;
  margin: 8px 0 10px;
}

.tongue-dx-empty{
  color: #8a8a8a;
  font-size: 16px;
}

.tongue-dx-list{
  display: grid;
  gap: 8px;
}

.tongue-dx-item{
  text-align: left;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
}

/* =========================================================
   Mobile: Panel unter dem Bild (wie vorher)
========================================================= */
.tongue-header {
  display: flex;
  align-items: center;          /* 🔥 wichtig */
  justify-content: space-between;
}

.tongue-panel-title {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;               /* 🔥 verhindert Versatz */
}

.tongue-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  border: none;
  background: transparent;

  font-size: 22px;
  line-height: 1;
  padding: 0;

  transform: translateY(-8px); /* 🔥 DAS fixt dein Problem */
}

@media (max-width: 820px){
  .tongue-main{
    flex-direction: column;
    align-items: center;
  }

  .tongue-side{
    position: absolute;
    top: 0;
    right: 0;
  
    width: 260px;          /* <-- schmaler */
    max-width: 90vw;
  
    background: #fff;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 5;
  }
}
.pulse-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
}

.page.pulse-page {
  height: 100vh;
  overflow-y: auto !important;
  overflow-x: hidden;
}

.page.pulse-page .pulse-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 16px 18px;
  max-width: 700px;
  margin: 0 auto;
  width: 100%;
}

.pulse-page .pulse-content{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:12px 16px 18px;
  max-width:980px;
  margin:0 auto;
}

.pulse-topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:10px 16px;
}
/* ===============================
   THREE FINGER MODE – FIX 2 COL
================================ */

.pulse-grid.three-mode {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px;
  align-items: start;
  width: 100%;
}

.pulse-grid.three-mode .pulse-col {
  width: 100%;
  min-width: 0;
}
/* Gruppe aus Titel + Toggle */
.pulse-title-group{
  display:flex;
  align-items:center;
  gap:12px;     /* Abstand zwischen Titel und Button */
}

.pulse-title{
  font-size:20px;
  align-items:center;
  font-weight:800;
  margin:0;
}

.pulse-mode-toggle{
  border:0;
  background:#f1f1f1;
  padding:6px 10px;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
}

/* Pulse page topbar: Titel zentriert, Toggle links vom Save-Button */
.pulse-page .topbar h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 280px);
  pointer-events: none;
}

.pulse-page .topbar .pulse-mode-toggle {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  white-space: nowrap;      /* volle Beschriftung, kein Abschneiden */
}

@media (max-width: 420px) {
  .pulse-page .topbar h1 {
    font-size: 15px;
    max-width: calc(100% - 240px);
  }

  .pulse-page .topbar .pulse-mode-toggle {
    font-size: 11px;
    max-width: 150px;
    right: 108px;
  }
}
.pulse-grid{ display:flex; flex-direction:column; gap:16px; }
.pulse-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.pulse-col{ min-width:0; }

.pulse-region{
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.pulse-region-side{
  font-weight:800;
  margin-bottom:10px;
  opacity:0.8;
}

.pulse-organ{ padding: 10px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.pulse-organ:first-of-type{ border-top:0; padding-top:0; }
.pulse-organ-title{ font-weight:800; margin-bottom:8px;font-size: 12px; }

.pulse-qualities-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:0;
  background:#f1f1f1;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size: 12px;
}

.pulse-menu{
  margin-top:10px;
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  overflow:hidden;
}

.pulse-menu.is-hidden{ display:none; }

.pulse-menu-text{
  font-size: 14px;
}

.pulse-menu-item{
  font-size: 14px;
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:0;
  background:#fff;
  cursor:pointer;
  text-align:left;
}

.pulse-menu-item:hover{ background: rgba(0,0,0,0.03); }

.pulse-check{
  width:18px; height:18px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.2);
  display:inline-block;
}
.pulse-check.is-on{
  background: rgba(90,170,255,0.35);
  border-color: rgba(90,170,255,0.8);
}

.pulse-actions{ display:flex; justify-content:center; margin-top: 4px; }
.pulse-toggle{
  border:0;
  background:#111;
  color:#fff;
  padding:10px 14px;
  border-radius: 12px;
  cursor:pointer;
}

.pulse-dx{
  margin-top: 6px;
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.pulse-dx-title{
  text-align:center;
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 10px;
}

.pulse-dx-box{
  margin:0;
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.45;
  font-family:inherit;
  padding-left: 12px; 
}

.pulse-dx-empty{ text-align:center; opacity:0.6; }

.summary-card:first-child {
  padding: 16px 18px;
}

.summary-card:first-child div:first-child {
  font-size: 20px;      /* Name größer */
  font-weight: 600;
  color: #111;
  margin-bottom: 4px;
}

.summary-card:first-child div:last-child {
  font-size: 14px;      /* Katze • Nino kleiner */
  color: #777;
}
@media (max-width: 820px){
  .pulse-row{ grid-template-columns: 1fr; }
}

/* unified summary typography */

.summary-item-title,
.summary-item-content,
.summary-card > div,
.summary-chip {
  font-family: inherit;
  line-height: 1.4;
}

.summary-item-title{
  font-size:14px;
  font-weight:500;
  opacity:0.7;
}

.summary-item-content{
  font-size:8px;
  font-weight:400;
  margin-top:4px;
  /* Zeilenumbrüche (\n) darstellen — z. B. Zunge/Palpation „Region · Codes"
     pro Region auf eigener Zeile. Leerzeichen kollabieren normal. */
  white-space: pre-line;
}

/* Gewählte Qualitäten (Zunge: Farbe/Belag/Form, Puls: Qualität je Organ).
   Stehen ÜBER der abgeleiteten Diagnose, etwas kräftiger als das Zitat,
   damit klar ist: das ist der Befund, darunter folgt die Folgerung. */
.summary-item-traits{
  font-size:13px;
  font-weight:500;
  margin-top:4px;
  white-space: pre-line;
}

/* Wörtlich diktierter Originalbefund unter Puls/Zunge (Migration 0078).
   Bewusst zurückhaltend: kursiv, gedämpft, mit Zeilenumbrüchen, damit die
   strukturierten Befunde die Zeile weiterhin anführen. */
.summary-item-quote{
  font-size:12px;
  font-style:italic;
  font-weight:400;
  margin-top:4px;
  opacity:0.75;
  color: var(--muted, #64748b);
  white-space: pre-line;
}

#summary-def-select,
#summary-add-def {
  font-size:14px;
  font-family: inherit;
}

#summary-def-select{
  width:120px;
  height:34px;
  border-radius:10px;
  border:1px solid #ddd;
  padding:0 10px;
}

#summary-add-def{
  height:34px;
  border-radius:10px;
  padding:0 14px;
  background:#111;
  color:white;
  border:none;
}

#summary-save-case {
  margin-left: 12px;
}

/* chips: patterns + points */

.summary-section-title{
  font-size:20px;
  font-weight:900;
  margin-bottom:12px;
}

.summary-topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;

  height:56px;      /* gleiche Höhe wie andere Seiten */
  padding:0 16px;
}

.summary-save{ position:absolute; right:16px; }

.summary-title{
  font-size:20px;
  font-weight:800;
  margin:0;
  text-align:center;
}

.summary-card{
  background:#fff;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);

  max-width: 100%;   /* 🔥 wichtig */
}

.summary-card [data-def-key]{
  font-size:14px;
  font-weight:500;
  padding:6px 6px;
}

/* Abklappbare Karten-Kopfzeile (Patientendaten, Ausgewählte Muster,
   Empfohlene/Verwendete Punkte). Klick schaltet den Karten-Körper um. */
.summary-collapse-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  margin:0 0 10px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  font:inherit;
  color:inherit;
  text-align:left;
}
.summary-collapse-head.is-collapsed{ margin-bottom:0; }
.summary-collapse-title{
  font-size:14px;
  font-weight:700;
}
.summary-collapse-chevron{
  flex:0 0 auto;
  font-size:20px;
  color:#64748b;
  transition:transform .18s ease;
}
.summary-collapse-head.is-collapsed .summary-collapse-chevron{
  transform:rotate(-90deg);
}

.summary-patient-name{ font-size:22px; font-weight:900; }
.summary-patient-sub{ opacity:0.75; margin-top:4px; }
.summary-patient-history{ opacity:0.75; margin-top:8px; font-size:13px; }

.summary-item{ padding:12px 0; border-top:1px solid rgba(0,0,0,0.06); }
.summary-item:first-child{ border-top:0; padding-top:0; }
.summary-item:last-child {
  border-bottom: none;
}
.summary-item-head{ display:flex; align-items:center; gap:10px; }
.summary-item-title{ flex:1; font-weight:800; }
.summary-edit{ text-decoration:none; font-weight:700; white-space:nowrap; }

.summary-item-content{ margin-top:6px; font-size:16px; }

.summary-section-title{ font-size:14px;font-family: inherit;font-weight:600; margin-bottom:10px; }

.summary-def-list{ display:flex; flex-direction:column; gap:8px; }
.summary-def-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.summary-def-item{
  font-size:16px;
  font-weight:700;
  padding:6px 16px;
}
.summary-def-remove{ border:0; background:transparent; cursor:pointer; }

.summary-def-add {
  display: flex;     /* 🔥 statt grid */
  gap: 10px;         /* 🔥 Abstand zwischen allen Elementen */
  align-items: center;
}
.summary-label{ grid-column:1 / -1; font-size:13px; opacity:0.75; }
.summary-select {
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: #f1f1f1;
  padding: 0 12px;

  width: auto;          /* 🔥 wichtig */
  max-width: none;      /* 🔥 wichtig */
  flex: 0 0 auto;       /* 🔥 verhindert Stretch */
}
.summary-add-btn{ height:36px; border:0; border-radius:10px; padding:0 12px; background:#111; color:#fff; cursor:pointer; }

/* Verdachtsdiagnose (free-text) field that sits below the pattern selector. */
.summary-suspected-diagnosis {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.summary-suspected-diagnosis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.summary-suspected-diagnosis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.summary-adopt-patterns {
  appearance: none;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #3730a3;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.summary-adopt-patterns:hover,
.summary-adopt-patterns:focus-visible {
  background: #e0e7ff;
  border-color: #818cf8;
  outline: none;
}
.summary-field-label {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

/* Single source of truth for every "section heading" on the Summary page.
   Beschwerde / SHU-Punkte / Ausgewählte Muster / Verdachtsdiagnose /
   Empfohlene Punkte / Verwendete Punkte / Visualisierung / Aktuelle
   Einschätzung / Nächster Schritt / Fotos / Notizen all share this size
   and weight, regardless of which underlying class they use. Placed last
   so it wins via cascade against any earlier specific rule. */
.summary-page .summary-section-title,
.summary-page .summary-item-title,
.summary-page .summary-collapse-title,
.summary-page .summary-field-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
.summary-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  resize: vertical;
}
.summary-textarea:focus {
  outline: 2px solid #0a84ff;
  outline-offset: 0;
  border-color: #0a84ff;
}

/* "Verwendete Punkte" section — input row + copy button + chip preview. */
.summary-used-points-card {
  display: grid;
  gap: 8px;
}
.summary-used-points-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.summary-used-points-input {
  flex: 1 1 220px;
  min-width: 220px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  background: #ffffff;
}
.summary-used-points-input:focus {
  outline: 2px solid #0a84ff;
  outline-offset: 0;
  border-color: #0a84ff;
}
.summary-copy-suggested-btn {
  height: 36px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #0f172a;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.summary-copy-suggested-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: #0a84ff;
  color: #1d4ed8;
}
.summary-copy-suggested-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.summary-copy-suggested-btn ion-icon {
  font-size: 14px;
}
.summary-used-points-hint {
  font-size: 11.5px;
  color: #64748b;
}
/* T7/T8 (Xin Bao Shu): traditionelles Perikard-Shu ohne Punkt im Atlas —
   sieht aus wie ein Chip, ist aber kein Link. */
.summary-chip.is-static {
  color: #64748b;
  cursor: default;
}
/* Zweizeiliger Chip (T7/T8 über dem Namen), damit er nicht breiter wird
   als die übrigen Punkt-Chips. */
.summary-chip.is-twoline {
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding-top: 4px;
  padding-bottom: 4px;
}
.summary-chip.is-twoline .sc-sub {
  font-size: 10px;
  font-weight: 600;
  opacity: .85;
  white-space: nowrap;
}
/* Punkt, den BEIDE Quellen nennen (Muster + Muskelpalpation): kräftigerer
   Chip mit „×2" — gleiche Konvention wie .prep-chip.is-multi in der
   Vorbereitung (Jf 06.09.2026). */
.summary-chip.is-multi {
  background: #dbe7ff;
  color: #1e3a8a;
}
.summary-chip-multi {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 700;
  opacity: .75;
  white-space: nowrap;
}

.summary-chips-used .summary-chip.is-used {
  background: #e0e7ff;
  color: #1e3a8a;
  font-weight: 700;
  border-color: transparent;
}

/* Free-text rubrics: Beschwerde, Aktuelle Einschätzung, Nächster Schritt. */
.summary-rubrics-card {
  display: grid;
  gap: 12px;
}
.summary-rubric-field {
  display: grid;
  gap: 6px;
}

/* Prominent Save button at the bottom of the Summary form, so the user can
   finish editing all rubrics without scrolling back up to the topbar. */
.summary-save-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px;
}
.summary-invoice-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid #0a84ff;
  background: #ffffff;
  color: #0a84ff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.summary-invoice-btn:hover { background: #eaf3ff; }
.summary-invoice-btn:active { transform: translateY(1px); }
.summary-invoice-btn ion-icon { font-size: 18px; }
.summary-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 12px;
  border: 0;
  background: #0a84ff;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(10, 132, 255, 0.25);
  transition: background 120ms ease, transform 120ms ease;
}
.summary-save-btn:hover {
  background: #0067cc;
}
.summary-save-btn:active {
  transform: translateY(1px);
}
.summary-save-btn ion-icon {
  font-size: 18px;
}

/* Sticky header with Save button at the top of the Summary content. The
   regular .topbar Save button is hidden on desktop (sidebar layout), so
   this gives the user a Save action that's always reachable without
   scrolling. position:sticky keeps it pinned while scrolling through the
   long form. */
.summary-sticky-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* 3-column grid keeps the title centered in the block regardless of how
     wide the right-side Save button gets. The empty left column mirrors
     the Save button's column so the centering stays optical-true. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  margin: -12px 0 6px;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid #e5e7eb;
}
.summary-sticky-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  grid-column: 2;
  text-align: center;
}
.summary-save-btn-top {
  grid-column: 3;
  justify-self: end;
  padding: 8px 18px;
  font-size: 13px;
  box-shadow: 0 1px 4px rgba(10, 132, 255, 0.2);
}
.summary-save-btn-top ion-icon {
  font-size: 16px;
}

.summary-def-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
}

/* 👉 DAS ist der Fix */
.summary-def-selected {
  grid-column: 1 / -1; /* ganze Breite */
}

#summary-def-select {
  width: fit-content;
  min-width: 160px;   /* fallback */
  max-width: 100%;
}

.summary-def-selected{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.summary-def-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#f1f1f1;
  font-size:14px;
  font-weight:600;
}

.summary-def-item button{
  border:none;
  background:none;
  cursor:pointer;
  font-size:14px;
}

.summary-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.summary-chip{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:#f1f1f1;
  text-decoration:none;
  color:inherit;
  font-size:12px;
  font-weight:600;
}

.summary-visual-card {
  display: grid;
  gap: 12px;
}

.summary-visual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-visual-status {
  font-size: 13px;
  color: #64748b;
}

.summary-visual-confirm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.summary-visual-confirm input {
  margin: 0;
  accent-color: #0a84ff;
}

.summary-horse-preview {
  display: grid;
  gap: 8px;
}

.summary-horse-map {
  position: relative;
  width: min(100%, 340px);
  aspect-ratio: 1.9 / 1;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.summary-horse-map img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.summary-horse-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: grid;
  place-items: center;
}

.summary-horse-number {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0a84ff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18), 0 4px 10px rgba(15, 23, 42, .18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.summary-horse-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  max-width: 340px;
  color: #334155;
  font-size: 12px;
  line-height: 1.3;
}

.summary-horse-key-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.summary-horse-key-item strong {
  color: #0f172a;
}

.summary-horse-support {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.visual-media-carousel {
  --visual-media-max: 340px;
  --vm-marker: #0a84ff;
  width: min(100%, var(--visual-media-max));
  display: grid;
  gap: 8px;
}

.visual-media-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
}

.visual-media-track {
  display: flex;
  width: 100%;
  transition: transform .2s ease;
}

.visual-media-slide {
  flex: 0 0 100%;
  min-width: 100%;
}

.visual-media-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 1364;
  min-height: 132px;
  overflow: hidden;
}

.visual-media-base-img,
.visual-media-skeleton-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.visual-media-base-img.is-cover {
  object-fit: cover;
}

.visual-media-base-img.is-contain {
  object-fit: contain;
  padding: 8px;
  background: #fff;
  box-sizing: border-box;
}

.visual-media-skeleton-img {
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
  opacity: .94;
}

.visual-media-skeleton-img.is-overlay {
  opacity: .54;
  mix-blend-mode: multiply;
  filter: contrast(1.04);
}

.visual-media-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.visual-media-marker-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--vm-marker);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .18), 0 4px 10px rgba(15, 23, 42, .18);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.visual-media-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: #0f172a;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .14);
}

.visual-media-arrow ion-icon {
  font-size: 18px;
}

.visual-media-arrow-prev {
  left: 7px;
}

.visual-media-arrow-next {
  right: 7px;
}

.visual-media-dots {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}

.visual-media-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  padding: 0;
}

.visual-media-dot.active {
  width: 16px;
  background: #0a84ff;
}

.visual-media-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #334155;
  font-size: 12px;
  line-height: 1.3;
}

.visual-media-key-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.visual-media-key-item strong {
  color: #0f172a;
}

.visual-media-support {
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 520px) {
  .visual-media-carousel {
    --visual-media-max: 320px;
  }

  .visual-media-map {
    min-height: 122px;
  }

  .visual-media-skeleton-img {
    padding: 8px;
  }

  .visual-media-arrow {
    width: 26px;
    height: 26px;
  }
}

textarea#summary-notes {
  width: 100%;
  min-height: 130px;
  box-sizing: border-box;
  font-size: 1.1875rem !important;   /* 19px – deutlich größer für bessere Lesbarkeit */
  line-height: 1.6;
  padding: 14px 16px;
  resize: vertical;
}

.summary-muted{ opacity:0.6; }

#summary-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: white;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 1000;
}
.summary-toast.is-hide{ opacity: 0; transition: opacity 0.25s; }

@media (max-width: 600px) {
  .summary-def-row {
    grid-template-columns: 1fr;
  }

  .summary-select,
  #summary-add-def {
    width: 100%;
  }
}
.summary-page .summary-content{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:12px 16px 18px;

  max-width: 700px;     /* 🔥 NEU */
  margin: 0 auto;       /* 🔥 NEU */

  overflow-x: hidden;   /* 🔥 wichtig */
}

.patient-header-left{
  flex:0 0 auto;
}

.patient-history-toggle {
  font-size: 12px;
  font-weight: 500;
  color: #444;
  background: none;
  border: none;
  padding: 0;
}
.summary-card.patient-header {
  display: flex;
  align-items: center;
  gap: 16px;

  width: 100%;           /* 🔥 wichtig */
  overflow: hidden;      /* 🔥 verhindert Layout-Break */
}

.patient-name {
  font-weight: 600;
  font-size: 16px;
}

.patient-meta {
  font-size: 13px;
  color: #666;
}

.patient-history-inline {
  width: 100%;
  font-size: 13px;
  color: #444;

  display: -webkit-box;
  -webkit-line-clamp: 2;     /* 🔥 nur 2 Zeilen */
  -webkit-box-orient: vertical;

  overflow: hidden;
}

.patient-history-inline.expanded {
  -webkit-line-clamp: unset; /* 🔥 alles anzeigen */
}

.patient-history-toggle {
  margin-top: 6px;
  font-size: 12px;
  color: #0a84ff;
  cursor: pointer;
}
/* LIST */
.patient-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* CARD */
.patient-card {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;

  background: #ffffff;
  border-radius: 16px;

  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: transform 0.15s ease;
}

.patient-card:active {
  transform: scale(0.98);
}

/* LEFT */
.patient-left {
  display: flex;
  flex-direction: column;
}

.patient-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.patient-meta {
  font-size: 13px;
  color: #888;
}

.dot {
  margin: 0 6px;
}

/* BADGE */
.case-badge {
  background: #eef2ff;
  color: #4f46e5;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 600;
}

/* Right column: date stacked above case-badge */
.saved-cases-page .patient-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.saved-cases-page .patient-date {
  font-size: 12px;
  color: #777;
  white-space: nowrap;
}

/* =========================
   CASE CARDS (SCOPED)
========================= */

.patient-cases-page .case-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.patient-cases-page .case-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.patient-cases-page .case-date {
  font-size: 13px;
  color: #888;
}

/* GRID */
.patient-cases-page .case-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.patient-cases-page .field {
  display: flex;
  flex-direction: column;
}

.patient-cases-page .label {
  font-size: 12px;
  color: #999;
}

.patient-cases-page .value {
  font-size: 14px;
  font-weight: 500;
}

/* SECTION */
.patient-cases-page .case-section {
  margin-top: 14px;
}

.patient-cases-page .section-title-small {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.patient-cases-page .chips {
  display: block;
}

.patient-cases-page .chip {
  all: unset;
}

/* =========================================================
   BASE LAYOUT
========================================================= */

/* =========================================================
   TOPBAR
========================================================= */



#save-patient-btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: #2563eb;
  color: white;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease;
}

#save-patient-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
}

#save-patient-btn:not(:disabled):hover {
  background: #1d4ed8;
}

#topbar-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.account-info{font-size:14px;color:#475569;font-weight:600;margin-right:12px}


/* =========================================================
   CONTENT AREA
========================================================= */

.content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 10px 32px;
}

/* =========================================================
   FORM
========================================================= */

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #374151;
}

/* Inputs & Select */

input,
select,
textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: white;
  transition: all 0.2s ease;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Textarea specific */

textarea {
  min-height: 90px;
  resize: vertical;
}

/* =========================================================
   MOBILE OPTIMIZATION
========================================================= */

@media (min-width: 600px) {
  .content {
    max-width: 500px;
    margin: 0 auto;
  }
}

/* =========================================================
   SAVED CASES PAGE
========================================================= */

.saved-cases-page {
  background: #f6f7f9;
}

/* Section Title */

.section-title {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin: 8px 4px 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.saved-cases-search {
  width: 100%;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  font-size: 15px;
  outline: none;
}

.saved-cases-search:focus {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Patient Row */

.patient-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: white;
  padding: 14px 16px;
  margin-bottom: 10px;

  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);

  cursor: pointer;
  transition: all 0.18s ease;
}

.patient-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.patient-row:active {
  transform: scale(0.98);
}

/* Patient Foto */

.patient-photo {
  width: 48px;
  height: 48px;
  flex: none;
  margin-right: 12px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid #e5e7eb;
}

/* Patient Info */

.patient-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.patient-name {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.patient-meta {
  font-size: 13px;
  color: #6b7280;
}

.patient-last-visit {
  font-size: 12px;
  color: #9ca3af;
}

.patient-next-step {
  margin-top: 3px;
  font-size: 12px;
  color: #475569;
  line-height: 1.35;
}

.patient-next-step-label {
  font-weight: 600;
  color: #334155;
}

/* Case Count */

.case-count {
  font-size: 13px;
  font-weight: 500;
  color: #2563eb;
  background: #eff6ff;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Empty State */

.empty {
  text-align: center;
  padding: 40px 0;
  color: #9ca3af;
  font-size: 14px;
}

/* Content padding override (if not already styled globally) */

.saved-cases-page .content {
  padding: 16px;
}

/* Responsive */

@media (min-width: 700px) {
  .saved-cases-page .content {
    max-width: 600px;
    margin: 0 auto;
  }
}

.marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.marker.surface {
  background: gray;
}

.marker.deep {
  border: 3px solid gray;
  background: transparent;
}

.marker.selected {
  background: red !important;
  border-color: red !important;
}

/* =========================================================
   BASE PAGE
========================================================= */

.joint-areas-page .page {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}


/* =========================================================
   AREA SELECTOR
========================================================= */

.area-selector {
  display: flex;
  overflow-x: auto;
  padding: 8px 16px;
  gap: 10px;
  border-bottom: 1px solid #eee;
}

.area-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  transition: 0.2s;
}

.area-chip:hover {
  background: #f5f5f5;
}

.area-chip.selected {
  background: #2E7D32;
  color: white;
  border-color: #2E7D32;
}

/* =========================================================
   MAIN CONTENT LAYOUT
========================================================= */

.joint-areas-page .content {
  display: flex !important;
  flex: 1;
  padding: 1.5rem 3rem;
  gap: 3rem;
  min-width: 0;
  max-width: 1600px;
  margin: 0 auto;
}

/* LEFT SIDE */

.joint-areas-page .image-section {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RIGHT SIDE */

.joint-areas-page .details-panel {
  flex: 0 0 380px;
  max-width: 420px;
  min-width: 320px;

  padding: 24px;
  border-left: 1px solid #e0e0e0;
  overflow-y: auto;
  background: #fafafa;
}

/* =========================================================
   IMAGE SYSTEM (SWIFTUI IDENTISCH)
========================================================= */

.joint-areas-page .image-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Container zentriert das Bild */
.joint-areas-page .image-container {
  width: 100%;
  max-width: 100%;
  /* 🔥 FIX Querformat: generische .image-container-Regel erbt
     max-height: 70vh / min-height: 60vh. Im Querformat ist 1vh
     klein, dadurch wurde der Container kleiner als der Frame
     (aspect-ratio) → Frame & Bild liefen aus, Marker verschoben
     sich relativ zum Skelett. Hier explizit deaktivieren. */
  max-height: none;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
background: transparent;
  }

/* 🔥 Feste Aspect Ratio 3:2 (600x400) */
.joint-areas-page .image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;   /* WICHTIG */
  max-height: 90vh;
}

/* Bild füllt exakt den Frame */
.joint-areas-page .image-frame img {
  width: 100%;
  height: 100%;
  /* 🔥 FIX Querformat: generische .image-container img-Regel
     setzt max-height: 70vh. Im Querformat zwingt das das <img>
     kleiner zu werden als der Frame → Marker (in % vom Frame)
     stehen dann nicht mehr auf den richtigen Stellen am Skelett.
     Hier explizit aufheben, damit Bild & Frame wirklich
     deckungsgleich sind. */
  max-height: none;
  min-height: 0;
  object-fit: fill;  /* KEIN contain */
  display: block;
  pointer-events: none;
  user-select: none;
}

/* 🔥 FIX: stabiler Transform-Kontext */
.joint-areas-page .transform-layer {
  position: relative;   /* 🔥 statt absolute */
  width: 100%;
  height: 100%;
}
/* Transform Layer */
.transform-layer {
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

/* =========================================================
   MARKERS (RELATIV ZUM FRAME)
========================================================= */

.joint-areas-page .marker {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: 0.15s;
  z-index: 5;
}

.joint-areas-page .marker.selected {
  background-color: #2E7D32 !important; /* 🔥 nur zum Test */
  transform: translate(-50%, -50%) scale(1.2);
}
/* =========================================================
   POINT LIST
========================================================= */

.joint-areas-page .point-row {
  font-size: 12px;  
  width: fit-content;          /* 🔥 macht Chip nur so breit wie Inhalt */
  padding: 8px 16px;           /* mehr innen → Text rutscht nach rechts */
  border-radius: 999px;
}

.joint-areas-page .point-row:hover {
  background: #f0f0f0;
}

.joint-areas-page .point-row.selected {
  background: #E8F5E9;
  font-weight: 500;
}
.joint-areas-page .transform-layer {
  pointer-events: none; /* 🔥 KEY FIX */
}
.joint-areas-page .marker {
  pointer-events: auto;
}
.joint-areas-page .image-frame {
  pointer-events: auto;
}

/* =========================================================
   🐎 Pferd-Variante: Bildverhältnis = natives Pferdeskelett
   horse-skeleton-v2.png ist 1600 × 1364 (≈ 1.173).
   Damit Bild & Marker nicht durch object-fit: fill verzerrt
   werden, wird der Frame auf das native Bildverhältnis fixiert.
========================================================= */
.joint-areas-page--horse .image-frame {
  aspect-ratio: 1600 / 1364;
}

/* =========================================================
   TOOLBAR
========================================================= */

.toolbar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
  background: white;
}

.toolbar button {
  padding: 6px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  transition: 0.15s;
}

.toolbar button:hover {
  background: #f3f3f3;
}

/* Die Rind-Seite nutzt eigene IDs (bovPointCode / bovPointDetails) und hat
   diese Regeln deshalb frueher nicht abbekommen -> Punktbeschreibung sah dort
   anders aus als bei Kleintier/Pferd/Kaninchen/Schwein. Jetzt teilen sich alle
   Arten dieselben Regeln. */
#pointCode,
#bovPointCode {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
}

#pointDetails,
#bovPointDetails {
  font-size: 14px;
  line-height: 1.5;
}

#pointDetails strong,
#bovPointDetails strong {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

#pointList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: start;   /* 🔥 verhindert Stretch */
}
/* =========================================================
 INFLUENTIAL POINTS PAGE
========================================================= */

.influential-page {
background: #f5f5f7;
}

/* ---------- LAYOUT ---------- */

.influential-page .content {
  display: grid;

  grid-template-columns: 650px 420px;

  grid-template-areas:
    "image list"
    "details details";

  gap: 30px;

  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

/* Image links, Liste rechts oben, Details als Vollbreite-Banner unten —
   identische Aufteilung wie .xi-cleft-page .content. */
.influential-page .image-section { grid-area: image; }
.influential-page #pointList     { grid-area: list; }
.influential-page #pointDetails  { grid-area: details; }

/* ---------- IMAGE ---------- */
.influential-page .image-section {
background: #f5f5f7;
}
.influential-page .image-frame {
position: relative;
width: 100%;
max-width: 900px;
margin: 0 auto;
}

.influential-page .image-frame img {
width: 100%;
height: auto;
display: block;
background: transparent;
}

.influential-page .image-container,
.master-page .image-container,
.xi-cleft-page .image-container {
background: transparent;
}
/* ---------- MARKER ---------- */

.influential-page .marker {
position: absolute;
width: 6px;
height: 6px;
background: #ff3b30;
border-radius: 50%;
border: 1px solid white;
transform: translate(-50%, -50%);
box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

.influential-page .marker.selected {
background: #2e7d32;
}

/* ---------- RIGHT PANEL ---------- */

.influential-page .details-panel {
width: 420px;
}

/* ---------- LIST ---------- */

.influential-page #pointList {
display: grid;
grid-template-columns: 1fr 1fr;

/* 🔥 sorgt für gleich hohe Reihen (TABELLEN LOOK) */
grid-auto-rows: 55px;

background: white;
border-radius: 12px;
border: 1px solid #e5e5e5;
overflow: hidden; /* wichtig für saubere Ecken */
}

.influential-page .point-row {
display: grid !important;
grid-template-columns: 1fr auto;
align-items: center;

gap: 12px;

padding: 16px;
font-size: 14px;

width: 100%;
height: 100%; /* 🔥 füllt die Grid-Zelle komplett */

border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
}

/* rechte Spalte */
.influential-page .point-row:nth-child(2n) {
border-right: none;
}

/* letzte Reihe */
.influential-page .point-row:nth-last-child(-n+2) {
border-bottom: none;
}

.influential-page .point-row:hover {
background: #f7f7f7;
}

/* OPTIONAL: schöneres Typo-Layout */
.influential-page .point-row span:first-child {
font-weight: 600;
}

.influential-page .point-row span:last-child {
color: #555;
}

/* ---------- DETAILS ---------- */

.influential-page #pointDetails {
font-size: 12px;
margin-top: 20px;
background: white;
padding: 20px;
border-radius: 12px;
border: 1px solid #e5e5e5;
}

.influential-page #pointDetails h3 {
font-size: 14px;
margin-top: 0;
}
.influential-page #pointDetails strong {
font-size: 13px;
color: #666;
}

.influential-page .transform-layer {
position: relative;}
/* ---------- MOBILE ---------- */

@media (max-width: 900px) {

  .influential-page .content {
    grid-template-columns: 1fr;
  }

  .influential-page .image-section,
  .influential-page .details-panel {
    width: 100%;
  }

}

.master-page .point-row,
.xi-cleft-page .point-row {
display: grid;
grid-template-columns: 1fr auto; /* 🔥 das ist der Fix */
align-items: center;
gap: 12px;
}
.master-page,
.xi-cleft-page {
  background: #f5f5f7;
}

/* ---------- LAYOUT ---------- */

.master-page .content {
  display: grid;
  grid-template-columns: 650px 450px;
  justify-content: space-between;
  align-items: start;
  gap: 40px;

  max-width: 1400px;
  margin: 0 auto;
  padding: 30px;
}

.xi-cleft-page .content {
  display: grid;

  grid-template-columns: 650px 420px;

  grid-template-areas:
    "image list"
    "details details";

  gap: 30px;

  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}
/* ---------- IMAGE ---------- */

.master-page .image-section {
  background: #f5f5f7;
}

.xi-cleft-page .image-section {
  background: #f5f5f7;
  grid-area: image;
}

.xi-cleft-page .body {
  background: #f5f5f7;
}

.xi-cleft-page .image-frame {
  background: transparent;
  position: relative;
}

.master-page .image-frame {
  background: #f5f5f7;
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.master-page .image-frame img,
.xi-cleft-page .image-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- MARKER ---------- */

.master-page .marker,
.xi-cleft-page .marker {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ff3b30;
  border-radius: 50%;
  border: 1px solid white;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0,0,0,0.25);
}

.master-page .marker.selected,
.xi-cleft-page .marker.selected {
  background: #2e7d32;
}

/* Tiefe Punkte (z.B. BL-12, BL-11, CV-17) werden als gepunkteter Ring
   dargestellt, damit sie visuell von Oberflächen-Punkten unterscheidbar
   bleiben. Spezifischer als die allgemeinen .marker-Regeln, sodass die
   Background-/Border-Override greifen. */
.influential-page .marker.deep,
.master-page      .marker.deep,
.xi-cleft-page    .marker.deep {
  background: transparent;
  border: 2px dashed #ff3b30;
  box-shadow: none;
  width: 9px;
  height: 9px;
}

.influential-page .marker.deep.selected,
.master-page      .marker.deep.selected,
.xi-cleft-page    .marker.deep.selected {
  background: transparent;
  border-color: #2e7d32;
}

/* ---------- RIGHT PANEL ---------- */

.master-page .details-panel,
.xi-cleft-page .details-panel {
  width: 450px;
}

/* ---------- LIST ---------- */

.master-page #pointList,
.xi-cleft-page #pointList {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e5e5;

  display: grid;
  grid-template-columns: 1fr 1fr;

  /* 🔥 DAS IST DER FIX */
  grid-auto-rows: minmax(50px, auto);
}
.xi-cleft-page #pointList {
  grid-area: list;
}
.master-page .point-row,
.xi-cleft-page .point-row {
  display: grid;
  grid-template-columns: 1fr 50px; /* 🔥 KEY FIX */
  align-items: center;

  width: 100%;
  height: 100%;

  padding: 14px 16px;
  font-size: 14px;

  border-bottom: 1px solid #eee;
  border-right: 1px solid #eee;
  cursor: pointer;
}


.master-page .point-row:hover,
.xi-cleft-page .point-row:hover {
  background: #f7f7f7;
}
.xi-cleft-page .image-section {
  grid-area: image;
  max-width: 650px;
}

.xi-cleft-page #pointDetails {
  grid-area: details;

  width: 100%;
  max-width: 1200px;

  font-size: 14px;
  margin-top: 20px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
}

/* ---------- DETAILS ---------- */

.master-page #pointDetails {
  font-size: 12px;
  margin-top: 20px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
}

.master-page #pointDetails h3,
.xi-cleft-page #pointDetails h3 {
  font-size: 14px;
  margin-top: 0;
}

.master-page #pointDetails strong,
.xi-cleft-page #pointDetails strong {
  font-size: 13px;
  color: #666;
  font-weight: 600; /* 🔥 wichtig */
}
.master-page .point-row .label {
font-weight: 600; /* 🔥 oder 700 für stärker */
}

/* ---------- MOBILE ---------- */

@media (max-width: 900px) {
  .master-page .image-container,
  .xi-cleft-page .image-container {
    height: 42vh;       /* 🔥 kleiner als vorher (z.B. 50vh) */
    min-height: 42vh;
    max-height: 42vh;
  }
  .master-page .content,
  .xi-cleft-page .content {
    display: grid;
    grid-template-columns: 1fr 650px;
    gap: 20px;
    padding-top: 2px;
  }
  .master-page .image-section,
  .master-page .details-panel,
  .xi-cleft-page .image-section,
  .xi-cleft-page .details-panel {
    width: 100%;
  }

}

.master-page #pointList {
  align-self: start;
}
@media (max-width: 768px) {
  .xi-cleft-page .content {
    grid-template-columns: 1fr;

    grid-template-areas:
      "image"
      "list"
      "details";

    padding: 15px;
    gap: 15px;
  }

  .xi-cleft-page .image-section {
    max-width: 100%;
  }

  .xi-cleft-page #pointList {
    grid-template-columns: 1fr; /* Liste untereinander statt 2 Spalten */
  }

  .xi-cleft-page .point-row {
    border-right: none;
  }
}

.vessel-pair-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}

.vessel-column{
  border:1px solid #eee;
  border-radius:10px;
  padding:12px;
  background:white;
}

.point-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  cursor:pointer;
}

.point-row:hover{
  background:#f6f6f6;
}

.point-code{
  color:#007aff;
  font-weight:600;
}

.vessel-content {
  max-width: 1800px;
  margin: 0 auto;
  padding: 24px;
}
.vessel-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.vessel-column {
  width: 100%;
  min-width: 0;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  background: white;
}
/* Tablet */
@media (max-width: 900px) {
.vessel-row {
  grid-template-columns: repeat(2, 1fr);
}
}

/* Mobile */
@media (max-width: 500px) {
.vessel-row {
  grid-template-columns: 1fr;
}
}
.point-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  cursor:pointer;
}

.point-row:hover{
  background:#f5f5f5;
}

.point-code{
  color:#007aff;
  font-weight:600;
}

.application-row{
  font-size:0.9rem;
  color:#666;
}

.sea-group{
  margin-bottom:28px;
}

.sea-items{
  border:1px solid #eee;
  border-radius:10px;
  overflow:hidden;
  background:white;
}

.sea-row{
  border-bottom:1px solid #f0f0f0;
}

.sea-row:last-child{
  border-bottom:none;
}

.sea-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  text-decoration:none;
  color:inherit;
  font-size: 13px; 
}

.sea-link:hover{
  background:#f6f6f6;
}

.chevron{
  color:#999;
}

.sea-group{
  margin-bottom:28px;
}


.sea-row{
  border-bottom:1px solid #f0f0f0;
}

.sea-row:last-child{
  border-bottom:none;
}

.sea-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px;
  text-decoration:none;
  color:inherit;
}

.sea-link:hover{
  background:#f6f6f6;
}

.chevron{
  color:#999;
}

.sea-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.sea-row {
  width: 100%;
}

/* Balanced Methods */

/* PAGE LAYOUT */

.balanced-method-page {
  display: flex;
  justify-content: center;   /* horizontal zentrieren */
  align-items: flex-start;   /* oben starten */
  padding-top: 40px;         /* Abstand unter Topbar */
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

/* CARD */

.balanced-method-card {
  font-size: 15px; 
  width: 100%;
  max-width: 1200px;

  background: #ffffff;
  border-radius: 16px;
  padding: 22px;

  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

/* HEADER */

.balanced-method-card h2 {
  text-align: center;
  margin-bottom: 20px;
}

/* SELECT */

.balanced-method-select {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
}

/* RESULT BOX */

.balanced-method-result {
  margin-top: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.balanced-method-result p {
  margin: 6px 0;
}

/* SIX SYSTEMS (Tan / Alfaro) */

.six-system-hint {
  margin: 0 0 10px;
  color: #6b7280;
  font-size: 14px;
}

.organ-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.organ-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
}

.organ-chip .organ-chip-abbr {
  font-weight: 700;
}

.organ-chip.active {
  background: #2f6fde;
  border-color: #2f6fde;
  color: #ffffff;
}

.six-system-block {
  margin-bottom: 18px;
}

.six-system-block h3 {
  margin: 0 0 8px;
}

.six-system-table {
  width: 100%;
  border-collapse: collapse;
}

.six-system-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.six-system-num {
  width: 24px;
  font-weight: 700;
  color: #2f6fde;
}

.six-system-target {
  white-space: nowrap;
}

.six-system-counts h3 {
  margin: 14px 0 8px;
}

.balance-count-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.balance-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  font-size: 14px;
}

.balance-count-badge {
  font-weight: 700;
  color: #2f6fde;
}

.balanced-method-page .top-bar {
  width: 100% !important;
  margin: 0 !important;
  align-self: stretch;             /* flex-kind dehnt sich in cross-axis */
}



/* Punktbeschreibung: identisch fuer ALLE Arten. Die Rind-Seite nutzt eigene
   IDs (bovPointCode / bovPointDetails) und muss deshalb mit aufgefuehrt
   werden – sonst fiel sie auf die Standardschrift zurueck und wirkte groesser
   bzw. anders als Kleintier/Pferd/Kaninchen/Schwein.
   1.4rem -> 1.5rem: durchgaengig etwas groesser. */
.acupuncture-page #pointDetails,
.acupuncture-page #pointDetails *,
.acupuncture-page #bovPointDetails,
.acupuncture-page #bovPointDetails * {
  font-size: 1.5rem;
  line-height: 1.45;
}
.acupuncture-page #pointCode,
.acupuncture-page #bovPointCode {
  font-size: 1.75rem;
}

.acupuncture-page {
  display: grid;
  grid-template-columns: 1fr 420px;
  grid-template-rows: auto auto 1fr auto;
  gap: 4px;
  height: 100dvh;
}
.acupuncture-page .top-bar {
  grid-column: 1 / span 2;
}

.top-actions {
  display: flex;
  gap: 6px;
  margin-left: 12px;
}

.top-actions button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  font-size: 16px;
}
.acupuncture-page .search-row {
  grid-column: 1 / span 2;
}

.acupuncture-page .image-section {
  margin-top: -8px;
  grid-column: 1;
  grid-row: 3;
}

/* Pferd-Akupunktur: auf schmalen Bildschirmen (Tablet-Portrait/Mobile)
   mehr Abstand zwischen Search-Bar und Skelett-Bild, damit es nicht klebt. */
@media (max-width: 999px) {
  .acupuncture-page-horse .image-section {
    margin-top: 12px;
    padding-top: 8px;
  }
}

.acupuncture-page .right-panel {
  grid-column: 2;
  grid-row: 3;
  overflow-y: auto;
}

.acupuncture-page .details-panel {
  background: transparent;
}
.acupuncture-page .toolbar {
  grid-column: 1 / span 2;
}
.acupuncture-page .image-container {
  background: transparent;
}

/* Punktmarker in den Atlas-Seiten leicht kleiner (Jf, 14.9.2026): 6 -> 5 px.
   Gilt fuer alle Tierarten. Der Ring der tiefen Punkte wird mitverkleinert
   (box-sizing: border-box), sonst wirkt er bei 5 px praktisch gefuellt. */
.acupuncture-page .marker {
  width: 5px;
  height: 5px;
  background: #555;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
.acupuncture-page .marker.deep {
  border-width: 2px;
}

.new-patient-page .select-patient-page.content {
  max-width: 650px;
  margin: 0 auto;
  width: 100%;
}



.new-patient-page input,
.new-patient-page select,
.new-patient-page textarea {
  height: 44px;
}

/* =========================
   UNIVERSAL TOPBAR
========================= */

.top-bar,
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;

  position: relative;

  min-height: 56px;
  padding: 0 16px;
  flex-shrink: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.top-bar h1,
.topbar h1 {
    font-size: 18px;
    font-weight: 600;
  margin: 0;
  padding: 8px 44px;
  text-align: center;
}

/* Back button */

.top-bar .back-button,
.topbar .back-button,
.top-bar .icon-btn:first-child,
.topbar .icon-btn:first-child {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 999px;
  border: none;
  background: transparent;

  color: #0a84ff;
  cursor: pointer;
  z-index: 2;
}

/* right action button */

.top-bar .text-btn,
.topbar .text-btn,
.top-bar .icon-btn:last-child,
.topbar .icon-btn:last-child {
  position: absolute;
  right: 12px;

  height: 40px;
  display: grid;
  place-items: center;

  border: none;
  background: transparent;

  color: #0a84ff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.top-bar ion-icon,
.topbar ion-icon {
  font-size: 22px;
}

/* Mehrere rechte Aktionen (z.B. Summary: Notiz-Toggle + Diktieren + Speichern)
   nebeneinander gruppieren. Ohne diesen Container werden alle .text-btn /
   .icon-btn absolut auf right:12px gelegt und überlappen sich. */
.top-bar .topbar-actions,
.topbar .topbar-actions {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.top-bar .topbar-actions .text-btn,
.topbar .topbar-actions .text-btn,
.top-bar .topbar-actions .icon-btn,
.topbar .topbar-actions .icon-btn {
  position: static;
  right: auto;
  top: auto;
  transform: none;
}

/* 🎤 Diktier-Button in der Kopfzeile des "Neuer Patient"-Formulars
   (links neben "Speichern", via .topbar-actions gruppiert). */
.pd-voice-headerbtn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}
.pd-voice-headerbtn ion-icon { font-size: 18px; }
.pd-voice-headerbtn.is-recording {
  color: #ef4444;
  animation: pd-voice-pulse 1.2s ease-in-out infinite;
}

/* 🩹 Fix: In der Kopfzeile von „Neuer Patient" überlappte der zentrierte Titel
   auf schmalen Screens mit dem absolut positionierten Diktier-/Speichern-Block.
   NUR auf schmalen Screens (<768px) schalten wir die Kopfzeile auf eine echte
   Flex-Zeile (Zurück | Titel | Aktionen) um. Auf dem Desktop ist genug Platz →
   Titel bleibt absolut mittig zentriert (Standard-.top-bar-Regeln). */
@media (max-width: 768px) {
  .new-patient-page .top-bar .back-button {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
  }
  .new-patient-page .top-bar .topbar-actions {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
  }
  .new-patient-page .top-bar h1 {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Auf sehr schmalen Screens nur das Mikrofon-Icon zeigen, um Platz für den
   Titel zu schaffen (das „Diktieren"-Wort ist der Hauptplatzfresser). */
@media (max-width: 480px) {
  .new-patient-page .pd-voice-headerbtn .pd-voice-label {
    display: none;
  }
}
/* 🩹 Fix: Overlap-Problem in der Zusammenfassung NUR auf schmalen Screens.
   Der Titel („Zusammenfassung") ist absolut zentriert, der Aktions-Block
   (Diktieren + Speichern) liegt absolut rechts. Auf breiten Desktop-Screens
   ist genug Platz → Titel bleibt mittig zentriert (Standard-.topbar-Regeln).
   Erst wenn es eng wird, kollidieren beide. Deshalb schalten wir die Kopfzeile
   ausschließlich unter 768px auf eine echte Flex-Zeile (Zurück | Titel |
   Aktionen) um, sodass jedes Element eigenen Platz hat und nichts überlappt.
   Wichtig: Desktop bleibt unverändert (Titel exakt mittig). */
@media (max-width: 768px) {
  .summary-page .topbar {
    justify-content: flex-start;
    gap: 8px;
  }
  .summary-page .topbar .back-button {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
  }
  .summary-page .topbar .topbar-actions {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
  }
  .summary-page .topbar h1 {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* 🩹 Dasselbe für die Palpationsseite (Jf 06.09.2026): dort standen „Palpation"
   und der grüne Speichern-Knopf auf dem Handy direkt aneinander, weil der Titel
   absolut mittig sitzt und die Knopfgruppe absolut rechts. Unter 768px wird die
   Kopfzeile zur echten Flex-Zeile (Zurück | Titel | Aktionen), der Knopf bekommt
   dadurch seinen Abstand; zusätzlich fällt er auf schmalen Screens kleiner aus. */
@media (max-width: 768px) {
  .dogpalp-page .topbar {
    justify-content: flex-start;
    gap: 10px;
  }
  .dogpalp-page .topbar .back-button {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
  }
  .dogpalp-page .topbar .topbar-actions {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .dogpalp-page .topbar h1 {
    position: static;
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dogpalp-page .topbar .dx-save-btn {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 5px;
    gap: 3px;
  }
}
@media (max-width: 480px) {
  .dogpalp-page .topbar .dx-save-btn {
    padding: 3px 8px;
    font-size: 11px;
  }
}
/* Auf sehr schmalen Screens zusätzlich nur das Mikrofon-Icon zeigen — das
   Wort „Diktieren" ist der Hauptplatzfresser und drängt sonst den Titel raus. */
@media (max-width: 480px) {
  .summary-page .topbar #summary-dictate-btn .pd-voice-label {
    display: none;
  }
}

/* Summary-Diktier-Button im Aufnahme-Zustand (Inline-Farbe überschreiben). */
#summary-dictate-btn.is-recording {
  color: #ef4444 !important;
  animation: pd-voice-pulse 1.2s ease-in-out infinite;
}
@keyframes pd-voice-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.pd-voice-status {
  font-size: 13px;
  color: #64748b;
  min-height: 18px;
  margin-bottom: 12px;
}
.pd-voice-status:empty { margin-bottom: 0; }
.pd-voice-example {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 6px;
  line-height: 1.4;
}
.disclaimer-page .content,
.privacy-page .content {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}

.disclaimer-page .content p,
.privacy-page .content p {
  font-size: 1.3rem;
  line-height: 1.7;
  margin-bottom: 18px;
  text-align: justify;
  /* Letzte Zeile normal linksbündig statt auf volle Breite gedehnt. */
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Plus Button rechts */
.topbar .icon-button{
  position:absolute;
  right:12px;

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  font-size:26px;
  text-decoration:none;
}
.topbar .icon-button{
  position:absolute !important;
  right:12px !important;
}
#patient-list{
  margin-top:24px;
}
/* Gleicher Seiten-Hintergrund wie die Case Library (.saved-cases-page). */
.select-patient-page{
  background: #f6f7f9;
}
/* Patientenname exakt wie in der Case Library (.saved-case-tile-patient,
   Desktop-Ausprägung): gleiche Größe, Schriftstärke, Farbe und Schriftart. */
.select-patient-page .patient-name{
  font-size:15px;
  font-weight:650;
  color:#111a3a;
  line-height:1.2;
}
.select-patient-page .top-bar{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  /* Exakt gleiche Bar-Höhe/Optik wie die Case Library (.saved-cases-page .topbar) */
  min-height:56px;
  padding:0 16px;
  flex-shrink:0;
  background:#fff;
  border-bottom:1px solid #e5e7eb;
}

.select-patient-page .icon-button{
  position:absolute;
  right:16px;

  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  font-size:22px;
  text-decoration:none;
}

/* Search bar matches the width of the cards underneath */
.select-patient-page .search-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:12px;
}

/* Desktop: gleiche Suchleisten-Größe wie die Case Library
   (.saved-cases-grid-search ab min-width:900px). */
@media (min-width: 900px){
  .select-patient-page .search-input{
    height:38px;
    padding:9px 13px;
    border:1px solid #dce3f0;
    border-radius:8px;
    font-size:12px;
    box-shadow:0 1px 2px rgba(15, 23, 42, 0.02);
  }
}

/* Desktop: wider content area + two-column card grid */
@media (min-width: 600px){
  .select-patient-page .content{
    max-width:900px;
  }

  .select-patient-page #patient-list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    align-items:start;
  }

  /* Cards stack via margin-bottom by default; neutralize inside the grid */
  .select-patient-page #patient-list .patient-row{
    margin-bottom:0;
  }
}

/* Topbar */

#topbar{
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:#ffffff;
  border-bottom:1px solid rgba(15,23,42,.12);
}

/* left side */

#topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.brand-name{
  font-weight:700;
  letter-spacing:-0.02em;
  font-size:16px;
}

/* logo wie Landing */

.logo{
  width:36px;
  height:36px;
  border-radius:12px;
  background:url("../public/assets/pictures/landing/icon.png") center/cover no-repeat,
             linear-gradient(135deg,#111,#444);
  box-shadow:0 8px 20px rgba(15,23,42,.16);
}

/* title */

#topbar-title{
  font-weight:700;
  font-size:18px;
}

/* login button style */

.btn{
  border:none;
  border-radius:999px;
  padding:10px 18px;
  font-weight:650;
  cursor:pointer;
}

.btn-primary{
  background:#000;
  color:#fff;
}

.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

@media (max-width: 768px){

.home-section[aria-label="Primary actions"]{
  grid-template-columns: 1fr;
}

.home-section[aria-label="Quick references"]{
  grid-template-columns: 1fr;
}

.home-section[aria-label="Community admin"]{
  grid-template-columns: 1fr;
}
.home-section[aria-label="Community admin"] a{
  grid-column: span 1;
}

.diag-grid{
  grid-template-columns: 1fr;
}

/* Einspaltig ist ohnehin jede Kachel breit — dann sitzt das Symbol wie bei der
   Zusammenfassung LINKS neben Titel und Untertitel statt darüber, und das
   Chevron steht rechts auf halber Höhe (Jf 06.09.2026). Das Markup bleibt
   unverändert: `.diag-card-top` gibt seine Box mit `display:contents` auf,
   damit Symbol und Chevron direkte Rasterzellen der Karte werden. Die breite
   Zusammenfassungs-Karte ist ausgenommen, sie bringt ihr eigenes Flex-Layout
   samt `.diag-wide-copy` schon mit. */
.diag-card:not(.diag-card-wide){
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title chevron"
    "icon subtitle chevron";
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
}
.diag-card:not(.diag-card-wide) .diag-card-top{
  display: contents;
}
.diag-card:not(.diag-card-wide) .diag-icon{ grid-area: icon; }
.diag-card:not(.diag-card-wide) .diag-card-top-trailing{ grid-area: chevron; }
.diag-card:not(.diag-card-wide) .diag-title{
  grid-area: title;
  margin-bottom: 0;
}
.diag-card:not(.diag-card-wide) .diag-subtitle{ grid-area: subtitle; }

.influential-page .content,
.master-page .content,
.xi-cleft-page .content{
  grid-template-columns: 1fr;
}

}

.acupuncture-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (min-width: 768px) {
  .acupuncture-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto 1fr auto;
  }

  .top-bar {
    grid-column: 1 / -1;
  }

  .search-row {
    grid-column: 1 / -1;
  }

  .image-section {
    grid-column: 1;
    grid-row: 3;
  }

  .details-panel {
    grid-column: 2;
    grid-row: 3;
    margin: 12px;
  }

  .toolbar {
    grid-column: 1 / -1;
  }
}
@media (max-width: 767px) {
  .acupuncture-page {
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .acupuncture-page .top-bar {
    flex: 0 0 auto;
  }

  .acupuncture-page .search-row {
    flex: 0 0 auto;
  }
  .acupuncture-page .search-row button {
      margin-left: -7px;
    }

  .acupuncture-page .image-section {
    flex: 0 0 auto;
  }

  .acupuncture-page .image-container {
    height: 38vh;
    min-height: 38vh;
    max-height: 38vh;
  }

  .acupuncture-page .details-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
    margin: 2px 12px 12px; 
  }
}

.profile-fab-wrap {
position: fixed;
top: calc(16px + var(--sat));
right: calc(16px + var(--sar));
z-index: 1000;
}

.profile-fab {
width: 44px;
height: 44px;
border: none;
border-radius: 999px;
background: #111111;
color: #ffffff;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.profile-dropdown {
position: absolute;
top: 54px;
right: 0;
width: 220px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

.profile-dropdown.hidden {
display: none;
}

.profile-dropdown-head {
padding: 14px 16px 12px;
border-bottom: 1px solid #f0f1f4;
background: #fafafa;
}

.profile-dropdown-name {
font-size: 14px;
font-weight: 700;
color: #111111;
}

.profile-dropdown-plan {
margin-top: 4px;
font-size: 12px;
color: #6b7280;
}

.profile-dropdown-item {
width: 100%;
border: none;
background: #ffffff;
text-align: left;
padding: 14px 16px;
font-size: 14px;
cursor: pointer;
}

.profile-dropdown-item:hover {
background: #f7f8fa;
}

.profile-dropdown-item.danger {
color: #c62828;
}

.billing-page {
padding:
  calc(92px + var(--sat))
  calc(16px + var(--sar))
  calc(32px + var(--sab))
  calc(16px + var(--sal));
background: #f7f8fa;
}

.billing-header {
max-width: 1100px;
margin: 0 auto 20px;
}

.billing-header h1 {
margin: 0 0 6px;
font-size: 34px;
font-weight: 800;
letter-spacing: -0.02em;
}

.billing-header p {
margin: 0;
color: #6b7280;
font-size: 15px;
}

.billing-notice {
max-width: 1100px;
margin: 0 auto 16px;
padding: 12px 14px;
border-radius: 14px;
background: #eef2ff;
color: #334155;
}

.billing-notice.success {
background: #e8f7ec;
color: #166534;
}

.billing-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(280px, 1fr));
gap: 16px;
}

.billing-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 24px;
padding: 24px;
min-height: 360px;
}

.billing-card.current {
border-color: #111111;
}

.billing-card-head h2 {
margin: 0 0 8px;
font-size: 22px;
}

.billing-price {
font-size: 38px;
font-weight: 800;
line-height: 1;
}

.billing-price span {
font-size: 14px;
font-weight: 500;
color: #6b7280;
}

.billing-copy {
margin: 18px 0;
color: #374151;
}

.billing-features {
margin: 0 0 24px;
padding-left: 18px;
color: #374151;
}

.billing-features li {
margin-bottom: 8px;
}

.billing-btn {
width: 100%;
min-height: 46px;
border-radius: 999px;
border: none;
font-size: 15px;
font-weight: 600;
cursor: pointer;
}

.primary-btn {
background: #111111;
color: #ffffff;
}

.secondary-btn {
background: #f3f4f6;
color: #111111;
}

/* =========================================================
   Summary Voice Card (siehe pages/SummaryPage.js + js/voice/)
========================================================= */

.summary-voice-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  border: 1px solid #bae6fd;
}

.summary-voice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-voice-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: #0a84ff;
  color: #fff;
  transition: background 0.15s ease;
}

.summary-voice-btn:hover { background: #0072e0; }
.summary-voice-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

.summary-voice-btn.is-listening {
  background: #ef4444;
  animation: voicePulse 1.4s ease-in-out infinite;
}
.summary-voice-btn.is-listening:hover { background: #dc2626; }

@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  50%      { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.summary-voice-status {
  flex: 1;
  font-size: 13px;
  color: #475569;
  min-width: 200px;
}

.summary-voice-transcript {
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  resize: vertical;
  min-height: 44px;
}

.summary-voice-last-command {
  font-size: 13px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
}

.summary-voice-last-command .voice-cmd-ok      { color: #166534; font-weight: 600; }
.summary-voice-last-command .voice-cmd-fail    { color: #b91c1c; font-weight: 600; }
.summary-voice-last-command .voice-cmd-unknown { color: #92400e; font-weight: 600; }
.summary-voice-last-command .voice-cmd-text {
  margin-top: 4px;
  color: #334155;
  font-weight: 400;
}

.summary-voice-hint {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* Phase 3: Korrektur-Submit (Trainingsdaten-Sammlung).
   Eine schmale, unaufdringliche Sekundär-Aktion direkt unter der Textarea. */
.summary-voice-correction-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.summary-voice-correction-btn {
  appearance: none;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background: #f8fafc;
  color: #334155;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.summary-voice-correction-btn:hover {
  background: #eef2f7;
  border-color: #94a3b8;
}
.summary-voice-correction-btn:disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.summary-voice-correction-status {
  font-size: 12px;
  font-weight: 500;
}
.summary-voice-correction-status--info    { color: #475569; }
.summary-voice-correction-status--success { color: #166534; }
.summary-voice-correction-status--error   { color: #b91c1c; }

.current-btn {
background: #e5e7eb;
color: #6b7280;
cursor: default;
}

.cancel-btn {
margin-top: 8px;
background: transparent;
color: #b91c1c;
border: 1px solid #fca5a5;
}
.cancel-btn:hover {
background: #fef2f2;
}
.cancel-btn:disabled {
opacity: .6;
cursor: default;
}

@media (max-width: 820px) {
.billing-grid {
  grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
  .joint-areas-page .content {
    flex-direction: column;   /* 🔥 statt nebeneinander → untereinander */
    padding: 0;
    gap: 0;
  }

  /* Bild oben */
  .joint-areas-page .image-section {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* 🔥 FIX: Aspect-Ratio NICHT auf auto setzen. Sonst wird das Bild
     letterboxed (object-fit: contain), aber die Marker stehen weiterhin
     in % vom Frame → Punkte verschieben sich, sobald Frame & Bild
     nicht mehr exakt dasselbe Verhältnis haben (z. B. im Querformat).
     Stattdessen Frame-Breite so begrenzen, dass die per-Page-Aspect-Ratio
     niemals eine Höhe > ~50vh ergibt. */
  .joint-areas-page .image-frame {
    /* aspect-ratio bleibt aus der nicht-mobile Regel: 3/2 (Kleintier) */
    width: 100%;
    max-width: calc(50vh * 3 / 2);
    overflow: hidden;
  }

  .joint-areas-page--horse .image-frame {
    /* Pferd: natives Bildverhältnis 1024/637 */
    max-width: calc(50vh * 1024 / 637);
  }

  .joint-areas-page .image-frame img {
    width: 100%;
    height: 100%;
    /* Wichtig auch hier: kein 70vh-Cap aus .image-container img,
       sonst wird das Bild im Querformat (kleines vh) kürzer als
       der Frame und die Punkte verschieben sich. */
    max-height: none;
    min-height: 0;
    object-fit: fill;        /* Frame & Bild teilen dasselbe Verhältnis → keine Verzerrung */
  }

  /* Panel darunter */
  .joint-areas-page .details-panel {
    flex: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;

    border-left: none;              /* 🔥 wichtig */
    border-top: 1px solid #e0e0e0;  /* optional Trennung */

    padding: 16px;
  }
}


@media (max-width: 768px) {
  #pointDetails {
    .master-page .font-size: 12px;
  }
}

.page.balanced-method-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Mobile Fix */
}

.page.balanced-method-page .content {
  flex: 1;
  display: block; /* 🔥 kein flex mehr */
  padding: 0 16px;
  max-width: none; 
}

.master-page .content {
  display: grid;

  grid-template-columns: 650px 420px;

  grid-template-areas:
    "image list"
    "details details";

  gap: 30px;

  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
}

/* Image links, Liste rechts oben, Details als Vollbreite-Banner unten —
   identische Aufteilung wie .xi-cleft-page .content. */
.master-page .image-section { grid-area: image; }
.master-page #pointList     { grid-area: list; }
.master-page #pointDetails  { grid-area: details; }

@media (max-width: 768px) {

  .master-page .content,
  .xi-cleft-page .content,
  .influential-page .content {

    display: grid !important;
    grid-template-columns: 1fr !important;

    grid-template-areas:
      "image"
      "list"
      "details";

    gap: 16px;
    padding: 12px;
  }

  /* IMAGE */
  .master-page .image-container,
  .xi-cleft-page .image-container,
  .influential-page .image-container {

    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
  }

  .master-page .image-frame,
  .xi-cleft-page .image-frame,
  .influential-page .image-frame {
    position: relative;
  }

  .master-page .image-frame img,
  .xi-cleft-page .image-frame img,
  .influential-page .image-frame img {

    width: 100%;
    height: auto;
  }

  /* LIST */
  .master-page #pointList,
  .xi-cleft-page #pointList,
  .influential-page #pointList {

    grid-template-columns: 1fr !important;
  }

  .master-page .point-row,
  .xi-cleft-page .point-row,
  .influential-page .point-row {

    border-right: none !important;
  }

  /* DETAILS */
  .master-page #pointDetails,
  .xi-cleft-page #pointDetails,
  .influential-page #pointDetails {

    width: 100%;
    margin-top: 8px;
  }
  .five-element-header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 6px 0 12px;
    text-align: center;
    color: #6e717a;
    font-size: 11px;
    letter-spacing: 0.01em;
  }
  
  .five-element-scroll {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 20px;
  }
  
  .five-element-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px;
  }
  
  .five-element-page {
    background: #e8e8ee;
    padding: 0;
  }
  
  .five-element-page .top-bar {
    background: #ffffff;
    border-bottom: 1px solid #e5e5ea;
  }
  
  .five-element-table {
    padding: 16px 16px 0;
  }
  
  .five-element-pill {
    width: 100%;                 /* 🔥 GANZ wichtig */
    height: 64px;
  
    border: none;
    border-radius: 18px;
    background: #f3f3f4;
  
    display: flex;               /* 🔥 statt inline */
    align-items: center;
    justify-content: center;
  
    font-size: 20px;
    font-weight: 700;
    color: #101014;
  }
  
  .five-element-pill:active {
    transform: translateY(1px);
  }
  }

/* =========================================================
   🐎 Horse Shu Points
========================================================= */

.horse-shu-toggle {
  display: flex;
  gap: 6px;
  padding: 8px 16px 4px;
  justify-content: center;
}
.horse-shu-toggle .hs-tab {
  flex: 0 1 180px;
  padding: 8px 14px;
  border: 1px solid var(--border, #d0d0d4);
  border-radius: 999px;
  background: var(--surface, #f4f4f6);
  color: var(--fg, #222);
  font-size: 14px;
  cursor: pointer;
}
.horse-shu-toggle .hs-tab.active,
.horse-shu-toggle .hs-tab[aria-selected="true"] {
  background: var(--accent, #0a84ff);
  color: #fff;
  border-color: var(--accent, #0a84ff);
}

/* Toggle in der Topbar (kompakter, Titel zentriert, Toggle rechts) */
.horse-shu-topbar {
  gap: 8px;
  position: relative;
}
.horse-shu-topbar-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--fg, #222);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 768px) {
  .horse-shu-topbar-title { display: none; }
}
.horse-shu-toggle-inline {
  flex: 1;
  /* Rechts Platz für den absolut positionierten Save-Button lassen, damit der
     "Transpositional"-Tab nicht darunter verschwindet. Etwas mehr Padding →
     sichtbarer Abstand zwischen Transponiert-Tab und „Speichern". */
  padding: 0 116px 0 0;
  gap: 4px;
  justify-content: flex-end;
}
.horse-shu-toggle-inline .hs-tab {
  flex: 0 1 auto;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.1;
}

/* =========================================================
   🐎 Horse Bild-Karten (Mu-Punkte, Palpation) — Topbar
   Einheitlicher Stil analog Shu-/Zungen-/Puls-Topbar.
   Titel zentriert, Zoom-Werkzeuge + grüner ✓-Speichern rechts.
========================================================= */
.horse-map-topbar {
  gap: 8px;
  position: relative;
  flex-wrap: nowrap;
}
.horse-map-topbar h1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}
.horse-map-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Platz für den absolut positionierten .dx-save-btn (right:12px).
     Etwas mehr, damit zwischen ↻ und „Speichern" derselbe Abstand entsteht
     wie zwischen Zoom und ↻. */
  padding-right: 116px;
}
.horse-map-zoom {
  display: inline-flex;
  border: 1px solid #d0d0d4;
  border-radius: 8px;
  overflow: hidden;
}
.horse-map-zoom button {
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  background: #fff;
  color: #555;
  cursor: pointer;
  line-height: 1;
}
.horse-map-zoom button + button {
  border-left: 1px solid #d0d0d4;
}
.horse-map-zoom .horse-map-zoom-reset {
  font-size: 11px;
  min-width: 46px;
}
.horse-map-reset {
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d0d0d4;
  border-radius: 8px;
  background: #fff;
  color: #555;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .horse-map-topbar h1 { display: none; }
}
@media (max-width: 480px) {
  .horse-map-tools { padding-right: 90px; gap: 6px; }
  .horse-map-zoom button { padding: 4px 9px; font-size: 14px; }
  .horse-map-zoom .horse-map-zoom-reset { min-width: 38px; }
  .horse-map-reset { padding: 4px 8px; font-size: 12px; }
  .topbar .dx-save-btn { padding: 4px 9px; font-size: 12px; right: 10px; }
}

/* =========================================================
   Desktop Sidebar
========================================================= */

#desktopSidebarRoot {
  display: none;
}

.desktop-sidebar-shell {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  width: 252px;
  height: 100dvh;
  padding: 18px 14px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  box-shadow: 12px 0 34px rgba(15, 23, 42, 0.07);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.desktop-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid #eef2f7;
}

.desktop-sidebar-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: url("../public/assets/pictures/landing/icon.png") center/cover no-repeat,
    linear-gradient(135deg, #111827, #475569);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
  flex: none;
}

.desktop-sidebar-brand-copy,
.desktop-sidebar-user-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.desktop-sidebar-brand-name {
  color: #111827;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}

.desktop-sidebar-brand-subtitle,
.desktop-sidebar-user-plan {
  color: #64748b;
  font-size: 12px;
  line-height: 1.2;
}

.desktop-sidebar-nav {
  display: grid;
  /* minmax(0,1fr): Die implizite auto-Spalte eines Grids waechst sonst mit dem
     breitesten Kind. Zusammen mit `white-space: nowrap` (auf .desktop-sidebar-
     shell) macht ein langes Label wie "Therapeutic Point Set" die Spalte
     breiter als die Leiste -> horizontaler Scrollbalken unten in der
     Navigation. */
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.desktop-sidebar-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  /* KEIN overflow:hidden hier – das wuerde den aktiven Marker (::after,
     right:-10px) abschneiden. Das Kuerzen passiert im inneren <span>. */
  min-width: 0;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.desktop-sidebar-link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-sidebar-link ion-icon {
  color: #94a3b8;
  font-size: 20px;
  flex: none;
}

.desktop-sidebar-link:hover {
  background: #f8fafc;
  color: #0f172a;
}

.desktop-sidebar-link.is-active {
  background: #eaf3ff;
  color: #0a66d8;
}

.desktop-sidebar-link.is-active ion-icon {
  color: #0a84ff;
}

.desktop-sidebar-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.desktop-sidebar-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #0f172a;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  flex: none;
}

.desktop-sidebar-user-name {
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 900px) {
  #desktopSidebarRoot {
    display: block;
  }

  body.desktop-sidebar-active #app,
  body.desktop-sidebar-active #topbar {
    width: calc(100% - 252px);
    margin-left: 252px;
  }

  body.desktop-sidebar-active .profile-fab-wrap {
    display: none;
  }
}

@media (max-width: 899px) {
  #desktopSidebarRoot,
  .desktop-sidebar-shell {
    display: none;
  }
}

/* =========================================================
   Saved Case Tile Grid
========================================================= */

.saved-cases-grid-page {
  background: #f6f7f9;
}

.saved-cases-page .content.saved-cases-grid-content {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px;
  overflow: visible;
}

.saved-cases-grid-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  align-items: end;
  gap: 16px;
  margin-bottom: 18px;
}

.saved-cases-grid-kicker {
  margin: 0 0 4px;
  letter-spacing: 0;
}

.saved-cases-grid-summary {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.saved-cases-grid-search {
  margin: 0;
}

.saved-cases-grid-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.saved-cases-grid-empty {
  grid-column: 1 / -1;
  padding: 42px 18px;
  border-radius: 18px;
  background: #ffffff;
  color: #94a3b8;
  text-align: center;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.saved-case-tile {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.saved-case-tile:hover,
.saved-case-tile:focus-visible {
  border-color: #bfdbfe;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.11);
  outline: none;
}

.saved-case-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.saved-case-tile-patient-block {
  min-width: 0;
}

.saved-case-tile-patient {
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-case-tile-meta {
  margin-top: 4px;
  color: #64748b;
  font-size: 13px;
  line-height: 1.35;
}

.saved-case-tile-status,
.case-overview-status,
.case-overview-visit-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.status-green {
  background: #dcfce7;
  color: #166534;
}

.status-blue {
  background: #dbeafe;
  color: #1d4ed8;
}

.status-red {
  background: #fee2e2;
  color: #b91c1c;
}

.status-neutral {
  background: #f1f5f9;
  color: #475569;
}

.saved-case-tile-title {
  margin: 0;
  color: #111827;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 850;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.saved-case-tile-facts {
  display: grid;
  grid-template-columns: 1fr 84px;
  gap: 10px;
}

.saved-case-tile-facts div {
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  display: grid;
  gap: 4px;
}

.saved-case-tile-facts span,
.saved-case-tile-points span,
.case-overview-stat-grid span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.saved-case-tile-facts strong,
.saved-case-tile-points strong,
.case-overview-stat-grid strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
}

.saved-case-tile-patterns,
.case-overview-pattern-list,
.case-overview-point-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.saved-case-tile-chip,
.case-overview-pattern-chip,
.case-overview-point-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}

.saved-case-tile-chip.tone-0,
.case-overview-pattern-chip.tone-0 {
  background: #dbeafe;
  color: #1e40af;
}

.saved-case-tile-chip.tone-1,
.case-overview-pattern-chip.tone-1 {
  background: #dcfce7;
  color: #166534;
}

.saved-case-tile-chip.tone-2,
.case-overview-pattern-chip.tone-2 {
  background: #fee2e2;
  color: #991b1b;
}

.saved-case-tile-chip.is-muted,
.case-overview-pattern-chip.is-muted,
.case-overview-point-chip.is-muted {
  background: #f1f5f9;
  color: #64748b;
}

.saved-case-tile-points {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fffaf0;
  border: 1px solid #fdecc8;
}

.saved-case-tile-progress-track,
.case-overview-progress-track {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  overflow: hidden;
}

.saved-case-tile-progress-fill,
.case-overview-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a84ff 0%, #22c55e 100%);
}

.is-progress-0 { width: 0%; }
.is-progress-10 { width: 10%; }
.is-progress-20 { width: 20%; }
.is-progress-30 { width: 30%; }
.is-progress-40 { width: 40%; }
.is-progress-50 { width: 50%; }
.is-progress-60 { width: 60%; }
.is-progress-70 { width: 70%; }
.is-progress-80 { width: 80%; }
.is-progress-90 { width: 90%; }
.is-progress-100 { width: 100%; }

.saved-case-tile-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.saved-case-tile-actions button,
.case-overview-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #dbe3ee;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.saved-case-tile-actions ion-icon,
.case-overview-actions ion-icon {
  color: #0a84ff;
  font-size: 17px;
}

@media (min-width: 900px) {
  .saved-case-tile:nth-child(2n) {
    transform: translateY(14px);
  }
}

@media (max-width: 1199px) and (min-width: 900px) {
  .saved-cases-grid-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .saved-cases-page .content.saved-cases-grid-content {
    max-width: none;
    padding: 16px;
  }

  .saved-cases-grid-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .saved-cases-grid-list {
    grid-template-columns: 1fr;
  }

  .saved-case-tile:nth-child(2n) {
    transform: none;
  }

  .saved-case-tile {
    min-height: 0;
  }
}

/* =========================================================
   Case Overview
========================================================= */

.case-overview-page {
  background: #f6f7f9;
}

.case-overview-content {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 24px;
  overflow: visible;
}

.case-overview-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
}

.case-overview-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  gap: 24px;
  align-items: start;
}

.case-overview-details {
  display: grid;
  gap: 18px;
}

.case-overview-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.case-overview-avatar {
  width: 68px;
  height: 68px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #eaf3ff;
  color: #0a66d8;
  font-size: 22px;
  font-weight: 850;
  overflow: hidden;
  flex: none;
}

.case-overview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-overview-patient-copy {
  min-width: 0;
}

.case-overview-patient-name {
  color: #0f172a;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
}

.case-overview-patient-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.case-overview-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.case-overview-eyebrow {
  margin: 0 0 6px;
  color: #0a84ff;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0;
}

.case-overview-title-row h2 {
  margin: 0;
  color: #111827;
  font-size: 34px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: 0;
}

.case-overview-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.case-overview-stat-grid div {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.case-overview-text-grid,
.case-overview-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.case-overview-bottom-grid.is-single,
.case-overview-text-grid.is-single {
  grid-template-columns: 1fr;
}

.case-overview-bottom-grid.is-single > div,
.case-overview-text-grid.is-single > section {
  grid-column: 1 / -1;
}

.case-overview-text-grid section,
.case-overview-bottom-grid > div,
.case-overview-pattern-section,
.case-overview-treatment {
  padding: 16px;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
}

.case-overview-text-grid h3,
.case-overview-bottom-grid h3,
.case-overview-pattern-section h3,
.case-overview-section-head h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0;
}

.case-overview-text-grid p,
.case-overview-bottom-grid p {
  margin: 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.case-overview-visual {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.02);
}

.case-overview-visual-head,
.case-overview-section-head,
.case-overview-visit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.case-overview-visual-head span,
.case-overview-section-head span,
.case-overview-visit-top span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.case-overview-visual-head strong,
.case-overview-section-head span,
.case-overview-visit-top strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 850;
}

.case-overview-horse-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 1364;
  border-radius: 18px;
  background: #f8fafc;
  overflow: hidden;
}

.case-overview-horse-image,
.case-overview-horse-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-overview-horse-image {
  object-fit: fill;
}

.case-overview-horse-overlay {
  pointer-events: none;
}

.case-overview-horse-marker circle {
  fill: #0a84ff;
  stroke: #ffffff;
  stroke-width: 0.7;
}

.case-overview-horse-marker text {
  fill: #ffffff;
  font-size: 3.1px;
  font-weight: 900;
  text-anchor: middle;
  dominant-baseline: middle;
}

.case-overview-horse-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-overview-horse-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #1e40af;
  font-size: 12px;
  font-weight: 850;
}

.case-overview-horse-legend-item strong {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #0a84ff;
  color: #ffffff;
  font-size: 11px;
}

.case-overview-horse-legend-empty,
.case-overview-empty {
  color: #94a3b8;
  font-size: 13px;
}

.case-overview-generic-visual {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border-radius: 18px;
  background: #f8fafc;
  text-align: center;
}

.case-overview-generic-visual ion-icon {
  color: #0a84ff;
  font-size: 44px;
}

.case-overview-generic-title {
  color: #0f172a;
  font-size: 18px;
  font-weight: 850;
}

.case-overview-point-chip {
  background: #fff7ed;
  color: #9a3412;
}

.case-overview-treatment {
  margin-top: 20px;
}

.case-overview-visit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: 10px;
}

.case-overview-visit-card {
  min-height: 154px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  position: relative;
}

/* Pencil edit button — sits in the top row, doesn't take part in click navigation. */
.case-overview-visit-card .case-overview-visit-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-overview-visit-edit {
  margin-left: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.case-overview-visit-edit:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}
.case-overview-visit-edit ion-icon {
  font-size: 16px;
}
.case-overview-visit-delete {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.case-overview-visit-delete:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.case-overview-visit-delete ion-icon {
  font-size: 16px;
}

/* Detail-Blöcke der aktuellen Visite: 2-Spalten-Grid.
   Reihe 1: Diagnostische Muster | Empfohlene Punkte
   Reihe 2: Verdachtsdiagnose     | Verwendete Punkte
   Wenn in Reihe 1 nur einer der beiden Blöcke Daten hat, nimmt er
   die volle Breite ein (Modifier `--full`). */
.case-overview-visit-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.case-overview-visit-detail-block--full {
  grid-column: 1 / -1;
}
/* Empfohlene Punkte: dezent abgesetzt vom „Verwendete Punkte"-Chip
   (heller Hintergrund + dünne Outline), damit auf einen Blick klar
   ist, dass das nur die algorithmische Empfehlung ist. */
.case-overview-point-chip--suggested {
  background: #eef2ff;
  color: #3730a3;
  box-shadow: inset 0 0 0 1px #c7d2fe;
}

.case-overview-visit-detail-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.case-overview-visit-detail-block header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.case-overview-visit-detail-block h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.case-overview-visit-detail-block p {
  margin: 0;
  color: #334155;
  font-size: 13.5px;
  line-height: 1.5;
}
.case-overview-visit-detail-empty {
  color: #94a3b8 !important;
  font-style: italic;
}
.case-overview-visit-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.case-overview-point-chip {
  background: #e0e7ff;
  color: #1e3a8a;
  font-weight: 700;
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.case-overview-visit-detail-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 4px 8px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.case-overview-visit-detail-edit:hover {
  background: #eff6ff;
  border-color: #1d4ed8;
}
.case-overview-visit-detail-edit ion-icon {
  font-size: 13px;
}

@media (max-width: 720px) {
  .case-overview-visit-details {
    grid-template-columns: 1fr;
  }
}

/* Visit edit modal */
.visit-edit-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  z-index: 1100;
}
.visit-edit-modal-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.visit-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #e2e8f0;
}
.visit-edit-modal-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}
.visit-edit-modal-close {
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  padding: 0 4px;
}
.visit-edit-modal-body {
  padding: 18px 22px;
  display: grid;
  gap: 16px;
}
.visit-edit-modal-field {
  display: grid;
  gap: 6px;
}
.visit-edit-modal-label {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.visit-edit-modal-textarea,
.visit-edit-modal-input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-size: 13.5px;
  color: #0f172a;
  background: #ffffff;
  resize: vertical;
}
.visit-edit-modal-textarea:focus,
.visit-edit-modal-input:focus {
  outline: 2px solid #0a84ff;
  outline-offset: 0;
  border-color: #0a84ff;
}
.visit-edit-modal-hint {
  font-size: 11.5px;
  color: #64748b;
}
.visit-edit-modal-points-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  min-height: 22px;
}
.visit-edit-modal-chip {
  background: #e0e7ff;
  color: #1e3a8a;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
}
.visit-edit-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid #e2e8f0;
}
.visit-edit-modal-cancel,
.visit-edit-modal-save {
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
}
.visit-edit-modal-save.primary {
  background: #0a84ff;
  border-color: #0a84ff;
  color: #ffffff;
}
.visit-edit-modal-save.primary:hover {
  background: #0067cc;
  border-color: #0067cc;
}
.visit-edit-modal-save:disabled {
  opacity: 0.7;
  cursor: progress;
}

.case-overview-visit-card[role="button"]:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.case-overview-visit-card[role="button"]:focus-visible {
  outline: 2px solid #0a84ff;
  outline-offset: 2px;
}

.case-overview-visit-card.is-current {
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.case-overview-visit-card p {
  margin: 0;
  color: #475569;
  font-size: 12px;
  line-height: 1.35;
}

.case-overview-visit-points {
  color: #0f172a;
  font-size: 12px;
  font-weight: 800;
}

/* TCM-Befunde pro Visite (Shu/Mu/Puls/Zunge) — kompakte Mehrzeilen-Auflistung
   unterhalb der Verwendete-Punkte-Zeile. */
.case-overview-visit-findings {
  margin-top: 6px;
  padding: 8px 10px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #334155;
  font-size: 12px;
  line-height: 1.6;
  word-break: break-word;
}

.case-overview-visit-findings strong {
  color: #0f172a;
  font-weight: 700;
  margin-right: 4px;
}

.case-overview-visit-status {
  justify-self: start;
  min-height: 24px;
}

/* Pill-shaped <select> inside a visit card lets the therapist set
   stabil / besser / schlechter. Wrap holds the pill background + chevron,
   the inner <select> is transparent so its tone class shows through. */
.case-overview-visit-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 22px;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  justify-self: start;
  position: relative;
}

.case-overview-visit-status-wrap ion-icon {
  font-size: 12px;
  pointer-events: none;
  opacity: 0.75;
}

.case-overview-visit-status-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 0;
  line-height: 1;
  /* Hide the native arrow on IE/Edge */
}
.case-overview-visit-status-select::-ms-expand { display: none; }

.case-overview-visit-status-select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.case-overview-bottom-grid {
  margin-top: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-overview-actions {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.case-overview-actions button {
  min-height: 42px;
  padding: 0 14px;
  font-size: 13px;
}

.case-overview-actions button.primary {
  background: #0a84ff;
  border-color: #0a84ff;
  color: #ffffff;
}

.case-overview-actions button.primary ion-icon {
  color: #ffffff;
}

.case-overview-not-found {
  max-width: 560px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  text-align: center;
}

.case-overview-not-found h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.case-overview-not-found p {
  color: #64748b;
}

.case-overview-not-found a {
  color: #0a84ff;
  font-weight: 800;
}

@media (max-width: 1080px) {
  .case-overview-main-grid,
  .case-overview-text-grid,
  .case-overview-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899px) {
  .case-overview-content {
    padding: 16px;
  }

  .case-overview-card {
    padding: 16px;
    border-radius: 20px;
  }

  .case-overview-title-row {
    display: grid;
  }

  .case-overview-title-row h2 {
    font-size: 26px;
  }

  .case-overview-stat-grid {
    grid-template-columns: 1fr;
  }

  .case-overview-actions {
    justify-content: stretch;
  }

  .case-overview-actions button {
    flex: 1 1 100%;
  }
}

.horse-shu-stage {
  display: flex; justify-content: center;
  padding: 0 8px 20px;      /* Selected-Liste fließt jetzt unter dem Chart (nicht fixed) */
  margin-top: -8px;
  flex: 1;
  overflow-y: auto;
  align-items: flex-start;
}
.horse-shu-chart {
  position: relative;
}
.horse-shu-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.horse-shu-points {
  position: absolute; inset: 0;
}
.horse-shu-row {
  position: absolute; left: 0; right: 0;
  height: 18px;
  background: transparent;
  border: 0; padding: 0;
  text-align: left;
  cursor: pointer;
}
.horse-shu-dot {
  position: absolute;
  border-radius: 50%;
  transform: translateY(2px);
}
.horse-shu-label {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.horse-shu-bl {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: var(--muted, #777);
}
.horse-shu-row.selected .horse-shu-name {
  font-weight: 600;
}

/* =========================================================
   Saved cases and overview polish
========================================================= */

.desktop-sidebar-shell {
  width: 224px;
  padding: 20px 10px 18px;
  background: #fbfcff;
  border-right: 1px solid #e7ecf5;
  box-shadow: none;
  gap: 20px;
}

.desktop-sidebar-brand {
  gap: 10px;
  padding: 0 8px 22px;
  border-bottom: 0;
}

.desktop-sidebar-logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.desktop-sidebar-brand-name {
  color: #111a3a;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}

.desktop-sidebar-brand-subtitle {
  display: none;
}

.desktop-sidebar-species {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 6px 2px;
  padding: 3px;
  border-radius: 999px;
  background: #eef1f8;
  border: 1px solid #e2e7f2;
  /* Nie breiter als die Seitenleiste – sonst wurde die letzte Art
     (z. B. "Pferd") rechts abgeschnitten und es erschien ein
     horizontaler Scrollbalken. */
  max-width: 100%;
  overflow: hidden;
}

.desktop-sidebar-species-row {
  display: flex;
  gap: 0;
  min-width: 0;
}

.desktop-sidebar-species-btn {
  /* flex-basis 0 + min-width 0: die Buttons duerfen schrumpfen, statt die
     Zeile aufzublaehen. */
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 5px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #47548a;
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.desktop-sidebar-species-btn:hover {
  color: #082cf5;
}

.desktop-sidebar-species-btn.is-active {
  background: #1f2937;
  color: #fff;
  font-weight: 620;
}

.desktop-sidebar-nav {
  gap: 10px;
}

.desktop-sidebar-divider {
  height: 0;
  margin: 4px 6px;
  border: 0;
  border-top: 1px solid #e2e7f2;
}

.desktop-sidebar-link {
  min-height: 38px;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #25345d;
  font-size: 12px;
  font-weight: 560;
}

.desktop-sidebar-link ion-icon {
  color: #34436c;
  font-size: 18px;
}

.desktop-sidebar-link:hover {
  background: #f4f6ff;
  color: #082cf5;
}

.desktop-sidebar-link.is-active {
  position: relative;
  background: #f0edff;
  color: #082cf5;
}

.desktop-sidebar-link.is-active::after {
  content: "";
  position: absolute;
  top: 6px;
  right: -10px;
  bottom: 6px;
  width: 3px;
  border-radius: 999px;
  background: #1737ff;
}

.desktop-sidebar-link.is-active ion-icon {
  color: #082cf5;
}

.desktop-sidebar-user {
  padding: 8px;
  border: 0;
  background: transparent;
  border-radius: 8px;
}

.desktop-sidebar-user-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
  font-weight: 650;
}

.desktop-sidebar-user-name {
  color: #152044;
  font-size: 12px;
  font-weight: 650;
}

.desktop-sidebar-user-plan {
  color: #5f6b8a;
  font-size: 11px;
}

@media (min-width: 900px) {
  body.desktop-sidebar-active #app,
  body.desktop-sidebar-active #topbar {
    width: calc(100% - 224px);
    margin-left: 224px;
  }
}

.saved-cases-grid-page,
.case-overview-page {
  background: #f7f9fc;
  color: #111a3a;
}

.saved-cases-page .content.saved-cases-grid-content {
  max-width: 1280px;
  padding: 24px 30px 38px;
}

.saved-cases-grid-toolbar {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 18px;
  margin-bottom: 16px;
}

.saved-cases-grid-kicker {
  color: #101937;
  font-size: 20px;
  font-weight: 650;
  text-transform: none;
}

.saved-cases-grid-summary {
  color: #6a738d;
  font-size: 12px;
}

.saved-cases-grid-search {
  height: 38px;
  padding: 9px 13px;
  border-color: #dce3f0;
  border-radius: 8px;
  color: #17213f;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.saved-cases-grid-search::placeholder {
  color: #8b95ad;
}

.saved-cases-grid-list {
  gap: 12px;
}

.saved-cases-grid-empty {
  border: 1px solid #e1e7f2;
  border-radius: 10px;
  box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
}

.saved-case-tile {
  min-height: 214px;
  gap: 8px;
  padding: 14px;
  border-color: #dfe6f3;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.saved-case-tile:hover,
.saved-case-tile:focus-visible {
  border-color: #3150ff;
  box-shadow: 0 5px 18px rgba(42, 62, 140, 0.08);
}

@media (min-width: 900px) {
  .saved-case-tile:nth-child(2n) {
    transform: none;
  }
}

.saved-case-tile-patient {
  color: #111a3a;
  font-size: 14px;
  font-weight: 650;
}

.saved-case-tile-meta {
  margin-top: 2px;
  color: #53607e;
  font-size: 11px;
}

.saved-case-tile-title {
  color: #101937;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 650;
}

.saved-case-tile-status,
.case-overview-status,
.case-overview-visit-status {
  min-height: 22px;
  padding: 4px 10px;
  font-size: 10.5px;
  font-weight: 650;
}

.saved-case-tile-facts {
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 14px;
}

.saved-case-tile-facts div {
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
}

.saved-case-tile-facts span,
.saved-case-tile-points span,
.case-overview-stat-grid span {
  color: #5d6884;
  font-size: 11px;
  font-weight: 500;
}

.saved-case-tile-facts strong,
.saved-case-tile-points strong,
.case-overview-stat-grid strong {
  color: #202a4a;
  font-size: 11px;
  font-weight: 500;
}

.saved-case-tile-patterns,
.case-overview-pattern-list,
.case-overview-point-list {
  gap: 6px;
}

.saved-case-tile-chip,
.case-overview-pattern-chip,
.case-overview-point-chip {
  min-height: 22px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 620;
}

.saved-case-tile-points {
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}

.saved-case-tile-progress-track,
.case-overview-progress-track {
  height: 5px;
  background: #dfe4ee;
}

.saved-case-tile-progress-fill,
.case-overview-progress-fill {
  background: #0f9f7a;
}

.saved-case-tile-actions {
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #edf1f7;
}

.saved-case-tile-actions button,
.case-overview-actions button {
  min-height: 28px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: #0b2cff;
  font-size: 11px;
  font-weight: 600;
}

.saved-case-tile-actions button:hover,
.case-overview-actions button:hover {
  background: #f2f5ff;
}

.saved-case-tile-actions ion-icon,
.case-overview-actions ion-icon {
  color: #0b2cff;
  font-size: 15px;
}

.case-overview-content {
  max-width: 1320px;
  padding: 24px 28px 34px;
}

.case-overview-card {
  padding: 24px 26px 22px;
  border-color: #dce4f2;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.case-overview-main-grid {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
  gap: 28px;
}

.case-overview-details {
  gap: 16px;
}

.case-overview-avatar {
  width: 72px;
  height: 72px;
  color: #0b2cff;
  font-size: 20px;
  font-weight: 650;
}

.case-overview-patient-name {
  color: #111a3a;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: 0;
}

.case-overview-patient-meta {
  margin-top: 7px;
  color: #435076;
  font-size: 13px;
  font-weight: 500;
}

.case-overview-title-row h2 {
  color: #101937;
  font-size: 22px;
  line-height: 1.18;
  font-weight: 650;
}

.case-overview-eyebrow {
  color: #58647f;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

.case-overview-stat-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.case-overview-stat-grid div {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 5px;
}

.case-overview-progress {
  max-width: 300px;
}

.case-overview-text-grid {
  gap: 26px;
}

.case-overview-text-grid section,
.case-overview-pattern-section {
  padding: 0;
  border: 0;
  background: transparent;
}

.case-overview-pattern-section {
  padding-top: 18px;
  border-top: 1px solid #e4e9f2;
}

.case-overview-text-grid h3,
.case-overview-bottom-grid h3,
.case-overview-pattern-section h3,
.case-overview-section-head h3 {
  color: #101937;
  font-size: 15px;
  font-weight: 650;
}

.case-overview-text-grid p,
.case-overview-bottom-grid p {
  color: #202b50;
  font-size: 12.5px;
  line-height: 1.6;
}

.case-overview-visual {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.case-overview-visual-head span,
.case-overview-section-head span,
.case-overview-visit-top span {
  color: #5d6884;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

.case-overview-visual-head strong,
.case-overview-section-head span,
.case-overview-visit-top strong {
  color: #202a4a;
  font-size: 12px;
  font-weight: 500;
}

.case-overview-skeleton-stage,
.case-overview-horse-stage {
  position: relative;
  width: 100%;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.case-overview-skeleton-stage.is-horse {
  aspect-ratio: 1600 / 1364;
}

.case-overview-skeleton-stage.is-dog {
  aspect-ratio: 1654 / 1292;
}

.case-overview-skeleton-image,
.case-overview-skeleton-overlay,
.case-overview-horse-image,
.case-overview-horse-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.case-overview-skeleton-image,
.case-overview-horse-image {
  object-fit: fill;
}

.case-overview-skeleton-overlay,
.case-overview-horse-overlay {
  pointer-events: none;
}

.case-overview-skeleton-marker circle,
.case-overview-horse-marker circle {
  fill: #1368f5;
  stroke: #ffffff;
  stroke-width: 0.7;
}

.case-overview-skeleton-marker text,
.case-overview-horse-marker text {
  fill: #ffffff;
  font-size: 3px;
  font-weight: 650;
  text-anchor: middle;
  dominant-baseline: middle;
}

.case-overview-skeleton-legend,
.case-overview-horse-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #e3e8f2;
}

.case-overview-skeleton-legend-item,
.case-overview-horse-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #34415f;
  font-size: 14px;
  font-weight: 500;
}

.case-overview-skeleton-legend-item strong,
.case-overview-horse-legend-item strong {
  display: inline;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #0b2cff;
  font-size: 14px;
  font-weight: 650;
}

.case-overview-skeleton-legend-empty,
.case-overview-horse-legend-empty,
.case-overview-empty {
  color: #7b86a0;
  font-size: 12px;
}

.case-overview-treatment {
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
}

.case-overview-section-head {
  margin-bottom: 10px;
}

.case-overview-visit-row {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.case-overview-visit-card {
  min-height: 112px;
  gap: 7px;
  padding: 12px;
  border-color: #dfe6f3;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.03);
}

.case-overview-visit-card.is-current {
  border-color: #8ea0ff;
  box-shadow: 0 0 0 2px rgba(25, 55, 255, 0.08);
}

.case-overview-visit-card p,
.case-overview-visit-points {
  color: #3e4a68;
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
}

.case-overview-bottom-grid {
  margin-top: 16px;
  gap: 12px;
}

.case-overview-bottom-grid > div {
  padding: 13px 14px;
  border-color: #dfe6f3;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.03);
}

.case-overview-comments {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #dfe6f3;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.03);
}

.case-overview-comment-list {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.case-overview-comment {
  padding: 10px 11px;
  border: 1px solid #edf1f7;
  border-radius: 10px;
  background: #f8fafc;
}

.case-overview-comment > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.case-overview-comment strong {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.case-overview-comment span,
.case-overview-comment-empty {
  color: #7b86a0;
  font-size: 11.5px;
}

.case-overview-comment p {
  margin: 0;
  color: #25304d;
  font-size: 12.5px;
  line-height: 1.45;
}

.case-overview-actions {
  margin-top: 18px;
  gap: 14px;
}

.case-overview-actions button {
  flex: 1 1 0;
  min-height: 44px;
  border-color: #cfd8ff;
  background: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.case-overview-actions button.primary {
  border-color: #1737ff;
  background: #1737ff;
}

@media (max-width: 899px) {
  .saved-cases-page .content.saved-cases-grid-content,
  .case-overview-content {
    padding: 16px;
  }

  .saved-cases-grid-toolbar {
    grid-template-columns: 1fr;
  }

  .case-overview-card {
    padding: 16px;
  }

  .case-overview-avatar {
    width: 58px;
    height: 58px;
  }

  .case-overview-patient-name {
    font-size: 22px;
  }

  .case-overview-title-row h2 {
    font-size: 20px;
  }

  .case-overview-actions button {
    flex: 1 1 100%;
  }
}

/* =========================================================
   Desktop shell follow-up fixes
========================================================= */

.saved-cases-grid-list {
  grid-template-columns: repeat(auto-fill, minmax(320px, 360px));
  justify-content: start;
  align-items: start;
}

.saved-case-tile {
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

.saved-case-tile-header {
  align-items: flex-start;
}

.saved-case-tile-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.saved-case-tile-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid #d9e3f2;
  background: #f5f8fc;
  color: #34436c;
}

.saved-case-tile-avatar.has-photo {
  background: #eef3fa;
}

.saved-case-tile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saved-case-tile-avatar svg {
  width: 29px;
  height: 29px;
}

.saved-case-tile-avatar svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-case-tile-avatar.is-cat {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.saved-case-tile-avatar.is-dog {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.saved-case-tile-avatar.is-horse {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.saved-case-tile-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-overview-skeleton-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.case-overview-skeleton-marker {
  position: absolute;
  left: calc(var(--marker-x) * 1%);
  top: calc(var(--marker-y) * 1%);
  transform: translate(-50%, -50%);
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  height: 26px;
  min-height: 26px;
  max-height: 26px;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #1368f5;
  color: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
  line-height: 1;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  z-index: 2;
}

@media (min-width: 900px) {
  /* Hide ONLY the global #topbar (the Acupet-branded strip in index.html)
     — the sidebar already shows the Acupet logo + brand. The per-page
     .topbar elements rendered inside each page (with back-button, page
     title, Save button) stay visible. */
  body.desktop-sidebar-active #topbar,
  body.desktop-shell-active #topbar {
    display: none !important;
  }

  body.desktop-sidebar-active .cmty-feed-page {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.desktop-sidebar-active .cmty-sidebar {
    display: none !important;
  }

  body.desktop-sidebar-active .cmty-app-area {
    min-width: 0 !important;
  }

  body.desktop-sidebar-active .cmty-shell {
    width: min(1060px, calc(100% - 56px)) !important;
  }
}

@media (max-width: 899px) {
  .saved-cases-grid-list {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

/* =========================================================
   Saved cases community-feed cards
========================================================= */

.saved-cases-page .content.saved-cases-grid-content {
  max-width: 1080px;
  padding-top: 24px;
}

.saved-cases-grid-toolbar,
.saved-cases-grid-list {
  width: min(920px, 100%);
}

.saved-cases-grid-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: auto;
}

.saved-cases-grid-toolbar .saved-cases-grid-search {
  width: min(520px, 100%);
}

.saved-cases-grid-toolbar .saved-cases-grid-summary {
  text-align: center;
}

.saved-cases-grid-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  max-width: 920px;
}

.saved-case-tile {
  max-width: 920px;
  padding: 14px 16px;
  border-color: #e7ebf2;
  border-radius: 12px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
}

.saved-case-tile:hover,
.saved-case-tile:focus-visible {
  border-color: #d5def0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.saved-case-tile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  gap: 18px;
  align-items: start;
}

.saved-case-tile-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.saved-case-tile-patient {
  font-size: 15px;
}

.saved-case-tile-title {
  margin-top: 1px;
  font-size: 13px;
}

.saved-case-tile-facts,
.saved-case-tile-points {
  font-size: 11.5px;
}

.saved-case-tile-media {
  width: 100%;
  height: 124px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #dfe6f3;
  background: #f5f8fc;
  color: #34436c;
}

.saved-case-tile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.saved-case-tile-media svg {
  width: 82px;
  height: 82px;
}

.saved-case-tile-media svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saved-case-tile-media.is-cat {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.saved-case-tile-media.is-dog {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.saved-case-tile-media.is-horse {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.saved-case-tile-actions {
  width: min(360px, 100%);
  margin-top: 3px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid #edf1f7;
}

@media (max-width: 899px) {
  .saved-cases-grid-toolbar,
  .saved-cases-grid-list {
    width: 100%;
  }

  .saved-cases-grid-toolbar {
    grid-template-columns: 1fr;
  }

  .saved-case-tile-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .saved-case-tile-media {
    order: -1;
    height: clamp(130px, 38vw, 190px);
  }

  .saved-case-tile-actions {
    width: 100%;
  }
}

/* =========================================================
   Shared Saved/Community Case Post Card
========================================================= */

.case-card-grid,
#cmty-grid.case-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(420px, 1fr));
  gap: 24px;
  align-items: start;
}

.saved-cases-grid-list.case-card-grid {
  width: 100%;
  max-width: 1120px;
}

.case-post-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  grid-template-areas:
    "main media"
    "footer footer";
  gap: 14px 16px;
  padding: 14px 16px;
  border: 1px solid #e7ebf2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .035);
  color: #0f172a;
  cursor: pointer;
}

.case-post-card:hover,
.case-post-card:focus-visible {
  border-color: #d5def0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
  outline: none;
}

.case-post-main {
  grid-area: main;
  min-width: 0;
  display: grid;
  gap: 7px;
}

.case-post-head {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.case-post-author {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.case-post-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #dbe7fb;
  background: #eaf2ff;
  color: #0a84ff;
  font-size: 15px;
  font-weight: 700;
}

.case-post-author-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.case-post-author-copy strong {
  overflow: hidden;
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-post-author-copy span {
  overflow: hidden;
  color: #34415f;
  font-size: 11.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.case-post-status {
  flex: 0 0 auto;
  min-height: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #334155;
  font-size: 10.5px;
  font-weight: 700;
}

.case-post-title {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
}

.case-post-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #10203f;
  font-size: 12px;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.case-post-clinical {
  display: grid;
  gap: 3px;
  color: #0f172a;
  font-size: 11.5px;
  line-height: 1.36;
}

.case-post-clinical strong {
  font-weight: 750;
}

.case-post-tags,
.case-post-patterns {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.case-post-tag,
.case-post-patterns span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eaf3ff;
  color: #075ec8;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.case-post-tag.tone-1 {
  background: #dcfce7;
  color: #166534;
}

.case-post-tag.tone-2 {
  background: #f3e8ff;
  color: #6d28d9;
}

.case-post-tag.tone-3 {
  background: #fff7ed;
  color: #9a3412;
}

.case-post-tag.is-muted {
  background: #f1f5f9;
  color: #64748b;
}

.case-post-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: #34415f;
  font-size: 11.5px;
}

.case-post-meta-row strong {
  color: #0f172a;
  font-weight: 700;
}

.case-post-progress {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe4ee;
}

.case-post-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0f9f7a;
}

.case-post-media {
  grid-area: media;
  width: 100%;
  height: 126px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe6f3;
  border-radius: 11px;
  background: #f5f8fc;
  color: #34436c;
}

.case-post-media.case-visual {
  position: relative;
  display: block;
  height: 150px;
  padding: 8px;
  background: #f8fbff;
  /* Höhenobergrenze fürs Skelettbild (Shrink-Wrap) — je Kontext überschrieben. */
  --skeleton-max-h: 130px;
}

.case-post-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-visual-slides,
.case-visual-slide {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.case-visual-slide {
  display: none;
}

.case-visual-slide.is-active {
  display: grid;
}

.case-visual-skeleton {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 5px;
}

/* Shrink-Wrap: Die Stage umschließt EXAKT das gerenderte Skelettbild, nicht
 * die (evtl. größere) Karten-Box. So deckt die Marker-Ebene (position:absolute;
 * inset:0) immer genau das Bild ab und die Punkte sitzen auf jedem Viewport an
 * der richtigen Stelle. Vorher wurde die Box per object-fit:contain im Bild
 * letterboxed, wodurch die Marker auf schmalen Screens (Handy) daneben/darunter
 * rutschten. */
.case-visual-skeleton-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  align-self: center;
  justify-self: center;
}

/* Das Bild bestimmt jetzt das Seitenverhältnis (intrinsisch). Feste
 * aspect-ratio-Vorgaben würden den Shrink-Wrap brechen. */
.case-visual-skeleton-stage.is-horse,
.case-visual-skeleton-stage.is-dog,
.case-visual-skeleton-stage.is-rabbit,
.case-visual-skeleton-stage.is-bovine,
.case-visual-skeleton-stage.is-pig {
  aspect-ratio: auto;
  max-height: 100%;
}

.case-visual-skeleton-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Höhere Spezifität als `.case-post-media img { object-fit:cover; width/height:100% }`
 * — sonst würde das Skelettbild gefüllt/gecovert und der Shrink-Wrap der Stage
 * (und damit die Marker-Ausrichtung) bräche auf dem Desktop.
 * max-height kommt aus --skeleton-max-h (am Container gesetzt, je Kontext),
 * weil ein prozentuales max-height beim Shrink-Wrap nicht bindet und das Bild
 * sonst die Box überlaufen würde. */
.case-post-media .case-visual-skeleton-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--skeleton-max-h, 100%);
  object-fit: contain;
}

.case-visual-marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.case-visual-marker {
  position: absolute;
  left: calc(var(--marker-x) * 1%);
  top: calc(var(--marker-y) * 1%);
  /* 26px → 18px (Jf 22.09.2026): Punkte überdeckten sich auf dem Skelett. */
  width: 18px;
  height: 18px;
  aspect-ratio: 1 / 1;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  background: #0b6ff6;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.case-visual.is-compact .case-visual-marker {
  width: 18px;
  height: 18px;
  border-width: 1.5px;
  font-size: 10px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .16);
}

.case-visual-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px 8px;
  overflow: hidden;
  color: #34415f;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.case-visual.is-compact .case-visual-legend {
  max-height: 24px;
  flex-wrap: wrap;
  gap: 3px 6px;
  overflow: hidden;
  font-size: 10px;
}

.case-visual-legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
}

.case-visual-legend-item strong {
  color: #0b2cff;
  font-size: 11px;
  font-weight: 750;
}

.case-visual.is-compact .case-visual-legend-item strong {
  font-size: 10px;
}

.case-visual-empty {
  overflow: hidden;
  color: #7a879d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Höhere Spezifität als `.case-post-media img { object-fit: cover }` (s.o.),
 * sonst greift die Regel auf dem Desktop nicht. Fotos im Fall-Karussell
 * IMMER vollständig & zentriert zeigen, nie croppen — hochformatige
 * Zungenfotos wurden mit cover sonst auf Nase/Gesicht beschnitten, die
 * eigentliche Zunge fiel unten aus dem Bild. */
.case-post-media .case-visual-photo {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: contain;
  object-position: center;
  background: #f1f5f9;
}

.case-visual-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 24px;
  height: 32px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 999px;
  background: rgba(15, 23, 42, .48);
  color: #fff;
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
}

.case-visual.is-compact .case-visual-nav {
  width: 20px;
  height: 26px;
  font-size: 9px;
  background: rgba(15, 23, 42, .38);
  box-shadow: 0 4px 10px rgba(15, 23, 42, .12);
}

.case-visual-nav.is-prev {
  left: 6px;
}

.case-visual-nav.is-next {
  right: 6px;
}

.case-visual-counter {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .68);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.case-overview-visual .case-post-media.case-visual {
  height: 360px;
  border: 0;
  background: transparent;
  padding: 0;
  --skeleton-max-h: 348px;
}

.case-overview-visual .case-visual-skeleton {
  gap: 12px;
}

.case-overview-visual .case-visual-legend {
  gap: 9px 16px;
  flex-wrap: wrap;
  font-size: 14px;
}

.case-overview-visual .case-visual-legend-item strong {
  font-size: 15px;
}

.case-post-media svg {
  width: 82px;
  height: 82px;
}

.case-post-media svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.case-post-media.is-cat {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
}

.case-post-media.is-dog {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.case-post-media.is-horse {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}

.case-post-footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, max-content));
  gap: 22px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #edf1f7;
}

.case-post-card.is-saved .case-post-footer {
  grid-template-columns: repeat(4, minmax(0, max-content));
}

.case-post-action {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0b2cff;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.case-post-action ion-icon {
  color: currentColor;
  font-size: 15px;
}

.case-post-action:hover {
  background: #f2f5ff;
}

.case-post-action.is-static {
  cursor: default;
  color: #53617a;
}

.case-post-action.is-static:hover {
  background: transparent;
}

.case-post-helpful.is-helpful,
.case-post-save.is-saved {
  color: #0f766e;
}

.cmty-comment-modal {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, .42);
}

.cmty-comment-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 20px;
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 64px rgba(15, 23, 42, .2);
}

.cmty-comment-dialog h3 {
  margin: 0 34px 6px 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
}

.cmty-comment-dialog p {
  margin: 0 0 12px;
  color: #53617a;
  font-size: 12.5px;
  line-height: 1.4;
}

.cmty-comment-dialog textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #d8e0ed;
  border-radius: 10px;
  color: #10203f;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
}

.cmty-comment-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.cmty-comment-hint {
  min-height: 18px;
  margin-top: 6px;
  color: #dc2626;
  font-size: 12px;
}

.cmty-comment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.cmty-comment-actions button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d8e0ed;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.cmty-comment-actions .cmty-comment-submit {
  border-color: #0a84ff;
  background: #0a84ff;
  color: #fff;
}

@media (max-width: 899px) {
  .case-card-grid,
  #cmty-grid.case-card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .case-post-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "media"
      "footer";
    gap: 12px;
  }

  .case-post-media {
    height: clamp(132px, 38vw, 190px);
  }

  .case-post-media.case-visual {
    height: clamp(168px, 48vw, 230px);
  }

  .case-overview-visual .case-post-media.case-visual {
    height: clamp(240px, 64vw, 360px);
  }

  .case-post-footer,
  .case-post-card.is-saved .case-post-footer {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
  }

  .case-post-action {
    justify-content: center;
  }
}

/* Mobile shell and shared case-card refinements */
.case-post-head-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.case-post-mobile-meta {
  display: none;
}

.case-post-card.is-saved .case-post-avatar.is-saved-mobile-avatar {
  display: none;
}

.mobile-bottom-nav-shell {
  display: none;
}

@media (max-width: 899px) {
  #desktopSidebarRoot,
  .desktop-sidebar-shell {
    display: none !important;
  }

  body.desktop-sidebar-active #app {
    margin-left: 0 !important;
  }

  body.mobile-bottom-nav-active #app {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-bottom-nav-active .profile-fab-wrap,
  body.mobile-bottom-nav-active .profile-fab {
    display: none !important;
  }

  .mobile-bottom-nav-shell {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 740;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(211, 219, 232, .82);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 -12px 30px rgba(15, 23, 42, .08);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav-link {
    min-width: 0;
    min-height: 54px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    border-radius: 14px;
    color: #44536f;
    text-decoration: none;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.1;
  }

  .mobile-bottom-nav-link ion-icon {
    font-size: 23px;
  }

  .mobile-bottom-nav-link.is-active {
    color: #075cff;
  }

  .case-card-grid,
  #cmty-grid.case-card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .saved-cases-grid-list.case-card-grid {
    max-width: none;
  }

  .case-post-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "media"
      "title"
      "description"
      "clinical"
      "tags"
      "meta"
      "progress"
      "footer";
    gap: 12px;
    padding: 18px;
    border-radius: 18px;
    cursor: pointer;
  }

  .case-post-main {
    display: contents;
  }

  .case-post-head {
    grid-area: head;
    align-items: flex-start;
  }

  .case-post-title {
    grid-area: title;
    font-size: 17px;
    line-height: 1.25;
  }

  .case-post-description {
    grid-area: description;
    font-size: 14px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
  }

  .case-post-clinical {
    grid-area: clinical;
    gap: 5px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .case-post-tags {
    grid-area: tags;
  }

  .case-post-meta-row {
    grid-area: meta;
  }

  .case-post-progress {
    grid-area: progress;
  }

  .case-post-footer {
    grid-area: footer;
  }

  .case-post-card.is-saved .case-post-avatar.is-saved-mobile-avatar {
    display: grid;
  }

  .case-post-avatar {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 14px;
  }

  .case-post-author-copy strong {
    font-size: 15px;
  }

  .case-post-author-copy span {
    font-size: 12px;
  }

  .case-post-status {
    display: none;
  }

  .case-post-mobile-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #0f172a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
  }

  .case-post-menu-dots {
    letter-spacing: 1.5px;
    font-size: 16px;
    font-weight: 800;
  }

  .case-post-media,
  .case-post-media.case-visual {
    grid-area: media;
    width: 100%;
    height: clamp(230px, 64vw, 280px);
    padding: 10px;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
    /* Höhe fürs Skelettbild = Media-Höhe minus vertikales Padding (20px),
     * Grid-Gap (5px) und reservierter Platz für die (bis zu 2-zeilige)
     * Punkte-Legende (30px). Vorher wurden nur ~30px reserviert, wodurch
     * hochformatige Skelette (Hund) das Bild über die Legende schoben und
     * diese abschnitten (Querformat/Pferd passte zufällig). */
    --skeleton-max-h: calc(clamp(230px, 64vw, 280px) - 55px);
  }

  .case-visual-skeleton-stage {
    /* Shrink-Wrap (siehe Basisregel): Stage = Bildgröße, damit die
     * Marker-Ebene exakt auf dem Skelettbild liegt. Keine feste Höhe
     * erzwingen — sonst wird das Bild letterboxed und die Punkte rutschen
     * auf dem Handy daneben. */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-inline: auto;
  }

  /* Skelettbild NICHT auf 100%/cover zwingen — es muss intrinsisch skalieren,
   * damit die Stage es exakt umschließt (Marker-Ausrichtung). max-height kommt
   * aus --skeleton-max-h (oben am Container gesetzt). */
  .case-visual-skeleton-image {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: var(--skeleton-max-h, 100%);
    object-fit: contain !important;
  }

  .case-visual-image,
  .case-visual-photo,
  .case-post-media img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
  }

  .case-visual-photo {
    border-radius: 12px;
  }

  .case-visual.is-compact .case-visual-nav {
    width: 30px;
    height: 30px;
    font-size: 12px;
    background: rgba(15, 23, 42, .42);
  }

  .case-visual-nav.is-prev {
    left: 8px;
  }

  .case-visual-nav.is-next {
    right: 8px;
  }

  .case-visual-counter {
    right: 12px;
    bottom: 12px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .case-visual.is-compact .case-visual-legend {
    max-height: 30px;
    font-size: 10px;
    line-height: 1.25;
  }

  .case-visual.is-compact .case-visual-legend-item strong {
    font-size: 10px;
  }

  .case-post-footer,
  .case-post-card.is-saved .case-post-footer {
    gap: 4px;
    padding-top: 12px;
  }

  .case-post-footer {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .case-post-card.is-saved .case-post-footer {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .case-post-action {
    justify-content: center;
    gap: 5px;
    min-height: 36px;
    padding: 0 4px;
    font-size: 11px;
    white-space: nowrap;
  }

  .case-post-action ion-icon {
    font-size: 17px;
  }

  .community-page .cmty-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .community-page .cmty-tabs::-webkit-scrollbar {
    display: none;
  }

  .community-page .cmty-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 0 18px !important;
    white-space: nowrap !important;
    scroll-snap-align: start;
  }

}

@media (min-width: 900px) {
  #mobileBottomNavRoot,
  .mobile-bottom-nav-shell {
    display: none !important;
  }

  body.mobile-bottom-nav-active #app {
    padding-bottom: 0;
  }
}

@media (max-width: 899px) {
  .community-page .cmty-tabs {
    display: flex !important;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px !important;
    border-radius: 16px !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .community-page .cmty-tabs::-webkit-scrollbar {
    display: none;
  }

  .community-page .cmty-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    scroll-snap-align: start;
  }

  .case-post-card.is-community .case-post-mobile-meta {
    display: none !important;
  }

  .case-overview-page,
  .case-overview-content,
  .case-overview-card {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .case-overview-content {
    padding: 12px 12px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .case-overview-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .case-overview-main-grid,
  .case-overview-text-grid,
  .case-overview-bottom-grid,
  .case-overview-visit-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .case-overview-details,
  .case-overview-main-grid > *,
  .case-overview-text-grid > *,
  .case-overview-bottom-grid > *,
  .case-overview-treatment,
  .case-overview-comments,
  .case-overview-visual {
    min-width: 0;
  }

  .case-overview-header {
    align-items: flex-start;
  }

  .case-overview-avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 16px !important;
  }

  .case-overview-patient-name {
    font-size: 20px !important;
    line-height: 1.15 !important;
  }

  .case-overview-patient-meta {
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 12px !important;
  }

  .case-overview-title-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .case-overview-title-row h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere;
  }

  .case-overview-status {
    justify-self: start;
  }

  .case-overview-stat-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .case-overview-stat-grid div {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 8px !important;
    align-items: center;
    padding: 10px 12px !important;
    border: 1px solid #e6ebf3 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
  }

  .case-overview-progress {
    max-width: none !important;
  }

  .case-overview-text-grid section,
  .case-overview-bottom-grid > div,
  .case-overview-pattern-section,
  .case-overview-treatment,
  .case-overview-comments {
    padding: 12px !important;
    border: 1px solid #e4e9f2 !important;
    border-radius: 10px !important;
    background: #fff !important;
  }

  .case-overview-text-grid p,
  .case-overview-bottom-grid p,
  .case-overview-comment p,
  .case-overview-visit-card p,
  .case-overview-visit-points {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .case-overview-pattern-list,
  .case-overview-point-list,
  .case-overview-skeleton-legend,
  .case-overview-horse-legend,
  .case-overview-visual .case-visual-legend {
    justify-content: flex-start !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .case-overview-pattern-chip,
  .case-overview-point-chip,
  .case-overview-skeleton-legend-item,
  .case-overview-horse-legend-item,
  .case-overview-visual .case-visual-legend-item {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  .case-overview-visual {
    padding: 12px !important;
    border: 1px solid #e4e9f2 !important;
    border-radius: 12px !important;
    background: #fff !important;
  }

  .case-overview-visual-head,
  .case-overview-section-head,
  .case-overview-visit-top,
  .case-overview-comment > div {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .case-overview-visual .case-post-media.case-visual {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    overflow: visible !important;
  }

  .case-overview-visual .case-visual-slides,
  .case-overview-visual .case-visual-slide {
    height: auto !important;
  }

  .case-overview-visual .case-visual-photo {
    max-height: 230px;
    object-fit: contain !important;
  }

  /* Skelett-Slide (Handy): Spalte auf volle Breite zwingen, damit das Bild
     wirklich mittig sitzt — sonst schrumpft die Auto-Spalte auf Inhaltsbreite
     und Bild + Legende rutschen aus der Mitte. */
  .case-overview-visual .case-visual-slide.is-active {
    justify-content: center !important;
    justify-items: center !important;
  }

  .case-overview-visual .case-visual-skeleton {
    gap: 8px !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
  }

  .case-overview-visual .case-visual-skeleton-stage {
    justify-self: center !important;
    margin-inline: auto !important;
  }

  .case-overview-visual .case-visual-skeleton-stage.is-horse {
    width: min(100%, 252px);
  }

  .case-overview-visual .case-visual-skeleton-stage.is-dog {
    width: min(100%, 212px);
  }

  /* Legende (Handy): mittig unter dem Bild + kleinerer Punktname. */
  .case-overview-visual .case-visual-legend {
    justify-content: center !important;
    font-size: 11.5px !important;
  }

  .case-overview-visual .case-visual-legend-item,
  .case-overview-visual .case-visual-legend-item strong {
    font-size: 11.5px !important;
  }

  .case-overview-visual .case-visual-marker {
    width: 18px;
    height: 18px;
    border-width: 1.5px;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
  }

  .case-overview-visit-card {
    min-height: 0 !important;
  }

  .case-overview-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .case-overview-actions button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .community-page .cmty-tab {
    min-height: 36px !important;
    padding: 0 8px !important;
    font-size: 11.5px !important;
  }

  .case-overview-content {
    padding-inline: 10px !important;
  }

  .case-overview-card {
    padding: 12px !important;
  }

  .case-overview-visual .case-post-media.case-visual {
    height: auto !important;
  }

  .case-overview-visual .case-visual-photo {
    max-height: 214px;
  }

  .case-overview-visual .case-visual-skeleton-stage.is-horse {
    width: min(100%, 232px);
  }

  .case-overview-visual .case-visual-skeleton-stage.is-dog {
    width: min(100%, 194px);
  }

  .case-overview-visual .case-visual-marker {
    width: 15px;
    height: 15px;
    border-width: 1px;
    font-size: 8.5px;
  }
}

/* Social sharing */
.social-share-layer {
  position: fixed;
  inset: 0;
  z-index: 860;
  background: transparent;
}

.social-share-popover {
  position: fixed;
  width: min(336px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid #dde5f1;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 58px rgba(15, 23, 42, .18);
  color: #0f172a;
  backdrop-filter: blur(16px);
}

.social-share-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  border-left: 1px solid #dde5f1;
  border-top: 1px solid #dde5f1;
  background: rgba(255, 255, 255, .98);
}

.social-share-head,
.social-share-powered {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.social-share-head strong {
  font-size: 13px;
  font-weight: 750;
}

.social-share-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.social-share-close:hover {
  background: #f1f5f9;
}

.social-share-summary {
  display: grid;
  gap: 2px;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
}

.social-share-preview {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #e2eaf5;
  border-radius: 12px;
  background: #f8fafc;
  aspect-ratio: 1 / 1;
}

.social-share-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.social-share-summary span,
.social-share-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-share-summary span {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
}

.social-share-summary small {
  color: #64748b;
  font-size: 11px;
}

.social-share-options {
  display: grid;
  gap: 4px;
}

.social-share-actions {
  display: grid;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid #edf1f7;
  margin-bottom: 8px;
}

.social-share-actions button,
.social-share-options button,
.social-share-download {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.social-share-actions button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.social-share-actions ion-icon {
  color: #075cff;
  font-size: 18px;
}

.social-share-actions button:hover:not(:disabled),
.social-share-options button:hover,
.social-share-download:hover {
  background: #f3f6fb;
}

.social-share-brand,
.social-share-logo {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.social-share-brand.is-x {
  background: #0f172a;
}

.social-share-brand.is-instagram {
  background: linear-gradient(135deg, #f97316, #db2777 48%, #7c3aed);
}

.social-share-brand.is-facebook {
  background: #1877f2;
  font-size: 17px;
}

.social-share-brand.is-tiktok {
  background: #020617;
  font-size: 9px;
}

.social-share-brand.is-linkedin {
  background: #0a66c2;
  font-size: 10px;
}

.social-share-download {
  margin-top: 8px;
  color: #075cff;
}

.social-share-download ion-icon {
  font-size: 18px;
}

.social-share-hint {
  margin: 8px 0 0;
  color: #53617a;
  font-size: 11px;
  line-height: 1.35;
}

.social-share-powered {
  justify-content: center;
  margin-top: 12px;
  color: #334155;
  font-size: 11px;
  font-weight: 700;
}

.social-share-logo {
  background: url("../public/assets/pictures/landing/icon.png") center/cover no-repeat, linear-gradient(135deg, #44c8df, #0a84ff);
}

@media (max-width: 899px) {
  .social-share-popover {
    right: 12px !important;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    top: auto !important;
    width: auto;
    border-radius: 18px;
  }

  .social-share-popover::before {
    display: none;
  }
}

/* Community case card */
.case-post-card.is-community {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "title"
    "media"
    "body"
    "footer";
  gap: 12px;
  padding: 16px;
  overflow: hidden;
}

.case-post-card.is-community .case-community-head {
  grid-area: head;
}

.case-post-card.is-community .case-post-author {
  align-items: center;
}

.case-post-card.is-community .case-post-avatar {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  font-size: 15px;
}

.case-post-card.is-community .case-post-author-copy strong {
  font-size: 15px;
  line-height: 1.15;
}

.case-post-card.is-community .case-post-author-copy span {
  font-size: 12px;
}

.case-community-title-block {
  grid-area: title;
  min-width: 0;
  display: grid;
  gap: 9px;
}

.case-community-title {
  font-size: 18px;
  line-height: 1.25;
}

.case-community-visual-panel {
  grid-area: media;
  width: 100%;
  min-width: 0;
}

.case-community-visual-panel .case-post-media.case-visual {
  width: 100%;
  min-width: 0;
  height: clamp(300px, 48vw, 390px);
  padding: 10px;
  overflow: hidden;
  border-radius: 14px;
  background: #f8fafc;
  /* Skelettbild den Panel-Innenraum ausfüllen lassen (vorher hing es am
   * Basiswert 130px → kleines Bild in großer Box). Der Wert trackt die
   * Panel-Höhe abzüglich Padding (48vw − 24px, gedeckelt), damit das Bild
   * nie überläuft. Da die Marker-Ebene das (shrink-gewrappte) Bild exakt
   * abdeckt und die Punkte prozentual sitzen, bleibt deren relative
   * Position beim Vergrößern unverändert. */
  --skeleton-max-h: clamp(280px, calc(48vw - 24px), 366px);
}

.case-post-card.is-community .case-visual-slide.is-active {
  align-items: center;
}

.case-post-card.is-community .case-visual-skeleton {
  height: 100%;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.case-post-card.is-community .case-visual-skeleton-stage {
  /* Shrink-Wrap auf die Bildgröße in JEDER Breite (nicht nur <=899px),
   * damit die Marker-Ebene exakt auf dem Skelettbild liegt. Sonst faellt
   * die Stage auf width:100% zurueck (Basisregel) und die Punkte rutschen
   * neben das Bild. Stage ist ein zentriertes Grid-Item, daher schrumpft
   * width/height:auto auf den Bildinhalt. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-inline: auto;
}

.case-post-card.is-community .case-visual-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Skelettbild: Shrink-Wrap-Höhenobergrenze aus --skeleton-max-h (siehe Basis),
 * nicht 100% — sonst überläuft das Bild die Box und die Marker verschieben sich
 * (v.a. im mobilen Community-Feed). */
.case-post-card.is-community .case-visual-skeleton-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--skeleton-max-h, 100%);
  object-fit: contain;
}

.case-post-card.is-community .case-visual-marker {
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: 800;
}

.case-post-card.is-community .case-visual-marker.is-applied {
  background: #2fb344;
  color: #fff;
}

.case-post-card.is-community .case-visual-marker.is-additional {
  background: #0b6ff6;
  color: #fff;
}

.case-post-card.is-community .case-visual-marker.is-omitted {
  border-color: #f97316;
  background: #fff;
  color: #ea580c;
}

.case-post-card.is-community .case-visual.is-compact .case-visual-nav {
  width: 24px;
  height: 28px;
  background: rgba(100, 116, 139, .58);
  color: #fff;
}

.case-post-card.is-community .case-visual-counter {
  right: 10px;
  bottom: 10px;
}

.community-card-body {
  grid-column: 1 / -1;
  grid-area: body;
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.case-community-med-section {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 7px;
}

.case-community-med-section h4 {
  margin: 0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.points-chip-list,
.diagnosis-chip-list,
.category-chip-list {
  width: 100%;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.case-community-category-chip,
.case-community-med-pill {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.case-community-category-chip {
  background: #eef2f7;
  color: #263345;
}

.case-community-category-chip.is-muted {
  color: #64748b;
}

.case-community-med-pill.is-match,
.case-community-med-pill.is-applied {
  border: 1px solid #bcebc5;
  background: #dcfce7;
  color: #15803d;
}

.case-community-med-pill.is-additional {
  border: 1px solid #bfdbfe;
  background: #eaf3ff;
  color: #0b6ff6;
}

.case-community-med-pill.is-omitted {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #ea580c;
}

.case-community-med-pill.is-used {
  border: 1px solid #c7d2fe;
  background: #e0e7ff;
  color: #1e3a8a;
}

/* Therapist's free-text diagnosis on the community card. */
.case-community-diagnosis-text {
  margin: 0;
  color: #1f2937;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.case-community-diagnosis-text.is-empty {
  color: #94a3b8;
}

/* Hint shown when usedPointIDs is explicitly an empty array
   (vs. never edited — that case shows the &mdash; placeholder). */
.case-community-empty-hint {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 11.5px;
  font-style: italic;
}

.case-community-point-stats {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 9px;
  padding: 9px 11px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  color: #334155;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.case-community-point-stats strong {
  color: #0f172a;
  font-weight: 800;
}

.case-community-point-stats strong.is-applied {
  color: #15803d;
}

.case-community-point-stats strong.is-additional {
  color: #0b6ff6;
}

.case-community-point-stats strong.is-omitted {
  color: #ea580c;
}

.case-community-point-stats i {
  color: #64748b;
  font-style: normal;
}

.case-community-empty {
  color: #64748b;
  font-size: 12px;
}

.case-post-card.is-community .case-post-footer {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}

.case-post-card.is-community .case-post-action {
  justify-content: flex-start;
  min-width: 0;
  min-height: 28px;
  padding: 0 2px;
  color: #53617a;
}

.case-post-card.is-community .case-post-action:hover {
  background: transparent;
}

.case-post-card.is-community .case-post-helpful.is-helpful {
  color: #0a84ff;
}

.case-post-card.is-community .case-post-share span {
  display: none;
}

@media (max-width: 899px) {
  .case-post-card.is-community {
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
  }

  .case-community-visual-panel .case-post-media.case-visual {
    height: clamp(300px, 88vw, 430px);
  }

  .case-post-card.is-community .case-post-footer {
    gap: 22px;
  }

  .case-post-card.is-community .case-post-action {
    justify-content: flex-start;
    min-height: 30px;
    padding: 0 1px;
  }
}

/* =========================================================
   Verwendete-Punkte-Zonen-Editor (Migration 0041)
   Wird in SummaryPage (.summary-used-points-zones) und
   VisitEditModal (.visit-edit-modal-zone-grid) eingehängt.
========================================================= */

.summary-used-points-zones,
.visit-edit-modal-zone-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.zone-card {
  flex: 1 1 0;
  min-width: 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zone-card.accent-kopf { border-color: #bbf7d0; }
.zone-card.accent-kopf .zone-card-title { color: #15803d; }

.zone-card.accent-hals { border-color: #a7f3d0; }
.zone-card.accent-hals .zone-card-title { color: #047857; }

.zone-card.accent-vorne { border-color: #bfdbfe; }
.zone-card.accent-vorne .zone-card-title { color: #2563eb; }

.zone-card.accent-rumpf { border-color: #ddd6fe; }
.zone-card.accent-rumpf .zone-card-title { color: #7c3aed; }

.zone-card.accent-hinten { border-color: #fed7aa; }
.zone-card.accent-hinten .zone-card-title { color: #ea580c; }

.zone-card.zone-pool {
  background: #fef9c3;
  border-color: #fde68a;
}
.zone-card.zone-pool .zone-card-title { color: #92400e; }

.zone-card-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #475569;
}

.zone-card-empty {
  font-size: 12px;
  color: #94a3b8;
}

.zone-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}

.zone-row,
.zone-trunk-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.zone-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
  cursor: pointer;
  transition: background-color 120ms, border-color 120ms;
}
.zone-chip:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.zone-chip.is-assigned {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e3a8a;
}
.zone-chip .chip-chevron {
  font-size: 9px;
  color: #64748b;
}

/* Popover-Menü unter einem Chip ---------------------------------------- */
.used-points-chip-menu,
.visit-edit-modal-chip-menu {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  min-width: 200px;
  padding: 6px 0;
  font-size: 13px;
  color: #0f172a;
}
.used-points-chip-menu .menu-section,
.visit-edit-modal-chip-menu .menu-section {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.used-points-chip-menu .menu-section-title,
.visit-edit-modal-chip-menu .menu-section-title {
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.used-points-chip-menu .menu-item,
.visit-edit-modal-chip-menu .menu-item {
  appearance: none;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 6px 12px;
  font-size: 13px;
  color: inherit;
  cursor: pointer;
}
.used-points-chip-menu .menu-item:hover,
.visit-edit-modal-chip-menu .menu-item:hover {
  background: #f1f5f9;
}
.used-points-chip-menu .menu-item.is-on,
.visit-edit-modal-chip-menu .menu-item.is-on {
  color: #1e3a8a;
  font-weight: 600;
}
.used-points-chip-menu .menu-item.destructive,
.visit-edit-modal-chip-menu .menu-item.destructive {
  color: #b91c1c;
}
.used-points-chip-menu .menu-item.destructive:hover,
.visit-edit-modal-chip-menu .menu-item.destructive:hover {
  background: #fef2f2;
}
.used-points-chip-menu .menu-divider,
.visit-edit-modal-chip-menu .menu-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

/* Mobile-Anpassung: Pool/Bein-Zonen vertikal stapeln, Rumpf bleibt 3-Sp. */
@media (max-width: 520px) {
  .zone-row {
    flex-direction: column;
  }
  .zone-trunk-row {
    flex-wrap: wrap;
  }
}

/* Owner navigation architecture (ACU-16) */
.owner-nav-page {
  background: #ececf2;
}

.owner-nav-header {
  max-width: 760px;
  margin: 0 auto 8px;
}

.owner-nav-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.owner-nav-header p {
  margin: -8px auto 0;
  max-width: 680px;
  color: #5f6b7a;
  font-size: 16px;
  line-height: 1.5;
}

.owner-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 500px));
  gap: 12px;
  justify-content: center;
}

.owner-nav-card .ios-card-subtitle {
  line-height: 1.35;
}

.owner-nav-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3343b5;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 899px) {
  .owner-nav-header {
    text-align: left;
  }

  .owner-nav-header h1 {
    text-align: left;
    margin-bottom: 14px;
  }

  .owner-nav-header p {
    margin: 0;
    font-size: 15px;
  }

  .owner-nav-grid {
    grid-template-columns: 1fr;
  }

  .mobile-bottom-nav-shell {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .mobile-bottom-nav-link {
    min-height: 50px;
    border-radius: 12px;
    font-size: 9.5px;
    letter-spacing: -0.02em;
  }

  .mobile-bottom-nav-link ion-icon {
    font-size: 21px;
  }
}

/* ===== Tumortherapie ===== */
.tumor-caution {
  margin: 12px 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4e5;
  color: #8a4b00;
  font-size: 14px;
  line-height: 1.4;
}
.tumor-type-toggle {
  display: flex;
  gap: 8px;
  margin: 8px 16px 4px;
}
.tumor-type-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d0d0d5;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 15px;
  cursor: pointer;
}
.tumor-type-btn.is-active {
  background: #007aff;
  border-color: #007aff;
  color: #fff;
}
.tumor-select-label {
  display: block;
  margin: 14px 16px 6px;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
}
.tumor-select {
  width: calc(100% - 32px);
  margin: 0 16px 8px;
  padding: 10px 12px;
  border: 1px solid #d0d0d5;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
}
.tumor-funktionskreis {
  display: flex;
  justify-content: space-between;
  margin: 8px 16px;
  font-weight: 600;
}
.tumor-funktionskreis .tumor-element {
  color: #6b6b70;
  font-weight: 400;
}
.tumor-note,
.tumor-recommendation {
  margin: 8px 16px;
  color: #6b6b70;
  font-size: 14px;
  line-height: 1.4;
}

/* Tumortherapie – empfohlene Punkte in einer Reihe */
.tumor-points-heading {
  margin: 14px 16px 6px;
  font-size: 15px;
  font-weight: 600;
}
.tumor-points-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px 8px;
}
.tumor-point-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 1px solid #d0d0d5;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}
.tumor-point-pill:hover {
  background: #f0f0f3;
}
.tumor-point-pill .chevron {
  color: #b0b0b5;
  font-weight: 400;
}

/* =========================================================
   PULSE — Method menu (Global vs. By Position)
========================================================= */
.tone-indigo { background: rgba(63,81,181,0.14); color:#3f51b5; }

.pulse-method-content{
  padding: 8px 16px 24px;
  max-width: 760px;
  margin: 0 auto;
}
.pulse-method-intro{
  font-size: 14px;
  color: rgba(0,0,0,0.6);
  margin: 8px 0 12px;
  line-height: 1.4;
}
.pulse-method-divider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 0 0 16px;
}
.pulse-method-cards{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pulse-method-card{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  padding: 16px;
  min-height: 84px;
}
.pulse-method-card:hover{ background:#fafafa; }
.pulse-method-copy{ flex:1; min-width:0; }

/* =========================================================
   PULSE — Global assessment (Dr. Nell Ostermeier)
========================================================= */
.pulse-global-content{
  padding: 8px 16px 28px;
  max-width: 760px;
  margin: 0 auto;
}
.pulse-global-attribution{
  font-size: 13px;
  color: rgba(0,0,0,0.55);
  text-align: center;
  margin: 6px 0 10px;
}
.pulse-global-section{
  font-size: 16px;
  font-weight: 800;
  margin: 16px 0 8px;
}
.pulse-global-section-significance{ text-align:center; margin-top: 22px; }

.pulse-global-group{ margin-bottom: 14px; }
.pulse-global-group-title{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  margin: 12px 0 6px;
}

.pulse-global-quality{
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.pulse-global-quality:hover{ background: rgba(0,0,0,0.015); }
.pulse-global-quality.is-selected{
  border-color: rgba(244,67,54,0.5);
  background: rgba(244,67,54,0.04);
}
.pulse-global-quality-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pulse-global-quality-name{ font-size: 14px; font-weight: 700; }
.pulse-global-quality-check{ font-size: 20px; color: rgba(0,0,0,0.3); }
.pulse-global-quality.is-selected .pulse-global-quality-check{ color: #f44336; }
.pulse-global-quality-feeling{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin-top: 4px;
  line-height: 1.35;
}
.pulse-global-quality-significance{
  font-size: 13px;
  color: rgba(0,0,0,0.85);
  margin-top: 6px;
  line-height: 1.35;
}

.pulse-global-results{ margin-top: 8px; }
.pulse-global-none{
  text-align: center;
  color: rgba(0,0,0,0.45);
  font-size: 14px;
}
.pulse-global-result{ margin-bottom: 10px; }
.pulse-global-result-label{
  font-size: 12px;
  color: rgba(0,0,0,0.55);
}
.pulse-global-result-dx{
  font-size: 14px;
  color: rgba(0,0,0,0.9);
  line-height: 1.35;
}

/* =========================================================
   RECHNUNGEN (invoice) — Editor, Übersicht, Patient-Badge, Druck
========================================================= */

/* ---- Editor ---- */
.invoice-page { overflow-x: hidden; }
.invoice-page .content.invoice-editor { max-width: 720px; margin: 0 auto; padding-bottom: 40px; box-sizing: border-box; width: 100%; }
.inv-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px;
}
.inv-card-title { font-size: 1.02rem; font-weight: 700; color: #374151; margin-bottom: 10px; }
.inv-input, .inv-textarea {
  width: 100%; border: 1px solid #d1d5db; border-radius: 10px; padding: 11px 12px;
  font-size: 1.08rem; box-sizing: border-box; font-family: inherit;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #fff; color: #111827; margin: 0; outline: none; line-height: 1.4;
}
.inv-input:focus, .inv-textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.inv-hint { font-size: 0.9rem; color: #6b7280; margin: 0; }
.inv-field-row { display: flex; gap: 14px; }
.inv-field-row .inv-field { flex: 1; min-width: 0; }
.inv-field label { display: block; font-size: 0.88rem; font-weight: 600; color: #374151; margin-bottom: 6px; }

/* Einheitlicher vertikaler Rhythmus: jeder Block in einer Karte bekommt
   denselben Abstand nach unten (letzter ohne). */
.inv-card > .inv-input,
.inv-card > .inv-textarea,
.inv-card > .inv-field-row,
.inv-card > .inv-hint,
.inv-card > .inv-sender-view { margin-bottom: 14px; }
.inv-card > *:last-child { margin-bottom: 0; }

/* Positionen */
.inv-items-head, .inv-item-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px 56px 90px 66px 84px 24px; gap: 8px; align-items: center;
}
.inv-items-head { font-size: 0.8rem; color: #6b7280; font-weight: 600; margin-bottom: 6px; padding: 0 2px; }
.inv-items-head span:nth-child(3), .inv-items-head span:nth-child(4), .inv-items-head span:nth-child(5), .inv-items-head span:nth-child(6) { text-align: right; }
.inv-item-row { margin-bottom: 8px; }
.inv-item-row input, .inv-item-row select {
  border: 1px solid #d1d5db; border-radius: 8px; padding: 9px; font-size: 1rem; box-sizing: border-box;
  -webkit-appearance: none; appearance: none; background: #fff; font-family: inherit; width: 100%; min-width: 0;
}
.inv-item-row select.inv-item-type {
  padding-right: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.inv-item-row input.inv-item-qty, .inv-item-row input.inv-item-price, .inv-item-row input.inv-item-tax { text-align: right; }
/* Zweite Zeile unter der Bezeichnung (z. B. Dosierung einer Kräuterformel).
   Rutscht im Grid automatisch unter das Bezeichnungsfeld. */
.inv-item-row input.inv-item-note {
  grid-column: 1 / 2; font-size: 0.88rem; padding: 6px 9px; color: #4b5563;
  border-style: dashed; margin-top: -2px;
}
.inv-item-line { text-align: right; font-size: 1rem; font-weight: 600; color: #111827; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inv-item-remove {
  border: 0; background: transparent; color: #9ca3af; cursor: pointer; font-size: 1rem; padding: 4px;
}
.inv-item-remove:hover { color: #ef4444; }
.inv-add-item {
  margin-top: 4px; border: 1px dashed #cbd5e1; background: #f8fafc; color: #2563eb;
  border-radius: 10px; padding: 9px 14px; cursor: pointer; font-size: 0.98rem; font-weight: 600;
}
.inv-add-item:hover { background: #eef2ff; }

/* Summen */
.inv-totals { margin-top: 14px; border-top: 1px solid #e5e7eb; padding-top: 10px; }
.inv-total-line { display: flex; justify-content: space-between; font-size: 1.02rem; color: #374151; padding: 3px 0; }
.inv-total-grand { font-size: 1.18rem; font-weight: 800; color: #111827; border-top: 1px solid #e5e7eb; margin-top: 6px; padding-top: 8px; }

/* Aktionen */
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
/* Computer-Ansicht: alle Aktions-Buttons (inkl. Speichern) in einer Reihe. */
@media (min-width: 768px) {
  .inv-actions { flex-wrap: wrap; align-items: center; gap: 6px; }
  .inv-actions .inv-btn { white-space: nowrap; padding: 11px 13px; flex: 0 0 auto; }
}
.inv-btn { border-radius: 10px; padding: 11px 18px; font-size: 1rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.inv-btn-primary { background: #0a84ff; color: #fff; }
.inv-btn-primary:hover { background: #0067cc; }
.inv-btn-ghost { background: #fff; color: #374151; border-color: #d1d5db; }
.inv-btn-ghost:hover { background: #f3f4f6; }
.inv-btn-danger { background: #fff; color: #ef4444; border-color: #fecaca; }
.inv-btn-danger:hover { background: #fef2f2; }
.inv-meta-foot { text-align: right; font-size: 0.78rem; color: #9ca3af; margin-top: 8px; }

/* Status-Pill */
.inv-status-pill { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.inv-status-pill.is-open { background: #fff7ed; color: #c2410c; }
.inv-status-pill.is-paid { background: #ecfdf5; color: #047857; }
.inv-status-pill.is-overdue { background: #fef2f2; color: #b91c1c; }

/* ---- Übersicht ---- */
.invoices-overview-page .content { max-width: 720px; margin: 0 auto; }
.inv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.inv-kpi { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px 16px; text-align: center; }
.inv-kpi-label { font-size: 0.8rem; color: #6b7280; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.inv-kpi-value { font-size: 1.6rem; font-weight: 800; color: #111827; margin-top: 8px; letter-spacing: -.01em; }
.inv-kpi-open .inv-kpi-value { color: #c2410c; }
.inv-kpi-paid .inv-kpi-value { color: #047857; }
.inv-filter { display: flex; gap: 8px; margin-bottom: 12px; }
.inv-filter-btn { border: 1px solid #d1d5db; background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: #374151; cursor: pointer; }
.inv-filter-btn.is-active { background: #0a84ff; color: #fff; border-color: #0a84ff; }
.inv-list { display: flex; flex-direction: column; gap: 8px; }
.inv-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 14px;
  text-decoration: none; color: inherit;
}
.inv-row:hover { border-color: #cbd5e1; background: #f9fafb; }
.inv-row-main { min-width: 0; }
.inv-row-top { display: flex; align-items: center; gap: 8px; }
.inv-row-number { font-weight: 700; color: #111827; }
.inv-row-sub { font-size: 0.82rem; color: #6b7280; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; }
.inv-row-amount { font-weight: 800; color: #111827; white-space: nowrap; }
.inv-empty { text-align: center; color: #9ca3af; padding: 28px 0; }

/* Toast */
.inv-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 0.9rem; z-index: 2000; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 90vw; text-align: center;
}

/* Patient-Badge: offene Rechnung */
.patient-open-invoice {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa;
  border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; font-weight: 700; text-decoration: none;
}
.patient-open-invoice:hover { background: #ffedd5; }
.patient-open-invoice ion-icon { font-size: 14px; }

/* ---- Druck / PDF ---- */
.invoice-print { display: none; }
.inv-doc { color: #111827; font-size: 13px; line-height: 1.5; }
.inv-doc-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.inv-doc-sender { font-size: 12px; }
.inv-doc-title { text-align: right; }
.inv-doc-title h2 { margin: 0 0 6px; font-size: 20px; }
.inv-doc-recipient { margin: 24px 0 8px; }
.inv-doc-patient { color: #374151; margin-bottom: 16px; font-weight: 600; }
.inv-doc-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.inv-doc-table th, .inv-doc-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; }
.inv-doc-table th.num, .inv-doc-table td.num { text-align: right; }
/* Zusatzzeile einer Position (z. B. Dosierung) — kleiner und grau. */
.inv-doc-table td .item-note { font-size: 0.85em; color: #6b7280; margin-top: 2px; line-height: 1.35; }
.inv-doc-totals { margin-top: 12px; margin-left: auto; width: 260px; }
.inv-doc-totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.inv-doc-totals .grand { border-top: 2px solid #111827; margin-top: 6px; padding-top: 8px; font-weight: 800; font-size: 15px; }
.inv-doc-notes { margin-top: 24px; padding-top: 12px; border-top: 1px solid #e5e7eb; color: #374151; }
.inv-doc-reminder-note { margin-top: 16px; font-weight: 700; color: #b91c1c; }
.inv-doc .muted { color: #6b7280; }

@media print {
  body * { visibility: hidden !important; }
  #inv-print-area, #inv-print-area * { visibility: visible !important; }
  #inv-print-area { display: block !important; position: absolute; left: 0; top: 0; width: 100%; padding: 24px; }
}

/* Absender-Anzeige (aus Profil) im Rechnungs-Editor */
.inv-card-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.inv-card-link { font-size: 0.88rem; font-weight: 600; color: #2563eb; text-decoration: none; white-space: nowrap; }
.inv-card-link:hover { text-decoration: underline; }
.inv-sender-view { font-size: 1.05rem; color: #111827; line-height: 1.55; }
.inv-sender-view strong { display: block; }

/* Rechnungs-Editor: enge Handy-Bildschirme (Positionen dürfen nicht überlaufen) */
@media (max-width: 480px) {
  .invoice-page .content.invoice-editor { padding-left: 12px; padding-right: 12px; }
  .invoices-overview-page .content { padding-left: 12px; padding-right: 12px; }
  .inv-card { padding: 12px 12px; }
  /* Handy: Kopfzeile ausblenden, Position als kompakte Karte stapeln. */
  .inv-items-head { display: none; }
  .inv-item-row {
    grid-template-columns: 1fr 1fr auto; gap: 6px 8px; align-items: center;
    grid-template-areas:
      "desc  desc  desc"
      "type  qty   rm"
      "price tax   line";
    border: 1px solid #eef0f3; border-radius: 10px; padding: 8px; background: #fff;
  }
  .inv-item-row .inv-item-desc { grid-area: desc; }
  .inv-item-row .inv-item-type { grid-area: type; }
  .inv-item-row .inv-item-qty { grid-area: qty; }
  .inv-item-row .inv-item-remove { grid-area: rm; justify-self: center; }
  .inv-item-row .inv-item-price { grid-area: price; }
  .inv-item-row .inv-item-tax { grid-area: tax; }
  .inv-item-row .inv-item-line { grid-area: line; }
  .inv-item-row input, .inv-item-row select { padding: 8px 6px; font-size: 0.9rem; }
  .inv-item-line { font-size: 0.85rem; }
  .inv-input, .inv-textarea { font-size: 1rem; padding: 10px; }
  .inv-total-line { font-size: 0.95rem; }
  .inv-total-grand { font-size: 1.05rem; }
  .inv-actions { justify-content: stretch; }
  .inv-actions .inv-btn { flex: 1 1 auto; }
  .inv-kpis { gap: 6px; }
  .inv-kpi { padding: 14px 8px; }
  .inv-kpi-value { font-size: 1.05rem; }
}

/* =========================================================
   MOBILE SIDEBAR DRAWER (Off-Canvas)
   ---------------------------------------------------------
   Auf dem Handy blendet der Menü-Button oben links (#topbar-left)
   die Desktop-Seitenleiste als Overlay-Panel ein. Die untere
   Navigationsleiste (MobileBottomNav) wird dafür entfernt.
   Wird von setupMobileSidebarDrawer() in app.js gesteuert
   (Body-Klasse `mobile-sidebar-open`).
========================================================= */

/* Menü-Button standardmässig ausgeblendet (nur auf dem Handy sichtbar). */
#mobileSidebarToggle {
  display: none;
}

/* Abdunkelnder Hintergrund hinter dem eingeschobenen Panel. */
#mobileSidebarOverlay {
  position: fixed;
  inset: 0;
  z-index: 1900;
  background: rgba(15, 23, 42, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
body.mobile-sidebar-open #mobileSidebarOverlay {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 899px) {
  /* Menü-Button einblenden. */
  #mobileSidebarToggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #0f172a;
    cursor: pointer;
    flex: none;
    -webkit-tap-highlight-color: transparent;
  }
  #mobileSidebarToggle ion-icon {
    font-size: 26px;
  }
  #mobileSidebarToggle:active {
    background: #f1f5f9;
  }

  /* Untere Navigationsleiste komplett entfernen. */
  #mobileBottomNavRoot,
  .mobile-bottom-nav-shell {
    display: none !important;
  }
  body.mobile-bottom-nav-active #app {
    padding-bottom: 0 !important;
  }

  /* Desktop-Seitenleiste als einschiebbares Panel (Drawer) nutzbar machen.
     Überschreibt die bestehenden `display:none`-Regeln weiter oben. */
  #desktopSidebarRoot {
    display: block !important;
  }
  .desktop-sidebar-shell {
    display: flex !important;
    width: min(86vw, 300px);
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 2000;
    /* Bei mehr Einträgen als Platz: Panel scrollbar machen und unten Raum
       für die iOS-Safari-Leiste / den Home-Indicator lassen. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* Die Kinder duerfen NICHT schrumpfen. Auf kurzen Bildschirmen (iPhone mit
     Safari-Leiste) passte der Inhalt sonst nicht und Flexbox stauchte den
     Arten-Regler von 36 px auf 8 px zusammen - er hat overflow:hidden, also
     waren die Arten nur noch als Streifen sichtbar und nicht antippbar.
     Mit flex:0 0 auto laeuft der Inhalt ueber und das Panel scrollt (siehe
     overflow-y: auto darueber), so wie es gedacht war. */
  .desktop-sidebar-shell > * {
    flex: 0 0 auto;
  }
  body.mobile-sidebar-open .desktop-sidebar-shell {
    transform: translateX(0);
    box-shadow: 12px 0 40px rgba(15, 23, 42, .28);
  }

  /* Hintergrund-Scrollen sperren, solange das Panel offen ist. */
  body.mobile-sidebar-open {
    overflow: hidden;
  }
}

/* Desktop-Seitenleiste scrollbar machen, wenn der Inhalt höher als der
   Bildschirm ist. Logo (oben) und Profil (unten) bleiben fixiert, nur die
   Navigation in der Mitte scrollt – so wird das Profil unten nicht mehr
   abgeschnitten. Der mobile Drawer (max-width: 899px) hat seine eigene
   Scroll-Regel und bleibt davon unberührt. */
@media (min-width: 900px) {
  .desktop-sidebar-shell {
    /* Fallback: Sollte die Flex-Aufteilung aus irgendeinem Grund nicht
       greifen (Nav scrollt nicht), scrollt wenigstens die ganze Leiste,
       statt Eintraege unerreichbar abzuschneiden. */
    overflow-x: hidden;
    overflow-y: auto;
  }
  .desktop-sidebar-brand,
  .desktop-sidebar-species,
  .desktop-sidebar-user {
    flex: none;
  }
  .desktop-sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Der aktive Eintrag hat einen Marker (::after) 10px rechts ausserhalb
       des Links. In einem Scroll-Container zaehlt das als horizontaler
       Ueberlauf -> es erschien ein horizontaler Scrollbalken, der unten
       Platz frisst und das vertikale Scrollen blockiert hat.
       padding-right schafft genau diesen Platz INNERHALB des Containers
       (Marker bleibt optisch an derselben Stelle), overflow-x: hidden ist
       die Absicherung. */
    padding-right: 10px;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }
}

/* --- Akupunkturpunkte (MOBILE, <=767px): Medial-Hinweis + Quelle ans ENDE
   der Punktbeschreibung, nur wenn ein Punkt gewaehlt ist. Desktop (>=768px)
   bleibt unveraendert (Hinweise unter dem Bild, Beschreibung rechts). --- */
.acu-footnote-mobile { display: none; }
@media (max-width: 767px) {
  .acupuncture-page .image-section .acu-footnote { display: none; }
  .acupuncture-page [id$="ointDetails"]:not(:empty) ~ .acu-footnote-mobile { display: block; }
}

/* Mobile (<=767px): Diagnose-/Symptom-Auswahl als natives Dropdown wie in der
   iOS-App; auf dem Desktop bleiben die Chips. */
.western-select{ display:none; }
@media (max-width:767px){
  .western-chip, .pig-cond-tab{ display:none !important; }
  .western-select{
    display:block; width:100%; max-width:520px; flex:1 1 100%;
    margin:8px 0 4px; font-size:1rem; padding:11px 12px;
    border:1px solid #cbd5e1; border-radius:12px; background:#fff;
    color:#111827; line-height:1.3;
  }
}


/* Blocksatz für alle Punktbeschreibungen (Lokalisation/Indikationen etc.),
   alle Spezies: Atlas + Joint/Influential/Master/XiCleft (#pointDetails) sowie
   Western-Syndrome/Leitsymptome/Musculoskeletal (.wsk-detail). Letzte Zeile
   linksbündig statt gedehnt; Silbentrennung reduziert große Wortlücken. */
#pointDetails p,
#bovPointDetails p,
.wsk-detail p {
  text-align: justify;
  text-align-last: left;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* =========================================================
   MITTLERE FENSTERBREITEN: Punkteset-Seiten mit Bild + Liste
   (Meisterpunkte, Xi-Spalt, Einflusspunkte)

   Die beiden Spalten waren fix gesetzt (650px + 420px, dazu Gap und
   Padding ≈ 1160px). Zwischen 769px und dieser Breite passte das nicht
   mehr ins Fenster: die Liste rutschte rechts aus dem sichtbaren Bereich
   und war nicht erreichbar, weil die Seite nur vertikal scrollt.
   Jetzt teilen sich Bild und Liste den vorhandenen Platz.
========================================================= */
@media (min-width: 769px) and (max-width: 1200px) {
  .master-page .content,
  .xi-cleft-page .content,
  .influential-page .content {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
  }

  .master-page .image-section,
  .xi-cleft-page .image-section,
  .influential-page .image-section,
  .master-page #pointList,
  .xi-cleft-page #pointList,
  .influential-page #pointList,
  .master-page .image-frame,
  .xi-cleft-page .image-frame,
  .influential-page .image-frame {
    min-width: 0;
    max-width: 100%;
  }
}

/* =========================================================
   „BEFUNDE LEEREN" (Shu / Mu / Zunge / Puls)
   Mülleimer-Knopf in der Kopfzeile, IMMER links vom Speichern-Knopf
   (Jf, 27.8.2026). Nur Symbol — der Titel/aria-label trägt den Text,
   damit die Kopfzeile auf dem Handy nicht bricht. Löscht ohne Rückfrage.
========================================================= */
/* Der Mülleimer sitzt in der bestehenden `.topbar-actions`-Gruppe (siehe oben:
   absolut rechts, Flex) — links vom Speichern-Knopf. Die Gruppe neutralisiert
   `.text-btn`/`.icon-btn` bereits; der Speichern-Knopf braucht es zusätzlich,
   weil `.topbar .dx-save-btn` sonst absolut auf right:12px läge. */
.topbar-actions .dx-save-btn,
.top-bar .topbar-actions .dx-save-btn{
  position:static;
  transform:none;
  right:auto;
}

.dx-clear-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  color:#dc2626;
  font-family:inherit;
  font-size:20px;
  line-height:1;
  padding:0;
  border-radius:9px;
  cursor:pointer;
}
.dx-clear-btn:hover{ background:rgba(220,38,38,0.08); }
.dx-clear-btn:active{ background:rgba(220,38,38,0.16); }
.dx-clear-btn ion-icon{ font-size:20px; }

/* Punktvorschläge aus der Hunde-Palpation stehen seit 2.9.2026 in derselben
   Karte wie die Muster-Punkte (vorher zweiter Abschnitt gleichen Titels weiter
   oben). Abgesetzt durch eine feine Linie + Zwischenüberschrift. */
.summary-suggested-palpation {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}
.summary-suggested-subhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  margin-bottom: 6px;
}
.summary-suggested-palpation-note {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.45;
  color: #64748b;
}

/* =========================================================
   iPhone: kein automatisches Hineinzoomen beim Tippen.
   Safari zoomt in jedes Eingabefeld mit Schrift < 16 px und zoomt
   danach nicht zurück — die Seite ist dann vergrössert und lässt
   sich (overflow-x: hidden) nicht mehr seitlich verschieben.
   Auf dem Handy daher alle Felder mindestens 16 px.
========================================================= */
@media (max-width: 768px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* 🩹 Zusammenfassung auf dem Handy (Jf 21.09.2026): Ein langer Eintrag im
   Patienten-Dropdown („Name · Halter:in (Tierart)") machte .summary-content
   breiter als den Bildschirm – wegen margin:auto schrumpft der Block nicht
   auf die Bildschirmbreite, sondern wächst auf die Mindestbreite des Inhalts.
   width:100% + min-width:0 bindet ihn an die Bildschirmbreite. */
.summary-page .summary-content {
  width: 100%;
  min-width: 0;
}
.summary-page .summary-content > *,
.summary-page .summary-card select,
.summary-page .summary-card textarea {
  min-width: 0;
  max-width: 100%;
}

/* Aktions-Buttons unten: auf schmalen Screens 2×2-Raster
   (Speichern | Fakturieren / An Halter:in | Bericht an Zuweiser:in). */
@media (max-width: 600px) {
  .summary-save-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .summary-save-row .summary-save-btn,
  .summary-save-row .summary-invoice-btn {
    width: 100%;
    min-width: 0;
    justify-content: center;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }
  .summary-save-row .summary-save-btn ion-icon,
  .summary-save-row .summary-invoice-btn ion-icon {
    flex: 0 0 auto;
  }
}

/* ⚡ Elektroakupunktur-Paare in „Verwendete Punkte" (Zusammenfassung) */
.summary-ea-block { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e2e8f0; display: flex; flex-direction: column; gap: 6px; }
.summary-ea-title { font-size: 12px; font-weight: 700; color: #92400e; }
.summary-ea-pair { display: flex; align-items: center; gap: 4px; }
.summary-ea-pair-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; text-align: left; padding: 5px 9px; border: 1px solid #f59e0b; border-radius: 6px; background: #fffbeb; color: #1e293b; font-size: 12px; cursor: pointer; }
.summary-ea-pair.is-editing .summary-ea-pair-body { background: #fef3c7; }
.summary-ea-pair-points { font-family: ui-monospace, monospace; font-weight: 600; }
.summary-ea-pair-settings { color: #92400e; font-weight: 600; }
.summary-ea-pair-remove { border: none; background: transparent; color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px; }
.summary-ea-add { align-self: flex-start; padding: 5px 10px; border: 1px dashed #f59e0b; border-radius: 6px; background: transparent; color: #92400e; font-size: 12px; font-weight: 600; cursor: pointer; }
.summary-ea-editor { padding: 10px; border: 1px solid #f59e0b; border-radius: 8px; background: #fffbeb; display: flex; flex-direction: column; gap: 8px; }
.summary-ea-editor-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
.summary-ea-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: #475569; }
.summary-ea-field input, .summary-ea-field select { font-size: 13px; padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1e293b; }
.summary-ea-field input[data-ea-hz] { width: 90px; }
.summary-ea-field input[data-ea-min] { width: 70px; }
.summary-ea-point-pick { display: flex; gap: 4px; }
.summary-ea-link { font-size: 16px; color: #92400e; padding-bottom: 6px; }
.summary-ea-editor-hint { font-size: 11px; color: #64748b; }
.summary-ea-editor-error { font-size: 12px; color: #b91c1c; }
.summary-ea-editor-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.summary-ea-btn { padding: 5px 12px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #1e293b; font-size: 12px; cursor: pointer; }
.summary-ea-btn-primary { background: #f59e0b; border-color: #f59e0b; color: #fff; font-weight: 600; }
.summary-ea-add[disabled] { opacity: .5; cursor: not-allowed; }

/* =========================================================
   PRAXIS-PAKET: NAVIGATION ALS LEISTE OBEN
   ---------------------------------------------------------
   KK arbeitet auf einem breiten Bildschirm und will die volle Breite für
   Terminplan und Fallliste. Die bestehende Seitenleiste wird deshalb —
   nur für Praxis-Konten (body.practice-topnav, gesetzt in
   DesktopSidebar.js) und nur ab 900 px — zur waagerechten Leiste oben.

   Bewusst reine CSS-Umstellung: dieselbe Navigation, dieselben Links,
   dieselben Rechte. Ohne die Klasse bleibt alles, wie es war.
========================================================= */
@media (min-width: 900px) {
  body.practice-topnav .desktop-sidebar-shell {
    flex-direction: row;
    align-items: center;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--practice-topnav-h, 62px);
    padding: 0 18px;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    overflow: visible;
  }

  body.practice-topnav .desktop-sidebar-brand {
    flex: none;
    padding: 0;
    border-bottom: 0;
  }
  body.practice-topnav .desktop-sidebar-brand { gap: 9px; border-radius: 999px; padding: 4px 10px 4px 4px; }
  body.practice-topnav .desktop-sidebar-brand:hover { background: #f1f5f9; }
  body.practice-topnav .desktop-sidebar-logo { width: 34px; height: 34px; border-radius: 10px; box-shadow: none; }
  body.practice-topnav .desktop-sidebar-brand-name { font-size: 16px; font-weight: 700; }
  body.practice-topnav .desktop-sidebar-brand-subtitle { display: none; }

  /* Die Einträge laufen waagerecht; passt nicht alles hin, wird gescrollt
     (ohne sichtbare Leiste), statt Einträge abzuschneiden. */
  body.practice-topnav .desktop-sidebar-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  body.practice-topnav .desktop-sidebar-nav::-webkit-scrollbar { display: none; }

  /* Einträge als Pillen — der aktive ist ausgefüllt, ohne Strich darunter. */
  body.practice-topnav .desktop-sidebar-link {
    flex: none;
    min-height: 38px;
    padding: 9px 14px;
    gap: 8px;
    border-radius: 999px;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
  }
  body.practice-topnav .desktop-sidebar-link > span { overflow: visible; }
  /* In der Leiste nur Text — die Symbole verdoppeln die Beschriftung und
     kosten Platz (Wunsch KK, 26.09.2026). */
  body.practice-topnav .desktop-sidebar-link ion-icon { display: none; }
  body.practice-topnav .desktop-sidebar-link:hover { background: #f1f5f9; color: #0f172a; }
  body.practice-topnav .desktop-sidebar-link.is-active {
    background: #e8f1ff;
    color: #0a66d8;
    font-weight: 700;
  }
  /* Der Marker gehörte zur Seitenleiste (Strich rechts daneben). */
  body.practice-topnav .desktop-sidebar-link.is-active::after { display: none; }

  /* Keine Trennlinien in der Leiste — nur etwas Luft an ihrer Stelle. */
  body.practice-topnav .desktop-sidebar-divider {
    flex: none;
    width: 0;
    height: 0;
    margin: 0 5px;
    border: 0;
  }

  /* Arten-Umschalter in der oberen Leiste. Er erscheint ohnehin nur, wenn im
     Profil mehr als eine Tierart sichtbar geschaltet ist — bei einer reinen
     Kleintierpraxis (KK) zeichnet er sich gar nicht erst. Eine Praxis mit
     Kleintier UND Pferd braucht ihn dagegen genau hier: dort entscheidet er,
     worauf Diagnostik, Punkteset und Punktatlas zeigen (Wunsch Jf, 03.10.2026).
     In der Leiste liegt er flach in EINER Zeile, nicht gestapelt. */
  body.practice-topnav .desktop-sidebar-species { display: none; }

  /* Praxis mit mehreren Tierarten: Regler flach in EINER Zeile in der Leiste.
     Dort entscheidet er, worauf Diagnostik, Punkteset und Punktatlas zeigen. */
  body.practice-topnav.practice-topnav-species .desktop-sidebar-species {
    display: flex;
    flex: none;
    flex-direction: row;
    margin: 0 8px 0 4px;
    align-self: center;
  }
  body.practice-topnav .desktop-sidebar-species-row { gap: 0; }
  body.practice-topnav .desktop-sidebar-species-btn {
    flex: none;
    padding: 6px 12px;
    font-size: 12.5px;
  }

  /* Rechts aussen: rundes Bild, Name klein daneben. */
  body.practice-topnav .desktop-sidebar-user {
    flex: none;
    gap: 8px;
    padding: 4px 6px 4px 4px;
    border-radius: 999px;
    border: 0;
    background: transparent;
  }
  body.practice-topnav .desktop-sidebar-user:hover { background: #f1f5f9; }
  body.practice-topnav .desktop-sidebar-user-avatar { width: 34px; height: 34px; font-size: 13px; }
  body.practice-topnav .desktop-sidebar-user-copy { max-width: 150px; }
  body.practice-topnav .desktop-sidebar-user-name { font-size: 13px; }
  body.practice-topnav .desktop-sidebar-user-plan { font-size: 10px; }

  /* Inhalt: volle Breite, nur nach unten gerückt. */
  body.practice-topnav.desktop-sidebar-active #app,
  body.practice-topnav.desktop-sidebar-active #topbar {
    width: 100%;
    margin-left: 0;
    margin-top: var(--practice-topnav-h, 62px);
  }
}

/* =========================================================
   PRAXIS-EINSTELLUNGEN: Spalte links, Bereich rechts
   (Wunsch KK, 26.09.2026 — Vorbild Digitail)
   Nur auf dieser Seite; ohne Praxis-Paket ist sie gar nicht erreichbar.
========================================================= */
.ps-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  width: 100%;
}
.ps-menu {
  flex: 0 0 236px;
  position: sticky;
  top: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.ps-panels { flex: 1 1 auto; min-width: 0; }
.ps-tab {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  margin: 2px 0;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}
.ps-tab:hover { background: #f1f5f9; }
.ps-tab.is-active { background: #e6f1ff; color: #0a84ff; }

@media (max-width: 900px) {
  .ps-layout { flex-direction: column; }
  .ps-menu {
    position: static;
    flex: none;
    width: 100%;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    box-sizing: border-box;
  }
  .ps-tab { width: auto; white-space: nowrap; }
}

/* =========================================================
   BENACHRICHTIGUNGEN (Praxis-Einstellungen)
   Zeile: Beschreibung links, rechts die Spalten „Persönlich" und
   „Praxis" mit je einem Schalter für App und E-Mail.
========================================================= */
.nf-group { margin-top: 18px; }
.nf-group-head {
  font-size: 13px; font-weight: 700; color: #0f172a;
  background: #f1f5f9; border-radius: 8px; padding: 8px 12px;
}
.nf-row {
  display: flex; align-items: flex-end; gap: 18px;
  padding: 12px 2px; border-bottom: 1px solid #f1f5f9;
}
.nf-label { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #0f172a; line-height: 1.4; }
.nf-scope { flex: none; text-align: center; }
.nf-scope-head { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 4px; }
.nf-cells { display: flex; gap: 10px; }
.nf-cell { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; position: relative; }
.nf-icon { font-size: 17px; color: #64748b; display: inline-flex; }
.nf-switch { position: absolute; opacity: 0; width: 0; height: 0; }
.nf-track {
  width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1;
  position: relative; transition: background .15s ease; flex: none;
}
.nf-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s ease;
}
.nf-switch:checked + .nf-track { background: #0e7490; }
.nf-switch:checked + .nf-track::after { transform: translateX(16px); }
.nf-switch:focus-visible + .nf-track { outline: 2px solid #0a84ff; outline-offset: 2px; }
.nf-switch:disabled + .nf-track { opacity: .45; }
.nf-cell:has(.nf-switch:disabled) { cursor: not-allowed; }

@media (max-width: 720px) {
  .nf-row { flex-wrap: wrap; gap: 10px; }
  .nf-label { flex: 1 1 100%; }
}

/* =========================================================
   GLOCKE (Praxis) — obere Leiste, neben der Kontokarte
========================================================= */
.pb-wrap { position: relative; display: none; }
body.practice-topnav .pb-wrap { display: inline-flex; align-items: center; margin-right: 6px; }
.pb-btn {
  position: relative; border: none; background: transparent; cursor: pointer;
  width: 38px; height: 38px; border-radius: 10px; font-size: 20px; color: #334155;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-btn:hover { background: #f1f5f9; }
.pb-badge {
  position: absolute; top: 4px; right: 3px; min-width: 17px; padding: 0 4px;
  border-radius: 9px; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.pb-panel {
  position: absolute; top: 44px; right: 0; width: 340px; max-height: 420px; overflow: auto;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12); z-index: 60;
}
.pb-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid #f1f5f9;
  font-size: 13px; font-weight: 700; color: #0f172a;
}
.pb-allread { border: none; background: transparent; color: #0a84ff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.pb-item { display: block; padding: 10px 12px; border-bottom: 1px solid #f8fafc; text-decoration: none; }
.pb-item:hover { background: #f8fafc; }
.pb-item.is-new { background: #f0f7ff; }
.pb-item-title { display: block; font-size: 13px; font-weight: 600; color: #0f172a; }
.pb-item-body { display: block; font-size: 12px; color: #475569; margin-top: 2px; }
.pb-item-time { display: block; font-size: 11px; color: #94a3b8; margin-top: 2px; }
.pb-empty { padding: 16px 12px; font-size: 13px; color: #94a3b8; text-align: center; }

/* =========================================================
   AUSWERTUNGEN: Zeitraum links, Zahlen rechts
   (Wunsch KK — gleiche Aufteilung wie die Praxis-Einstellungen)
========================================================= */
.rp-layout { display: flex; gap: 18px; align-items: flex-start; width: 100%; }
.rp-side {
  flex: 0 0 236px;
  position: sticky;
  top: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  box-sizing: border-box;
}
.rp-main { flex: 1 1 auto; min-width: 0; }
.rp-presets { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 12px; }
.rp-preset {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; font-weight: 600;
  color: #334155; cursor: pointer;
}
.rp-preset:hover { background: #f8fafc; }
.rp-preset.is-active { background: #0a84ff; border-color: #0a84ff; color: #fff; }
.rp-exports { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
.rp-export {
  border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
  padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 600;
  color: #0a84ff; cursor: pointer; text-align: left;
}
.rp-export:hover { background: #f8fafc; }
.rp-side input[type="date"] { width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
  .rp-layout { flex-direction: column; }
  .rp-side { position: static; flex: none; width: 100%; }
  .rp-presets { flex-direction: row; flex-wrap: wrap; }
  .rp-preset { width: auto; }
  .rp-exports { flex-direction: row; flex-wrap: wrap; }
}

/* Falldatum + „Von letzter Sitzung übernehmen" in EINER Zeile (Jf, 03.10.2026).
   Schmale Bildschirme: Beschriftung ausblenden (bleibt für Screenreader),
   Knopf mit Kurztext. */
.summary-date-row { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.summary-date-label { font-size:13px; color:#64748b; margin:0; white-space:nowrap; }
.summary-copy-last-btn { margin-left:auto; white-space:nowrap; flex:0 0 auto; }
.summary-copy-last-short { display:none; }
@media (max-width: 480px) {
  .summary-date-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .summary-copy-last-long { display:none; }
  .summary-copy-last-short { display:inline; }
}

/* 💧 Aqua-Akupunktur — gleiche Bausteine wie EA, in Blau (Jf, 04.10.2026). */
.summary-aq-title { color: #0369a1; }
.summary-aq-row .summary-ea-pair-body { border-color: #38bdf8; background: #f0f9ff; }
.summary-aq-row.is-editing .summary-ea-pair-body { background: #e0f2fe; }
.summary-aq-add { border-color: #38bdf8; color: #0369a1; }
.summary-aq-editor { border-color: #38bdf8; background: #f0f9ff; }
.summary-aq-btn-primary { background: #0284c7; border-color: #0284c7; }
/* Aqua-AP-Einträge kompakt wie die Punkt-Chips (Jf, 04.10.2026). */
.summary-aq-row { align-self: flex-start; }
.summary-aq-row .summary-ea-pair-body { flex: none; padding: 4px 8px; }

/* EA / Aqua-AP: Titel und Hinzufügen-Knopf in einer Zeile (Jf, 04.10.2026). */
.summary-ea-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.summary-ea-head .summary-ea-add { align-self: auto; }

/* Aktionsknöpfe: Speichern + Fakturieren oben, Halter + Zuweiser darunter. */
.summary-save-row-break { flex-basis: 100%; height: 0; }
@media (max-width: 600px) { .summary-save-row-break { display: none; } }

/* Der Patientenname in der Fallliste ist ein echter Link, damit Cmd-Klick
   und Mittelklick ihn in einem neuen Tab oeffnen. Aussehen bleibt wie der
   Text davor — blau unterstrichen wuerde die Kachel unruhig machen. */
.saved-case-tile-link {
  color: inherit;
  text-decoration: none;
}
.saved-case-tile-link:hover { text-decoration: underline; }