/* Preisseite: Hervorhebung, Tiefe und ein Tabellenkopf, der mitläuft */

/* ---- Karten ---- */
.price-card{
  position:relative;
  padding:var(--space-6) var(--space-5)!important;
  border-radius:var(--radius-ui,12px)!important;
  background:var(--surface,#fff)!important;
  border-color:var(--line)!important;
  transition:border-color 160ms var(--ease-out),
             box-shadow 160ms var(--ease-out),
             transform 160ms var(--ease-out);
}
@media(hover:hover) and (pointer:fine){
  .price-card:hover{
    border-color:#e8c366!important;
    box-shadow:0 6px 22px #edaf261f;
    transform:translateY(-2px);
  }
}

/* Das meistgewählte Paket trägt die Entscheidung */
.price-card.is-empfohlen{
  border-color:#e8c366!important;
  border-width:1.5px!important;
  background:linear-gradient(180deg,#fffdf4,var(--surface,#fff) 42%)!important;
  box-shadow:0 2px 6px #edaf2614, 0 14px 32px #edaf261a;
}
[data-theme=dark] .price-card.is-empfohlen{
  background:linear-gradient(180deg,#332f1c,var(--surface) 42%)!important;
  border-color:#8a7a3a!important;
  box-shadow:0 14px 32px #00000040;
}
@media(hover:hover) and (pointer:fine){
  .price-card.is-empfohlen:hover{box-shadow:0 2px 6px #edaf2614, 0 18px 38px #edaf2626}
}

.price-fahne{
  position:absolute;
  top:calc(var(--space-4) * -1);
  left:var(--space-5);
  font-size:10px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  padding:5px 11px;
  border-radius:100px;
  background:linear-gradient(115deg,#ffd54c,#f2ac34);
  color:#1b1b16;
  box-shadow:0 2px 8px #edaf2633;
  white-space:nowrap;
}

/* Der Preis ist die Hauptaussage der Karte */
.price-card .amount{
  font-family:var(--font-display);
  font-size:32px;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.05;
  margin-top:var(--space-3);
  font-variant-numeric:tabular-nums;
}
.price-card.is-empfohlen .amount{color:#8a5a12}
[data-theme=dark] .price-card.is-empfohlen .amount{color:#ffd54c}
.price-card .price-period{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
}

/* Die Pakete ohne festen Preis sollen nicht leer wirken */
.price-card .amount:not(:has(+ .price-period)),
.price-card h2 + .amount{letter-spacing:-.03em}

.price-card ul{
  margin:var(--space-5) 0 var(--space-5);
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  flex:1;
}
.price-card li{
  position:relative;
  padding-left:var(--space-5);
  font-size:13.5px;
  line-height:1.5;
  color:var(--muted);
}
.price-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.52em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  opacity:.55;
}
.price-card.is-empfohlen li::before{opacity:1}

.price-card .button{width:100%;justify-content:center;gap:var(--space-2)}

/* ---- Vergleichstabelle ---- */
/* 53 Zeilen: ohne mitlaufenden Kopf weiß man unten nicht mehr, welche Spalte
   zu welchem Paket gehört. Der Umschlag hat overflow:auto und ist damit selbst
   der Scroll-Container — sticky bezieht sich auf ihn, nicht auf das Fenster.
   Deshalb bekommt er eine Höhe: dann klebt der Kopf beim Scrollen darin. */
.price-comparison .table-scroll{
  max-height:min(72vh,660px);
  overscroll-behavior:contain;
  border:1px solid var(--line);
  border-radius:var(--radius-sm,8px);
}
[data-theme=dark] .price-comparison .table-scroll{border-color:var(--line)}

.price-comparison table thead th{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--sand,#f7f3e9);
  box-shadow:inset 0 -1px 0 var(--line);
}
[data-theme=dark] .price-comparison table thead th{background:var(--sand)}

/* Die erste Spalte trägt die Leistungsbezeichnung und bleibt stehen */
.price-comparison table tbody th,
.price-comparison table tbody td:first-child{
  position:sticky;
  left:0;
  z-index:4;
  background:var(--surface,#fff);
  box-shadow:inset -1px 0 0 var(--line);
}
[data-theme=dark] .price-comparison table tbody th,
[data-theme=dark] .price-comparison table tbody td:first-child{background:var(--surface)}
.price-comparison table thead th:first-child{z-index:6}

/* Zeilen im Wechsel, damit das Auge die Spur hält */
.price-comparison table tbody tr:nth-child(even) td,
.price-comparison table tbody tr:nth-child(even) th{
  background:#fcfbf7;
}
[data-theme=dark] .price-comparison table tbody tr:nth-child(even) td,
[data-theme=dark] .price-comparison table tbody tr:nth-child(even) th{background:#20261b}

@media(hover:hover) and (pointer:fine){
  .price-comparison table tbody tr:hover td,
  .price-comparison table tbody tr:hover th{background:#fdf3d8}
  [data-theme=dark] .price-comparison table tbody tr:hover td,
  [data-theme=dark] .price-comparison table tbody tr:hover th{background:#333b2c}
}

@media(prefers-reduced-motion:reduce){
  .price-card,.price-card:hover{transform:none;transition:none}
}

@media(max-width:760px){
  .price-card{padding:var(--space-5) var(--space-4)!important}
  .price-card .amount{font-size:28px}
  .price-fahne{left:var(--space-4);font-size:9.5px}
}