/* Momenta – Patienten-Handy (Kiosk, Hochformat)
   Große Schrift, riesige Touch-Ziele, kein Scrollen auf dem Heute-Screen,
   analoge Metaphern, warme Ruhe. Alles spielt sich im Telefon-Rahmen ab. */

html,
body {
  height: 100%;
}

body {
  font-size: 20px;
  line-height: 1.4;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
}

.telefon {
  position: relative;
  width: min(400px, 100vw);
  height: min(860px, 100dvh);
  background: var(--bg);
  overflow: hidden;
  /* Der Heute-Screen darf nie scrollen. Damit er auf kurzen Handys genauso
     aufgeht wie auf hohen, messen seine Größen in cqh – Prozent der
     Gerätehöhe – statt in festen Pixeln. */
  container-type: size;
  container-name: geraet;
}

@media (min-width: 480px) {
  .telefon {
    border-radius: 46px;
    border: 11px solid #2b2b28;
    box-shadow: 0 26px 70px rgba(43, 43, 40, 0.32);
    height: 860px;
  }
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}

.screen.is-active {
  display: flex;
  animation: screen-ein var(--t-med) var(--ease-out);
}

@keyframes screen-ein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ─── Heute-Screen: fester Tagesbogen ─── */

.screen--heute {
  padding: 22px 20px 16px;
}

.tag-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sprechbar {
  text-align: left;
  border-radius: var(--radius-m);
  padding: 6px 10px;
  transition: background var(--t-fast) var(--ease-out);
}

.sprechbar:active {
  background: var(--surface-2);
}

.tag-datum {
  display: flex;
  flex-direction: column;
}

.tag-name {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
}

.tag-rest {
  font-size: 18px;
  color: var(--ink-soft);
}

