/* ==========================================================================
   PREISE.CSS  —  Seite „Preise & Konditionen"

   Baut auf theme.css + layout.css auf und nutzt deren Farbtokens.
   Bausteine: Paketkarten, Tarif-Tabelle, Ablauf-Schritte, Leistungslisten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAKETE
   -------------------------------------------------------------------------- */
.pakete{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.4rem;
  margin-top:3rem;
}

.paket{
  position:relative;
  display:flex; flex-direction:column;
  padding:2rem 1.6rem 1.8rem;
  background:linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.paket:hover{ border-color:var(--line-strong); transform:translateY(-4px); }

/* Hervorgehobenes Paket („meist gewählt") */
.paket--top{
  border-color:rgba(255,232,61,.42);
  background:linear-gradient(160deg, rgba(255,232,61,.06) 0%, var(--bg-2) 60%);
}
.paket--top:hover{ border-color:rgba(255,232,61,.7); }

.paket__flag{
  position:absolute; top:0; right:0;
  padding:.32rem .85rem;
  font-family:var(--font-display); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#0b1a16; background:var(--accent);
}

.paket__eyebrow{
  font-family:var(--font-display); font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 .5rem;
}

.paket__title{
  font-family:var(--font-display); font-size:1.32rem; font-weight:600;
  color:var(--text); margin:0 0 .9rem; line-height:1.25;
}

.paket__preis{
  display:flex; align-items:baseline; gap:.4rem;
  margin:0 0 .3rem;
}
.paket__ab{ font-size:.72rem; color:var(--text-mute); }
.paket__zahl{
  font-family:var(--font-display); font-size:2.1rem; font-weight:700;
  color:var(--accent); line-height:1; text-shadow:var(--glow-y);
}
.paket__einheit{ font-size:.72rem; color:var(--text-mute); }
.paket__hinweis{ font-size:.68rem; color:var(--text-mute); margin:0 0 1.3rem; }

.paket__text{
  font-size:.82rem; color:var(--text-dim); line-height:1.7;
  margin:0 0 1.3rem;
  padding-bottom:1.3rem;
  border-bottom:1px solid var(--line);
}

.paket__list{ list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.6rem; }
.paket__list li{
  position:relative; padding-left:1.5rem;
  font-size:.79rem; color:var(--text-dim); line-height:1.55;
}
.paket__list li::before{
  content:""; position:absolute; left:0; top:.44em;
  width:8px; height:8px;
  background:var(--accent-3);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.paket__cta{ margin-top:auto; }

/* --------------------------------------------------------------------------
   TARIFE (Stundensätze)
   -------------------------------------------------------------------------- */
.tarife{
  margin-top:2.5rem;
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  background:var(--panel);
  overflow:hidden;
}

.tarif{
  display:grid;
  grid-template-columns:1fr auto;
  gap:1rem;
  align-items:center;
  padding:1.05rem 1.5rem;
  border-bottom:1px solid var(--line);
}
.tarif:last-child{ border-bottom:0; }
.tarif--haupt{ background:rgba(255,232,61,.05); }

.tarif__name{
  font-family:var(--font-display); font-size:.95rem; font-weight:600;
  color:var(--text); margin:0 0 .18rem;
}
.tarif__info{ font-size:.72rem; color:var(--text-mute); margin:0; line-height:1.5; }

.tarif__preis{
  font-family:var(--font-display); font-size:1.25rem; font-weight:700;
  color:var(--accent-2); white-space:nowrap;
}
.tarif--haupt .tarif__preis{ color:var(--accent); text-shadow:var(--glow-y); }
.tarif__preis small{ font-size:.62rem; color:var(--text-mute); font-weight:400; }

/* --------------------------------------------------------------------------
   ABLAUF (nummerierte Schritte)
   -------------------------------------------------------------------------- */
.ablauf{
  list-style:none; margin:2.5rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:1.2rem;
}
.ablauf__step{
  position:relative;
  padding:1.5rem 1.2rem 1.3rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-top:2px solid var(--accent-2);
}
.ablauf__no{
  font-family:var(--font-display); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; color:var(--accent-2); display:block; margin-bottom:.5rem;
}
.ablauf__step h3{
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  color:var(--text); margin:0 0 .5rem;
}
.ablauf__step p{ font-size:.78rem; color:var(--text-dim); line-height:1.65; margin:0; }

/* --------------------------------------------------------------------------
   KOSTENLOS-LEISTE
   -------------------------------------------------------------------------- */
.inklusive{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem; margin-top:2.5rem;
}
.inklusive__item{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:1rem 1.1rem;
  border-left:2px solid var(--accent-3);
  background:rgba(139,255,107,.045);
}
.inklusive__item b{
  display:block; font-family:var(--font-display); font-size:.85rem;
  font-weight:600; color:var(--text); margin-bottom:.25rem;
}
.inklusive__item span{ font-size:.74rem; color:var(--text-mute); line-height:1.55; }

/* --------------------------------------------------------------------------
   FAQ-AKKORDEON  (eigenständig, damit die Seite ohne home.css auskommt)
   -------------------------------------------------------------------------- */
.pfaq{ display:grid; gap:.7rem; margin-top:2.5rem; max-width:820px; }

.pfaq .acc{
  background:var(--panel);
  border:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.pfaq .acc[open]{ border-color:var(--line-strong); }

.pfaq .acc summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.3rem;
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:.95rem; font-weight:600;
  color:var(--text);
}
.pfaq .acc summary::-webkit-details-marker{ display:none; }
.pfaq .acc summary:hover{ color:var(--accent); }

.pfaq .acc__icon{
  position:relative; flex:0 0 14px; width:14px; height:14px;
}
.pfaq .acc__icon::before,
.pfaq .acc__icon::after{
  content:""; position:absolute; left:0; top:6px;
  width:14px; height:2px; background:var(--accent-2);
  transition:transform .3s var(--ease);
}
.pfaq .acc__icon::after{ transform:rotate(90deg); }
.pfaq .acc[open] .acc__icon::after{ transform:rotate(0); }

.pfaq .acc__body{
  padding:0 1.3rem 1.2rem;
  font-size:.82rem; color:var(--text-dim); line-height:1.75;
}
.pfaq .acc__body p{ margin:0 0 .8rem; }
.pfaq .acc__body p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   Mobil
   -------------------------------------------------------------------------- */
@media (max-width:620px){
  .tarif{ grid-template-columns:1fr; gap:.35rem; }
  .tarif__preis{ font-size:1.1rem; }
  .paket{ padding:1.7rem 1.3rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   WEBSITE IM ABO
   Zwei Karten, bewusst breiter als die Paketkarten — hier steht mehr Text,
   und die Entscheidung ist eine andere (Laufzeit statt Umfang).
   -------------------------------------------------------------------------- */
.abos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1.4rem;
  margin-top:3rem;
  max-width:900px;
}

.abo{
  position:relative;
  display:flex; flex-direction:column;
  padding:2rem 1.6rem 1.8rem;
  background:linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.abo:hover{ border-color:var(--line-strong); transform:translateY(-4px); }

.abo--top{
  border-color:rgba(255,232,61,.42);
  background:linear-gradient(160deg, rgba(255,232,61,.06) 0%, var(--bg-2) 60%);
}
.abo--top:hover{ border-color:rgba(255,232,61,.7); }

.abo__flag{
  position:absolute; top:0; right:0;
  padding:.32rem .85rem;
  font-family:var(--font-display); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:#0b1a16; background:var(--accent);
}

.abo__eyebrow{
  font-family:var(--font-display); font-size:.66rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-2); margin:0 0 .5rem;
}
.abo__title{
  font-family:var(--font-display); font-size:1.5rem; font-weight:700;
  color:var(--text); margin:0 0 .9rem;
}

.abo__preis{ display:flex; align-items:baseline; gap:.35rem; margin:0; }
.abo__zahl{
  font-family:var(--font-display); font-size:2.3rem; font-weight:700;
  color:var(--accent-2); line-height:1;
}
.abo--top .abo__zahl{ color:var(--accent); text-shadow:var(--glow-y); }
.abo__takt{ font-size:.85rem; color:var(--text-mute); }

.abo__hinweis{ font-size:.7rem; color:var(--text-mute); margin:.5rem 0 0; line-height:1.5; }
.abo__alt{
  font-size:.72rem; color:var(--text-dim); margin:.55rem 0 0;
  padding:.45rem .7rem;
  border-left:2px solid var(--accent-3);
  background:rgba(139,255,107,.05);
}
.abo__alt b{ color:var(--text); font-weight:600; }

.abo__text{ font-size:.84rem; color:var(--text-dim); line-height:1.65; margin:1.1rem 0 0; }

.abo__list{ list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.5rem; }
.abo__list li{
  position:relative; padding-left:1.15rem;
  font-size:.79rem; color:var(--text-dim); line-height:1.55;
}
.abo__list li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:5px; height:5px; background:var(--accent-3);
}
.abo__list li b{ color:var(--text); font-weight:600; }

.abo__cta{ margin-top:auto; padding-top:1.6rem; }

/* --- Kauf-oder-Abo-Vergleich --------------------------------------------- */
.abo-vgl{
  margin-top:3rem;
  padding:1.8rem 1.6rem;
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  background:var(--panel);
}
.abo-vgl__titel{
  font-family:var(--font-display); font-size:1.05rem; font-weight:600;
  color:var(--text); margin:0 0 .4rem;
}
.abo-vgl__intro{ font-size:.78rem; color:var(--text-mute); margin:0 0 1.3rem; }

/* Tabelle darf scrollen, die Seite nicht */
.abo-vgl__scroll{ overflow-x:auto; }
.abo-vgl__tab{ width:100%; min-width:440px; border-collapse:collapse; }
.abo-vgl__tab th, .abo-vgl__tab td{
  padding:.7rem .8rem; text-align:left;
  border-bottom:1px solid var(--line);
  font-size:.8rem; color:var(--text-dim);
}
.abo-vgl__tab thead th{
  font-family:var(--font-display); font-size:.68rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2); border-bottom-color:var(--line-strong);
}
.abo-vgl__tab thead th:last-child{ color:var(--accent); }
.abo-vgl__tab tbody th{ font-weight:500; color:var(--text-mute); }
.abo-vgl__tab td{ font-family:var(--font-display); font-weight:600; color:var(--text); }
.abo-vgl__tab td small{ font-family:inherit; font-weight:400; color:var(--text-mute); font-size:.7rem; }
.abo-vgl__tab td.is-gut{ color:var(--accent-3); }
.abo-vgl__tab tr:last-child th, .abo-vgl__tab tr:last-child td{ border-bottom:0; }

.abo-vgl__fazit{
  margin:1.3rem 0 0; padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:.82rem; color:var(--text-dim); line-height:1.7;
}
.abo-vgl__fazit b{ color:var(--text); }

/* --- Vier Klarstellungen -------------------------------------------------- */
.abo-fakten{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1rem; margin-top:2rem;
}
.abo-fakten__item{
  padding:1rem 1.1rem;
  border-left:2px solid var(--accent-2);
  background:rgba(255,232,61,.04);
}
.abo-fakten__item b{
  display:block; font-family:var(--font-display); font-size:.85rem;
  font-weight:600; color:var(--text); margin-bottom:.3rem;
}
.abo-fakten__item span{ display:block; font-size:.74rem; color:var(--text-mute); line-height:1.6; }
@media (max-width:620px){
  .abo{ padding:1.7rem 1.2rem 1.5rem; }
  .abo__zahl{ font-size:2rem; }
  .abo-vgl{ padding:1.4rem 1.1rem; }
}

/* --------------------------------------------------------------------------
   HINWEIS AUFS EMPFEHLUNGSPROGRAMM
   Bewusst kurz — die ausführliche Fassung steht auf /empfehlen, weil
   Empfehlende eine andere Zielgruppe sind als Käufer.
   -------------------------------------------------------------------------- */
.empf-teaser{
  display:flex; flex-wrap:wrap; gap:1.6rem;
  align-items:center; justify-content:space-between;
  padding:1.8rem 1.6rem;
  border:1px solid rgba(255,232,61,.32);
  clip-path:var(--chamfer);
  background:linear-gradient(160deg, rgba(255,232,61,.07) 0%, var(--bg-2) 70%);
}
.empf-teaser > div{ flex:1 1 320px; }
.empf-teaser__titel{
  font-family:var(--font-display); font-size:1.35rem; font-weight:700;
  color:var(--text); margin:.5rem 0 .6rem;
}
.empf-teaser__text{
  font-size:.86rem; color:var(--text-dim); line-height:1.7; margin:0; max-width:62ch;
}
.empf-teaser__text b{ color:var(--accent); font-weight:600; }
@media (max-width:620px){
  .empf-teaser{ padding:1.4rem 1.1rem; }
  .empf-teaser .btn{ width:100%; }
}