/* ============================================================
   PAKETE - Angebotsbereich, Leistungskacheln, Vergleichstabelle,
   Paketdetailseiten und Anfrageseite.
   Nutzt ausschliesslich die Farb- und Typo-Variablen aus style.css.
   ============================================================ */

/* Breiterer Rahmen, damit fuenf Karten nebeneinander Platz haben */
.pk-wide {
  width: min(100% - 2.5rem, 1520px);
  margin-inline: auto;
}

/* ---------- 1. Angebotsbereich: fuenf Paketkarten ---------- */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.pk-card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 2.6rem 1.9rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface), transparent);
  transition: transform 0.45s var(--ease), border-color 0.45s ease, box-shadow 0.45s var(--ease);
}

.pk-card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
}

/* Hervorgehobenes Paket: hellere Kontur, kraeftigerer Schein und ein
   feiner Lichtstreifen an der Oberkante. Ab der fuenfspaltigen Ansicht
   steht die Karte zusaetzlich etwas hoeher als die uebrigen. */
/* ---------- Die uebrigen Karten schimmern blau ----------
   Der Ton ist aus der Figur im Hero gelesen (assets/charakter-cutout.webp):
   ihre hellen Wolkenpartien liegen bei Farbton 220 Grad, rund um
   rgb(150,160,180). Fuer den Schein ist die Saettigung leicht angehoben,
   sonst wirkt er bei niedriger Deckkraft nur grau statt blau.

   Der Schein sitzt auf einer eigenen Ebene und wird ueber die Deckkraft
   auf- und abgeblendet - das erledigt der Compositor. Ein animierter
   Schlagschatten muesste in jedem Bild neu gezeichnet werden. Die vier
   Karten sind gegeneinander versetzt, damit sie nicht im Gleichtakt
   pulsieren. */
.pk-card:not(.pk-card--featured) {
  border-color: rgba(143, 166, 207, 0.24);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(143, 166, 207, 0.09), transparent 60%),
    linear-gradient(180deg, var(--surface), transparent);
}

.pk-card:not(.pk-card--featured)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 26px -2px rgba(143, 166, 207, 0.4),
    0 0 64px -12px rgba(143, 166, 207, 0.5);
  animation: karte-schimmern 9s ease-in-out infinite;
}

.pk-card:not(.pk-card--featured):nth-of-type(2)::before { animation-delay: -2.2s; }
.pk-card:not(.pk-card--featured):nth-of-type(4)::before { animation-delay: -4.6s; }
.pk-card:not(.pk-card--featured):nth-of-type(5)::before { animation-delay: -6.8s; }

@keyframes karte-schimmern {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-card:not(.pk-card--featured)::before { animation: none; opacity: 0.5; }
}

/* Dieselbe Hausfarbe wie die Pro-Spalte in der Vergleichstabelle, damit
   Karte und Tabelle dasselbe Paket auf dieselbe Art hervorheben. */
.pk-card--featured {
  border-color: rgba(255, 83, 48, 0.36);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 83, 48, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(255, 83, 48, 0.075), transparent);
  box-shadow:
    0 0 0 1px rgba(255, 83, 48, 0.1),
    0 34px 90px -46px rgba(255, 83, 48, 0.55);
}

.pk-card--featured::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ember), rgba(255, 190, 170, 0.95), var(--ember), transparent);
  opacity: 0.9;
}

.pk-card--featured .pk-card__name { color: var(--silver-1); }

.pk-card--featured .pk-card__price {
  font-size: 2.4rem;
  color: var(--silver-1);
}

.pk-card--featured .pk-card__desc { color: var(--silver-1); }

.pk-card--featured .pk-card__list svg { color: var(--silver-1); }

/* Angehoben wird ueber den Abstand, nicht ueber transform: die
   Einblendung setzt .reveal.is-visible { transform: none } und
   wuerde eine Verschiebung sonst wieder zuruecknehmen. */
@media (min-width: 1361px) {
  .pk-card--featured {
    margin-top: -18px;
    padding-top: 3.2rem;
  }
}

.pk-card--featured:hover { transform: translateY(-10px); }

/* Gleiches Abzeichen wie im Tabellenkopf: Ember-Verlauf, Leuchtrand und
   der ruhige Puls ueber die Deckkraft einer eigenen Ebene. */
.pk-card__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  isolation: isolate;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a52, var(--ember) 55%, #e33d1c);
  color: #12060a;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 160, 130, 0.55) inset,
    0 0 18px -2px rgba(255, 83, 48, 0.75);
}

.pk-card__badge::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 83, 48, 0.85), rgba(255, 83, 48, 0));
  animation: beliebt-glimmen 3.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pk-card__badge::after { animation: none; opacity: 0.6; }
}

.pk-card__name {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.9rem;
}

.pk-card__price {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--text-0);
  margin-bottom: 0.35rem;
}

/* "einmalig" direkt am Preis: die Zahl allein wuerde sich sonst mit
   den monatlichen Betraegen auf der Social- und Bundle-Seite beissen -
   1.190 einmalig und 1.190 im Monat stehen sonst gleich da. */
.pk-card__einheit {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-2);
  white-space: nowrap;
}

.pk-card__tax {
  font-size: 0.74rem;
  color: var(--text-2);
  margin-bottom: 1.1rem;
}

.pk-card__desc {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--text-0);
  margin-bottom: 1.6rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.pk-card__list-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.pk-card__list {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  align-content: start;
  flex: 1 1 auto;
  margin-bottom: 1.8rem;
}

.pk-card__list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-1);
}

.pk-card__list svg {
  flex-shrink: 0;
  margin-top: 0.3rem;
  color: var(--silver-2);
}

.pk-card__actions {
  display: grid;
  gap: 0.7rem;
  margin-top: auto;
}