.tag-kopf-rechts {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tag-uhr {
  display: flex;
  align-items: center;
  gap: 9px;
}

.zifferblatt {
  width: 52px;
  height: 52px;
}

.zb-ring { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.zb-striche line { stroke: var(--ink-soft); stroke-width: 2.5; stroke-linecap: round; }
.zb-std { stroke: var(--ink); stroke-width: 5.5; stroke-linecap: round; }
.zb-min { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.zb-nabe { fill: var(--ink); }

.uhr-digital {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tag-wetter {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wetter-symbol { width: 40px; height: 40px; }
.wetter-grad { font-size: 19px; font-weight: 700; }

.tag-lage {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: var(--radius-m);
}

/* Mitte: nächster Termin groß, die zwei danach als ruhige Vorschau */

.tag-mitte {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(8px, 1.6cqh, 14px);
  min-height: 0;
  overflow: hidden;
  padding: clamp(6px, 1.4cqh, 12px) 0;
}

.besuch-karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(7px, 1.4cqh, 12px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: clamp(12px, 2cqh, 18px) 20px clamp(14px, 2.5cqh, 22px);
  width: 100%;
  flex: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.besuch-karte:active {
  transform: scale(0.985);
  box-shadow: var(--shadow-press);
}

.besuch-foto {
  width: clamp(92px, 14.5cqh, 124px);
  height: clamp(92px, 14.5cqh, 124px);
  object-fit: cover;
  border-radius: 22px;
}

/* „Danach“: kleiner und blasser – trägt nie die Hauptinformation */

.danach[hidden] { display: none; }

.danach-titel {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: 4px;
  margin-bottom: clamp(4px, 0.9cqh, 7px);
}

.danach-liste {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1cqh, 8px);
}

.danach-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: clamp(6px, 1cqh, 8px) 12px clamp(6px, 1cqh, 8px) clamp(6px, 1cqh, 8px);
  transition: transform var(--t-fast) var(--ease-out);
}

.danach-zeile:active { transform: scale(0.98); }

.danach-zeile img {
  width: clamp(44px, 6cqh, 52px);
  height: clamp(44px, 6cqh, 52px);
  border-radius: 12px;
  object-fit: cover;
  flex: none;
}

.danach-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.danach-was {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.danach-wann {
  font-size: 15px;
  color: var(--ink-soft);
}

.besuch-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.besuch-tag {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.besuch-ueberschrift {
  font-size: clamp(25px, 3.5cqh, 30px);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.besuch-detail {
  font-size: clamp(17px, 2.3cqh, 20px);
  color: var(--ink-soft);
  text-wrap: balance;
}

/* Die 4 Foto-Knöpfe */

.knopf-leiste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.foto-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(5px, 1cqh, 8px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: clamp(9px, 1.4cqh, 12px) 6px clamp(8px, 1.3cqh, 11px);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.foto-knopf:active {
  transform: scale(0.96);
  box-shadow: var(--shadow-press);
}

.knopf-bild {
  height: clamp(46px, 6.5cqh, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.knopf-bild--fotos,
.knopf-bild--personen {
  position: relative;
  width: 72px;
}

.knopf-bild--fotos img,
.knopf-bild--personen img {
  position: absolute;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 7px rgba(43, 43, 40, 0.22);
}

.knopf-bild--fotos img:first-child { border-radius: 6px; transform: rotate(-7deg); left: 2px; top: 4px; }
.knopf-bild--fotos img:last-child { border-radius: 6px; transform: rotate(6deg); right: 2px; top: 2px; }
.knopf-bild--personen img { border-radius: 50%; }
.knopf-bild--personen img:first-child { left: 4px; top: 3px; }
.knopf-bild--personen img:last-child { right: 4px; top: 7px; }
.knopf-bild--symbol svg { width: 54px; height: 54px; }

.knopf-label {
  font-size: 17px;
  font-weight: 700;
}

/* Abendmodus (Sundowning): wärmer, ruhiger + sanfter Vorschlag */

.telefon.is-abend .screen--heute {
  background: linear-gradient(180deg, #f2e5d3, #ecdcc3);
}

.abend-vorschlag {
  align-self: center;
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border: 1px solid rgba(91, 138, 114, 0.3);
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease-out);
}

.abend-vorschlag:active { transform: scale(0.97); }
.abend-vorschlag[hidden] { display: none; }

/* Abends nimmt der Vorschlag den Platz der zweiten Vorschau-Zeile ein.
   Der Heute-Screen darf nie scrollen – und abends zählt der Vorschlag mehr
   als der übernächste Termin. */
.telefon.is-abend .danach-zeile:nth-child(2) { display: none; }

.abend-vorschlag--medi {
  color: var(--warn-deep);
  background: var(--warn-soft);
  border-color: rgba(201, 123, 74, 0.35);
}

/* Notfall-Zeile */

.notfall-zeile {
  display: flex;
  justify-content: center;
  padding: clamp(7px, 1.4cqh, 12px) 0 2px;
}

.notfall-info {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 6px 10px;
  border-radius: 999px;
  text-align: center;
  line-height: 1.35;
}

/* ─── Kalender: ein Tag = ein durchgeplanter Bogen, Tage unten wechselbar ─── */

.screen--kalender {
  padding: 20px 18px 0;
}

.kalender-kopf {
  text-align: center;
  flex: none;
  margin-bottom: 12px;
}

.screen-titel {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

.kalender-datum {
  font-size: 17px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.tagesplan {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 6px;
  /* Die Zeitachse: eine ruhige Linie, an der der Tag entlangläuft */
  background: linear-gradient(var(--line), var(--line)) 60px 0 / 2px 100% no-repeat;
}

.plan-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  transition: transform var(--t-fast) var(--ease-out);
}

.plan-karte:active { transform: scale(0.985); }

.plan-zeit {
  width: 52px;
  flex: none;
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  padding-right: 4px;
}

.plan-inhalt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 10px;
  margin-left: 10px;
}

.plan-bild {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
}

.plan-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.plan-titel { font-size: 22px; font-weight: 700; line-height: 1.12; }
.plan-person { font-size: 16px; color: var(--ink-soft); }

/* Medikamente gehören in den Tagesbogen, treten aber leiser auf */

.plan-karte--medi .plan-inhalt {
  background: var(--accent-soft);
  border-color: rgba(123, 167, 199, 0.4);
  box-shadow: none;
}

.plan-medi-bild {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid rgba(123, 167, 199, 0.45);
}

.plan-medi-bild svg { width: 44px; height: 44px; }

/* Erledigtes bleibt sichtbar (Tagesbogen!), tritt aber zurück */

.plan-karte--vorbei { opacity: 0.55; }
.plan-karte--vorbei .plan-inhalt { box-shadow: none; }

.plan-haken {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary-deep);
}

.plan-leer {
  margin: auto;
  text-align: center;
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-soft);
  padding: 24px;
}

/* Tagesleiste: unten, daumengroß, immer sichtbar */

.tag-leiste {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}

.tag-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 2px;
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.tag-chip:active { transform: scale(0.95); }

.tag-chip-name {
  font-size: 17px;
  font-weight: 700;
}

.tag-chip-punkte {
  display: flex;
  gap: 3px;
  height: 12px;
  align-items: center;
}

.tag-chip-punkte i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-soft);
  opacity: 0.5;
}

.tag-chip.is-gewaehlt .tag-chip-punkte i {
  background: var(--primary);
  opacity: 1;
}

.tag-chip.is-gewaehlt {
  background: var(--primary-soft);
  border-color: rgba(91, 138, 114, 0.4);
}

.tag-chip.is-gewaehlt .tag-chip-name { color: var(--primary-deep); }

/* Heim-Knopf (Kalender, Album, Musik, Anrufen) */

.heim-knopf {
  align-self: center;
  margin: 14px 0 20px;
  font-size: 22px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 34px;
  box-shadow: var(--shadow-soft);
  flex: none;
  transition: transform var(--t-fast) var(--ease-out);
}

.heim-knopf:active {
  transform: scale(0.96);
}

/* ─── Album ─── */

.screen--album {
  background: #201d19;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.album-seite {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 0;
  animation: album-blaettern 380ms var(--ease-out);
}

@keyframes album-blaettern {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

.album-seite.blaettert-zurueck {
  animation-name: album-blaettern-zurueck;
}

@keyframes album-blaettern-zurueck {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}

.album-foto {
  max-height: 46vh;
  max-width: 82%;
  border-radius: 8px;
  border: 8px solid #fdfbf6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.album-text {
  text-align: center;
  color: #f1e9da;
}

.album-titel {
  display: block;
  font-size: 26px;
  font-weight: 700;
}

.album-von {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 17px;
  color: #bdb2a0;
}

.album-von img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.album-pfeil {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  width: 52px;
  height: 92px;
  font-size: 46px;
  line-height: 1;
  color: #f1e9da;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-m);
  transition: background var(--t-fast) var(--ease-out);
}

.album-pfeil:active { background: rgba(255, 255, 255, 0.24); }
.album-pfeil--zurueck { left: 8px; }
.album-pfeil--weiter { right: 8px; }

.screen--album .heim-knopf {
  background: #fdfbf6;
  position: relative;
  z-index: 2;
}

/* ─── Musik: ein großer Knopf für „irgendwas Schönes“, darunter die Listen ─── */

.screen--musik {
  padding: 20px 18px 0;
}

/* Der Radio-Knopf: eine Handlung, ohne jede Entscheidung */

.musik-radio {
  flex: none;
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: 16px 20px;
}

.musik-knopf {
  border-radius: 50%;
  flex: none;
  transition: transform var(--t-fast) var(--ease-out);
}

.musik-knopf:active { transform: scale(0.94); }
.musik-play { width: 96px; height: 96px; display: block; }

.musik-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
}

.musik-status small {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Was gerade läuft */

.musik-laeuft {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  background: var(--primary-soft);
  border: 1px solid rgba(91, 138, 114, 0.3);
  border-radius: var(--radius-m);
  padding: 10px 16px;
}

.musik-laeuft[hidden] { display: none; }

.musik-laeuft-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--primary-deep);
}

.musik-laeuft-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.musik-laeuft-text small {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}

.musik-note {
  font-size: 24px;
  color: var(--primary-deep);
  animation: note-wippen 1.6s ease-in-out infinite;
  display: inline-block;
  flex: none;
}

@keyframes note-wippen {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Die Listen: Cover groß, Name darunter – ausgesucht wird nach Bild */

.musik-frage {
  flex: none;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 16px 0 10px;
  padding-left: 2px;
}

.playlist-raster {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 6px;
}

.playlist-kachel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 8px 8px 12px;
  transition: transform var(--t-fast) var(--ease-out);
}

.playlist-kachel:active { transform: scale(0.97); }

.playlist-kachel img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
}

.playlist-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  padding: 0 2px;
}

.playlist-hinweis {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.25;
  padding: 0 2px;
}

.playlist-kachel.is-aktiv {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft), var(--shadow-soft);
}

.playlist-kachel.is-aktiv .playlist-name::after {
  content: " ♪";
  color: var(--primary-deep);
}

/* ─── Anrufen (mit Hilfe-Notruf oben) ─── */

.screen--anrufen {
  padding: 22px 18px 0;
}

/* Selbsthilfe kommt vor dem Notruf: ruhig statt alarmierend (Salbei, nicht
   Terracotta) – Selbstständigkeit erhalten, bevor jemand gerufen wird. */

.wegfinder-knopf {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--primary-soft);
  border: 1.5px solid rgba(91, 138, 114, 0.35);
  border-radius: var(--radius-l);
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: transform var(--t-fast) var(--ease-out);
}

.wegfinder-knopf:active { transform: scale(0.98); }
.wegfinder-knopf-icon { font-size: 34px; flex: none; }

.wegfinder-knopf-text {
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: 700;
  color: var(--primary-deep);
}

.wegfinder-knopf-text small {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}

.hilfe-notruf {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--warn-soft);
  border: 1.5px solid rgba(201, 123, 74, 0.4);
  border-radius: var(--radius-l);
  padding: 16px 18px;
  transition: transform var(--t-fast) var(--ease-out);
}

