/* wasbedeutet.net — оформление.
   Один файл, системный шрифт, ни одного внешнего запроса: страница должна
   отрисоваться до того, как что-то успеет загрузиться. Все размеры заданы
   заранее, чтобы содержимое не прыгало (CLS). Оформление светлое. */

:root {
  color-scheme: light;
  --bg:      #f6f7f9;
  --card:    #ffffff;
  --ink:     #16202c;
  --ink-2:   #4c5a6b;
  --ink-3:   #7d8898;
  --line:    #e2e6ec;
  --line-2:  #eef1f5;
  --accent:  #1e5fbf;
  --accent-w:#eaf1fc;
  --ok:      #1c7a52;
  --ok-w:    #e7f5ee;
  --radius:  10px;
  --wrap:    980px;
}

*, *::before, *::after { box-sizing: border-box }

html { -webkit-text-size-adjust: 100% }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.62 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px }
a:hover { color: #14428a }

.sr, .skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
  background: var(--card); padding: 10px 14px; border-radius: 8px; z-index: 9;
  box-shadow: 0 2px 12px rgba(20, 32, 48, .18);
}

/* ── шапка ─────────────────────────────────────────────────────────────── */
.top { background: var(--card); border-bottom: 1px solid var(--line) }
.top-in { display: flex; align-items: center; gap: 20px; min-height: 62px; flex-wrap: wrap }

.brand {
  font-size: 19px; letter-spacing: -.3px; color: var(--ink);
  text-decoration: none; white-space: nowrap; padding: 8px 0;
}
.brand b { font-weight: 700 }
.brand span { color: var(--ink-3); font-weight: 400 }

.find { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; margin-left: auto }
.find input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px;
  padding: 9px 13px; border: 1px solid var(--line);
  border-radius: 8px; background: #fbfcfd; color: var(--ink);
}
.find input:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: #fff }
.find button {
  font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
  padding: 9px 16px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; cursor: pointer;
}
.find button:hover { background: #14428a }

/* ── хлебные крошки ────────────────────────────────────────────────────── */
.crumbs { padding-top: 14px }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0;
             font-size: 14px; color: var(--ink-3) }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3) }
.crumbs a { color: var(--ink-2); text-decoration: none }
.crumbs a:hover { text-decoration: underline }

main { padding: 22px 20px 56px; min-height: 60vh }

h1 { font-size: 30px; line-height: 1.22; letter-spacing: -.5px; margin: 6px 0 14px }
h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.2px; margin: 30px 0 10px }
h3 { font-size: 16px; margin: 22px 0 8px }
p { margin: 0 0 12px }

.lead-p, .lead p { font-size: 18.5px; color: var(--ink) }
.lead { margin: 0 0 18px }
.lead .ctx { font-size: 16.5px; color: var(--ink-2); margin-top: 8px }
.note { font-size: 14px; color: var(--ink-3); margin: 0 0 10px }
.more { margin: 14px 0 0; font-size: 15px }
.todo { color: var(--ink-3); font-style: italic }

/* ── главная ───────────────────────────────────────────────────────────── */
.hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 28px; margin-bottom: 26px;
}
.hero h1 { font-size: 33px; margin: 0 0 8px }
.hero .sub { color: var(--ink-2); font-size: 17.5px; margin-bottom: 20px }
.find.big { margin: 0; max-width: 560px }
.find.big input { font-size: 17px; padding: 13px 15px }
.find.big button { padding: 13px 20px }

.block { margin: 34px 0 }
/* Подпись под заголовком блока: объясняет, по какому признаку он собран. */
.block .lede { color: var(--ink-2); font-size: 15px; margin: -6px 0 14px }
.block.plain { background: var(--card); border: 1px solid var(--line);
               border-radius: var(--radius); padding: 20px 22px }
.block.plain h2 { margin-top: 0 }

/* ── плитки и карточки ─────────────────────────────────────────────────── */
.chips, .cards, .az, .rel-list, .list, .hits, .facts { list-style: none; margin: 0; padding: 0 }

.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chips a {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; text-decoration: none; color: var(--ink);
}
.chips a:hover { border-color: var(--accent); background: var(--accent-w) }
.chips b { font-size: 15.5px }
.chips span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 1px }
.chips.small b { font-size: 14.5px; font-weight: 600 }