/* "Paket ansehen" ist dieselbe Leuchtpille wie "Beispielseiten ansehen"
   im Hero, nur eine Nummer kleiner - in voller Hero-Groesse sprengt sie
   die Karte. Der Lichthof der Pille wird hier nicht mit-animiert: fuenf
   gleichzeitig laufende Weichzeichner kosten spuerbar Bildrate, das
   stehende Leuchten sieht genauso aus. */
.pk-card__go {
  min-height: 50px;
  padding: 0.9rem 1.6rem;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  /* Der Verlauf steht still und ist auf das warme Band eingestellt - die
     Pille sieht aus wie im Hero. Gemessen: fuenf gleichzeitig wandernde
     Verlaeufe druecken die Bildrate auf einem gebremsten Geraet von 85
     auf 54 Bilder/s, weil jede Pille in jedem Bild neu gezeichnet wird.
     Das Wandern gibt es deshalb nur unter dem Mauszeiger, und im Hero,
     wo eine einzelne Pille laeuft. */
  background-position: 46% center;
  animation: none;
}

.pk-card__go:hover {
  animation: shine-flow 7s linear infinite;
}

.pk-card__go::before {
  inset: -7px;
  filter: blur(12px);
  opacity: 0.34;
  animation: none;
}

/* Der wandernde Lichtwischer bleibt dem Hero vorbehalten. Fuenf davon
   nebeneinander haben die Bildrate auf einem gebremsten Geraet von 83
   auf 55 Bilder/s gedrueckt - der fliessende Verlauf allein reicht. */
.pk-card__go::after { display: none; }

.pk-card__actions .btn {
  width: 100%;
  justify-content: center;
  padding-inline: 1rem;
}

.pk-hint {
  max-width: 76ch;
  margin: clamp(2.2rem, 4vw, 3rem) auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-2);
}

@media (max-width: 1360px) {
  .pk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
  .pk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 660px) {
  .pk-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pk-card { padding: 2.4rem 1.6rem 1.9rem; }
}

/* ---------- 2. Mehr als nur eine Website ---------- */
.pk-leistungen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

/* ---------- "Im Projekt enthalten": wechselnder Farbverlauf ----------
   Jede Kachel traegt zwei Farbebenen - eine im Blau der Hero-Figur, eine
   im Ember der Pillen - die gegenlaeufig ein- und ausgeblendet werden.
   Weil die Kacheln gegeneinander versetzt sind, wandert der Wechsel als
   Welle durch den Block statt alle acht gleichzeitig umzufaerben.

   Ueberblendet wird die Deckkraft, nicht die Farbe selbst: eine
   animierte Hintergrundfarbe muesste in jedem Bild neu gezeichnet
   werden, die Deckkraft erledigt der Compositor. Der Rand faerbt sich
   ueber einen inneren Schlagschatten auf denselben Ebenen mit. */
.pk-leistung {
  position: relative;
  isolation: isolate;
  padding: 2rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), transparent);
  transition: transform 0.45s var(--ease), border-color 0.45s ease;
}

.pk-leistung::before,
.pk-leistung::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  animation: 14s ease-in-out infinite;
}

.pk-leistung::before {
  background: radial-gradient(130% 95% at 50% 0%, rgba(143, 166, 207, 0.18), transparent 66%);
  box-shadow:
    0 0 0 1px rgba(143, 166, 207, 0.26) inset,
    0 0 40px -14px rgba(143, 166, 207, 0.75);
  animation-name: kachel-blau;
}

.pk-leistung::after {
  background: radial-gradient(130% 95% at 50% 0%, rgba(255, 83, 48, 0.16), transparent 66%);
  box-shadow:
    0 0 0 1px rgba(255, 83, 48, 0.28) inset,
    0 0 40px -14px rgba(255, 83, 48, 0.7);
  animation-name: kachel-ember;
}

@keyframes kachel-blau  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes kachel-ember { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Versatz je Kachel - daraus wird die Welle durch den Block. */
.pk-leistung:nth-child(1)::before,
.pk-leistung:nth-child(1)::after { animation-delay: -0.0s; }
.pk-leistung:nth-child(2)::before,
.pk-leistung:nth-child(2)::after { animation-delay: -1.5s; }
.pk-leistung:nth-child(3)::before,
.pk-leistung:nth-child(3)::after { animation-delay: -3.0s; }
.pk-leistung:nth-child(4)::before,
.pk-leistung:nth-child(4)::after { animation-delay: -4.5s; }
.pk-leistung:nth-child(5)::before,
.pk-leistung:nth-child(5)::after { animation-delay: -6.0s; }
.pk-leistung:nth-child(6)::before,
.pk-leistung:nth-child(6)::after { animation-delay: -7.5s; }
.pk-leistung:nth-child(7)::before,
.pk-leistung:nth-child(7)::after { animation-delay: -9.0s; }
.pk-leistung:nth-child(8)::before,
.pk-leistung:nth-child(8)::after { animation-delay: -10.5s; }

@media (prefers-reduced-motion: reduce) {
  .pk-leistung::before { animation: none; opacity: 1; }
  .pk-leistung::after  { animation: none; opacity: 0; }
}

.pk-leistung:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
}

.pk-leistung__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--silver-2);
}

.pk-leistung h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-0);
  margin-bottom: 0.55rem;
}

.pk-leistung p {
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-2);
}

@media (max-width: 1080px) {
  .pk-leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .pk-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .pk-leistungen { grid-template-columns: 1fr; }
}

/* ---------- 3. Grosse Vergleichstabelle ---------- */
/* Die Tabelle folgt derselben Aufteilung wie die Paketkarten: alles
   Umgebende im Blau der Hero-Figur, allein die Pro-Spalte in Ember.
   Der Kontrast traegt die Hervorhebung, nicht die Helligkeit. */
.pk-compare__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  border: 1px solid rgba(143, 166, 207, 0.4);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(143, 166, 207, 0.09), rgba(143, 166, 207, 0) 34%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 26px 70px -34px rgba(143, 166, 207, 0.75);
  -webkit-overflow-scrolling: touch;
}

/* Glimmende Oberkante - liegt im scrollenden Kasten, wandert also nicht
   mit, wenn man die Tabelle seitlich schiebt. */
.pk-compare__scroll::before {
  content: "";
  position: sticky;
  top: 0;
  left: 0;
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(143, 166, 207, 0) 0%,
    rgba(143, 166, 207, 1) 22%,
    rgba(214, 228, 250, 1) 50%,
    rgba(143, 166, 207, 1) 78%,
    rgba(143, 166, 207, 0) 100%);
  opacity: 1;
}

.pk-compare__scroll:focus-visible {
  outline: 2px solid var(--silver-2);
  outline-offset: 2px;
}

.pk-compare__table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
  font-size: 1rem;
}

/* Die Trennlinien im Innern scheinen im selben Blau wie der Rahmen -
   das weisse var(--line) haette als einziger neutraler Ton im Kasten
   gestanden. */
.pk-compare__table th,
.pk-compare__table td {
  padding: 1.4rem 1.6rem;
  text-align: left;
  border-bottom: 1px solid rgba(143, 166, 207, 0.3);
  vertical-align: top;
  line-height: 1.55;
}

/* Auch "th + td": in den Datenzeilen folgt auf den Zeilentitel (th) eine
   Zelle (td). Ohne diesen Fall fehlte die senkrechte Linie zwischen der
   Leistungsspalte und der ersten Paketspalte - im Kopf war sie da, im
   Rumpf nicht. */
.pk-compare__table th + th,
.pk-compare__table th + td,
.pk-compare__table td + td {
  border-left: 1px solid rgba(143, 166, 207, 0.3);
}

/* Der Streifen fuer das Abzeichen wird in JEDER Kopfspalte freigehalten,
   nicht nur bei Pro. Sonst schoebe das Abzeichen allein den Namen
   "Landingpage Pro" nach oben und er staende hoeher als die anderen. */
.pk-compare__table thead th {
  position: relative;
  padding-bottom: 2.5rem;
  background: rgba(143, 166, 207, 0.1);
  border-bottom: 1px solid rgba(143, 166, 207, 0.5);
  color: var(--silver-1);
  vertical-align: bottom;
  white-space: normal;
}

.pk-compare__head-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

.pk-compare__head-name a { border-bottom: 1px solid var(--line-strong); }
.pk-compare__head-name a:hover { color: var(--silver-1); border-bottom-color: var(--silver-2); }

/* Im Kopf steht kein Preis mehr - der stand doppelt, einmal hier und
   einmal in der Zeile "Preis" direkt darunter. Geblieben ist nur die
   Markierung der Pro-Spalte. */
/* "Beliebt" leuchtet in der Hausfarbe - derselbe Ton wie die Pillen und
   die Spalte darunter, damit die Markierung als ein Zeichen liest. Der
   Puls laeuft ruhig, damit er neben den Leuchtpillen nicht flackert. */
.pk-compare__head-tag {
  display: inline-block;
  isolation: isolate;
  /* Sitzt im freigehaltenen Streifen unter dem Namen und damit ausserhalb
     des Textflusses - so bleibt der Paketname auf derselben Hoehe wie die
     Namen der anderen Spalten. */
  position: absolute;
  left: 1.6rem;
  bottom: 1.05rem;
  margin: 0;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff7a52, var(--ember) 55%, #e33d1c);
  color: #12060a;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 160, 130, 0.55) inset,
    0 0 16px -2px rgba(255, 83, 48, 0.75);
}

/* Der Puls sitzt auf einer eigenen Ebene und wird ueber die Deckkraft
   auf- und abgeblendet. Ein animierter Schlagschatten muesste in jedem
   Bild neu gezeichnet werden, die Deckkraft erledigt der Compositor. */
.pk-compare__head-tag::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 83, 48, 0.85), rgba(255, 83, 48, 0));
  animation: beliebt-glimmen 3.8s ease-in-out infinite;
}

@keyframes beliebt-glimmen {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .pk-compare__head-tag::after { animation: none; opacity: 0.6; }
}

/* "Leistung" ist die Ueberschrift derselben Spalte wie "Preis" und
   "Seitenumfang" - also auch dieselbe Schrift, nicht die gesperrte
   Versalzeile von vorher. */
.pk-compare__table thead th:first-child {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-0);
}

.pk-compare__table tbody th {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-0);
  white-space: nowrap;
}

.pk-compare__table tbody td {
  color: var(--text-1);
  font-weight: 400;
  font-size: 0.95rem;
}

/* Die vier uebrigen Paketspalten sind genauso gebaut wie die Pro-Spalte,
   nur im Blau: durchgehende Toenung ueber die ganze Spalte und senkrechte
   Kanten. Vorher trug nur Pro eine Flaeche, die anderen waren schwarz -
   dadurch stand eine Spalte da und vier fehlten. Die Leistungsspalte ganz
   links bleibt neutral, sie gehoert zu keinem Paket. */
.pk-compare__table th:nth-child(n+2):not(:nth-child(4)),
.pk-compare__table td:nth-child(n+2):not(:nth-child(4)) {
  background: rgba(143, 166, 207, 0.055);
  border-left: 1px solid rgba(143, 166, 207, 0.3);
  border-right: 1px solid rgba(143, 166, 207, 0.3);
}

.pk-compare__table thead th:nth-child(n+2):not(:nth-child(4)) {
  background: rgba(143, 166, 207, 0.1);
}

/* Beliebt-Spalte (Pro): dieselbe Hausfarbe wie die Leuchtpillen, mit
   senkrechten Kanten, damit sie als zusammenhaengende Spalte liest. */
.pk-compare__table th:nth-child(4),
.pk-compare__table td:nth-child(4) {
  background: rgba(255, 83, 48, 0.075);
  border-left: 1px solid rgba(255, 83, 48, 0.26);
  border-right: 1px solid rgba(255, 83, 48, 0.26);
  color: var(--text-0);
}

