/* drivebro — Pakete und Karte (pakete.js), Preismodell Private nach KORREKTUR 8. Klassen mit Präfix pk-.
   Die Vorschau mit Premium-Banner braucht zusätzlich paket-optik.css. */
.pk-pakete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pk-paket{position:relative;display:flex;cursor:pointer}
.pk-paket input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pk-paket input:disabled{cursor:not-allowed}
.pk-inhalt{display:flex;flex-direction:column;gap:8px;width:100%;padding:20px 18px 18px;border:1.5px solid var(--linie);border-radius:18px;background:#fff;transition:border-color .2s,box-shadow .2s}
.pk-paket:hover .pk-inhalt{border-color:var(--akzent-hell)}
.pk-paket input:checked+.pk-inhalt{border-color:var(--akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 16%,transparent),0 10px 28px rgba(40,40,35,.08)}
.pk-paket input:focus-visible+.pk-inhalt{outline:3px solid color-mix(in srgb,var(--akzent) 45%,transparent);outline-offset:2px}
.pk-paket input:disabled+.pk-inhalt{opacity:.55}
.pk-kopf{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pk-name{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--tinte)}
.pk-etikett{padding:3px 9px;border-radius:999px;background:var(--gruen-flaeche);color:var(--gruen);font-size:12px;font-weight:700}
.pk-beliebt{background:var(--flaeche);color:var(--akzent-dunkel)}
.pk-preis{font-size:15px;color:var(--sub)}
.pk-preis strong{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--tinte)}
.pk-paket:first-child .pk-preis strong{color:var(--gruen)}
.pk-preis-unter{margin-top:-6px;font-size:13.5px;color:var(--grau)}
.pk-liste{display:grid;gap:6px;margin-top:6px;padding-top:12px;border-top:1px solid var(--linie);font-size:14px;color:var(--text)}
.pk-liste span{display:flex;gap:7px;align-items:flex-start}
.pk-liste .ic{flex:none;width:15px;height:15px;margin-top:3px;color:var(--akzent)}
.pk-wahl{margin-top:auto;padding-top:12px;font-weight:700;font-size:14.5px;color:var(--akzent)}
.pk-wahl .pk-ja{display:none}
.pk-paket input:checked+.pk-inhalt .pk-ja{display:inline-flex;align-items:center;gap:6px}
.pk-paket input:checked+.pk-inhalt .pk-nein{display:none}
.pk-paket input:checked+.pk-inhalt .pk-wahl{color:var(--gruen)}

