/* indemnity-iq.com — страница-заставка.
   Внешних ресурсов НЕТ СОЗНАТЕЛЬНО: ни шрифтов, ни счётчиков, ни встраиваний.
   Любой внешний запрос из браузера посетителя передаёт его IP третьему лицу и
   требует основания по GDPR — ср. LG München I, 20.01.2022, 3 O 17493/20
   (Google Fonts). Политика в файле _headers запрещает это и технически; ею же
   заблокированы встроенные стили, поэтому всё оформление живёт здесь.
   Знак и значок вкладки — разметка SVG, не загружаемые файлы. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  /* Grid, а не flex: при центрировании через flex элемент не сжимается ниже
     ширины своего содержимого и длинная строка уезжает за правый край —
     проверено снимком на 360px. Grid считает свободное место честно. */
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 44px 24px;
  overflow-x: hidden;
  color: #e9eef7;
  background-color: #0e1830;
  /* Два наложенных свечения: холодное сверху, чуть теплее снизу — поле
     перестаёт быть плоским, при этом ни одного изображения. */
  background-image:
    radial-gradient(ellipse 78% 58% at 50% 8%,  rgba(88,128,190,0.30) 0%, rgba(88,128,190,0) 62%),
    radial-gradient(ellipse 96% 72% at 50% 108%, rgba(46,74,124,0.42) 0%, rgba(46,74,124,0) 60%);
  background-repeat: no-repeat;
  font-family: Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  width: 100%;
  max-width: 600px;
  /* Без этого элемент гибкого контейнера не сжимается ниже своего содержимого
     (min-width по умолчанию auto) и длинная строка вылезает за край экрана. */
  min-width: 0;
  overflow-wrap: break-word;
  text-align: center;
  animation: rise 1.1s cubic-bezier(0.22, 0.68, 0.28, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- знак ---------------- */
.mark {
  width: 68px;
  height: 68px;
  display: block;
  margin: 0 auto 26px;
  color: #8fb2e0;
  overflow: visible;
}
.mark .edges path {
  opacity: 0.5;
  /* штрих «прочерчивается»: длина линии задана заведомо с запасом */
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.mark .edges .cross { opacity: 0.22; }
.mark .edges path:nth-child(1) { animation-delay: 0.15s; }
.mark .edges path:nth-child(2) { animation-delay: 0.25s; }
.mark .edges path:nth-child(3) { animation-delay: 0.35s; }
.mark .edges path:nth-child(4) { animation-delay: 0.45s; }
.mark .edges path:nth-child(5) { animation-delay: 0.55s; }
.mark .edges path:nth-child(6) { animation-delay: 0.70s; }
.mark .edges path:nth-child(7) { animation-delay: 0.80s; }
.mark .edges path:nth-child(8) { animation-delay: 0.90s; }

@keyframes draw { to { stroke-dashoffset: 0; } }

.mark .nodes circle {
  color: #cfe0f7;
  fill: currentColor;
  opacity: 0;
  animation: appear 0.7s ease forwards;
}
.mark .nodes circle:nth-child(1) { animation-delay: 0.95s; }
.mark .nodes circle:nth-child(2) { animation-delay: 1.05s; }
.mark .nodes circle:nth-child(3) { animation-delay: 1.15s; }
.mark .nodes circle:nth-child(4) { animation-delay: 1.25s; }
.mark .nodes circle:nth-child(5) { animation-delay: 1.35s; }

@keyframes appear { to { opacity: 1; } }

/* ---------------- имя ---------------- */
h1 {
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #fff;
  line-height: 1.16;
}
h1 .iq {
  color: #8fb2e0;
  font-style: italic;
  letter-spacing: 0;
  margin-left: 0.12em;
}

.tagline {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.6px;
  text-transform: uppercase;
  color: #8ea3c4;
  margin-top: 15px;
}

/* ---------------- разделитель ---------------- */
.rule {
  width: 74px;
  height: 1px;
  margin: 34px auto;
  background-image: linear-gradient(90deg,
    rgba(143,178,224,0) 0%, rgba(143,178,224,0.85) 50%, rgba(143,178,224,0) 100%);
}

/* ---------------- три языка ---------------- */
.langs p {
  font-size: 16.5px;
  line-height: 1.62;
  color: #c2cfe4;
  margin-bottom: 9px;
  text-wrap: balance;
}
.langs p:last-child { margin-bottom: 0; }
/* Немецкая и русская строки — тот же смысл, шагом тише: читающий берёт свою
   и не спотыкается о две лишние. */
.langs .de, .langs .ru { font-size: 15px; color: #8fa0bd; }

/* ---------------- почта ---------------- */
.mail { margin-top: 38px; }
.mail a {
  display: inline-block;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: #fff;
  text-decoration: none;
  padding: 11px 26px;
  border: 1px solid rgba(143,178,224,0.34);
  border-radius: 2px;
  background-color: rgba(143,178,224,0.06);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.mail a:hover,
.mail a:focus-visible {
  color: #eaf3ff;
  border-color: rgba(143,178,224,0.75);
  background-color: rgba(143,178,224,0.13);
}
.mail a:focus-visible { outline: 2px solid #8fb2e0; outline-offset: 3px; }

/* ---------------- сноска с правовыми страницами ----------------
   Обязательные сведения должны быть легко и непосредственно доступны
   (§ 25 MedienG), поэтому ссылка настоящая и кликабельная — но приглушённая,
   как выходные данные на обороте титула. Прятать её нельзя: скрытый текст
   требование не исполняет, а лишь выглядит попыткой обойти. */
.colophon {
  margin-top: 54px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  letter-spacing: 1.1px;
}
.colophon a {
  color: #5f708c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.colophon a:hover,
.colophon a:focus-visible { color: #a8bbd8; border-bottom-color: rgba(143,178,224,0.4); }
.colophon .dot { color: #3f4d66; margin: 0 12px; }

/* ---------------- правовые страницы ---------------- */
body.page { align-content: start; padding: 64px 24px 72px; }

.doc {
  max-width: 620px;
  text-align: left;
  animation: none;
}
.doc h2 {
  font-size: 25px;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.doc h3 {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: #8fb2e0;
  margin: 30px 0 8px;
}
.doc p { font-size: 15.5px; line-height: 1.68; color: #bcc9de; margin-bottom: 11px; }
.doc p.sub { font-size: 13px; color: #7b8ba8; margin-bottom: 26px; }
.doc p.warn {
  border-left: 2px solid rgba(143,178,224,0.4);
  padding: 2px 0 2px 15px;
  color: #a9b8d0;
}
.doc strong { color: #e6edf8; font-weight: 400; }
.doc a { color: #9dbbe4; text-decoration: none; border-bottom: 1px solid rgba(157,187,228,0.35); }
.doc a:hover { color: #cfe0f7; border-bottom-color: #9dbbe4; }

.doc dl { margin: 4px 0 8px; }
.doc dt {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: #7f93b4;
  margin-top: 18px;
}
.doc dd { font-size: 15.5px; line-height: 1.62; color: #c6d2e6; margin-top: 3px; }

.doc .back { margin-top: 40px; font-size: 13px; }
.doc .back a { border-bottom: none; color: #7f93b4; }
.doc .back a:hover { color: #cfe0f7; }

/* ---------------- узкий экран ---------------- */
@media (max-width: 520px) {
  body { padding: 36px 20px; }
  .mark { width: 56px; height: 56px; margin-bottom: 22px; }
  h1 { font-size: 30px; }
  /* Разрядка на узком экране режет строку: 46 знаков с интервалом 2.6px не
     помещаются в 380px. Ужимаем интервал и разрешаем перенос. */
  .tagline { font-size: 9.5px; letter-spacing: 1.7px; }
  .rule { margin: 27px auto; width: 60px; }
  .langs p { font-size: 15.5px; }
  .langs .de, .langs .ru { font-size: 14px; }
  .mail { margin-top: 30px; }
  .mail a { font-size: 15px; padding: 10px 22px; }
}

/* ---------------- без движения ---------------- */
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .mark .edges path { stroke-dashoffset: 0; animation: none; }
  .mark .nodes circle { opacity: 1; animation: none; }
  .mail a { transition: none; }
}