/* preise.css — Panzer IT: Preiskarten, FAQ-Akkordeon, Wartungs-Teaser
   Nur für die Preise-Seite. Baut auf base.css/components.css/inner.css auf
   (keine Neudefinition von Tokens, keine Duplikate bestehender Klassen). */

/* ==========================================================================
   Preis-Grid & -Karten
   ========================================================================== */
.price-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:var(--sp-4); margin-top:var(--sp-6); align-items:stretch;
}
.tariff{
  position:relative; display:flex; flex-direction:column;
}
.tariff__name{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; }
.tariff__price{
  margin-top:var(--sp-2); font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color:var(--c-brass);
}
.tariff__price-from{
  font-family:var(--font-body); font-weight:500; font-size:.6em; color:var(--c-muted);
  margin-right:.15em;
}
.tariff .feature-list{ flex:1; margin-top:var(--sp-3); max-width:none; }
.tariff__actions{ margin-top:var(--sp-4); }
.tariff__actions .btn{ width:100%; justify-content:center; }

.tariff--featured{
  border-color:var(--c-copper);
  box-shadow:0 0 0 1px var(--c-copper);
}
.tariff__badge{
  position:absolute; top:-.85rem; left:var(--sp-4);
  background:var(--c-copper); color:#14110c;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.1em;
  padding:.35em .9em; border-radius:999px;
}

/* Fünfte Karte: Premium Custom Website — kein Preis, kein Warenkorb, Kontakt-CTA */
.tariff--custom{
  border-style:dashed; border-color:var(--c-line); background:transparent;
}
.tariff--custom:hover{ border-color:var(--c-brass); }
.tariff__price--custom{
  margin-top:var(--sp-2); font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.2rem, 1.05rem + .5vw, 1.4rem); color:var(--c-muted);
  text-transform:uppercase; letter-spacing:.08em;
}
.tariff__custom-desc{ flex:1; margin-top:var(--sp-3); color:var(--c-muted); max-width:34ch; }

/* ==========================================================================
   Zahlungs-Hinweis (veredelt)
   ========================================================================== */
.payment-note{
  margin-top:var(--sp-5); display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--c-panel); border:1px solid var(--c-line); border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4); max-width:64ch;
}
.payment-note svg{
  flex:none; width:26px; height:26px; margin-top:.2em; color:var(--c-copper);
}
.payment-note p{ color:var(--c-text); }
.payment-note p + p{ margin-top:.35em; }
.payment-note__vat{ color:var(--c-muted); font-size:.88rem; }

/* ==========================================================================
   Laufende-Kosten-Teaser
   ========================================================================== */
.teaser{
  margin-top:var(--sp-5);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--sp-3);
}
.teaser__text h3{ font-size:1.3rem; }
.teaser__text p{ color:var(--c-muted); margin-top:.4em; max-width:48ch; }
.teaser__price{ color:var(--c-brass); font-weight:700; }
.teaser__actions{ flex:none; }

/* ==========================================================================
   FAQ-Akkordeon (details/summary)
   ========================================================================== */
.faq-list{ margin-top:var(--sp-5); max-width:64ch; }
.faq-item{
  border-top:1px solid var(--c-line);
  padding-block:var(--sp-2);
}
.faq-item:last-child{ border-bottom:1px solid var(--c-line); }
.faq-item summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-family:var(--font-display); font-weight:600; font-size:1.05rem;
  padding-block:.4em;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:none; color:var(--c-copper); font-size:1.4rem; line-height:1;
  transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--c-muted); margin-top:var(--sp-1); max-width:60ch; }
.faq-more{
  display:inline-block; margin-top:var(--sp-3);
  color:var(--c-copper); font-family:var(--font-display); font-weight:600; font-size:.92rem;
  transition:color .25s var(--ease);
}
.faq-more:hover, .faq-more:focus-visible{ color:var(--c-brass); }

@media (max-width:640px){
  .price-grid{ grid-template-columns:1fr; }
  .teaser{ flex-direction:column; align-items:flex-start; }
  .teaser__actions .btn{ width:100%; justify-content:center; }
  .payment-note{ flex-direction:column; }
}