.pk-vergleich-rahmen{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pk-vergleich{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.pk-vergleich th,.pk-vergleich td{padding:10px 10px 10px 0;border-bottom:1px solid var(--linie);text-align:left;vertical-align:top}
.pk-vergleich thead th{font-size:14.5px;color:var(--tinte);border-bottom:1.5px solid var(--linie-stark)}
.pk-vergleich tbody th{font-weight:600;color:var(--sub);width:34%}
.pk-vergleich td{color:var(--tinte)}
.pk-vergleich-notiz{margin:10px 0 0;font-size:13.5px;color:var(--grau)}

.pk-karte{display:grid;gap:12px;padding:18px;border:2px dashed #E5A64A;border-radius:16px;background:#FFF9EE}
.pk-demo-titel{display:flex;align-items:center;gap:8px;margin:0;font-weight:800;color:#7A4A00}
.pk-demo-titel .ic{width:18px;height:18px}
.pk-demo-text{margin:0;font-size:13.5px;color:#7A4A00}
.pk-felder{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.pk-karte [aria-invalid=true]{border-color:var(--rot)!important}
.pk-fehler{font-size:13.5px;font-weight:600;color:var(--rot)}
.pk-fehler:empty{display:none}
.pk-live{border-style:solid;border-color:var(--linie);background:#fff}
.pk-live-text{margin:0;font-size:14px;color:var(--sub)}
.pk-stripe{min-height:48px;border:1.5px solid var(--linie);border-radius:12px;background:var(--weiss)}

/* Premium-Sichtbarkeit: Schalter, Leistungen, Vorschau */
.pk-premium{display:grid;gap:14px;margin-top:14px;padding:18px;border:1.5px solid var(--linie);border-radius:18px;background:#fff;transition:border-color .2s,box-shadow .2s}
.pk-premium.an{border-color:var(--akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--akzent) 16%,transparent),0 10px 28px rgba(40,40,35,.08)}
.pk-schalter{position:relative;display:flex;align-items:center;gap:14px;cursor:pointer}
.pk-schalter input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.pk-schiene{position:relative;flex:none;width:50px;height:30px;border-radius:999px;background:var(--linie-stark);transition:background .2s}
.pk-schiene span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(40,40,35,.22);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.pk-schalter input:checked+.pk-schiene{background:var(--akzent)}
.pk-schalter input:checked+.pk-schiene span{transform:translateX(20px)}
.pk-schalter input:focus-visible+.pk-schiene{outline:3px solid color-mix(in srgb,var(--akzent) 45%,transparent);outline-offset:2px}
.pk-schalter input:disabled+.pk-schiene{opacity:.5}
.pk-schalter input:disabled~.pk-schalter-text{cursor:not-allowed}
.pk-schalter-text{display:grid;gap:2px;min-width:0}
.pk-schalter-text strong{font-size:16px;color:var(--tinte)}
.pk-schalter-text small{font-size:13.5px;color:var(--grau)}
.pk-premium-inhalt{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:start}
.pk-premium-liste{margin-top:0}
.pk-vorschau{margin:0;display:grid;gap:8px}
.pk-vorschau figcaption{font-size:13px;color:var(--grau)}
.pk-vorschau-karte{pointer-events:none}
/* Vorstart (zahlungen:false): sichtbar, aber nicht wählbar */
.pk-gesperrt{cursor:default}
.pk-paket.pk-gesperrt:hover .pk-inhalt{border-color:var(--linie)}
.pk-paket.pk-gesperrt input:disabled+.pk-inhalt{opacity:1}
.pk-paket.pk-gesperrt .pk-liste,.pk-paket.pk-gesperrt .pk-preis,.pk-paket.pk-gesperrt .pk-kopf{opacity:.6}
.pk-premium.pk-gesperrt .pk-schalter,.pk-premium.pk-gesperrt .pk-premium-inhalt{opacity:.6}
.pk-premium.pk-gesperrt .pk-schalter{cursor:default}
.pk-vorstart{display:flex;gap:8px;align-items:flex-start;margin-top:auto;padding:10px 12px;border-radius:12px;background:var(--flaeche);font-size:13.5px;line-height:1.45;color:var(--akzent-dunkel)}
.pk-vorstart .ic{flex:none;width:16px;height:16px;margin-top:2px}
.pk-premium .pk-vorstart{margin-top:0}
.pk-vorschau-karte .fz{margin:0}
.pk-vorschau-karte .fz-version,.pk-vorschau-karte .fz-fakten,.pk-vorschau-karte .fz-fuss,.pk-vorschau-karte .fz-leasing{display:none}

.pk-premium-inhalt.pk-ohne-vorschau{grid-template-columns:minmax(0,1fr)}

/* Vorschau je Paket nebeneinander (Pakete.vorschauReihe): echte Inseratkarte aus Occ.karte, Optik aus basis.css «Inseratkarten».
   Spalten passen sich der Breite an (drei nebeneinander, sonst zwei oder eine); Trefferliste untereinander wie in der Suche. */
.pk-pv-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:clamp(16px,2vw,24px);align-items:start}
.pk-pv{margin:0;display:grid;gap:10px;min-width:0}
/* Kopf und Karte als gemeinsame Zeilen: bricht ein Kopf um (schmale Spalte, Umschalter), stehen die Karten trotzdem auf einer Höhe */
@supports (grid-template-rows:subgrid){.pk-pv{grid-row:span 2;grid-template-rows:subgrid;row-gap:10px}.pk-pv-zeilen .pk-pv{row-gap:0}}
.pk-pv-kopf{display:flex;align-items:center;align-content:flex-start;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;min-height:34px}
.pk-pv-name{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--tinte)}
.pk-pv-wahl{padding:3px 9px;border-radius:999px;background:var(--akzent);color:#fff;font-size:12px;font-weight:700;line-height:1.3}
.pk-pv-zu{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--flaeche)}
.pk-pv-zu button{border:0;background:none;padding:5px 11px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2;color:var(--grau);cursor:pointer}
.pk-pv-zu button[aria-pressed=true]{background:#fff;color:var(--akzent);box-shadow:var(--schatten-klein)}
.pk-pv-zu button:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.pk-pv-karte{min-width:0;pointer-events:none}
.pk-pv-karte .fz,.pk-pv-karte .fz:hover{transform:none}
/* Die Vorschau zeichnet bei jeder Eingabe neu: Bilder ohne Einblenden (basis.css «Bilder blenden weich ein»), sonst flackern sie */
.pk-pv-karte img{opacity:1!important;filter:none!important;transition:none!important}
.pk-pv-zeilen{grid-template-columns:minmax(0,1fr);gap:0;padding:4px clamp(14px,2vw,24px);border:1px solid var(--linie);border-radius:var(--radius);background:#fff}
.pk-pv-zeilen .pk-pv{gap:0;padding-top:16px;border-bottom:1px solid var(--linie)}
.pk-pv-zeilen .pk-pv:last-child{border-bottom:0}
.pk-pv-zeilen .fzz{border-bottom:0}

@media (max-width:640px){
  .pk-pakete{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .pk-premium-inhalt{grid-template-columns:minmax(0,1fr)}
  .pk-vorschau{max-width:260px}
  .pk-felder{grid-template-columns:1fr 1fr}
  .pk-felder .pk-breit{grid-column:1/-1}
}
