/* ===== Design Tokens – aus den offiziellen iconili-Guidelines (200522_Iconili_Guidelines.pdf) ===== */
:root {
  --bg: #EFEFEF;
  --surface: #FFFFFF;
  --ink: #002043;       /* offizielles Navy */
  --ink-soft: #5C6B7C;
  --line: #DCE1E6;

  /* Kategorie-Farben – exakt aus der Projekt-Referenz (Iconili_App.pdf, S.4)
     übernommen und bleiben pro Kategorie IMMER gleich */
  --c-gesundheit: #38A6C6;    /* Hellblau */
  --c-hilfe: #071D39;         /* Navy */
  --c-freizeit: #E6BF05;      /* Gelb */
  --c-nahrung: #17A18E;       /* Tealgrün */
  --c-favoriten: #DD437A;     /* Pink (Akzentfarbe aus der Referenz) */
  --c-brand: #00978A;         /* Primär-Teal (UI-Chrome, Sprich-Button) */

  --radius-l: 28px;
  --radius-m: 18px;
  --radius-s: 12px;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --tile-min: 168px;
  --surface-strong: #F4F6F3;

  /* Responsive Skalen: klein auf dem Handy, komfortabel auf Tablet/Desktop */
  --space-page: clamp(12px, 3vw, 24px);
  --header-title: clamp(18px, 2.4vw, 24px);
}

/* Hinweis: Der Schwarz-Weiß-Modus tauscht die tatsächlichen Bilddateien aus
   (siehe symbolImg() in app.js) -- bewusst KEIN CSS-Graustufenfilter/-Klasse. */

/* Author-Styles wie ".detail-overlay { display:flex }" gewinnen laut CSS-
   Kaskade sonst gegen das Browser-Standardverhalten von [hidden] – darum
   hier explizit erzwingen, dass [hidden] IMMER "unsichtbar" bedeutet. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 980px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) var(--space-page) calc(env(safe-area-inset-bottom) + 12px);
}

/* =========================================================
   HOME: 4 Kacheln, analog zur Original-Vorlage – Formen OHNE
   Kachel-Hintergrund, kleines Icon + Label darunter
   ========================================================= */
.home-screen { flex: 1; display: flex; align-items: center; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.home-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 36px);
  max-width: 480px;
  margin: 0 auto;
  padding: clamp(8px, 4vh, 32px) 4px;
}
.home-tile {
  aspect-ratio: 1/1;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vh, 14px);
  cursor: pointer;
  transition: transform 100ms ease;
}
.home-tile:active { transform: scale(0.95); }
.home-tile-icon { width: 52%; aspect-ratio: 1/1; }
.home-tile-icon svg { width: 100%; height: 100%; }
.home-tile-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 3.2vw, 16px);
  color: var(--ink);
}
.home-tile-label svg { flex: 0 0 auto; }

/* =========================================================
   MENÜ: alle Ober-/Unterkategorien, Vollbild wie in der Referenz
   ========================================================= */
.menu-screen { flex: 1; padding-bottom: calc(78px + env(safe-area-inset-bottom)); overflow-y: auto; }
.menu-list { display: flex; flex-direction: column; }
.menu-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
}
.menu-top:not(:first-child) { margin-top: 4px; }
.menu-top-icon { width: 20px; height: 20px; object-fit: contain; filter: var(--icon-filter, brightness(0) invert(1)); }
.menu-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: color-mix(in srgb, var(--c-tint) 10%, white);
  color: var(--ink);
  padding: 14px 16px 14px 30px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.menu-sub-name { flex: 1; text-align: left; }
.menu-sub svg { color: var(--ink-soft); }

/* =========================================================
   UNTERKATEGORIE-RASTER: farbiger Header, transparente Illus
   ========================================================= */
.category-screen { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
.category-header {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--c-active, var(--c-brand));
  border-radius: var(--radius-l);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.category-header-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 4vw, 22px);
  color: #fff;
  flex: 1;
}
.cat-fav {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.22);
  display: grid; place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
}

/* =========================================================
   BOTTOM-NAV: Zurück / Suche / Kamera / Einstellungen / Menü
   Mobil/Tablet: gleichmäßig verteilt (wie Referenz).
   Desktop: rechtsbündig gruppiert.
   ========================================================= */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--surface);
  padding: 10px max(10px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(38,51,49,0.10);
  z-index: 20;
}
.bn-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.bn-btn:active { background: var(--bg); }
.bn-btn:disabled { opacity: 0.35; cursor: default; }
.bn-btn:disabled:active { background: transparent; }

@media (min-width: 860px) {
  .bottom-nav {
    justify-content: flex-end;
    gap: 6px;
    padding-right: max(24px, calc((100vw - 980px) / 2 + 24px));
  }
}