.hilfe-notruf:active { transform: scale(0.98); }
.hilfe-notruf-icon { font-size: 38px; flex: none; }

.hilfe-notruf-text {
  display: flex;
  flex-direction: column;
  font-size: 24px;
  font-weight: 700;
  color: var(--warn-deep);
}

.hilfe-notruf-text small {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink-soft);
}

.anrufen-frage {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 20px 0 12px;
}

.anrufen-kacheln {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.anruf-kachel {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-soft);
  padding: 12px 16px;
  transition: transform var(--t-fast) var(--ease-out);
}

.anruf-kachel:active { transform: scale(0.98); }

.anruf-kachel img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.anruf-kachel .kachel-text {
  display: flex;
  flex-direction: column;
}

.anruf-kachel .kachel-name { font-size: 24px; font-weight: 700; }
.anruf-kachel .kachel-beziehung { font-size: 16px; color: var(--ink-soft); }

/* ─── Anruf-Overlay ─── */

.anruf-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}

.anruf-overlay[hidden] { display: none; }

/* ─── Wegfinder-Overlay ─── */

.wegfinder-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.wegfinder-overlay[hidden] { display: none; }

.wegfinder-frage {
  font-size: 22px;
  font-weight: 700;
}

.kompass {
  width: 190px;
  height: 190px;
  margin: 6px 0;
}