.pk-compare__table thead th:nth-child(4) {
  background: rgba(255, 83, 48, 0.13);
  /* Die hervorgehobene Spalte steht mittig: der Paketname zentriert im
     Kopf, das Abzeichen zentriert darunter. */
  text-align: center;
}

.pk-compare__table thead th:nth-child(4) .pk-compare__head-tag {
  left: 50%;
  transform: translateX(-50%);
}

/* Die Preiszeile traegt jetzt allein die Zahlen. Die Renaissance-Antiqua
   war dafuer zu duenn und zu hell - deshalb Manrope, kraeftiger, mit
   gleich breiten Ziffern, damit die Betraege in einer Flucht stehen. */
.pk-compare__row-price td {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--text-0);
  white-space: nowrap;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

/* "einmalig" an jedem Betrag statt nur am Zeilentitel: auf schmalen
   Bildschirmen wird die Tabelle seitlich geschoben, dann steht der
   Titel nicht mehr neben der Zahl. Eigene Zeile, damit die Betraege
   in einer Flucht bleiben. */
.pk-compare__einheit {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-2);
  margin-top: 0.15rem;
}

.pk-compare__row-cta th,
.pk-compare__row-cta td {
  border-bottom: none;
  border-top: 1px solid rgba(143, 166, 207, 0.5);
  padding-top: 1.6rem;
  padding-bottom: 1.8rem;
}

.pk-compare__row-cta .btn {
  width: 100%;
  justify-content: center;
  padding-inline: 0.9rem;
  font-size: 0.78rem;
}

.pk-compare__note {
  margin-top: 1.2rem;
  font-size: 0.82rem;
  color: var(--text-2);
  text-align: center;
}

@media (max-width: 900px) {
  .pk-compare__table { font-size: 0.92rem; }
  .pk-compare__table th,
  .pk-compare__table td { padding: 1.1rem 1.2rem; }
  .pk-compare__row-price td { font-size: 1.1rem; }
}

/* ---------- 4. Paketdetailseiten ---------- */
.pd-hero {
  padding-top: clamp(7rem, 13vw, 10rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
  position: relative;
}

/* Eigene Zeile: als inline-flex haette sich das Eyebrow danebengesetzt,
   und beide saessen auf unterschiedlicher Hoehe. */
.pd-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.6rem;
  transition: color 0.3s ease;
}
.pd-back:hover { color: var(--text-0); }
.pd-back svg { transition: transform 0.35s var(--ease); }
.pd-back:hover svg { transform: translateX(-4px); }

/* Eyebrow und Abzeichen in einer Zeile, mittig zueinander */
.pd-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  /* Hoehe des Abzeichens fest reserviert, damit die Ueberschrift auf
     allen Paketseiten auf derselben Hoehe beginnt - mit und ohne. */
  min-height: 28px;
  margin-bottom: 1.25rem;
}

.pd-kopf .eyebrow { margin-bottom: 0; }

.pd-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.95rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--silver-1), var(--silver-3));
  color: #0a0a0c;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pd-hero__price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--text-0);
  margin-top: 0.8rem;
}

.pd-hero__tax {
  font-size: 0.8rem;
  color: var(--text-2);
  margin-top: 0.3rem;
}

.pd-hero__lead {
  max-width: 62ch;
  margin-top: 1.6rem;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-1);
}

.pd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.pd-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.pd-block + .pd-block { margin-top: clamp(2.6rem, 5vw, 3.6rem); }

.pd-block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 500;
  color: var(--text-0);
  margin-bottom: 1.2rem;
}

.pd-block h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.pd-block p {
  max-width: 66ch;
  font-weight: 400;
  color: var(--text-1);
}

.pd-block p + p { margin-top: 1rem; }

.pd-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin-top: 1.2rem;
}

.pd-list li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.96rem;
  font-weight: 400;
  color: var(--text-1);
}

.pd-list svg {
  flex-shrink: 0;
  margin-top: 0.35rem;
  color: var(--silver-2);
}

.pd-list--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }

@media (max-width: 760px) {
  .pd-list--zwei { grid-template-columns: 1fr; }
  .pd-split { grid-template-columns: 1fr; }
}

/* Der Faktenkasten ist die Tabelle der Paketseite und wird deshalb wie
   die Vergleichstabelle auf webdesign.html gehalten: blauer Rahmen,
   tiefer Grund, glimmende Oberkante, Trennlinien im selben Blau. Die
   erste Zeile - der Preis - ist die einzige warme Stelle. */
.pd-facts {
  display: grid;
  gap: 0;
  position: relative;
  border: 1px solid rgba(143, 166, 207, 0.4);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(143, 166, 207, 0.09), rgba(143, 166, 207, 0) 34%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 26px 70px -34px rgba(143, 166, 207, 0.75);
  overflow: hidden;
}

.pd-facts::before {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(143, 166, 207, 0) 0%,
    rgba(143, 166, 207, 1) 22%,
    rgba(214, 228, 250, 1) 50%,
    rgba(143, 166, 207, 1) 78%,
    rgba(143, 166, 207, 0) 100%);
  opacity: 1;
}

/* Der Preis oben bekommt dieselbe warme Toenung wie die Pro-Spalte der
   Vergleichstabelle - die Zahl, um die es geht. */
.pd-fact:first-of-type {
  background: rgba(255, 83, 48, 0.075);
  border-bottom-color: rgba(255, 83, 48, 0.28);
}

.pd-fact:first-of-type dd {
  color: #ffd9cd;
}

.pd-fact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid rgba(143, 166, 207, 0.3);
}
.pd-fact:last-of-type { border-bottom: none; }

.pd-fact dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

.pd-fact dd {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-0);
  text-align: right;
}

/* Faktenkasten und Knoepfe laufen als Block ueber den ganzen
   Abschnitt mit, damit Preis und Handlung immer erreichbar bleiben.
   align-self: start ist noetig, sonst dehnt das Raster die Spalte auf
   volle Hoehe und dem klebenden Block bleibt kein Weg. */