/* ===== Topbar ===== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 2px 10px;
}
.logo-btn { border: none; background: transparent; padding: 4px; cursor: pointer; line-height: 0; }
.brand-mark { display: block; }
.profile-btn {
  border: none; background: transparent; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.profile-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--ink); }
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--ink-soft);
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(38,51,49,0.08);
  cursor: pointer;
}
.icon-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ===== Satzleiste (Signature-Element) ===== */
.messagebar {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--radius-l);
  padding: 10px;
  box-shadow: 0 2px 10px rgba(38,51,49,0.08);
  margin-bottom: 14px;
  min-height: 76px;
}
.messagebar-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 8px;
  overflow: hidden;
}
.messagebar-placeholder {
  margin: 0;
  color: var(--ink-soft);
  font-size: 17px;
}
.bead {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  animation: pop 220ms cubic-bezier(.34,1.56,.64,1);
}
.bead .bead-icon {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.bead .bead-icon img { width: 70%; height: 70%; object-fit: contain; }
@keyframes pop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.messagebar-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.btn-clear, .btn-speak {
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
}
.btn-clear {
  width: 40px; height: 28px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-soft);
  display: grid; place-items: center;
  align-self: flex-end;
}
.btn-speak {
  height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.15);
}
.btn-speak.has-content { background: var(--c-brand); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 3px 0 rgba(0,0,0,0.15), 0 0 0 0 rgba(0,151,138,0.35); }
  50% { box-shadow: 0 3px 0 rgba(0,0,0,0.15), 0 0 0 8px rgba(0,151,138,0); }
}
.btn-speak:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.15); }

/* ===== Kategorien: Form + Farbe = Wiedererkennung (Legacy – ggf. ungenutzt) ===== */
.categories {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: none;
}
.categories::-webkit-scrollbar { display: none; }
.cat-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 10px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.cat-shape {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
}
.cat-shape img { width: 60%; height: 60%; object-fit: contain; }
.cat-btn[data-cat="freizeit"] .cat-shape { background: var(--c-freizeit); }
.cat-btn[data-cat="hilfe"] .cat-shape { background: var(--c-hilfe); }
.cat-btn[data-cat="nahrung"] .cat-shape { background: var(--c-nahrung); }
.cat-btn[data-cat="gesundheit"] .cat-shape { background: var(--c-gesundheit); }
.cat-btn.is-active { border-color: currentColor; }
.cat-btn[data-cat="freizeit"] { color: var(--c-freizeit); }
.cat-btn[data-cat="hilfe"] { color: var(--c-hilfe); }
.cat-btn[data-cat="nahrung"] { color: var(--c-nahrung); }
.cat-btn[data-cat="gesundheit"] { color: var(--c-gesundheit); }
.cat-btn.is-active[data-cat="freizeit"] { background: var(--c-freizeit-soft); }
.cat-btn.is-active[data-cat="hilfe"] { background: var(--c-hilfe-soft); }
.cat-btn.is-active[data-cat="nahrung"] { background: var(--c-nahrung-soft); }
.cat-btn.is-active[data-cat="gesundheit"] { background: var(--c-gesundheit-soft); }

/* ===== Symbol-Raster ===== */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: 14px;
  padding-bottom: calc(24px + 78px + env(safe-area-inset-bottom)); /* Platz für fixierte Bottom-Nav */
}
.grid.size-l { --tile-min: 140px; }
.grid.size-m { --tile-min: 112px; }

/* ===== Symbol-Raster: transparente Illustrationen, KEINE Kachel-Hintergründe
   -- Label+Herz oben, Illustration frei darunter (wie im Referenz-Screen
   "Gefühle": glücklich/ängstlich/traurig/wütend/lieb haben) ===== */
.grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px clamp(12px, 4vw, 28px);
  padding-bottom: calc(24px + 78px + env(safe-area-inset-bottom));
  align-content: start;
}
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr)); }
  .grid.size-l { --tile-min: 160px; }
  .grid.size-m { --tile-min: 130px; }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tile-labelrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(12px, 2.4vw, 14px);
  color: var(--ink-soft);
}
.tile-label { text-align: left; }
.tile-chevron {
  width: 22px; height: 22px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  opacity: 0.55;
}
.tile-chevron img { width: 70%; height: 70%; object-fit: contain; }
.tile-chevron.is-fav { opacity: 1; }

.tile-illustration {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  transition: transform 90ms ease;
}
.tile-illustration:active { transform: scale(0.94); }
.tile-illustration img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}

.grid-empty-hint {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
  padding: 40px 12px;
}

/* Body-Kachel (führt zum zweistufigen Körper-Screen) hebt sich leicht ab */
.tile.tile-body .tile-illustration { position: relative; }
.tile.tile-body .tile-illustration::after {
  content: "";
  position: absolute; inset: 6%;
  border: 2.5px dashed var(--c-gesundheit);
  border-radius: 18%;
}

