/* ==========================================================================
   Seite: Remote-Support (Support/RemoteSupport.aspx)
   Inhalt: Kopf mit Telefon-Knopf und «Termin vereinbaren», darunter drei
   Schritte (Anrufen – TeamViewer starten – ID & Passwort durchgeben) und ein
   Sicherheitshinweis
   ========================================================================== */

/* ==========================================================================
   Farben dieser Seite (hell / dunkel)
   ========================================================================== */
@Import "Colors.css";

.remote-page {
    --remote-accent: var(--color-blue);
    --remote-muted: var(--color-middle-gray);
    --remote-security-bg: var(--color-light-orange);
    --remote-security-border: var(--color-orange);
    --remote-security-icon: var(--color-dark-blue);
}

html[data-theme="dark"] .remote-page {
    --remote-accent: var(--color-light-blue);
    --remote-muted: var(--color-middle-blue);
    --remote-security-bg: var(--color-dark-orange);
    --remote-security-border: var(--color-light-orange);
    --remote-security-icon: var(--color-light-orange);
}

/* ==========================================================================
   Kopf: Grundaufbau siehe .page-hero in Infoseite.css; hier nur die Kontaktwege
   Mit den Knöpfen ist der Kopf höher: Icon-Kachel oben statt mittig
   ========================================================================== */
.remote-page .page-hero {
  align-items: flex-start;
}

/* Zeile mit Telefon-Knopf und Link «Termin vereinbaren» */
.remote-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin-top: 1.3rem;
}

/* Knopf «Anrufen» mit Telefonnummer: Aussehen über .button / .button-lg (Global.css) */

/* ==========================================================================
   Drei Schritte: Anrufen – TeamViewer starten – ID & Passwort durchgeben
   ========================================================================== */
.remote-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

/* Ein Schritt (Karte) */
.remote-step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem 1.4rem;
  border-radius: var(--radius-container);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* Runde Nummer 1 / 2 / 3 */
.remote-step-number {
  margin-bottom: 0.3rem;
}

/* Titel und Text des Schritts */
.remote-step h2 {
  margin: 0;
  font-size: 1.15rem;
}

.remote-step p {
  margin: 0;
  line-height: 1.5;
}

/* Knopf «QuickSupport herunterladen» im Schritt 2 */
.remote-download {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-weight: 700;
  color: var(--remote-accent);
  border: 1px solid currentColor;
  transition: background-color var(--button-hover), color var(--button-hover), border-color var(--button-hover);
}

.remote-download:hover,
.remote-download:focus-visible {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-white);
  outline: none;
}

/* ==========================================================================
   Sicherheitshinweis (gelber Kasten mit Schild-Icon)
   ========================================================================== */
.remote-security {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius-container);
  background: var(--remote-security-bg);
  border: 1px solid var(--remote-security-border);
}

/* Schild-Icon */
.remote-security-icon {
  flex: 0 0 auto;
  color: var(--remote-security-icon);
  font-size: 1.6rem;
}

/* Hinweistext */
.remote-security p {
  margin: 0;
  color: var(--dark-copy);
}

/* ==========================================================================
   Tablet / Handy: Schritte untereinander
   ========================================================================== */
@media (max-width: 820px) {
  .remote-steps {
    grid-template-columns: 1fr;
  }
}