/* =========================================================================
   pascom-telefonanlage.css — Landingpage "pascom Cloud-Telefonanlage"
   -------------------------------------------------------------------------
   Aufbau und Tonfall bewusst analog zu dora-hosting.css: dieselben
   Design-Tokens aus styles.css (--bg, --text-*, --brand, --cyan), damit der
   Wechsel von der Startseite auf diese Seite kein Bruch ist. Wer hier etwas
   aendert, sollte einen Blick auf dora-hosting.css werfen — die beiden
   Seiten sollen nebeneinander bestehen koennen.

   Zu den Farben:
   - --brand (#2563eb) erreicht auf dem dunklen Grund nur 3,9:1 und ist
     deshalb NICHT fuer Text zugelassen. Fuer Links und Beschriftungen wird
     --brand-glow (#60a5fa, 8,0:1) bzw. --cyan (9,5:1) verwendet.
     --brand bleibt Flaechenfarbe fuer Buttons.
   - pascom-Rot (#d20435) ist eine FREMDE Marke. Es taucht deshalb nur dort
     auf, wo es der Partnerschaft gilt: Badge-Karte und die Linie darueber.
     Es wird nie als Textfarbe und nie als Bedienfarbe benutzt, damit die
     Seite optisch weiter zu Odenwald IT Service gehoert und nicht zu pascom.

   Das Partner-Logo liegt als helle Variante vor (weisser Grund, Anthrazit,
   Rot). Es wird NICHT umgefaerbt, sondern auf eine weisse Karte gesetzt —
   Markenzeichen Dritter bleiben unveraendert.
   ========================================================================= */

.pascom {
  /* Flaechen */
  --p-surface:   rgba(255, 255, 255, 0.022);
  --p-surface-2: rgba(255, 255, 255, 0.04);
  --p-border:    rgba(120, 150, 200, 0.14);
  --p-border-2:  rgba(120, 150, 200, 0.26);

  /* Text — Kontraste gegen #04060d geprueft */
  --p-text:      var(--text);        /* 17,4:1 */
  --p-text-2:    var(--text-2);      /* 10,4:1 */
  --p-text-3:    var(--text-3);      /*  5,4:1 */

  /* Akzente */
  --p-accent:    var(--brand-glow);  /*  8,0:1 — Links, Kicker */
  --p-accent-2:  var(--cyan);        /*  9,5:1 — Marken, Kennwerte */
  --p-btn:       var(--brand);       /* nur als Flaeche */
  --p-btn-hover: var(--brand-soft);

  /* Fremdmarke, siehe Kopfkommentar */
  --p-pascom:    #d20435;

  --p-radius:    6px;
  --p-maxw:      1080px;
  --p-padx:      clamp(20px, 5vw, 44px);

  --p-sec-y:     clamp(72px, 9vw, 124px);
  --p-gap-lg:    clamp(32px, 4vw, 52px);

  background: var(--bg);
  color: var(--p-text);
  font-family: var(--font-body);
  line-height: 1.72;
  font-size: 17px;
  overflow-x: hidden;
}

/* Inhalt ueber die fixierten Hintergrundebenen heben. Bewusst nur main und
   footer einzeln, NICHT per :not()-Sammelregel — die haette Spezifitaet
   0,3,0, wuerde das sticky der Navigationsleiste ueberschreiben und einen
   Stacking-Context um #contact-root legen, der das Kontakt-Popup unter die
   Leiste sperrt. Gleiche Begruendung wie in dora-hosting.css. */
.pascom > main,
.pascom > .p-footer { position: relative; z-index: 3; }

/* Globale Regeln aus styles.css fuer diese Seite neutralisieren */
.pascom section { position: relative; padding: 0; }
.pascom p { margin: 0 0 18px; color: var(--p-text-2); }
.pascom p:last-child { margin-bottom: 0; }
.pascom h1, .pascom h2, .pascom h3, .pascom h4 {
  font-family: var(--font-display);
  color: var(--p-text);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}
.pascom a { color: var(--p-accent); text-decoration: none; }
.pascom a:hover { text-decoration: underline; }
.pascom ul, .pascom ol { margin: 0; padding: 0; }
.pascom strong { color: var(--p-text); font-weight: 600; }

.pascom :focus-visible {
  outline: 3px solid var(--p-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sprungmarken duerfen nicht unter der Sticky-Leiste landen */
.pascom section[id],
.pascom [id] { scroll-margin-top: 92px; }

/* Skip-Link */
.pascom .p-skip {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 200;
  background: var(--p-btn);
  color: #fff;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--p-radius);
}
.pascom .p-skip:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  left: 10px;
  top: 10px;
  text-decoration: none;
}

/* ── Layout-Primitive ──────────────────────────────────────────────────── */
.p-wrap {
  max-width: var(--p-maxw);
  margin: 0 auto;
  padding-left: var(--p-padx);
  padding-right: var(--p-padx);
}
/* .pascom vorangestellt, und das ist hier kein Schoenheitsfehler:
   styles.css setzt global `section { padding: clamp(80px,12vw,160px) 0 }`.
   Dagegen steht oben die Neutralisierung `.pascom section { padding: 0 }`
   mit Spezifitaet 0,1,1. Ein blankes `.p-sec` hat nur 0,1,0 und verliert
   dieses Duell — die Seite haette dann ueberhaupt keinen vertikalen
   Rhythmus mehr. Gleiches gilt fuer .p-hero weiter unten. Wer den Praefix
   entfernt, macht die Abstaende der ganzen Seite platt. */
.pascom .p-sec { padding: var(--p-sec-y) 0; }
.p-sec--alt {
  background: linear-gradient(180deg, rgba(10, 17, 34, 0.55), rgba(10, 17, 34, 0.22));
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
}
.p-sec__head { max-width: 780px; margin-bottom: var(--p-gap-lg); }
.p-sec h2 { font-size: clamp(26px, 3.5vw, 35px); font-weight: 600; }
.p-sec__head p { font-size: 18.5px; margin-top: 20px; }

.p-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  margin-bottom: 18px;
}

/* ── Kopfnavigation (sticky) ───────────────────────────────────────────── */
.p-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--p-border);
  background: rgba(4, 6, 13, 0.82);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
}
/* Fallback: ohne backdrop-filter deckend zeichnen, sonst liest sich der
   durchscrollende Text durch die Leiste hindurch. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .p-nav { background: #05070f; }
}
.p-nav .p-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}
.pascom .p-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--p-text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.pascom .p-nav__brand:hover { text-decoration: none; color: var(--p-accent); }
.pascom .p-nav__brand img { width: 26px; height: 26px; display: block; }
.p-nav__links { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 15px; }
.pascom .p-nav__links a { color: var(--p-text-2); }
.pascom .p-nav__links a:hover { color: var(--p-accent); }
/* Auf schmalen Schirmen umbricht die Leiste sonst auf drei Zeilen und frisst
   als Sticky-Element rund 15 % der Bildschirmhoehe. Dort bleiben nur Marke
   und Kontakt stehen. */
@media (max-width: 700px) {
  .p-nav .p-wrap { padding-top: 12px; padding-bottom: 12px; }
  .p-nav__links { gap: 8px 18px; font-size: 14px; }
  .p-nav__links a:not([data-contact]) { display: none; }
  .pascom section[id], .pascom [id] { scroll-margin-top: 76px; }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
/* .pascom noetig, siehe Begruendung bei .p-sec.
   Der obere Wert traegt zusaetzlich den Abstand zur klebenden Leiste — die
   ist 61px hoch und liegt darueber, ohne Platz zu beanspruchen. */
.pascom .p-hero { padding: clamp(60px, 8vw, 104px) 0 0; }
.p-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 940px) {
  .p-hero__grid { grid-template-columns: 1fr; gap: 40px; }
}
.p-hero h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.14;
  max-width: 22ch;
}
/* .pascom vorangestellt: sonst gewinnt die Sammelregel `.pascom p` (0,1,1)
   mit ihrem margin-Kurzwert und setzt margin-top auf 0. Gilt ebenso fuer
   .p-hero__note und .p-tablenote weiter unten. */
