/* ImmoMetrica v2's tokens and components (src/immomon/assets/v2/styles/tailwind.css),
   copied by value: ImmoMeet ships no bundler, and the two must look alike, not share a build. */
@font-face {
  font-family: Poppins;
  font-weight: 400;
  font-display: swap;
  src: url(/static/poppins-400.woff2) format("woff2");
}
@font-face {
  font-family: Poppins;
  font-weight: 500;
  font-display: swap;
  src: url(/static/poppins-500.woff2) format("woff2");
}
@font-face {
  font-family: Poppins;
  font-weight: 600;
  font-display: swap;
  src: url(/static/poppins-600.woff2) format("woff2");
}

:root {
  color-scheme: light;
  --primary: #1e73b3;
  --primary-hover: #004179;
  --link: #1e73b3;
  --surface: #ffffff;
  --secondary: #004179;
  --tertiary: #f1f3f3;
  --ink: #2f333e;
  --bg: #eef5fa;
  --bg-alt: #f8fafb;
  --dark-gray: #61626a;
  --lighter-gray: #c8d0d8;
  --field-border: #848f9b; /* 3:1 on white, the minimum for a control's outline */
  --light-gray: #e4e7e8;
  --danger-fill: #b3261e;
  --guest: #6b7686; /* every guest's avatar: an employee's is --primary */
  --success: #1a7f47;
  --wordmark: #004179;
  --scrim: #2f333e;
  --radius: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* card and legal links centred as one, as on the ImmoMetrica login */
  font:
    400 1rem / 1.5 Poppins,
    system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--bg);
  overflow-wrap: break-word;
}
body.in-call {
  height: 100dvh;
  overflow: hidden;
}
[hidden] {
  /* biome-ignore lint/complexity/noImportantStyles: [hidden] has to beat every class that sets display */
  display: none !important;
}
h1,
h2,
p {
  margin: 0;
}
button:not(:disabled) {
  cursor: pointer;
}
a {
  color: var(--link);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- v2: .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-sm, .btn-block --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: var(--radius);
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  transition:
    background-color 150ms,
    color 150ms;
}
.btn:focus-visible,
.field-control:focus-visible,
.round:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-hover);
}
.btn-secondary {
  border: 1px solid var(--secondary);
  color: var(--secondary);
}
.btn-secondary:hover {
  background: var(--primary-hover);
  color: #fff;
}
.btn-ghost {
  color: var(--link);
}
.btn-ghost:hover {
  background: var(--bg);
}
.btn-sm {
  height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.btn-block {
  width: 100%;
}

/* --- v2: .card-surface, .field-label, .field-control --- */
.card-surface {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}
.field-label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--dark-gray);
}
.field-control {
  width: 100%;
  height: 3rem;
  padding: 0 0.875rem;
  border-radius: var(--radius);
  border: 1px solid var(--field-border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.field-control::placeholder {
  color: var(--dark-gray);
}
.field-control:focus-visible {
  outline-offset: 0;
  border-color: var(--link);
}
.muted {
  color: var(--dark-gray);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* --- Brand: the ImmoMetrica wordmark's split, "Immo" navy and the product name blue --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--wordmark);
}
.brand img {
  width: 2rem;
  height: 2rem;
}
.brand b {
  font-weight: 600;
  color: #2b90d9;
}
.card-surface > .brand {
  font-size: 1.125rem;
}
.card-surface > .brand img {
  width: 1.75rem;
  height: 1.75rem;
}

.who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--dark-gray);
}
.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
}

/* --- Pre-call pages: v2's .auth-shell column, two of them side by side for the pre-join --- */
.shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}
.column {
  width: 100%;
  max-width: 30rem;
  display: grid;
  gap: 1.5rem;
}
.title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.stack {
  display: grid;
  gap: 1rem;
}
.row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}
.or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--dark-gray);
  font-size: 0.875rem;
}
.or::before,
.or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--light-gray);
}
.error {
  color: var(--danger-fill);
  font-size: 0.875rem;
}
.error a {
  color: inherit;
}

