/* Zusaetze zur gemeinsamen Anruf-Optik (anruf.css): Activity ist ein normaler Bildschirm, kein durchsichtiges Overlay. */
html, body { background: #070a10; overflow: hidden; user-select: none; }
#call { height: 100dvh; min-height: 0; width: 100%; max-width: none; padding-top: max(var(--pad), env(safe-area-inset-top)); padding-bottom: max(var(--pad), env(safe-area-inset-bottom));
        background: radial-gradient(ellipse at 20% 80%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 60%); }
#live, #privat, #banner { }
#live[hidden], #privat[hidden], #banner[hidden] { display: none; }
#live { margin: 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
#livebild { flex: none; max-height: 30vh; min-height: 0; width: 100%; object-fit: contain; border: 2px solid var(--cyan); background: #000;
            box-shadow: 0 0 14px rgba(127, 243, 255, .35); }
#live figcaption { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 12px; letter-spacing: .08em; color: var(--cyan); }
.rec { width: 8px; height: 8px; background: var(--red); animation: blink 1.2s steps(2) infinite; }
#privat { grid-area: 2 / 1 / 3 / -1; margin: auto; text-align: center; color: var(--grey); font-size: 18px; }
#call[data-sinan="nein"] #log, #call[data-sinan="nein"] .tiles, #call[data-sinan="nein"] #live { display: none; }
.banner { color: #fff; background: rgba(232, 67, 63, .35); padding: 6px 10px; display: flex; gap: 10px; }
/* Avatar-Ausschnitt (Kopf und Schultern) kommt aus anruf.css, genau wie am PC */
#frame[hidden] { display: none; }
#avatar:has(#frame:not([hidden])) #placeholder { display: none; }

/* Handy / schmal: wie das PC-Overlay, untereinander. Browserbild zwischen HUD und Untertiteln. */
#live { order: 1; max-height: 34vh; }
#log { order: 2; }
.tiles { order: 3; }
@media (max-width: 480px) {
  .line .tx { font-size: 18px; }
  .line { max-width: 94%; }
  .tile.red { width: clamp(104px, 34vw, 140px); }
  .tile.green { width: clamp(60px, 18vw, 80px); }
  #live { max-height: 30vh; }
  .hud { font-size: 13px; }
}

/* Breit (Desktop-Activity): links Capri gross (du als kleine Kachel davor), rechts Browserbild und Untertitel.
   Die Kachelgroesse richtet sich nach der HOEHE des Fensters (Discord-Fenster sind oft flach). */
@media (min-width: 720px) and (min-aspect-ratio: 5/4) {
  #call { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: clamp(20px, 4vw, 56px);
          grid-template-areas: "hud hud" "tiles log"; }
  #call[data-live="an"] { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "hud hud" "tiles live" "tiles log"; }
  .hud { grid-area: hud; }
  .tiles { --rw: clamp(170px, calc(100dvh - 150px), 520px); grid-area: tiles; position: relative; align-self: center; display: block; padding-right: calc(var(--rw) * .16); }
  #call[data-live="an"] .tiles { --rw: clamp(120px, 34dvh, 240px); align-self: start; }
  .side.capri { align-items: flex-start; }
  .tile.red { width: var(--rw); }
  .side.du { position: absolute; right: 0; bottom: 26px; align-items: flex-end; }
  .side.du .nm { display: none; }
  .tile.green .call { font-size: clamp(10px, calc(var(--rw) * .075), 18px); }
  .tile.green { width: calc(var(--rw) * .34); --tilt: -9deg; transform-origin: right center; }
  #log { grid-area: log; align-self: stretch; }
  .line .tx { font-size: clamp(22px, 4.2dvh, 34px); }
  #live { grid-area: live; order: 0; max-height: none; }
  #livebild { flex: 1 1 0; max-height: none; }
  #call[data-live="an"] #log { max-height: 32dvh; }
}
@media (max-height: 520px) and (max-aspect-ratio: 5/4) { .tiles { display: none; } #live { max-height: 52vh; } }