/* ============================================================
   KaufNavi - Layout: Wrapper, Kopf, Navigation, Fuss
   ============================================================ */

.kn-wrap {
  width: min(100% - 2.5rem, var(--kn-wrap));
  margin-inline: auto;
}
.kn-wrap--text { width: min(100% - 2.5rem, var(--kn-wrap-text)); }

.kn-section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.kn-section--tight { padding-block: clamp(1.8rem, 3vw, 2.8rem); }
.kn-section--paper { background: var(--kn-paper-2); }

.kn-section__head {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 1rem;
  margin-bottom: 1.8rem;
}
.kn-section__head h2 { margin: 0; }
.kn-section__lead {
  color: var(--kn-ink-2); max-width: 62ch; margin: .6rem 0 0;
  font-size: 1.02rem;
}

/* ---------------- Kopfzeile ---------------- */
.kn-topbar {
  background: var(--kn-deep);
  color: var(--kn-deep-fg-hell);
  font-size: .82rem;
  letter-spacing: .01em;
}
.kn-topbar__inner {
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  align-items: center; justify-content: center;
  padding-block: .5rem;
  text-align: center;
}
.kn-topbar__item { display: inline-flex; align-items: center; gap: .4rem; opacity: .9; }
.kn-topbar__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kn-signal); flex: none;
}

.kn-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--kn-paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--kn-line);
}
.kn-header__inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px;
}

/* Wortmarke: "Kauf" in Tinte, "Navi" im Markenblau, darunter Signalstrich */
.kn-logo {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 900; font-size: 1.32rem; letter-spacing: -.035em;
  color: var(--kn-ink); text-decoration: none; flex: none;
}
.kn-logo:hover { color: var(--kn-ink); }
.kn-logo__mark { flex: none; }
.kn-logo__navi { color: var(--kn-brand); }
.kn-logo__tld {
  font-size: .62em; font-weight: 700; letter-spacing: 0;
  color: var(--kn-ink-3); align-self: flex-end; padding-bottom: .22em;
}

/* Wortmarke plus Tagline. Die Tagline verschwindet auf schmalen Schirmen -
   dort zaehlt jeder Pixel fuer die Navigation, und der Name allein traegt. */
.kn-brand { display: flex; flex-direction: column; gap: .1rem; flex: none; }
.kn-tagline {
  margin: 0;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--kn-ink-3);
  padding-left: 2.25rem;     /* auf einer Linie mit dem Wortanfang, nicht mit dem Zeichen */
}
@media (max-width: 720px) { .kn-tagline { display: none; } }

.kn-nav { margin-left: auto; }
.kn-nav__list {
  display: flex; align-items: center; gap: .1rem;
  list-style: none; margin: 0; padding: 0;
}
.kn-nav__list a {
  display: block; padding: .55rem .72rem;
  color: var(--kn-ink-2); text-decoration: none;
  font-weight: 600; font-size: .95rem; border-radius: var(--kn-r-sm);
  white-space: nowrap;
}
.kn-nav__list a:hover { color: var(--kn-ink); background: var(--kn-paper-3); }
.kn-nav__list .current-menu-item > a,
.kn-nav__list .current_page_item > a { color: var(--kn-brand); }

/* Untermenue */
.kn-nav__list li { position: relative; }
.kn-nav__list .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 70;
  min-width: 230px; margin: 0; padding: .4rem;
  list-style: none;
  background: var(--kn-surface);
  border: 1px solid var(--kn-line);
  border-radius: var(--kn-r);
  box-shadow: var(--kn-shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.kn-nav__list li:hover > .sub-menu,
.kn-nav__list li:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.kn-nav__list .sub-menu a { padding: .5rem .65rem; font-weight: 500; }

.kn-burger {
  display: none; margin-left: auto;
  background: var(--kn-surface); border: 1px solid var(--kn-line);
  border-radius: var(--kn-r-sm); padding: .5rem .7rem;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--kn-ink);
  cursor: pointer; align-items: center; gap: .5rem;
}
.kn-burger__bars { display: grid; gap: 3px; }
.kn-burger__bars span { display: block; width: 17px; height: 2px; background: currentColor; border-radius: 2px; }

@media (max-width: 960px) {
  .kn-burger { display: inline-flex; }
  .kn-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--kn-surface); border-bottom: 1px solid var(--kn-line);
    box-shadow: var(--kn-shadow-2); padding: .6rem 1.25rem 1.1rem;
    max-height: 72vh; overflow-y: auto;
  }
  .kn-nav.is-open { display: block; }
  .kn-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .kn-nav__list a { padding: .72rem .4rem; border-bottom: 1px solid var(--kn-line); }
  .kn-nav__list .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 .3rem .9rem; background: transparent;
  }
  .kn-nav__list .sub-menu a { border-bottom: 0; padding: .45rem .4rem; color: var(--kn-ink-3); }
}

/* ---------------- Inhalt + Seitenspalte ---------------- */
.kn-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 1020px) {
  .kn-layout { grid-template-columns: minmax(0, 1fr); }
  .kn-sidebar { order: 2; }
}
/* Die Spaltenbreite ist das Bezugsmass - Prozentwerte aus einem frueheren
   Flexbox-Layout wuerden hier auf ~80px zusammenfallen. */
.kn-sidebar { width: 100%; max-width: none; flex: none; position: sticky; top: 5.5rem; }
@media (max-width: 1020px) { .kn-sidebar { position: static; } }

/* ---------------- Fusszeile ---------------- */
.kn-footer {
  background: var(--kn-deep);
  color: var(--kn-deep-fg);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  font-size: .95rem;
}
.kn-footer a { color: var(--kn-deep-fg-hell); text-decoration: none; }
.kn-footer a:hover { color: var(--kn-signal); text-decoration: underline; }
.kn-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
}
.kn-footer__col h3 {
  color: var(--kn-deep-fg-hell);   /* nie erben lassen - sonst dunkel auf dunkel */
  font-size: .82rem; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 .9rem;
}
.kn-footer__col ul { list-style: none; margin: 0; padding: 0; }
.kn-footer__col li + li { margin-top: .5rem; }
.kn-footer__note { color: var(--kn-deep-fg-matt); font-size: .88rem; line-height: 1.6; }
.kn-footer__bottom {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--kn-deep-line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  justify-content: space-between; align-items: center;
  color: var(--kn-deep-fg-matt); font-size: .86rem;
}