/* ══ Preisbereich lueftungstool.com (Website-Paket 09.10.2026, Baustein 30) ═══════════════════════════════════
   Vergleich als Tabelle ohne Balken, Nutzerzeile in den Preiskarten, Zeitleiste „ab wann guenstiger“ und der
   sichtbare Umschalter monatlich/jaehrlich. Ergaenzt app.css (nur deren Tokens), ersetzt .ptable.
   CSP: keine Inline-Styles; die Grenze der Zeitleiste setzt app.js per CSSOM (--grenze).
   ════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Regler und Zahlungsweise nebeneinander (bis 820 px untereinander) ──
   Ohne JavaScript bleibt #ptakt verborgen, der Regler nimmt dann die ganze Breite. */
.pusers{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 28px;max-width:860px;}
.pusers:has(> .ptakt[hidden]){grid-template-columns:minmax(0,1fr);}
.ptakt{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:10px 12px;
  margin-top:0;padding:0 0 0 28px;border-top:0;border-left:1px solid var(--line);}
.ptakt > .ctrl__lab{grid-column:1 / -1;}
/* Hinweis als Pille (wie die Marke „günstiger“): --brand-strong auf --brand-soft */
.ptakt__gratis{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--brand-soft);
  color:var(--brand-strong);font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;}

/* ── Preiskarten: für wie viele Nutzer der Preis gilt, immer direkt unter dem Titel ── */
.pcard__fuer{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:15px;font-weight:600;line-height:1.35;color:var(--brand-strong);}
.pcard__fuer .i{width:17px;height:17px;}
.pcard__fuer + .pcard__amt{margin-top:10px;}

/* ── Vergleich Mieten / Kaufen ── */
.vgl{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;}
.vgl__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:22px 28px 16px;}
.vgl__titel{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.01em;}
.vgl__eck{font-weight:500;color:var(--text);}
.vgl__dot{padding:0 .4em 0 .1em;color:var(--line-strong);}
.vgl__fazit{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 11px;border-radius:999px;background:var(--brand-soft);
  color:var(--brand-strong);font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;}
.vgl__fazit .i{width:16px;height:16px;stroke-width:2.2;}

/* Zeitleiste ueber 3 Jahre: links Mieten guenstiger (grau), rechts Kaufen guenstiger (Markenfarbe) */
.vgl__zeit{--grenze:63.889%;padding:0 28px 20px;}
.vgl__balken{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--surface-2);}
.vgl__balken-m{flex:none;width:var(--grenze);background:var(--line-strong);}
.vgl__balken-k{flex:1;background:var(--brand);border-left:2px solid var(--surface);}
.vgl__achse{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums;}
.vgl__achse span:first-child{position:absolute;left:0;top:0;}
.vgl__achse span + span{text-align:right;padding-right:6px;border-right:1px solid var(--line-strong);}
.vgl__legende{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:10px;font-size:14px;color:var(--text);}
.vgl__leg{display:inline-flex;align-items:center;gap:8px;}
.vgl__leg::before{content:'';flex:none;width:12px;height:12px;border-radius:3px;background:var(--line-strong);}
.vgl__leg--k::before{background:var(--brand);}
.vgl__leg b{font-weight:600;color:var(--ink);}

