/* Knowledge base (/it-sicherheit/ and /it-sicherheit/<term>/).
   Same language as the offer pages: big Inter headlines with a grey second
   clause, hairline lists, no cards, no chips, no uppercase labels. */

.kb {
  --kb-strong: var(--text-primary, #f4f5f7);
  --kb-text: var(--text-body, #b4bac3);
  --kb-dim: var(--text-secondary, #8c939e);
  --kb-muted: var(--text-muted, #666d77);
  --kb-line: rgba(255, 255, 255, .1);
  --kb-line-strong: rgba(255, 255, 255, .22);
  --kb-wrap: 1180px;
  --kb-gutter: clamp(20px, 4vw, 64px);
  color: var(--kb-text);
}
.kb-wrap { max-width: var(--kb-wrap); margin: 0 auto; padding: 0 var(--kb-gutter); }
.kb-wrap--text { max-width: calc(46rem + 2 * var(--kb-gutter)); }

.kb-crumb { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.2rem; font-size: .84rem; color: var(--kb-muted); }
.kb-crumb a { color: var(--kb-dim); text-decoration: none; }
.kb-crumb a:hover, .kb-crumb a:focus-visible { color: var(--kb-strong); }

/* ---------- Hub ---------- */
.kb-hero { padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.kb-h1 { margin: 0; max-width: 17ch; font-size: clamp(2.6rem, 7vw, 5.4rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; color: var(--kb-strong); }
.kb-h1 span { display: block; color: var(--kb-dim); }
.kb-lead { margin: 1.6rem 0 0; max-width: 34rem; font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.5; color: var(--kb-dim); }

.kb-search { position: relative; margin: clamp(2.2rem, 5vw, 3.4rem) 0 0; max-width: 46rem; }
.kb-search-input {
  width: 100%;
  padding: .7rem 5rem .8rem 0;
  border: 0;
  border-bottom: 1px solid var(--kb-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--kb-strong);
  font-family: inherit;
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.015em;
  -webkit-appearance: none;
  appearance: none;
}
.kb-search-input::placeholder { color: var(--kb-muted); }
.kb-search-input:focus { outline: none; border-bottom-color: var(--kb-strong); }
.kb-search-input:focus-visible { outline: none; border-bottom: 2px solid var(--kb-strong); }
.kb-search-input::-webkit-search-cancel-button { display: none; }
.kb-search-clear { position: absolute; right: 0; top: .95rem; padding: .2rem 0; border: 0; background: none; color: var(--kb-dim); font: inherit; font-size: .9rem; cursor: pointer; }
.kb-search-clear:hover, .kb-search-clear:focus-visible { color: var(--kb-strong); }
.kb-count { min-height: 1.3em; margin: .7rem 0 0; font-size: .86rem; color: var(--kb-muted); }

.kb-popular { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.3rem; margin: 1.2rem 0 0; font-size: .92rem; color: var(--kb-muted); }
.kb-popular a { color: var(--kb-dim); text-decoration: none; }
.kb-popular a:hover, .kb-popular a:focus-visible { color: var(--kb-strong); text-decoration: underline; text-underline-offset: 4px; }

.kb-index { padding: 0 0 clamp(4rem, 8vw, 6.5rem); }
.kb-tabs {
  position: sticky;
  top: var(--visible-header-height, 72px);
  z-index: 3;
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 1rem 0 0;
  border-bottom: 1px solid var(--kb-line);
  background: var(--bg-page, #050607);
  overflow-x: auto;
  scrollbar-width: none;
}
.kb-tabs::-webkit-scrollbar { display: none; }
.kb-tab {
  flex: 0 0 auto;
  margin: 0 0 -1px;
  padding: .3rem 0 .9rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--kb-dim);
  font: inherit;
  font-size: .98rem;
  font-weight: 500;
  cursor: pointer;
}
.kb-tab small { margin-left: .25rem; font-size: .8em; color: var(--kb-muted); }
.kb-tab:hover, .kb-tab:focus-visible { color: var(--kb-strong); }
.kb-tab.is-active { color: var(--kb-strong); border-bottom-color: var(--kb-strong); }

.kb-group { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.kb-group[hidden] { display: none; }
.kb-group-title { margin: 0 0 1rem; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: var(--kb-strong); }
.kb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); margin: 0; padding: 0; list-style: none; }
.kb-list li { border-top: 1px solid var(--kb-line); }
.kb-list li[hidden] { display: none; }
.kb-list a { display: block; padding: 1.05rem 0 1.15rem; color: inherit; text-decoration: none; }
.kb-list strong { display: block; color: var(--kb-strong); font-size: 1.08rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.kb-list span { display: block; margin-top: .3rem; color: var(--kb-dim); font-size: .92rem; line-height: 1.5; }
.kb-list a:hover strong, .kb-list a:focus-visible strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.kb-list a:focus-visible { outline: 2px solid var(--kb-strong); outline-offset: 4px; }
.kb-empty { margin: 2rem 0 0; font-size: 1.1rem; color: var(--kb-dim); }
.kb-empty a { color: var(--kb-strong); }

/* ---------- Shared: call to action, sources ---------- */
.kb-cta { padding: clamp(4rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--kb-line); }
.kb-cta-title { margin: 0; max-width: 22ch; font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; color: var(--kb-strong); }
.kb-cta-title span { display: block; margin-top: .25em; color: var(--kb-dim); }
.kb-btn {
  display: inline-flex; align-items: center; min-height: 50px; margin-top: 2rem; padding: 0 1.4rem;
  background: var(--kb-strong); color: #050607; font-weight: 600; font-size: .98rem; text-decoration: none;
}
.kb-btn:hover, .kb-btn:focus-visible { background: #fff; }
.kb-btn:focus-visible { outline: 2px solid var(--kb-strong); outline-offset: 3px; }

.kb-foot { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--kb-line); }
.kb-foot-title { margin: 0 0 1rem; font-size: 1.1rem; font-weight: 600; color: var(--kb-strong); }
.kb-sources { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.kb-sources a { color: var(--kb-dim); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.2); }
.kb-sources a:hover { color: var(--kb-strong); }
.kb-note { margin: 1.6rem 0 0; max-width: 46rem; font-size: .8rem; line-height: 1.6; color: var(--kb-muted); }
.kb-note a { color: var(--kb-dim); }

/* ---------- Term page ---------- */
.kb-term { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2rem, 4vw, 3rem); }
.kb-term-h1 { margin: 0; font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 700; line-height: .98; letter-spacing: -.045em; color: var(--kb-strong); }
.kb-term-h1 span { display: block; margin-top: .12em; font-size: .56em; line-height: 1.1; letter-spacing: -.03em; color: var(--kb-dim); }
.kb-answer { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; max-width: 40rem; font-size: clamp(1.15rem, 2.1vw, 1.45rem); line-height: 1.5; letter-spacing: -.01em; color: var(--kb-strong); }
.kb-meta { margin: 1.4rem 0 0; font-size: .86rem; color: var(--kb-muted); }
.kb-meta a { color: var(--kb-dim); }

.kb-body { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--kb-line); }
.kb-body p { margin: 0 0 1.15rem; max-width: 40rem; font-size: 1.05rem; line-height: 1.7; color: var(--kb-text); }
.kb-body h2 { margin: 3rem 0 1rem; font-size: clamp(1.45rem, 2.8vw, 1.95rem); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; color: var(--kb-strong); }
.kb-body ul { margin: 0 0 1.4rem; padding: 0; max-width: 40rem; list-style: none; border-top: 1px solid var(--kb-line); }
.kb-body li { padding: .85rem 0; border-bottom: 1px solid var(--kb-line); font-size: 1.02rem; line-height: 1.55; color: var(--kb-text); }
.kb-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin: 2rem 0 0; }
.kb-links a { color: var(--kb-strong); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.3); }
.kb-links a:hover { text-decoration-color: var(--kb-strong); }
.kb-src { margin: 2rem 0 0; font-size: .86rem; color: var(--kb-muted); }
.kb-src a { color: var(--kb-dim); }

.kb-related { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--kb-line); }
.kb-related-title { margin: 0 0 1.2rem; font-size: clamp(1.4rem, 2.6vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; color: var(--kb-strong); }
.kb-back { display: inline-block; margin-top: 2rem; color: var(--kb-dim); font-size: .95rem; text-decoration: none; }
.kb-back:hover, .kb-back:focus-visible { color: var(--kb-strong); }

@media (max-width: 760px) {
  .kb-list { grid-template-columns: minmax(0, 1fr); }
  .kb-tabs { gap: 1.2rem; }
}

.kb .wx-sronly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }