/* Laptop-Kategorie: Textteil unter den Preisen (app/views/partials/kategorie/laptop.php). Präfix lk-. */
.lk-raster { display: grid; gap: 48px; }
/* Rechte Spalte: Tabelle steht, der Ablaufkasten darunter läuft neben dem langen Text mit */
.lk-seite { display: grid; gap: 40px; align-content: start; }
@media (min-width: 1000px) {
  .lk-raster { grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
  .lk-seite { align-self: stretch; }
}
/* mitlaufend nur, wenn der Kasten ganz ins Fenster passt – sonst bliebe sein Knopf bis zum Ende des Abschnitts verdeckt */
@media (min-width: 1000px) and (min-height: 760px) {
  .lk-ablauf { position: sticky; top: calc(var(--kopf-h) + 24px); }
}
.lk-text > p:not(.gross):not(.etikett) { max-width: 64ch; }
.lk-zwischen { margin-top: 1.6em; }
.lk-preise .lk-zwischen { margin-top: 0; }

.lk-katalog { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--schwarz); }
.lk-katalog li { padding: 18px 0 16px; border-bottom: 1px dashed var(--alu); }
.lk-katalog p { margin: 0 0 .4em; max-width: 64ch; }
.lk-katalog p:last-child { margin-bottom: 0; }
.lk-katalog .lk-katalog__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; max-width: none; font: 700 1.15rem/1.2 var(--din); }
.lk-katalog__preis { color: var(--rot); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lk-katalog__fakten { font-size: .9rem; color: var(--stahl); }

.lk-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.lk-tabelle__modell { width: 43%; }
.lk-tabelle th, .lk-tabelle td { padding: 11px 6px; border-bottom: 1px solid var(--alu); text-align: right; vertical-align: baseline; }
.lk-tabelle th:first-child { text-align: left; padding-left: 0; }
.lk-tabelle td:last-child { padding-right: 0; }
.lk-tabelle thead th { font: 400 .72rem var(--din); letter-spacing: .12em; text-transform: uppercase; color: var(--stahl); border-bottom: 2px solid var(--schwarz); padding-block: 0 10px; }
.lk-tabelle tbody th { font-weight: 600; font-size: .98rem; line-height: 1.3; }
.lk-tabelle a { text-decoration: none; }
.lk-tabelle a:hover { text-decoration: underline; }
.lk-tabelle td { font: 700 1rem var(--din); white-space: nowrap; }
.lk-tabelle td a { color: var(--rot); }
.lk-tabelle__leer { color: var(--alu); font-weight: 400; }
.lk-fussnote { font-size: .9rem; color: var(--stahl); margin-top: 12px; }
/* Baureihen-Tabelle der Kategorieseite: Preise ohne Link, „ab“ klein, Modellzahl unter dem Namen */
.lk-tabelle--reihen .lk-tabelle__modell { width: 38%; }
.lk-tabelle--reihen td { color: var(--rot); }
.lk-tabelle__klein { display: block; margin-top: 3px; font: 400 .8rem/1.3 var(--sans); color: var(--stahl); }
.lk-ab { font: 400 .78em var(--sans); color: var(--stahl); }
.lk-katalog code { white-space: nowrap; }

.lk-karten { margin-top: clamp(56px, 3rem + 3vw, 96px); }

@media (max-width: 599px) {
  .lk-tabelle, .lk-tabelle tbody { display: block; }
  .lk-tabelle colgroup { display: none; }
  .lk-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lk-tabelle tbody { border-top: 2px solid var(--schwarz); }
  .lk-tabelle tr { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--alu); }
  .lk-tabelle th, .lk-tabelle td { border: 0; padding: 0; text-align: left; }
  .lk-tabelle tbody th { grid-column: 1 / -1; padding-bottom: 6px; }
  .lk-tabelle td::before { content: attr(data-label); display: block; font: 400 .8rem var(--sans); color: var(--stahl); }
}
.lk-nw { white-space: nowrap; }