/* Erzählte Karte
   Ziel: die Karte füllt das Gerät, alles andere legt sich unaufdringlich darüber.
   Farbwelt seit 2026-07-22 aus dem XD-Prototyp (prototype/): Türkis #2bbec9 ist
   die Bedienfarbe, Orange #f6871f steht für Land-POIs/Navi, Rot bleibt Gefahr
   und Aufnahme. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;          /* kein Pull-to-Refresh beim Kartenziehen */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* 100dvh statt 100vh: sonst schiebt die iOS-Adressleiste die Karte an. */
#map {
  position: absolute;
  inset: 0;
  height: 100dvh;
  width: 100%;
  background: #dfe6ea;
}

/* --- Statusband ------------------------------------------------------- */

.status {
  position: absolute;
  top: max(env(safe-area-inset-top), 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;

  max-width: min(92vw, 34rem);
  padding: 0.45rem 0.9rem;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.92);
  color: #14303f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);

  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: opacity 0.4s ease;
  pointer-events: none;                /* nie im Weg beim Kartenziehen */
}

.status[hidden] { display: none; }
.status.faded   { opacity: 0; }
.status.error   { background: #b3261e; color: #fff; }

/* --- Haftungshinweis --------------------------------------------------- */

.disclaimer {
  position: absolute;
  left: max(env(safe-area-inset-left), 8px);
  right: max(env(safe-area-inset-right), 8px);
  /* über der MapLibre-Attribution, die unten rechts sitzt */
  bottom: calc(max(env(safe-area-inset-bottom), 6px) + 1.6rem);
  z-index: 10;

  padding: 0.4rem 0.7rem;
  border-radius: 0.5rem;

  background: rgba(255, 255, 255, 0.86);
  color: #33424a;
  font-size: 0.7rem;
  line-height: 1.3;
  text-align: center;

  pointer-events: none;
}

.disclaimer strong { color: #14303f; }

/* --- Dunkelmodus ------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  #map { background: #17242b; }

  .status {
    background: rgba(22, 34, 41, 0.94);
    color: #e8eef1;
  }

  .disclaimer {
    background: rgba(22, 34, 41, 0.86);
    color: #b9c6cd;
  }

  .disclaimer strong { color: #e8eef1; }
}

/* Bedienelemente von MapLibre etwas größer — Finger, nicht Mauszeiger. */
.maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
}

/* --- Leisten oben und unten --------------------------------------------
   Handy-Befund 2026-07-22: seitliche Werkzeuge fressen Kartenbreite. Oben
   verwalten (Windrose · Neu · Teilen · Ort), unten die Daumenzone
   (Weg · Zurück · Aufnehmen, nach der Aufnahme der Player). */

.topbar {
  position: absolute;
  z-index: 12;
  left: 0; right: 0; top: 0;

  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: calc(max(env(safe-area-inset-top), 6px) + 4px) 10px 8px;

  background: #2bbec9;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.topbar[hidden] { display: none; }
.topbar-spacer { flex: 1; }

.bar-btn {
  padding: 0.55rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bar-btn:active { transform: scale(0.95); }
a.bar-btn { display: inline-flex; align-items: center; text-decoration: none; }
.bar-btn.primary { background: #fff; color: #0e7780; }
.bar-btn:disabled { opacity: 0.5; }

/* Das Ungeschützt-Badge hängt unter dem Teilen-Knopf, solange kein Konto da ist. */
.bar-btn.primary { position: relative; }

.share-badge {
  position: absolute;
  bottom: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: #f6871f;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

.share-badge[hidden] { display: none; }

/* Ort-Knopf, während er zuhört: rot und pulsierend wie die Aufnahme. */
.bar-btn.listening {
  background: #b3261e;
  color: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}

.counter {
  min-width: 26px;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bottombar {
  position: absolute;
  z-index: 12;
  left: 0; right: 0; bottom: 0;

  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem 10px calc(max(env(safe-area-inset-bottom), 8px));

  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
}

.bottombar[hidden] { display: none; }

.main-row { display: flex; gap: 0.5rem; }

.bar-tool {
  flex: 1;
  padding: 0.5rem 0.2rem;
  border: none;
  border-radius: 0.9rem;
  background: #eef2f4;
  color: #14303f;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;

  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bar-tool:active { transform: scale(0.95); }
.bar-tool.active { background: #2bbec9; color: #fff; }

.tool-icon  { font-size: 1.25rem; line-height: 1; }
.tool-label { font-size: 0.62rem; letter-spacing: 0.02em; }

/* Aufnehmen bleibt der größte Knopf der Reihe. */
.main-row .rec { flex: 1.5; justify-content: center; border-radius: 0.9rem; box-shadow: none; }

.player-row { display: flex; gap: 0.5rem; }

.pbtn {
  flex: 1;
  padding: 0.55rem 0.3rem;
  border: none;
  border-radius: 0.9rem;
  background: #eef2f4;
  color: #14303f;
  font-family: inherit;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pbtn:active { transform: scale(0.95); }

/* Abspielen so groß und griffig wie Aufnehmen — gleiche Geste, gleiche Zone. */
.pbtn.play-big { flex: 1.5; background: #2bbec9; color: #fff; font-size: 1.25rem; }

.bottombar .disclaimer {
  position: static;
  background: none;
  box-shadow: none;
  padding: 0;
  font-size: 0.62rem;
  color: #6b7b84;
}

/* Windrose schwebt beim Sender frei über der Karte, direkt unter der oberen
 * Leiste (seit 2026-08-05 — vorher sass sie in der Leiste und nahm dem
 * Benutzer-Knopf den Platz). */
body:not(.viewer) .windrose {
  top: calc(var(--bar-oben, 64px) + 8px);
}

/* Statusband unter die obere Leiste; Karten-Regler über die untere.
 * Die Leistenhöhen werden in app.js gemessen (--bar-oben/--bar-unten),
 * damit nichts einen Knopf verdeckt — egal ob der Player offen ist. */
body:not(.viewer) .status { top: calc(var(--bar-oben, 64px) + 8px); }

body:not(.viewer) .maplibregl-ctrl-bottom-left,
body:not(.viewer) .maplibregl-ctrl-bottom-right { bottom: calc(var(--bar-unten, 120px) + 8px); }

/* Die OSM-Attribution bleibt unten an der Leiste — die Knopf-Gruppen (Zoom,
 * Ortung) rücken eine Etage darüber, damit die aufgeklappte Attribution
 * nichts verdeckt. */
body:not(.viewer) .maplibregl-ctrl-bottom-left .maplibregl-ctrl-group,
body:not(.viewer) .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group { margin-bottom: 2.6rem; }

/* Zoom (links) und Ortung (rechts) auf exakt gleicher Höhe: Die Attribution
 * kommt aus dem Stapel (absolut an die Leistenkante), sonst schiebt sie den
 * Ortungsknopf höher, als der Zoom links sitzt (iPhone-Befund 2026-08-05). */
body:not(.viewer) .maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
}

/* Im Zeichenmodus soll klar sein, dass die Karte gerade nicht zieht. */
#map.drawing { cursor: crosshair; }
#map.drawing canvas { touch-action: none; }

/* --- Typwahl ----------------------------------------------------------- */

.scrim {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.25);
}

.sheet {
  position: absolute;
  z-index: 21;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.9rem 0.9rem calc(max(env(safe-area-inset-bottom), 0.9rem) + 0.3rem);

  background: #fff;
  border-radius: 1.1rem 1.1rem 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.25);

  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.sheet.open { transform: translateY(0); }

.sheet-title {
  font-size: 0.82rem;
  color: #5b6b75;
  text-align: center;
  margin-bottom: 0.7rem;
}

.sheet-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.type-btn {
  border: 2px solid transparent;
  border-radius: 0.7rem;
  padding: 0.55rem 0.2rem;
  background: #f2f5f7;
  color: #14303f;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;

  font-family: inherit;
  font-size: 0.65rem;
  -webkit-tap-highlight-color: transparent;
}

.type-btn:active { border-color: var(--c); }

.type-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG-Icons bringen ihren eigenen Kreis mit — kein farbiger Hintergrund. */
.type-icon.type-img { background: transparent; }
.type-icon.type-img img { display: block; width: 30px; height: 30px; }

.sheet-play, .sheet-delete {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.55rem;
  border: none;
  border-radius: 0.7rem;
  background: #f2f5f7;
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.sheet-play { color: #0e7780; margin-top: 0.7rem; }
.sheet-play[hidden] { display: none; }
.sheet-delete { color: #b3261e; }

/* --- Erst-Start-Hinweis ------------------------------------------------- */

.hinweis {
  position: absolute;
  z-index: 22;                          /* über Scrim (20) und Sheet (21) */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(88vw, 22rem);
  padding: 1.1rem 1.1rem 0.9rem;

  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hinweis.open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.hinweis[hidden] { display: none; }

.hinweis-titel {
  font-size: 0.95rem;
  font-weight: 700;
  color: #b3261e;
  margin-bottom: 0.5rem;
}

.hinweis p {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #33424a;
}

.hinweis strong { color: #b3261e; }

.hinweis-ok {
  width: 100%;
  padding: 0.65rem;
  border: none;
  border-radius: 0.7rem;
  background: #2bbec9;
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hinweis-ok:active { transform: scale(0.97); }

.hinweis-konto {
  display: block;
  margin-top: 0.55rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0e7780;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .bottombar { background: rgba(22, 34, 41, 0.96); }
  .hinweis { background: #16222b; }
  .hinweis p { color: #b9c6cd; }
  .hinweis strong { color: #ff8a80; }
  .hinweis-titel { color: #ff8a80; }
  .hinweis-konto { color: #7adfe8; }
  .bar-tool, .pbtn { background: #22323c; color: #e8eef1; }
  .bar-tool.active, .pbtn.play-big { background: #2bbec9; color: #fff; }
  .bottombar .disclaimer { color: #93a3ad; }

  .sheet { background: #16222b; }
  .sheet-title { color: #93a3ad; }

  .type-btn {
    background: #22323c;
    color: #e8eef1;
  }

  .sheet-play, .sheet-delete { background: #22323c; }
  .sheet-play { color: #7adfe8; }
  .sheet-delete { color: #ff8a80; }
}

/* --- Konto-Seite -------------------------------------------------------
   Eigene, scrollende Seite (konto.html) — kein Karten-Layout. Alles unter
   body.konto, damit sich nichts mit der App beisst. */

body.konto {
  height: auto;
  min-height: 100dvh;
  background: #f4f7f8;
  color: #14303f;
  -webkit-font-smoothing: antialiased;
}

.konto-kopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: calc(max(env(safe-area-inset-top), 6px) + 8px) 16px 12px;
  background: #2bbec9;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.konto-kopf h1 { margin: 0; font-size: 1.15rem; }

.konto-zurueck {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.konto-inhalt {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1rem 14px calc(max(env(safe-area-inset-bottom), 12px) + 1rem);
}

/* Fester Toast statt Zeile im Fluss: Die Antwort auf einen Knopfdruck muss da
 * erscheinen, wo man gerade hinschaut - nicht am oberen Seitenrand, der auf
 * dem Handy laengst aus dem Bild gescrollt ist (iPhone-Befund 2026-08-05). */
.konto-status {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(env(safe-area-inset-bottom), 12px) + 10px);
  z-index: 50;
  width: min(92vw, 26rem);
  padding: 0.65rem 0.9rem;
  border-radius: 0.7rem;
  background: #0e7780;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.konto-status.fehler { background: #b3261e; color: #fff; }

.konto-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.konto-tab {
  flex: 1;
  padding: 0.55rem;
  border: none;
  border-radius: 999px;
  background: #e4ebee;
  color: #14303f;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.konto-tab.active { background: #2bbec9; color: #fff; }

.konto-hinweis {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #33424a;
  margin: 0 0 1rem;
}

.konto-hinweis strong { color: #0e7780; }

body.konto label {
  display: block;
  margin-bottom: 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #33424a;
}

body.konto input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid #c6d2d8;
  border-radius: 0.6rem;
  background: #fff;
  color: #14303f;
  font-family: inherit;
  font-size: 1rem;              /* 16px: iOS zoomt sonst ins Feld */
}

body.konto input:focus {
  outline: none;
  border-color: #2bbec9;
  box-shadow: 0 0 0 3px rgba(43, 190, 201, 0.2);
}

.konto-klein { font-weight: 400; font-size: 0.72rem; color: #6b7b84; }

.feld-mit-knopf {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.feld-mit-knopf input { flex: 1; }

.wuerfel {
  margin-top: 0.3rem;
  padding: 0 0.8rem;
  border: none;
  border-radius: 0.6rem;
  background: #2bbec9;
  font-size: 1.2rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wuerfel:active { transform: scale(0.94); }

body.konto fieldset {
  margin: 0 0 0.85rem;
  padding: 0;
  border: none;
}

body.konto legend {
  padding: 0;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #33424a;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chip {
  padding: 0.4rem 0.7rem;
  border: 1.5px solid #c6d2d8;
  border-radius: 999px;
  background: #fff;
  color: #33424a;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chip.active {
  background: #2bbec9;
  border-color: #2bbec9;
  color: #fff;
  font-weight: 600;
}

.feld-paar { display: flex; gap: 0.6rem; }
.feld-paar label { flex: 1; }

#reg-mehr { margin-bottom: 0.9rem; }

#reg-mehr summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0e7780;
  padding: 0.4rem 0;
}

#reg-mehr[open] summary { margin-bottom: 0.7rem; }

.konto-primaer {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 0.7rem;
  background: #2bbec9;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.konto-primaer:active { transform: scale(0.98); }
.konto-primaer:disabled { opacity: 0.6; }

.konto-sekundaer {
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.65rem;
  border: none;
  border-radius: 0.7rem;
  background: #e4ebee;
  color: #b3261e;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.konto-karte {
  margin-bottom: 1rem;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;                     /* Hintergrundbild endet an der Rundung */
}

.konto-hintergrund {
  height: 84px;
  background: linear-gradient(120deg, #2bbec9, #7adfe8);
  background-size: cover;
  background-position: center;
}

.konto-kopfzeile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem 0.4rem;
}

.konto-bild {
  width: 56px;
  height: 56px;
  flex: none;
  margin-top: -32px;                    /* haengt halb im Hintergrundbild */
  border-radius: 50%;
  border: 3px solid #fff;
  background: #e4ebee center/cover no-repeat;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.konto-bild-knoepfe {
  display: flex;
  gap: 0.5rem;
  padding: 0.3rem 1rem 0.9rem;
}

.konto-upload {
  margin: 0;                            /* schlaegt die label-Grundregel */
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: #e4ebee;
  font-size: 0.72rem;
  font-weight: 600;
  color: #33424a;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.konto-spitzname { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.15rem; }

.konto-meine { padding: 0.9rem 1rem; }

.konto-meine h2 { margin: 0 0 0.4rem; font-size: 0.95rem; }

.konto-meine ul {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
}

.konto-meine li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid #e4ebee;
  font-size: 0.8rem;
}

.karten-aktionen { display: flex; gap: 0.5rem; align-items: center; }

.karten-aktionen a {
  color: #0e7780;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.78rem;
}

.karten-aktionen button {
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: #e4ebee;
  color: #14303f;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.konto-sekundaer.export { color: #0e7780; margin-top: 0.2rem; }

@media (prefers-color-scheme: dark) {
  .konto-meine li { border-top-color: #22323c; }
  .karten-aktionen a { color: #7adfe8; }
  .karten-aktionen button { background: #22323c; color: #e8eef1; }
  .konto-sekundaer.export { color: #7adfe8; }
}

.konto-link {
  margin-top: 0.2rem;
  padding: 0;
  border: none;
  background: none;
  color: #0e7780;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .konto-link { color: #7adfe8; }
}

@media (prefers-color-scheme: dark) {
  body.konto { background: #101a20; color: #e8eef1; }
  .konto-status { background: #123a3e; color: #7adfe8; }
  .konto-status.fehler { background: #3a1512; color: #ff8a80; }
  .konto-tab { background: #22323c; color: #e8eef1; }
  .konto-tab.active { background: #2bbec9; color: #fff; }
  .konto-hinweis { color: #b9c6cd; }
  .konto-hinweis strong { color: #7adfe8; }
  body.konto label, body.konto legend { color: #b9c6cd; }
  body.konto input { background: #16222b; border-color: #3a4b55; color: #e8eef1; }
  .konto-klein { color: #7d8d97; }
  .chip { background: #16222b; border-color: #3a4b55; color: #b9c6cd; }
  .chip.active { background: #2bbec9; border-color: #2bbec9; color: #fff; }
  #reg-mehr summary { color: #7adfe8; }
  .konto-sekundaer { background: #22323c; color: #ff8a80; }
  .konto-karte { background: #16222b; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
  .konto-bild { border-color: #16222b; background-color: #22323c; }
  .konto-upload { background: #22323c; color: #b9c6cd; }
}

/* --- Hauptaktion: aufnehmen ------------------------------------------- */

.rec {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 999px;
  background: #b3261e;
  color: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
  font-family: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rec:active { transform: scale(0.96); }
.rec.recording { background: #14303f; }

.rec-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
}

.rec-square {
  width: 12px; height: 12px;
  border-radius: 2px;
  background: #ff6b6b;
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.35; } }

.rec-label { font-variant-numeric: tabular-nums; }

/* --- Empfänger-Ansicht -------------------------------------------------- */

.viewer-bar {
  position: absolute;
  z-index: 12;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(env(safe-area-inset-bottom), 8px) + 2.6rem);

  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: min(94vw, 30rem);
}

.play, .navi {
  flex: 1;
  padding: 0.8rem 1rem;
  border: none;
  border-radius: 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
  -webkit-tap-highlight-color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.play { background: #2bbec9; color: #fff; }
.play:disabled { opacity: 0.55; }
/* Orange wie der Parkplatz-Marker: der Navi-Knopf führt genau dorthin. */
.navi { background: #f6871f; color: #fff; }

.legend {
  position: absolute;
  z-index: 11;
  top: max(env(safe-area-inset-top), 8px);
  left: max(env(safe-area-inset-left), 8px);

  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-width: 60vw;
  transition: opacity 0.6s ease;
}

.legend.dim { opacity: 0.35; }

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem 0.2rem 0.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #14303f;
  font-size: 0.65rem;
}

.legend-item i {
  width: 17px; height: 17px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.legend-item i.legend-img { background: transparent; }
.legend-item i.legend-img img { display: block; width: 17px; height: 17px; }

/* Auf der Empfängerseite sitzt das Statusband tiefer - oben liegt die Legende. */
body.viewer .status { top: auto; bottom: calc(max(env(safe-area-inset-bottom), 8px) + 7.4rem); }

@media (prefers-color-scheme: dark) {
  .legend-item { background: rgba(22, 34, 41, 0.92); color: #e8eef1; }
}

/* --- Windrose (Standard-Windrichtung des Spots) ------------------------- */

.windrose {
  position: absolute;
  z-index: 12;
  top: max(env(safe-area-inset-top), 8px);
  right: max(env(safe-area-inset-right), 8px);

  width: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;

  padding: 0.3rem 0.3rem 0.25rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}

.windrose[hidden] { display: none; }
.windrose svg { width: 42px; height: 42px; display: block; }

.wr-ring {
  fill: none;
  stroke: #b7c4cc;
  stroke-width: 3;
}

.wr-n {
  fill: #5b6b75;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  font-family: inherit;
}

/* Kein transform-origin hier! Die Rotation kommt als SVG-Attribut
 * rotate(deg 32 32) mit eigenem Drehpunkt — ein CSS-Origin obendrauf
 * verschiebt sie und drehte den Pfeil aus dem Bild (Strandtest 22.07.). */
.wr-arrow { fill: #f6871f; }
.wr-arrow line { stroke: #f6871f; stroke-width: 4.5; stroke-linecap: round; }

.wr-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #14303f;
  letter-spacing: 0.03em;
}

/* Auf der Aufnahme-Seite ist die Rose antippbar; leer wird sie zum Hinweis. */
body:not(.viewer) .windrose { cursor: pointer; }
.windrose.unset { opacity: 0.72; }
.windrose.unset .wr-label { color: #8a9aa4; }
.windrose.setting { outline: 2px solid #2bbec9; outline-offset: 1px; }

/* Empfänger-Seite: oben rechts sitzen Zoom- und Ortungsknopf — Rose klar darunter. */
body.viewer .windrose { top: calc(max(env(safe-area-inset-top), 8px) + 132px); }

@media (prefers-color-scheme: dark) {
  .windrose { background: rgba(22, 34, 41, 0.9); }
  .wr-ring { stroke: #3a4b55; }
  .wr-n { fill: #93a3ad; }
  .wr-label { color: #e8eef1; }
  .windrose.unset .wr-label { color: #7d8d97; }
}