.occupancy {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.occupancy::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  margin-top: 0.375rem; /* centred on the first line of a wrapped sentence */
  border-radius: 50%;
  background: var(--dark-gray);
}
.occupancy.live::before {
  background: var(--success);
}

.prejoin {
  width: 100%;
  max-width: 72rem;
  display: grid;
  gap: 1rem; /* the cards' own gap (.stack): preview and cards read as one group */
  align-items: center;
}
.prejoin > .brand {
  margin-bottom: 0.5rem; /* with the gap, the 1.5rem the ImmoMetrica login has under its logo */
  grid-column: 1 / -1;
  justify-self: center;
}
.level {
  height: 0.375rem;
  border-radius: 999px;
  background: var(--lighter-gray);
  overflow: hidden;
}
.level i {
  display: block;
  height: 100%;
  background: #4ade80;
  transform: scaleX(0);
  transform-origin: left;
}
@media (width >= 56rem) {
  .prejoin {
    /* 31rem keeps a room link on one line down to this breakpoint (widest of 20k random ids: 398px) */
    grid-template-columns: minmax(0, 1.4fr) minmax(31rem, 1fr);
    align-items: stretch;
  }
  .prejoin > .stack {
    align-content: center;
  }
  .prejoin .preview {
    aspect-ratio: auto;
    min-height: 20rem;
  }
}
.preview {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0e1621;
  box-shadow: var(--shadow-lg);
}
.preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview .bar {
  position: absolute;
  inset: auto 0 1rem;
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}
/* At the top, so it does not cover the name that a missing camera puts in the middle. */
.preview .note {
  position: absolute;
  inset: 1rem 1rem auto;
  margin: 0;
  color: #e7ecf2;
  font-size: 0.875rem;
  text-align: center;
}
.preview .watermark {
  bottom: 1rem; /* as far from the edge as from the right */
  width: 6rem;
  height: auto;
  filter: drop-shadow(
    0 1px 2px #04080e80
  ); /* white on a bright frame needs an edge */
  opacity: 0.6;
}

/* --- Invite panel: one element, moved between the pre-join, the home page and the call --- */
.invite {
  display: grid;
  gap: 0.75rem;
}
.invite .row {
  gap: 0.5rem;
}
.invite h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.link-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--light-gray);
}
/* Shown whole, never ellipsised: the reader checks the link before sending it. */
.link-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  overflow-wrap: anywhere;
  user-select: all;
  padding-block: 0.375rem;
}
.copied {
  color: var(--success);
}

/* --- In call --- */
.call {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.stage {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0.75rem 1rem;
  display: flex;
}
#grid {
  flex: 1;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}
/* A shared screen moves out of the grid into the spotlight, which takes the stage's full
   height; the others line up beside it and scroll. */