.kompass-rose { width: 100%; height: 100%; }
.kompass-ring { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.kompass-n { font-size: 9px; font-weight: 700; fill: var(--ink-soft); }

.kompass-pfeil-gruppe {
  transform-origin: 50px 50px;
  transition: transform 700ms var(--ease-out);
}

.kompass-pfeil { fill: var(--primary); }
.kompass-nabe { fill: var(--ink); }

.wegfinder-status {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  max-width: 26ch;
}

.wegfinder-detail {
  font-size: 17px;
  color: var(--ink-soft);
}

.wegfinder-detail[hidden] { display: none; }

.anruf-foto {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  animation: anruf-puls 1.8s ease-in-out infinite;
}

@keyframes anruf-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91, 138, 114, 0.35); }
  50% { box-shadow: 0 0 0 28px rgba(91, 138, 114, 0); }
}

.anruf-name { font-size: 28px; font-weight: 700; }
.anruf-hinweis { font-size: 17px; color: var(--ink-soft); }

.anruf-auflegen {
  margin-top: 16px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--warn);
  border-radius: 999px;
  padding: 15px 40px;
}

/* ─── Medikamenten-Overlay ─── */

.medi-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}

.medi-overlay[hidden] { display: none; }
.medi-zeit { font-size: 22px; color: var(--ink-soft); }
.medi-box svg { width: 220px; height: auto; }
.medi-text { font-size: 26px; line-height: 1.3; }

.medi-knopf {
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-l);
  padding: 22px 44px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.medi-knopf:active { transform: scale(0.97); background: var(--primary-deep); }

/* ─── Gerät koppeln (echter Betrieb, kein Login) ─── */

.screen--koppeln {
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px 24px;
  text-align: center;
}

.koppeln-karte {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: 28px 24px;
}

.koppeln-titel {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.koppeln-text {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin-bottom: 18px;
}

.koppeln-eingabe {
  width: 100%;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}

.koppeln-fehler {
  margin-top: 10px;
  font-size: 14px;
  color: var(--warn-deep);
}

.koppeln-knopf {
  margin-top: 16px;
  width: 100%;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--primary);
  border-radius: var(--radius-m);
  padding: 14px;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}

.koppeln-knopf:active { transform: scale(0.98); background: var(--primary-deep); }
.medi-knopf[hidden] { display: none; }
.medi-danke { font-size: 30px; font-weight: 700; color: var(--primary-deep); }

/* ─── Nacht-Modus ─── */

.nacht-schirm {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--night-bg);
  color: var(--night-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
}

.nacht-schirm[hidden] { display: none; }
.nacht-mond { width: 84px; height: 84px; opacity: 0.9; margin-bottom: 8px; }
.nacht-titel { font-size: 32px; font-weight: 700; }
.nacht-text { font-size: 22px; line-height: 1.5; color: #a99e8c; }
.nacht-uhr { margin-top: 18px; font-size: 20px; color: #7d7466; }

/* ─── Demo-Panel (nur Probeversion) ─── */

.demo-panel {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-toast);
  font-size: 14px;
}

.demo-toggle {
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  opacity: 0.45;
  transition: opacity var(--t-fast) var(--ease-out);
}

.demo-toggle:hover,
.demo-toggle:focus-visible {
  opacity: 1;
}

.demo-optionen {
  position: absolute;
  right: 0;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--ink);
  border-radius: var(--radius-m);
  padding: 10px;
  width: 250px;
  box-shadow: var(--shadow-soft);
}

.demo-optionen[hidden] { display: none; }

.demo-optionen button,
.demo-optionen a {
  color: var(--bg);
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
}

.demo-optionen button:hover,
.demo-optionen a:hover {
  background: rgba(250, 246, 239, 0.14);
}