/**
 * TelccFree — shared "Coming Soon" dialog (C1, Lernen, Videos).
 * Self-contained tokens so the component works on any page, light or dark.
 */

.telc-soon {
  --s-surface: #ffffff;
  --s-surface-2: #f5f2ed;
  --s-text: #1b1a18;
  --s-text-2: #494540;
  --s-muted: #767068;
  --s-border: #e7e1d9;
  --s-border-2: #d7cfc4;
  --s-accent: #d0176f;
  --s-accent-soft: rgba(208, 23, 111, 0.09);
  --s-ink: #1a2230;
  --s-on-ink: #ffffff;

  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html.dark .telc-soon {
  --s-surface: #191c21;
  --s-surface-2: #202429;
  --s-text: #ecebe8;
  --s-text-2: #c2bfba;
  --s-muted: #948f89;
  --s-border: #2d323a;
  --s-border-2: #3c424b;
  --s-accent: #ef7fb5;
  --s-accent-soft: rgba(239, 127, 181, 0.14);
  --s-ink: #ecebe8;
  --s-on-ink: #14171c;
}

.telc-soon[hidden] {
  display: none;
}

html.telc-soon-open,
html.telc-soon-open body {
  overflow: hidden;
}

.telc-soon__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 10, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.dark .telc-soon__backdrop {
  background: rgba(4, 5, 7, 0.66);
}

.telc-soon.is-open .telc-soon__backdrop {
  opacity: 1;
}

.telc-soon__dialog {
  position: relative;
  width: min(500px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px 28px 26px;
  border-radius: 20px;
  background: var(--s-surface);
  border: 1px solid var(--s-border);
  box-shadow: 0 32px 60px -28px rgba(20, 16, 12, 0.5), 0 8px 20px -12px rgba(20, 16, 12, 0.2);
  color: var(--s-text);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 180ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.dark .telc-soon__dialog {
  box-shadow: 0 34px 64px -26px rgba(0, 0, 0, 0.85), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}

.telc-soon.is-open .telc-soon__dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.telc-soon__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--s-muted);
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.telc-soon__close:hover {
  background: var(--s-surface-2);
  border-color: var(--s-border);
  color: var(--s-text);
}

.telc-soon__close:focus-visible,
.telc-soon__cta:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 2px;
}

.telc-soon__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-inline-end: 40px;
}

.telc-soon__icon {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--s-accent-soft);
  color: var(--s-accent);
}

.telc-soon__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--s-border-2);
  background: var(--s-surface-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-text-2);
  white-space: nowrap;
}

.telc-soon__dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--s-accent);
  flex-shrink: 0;
}

.telc-soon__status-ar {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--s-muted);
  padding-inline-start: 8px;
  border-inline-start: 1px solid var(--s-border-2);
}

.telc-soon__block {
  margin: 0;
}

.telc-soon__block--ar {
  text-align: right;
}

/* the German block keeps its own direction even inside an RTL document */
.telc-soon__block[dir="ltr"] {
  text-align: left;
}

.telc-soon__title {
  margin: 0;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--s-text);
}

.telc-soon__block--ar .telc-soon__title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1.12rem;
  line-height: 1.6;
}

.telc-soon__text {
  margin: 10px 0 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--s-text-2);
}

.telc-soon__block--ar .telc-soon__text {
  line-height: 1.9;
}

.telc-soon__hint {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--s-muted);
}

.telc-soon__block--ar .telc-soon__hint {
  line-height: 1.85;
}

.telc-soon__rule {
  height: 1px;
  margin: 20px 0;
  background: var(--s-border);
}

.telc-soon__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 22px;
  padding: 12px 20px;
  border-radius: 14px;
  background: var(--s-ink);
  color: var(--s-on-ink);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.telc-soon__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -14px rgba(20, 16, 12, 0.7);
}

.telc-soon__cta svg {
  flex-shrink: 0;
}

.telc-soon__cta-labels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.25;
}

.telc-soon__cta-de {
  font-size: 0.92rem;
  font-weight: 600;
}

.telc-soon__cta-ar {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.78;
}

@media (max-width: 480px) {
  .telc-soon {
    padding: 14px;
    align-items: flex-end;
  }

  .telc-soon__dialog {
    padding: 22px 20px 20px;
    border-radius: 18px;
    max-height: calc(100vh - 28px);
  }

  .telc-soon__head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .telc-soon__title {
    font-size: 1.12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .telc-soon__backdrop,
  .telc-soon__dialog,
  .telc-soon__cta,
  .telc-soon__close {
    transition-duration: 0.01ms !important;
  }
}