#spotlight {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}
#spotlight:empty {
  display: none;
}
#grid.presenting {
  flex: 0 0 14rem;
  margin-left: 0.75rem;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 8rem;
  align-content: start;
  overflow-y: auto;
}
#grid.presenting:empty {
  display: none;
}
@media (width < 48rem) {
  .stage:has(#grid.presenting) {
    flex-direction: column;
  }
  #grid.presenting {
    flex: 0 0 6rem;
    margin: 0.5rem 0 0;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 9rem;
    overflow: auto hidden;
  }
}
.tile {
  position: relative;
  min-height: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1d2937;
  box-shadow: var(--shadow-sm);
}
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tile.self video,
.preview video {
  transform: scaleX(-1);
}
.tile.screen video,
.tile.self.screen video {
  object-fit: contain;
  transform: none;
  background: #000;
}
.tile.self.screen .pip {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: min(12rem, 30%);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transform: scaleX(-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: box-shadow 0.15s;
}
.tile.speaking::after {
  box-shadow: inset 0 0 0 3px #4ade80;
}
.tile.mic-off::before,
.preview.mic-off::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #04080e;
  opacity: 0.05;
  pointer-events: none;
}
.tile.cam-off video,
.preview.cam-off video {
  visibility: hidden;
}
.nocam {
  position: absolute;
  inset: 0;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 0.75rem;
  padding: 1rem;
  color: #e7ecf2;
}
.tile.cam-off .nocam,
.preview.cam-off .nocam {
  display: grid;
}
.nocam .avatar {
  width: clamp(4rem, 22%, 7rem);
  height: auto;
  aspect-ratio: 1;
  font-size: clamp(1.125rem, 4vw, 2rem);
}
.guest .avatar,
.knock .avatar {
  background: var(--guest);
}
.tile.speaking .nocam .avatar {
  box-shadow: 0 0 0 4px #4ade8066;
}
.nocam-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.tile .mute {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 50%;
  background: #04080e99;
  color: #fff;
}
.tile.mic-off .mute {
  display: block;
}
#grid.duo .tile.self .nocam-name {
  display: none; /* the label already names it, and there is no room for both */
}
.tile .label {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius);
  max-width: calc(100% - 1rem);
  display: flex;
  gap: 0.25em;
  white-space: nowrap;
  background: #04080ebf;
  color: #e7ecf2;
  font-size: 0.8125rem;
}
.label-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.label-tag {
  flex: none;
}
.label-tag:empty {
  display: none;
}

.controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem max(1rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.round {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--tertiary);
  color: var(--ink);
  transition: background-color 150ms;
  position: relative;
  font: inherit;
}
/* Instant label above an icon button; a native title comes after a second and never on focus. */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  background: #1b2330;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms;
  z-index: 5;
}
[data-tip]:focus-visible::after {
  opacity: 1;
}
@media (hover: hover) {
  [data-tip]:hover::after {
    opacity: 1;
    transition-delay: 300ms;
  }
}
.round:hover {
  background: var(--lighter-gray);
}
.controls
  .round:not(
    [data-toggle][aria-pressed="false"],
    [aria-pressed="true"].toggle,
    .hangup
  ) {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.controls
  .round:not(
    [data-toggle][aria-pressed="false"],
    [aria-pressed="true"].toggle,
    .hangup
  ):hover {
  background: var(--tertiary);
}
.round:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.round[data-toggle][aria-pressed="false"] {
  background: var(--danger-fill);
  color: #fff;
}
.round.toggle[aria-pressed="true"] {
  background: var(--primary);
  color: #fff;
}
.round .off,
.round[data-toggle][aria-pressed="false"] .on {
  display: none;
}
.round[data-toggle][aria-pressed="false"] .off {
  display: block;
}
.preview .round {
  background: #ffffff2e;
  color: #fff;
  backdrop-filter: blur(4px);
}
.preview .round[data-toggle][aria-pressed="false"] {
  background: var(--danger-fill);
}
/* Own media | the meeting | leaving: the gaps say which button belongs to what. */
#share,
#invite-open {
  margin-right: 0.75rem;
}
.hangup {
  width: auto;
  padding: 0 1.25rem;
  grid-auto-flow: column;
  gap: 0.5rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--danger-fill);
  color: #fff;
}
.hangup:hover {
  background: #8f1e18;
}

/* The invite card, non-modal and bottom-left as Meet places it: the call stays usable. */
dialog.invite-card {
  position: fixed;
  inset: auto 0 6rem;
  margin: 0 auto;
  width: min(36rem, calc(100vw - 2rem));
  border: 0;
  color: var(--ink);
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.25rem;
  z-index: 3; /* over the self-view pip, which sits over the stage */
}
.invite-card h2:focus {
  outline: none;
}
.close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
}