.pascom .p-hero__lead {
  font-size: clamp(17.5px, 2vw, 20px);
  max-width: 60ch;
  margin-top: 28px;
  color: var(--p-text-2);
}
.p-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.pascom .p-hero__note {
  margin-top: 24px;
  font-size: 14.5px;
  color: var(--p-text-3);
  max-width: 58ch;
}

/* ── Partner-Badge ─────────────────────────────────────────────────────── */
/* Die weisse Karte ist Absicht: das Logo liegt nur als helle Variante vor
   und wird nicht umgefaerbt. Der rote Streifen oben ist die einzige Stelle,
   an der die Fremdmarke Flaeche bekommt. */
.p-badge {
  background: #fff;
  border-radius: var(--p-radius);
  border-top: 3px solid var(--p-pascom);
  padding: 26px clamp(22px, 3vw, 34px) 24px;
  box-shadow: 0 18px 46px -22px rgba(0, 0, 0, 0.85);
  max-width: 400px;
}
.p-badge img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 300px;
}
/* .pascom noetig: das Element ist ein <p>, und `.pascom p` (0,1,1) wuerde
   sonst die helle Textfarbe der dunklen Seite durchdruecken — auf der
   weissen Badge-Karte ergaebe das rund 2:1 Kontrast. */
.pascom .p-badge__meta {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(29, 40, 43, 0.14);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  /* Auf Weiss: 8,2:1 */
  color: #4a5356;
  line-height: 1.7;
}
.p-badge__meta strong { color: #1d282b; font-weight: 600; }

/* Kleine Variante fuer die Fusszeile der Preis-Sektion */
.p-badge--sm { max-width: 300px; padding: 20px 24px; }
.p-badge--sm img { max-width: 230px; }

/* ── Faktenleiste ──────────────────────────────────────────────────────── */
.p-facts { margin-top: clamp(52px, 7vw, 84px); }
.p-facts ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--p-border);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  overflow: hidden;
}
.p-facts li {
  background: #060a14;
  padding: 28px clamp(20px, 2.2vw, 28px);
}
.p-facts .p-facts__k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  margin-bottom: 14px;
}
.p-facts .p-facts__v {
  display: block;
  color: var(--p-text);
  font-size: 15.5px;
  line-height: 1.55;
}
.p-facts .p-facts__v b {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
  letter-spacing: -0.02em;
}
@media (max-width: 860px) { .p-facts ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .p-facts ul { grid-template-columns: 1fr; } }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.p-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: var(--p-radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.pascom .p-btn:hover { text-decoration: none; }
.pascom .p-btn--primary { background: var(--p-btn); color: #fff; }
.pascom .p-btn--primary:hover { background: var(--p-btn-hover); color: #fff; }
.pascom .p-btn--ghost {
  background: transparent;
  color: var(--p-accent);
  border-color: var(--p-border-2);
}
.pascom .p-btn--ghost:hover {
  background: rgba(96, 165, 250, 0.09);
  border-color: var(--p-accent);
  color: var(--p-accent);
}

/* ── Prosa und Listen ──────────────────────────────────────────────────── */
.p-prose { max-width: 72ch; }
.p-prose h3 { font-size: 19px; font-weight: 600; margin: 40px 0 14px; }
.p-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.p-list li {
  position: relative;
  padding-left: 26px;
  color: var(--p-text-2);
  max-width: 74ch;
}
/* Wabe — das Motiv aus dem Logo, siehe styles.css */
.p-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 12px;
  height: 12px;
  background: var(--p-accent-2);
  opacity: 0.85;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.p-list--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px 40px;
}

/* ── Karten ────────────────────────────────────────────────────────────── */
.p-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}
.p-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-top: 2px solid var(--p-accent-2);
  border-radius: var(--p-radius);
  padding: 30px;
}
.p-card h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 14px; }
.p-card p { font-size: 15px; line-height: 1.62; }
.p-card__meta {
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--p-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--p-text-3);
  text-transform: uppercase;
}

/* ── KI-Agenten ────────────────────────────────────────────────────────── */
.p-agents {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: var(--p-gap-lg);
}
.p-agent {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 30px 28px 28px;
  display: flex;
  flex-direction: column;
}
.p-agent__ico {
  width: 42px;
  height: 46px;
  display: grid;
  place-items: center;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: 20px;
}
.p-agent__ico svg { width: 19px; height: 19px; color: var(--p-accent-2); }
.p-agent h3 { font-size: 18.5px; font-weight: 600; margin-bottom: 8px; }
.p-agent__claim {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  margin-bottom: 16px;
}
.p-agent p { font-size: 15px; line-height: 1.64; }
.p-agent__use {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--p-border);
  font-size: 14.5px;
  color: var(--p-text-3);
  line-height: 1.6;
}
.p-agent__use strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--p-text-3);
  margin-bottom: 8px;
  font-weight: 500;
}

/* ── Ablaufkette eines Anrufs ──────────────────────────────────────────── */
.p-chain {
  list-style: none;
  counter-reset: pchain;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin-top: var(--p-gap-lg);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  overflow: hidden;
}
.p-chain li {
  counter-increment: pchain;
  background: #060a14;
  padding: 26px 24px 24px;
  border-right: 1px solid var(--p-border);
  position: relative;
}
.p-chain li:last-child { border-right: 0; }
.p-chain li::before {
  content: counter(pchain, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--p-accent-2);
  margin-bottom: 14px;
}
.p-chain h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.p-chain p { font-size: 14px; line-height: 1.58; color: var(--p-text-3); }
@media (max-width: 720px) {
  .p-chain { grid-template-columns: 1fr; }
  .p-chain li { border-right: 0; border-bottom: 1px solid var(--p-border); }
  .p-chain li:last-child { border-bottom: 0; }
}

/* ── Beispiel-Mitschrift ───────────────────────────────────────────────── */
/* Zeigt an einem Beispiel, was aus einem Anruf wird. Bewusst als
   Terminal-artiger Block: es ist eine Maschinen-Ausgabe, keine Werbung. */
.p-script {
  border: 1px solid var(--p-border-2);
  border-radius: var(--p-radius);
  background: #050810;
  overflow: hidden;
}
.p-script__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-bottom: 1px solid var(--p-border);
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-text-3);
}
.p-script__dot {
  width: 8px;
  height: 9px;
  background: var(--neon, #e6ff14);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  flex-shrink: 0;
}
.p-script__body { padding: 26px 22px; }
.p-turn {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 6px 16px;
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.62;
}
.p-turn__who {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  padding-top: 4px;
}
.p-turn__who--caller { color: var(--p-text-3); }
.p-turn__txt { color: var(--p-text-2); }
.p-turn__txt em { color: var(--p-text); font-style: normal; }
@media (max-width: 560px) {
  .p-turn { grid-template-columns: 1fr; gap: 4px; }
  .p-turn__who { padding-top: 0; }
}

/* Ergebnis-Tabelle im Mitschrift-Block */
.p-extract {
  border-top: 1px solid var(--p-border);
  padding: 22px 22px 24px;
  background: rgba(56, 189, 248, 0.035);
}
.p-extract__h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  margin-bottom: 16px;
}
.p-extract dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 22px;
  font-size: 14.5px;
}
.p-extract dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--p-text-3);
  padding-top: 2px;
}
.p-extract dd { margin: 0; color: var(--p-text); }
@media (max-width: 520px) {
  .p-extract dl { grid-template-columns: 1fr; gap: 3px 0; }
  .p-extract dd { margin-bottom: 12px; }
}

/* ── Hinweisblock ──────────────────────────────────────────────────────── */
.p-hint {
  margin-top: 34px;
  padding: 24px 26px;
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--p-radius);
  font-size: 15px;
  line-height: 1.66;
  color: var(--p-text-2);
}
.p-hint strong { display: block; margin-bottom: 8px; color: var(--p-text); }

/* Warnvariante — Grenzen der Automatik, z. B. Notfaelle in der Praxis.
   Bernstein statt Rot: Rot ist auf dieser Seite fuer die Fremdmarke
   reserviert. #fbbf24 erreicht auf #04060d 11,3:1. */
.p-hint--limit {
  background: rgba(251, 191, 36, 0.05);
  border-color: rgba(251, 191, 36, 0.26);
}
.p-hint--limit strong { color: #fbbf24; }

/* ── Funktionsraster ───────────────────────────────────────────────────── */
.p-featgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--p-border);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  overflow: hidden;
  margin-top: var(--p-gap-lg);
}
.p-featgrid section {
  background: #060a14;
  padding: 28px 26px 30px;
}
.p-featgrid h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  margin-bottom: 18px;
}
.p-featgrid ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.p-featgrid li {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--p-text-2);
  padding-left: 17px;
  position: relative;
}
.p-featgrid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 8px;
  background: var(--p-border-2);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ── Preiskarten ───────────────────────────────────────────────────────── */
.p-price {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}
@media (max-width: 760px) { .p-price { grid-template-columns: 1fr; } }
.p-price__card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  padding: 32px 30px;
}
.p-price__card--lead { border-color: var(--p-border-2); background: var(--p-surface-2); }
.p-price__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--p-accent-2);
  display: block;
  margin-bottom: 16px;
}
.p-price__amount {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 600;
  color: var(--p-text);
  letter-spacing: -0.03em;
  line-height: 1;
  display: block;
}
.p-price__unit {
  display: block;
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--p-text-3);
}
.pascom .p-price__card p { margin-top: 18px; font-size: 15px; line-height: 1.62; }

/* ── Tabellen ──────────────────────────────────────────────────────────── */
.p-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  background: var(--p-surface);
  -webkit-overflow-scrolling: touch;
  margin-bottom: 34px;
}
.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 560px;
}
.p-table caption {
  text-align: left;
  padding: 20px 26px;
  font-size: 14px;
  color: var(--p-text-3);
  border-bottom: 1px solid var(--p-border);
}
.p-table th,
.p-table td {
  padding: 16px 26px;
  text-align: left;
  border-bottom: 1px solid var(--p-border);
  vertical-align: top;
  line-height: 1.55;
}
.p-table thead th {
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--p-text-3);
}
.p-table tbody th { font-weight: 600; color: var(--p-text); width: 40%; }
.p-table td { color: var(--p-text-2); }
.p-table tbody tr:last-child th,
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table .p-val {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--p-accent-2);
  white-space: nowrap;
}
.pascom .p-tablenote { margin-top: 20px; font-size: 14.5px; color: var(--p-text-3); max-width: 78ch; }

/* ── Ablauf in Schritten ───────────────────────────────────────────────── */
.p-steps {
  list-style: none;
  counter-reset: pstep;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
}
.p-steps li {
  counter-increment: pstep;
  border-top: 1px solid var(--p-border-2);
  padding-top: 24px;
}
.p-steps li::before {
  content: counter(pstep, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--p-accent-2);
  margin-bottom: 16px;
}
.p-steps h3 { font-size: 17.5px; font-weight: 600; margin-bottom: 12px; }
.p-steps p { font-size: 15px; line-height: 1.62; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.p-faq { border-top: 1px solid var(--p-border); }
.p-faq details { border-bottom: 1px solid var(--p-border); }
.p-faq summary {
  cursor: pointer;
  padding: 24px 44px 24px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17.5px;
  color: var(--p-text);
  position: relative;
  list-style: none;
}
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--p-accent-2);
  border-bottom: 2px solid var(--p-accent-2);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.p-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.p-faq summary:hover { color: var(--p-accent); }
