/* ============================================================
   digitalantrieb / 08 - PREISE
   Drei Pakete nebeneinander, damit man sie in einem Blick
   vergleichen kann. Darunter quer die laufende Betreuung: sie
   ist kein viertes Paket, sondern das, was danach kommt.

   Frueher lief dieser Abschnitt als Kartenstapel ueber vier
   Bildschirmhoehen. Der Inhalt ist derselbe, der Weg dorthin
   ist kuerzer, und der Vergleich faellt leichter.
   ============================================================ */

/* Die Kartenflaeche liegt heller als die Buehne, deshalb wirkt der
   normale Sekundaerton darauf zu schwach. Innerhalb der Pakete
   gilt ein kraeftigerer Wert. Ein Token statt vieler Einzelregeln,
   damit Liste, Beschreibung, Einheit und Hinweis gemeinsam ziehen.
   Wer Preise vergleicht, liest jede Zeile. */
.plan,
.plan-wide,
.price-add {
  --on-stage-2: color-mix(in srgb, var(--chalk) 80%, transparent);
}

.preise__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: var(--stack-3);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.preise__head h2 { grid-column: 1 / span 7; }
.preise__head .body { grid-column: 9 / span 4; }
@media (max-width: 1024px) {
  .preise__head h2, .preise__head .body { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   DIE ZWEI PAKETE
   Zwei Spalten statt drei. Frueher standen hier Starter,
   Business und Komplett nebeneinander - drei Abstufungen
   derselben Sache, zwischen denen niemand sauber waehlen
   konnte. Jetzt sind es zwei klar verschiedene Dinge: die
   Seite allein, oder der ganze Auftritt.
   ------------------------------------------------------------ */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.4rem, 2.4vw, 2.25rem);
  background: color-mix(in srgb, var(--chalk) 6%, var(--ink));
  border: var(--hair) solid color-mix(in srgb, var(--chalk) 13%, transparent);
  transition: transform 0.5s var(--e-out), border-color 0.5s var(--e-out), background-color 0.5s var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .plan:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--chalk) 26%, transparent);
    background: color-mix(in srgb, var(--chalk) 8%, var(--ink));
  }
}

/* Das mittlere Paket ist das, das die meisten buchen. Es traegt
   eine Kante in Signalfarbe und einen Streifen an der Oberkante,
   sonst nichts. Kein zweiter Kartenstil. */
.plan--pick {
  border-color: color-mix(in srgb, var(--signal) 62%, transparent);
  background: color-mix(in srgb, var(--chalk) 9%, var(--ink));
}
.plan--pick::before {
  content: "";
  position: absolute;
  inset: calc(var(--hair) * -1) calc(var(--hair) * -1) auto;
  height: 3px;
  background: var(--signal);
}

.plan__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 0.9rem;
  border-bottom: var(--hair) solid var(--rule);
}
.plan__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
  line-height: 1;
}
.plan__tag {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--on-stage-2);
  white-space: nowrap;
}
.plan--pick .plan__tag { color: var(--signal); }

.plan__amount {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 104%;
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 0.82;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--signal);
}
.plan__amount i { font-style: normal; font-size: 0.42em; letter-spacing: -0.02em; }
.plan__unit {
  display: block;
  font-size: var(--t-sm);
  color: var(--on-stage-2);
}

.plan__desc {
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--on-stage-2);
  padding-top: 0.4rem;
}

.plan__list {
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding-top: 0.9rem;
  border-top: var(--hair) solid var(--rule);
}
.plan__list li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.42;
  color: var(--on-stage-2);
}
.plan__list svg { width: 0.8rem; margin-top: 0.42em; color: var(--signal); }
.plan__list svg polyline { stroke: currentColor; stroke-width: 2.4; fill: none; }

/* Der Button sitzt immer an der Unterkante, egal wie lang die
   Liste darueber ist. Sonst stehen die drei Karten schief. */
.plan__btn {
  margin-top: auto;
  align-self: flex-start;
  padding: 0.95rem 1.4rem;
}
/* Der gewaehlte Plan traegt jetzt .btn--solid im Markup
   (2026-11-08) - die frueheren Sonderregeln entfallen. */

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan__btn { align-self: stretch; justify-content: center; }
}

/* ------------------------------------------------------------
   LAUFENDE BETREUUNG
   Quer unter dem Raster, mit einer Kante in Signalfarbe an der
   linken Seite: dieselbe Achse wie im Logo.
   ------------------------------------------------------------ */
.plan-wide {
  margin-top: clamp(1rem, 2vw, 1.75rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  padding: clamp(1.4rem, 2.4vw, 2.25rem);
  background: color-mix(in srgb, var(--chalk) 4%, var(--ink));
  border: var(--hair) solid color-mix(in srgb, var(--chalk) 13%, transparent);
  border-left: 3px solid var(--signal);
}
.plan-wide__price { grid-column: 1 / span 3; }
.plan-wide__price .plan__amount { margin-top: 0; }
.plan-wide__body { grid-column: 4 / span 4; }
.plan-wide__body .plan__name { margin-bottom: 0.5rem; }
.plan-wide__list { grid-column: 9 / span 4; border-top: 0; padding-top: 0; }
.plan-wide .plan__btn { grid-column: 1 / -1; justify-self: start; margin-top: 0; }

@media (max-width: 1024px) {
  .plan-wide__price { grid-column: 1 / span 4; }
  .plan-wide__body { grid-column: 5 / span 8; }
  .plan-wide__list { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 1rem; border-top: var(--hair) solid var(--rule); }
}
@media (max-width: 700px) {
  /* Eine Spalte statt zwoelf (2026-11-08): Elf Abstaende zu je
     24 Pixeln waren bei 320 Pixeln Geraetebreite breiter als die
     ganze Karte - die Seite liess sich seitlich verschieben. */
  .plan-wide { grid-template-columns: minmax(0, 1fr); }
  .plan-wide__price, .plan-wide__body { grid-column: 1 / -1; }
  .plan-wide__list { grid-template-columns: 1fr; }
  .plan-wide .plan__btn { align-self: stretch; justify-content: center; }
}

/* ------------------------------------------------------------
   ZUSAETZE
   Kleiner Satz unter den Paketen, keine zweite Preistabelle.
   ------------------------------------------------------------ */
.price-add {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: var(--hair) solid var(--rule);
}
/* Fuenf Zusatzposten seit dem Control Panel (2026-10-20): ein
   Raster mit genau fuenf Spalten, damit alle in einer Reihe
   stehen. Mit zwoelf Spalten waere einer allein in die naechste
   Reihe gerutscht und haette ausgesehen wie ein Nachtrag. */
.price-add__item { display: flex; flex-direction: column; gap: 0.4rem; }
.price-add__item b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: var(--track-lg);
  text-transform: uppercase;
}
.price-add__item span { font-size: var(--t-sm); color: var(--on-stage-2); }
.price-add__item em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--signal);
}
.price-note {
  grid-column: 1 / -1;
  max-width: 78ch;
  font-size: var(--t-sm);
  color: var(--on-stage-2);
}
.price-note + .price-note { margin-top: -0.5rem; }
.price-note b { color: var(--on-stage); font-weight: 600; }

@media (max-width: 1024px) {
  .price-add { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .price-add { grid-template-columns: minmax(0, 1fr); }
}