dialog.guests-card[open] {
  display: grid;
  gap: 0.75rem;
}
.guests-card h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}
.lock {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 500;
}
.lock input {
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--primary);
}
.small {
  font-size: 0.875rem;
}
.guest-list {
  display: grid;
  margin: 0;
  padding-left: 0;
  list-style: none;
  gap: 0.5rem;
  max-height: 40vh;
  overflow-y: auto;
  border-top: 1px solid var(--lighter-gray);
  padding-top: 0.75rem;
}
.guest-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.guest-list .avatar {
  background: var(--guest);
}
.guest-list span:not(.avatar) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guest-list .btn {
  color: var(--danger-fill);
}
.end-all {
  border-color: var(--danger-fill);
  color: var(--danger-fill);
}
.end-all:hover {
  background: var(--danger-fill);
}
.wide {
  width: 100%;
}
.summary {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--bg);
  text-align: left;
  justify-self: stretch;
}
#left .row {
  justify-self: stretch;
}
#left .row .btn {
  flex: 1;
}
.summary dt {
  color: var(--dark-gray);
  font-size: 0.8125rem;
}
.summary dd {
  margin: 0.25rem 0 0;
}
.summary .duration {
  font-size: 1.25rem;
  font-weight: 600;
}
.people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.people li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.875rem;
  font-weight: 500;
}
.people .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.75rem;
}
.people .guest .avatar {
  background: var(--guest);
}

/* Bottom centre, just above the controls: where the eyes already are during a call. */
#knocks {
  position: fixed;
  left: 50%;
  bottom: calc(5.5rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  gap: 0.75rem;
  z-index: 2;
  width: min(30rem, calc(100vw - 1rem));
}
/* An open invite or guests card holds that spot, and a knock under it went unseen. */
body:has(dialog.invite-card[open]) #knocks {
  top: calc(1rem + env(safe-area-inset-top));
  bottom: auto;
}
.knock {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-left: 4px solid var(--primary);
  box-shadow:
    0 20px 40px -12px #00417959,
    var(--shadow-lg);
  animation: knock-in 240ms ease-out;
}
.knock .avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  box-shadow: 0 0 0 4px #2b90d933;
}
.knock-text {
  flex: 1;
  min-width: 0;
  display: grid;
  line-height: 1.25rem;
}
.knock-text strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knock-text span {
  color: var(--dark-gray);
  font-size: 0.875rem;
}
.knock .row {
  flex-wrap: nowrap;
  gap: 0.5rem;
}
@keyframes knock-in {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .knock {
    animation: none;
  }
}
@media (width < 40rem) {
  .knock {
    flex-wrap: wrap;
  }
  .knock .row {
    width: 100%;
  }
  .knock .row .btn {
    flex: 1;
  }
}

.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid var(--light-gray);
  border-top-color: var(--primary);
  animation: spin 900ms linear infinite;
  justify-self: center;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
}
.center {
  text-align: center;
  justify-items: center;
}
.grow {
  flex: 1;
  min-width: 12rem;
}

/* Two people: the other one fills the stage, you are the picture-in-picture, as on a phone call. */
#grid.duo {
  grid-template-columns: minmax(0, 1fr);
}
#grid.duo .tile.self {
  position: absolute;
  right: 1.5rem;
  bottom: 1.25rem;
  z-index: 1;
  width: clamp(6.5rem, 24vw, 15rem);
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-lg);
  outline: 2px solid var(--surface);
}
@media (orientation: landscape) {
  #grid.duo .tile.self {
    aspect-ratio: 16 / 9;
  }
}

