/* dd-blocks.css — стили блоков, добавленных 12.08.2026: toc, table, checklist, team.
   Токены и базовая типографика приходят из style.css + live-main.css. */

/* ─── Inhaltsverzeichnis ─────────────────────────────────────────────── */
.geo-toc { padding: 1.5rem 0 0; }
.geo-toc .geo-container { max-width: 1200px; }
.geo-toc-title {
  font-size: .78rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brandDark, #166534); margin: 0 0 .85rem;
}
.geo-toc-list {
  list-style: none; margin: 0; padding: 1.25rem 1.5rem;
  background: var(--bgAlt, #F4F4F4); border: 1px solid var(--border, #E0E0E0);
  border-radius: 14px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem 2rem;
  counter-reset: toc;
}
.geo-toc-list li { margin: 0; }
.geo-toc-list a {
  display: flex; gap: .6rem; align-items: baseline;
  color: var(--text, #1A1A1A); text-decoration: none;
  padding: .35rem 0; font-size: .95rem; line-height: 1.4;
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.geo-toc-list a:hover { color: var(--brandDark, #166534); border-bottom-color: var(--accent, #22C55E); }
/* --brandDark, не --brand: #16A34A на #F4F4F4 даёт 2.99:1 — провал WCAG AA.
   #166534 даёт 6.5:1. Правило из brandbook §2: зелёный для текста на светлом — только тёмный. */
.geo-toc-num { color: var(--brandDark, #166534); font-weight: 800; font-size: .8rem; min-width: 1.6em; }

/* ─── Tabelle ────────────────────────────────────────────────────────── */
.geo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0 .75rem; }
.geo-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.geo-table th, .geo-table td {
  text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--border, #E0E0E0);
  vertical-align: top;
}
.geo-table thead th {
  background: var(--bgAlt, #F4F4F4); font-weight: 800; color: var(--primary, #111);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--border, #E0E0E0); white-space: nowrap;
}
.geo-table tbody th { font-weight: 700; color: var(--primary, #111); }
.geo-table tbody tr:last-child th, .geo-table tbody tr:last-child td { border-bottom: none; }
.geo-table tbody tr:hover { background: rgba(34, 197, 94, .04); }
.geo-table-caption { font-size: .85rem; color: var(--textMuted, #555); margin: 0; }

/* ─── Checkliste ─────────────────────────────────────────────────────── */
.geo-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
.geo-check {
  display: flex; gap: .9rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--border, #E0E0E0); border-radius: 12px;
  padding: 1rem 1.15rem;
}
.geo-check-mark {
  flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accentSoft, #4ADE80); color: var(--brandDark, #166534);
  display: grid; place-items: center; font-weight: 900; font-size: .8rem; margin-top: .1rem;
}
.geo-check strong { display: block; color: var(--primary, #111); font-weight: 800; margin-bottom: .2rem; }
.geo-check p { margin: 0; color: var(--textMuted, #555); font-size: .93rem; line-height: 1.55; }

.geo-warnbox {
  margin-top: 1.5rem; padding: 1.15rem 1.35rem;
  border: 1px solid #F0C9C4; border-left: 3px solid #B4231F;
  border-radius: 0 12px 12px 0; background: #FDF6F5;
}
.geo-warnbox-title {
  margin: 0 0 .6rem; font-weight: 800; color: #B4231F;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.geo-warnlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.geo-warnlist li { display: flex; gap: .6rem; font-size: .93rem; color: var(--text, #1A1A1A); }
.geo-warnlist li span { color: #B4231F; font-weight: 900; flex: 0 0 auto; }

/* ─── Team ───────────────────────────────────────────────────────────── */
.geo-team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem; margin-top: 1.75rem;
}
.geo-person {
  background: #fff; border: 1px solid var(--border, #E0E0E0); border-radius: 14px;
  padding: 1.5rem 1.35rem;
}
.geo-person-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand, #16A34A), var(--accent, #22C55E));
  color: #fff; display: grid; place-items: center;
  font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; margin-bottom: .9rem;
}
.geo-person-name { margin: 0 0 .15rem; font-size: 1.1rem; }
.geo-person-role {
  margin: 0 0 .7rem; color: var(--brandDark, #166534);
  font-weight: 700; font-size: .84rem; letter-spacing: .02em;
}
.geo-person-bio { margin: 0 0 .8rem; color: var(--textMuted, #555); font-size: .93rem; line-height: 1.55; }
.geo-person-link { color: var(--brandDark, #166534); font-weight: 600; font-size: .9rem; text-decoration: none; }
.geo-person-link:hover { text-decoration: underline; }
.geo-contactbox { margin-top: 1.5rem; }

@media (max-width: 720px) {
  .geo-toc-list { grid-template-columns: 1fr; padding: 1rem 1.15rem; }
  .geo-check { padding: .85rem 1rem; }
}

/* ─── Фикс callout ───────────────────────────────────────────────────────
   .geo-callout — grid 32px + 1fr, иконка приходит из ::before.
   Инлайновая разметка внутри (ссылки, strong) иначе разваливается
   на отдельные grid-элементы и текст ломается в колонку. */
.geo-callout-body { grid-column: 2 / -1; min-width: 0; }
.geo-callout-body a { color: var(--brandDark, #166534); font-weight: 600; }

/* Футер: заголовки колонок были <h4> после <h2> — нарушение иерархии (W3C Nu).
   Переведены в <h2 class="footer-col-title">, вид сохранён 1:1. */
.site-footer .col h2.footer-col-title{
  color:#fff;
  font-size:.85rem;
  margin:0 0 .85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  line-height:1.2;
}

/* Eyebrow: --geo-green (#16A34A) на фоне #F1F1F1 = 2.91:1 при 11px — провал WCAG AA.
   #166534 = 6.3:1. Плашка-градиент и остальной вид не меняются. */
.geo-eyebrow { color: var(--brandDark, #166534); }

/* Cookie-Banner: зелёный текст #16A34A на белом = 3.29:1 при 12.8–13.6px — провал AA.
   В теме селекторы с data-атрибутами (специфичность 0,4,1) — повторяем её, иначе правило не применится.
   Фон кнопки не трогаем (это бренд-элемент), правим только текстовые ссылки. */
.cookie-banner .cb-link[data-astro-cid-fzbxxtek] a[data-astro-cid-fzbxxtek],
.cookie-banner .cb-details[data-astro-cid-fzbxxtek] summary[data-astro-cid-fzbxxtek] {
  color: var(--brandDark, #166534);
}

/* ═══════════════════════════════════════════════════════════════════════
   Приведение geo-секций к дизайну главной (12.08.2026)
   Источник решений: живая главная digital-delight.ch — .container 1200px,
   .grid-bg-light 56px, карточки flex с прижатым низом.
   ═══════════════════════════════════════════════════════════════════════ */

/* Ширина контента. В теме .geo-container задан как max-width:1500rem
   (то есть 24000px — ограничения нет) и width:calc(100% - 104px), из-за чего
   блоки растягивались во всю ширину экрана. На главной контент живёт
   в .container = 1200px. Секция остаётся во всю ширину — тянется только фон. */
.geo-section > .geo-container,
.geo-hero > .geo-container,
.geo-cta > .geo-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (max-width: 640px) {
  .geo-section > .geo-container,
  .geo-hero > .geo-container,
  .geo-cta > .geo-container { padding: 0 1rem; }
}

/* Клетчатый фон — приём с главной (.grid-bg-light). Ставится на секции-витрины
   (кейсы, цены, команда), чтобы делить длинную страницу на смысловые части. */
.geo-section--grid {
  background-color: var(--bgAlt, #F4F4F4);
  background-image:
    linear-gradient(rgba(14, 18, 48, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 18, 48, .04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ─── Кейсы: сетка вместо карусели ─────────────────────────────────────
   Было: display:flex + overflow-x:auto + scroll-snap, карточка = 1/3 ширины,
   а стрелок навигации (.geo-cases-nav) шаблон не выводил — четвёртый кейс
   был физически недостижим. Сетка 2×2 показывает все. */
.geo-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  overflow: visible;
}
.geo-cases > .geo-case {
  flex: none;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 18px;
}
@media (max-width: 860px) { .geo-cases { grid-template-columns: 1fr; } }

/* Иллюстрация вместо пустой штриховки. object-fit:cover в теме рассчитан
   на скриншоты; для векторных иллюстраций нужен contain с полями. */
.geo-case-screenshot--illu {
  background: var(--bgAlt, #F4F4F4);
  border: 1px solid var(--border, #E0E0E0);
  border-radius: 12px;
  padding: 14px;
}
.geo-case-screenshot--illu img { object-fit: contain; height: 100%; }

/* Текст кейса: обрезка до 6 строк + раскрытие. Текст остаётся в DOM —
   обрезка чисто визуальная, для поиска и AI-систем ничего не прячется. */
.geo-case-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--geo-text, #444);
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.geo-case-body.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.geo-case-more {
  align-self: flex-start;
  margin-top: 10px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--brandDark, #166534);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.geo-case-more:hover { color: var(--brand, #16A34A); }
.geo-case-more:focus-visible { outline: 2px solid var(--brand, #16A34A); outline-offset: 3px; border-radius: 3px; }

/* Низ карточки прижат к низу — ссылки в ряду встают на одну линию
   независимо от длины текста. Это и убирает «разную высоту колонок». */
.geo-case-foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.geo-case-link { font-weight: 600; font-size: 14px; color: var(--brandDark, #166534); }
.geo-case-link:hover { color: var(--brand, #16A34A); }
.geo-case h3 { margin-bottom: 10px; }

/* ─── Таблица: была во всю ширину экрана, колонки разъезжались ────────── */
.geo-table { min-width: 480px; }
.geo-table th, .geo-table td { padding: 14px 18px; }
.geo-table thead th { padding-top: 12px; padding-bottom: 12px; }
.geo-table tbody tr:nth-child(even) { background: var(--bgAlt, #F4F4F4); }
.geo-table tbody tr:hover { background: rgba(34, 197, 94, .07); }
.geo-table tbody th { width: 22%; white-space: nowrap; }
.geo-table-wrap { border: 1px solid var(--border, #E0E0E0); border-radius: 14px; background: #fff; }
.geo-table thead th:first-child { border-top-left-radius: 14px; }
.geo-table thead th:last-child  { border-top-right-radius: 14px; }
.geo-table-caption { margin-top: 14px; }
@media (max-width: 700px) {
  .geo-table th, .geo-table td { padding: 11px 13px; }
  .geo-table tbody th { width: auto; white-space: normal; }
}

/* Доводка после визуальной сверки 12.08.2026 */
/* У table в теме margin:24px 0 — внутри рамки обёртки это давало белые поля сверху и снизу */
.geo-table-wrap > .geo-table { margin: 0; }
/* Подпись под таблицей шла на всю ширину контейнера (~1160px) — нечитаемая длина строки */
.geo-table-caption { max-width: 880px; }
/* Иллюстрации кейсов при 16/10 разгоняли карточку; SVG рисуются 250×150, при 2× апскейле
   штрихи выглядят грубо. 20/9 держит картинку компактной и ближе к натуральному размеру. */
.geo-case-screenshot--illu { aspect-ratio: 20 / 9; }

/* ─── Контраст кнопок с белым текстом (13.08.2026) ────────────────────────
   Белый на брендовом #16A34A даёт 3,30:1 при кегле 14 px — WCAG AA требует 4,5:1.
   #15803D — тот же оттенок, но 5,01:1 с белым. Затронуты только кнопки, где текст
   белый: шапка и cookie-баннер. Кнопки страницы (.geo-btn-primary) не трогаем —
   у них тёмный текст на зелёном, 5,28:1, они и так проходят.
   Ховер остаётся на --brandDark #166534, он темнее — эффект нажатия сохраняется. */
:root { --brandBtn: #15803D; }
.btn.btn-primary { background: var(--brandBtn, #15803D); }
.cookie-banner .cb-btn.cb-primary { background: var(--brandBtn, #15803D); }

/* Настоящие скриншоты кейсов приходят в пропорции около 2:1 (1794×876, 2048×1019, 1600×900).
   Штатные 16/10 обрезали бы их по бокам — у обложки AP Education там цифры кейса. */
.geo-case-screenshot--filled:not(.geo-case-screenshot--illu) { aspect-ratio: 2 / 1; }

/* ─── Графика внутри карточки услуги (13.08.2026) ─────────────────────────
   Маркеры [БЛОК: …] из ТЗ Ragon относятся к карточкам раздела Kernleistungen —
   по одной графике на услугу. Картинка идёт последней, поэтому карточка прижимает
   её к низу и в ряду графики выстраиваются на одной линии. */
.geo-usp { display: flex; flex-direction: column; }
.geo-usp p { margin-bottom: 0; }
.geo-usp-figure {
  margin: 18px 0 0;
  border: 1px solid var(--border, #E0E0E0);
  border-radius: 10px;
  overflow: hidden;
  background: #F5F7FB;
  margin-top: auto;
  padding-top: 0;
}
.geo-usp-figure img { display: block; width: 100%; height: auto; }

/* Графика внутри текстовой секции (17.08.2026). Ширина ограничена: схемы рисуются
   в viewBox ~300 единиц, растягивать их на всю колонку — значит размыть штрихи. */
.geo-section-figure {
  margin: 22px 0 0;
  max-width: 460px;
  border: 1px solid var(--border, #E0E0E0);
  border-radius: 10px;
  overflow: hidden;
  background: #F5F7FB;
}
.geo-section-figure img { display: block; width: 100%; height: auto; }

/* Абзац без заголовка внутри text-section — обычная проза, не карточка */
.geo-text-block--plain{background:transparent;border:0;border-radius:0;padding:0}
.geo-text-block--plain:hover{transform:none;box-shadow:none;border-color:transparent}
.geo-text-block--plain + .geo-text-block--plain{margin-top:1.1rem}
.geo-text-block + .geo-text-block--plain{margin-top:1.5rem}

/* ============================================================
   dd/form — Kontaktformular (21.08.2026)
   ============================================================ */
.dd-form{max-width:760px;margin:2rem 0 0}
.dd-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem 1.25rem}
.dd-field--full{grid-column:1/-1}
@media (max-width:640px){.dd-form-grid{grid-template-columns:1fr}}

.dd-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.dd-field label{font-size:.92rem;font-weight:600;color:var(--text)}
.dd-field label span[aria-hidden]{color:var(--brand)}

.dd-field input[type=text],
.dd-field input[type=email],
.dd-field input[type=tel],
.dd-field select,
.dd-field textarea{
  width:100%;padding:.72rem .9rem;font:inherit;font-size:1rem;color:var(--text);
  background:#fff;border:1px solid var(--border);border-radius:10px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.dd-field textarea{resize:vertical;min-height:120px}
.dd-field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.4rem}

.dd-field input:focus,.dd-field select:focus,.dd-field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(22,163,74,.15)}

.dd-field--error input,.dd-field--error select,.dd-field--error textarea{border-color:#b32d2e}
.dd-field--error input:focus,.dd-field--error textarea:focus{box-shadow:0 0 0 3px rgba(179,45,46,.15)}

.dd-err{font-size:.85rem;color:#b32d2e;min-height:0}
.dd-err:empty{display:none}

/* Ловушка для ботов: убрана из потока, но не display:none —
   часть ботов такие поля пропускает намеренно. */
.dd-form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.dd-consent{margin-top:1.25rem}
.dd-consent label{display:flex;align-items:flex-start;gap:.6rem;font-weight:400;
  font-size:.92rem;line-height:1.5;color:var(--text-muted);cursor:pointer}
.dd-consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  accent-color:var(--brand);cursor:pointer}
.dd-consent a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.dd-consent.dd-field--error label{color:#b32d2e}

.dd-form-submit{margin-top:1.5rem}
.dd-form-submit[disabled]{opacity:.6;cursor:progress}

.dd-form-status{margin-top:1rem;font-size:.95rem;min-height:0}
.dd-form-status:empty{display:none}
.dd-form-status--error{color:#b32d2e}

.dd-form-done{max-width:760px;margin:2rem 0 0;padding:1.4rem 1.6rem;
  background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.35);
  border-radius:12px;color:var(--text);font-size:1.02rem;line-height:1.55}
.dd-form-done:focus{outline:2px solid var(--brand);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .dd-field input,.dd-field select,.dd-field textarea{transition:none}
}

/* Список в карточке цен объявлен grid с flex:1 — строки растягиваются по высоте
   карточки, и у тарифа с тремя пунктами промежутки втрое больше, чем у семи.
   Прижимаем содержимое к верху, выравнивая вид между тарифами. */
.geo-pricing-features{align-content:start}

/* ─── Подразделы внутри text-section (28.08.2026) ──────────────────────────
   В CSS был только модификатор --plain, который отменяет карточку, а самой
   карточки и сетки не существовало. Из-за этого блоки с заголовком выводились
   без оформления — голой стопкой div'ов. */
.geo-text-blocks { display: grid; gap: 18px; margin: 26px 0 0; }
.geo-text-blocks--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.geo-text-blocks--3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .geo-text-blocks--3col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .geo-text-blocks--2col, .geo-text-blocks--3col { grid-template-columns: minmax(0, 1fr); }
}
.geo-text-block {
  background: var(--geo-bg-surface, #FFFFFF);
  border: 1px solid var(--geo-border, #E0E0E0);
  border-radius: var(--geo-r-md, 4px);
  padding: 24px 26px;
  min-width: 0;
}
.geo-text-block h3 {
  margin: 0 0 .6rem;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--geo-text-h, #111111);
}
.geo-text-block > div { color: var(--geo-text, #333333); }
.geo-text-block > div > p:first-child { margin-top: 0; }
.geo-text-block > div > p:last-child { margin-bottom: 0; }
/* --plain остаётся прозрачной прозой: правило ниже уже было в теме, оно отменяет карточку */
.geo-text-block--plain { padding: 0; }