/* Legal pages of draft 3 (impressum.html, datenschutz.html), 24.09.2026: plain reading layout in the site's type and
   colours. Sticky side column with the switch between the two pages and the table of contents, text column on the right.
   Builds on the .kq base styles from kern-qualitaet.css. */

.kr { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 46rem); gap: 6vw; justify-content: center; align-items: start; }

/* side column */
.kr-side { position: sticky; top: 120px; display: flex; flex-direction: column; gap: 28px; }
.kr-switch { display: flex; padding: 4px; border-radius: 10px; background: var(--kq-grey); }
.kr-switch a { flex: 1; padding: 11px 12px; border-radius: 7px; text-align: center; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--kq-dark); transition: background-color .2s, color .2s; }
.kr-switch a:hover { background: #fff; }
.kr-switch a[aria-current="page"] { background: var(--kq-green); color: #fff; }
.kr-toc h2 { margin: 0 0 10px; font-family: var(--_typography---font--body-font); font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: rgba(6, 44, 34, .6); }
.kr-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid rgba(4, 56, 42, .14); }
.kr-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: 15px; line-height: 1.35; color: rgba(6, 44, 34, .78); text-decoration: none; transition: color .2s, border-color .2s; }
.kr-toc a:hover { color: var(--kq-green); border-left-color: var(--kq-green); }
.kr-ask { padding: 22px; border-radius: var(--_sizes---radius--md-radius); background: var(--kq-green); color: #fff; }
.kr-ask b { display: block; margin-bottom: 8px; font-size: 17px; font-weight: 500; }
.kq .kr-ask p { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.kr-ask a { display: block; margin-top: 12px; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.kr-ask a + a { margin-top: 4px; }
.kr-ask a:hover { color: var(--kq-yellow); }

/* text column */
.kr-body .tag-wrap { margin-bottom: 22px; }
.kr-lead { margin-top: 1.2rem !important; max-width: 40rem; color: rgba(6, 44, 34, .78); }
.kr-stand { margin-top: .8rem !important; font-size: 15px !important; color: rgba(6, 44, 34, .55); }
.kr-part { margin-top: 3.2rem; padding-top: 2.4rem; border-top: 1px solid rgba(4, 56, 42, .14); scroll-margin-top: 110px; }
.kr-part h3 { margin-bottom: 1rem; }
.kr-part p + p, .kr-part ul + p, .kr-part p + ul, .kr-part p + address, .kr-part address + p { margin-top: 1em; }
/* the facts table already ends with a line, so the first text block after it needs none */
.kr-facts + .kr-part { border-top: 0; padding-top: 0; }
.kr-part ul { margin: 0; padding: 0; list-style: none; }
.kr-part li { position: relative; padding-left: 22px; font-size: 17px; line-height: 1.6; }
.kr-part li + li { margin-top: 4px; }
.kr-part li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--kq-green); }
.kr-part address { font-style: normal; font-size: 17px; line-height: 1.6; }
.kr-body a:not(.kq-btn) { color: var(--kq-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kr-body a:not(.kq-btn):hover { color: var(--kq-dark); }

/* impressum: company facts as label/value rows */
.kr-facts { margin: 2.4rem 0 0; border-top: 1px solid rgba(4, 56, 42, .14); }
.kr-facts > div { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem; padding: 18px 0; border-bottom: 1px solid rgba(4, 56, 42, .14); }
.kr-facts dt { font-size: 16px; color: rgba(6, 44, 34, .6); }
.kr-facts dd { margin: 0; font-size: 17px; line-height: 1.6; }
.kr-facts dd b { font-weight: 500; color: var(--kq-dark); }

@media (max-width: 991px) {
  .kr { grid-template-columns: 1fr; gap: 40px; }
  .kr-side { position: static; }
  .kr-toc, .kr-ask { display: none; }
  .kr-switch { max-width: 24rem; }
}
@media (max-width: 767px) {
  .kr-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .kr-part { margin-top: 2.4rem; padding-top: 2rem; }
}