.p-faq__a { padding: 0 0 28px; max-width: 74ch; }
.p-faq__a p { font-size: 16px; line-height: 1.7; }

/* ── Abschluss-CTA ─────────────────────────────────────────────────────── */
.p-cta {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.02));
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
}
.p-cta h2 { font-size: clamp(25px, 3.5vw, 33px); }
.p-cta p { max-width: 62ch; margin-top: 20px; font-size: 17.5px; }
.p-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.pascom p.p-cta__note { margin-top: 28px; font-size: 14.5px; color: var(--p-text-3); }

/* ── Querverweise ──────────────────────────────────────────────────────── */
.pascom .p-crosslinks {
  margin: 0;
  padding: 40px 0 0;
  font-size: 14.5px;
  color: var(--p-text-3);
  line-height: 2;
}
.pascom .p-crosslinks a { color: var(--p-text-2); }
.pascom .p-crosslinks a:hover { color: var(--p-accent); }

/* ── Marken- und Preishinweis ──────────────────────────────────────────── */
.p-disclaimer { padding: 40px 0; border-top: 1px solid var(--p-border); }
.pascom .p-disclaimer p { font-size: 14px; color: var(--p-text-3); line-height: 1.7; max-width: 82ch; }

/* ── Fusszeile ─────────────────────────────────────────────────────────── */
.pascom .p-footer {
  background: transparent;
  border-top: 1px solid var(--p-border);
  padding: 34px 0 44px;
  position: static;
}
.pascom .p-footer .p-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--p-text-3);
}
.pascom .p-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.pascom .p-footer a { color: var(--p-text-2); font-size: 14px; }
.pascom .p-footer a:hover { color: var(--p-accent); }

/* ── Reduzierte Bewegung ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pascom *, .pascom *::before, .pascom *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Druckausgabe: dunkle Seite auf hell drehen ────────────────────────── */
@media print {
  .pascom { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .bg-mesh, .bg-noise, .p-nav, .p-hero__actions, .p-cta__actions, .p-skip { display: none !important; }
  .pascom h1, .pascom h2, .pascom h3, .pascom h4, .pascom strong,
  .p-facts .p-facts__v, .p-table tbody th, .p-extract dd,
  .p-price__amount { color: #000 !important; }
  .pascom p, .p-card p, .p-table td, .p-list li, .p-agent p, .p-chain p,
  .p-hint, .p-tablenote, .p-faq__a p, .p-featgrid li, .p-turn__txt { color: #1a1a1a !important; }
  .p-kicker, .p-facts__k, .p-table .p-val, .p-card__meta, .p-steps li::before,
  .p-chain li::before, .p-table thead th, .p-agent__claim, .p-featgrid h3,
  .p-extract__h, .p-extract dt, .p-turn__who, .p-price__label { color: #444 !important; }
  .p-facts li, .p-card, .p-hint, .p-tablewrap, .p-sec--alt, .p-cta,
  .p-agent, .p-chain li, .p-featgrid section, .p-script, .p-script__body,
  .p-extract, .p-price__card { background: #fff !important; border-color: #999 !important; }
  .p-sec { padding: 18pt 0; page-break-inside: avoid; }
  .p-faq details { page-break-inside: avoid; }
  .p-faq details:not([open]) .p-faq__a { display: block; }
  .p-tablewrap { overflow: visible; }
  .p-table { min-width: 0; }
  .p-table th, .p-table td { padding: 6pt 8pt; border-color: #999 !important; }
  .p-badge { box-shadow: none; border: 1px solid #999; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}