.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)) }
.cards a {
  display: block; height: 100%; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink);
}
.cards a:hover { border-color: var(--accent); box-shadow: 0 1px 8px rgba(30, 95, 191, .08) }
.cards b { font-size: 16.5px }
.cards span { display: block; font-size: 14px; color: var(--ink-2); margin: 4px 0 8px }
.cards em { font-style: normal; font-size: 13px; color: var(--ink-3) }

.az { display: flex; flex-wrap: wrap; gap: 7px }
.az a, .az .cur {
  display: flex; flex-direction: column; align-items: center; min-width: 52px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 10px; text-decoration: none; color: var(--ink); font-weight: 600;
}
.az a:hover { border-color: var(--accent); background: var(--accent-w) }
.az .cur { background: var(--accent); color: #fff; border-color: var(--accent) }
.az span { font-weight: 400; font-size: 12px; color: var(--ink-3) }
.az .cur span { color: #dbe7fa }
.az.wide a { min-width: 66px; padding: 11px 12px; font-size: 17px }

/* ── страница сокращения ───────────────────────────────────────────────── */
.entry { max-width: 760px }
.variants { font-size: 15px; color: var(--ink-2); margin: -6px 0 12px }
.ipa { font-size: 15px; color: var(--ink-2) }
.ipa span { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink) }

.senses { margin-top: 26px }
.senses h3.grp { margin: 20px 0 6px; font-size: 15px; text-transform: none; color: var(--ink-2) }
.senses h3.grp a { color: var(--ink-2) }

.sense-list { list-style: none; margin: 0; padding: 0;
              background: var(--card); border: 1px solid var(--line); border-radius: var(--radius) }
.sense-list li { padding: 13px 16px; border-top: 1px solid var(--line-2); counter-increment: s }
.sense-list li:first-child { border-top: 0 }
.sense-list .exp { font-size: 17px; font-weight: 600; line-height: 1.4 }
.sense-list .exp a { color: var(--ink); text-decoration: none;
                     border-bottom: 1px solid #c9d6e8 }
.sense-list .exp a:hover { color: var(--accent); border-color: var(--accent) }
.sense-list .gl { color: var(--ink-2); font-size: 15.5px; margin-top: 3px }
.sense-list .src { font-size: 12.5px; color: var(--ink-3); margin-top: 6px }
.sense-list .ok { background: var(--ok-w); color: var(--ok); padding: 1px 6px; border-radius: 20px }

/* Носители имени: «Gala (Apfel)», «VfB Stuttgart». Это НЕ расшифровки, и
   выглядеть как список значений они не должны — иначе перестановка ничего не
   меняет для глаза. Отсюда две в две колонки на широком экране, шрифт мельче
   и без карточки: раздел справочный, а не главный. Порядковых номеров тоже
   нет — нумерация читается как «столько-то значений». */
.namen { margin-top: 30px }
.namen .hint { color: var(--ink-2); font-size: 15px; max-width: 68ch; margin: 0 0 12px }
.name-list { list-style: none; margin: 0; padding: 0;
             columns: 2; column-gap: 28px }
.name-list li { break-inside: avoid; padding: 6px 0; border-top: 1px solid var(--line-2) }
.name-list li:first-child { border-top: 0 }
.name-list .exp { font-size: 15.5px; line-height: 1.45 }
.name-list .exp a { color: var(--ink); text-decoration: none;
                    border-bottom: 1px solid #c9d6e8 }
.name-list .exp a:hover { color: var(--accent); border-color: var(--accent) }
.name-list .gl { color: var(--ink-3); font-size: 14px; margin-top: 2px }
@media (max-width: 640px) { .name-list { columns: 1 } }

/* Сводка тёзок из рубрик dab-страницы («außerdem 239 Orte») — один абзац. */
.gleich { margin-top: 26px }
.gleich p { color: var(--ink-2); font-size: 15px; max-width: 68ch; margin: 0 }

/* Раздел «как это пишут и как различают» — сплошной текст, а не карточка:
   он читается подряд, и рамка вокруг абзацев только мешает. Ширина строки
   ограничена, чтобы глаз не терял начало следующей. */
.erk { margin-top: 30px }
.erk h2 { margin: 0 0 10px }
.erk p { max-width: 68ch; margin: 0 0 12px; font-size: 16.5px;
         line-height: 1.65; color: var(--ink) }
.erk p:last-child { margin-bottom: 0 }

.examples blockquote {
  margin: 0 0 10px; padding: 11px 15px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0; color: var(--ink); font-size: 16px;
}
/* Подпись «к какому значению» — отдельной строкой: вплетённая в цитату, она
   читается как часть предложения. */
.examples cite {
  display: block; margin-top: 5px; font-style: normal;
  font-size: 12.5px; color: var(--ink-3);
}
.syn { font-size: 15.5px; color: var(--ink-2) }

.rel { margin-top: 34px; display: grid; gap: 18px }
.relbox { background: var(--card); border: 1px solid var(--line);
          border-radius: var(--radius); padding: 16px 18px }
.relbox h2 { margin: 0 0 2px; font-size: 17px }
.rel-list { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) }
.rel-list a { display: block; padding: 7px 10px; border: 1px solid var(--line-2);
              border-radius: 8px; text-decoration: none; color: var(--ink); background: #fbfcfd }
.rel-list a:hover { border-color: var(--accent); background: var(--accent-w) }
.rel-list b { font-size: 15px }
.rel-list span { display: block; font-size: 13px; color: var(--ink-3) }

.prov { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line) }
.prov h2 { font-size: 17px; margin-top: 0 }
.prov p { font-size: 15px; color: var(--ink-2) }

/* ── списки и поиск ────────────────────────────────────────────────────── */
.list, .hits { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius) }
.list li, .hits li { padding: 11px 16px; border-top: 1px solid var(--line-2);
                     display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px }
.list li:first-child, .hits li:first-child { border-top: 0 }
.list b, .hits b { font-size: 16px; min-width: 74px }
.list .t, .hits .t { color: var(--ink); font-size: 15.5px }
.list .g, .hits .g { color: var(--ink-3); font-size: 14px; flex: 1 1 100% }
.list .n, .hits .n { font-size: 12.5px; color: var(--ink-3); margin-left: auto;
                     background: var(--line-2); padding: 1px 7px; border-radius: 20px }
.list a, .hits a.hit { text-decoration: none }
.hits a.hit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%;
              color: var(--ink) }