.pd-split > aside {
  position: sticky;
  top: 92px;
  align-self: start;
}

/* Grenze wie beim Umbruch der beiden Spalten: sobald gestapelt wird,
   gibt es nichts mehr, woran der Block entlanglaufen koennte. */
@media (max-width: 760px) {
  .pd-split > aside { position: static; }
}

.pd-steps {
  list-style: none;
  counter-reset: pd;
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}

.pd-steps li {
  counter-increment: pd;
  position: relative;
  padding: 1.4rem 1.6rem 1.4rem 4.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), transparent);
  font-weight: 400;
  color: var(--text-1);
}

.pd-steps li::before {
  content: "0" counter(pd);
  position: absolute;
  left: 1.6rem;
  top: 1.35rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--silver-3);
}

.pd-steps b {
  display: block;
  color: var(--text-0);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.pd-optional {
  padding: clamp(1.8rem, 3.5vw, 2.4rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.025);
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
}

.pd-optional h2 { margin-bottom: 0.9rem; }

.pd-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  margin-top: clamp(2.8rem, 6vw, 4rem);
  padding-top: clamp(2.4rem, 5vw, 3.2rem);
  border-top: 1px solid var(--line);
}

.pd-cta__text {
  max-width: 54ch;
  font-weight: 400;
  color: var(--text-1);
}

.pd-cta__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- 5. Anfrageseite: Paketkarte und Auswahl ---------- */
.pa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(1.6rem, 3vw, 2.4rem);
  align-items: start;
}

@media (max-width: 980px) {
  .pa-layout { grid-template-columns: 1fr; }
}

.pa-paketcard {
  position: sticky;
  top: 92px;
  padding: 1.9rem 1.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(220, 226, 240, 0.06), transparent);
}

@media (max-width: 980px) {
  .pa-paketcard { position: static; }
}

.pa-paketcard__kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.7rem;
}

.pa-paketcard__name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1.2;
  color: var(--text-0);
  margin-bottom: 0.3rem;
}

.pa-paketcard__price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--silver-2);
  margin-bottom: 0.15rem;
}

.pa-paketcard__tax {
  font-size: 0.74rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.pa-paketcard__desc {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-1);
  padding-bottom: 1.2rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.pa-paketcard__list {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.3rem;
}

.pa-paketcard__list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--text-1);
}

.pa-paketcard__list svg { flex-shrink: 0; margin-top: 0.3rem; color: var(--silver-2); }

.pa-paketcard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.3s ease;
}
.pa-paketcard__link:hover { color: var(--text-0); }

.pa-ablauf {
  list-style: none;
  counter-reset: pa;
  display: grid;
  gap: 0.9rem;
  margin-top: 1.4rem;
}

.pa-ablauf li {
  counter-increment: pa;
  position: relative;
  padding-left: 2.6rem;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--text-1);
}

.pa-ablauf li::before {
  content: "0" counter(pa);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--silver-3);
}

.pa-ablauf b { color: var(--text-0); font-weight: 700; }

/* Erfolgs- und Fehlermeldung */
.pa-result {
  margin-top: 1.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
}

.pa-result h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text-0);
  margin-bottom: 0.5rem;
}

.pa-result p { font-weight: 400; color: var(--text-1); }

.pa-result--ok { border-color: rgba(150, 255, 205, 0.35); }
.pa-result--err { border-color: rgba(255, 83, 48, 0.45); }

.pa-result .btn { margin-top: 1.1rem; }

/* Ladezustand des Absende-Buttons */
.button[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}

.pa-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 0.6rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: pa-spin 0.8s linear infinite;
}

@keyframes pa-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .pa-spinner { animation-duration: 2.4s; }
  .pk-card:hover,
  .pk-leistung:hover { transform: none; }
}

/* Nur fuer Screenreader */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kleiner Zusatzhinweis unter einer Sektionsueberschrift */
.pk-subnote {
  max-width: 62ch;
  margin: 1.1rem auto 0;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-2);
}

/* ---------- Aufgeklappte Auswahllisten lesbar halten ----------
   Die Liste einer geoeffneten Auswahl wird vom Betriebssystem
   gezeichnet, nicht von der Seite. Ohne eigene Angabe erbt der
   Eintrag die helle Schriftfarbe des Feldes, waehrend das System
   die Liste weiss hinterlegt - weiss auf weiss, also unlesbar.
   color-scheme laesst die Liste dunkel zeichnen, die Angaben an
   option greifen dort, wo das noch nicht unterstuetzt wird. */
.select-input {
  color-scheme: dark;
}

.select-input option,
.select-input optgroup {
  background-color: var(--bg-2);
  color: var(--text-0);
}

/* ============================================================
   PARTIKELSTROM UND KONSTRUKTIONSMARKEN
   ------------------------------------------------------------
   Der Strom liegt als festes Canvas hinter allem, die feinen
   Markierungen am Rand darueber. Beide sind reine Dekoration,
   fangen keine Klicks ab und sind fuer Screenreader unsichtbar.
   ============================================================ */


/* ---------- Markierungen am Seitenrand ---------- */
.pk-marken {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  font-family: var(--font-body);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.16);
}

/* senkrechte Hilfslinien links und rechts */
.pk-marken::before,
.pk-marken::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 12%,
    rgba(255, 255, 255, 0.07) 88%,
    transparent 100%);
}
.pk-marken::before { left: 26px; }
.pk-marken::after { right: 26px; }

.pk-marke {
  position: absolute;
  white-space: nowrap;
  line-height: 1.5;
}

.pk-marke--ol { top: 34px; left: 44px; }
.pk-marke--or { top: 34px; right: 44px; text-align: right; }

.pk-marke b {
  display: block;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.22);
}
.pk-marke span {
  display: block;
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.13);
}