/* Tabelle: nur Zahlenzeilen, der guenstigere Betrag einer Summenzeile traegt das Wort „günstiger“ */
.vgl__tab{width:100%;border-collapse:collapse;table-layout:fixed;font-size:15px;}
.vgl__tab th,.vgl__tab td{padding:13px 28px;text-align:left;vertical-align:middle;}
.vgl__tab thead th{padding-top:11px;padding-bottom:11px;background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:13.5px;font-weight:600;color:var(--dim);}
.vgl__tab thead th + th{font-size:14.5px;color:var(--ink);}
.vgl__ecke{width:30%;}
.vgl__tab tbody th,.vgl__tab tbody td{border-bottom:1px solid var(--line);}
.vgl__tab tbody th{font-weight:600;color:var(--ink);}
.vgl__k{display:block;font-size:15px;line-height:1.3;}
.vgl__tab tbody th small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--dim);line-height:1.3;}
.vgl__sum tr:first-child th,.vgl__sum tr:first-child td{border-top:1px solid var(--line-strong);}
.vgl__sum tr:last-child th,.vgl__sum tr:last-child td{border-bottom:0;}
.vgl__w{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;}
.vgl__v{font:600 19px/1.25 var(--f-sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.vgl__n{font-size:13.5px;color:var(--dim);}
.vgl__pill{align-self:center;padding:1px 9px;border-radius:999px;background:var(--brand-soft);color:var(--brand-strong);font-size:12.5px;font-weight:600;line-height:1.6;}

/* Bedingungen im Spaltenraster der Tabelle (30 % | 35 % | 35 %) */
.vgl__bed{display:grid;grid-template-columns:30% 35% 35%;margin:0;background:var(--bg-alt);border-top:1px solid var(--line);}
.vgl__bed > div{min-width:0;padding:15px 28px 16px;}
.vgl__bed dt{font-size:13px;font-weight:600;color:var(--dim);}
.vgl__bed dd{margin:3px 0 0;font-size:14.5px;line-height:1.45;color:var(--ink);}

/* Ueber 100 Nutzer: statt Tabelle ein Angebotshinweis */
.vgl__ent{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding:20px 28px 24px;border-top:1px solid var(--line);}
.vgl__ent p{max-width:560px;font-size:15px;color:var(--text);}

/* Ansage fuer Screenreader (sichtbar nur fuer Hilfsmittel) */
.vgl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ── Tablet ── */
@media (max-width:1060px){
  .vgl__kopf,.vgl__zeit{padding-left:22px;padding-right:22px;}
  .vgl__tab th,.vgl__tab td{padding-left:22px;padding-right:22px;}
  .vgl__bed > div{padding-left:22px;padding-right:22px;}
}
@media (max-width:820px){
  /* Karten untereinander (Ergaenzung 09.10.2026 abends): Das Etikett der Kauf-Karte ragt ueber die Karte. Mit 28 px
     Abstand hat es darueber 17 px Luft wie „Empfohlen“ unter dem Regler-Kasten (.pusers margin-bottom 28 px); vorher
     16 px Abstand und 5 px Luft (Browserprobe 09.10.2026). */
  .price{row-gap:28px;}
  .pusers{grid-template-columns:minmax(0,1fr);gap:16px;}
  .ptakt{display:flex;flex-wrap:wrap;padding:16px 0 0;border-left:0;border-top:1px solid var(--line);}
  .ptakt > .ctrl__lab{flex:1 0 100%;}
}

/* ── Handy: Zeilen als Karten (Mieten | Kaufen nebeneinander), kein waagrechtes Scrollen.
   Die Tabelle bleibt im DOM eine Tabelle (role-Attribute), auch wenn display wechselt. ── */
@media (max-width:680px){
  .vgl{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;}
  .vgl__kopf{display:block;padding:0 0 12px;}
  .vgl__titel{font-size:20px;}
  .vgl__eck{display:block;margin-top:3px;font-size:16px;}
  .vgl__dot{display:none;}
  .vgl__fazit{margin-top:12px;white-space:normal;}
  .vgl__zeit{padding:4px 0 16px;}
  .vgl__legende{flex-direction:column;gap:4px;}

  .vgl__tab,.vgl__tab tbody,.vgl__tab tr,.vgl__tab th,.vgl__tab td{display:block;}
  .vgl__tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
  .vgl__tab tbody{display:grid;gap:10px;}
  .vgl__sum{margin-top:10px;}
  .vgl__tab tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 16px;padding:14px 16px 16px;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);}
  .vgl__tab tbody th{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:0;border:0;}
  .vgl__tab tbody td{position:relative;padding:0;border:0;}
  .vgl__sum tr:first-child th,.vgl__sum tr:first-child td{border-top:0;}
  .vgl__tab tbody th small{margin:0;}
  .vgl__tab tbody td::before{content:attr(data-opt);content:attr(data-opt) / "";display:block;margin-bottom:2px;font-size:12.5px;font-weight:600;color:var(--dim);}
  .vgl__pill{position:absolute;top:-1px;right:0;padding:0 7px;font-size:11.5px;line-height:1.55;}
  .vgl__v{font-size:18px;}
  .vgl__n{flex-basis:100%;font-size:13px;}

  .vgl__ent{padding:18px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
  .vgl__ent .btn{width:100%;}
  .vgl__bed{grid-template-columns:1fr;margin-top:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
  .vgl__bed > div{padding:12px 16px 13px;}
  .vgl__bed > div + div{border-top:1px solid var(--line);}
}