.hits a.hit b { color: var(--accent) }
.list.cols { columns: 2; column-gap: 0 }
.list.cols li { break-inside: avoid }

.also { margin-top: 30px }
.also h2 { font-size: 17px }

.facts li { padding: 5px 0; color: var(--ink-2) }
.facts b { color: var(--ink) }

/* ── постранично ──────────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 0 }
.pager ol { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0 }
.pager a, .pager span, .pager .gap {
  display: block; min-width: 38px; text-align: center; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  text-decoration: none; font-size: 15px;
}
.pager .gap { border: 0; background: none; color: var(--ink-3); min-width: 20px }
.pager span[aria-current] { background: var(--accent); color: #fff; border-color: var(--accent) }
.pager .prev, .pager .next { font-weight: 600 }

/* ── подвал ───────────────────────────────────────────────────────────── */
.foot { background: var(--card); border-top: 1px solid var(--line); padding: 24px 0 34px }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; font-size: 15px }
.foot .lic { font-size: 13.5px; color: var(--ink-3); max-width: 720px; margin: 0 }

@media (max-width: 720px) {
  body { font-size: 16.5px }
  h1 { font-size: 26px }
  .hero { padding: 24px 18px }
  .hero h1 { font-size: 27px }
  .find { order: 3; margin-left: 0; flex-basis: 100% }
  /* ⛔ Главное действие сайта — поле ввода на витрине, и на телефоне от него
     оставалось около ста точек: кнопка «Bedeutung finden» стоит `nowrap` и
     забирала 185 из 342. Подсказка «z. B. BGB, KFZ, ADHS» обрывалась на второй
     букве. Кладём форму витрины в две строки — поле во всю ширину, кнопка под
     ним. Форму в шапке это не касается: там кнопка короткая («Suchen»). */
  .find.big { flex-wrap: wrap }
  .find.big input, .find.big button { flex: 1 1 100% }
  /* ⚠ Плитки витрины были `flex-wrap` с шириной по содержимому, и на телефоне
     ряд из двух вставал ступеньками: «BA | AA» ровно, «AS | AB» — первая в
     полтора раза шире. Сетка с одинаковой колонкой — тот же приём, что у
     `.cards` рядом. */
  .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) }
  .top-in { padding-bottom: 12px }
  .list.cols { columns: 1 }
  .list b, .hits b { min-width: 62px }
}