/* kurze Teilstriche an den Hilfslinien */
.pk-marke--striche {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  display: grid;
  gap: 9px;
}
.pk-marke--striche i {
  display: block;
  width: 13px;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.pk-marke--striche i:nth-child(3n) { width: 22px; background: rgba(255, 255, 255, 0.2); }

/* Eckkreuze */
.pk-kreuz {
  position: absolute;
  width: 13px;
  height: 13px;
  opacity: 0.3;
}
.pk-kreuz::before,
.pk-kreuz::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.45);
}
.pk-kreuz::before { left: 6px; top: 0; width: 1px; height: 13px; }
.pk-kreuz::after { top: 6px; left: 0; height: 1px; width: 13px; }

.pk-kreuz--ul { bottom: 30px; left: 20px; }
.pk-kreuz--ur { bottom: 30px; right: 20px; }

@media (max-width: 900px) {
  .pk-marken { display: none; }   /* am Rand ist auf dem Handy kein Platz */
}

/* ---------- Drahtgitter: angedeutete Layouts im Hintergrund ----------
   Blasse Browserfenster und Seitenskizzen, links und rechts vom
   Rand angeschnitten. Reine Dekoration, sehr zurueckhaltend, damit
   sie Tiefe geben statt vom Text abzulenken. */
.pk-gitter {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.5;
}

.pk-fenster {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.008);
  display: flex;
  flex-direction: column;
}

