/* Die Preisseite — dieselbe Zeichnungssprache wie die Startseite.
   ================================================================================================

   Sie erbt Palette, Schriften, Kopf- und Fusszeile von docs-shell.css und setzt nur das, was hier
   anders ist: die Tabellen. Auf einer Preisseite IST die Tabelle die Zeichnung -- sie ist nicht
   Beiwerk zu einem Text, sie ist der Inhalt.

   Deshalb keine Karten nebeneinander. Drei Karten mit einer hervorgehobenen Mitte sind die
   Standardantwort auf jede Preisseite, und sie zwingen dazu, Zeilen wegzulassen, damit die Karte
   nicht zu hoch wird. Eine Tabelle vergleicht, was Karten nur behaupten: man liest eine Spalte von
   oben nach unten und sieht, was sich zwischen zwei Tarifen wirklich aendert.

   AUF DEM TELEFON wird jede Zeile ein Block und jede Zelle bekommt ihre Beschriftung aus
   `data-l` vorangestellt. Eine Preistabelle, die man seitlich schieben muss, wird nicht gelesen --
   und sieben Spalten passen auf kein Telefon.
*/

.pm-main { max-width: var(--sheet); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Aufmacher ---------- */
.pm-hero { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 44px); border-bottom: 1px solid var(--rule); }
.pm-kicker {
  margin: 0 0 14px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--g2);
}
.pm-hero h1 {
  margin: 0 0 18px; font-size: clamp(30px, 5vw, 50px); font-weight: 600;
  line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; text-wrap: pretty;
}
.pm-lede { margin: 0 0 26px; max-width: 66ch; font-size: 17px; color: var(--g1); }
.pm-lede b { color: var(--paper); font-weight: 600; }
.pm-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0; }
.pm-quiet {
  font-family: var(--mono); font-size: 13px; color: var(--g2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.pm-quiet:hover { color: var(--paper); }

/* ---------- Blatt ---------- */
.pm-sheet { padding: clamp(36px, 5vw, 52px) 0; border-bottom: 1px solid var(--rule-soft); }
.pm-sheet h2 {
  margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.012em;
}
.pm-sub { margin: 0 0 22px; max-width: 68ch; color: var(--g1); }
.pm-ledger {
  margin: 14px 0 0; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .02em; color: var(--g3);
}

/* ---------- die Zeichnung: die Tabelle ---------- */
.pm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pm thead th {
  font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g3); text-align: left;
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--rule);
}
.pm tbody td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.pm tbody tr:last-child td { border-bottom: 0; }
.pm-plan { font-weight: 600; white-space: nowrap; color: var(--paper); }
.pm-price { font-family: var(--mono); white-space: nowrap; color: var(--paper); }
.pm-was { color: var(--g3); text-decoration: line-through; margin-left: 8px; font-size: 12.5px; }
.pm-spec { font-family: var(--mono); font-size: 13px; color: var(--g1); white-space: nowrap; }
.pm-note { color: var(--g2); }

/* Die eine hervorgehobene Zeile je Tabelle. Kein Rahmen und kein Etikett "beliebt" -- nur eine
   Flaeche, die etwas heller sitzt. Ein Aufkleber behauptet etwas ueber andere Leute; eine Flaeche
   sagt nur "hier schauen die meisten zuerst hin". */
.pm tbody tr.pm-mark td { background: var(--panel); }
.pm tbody tr.pm-mark td:first-child { box-shadow: -12px 0 0 var(--panel); }
.pm tbody tr.pm-mark td:last-child { box-shadow: 12px 0 0 var(--panel); }

/* ---------- die Figur ---------- */
.pm-fig {
  border: 1px dashed var(--rule); padding: 20px 22px;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65; color: var(--paper);
}
.pm-cap {
  margin: 0 0 14px; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g3);
}
.pm-fig p { margin: 0 0 10px; }
.pm-fig p:last-child { margin: 0; }
.pm-k { color: var(--g2); }

/* ---------- die Regeln ---------- */
/* Kalibermarken statt Aufzaehlungspunkten, wie auf der Startseite: die letzte Regel bekommt das
   abschliessende Zeichen, damit die Liste sichtbar endet statt einfach aufzuhoeren. */
.pm-rules { list-style: none; padding: 0; margin: 0; max-width: 74ch; }
.pm-rules li {
  position: relative; padding: 11px 0 11px 24px;
  border-bottom: 1px solid var(--rule-soft); color: var(--g1);
}
.pm-rules li:last-child { border-bottom: 0; }
.pm-rules li::before {
  content: "├"; position: absolute; left: 0; top: 11px;
  font-family: var(--mono); color: var(--g3);
}
.pm-rules li:last-child::before { content: "└"; }

.pm-scale { max-width: 74ch; color: var(--g1); margin: 0; }
.pm-scale b { color: var(--paper); font-weight: 600; }

.pm-end { padding: clamp(44px, 6vw, 72px) 0; }
.pm-end h2 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.012em; }

/* ---------- Telefon ---------- */
/* Sieben Spalten passen auf kein Telefon, und eine Preistabelle, die man seitlich schieben muss,
   wird nicht gelesen. Jede Zeile wird deshalb ein Block, und jede Zelle stellt sich ihre
   Beschriftung aus `data-l` voran -- sonst stuenden dort sieben Zahlen ohne Bedeutung. */
@media (max-width: 760px) {
  .pm table, .pm thead, .pm tbody, .pm tr, .pm td { display: block; }
  .pm thead { position: absolute; left: -9999px; }
  .pm tbody tr { border-bottom: 1px solid var(--rule-soft); padding: 14px 0; }
  .pm tbody tr:last-child { border-bottom: 0; }
  .pm tbody td { border: 0; padding: 3px 0; white-space: normal; }
  .pm-spec { white-space: normal; }
  .pm tbody td[data-l]::before {
    content: attr(data-l) " ";
    font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--g3); display: inline-block; min-width: 9.5em;
  }
  .pm-plan { font-size: 17px; padding-bottom: 6px; }
  .pm-plan::before { content: none; }
  .pm tbody tr.pm-mark td { background: none; }
  .pm tbody tr.pm-mark td:first-child, .pm tbody tr.pm-mark td:last-child { box-shadow: none; }
  .pm tbody tr.pm-mark { background: var(--panel); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
}