/* Phones: edge to edge, the invite card and knocks as sheets, a portrait preview. */
@media (width < 40rem) {
  .shell {
    padding: 1rem;
    align-items: flex-start;
  }
  .stage {
    padding: 0.5rem;
  }
  #grid {
    gap: 0.5rem;
  }
  #grid.duo .tile.self {
    right: 1rem;
    bottom: 1rem;
  }
  /* One row even with the host's seven buttons on a 360 px phone: a second one would sit
     under the invite card. */
  .controls {
    gap: 0.25rem;
    padding-inline: max(0.5rem, env(safe-area-inset-left))
      max(0.5rem, env(safe-area-inset-right));
  }
  .controls .round {
    width: 2.75rem;
    height: 2.75rem;
  }
  #share,
  #invite-open {
    margin-right: 0;
  }
  .hangup {
    padding: 0;
  }
  .hangup span {
    display: none;
  }
  dialog.invite-card {
    inset: auto 0.5rem calc(5rem + env(safe-area-inset-bottom)) 0.5rem;
    width: auto;
  }
  .invite .row .btn {
    flex: 1;
  }
}
@media (width < 40rem) and (orientation: portrait) {
  .preview {
    /* 3:4 at most, and short enough to leave a guest's card up to „Teilnehmen“ on screen
       (33rem is all of it but the video); a ratio with a max-height narrows it in Safari. */
    aspect-ratio: auto;
    height: min(calc((100vw - 2rem) * 4 / 3), max(12rem, calc(100dvh - 33rem)));
  }
}
/* A phone on its side has ~360 px of height: every row that is not video goes. */
@media (height < 30rem) {
  .controls {
    padding-block: 0.5rem max(0.5rem, env(safe-area-inset-bottom));
  }
  .round {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* --- Call: participant count, left in the bar as Meet has its meeting details --- */
.meta {
  position: absolute;
  left: max(1rem, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* a gap short of the centred buttons: half the host's row, the widest, is 16.7rem */
  max-width: calc(50% - 19rem);
}
.joined {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
}
.count {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--dark-gray);
  font-size: 0.875rem;
  font-weight: 500;
}
.watermark {
  position: absolute;
  right: max(1rem, env(safe-area-inset-right));
  opacity: 0.45;
}
@media (width < 40rem) {
  .meta,
  .watermark {
    display: none;
  }
}
/* Below this the centred buttons reach the corner the wordmark sits in. */
@media (width < 56rem) {
  .watermark {
    display: none;
  }
}

/* --- Home --- */
.home-col {
  width: 100%;
  max-width: 30rem;
  display: grid;
  gap: 1.5rem;
  justify-items: center;
}
.home-col > .brand {
  justify-self: center;
}
.home-col .card-surface {
  width: 100%;
}
#home-host > .btn {
  flex: 1;
}
.who .link {
  margin-left: auto;
}
.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.who b {
  font-weight: 600;
  color: var(--ink);
}

/* --- Legal links, as under the ImmoMetrica login; the call needs the space --- */
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 0.5rem;
  margin-top: -1rem;
  padding: 0 1rem calc(2.5rem + env(safe-area-inset-bottom));
  font-size: 0.75rem;
  color: var(--dark-gray);
}
.legal > * + *::before {
  content: "/" / "";
  display: inline-block; /* keeps the link underline off the slash */
  margin-right: 0.5rem;
  color: var(--dark-gray);
}
.legal a {
  color: inherit;
  text-underline-offset: 0.2em;
}
/* The desktop gap of 1.5rem: a phone's smaller shell padding no longer pays the -1rem. */
@media (width < 40rem) {
  .legal {
    margin-top: 0.5rem;
  }
}
body:has(#call:not([hidden])) .legal {
  display: none;
}

/* Stands in for what the browser has not handed over yet, at its final size: nothing jumps. */
.skeleton {
  background:
    linear-gradient(90deg, var(--light-gray) 25%, #f3f5f6 50%, var(--light-gray) 75%)
    0 0 / 200% 100%;
  color: var(--dark-gray);
  animation: shimmer 1.4s linear infinite;
}
.preview.skeleton {
  background-image: linear-gradient(90deg, #0e1621 25%, #1c2735 50%, #0e1621 75%);
}
.preview.skeleton > * {
  visibility: hidden;
}
.preview.skeleton::after {
  content: "Kamera wird geladen …";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #e7ecf2;
  font-size: 0.875rem;
}

/* Employees' video boxes carry the ImmoMetrica colour, as their avatar does. */
.tile:not(.guest),
.preview:not(.guest, .skeleton) {
  box-shadow: 0 6px 24px -6px color-mix(in srgb, var(--primary) 55%, transparent);
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}
#clock {
  font-variant-numeric: tabular-nums;
}

/* Read by screen readers, invisible on screen. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Headings take focus only so a view change is announced; a ring there would just puzzle. */
h1:focus {
  outline: none;
}