/* Titelleiste mit den drei Punkten */
.pk-fenster__leiste {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 15px;
  padding: 0 7px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.pk-fenster__leiste i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.pk-fenster__inhalt {
  flex: 1;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

/* Platzhalter fuer Bilder - mit angedeutetem Kreuz wie in einer Skizze */
.pk-block {
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(45deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.045) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(-45deg, transparent calc(50% - 0.5px), rgba(255, 255, 255, 0.045) 50%, transparent calc(50% + 0.5px));
  flex-shrink: 0;
}

.pk-zeile {
  height: 2px;
  background: rgba(255, 255, 255, 0.075);
  flex-shrink: 0;
}

.pk-reihe { display: flex; gap: 6px; flex-shrink: 0; }
.pk-reihe > * { flex: 1; }

/* ---------- Platzierung ---------- */
.pk-fenster--l1 { left: -70px; top: 6%;  width: 300px; height: 380px; }
.pk-fenster--l2 { left: -40px; top: 62%; width: 210px; height: 230px; }
.pk-fenster--r1 { right: -90px; top: 10%; width: 260px; height: 300px; }
.pk-fenster--r2 { right: -30px; top: 46%; width: 180px; height: 150px; }
.pk-fenster--r3 { right: -60px; top: 72%; width: 230px; height: 200px; }

@media (max-width: 1500px) {
  .pk-fenster--l2, .pk-fenster--r2 { display: none; }
}

@media (max-width: 1200px) {
  .pk-gitter { opacity: 0.34; }
  .pk-fenster--r3 { display: none; }
}

@media (max-width: 900px) {
  .pk-gitter { display: none; }
}

/* ============================================================
   HERO: PAKETWORT AUS PARTIKELN
   ------------------------------------------------------------
   Im Kopf steht nur noch das Paketwort. Name, Preis und die
   Knoepfe uebernimmt der Faktenkasten im Abschnitt darunter.
   Der Rueckweg bleibt oben, sonst kaeme man nicht mehr weg.
   ============================================================ */
.pd-hero--wort {
  position: relative;
  height: 78svh;
  min-height: 500px;
  padding: 0;
  overflow: hidden;
}

.pd-wort {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1s var(--ease);
}

.pd-wort.is-ready { opacity: 1; }


/* Rueckweg liegt ueber dem Wortfeld, faengt aber nur sich selbst ab */
.pd-hero--wort .container {
  position: relative;
  z-index: 3;
  padding-top: clamp(6.5rem, 11vw, 8.5rem);
  pointer-events: none;
}

.pd-hero--wort .pd-back {
  pointer-events: auto;
  margin-bottom: 0;
}

/* Der Anschlussabschnitt braucht oben keine zusaetzliche Trennlinie -
   der Hero endet ohnehin im Nichts. */
.pd-hero--wort + .section--line { border-top: 0; }

/* ============================================================
   Anschluss an den Wort-Hero
   ------------------------------------------------------------
   Der erste Abschnitt rueckt dicht unter das Partikelwort, damit
   beides zusammengehoert. Damit der Hero trotzdem seinen Moment
   bekommt, ist der Abschnitt zunaechst unsichtbar und faehrt erst
   nach einem Stueck Scrollen herein (pakete.js setzt .is-an).

   Das Verstecken macht das Stylesheet und nicht das Skript: sonst
   waere der Text im ersten gezeichneten Bild kurz zu sehen und
   wuerde danach wieder verschwinden. Die Abfrage (scripting: enabled)
   sorgt dafuer, dass ohne JavaScript alles normal sichtbar bleibt -
   dann kann ihn ja auch niemand wieder einblenden.
   ============================================================ */
.pd-hero--wort + .section {
  padding-top: clamp(1.8rem, 4vw, 3rem);
}

@media (scripting: enabled) {
  .pd-hero--wort + .section {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
    will-change: opacity, transform;
  }

  .pd-hero--wort + .section.is-an {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Bewegung reduziert: der Abschnitt wartet trotzdem auf das
     Scrollen, erscheint dann aber schlagartig statt hereinzufahren. */
  @media (prefers-reduced-motion: reduce) {
    .pd-hero--wort + .section { transform: none; transition: none; }
  }
}

/* Der Aufmacher-Satz des Pakets, im ersten Abschnitt.
   Er ist die Ueberschrift der Seite und muss deutlich ueber den
   Zwischenueberschriften stehen - vorher war er mit "Worum es geht"
   gleich gross und wirkte dadurch schwaecher als das, was unter ihm
   kam. Groesse, Zeilenfall und der wandernde Silberverlauf
   (Klasse silver-text) sind dieselben wie bei den grossen
   Ueberschriften der uebrigen Seiten. */
.pd-claim {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4.4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

@media (max-width: 700px) {
  .pd-hero--wort { height: 62svh; min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-wort { transition: none; }
}

/* ---------- Hero-Knoepfe auf webdesign.html gleich lang ----------
   Das Raster setzt die Spalten sonst auf Inhaltsbreite, dadurch waeren
   "Pakete ansehen" und "Vergleich ansehen" unterschiedlich breit.
   Eine gemeinsame Mindestbreite gleicht sie an; der breite Knopf
   darunter spannt weiterhin ueber beide Spalten. */
.wd-hero .hero__actions .btn {
  min-width: 13.5rem;
  justify-content: center;
}

/* ============================================================
   Farbe auf den Paketseiten
   ------------------------------------------------------------
   Dieselben zwei Toene wie auf webdesign.html: das Ember der
   Leuchtpillen (255,83,48) und das Blau der Hero-Figur
   (143,166,207). Beide sind hier nach demselben Muster verteilt -
   Anfragen warm, Vorschau kuehl, die Inhaltsbloecke im Wechsel.

   Ueberblendet wird ueberall die Deckkraft zweier Farbebenen, nie
   die Farbe selbst: das erledigt der Compositor, eine animierte
   Farbe muesste in jedem Bild neu gezeichnet werden.
   ============================================================ */

/* ---------- Knoepfe im Faktenkasten ---------- */
/* "Paket anfragen" ist dieselbe Leuchtpille wie auf webdesign.html,
   auch hier mit stehendem Verlauf statt wanderndem - siehe die
   Begruendung bei .pk-card__go. */
.pd-go {
  min-height: 50px;
  padding: 0.9rem 1.6rem;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  background-position: 46% center;
  animation: none;
}

.pd-go::before {
  inset: -7px;
  filter: blur(12px);
  opacity: 0.34;
  animation: none;
}

.pd-go::after { display: none; }

.pd-go:hover { animation: shine-flow 7s linear infinite; }

/* "Vorschau oeffnen" bleibt der ruhige Knopf, scheint aber im Blau
   der Figur - so stehen die beiden Wege farblich auseinander. */
.pd-vorschau {
  border-color: rgba(143, 166, 207, 0.4);
  color: #d8e2f5;
  box-shadow:
    0 0 0 1px rgba(143, 166, 207, 0.12) inset,
    0 0 26px -10px rgba(143, 166, 207, 0.85);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.pd-vorschau:hover {
  border-color: rgba(143, 166, 207, 0.72);
  color: #eef3ff;
  box-shadow:
    0 0 0 1px rgba(143, 166, 207, 0.2) inset,
    0 0 34px -6px rgba(143, 166, 207, 0.95);
}

/* ---------- Haken in allen Listen der Paketseiten ----------
   Sie strahlen abwechselnd blau und warm - im Leistungsumfang, bei
   "Fuer wen dieses Paket geeignet ist" und in den Zusatzleistungen.
   Der Leuchtschein kommt aus drop-shadow auf dem Zeichen selbst,
   nicht aus einem Kasten dahinter - so bleibt die Liste eine Liste. */
.pd-list li:nth-child(odd) svg {
  color: #a9bee2;
  filter: drop-shadow(0 0 6px rgba(143, 166, 207, 0.85));
}

.pd-list li:nth-child(even) svg {
  color: #ff8a68;
  filter: drop-shadow(0 0 6px rgba(255, 83, 48, 0.7));
}

/* ---------- Ablauf des Projekts ----------
   Jede Stufe traegt beide Farbebenen und blendet zwischen ihnen um.
   Der Versatz von zwei Sekunden je Stufe laesst den Wechsel von oben
   nach unten durch den Ablauf laufen. */
.pd-steps li {
  position: relative;
  isolation: isolate;
}

.pd-steps li::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(130% 95% at 50% 0%, rgba(255, 83, 48, 0.15), transparent 66%);
  box-shadow:
    0 0 0 1px rgba(255, 83, 48, 0.26) inset,
    0 0 36px -14px rgba(255, 83, 48, 0.7);
  animation: kachel-ember 14s ease-in-out infinite;
}

/* Die Ziffer traegt die blaue Ebene mit - sie ist ohnehin ein
   ::before und darf ihre Rolle behalten. */
.pd-steps li::before {
  z-index: 1;
  color: #b9c8e6;
  text-shadow: 0 0 10px rgba(143, 166, 207, 0.6);
}

.pd-steps li {
  border-color: rgba(143, 166, 207, 0.26);
  box-shadow: 0 0 34px -16px rgba(143, 166, 207, 0.7);
}

.pd-steps li:nth-child(1)::before,
.pd-steps li:nth-child(1)::after { animation-delay: -0.0s; }
.pd-steps li:nth-child(2)::before,
.pd-steps li:nth-child(2)::after { animation-delay: -2.0s; }
.pd-steps li:nth-child(3)::before,
.pd-steps li:nth-child(3)::after { animation-delay: -4.0s; }
.pd-steps li:nth-child(4)::before,
.pd-steps li:nth-child(4)::after { animation-delay: -6.0s; }
.pd-steps li:nth-child(5)::before,
.pd-steps li:nth-child(5)::after { animation-delay: -8.0s; }
.pd-steps li:nth-child(6)::before,
.pd-steps li:nth-child(6)::after { animation-delay: -10.0s; }

/* ---------- Optionale Zusatzleistungen ---------- */
.pd-optional {
  position: relative;
  isolation: isolate;
  border-color: rgba(143, 166, 207, 0.3);
}

.pd-optional::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 83, 48, 0.13), transparent 66%);
  box-shadow:
    0 0 0 1px rgba(255, 83, 48, 0.24) inset,
    0 0 44px -18px rgba(255, 83, 48, 0.65);
  animation: kachel-ember 14s ease-in-out infinite;
  animation-delay: -7s;
}

@media (prefers-reduced-motion: reduce) {
  .pd-steps li::after,
  .pd-optional::after { animation: none; opacity: 0; }
}

/* ---------- Eyebrows im Webdesign-Bereich ----------
   Sie tragen den Blauton der Hero-Figur, nicht das Ember: Ember ist
   hier die Auszeichnung fuer das hervorgehobene Paket und die
   Leuchtpillen. Waere jede Bereichsmarke ebenfalls warm, hoert die
   Hervorhebung auf, eine zu sein. */
.webdesign-farben .eyebrow {
  color: #c2d3ef;
}

.webdesign-farben .eyebrow::before {
  background: linear-gradient(90deg, transparent, rgba(143, 166, 207, 0.95));
}

.webdesign-farben .eyebrow::after {
  background: linear-gradient(270deg, transparent, rgba(143, 166, 207, 0.95));
}

/* ---------- Rot nur fuer das beliebte Paket ----------
   Ember ist die Auszeichnung fuer Landingpage Pro. Alle anderen
   Anfrage- und Paketknoepfe leuchten im Blau der Hero-Figur, sonst
   waere die Hervorhebung keine mehr.

   Die blaue Pille ist dieselbe Leuchtpille, nur mit dem Blau an der
   Stelle, an der sonst das Ember im Verlauf sitzt. */
.pk-card:not(.pk-card--featured) .pk-card__go,
.pd-go:not(.pd-go--beliebt) {
  background-image: linear-gradient(
    108deg,
    var(--silver-3) 0%,
    var(--silver-1) 18%,
    #ffffff 32%,
    var(--silver-2) 46%,
    #7d97cc 58%,
    var(--silver-1) 72%,
    var(--silver-3) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 14px 40px -14px rgba(125, 151, 204, 0.55),
    0 8px 30px -10px rgba(220, 225, 240, 0.4);
}

.pk-card:not(.pk-card--featured) .pk-card__go::before,
.pd-go:not(.pd-go--beliebt)::before {
  background: linear-gradient(100deg, #7d97cc, var(--silver-1), #7d97cc);
}

/* ---------- Anfrageknoepfe in der Vergleichstabelle ----------
   Sie haben einen hellen Grund, die Schrift bleibt deshalb dunkel -
   die Farbe steckt im Rand und im Schein. Die Pro-Spalte warm, die
   uebrigen vier blau. */
.pk-compare__row-cta .btn--solid {
  border: 1px solid rgba(125, 151, 204, 0.6);
  box-shadow: 0 0 22px -6px rgba(125, 151, 204, 0.85);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.pk-compare__row-cta .btn--solid:hover {
  border-color: rgba(125, 151, 204, 0.95);
  box-shadow: 0 0 30px -2px rgba(125, 151, 204, 1);
}

/* Der Knopf der Pro-Spalte traegt das Ember im Grund, nicht nur im
   Rand: neben dem hellen Silber der anderen vier war ein roter Ring
   allein kaum zu sehen. Die Schrift bleibt dunkel, der Grund ist hell
   genug. */
.pk-compare__row-cta td:nth-child(4) .btn--solid {
  background: linear-gradient(135deg, #ffb59e, #ff7a52 52%, #ff5330);
  color: #14060a;
  border-color: rgba(255, 83, 48, 0.85);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 190, 170, 0.5) inset,
    0 0 30px -4px rgba(255, 83, 48, 0.95),
    0 0 60px -12px rgba(255, 83, 48, 0.7);
}

.pk-compare__row-cta td:nth-child(4) .btn--solid:hover {
  background: linear-gradient(135deg, #ffc9b6, #ff8a68 52%, #ff5f3c);
  border-color: rgba(255, 83, 48, 1);
  box-shadow:
    0 0 0 1px rgba(255, 210, 195, 0.6) inset,
    0 0 40px -2px rgba(255, 83, 48, 1),
    0 0 76px -8px rgba(255, 83, 48, 0.85);
}

/* ---------- FAQ im Webdesign-Bereich ----------
   Dieselbe Wechselumrandung wie die Ablaufstufen der Paketseiten, nur
   in den Farben dieses Bereichs: Grundton Blau, das Ember blendet
   darueber. Versatz je Frage, damit der Wechsel die Liste hinablaeuft. */
.webdesign-farben .faq__item {
  position: relative;
  isolation: isolate;
  border-color: rgba(143, 166, 207, 0.26);
}

.webdesign-farben .faq__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgba(255, 83, 48, 0.3) inset,
    0 0 26px -14px rgba(255, 83, 48, 0.6);
  animation: kachel-ember 15s ease-in-out infinite;
}

.webdesign-farben .faq__item:nth-child(1)::after { animation-delay: -0.0s; }
.webdesign-farben .faq__item:nth-child(2)::after { animation-delay: -1.4s; }
.webdesign-farben .faq__item:nth-child(3)::after { animation-delay: -2.8s; }
.webdesign-farben .faq__item:nth-child(4)::after { animation-delay: -4.2s; }
.webdesign-farben .faq__item:nth-child(5)::after { animation-delay: -5.6s; }
.webdesign-farben .faq__item:nth-child(6)::after { animation-delay: -7.0s; }
.webdesign-farben .faq__item:nth-child(7)::after { animation-delay: -8.4s; }
.webdesign-farben .faq__item:nth-child(8)::after { animation-delay: -9.8s; }
.webdesign-farben .faq__item:nth-child(9)::after { animation-delay: -11.2s; }
.webdesign-farben .faq__item:nth-child(10)::after { animation-delay: -12.6s; }
.webdesign-farben .faq__item:nth-child(11)::after { animation-delay: -14.0s; }
.webdesign-farben .faq__item:nth-child(12)::after { animation-delay: -15.4s; }
.webdesign-farben .faq__item:nth-child(13)::after { animation-delay: -16.8s; }
.webdesign-farben .faq__item:nth-child(14)::after { animation-delay: -18.2s; }
.webdesign-farben .faq__item:nth-child(15)::after { animation-delay: -19.6s; }

@media (prefers-reduced-motion: reduce) {
  .webdesign-farben .faq__item::after { animation: none; opacity: 0; }
}