/* ===== Offline-Hinweis ===== */
.offline-pill {
  position: fixed;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* ===== Einstellungen ===== */
.settings-dialog {
  border: none;
  border-radius: var(--radius-l);
  padding: 0;
  width: min(420px, 92vw);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.settings-dialog::backdrop { background: rgba(38,51,49,0.45); }
.settings-form { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.settings-form h2 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 20px;
}
fieldset { border: none; padding: 0; margin: 0; }
legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 0 0 8px;
}
.segmented { display: flex; gap: 6px; background: var(--bg); padding: 4px; border-radius: 999px; }
.seg-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-soft);
}
.seg-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.hint { font-size: 12px; color: var(--ink-soft); margin: 6px 0 0; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.switch-row input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--c-brand); flex: 0 0 auto; }
.btn-close-dialog {
  margin-top: 4px;
  border: none;
  background: var(--ink);
  color: #fff;
  padding: 14px;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

/* ===== Fokus-Sichtbarkeit (Tastatur/Zugriffshilfen) ===== */
:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
}

/* ===== Reduzierte Bewegung respektieren ===== */
@media (prefers-reduced-motion: reduce) {
  .bead, .btn-speak.has-content { animation: none; }
  .tile { transition: none; }
}

/* ===== Kleine Screens ===== */
@media (max-width: 420px) {
  .brand-name { font-size: 19px; }
  .btn-speak span { display: none; }
  .btn-speak { padding: 0 16px; }
}

/* =========================================================
   Detail-Overlay: Symbol groß + 3-Smiley-Reaktion
   (rekonstruiert aus den Original-Journeys: Sammlung/Favoriten)
   ========================================================= */
.detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(38, 51, 49, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
  animation: fadeIn 160ms ease;
}
@media (min-width: 640px) {
  .detail-overlay { align-items: center; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.detail-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: var(--radius-l) var(--radius-l) 0 0;
  padding: clamp(20px, 5vw, 36px) clamp(20px, 5vw, 32px) clamp(24px, 5vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-height: 92dvh;
  overflow-y: auto;
  animation: slideUp 220ms cubic-bezier(.22,1,.36,1);
}
@media (min-width: 640px) {
  .detail-card { border-radius: var(--radius-l); }
}
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.detail-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--ink-soft);
  display: grid; place-items: center;
  cursor: pointer;
}

.detail-icon {
  width: min(46vw, 220px);
  height: min(46vw, 220px);
  border-radius: 30%;
  display: grid;
  place-items: center;
  margin-top: 8px;
}
.detail-icon img { width: 72%; height: 72%; object-fit: contain; }

.detail-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 5vw, 26px);
  color: var(--ink);
  margin: 4px 0 0;
  text-align: center;
}
.detail-hint {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 6px;
  text-align: center;
}

.reaction-row {
  display: flex;
  gap: clamp(12px, 4vw, 22px);
  margin-top: 6px;
}
.reaction-btn {
  width: clamp(56px, 16vw, 76px);
  height: clamp(56px, 16vw, 76px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  transition: transform 120ms ease;
}
.reaction-btn:active { transform: scale(0.9); }
.reaction-btn svg { width: 100%; height: 100%; }
.reaction-yes { background: transparent; color: #2F9E6E; }
.reaction-neutral { background: transparent; color: #C98A1F; }
.reaction-no { background: transparent; color: #C2554F; }
.reaction-btn.is-chosen { transform: scale(1.12); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }

/* =========================================================
   Körper-Screen: Region wählen -> Schmerz-Skala
   ========================================================= */
.body-card { max-width: 420px; }

.bodypart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  margin: 4px 0 8px;
}
.bodypart-tile {
  aspect-ratio: 1/1;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}
.bodypart-tile:active { transform: scale(0.95); }
.bodypart-tile img { width: 68%; height: 68%; object-fit: contain; }
.bodypart-tile span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  text-align: center;
}

.body-region-preview {
  width: clamp(80px, 22vw, 110px);
  height: clamp(80px, 22vw, 110px);
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}
.body-region-preview img { width: 74%; height: 74%; object-fit: contain; }

.body-step-scale { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.body-region-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 4.5vw, 22px);
  margin: 0;
}
.pain-scale-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3vw, 16px);
  width: 100%;
}
.pain-face { width: clamp(34px, 9vw, 44px); height: clamp(34px, 9vw, 44px); object-fit: contain; flex: 0 0 auto; }
.pain-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2F9E6E, var(--c-hilfe), var(--c-gesundheit));
  outline: none;
}
.pain-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--ink);
  cursor: pointer;
}
.pain-slider::-moz-range-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 4px solid var(--ink);
  cursor: pointer;
}
.pain-scale-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  margin: 0;
}
.btn-body-confirm {
  width: 100%;
  border: none;
  background: var(--c-brand);
  color: #fff;
  padding: 14px;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  margin-top: 4px;
}
.btn-body-back {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 4px;
}

/* Body-Kachel in der Gesundheit-Kategorie hebt sich leicht ab (führt zum
   zweistufigen Körper-Screen statt der normalen Detailansicht) */
.tile.tile-body .tile-icon { position: relative; }
.tile.tile-body .tile-icon::after {
  content: "";
  position: absolute; inset: -4px;
  border: 2.5px dashed var(--c-gesundheit);
  border-radius: 24%;
}