/* Preisseite (20.10.2026): eigene Bausteine der Seite, unabhängig vom vorgebauten Website-Stylesheet. */
.pp { --pp-cobalt: #1a5cb8; --pp-cobalt-700: #164c99; --pp-cobalt-50: #eef4fb; --pp-cobalt-100: #d8e5f6; --pp-line: #e2e8f0; --pp-text: #0f172a; --pp-muted: #475569; --pp-soft: #64748b; --pp-ok: #047857; --pp-ok-soft: #ecfdf5; }
.pp-wrap { margin-inline: auto; max-width: 72rem; padding-inline: 1rem; }
@media (min-width: 640px) { .pp-wrap { padding-inline: 1.5rem; } }
.pp-section { padding-block: 4rem; scroll-margin-top: 4rem; }
@media (min-width: 640px) { .pp-section { padding-block: 5.5rem; } }
.pp-white { background: #fff; }
.pp-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pp-cobalt); }
.pp-eyebrow::before { content: ""; width: .375rem; height: .375rem; border-radius: 999px; background: #2f6bc4; }
.pp-h2 { margin-top: .75rem; font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; color: var(--pp-text); text-wrap: balance; }
@media (min-width: 640px) { .pp-h2 { font-size: 2.25rem; } }
.pp-lead { margin-top: .75rem; font-size: 16.5px; line-height: 1.65; color: var(--pp-muted); text-wrap: pretty; }
.pp-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.pp-note { font-size: 13.5px; line-height: 1.55; color: var(--pp-soft); }

/* Rechenhilfe: Personen → Monatsbetrag je Paket */
.pp-calc { margin: 2.5rem auto 0; max-width: 46rem; border-radius: 1.25rem; border: 1px solid var(--pp-line); background: #fff; padding: 1.25rem; box-shadow: 0 1px 2px rgb(15 23 42 / .06); }
@media (min-width: 640px) { .pp-calc { padding: 1.5rem 1.75rem; } }
.pp-calc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.pp-calc label { font-size: 15px; font-weight: 700; color: var(--pp-text); }
.pp-stepper { display: inline-flex; align-items: center; border: 1px solid var(--pp-line); border-radius: .75rem; overflow: hidden; }
.pp-stepper button { width: 2.75rem; height: 2.75rem; font-size: 20px; font-weight: 700; color: var(--pp-cobalt); background: #fff; }
.pp-stepper button:hover { background: var(--pp-cobalt-50); }
.pp-stepper input { width: 3.75rem; height: 2.75rem; border-inline: 1px solid var(--pp-line); text-align: center; font-size: 17px; font-weight: 700; color: var(--pp-text); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.pp-stepper input::-webkit-outer-spin-button, .pp-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-calc-hint { margin-top: .75rem; font-size: 13.5px; color: var(--pp-muted); }
.pp-calc-hint strong { color: var(--pp-text); }

/* Paketkarten */
.pp-cards { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1024px) { .pp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-card { position: relative; display: flex; flex-direction: column; border-radius: 1.5rem; background: #fff; border: 1px solid var(--pp-line); padding: 1.75rem; box-shadow: 0 1px 3px rgb(15 23 42 / .06); }
@media (min-width: 640px) { .pp-card { padding: 2rem; } }
.pp-card.is-recommended { border: 2px solid var(--pp-cobalt); box-shadow: 0 20px 40px -12px rgb(26 92 184 / .25); }
.pp-badge { position: absolute; top: -.85rem; left: 1.75rem; border-radius: 999px; background: var(--pp-cobalt); color: #fff; font-size: 12px; font-weight: 700; padding: .25rem .75rem; }
.pp-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--pp-text); }
.pp-for { margin-top: .35rem; font-size: 14px; line-height: 1.5; color: var(--pp-muted); min-height: 2.6em; }
.pp-price { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.pp-price strong { font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; color: var(--pp-text); }
.pp-price span { font-size: 13.5px; font-weight: 500; color: var(--pp-soft); }
.pp-calc-out { margin-top: .6rem; min-height: 1.4em; font-size: 14px; color: var(--pp-muted); }
.pp-calc-out strong { color: var(--pp-text); }
.pp-calc-out .pp-best { margin-left: .35rem; border-radius: 999px; background: var(--pp-ok-soft); color: var(--pp-ok); font-size: 12px; font-weight: 700; padding: .1rem .5rem; white-space: nowrap; }
.pp-facts { margin-top: 1.1rem; display: grid; gap: .6rem; border-radius: 1rem; background: var(--pp-cobalt-50); padding: 1rem; box-shadow: inset 0 0 0 1px var(--pp-cobalt-100); }
.pp-fact { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .6rem; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--pp-text); }
.pp-fact svg { width: 1.25rem; height: 1.25rem; color: var(--pp-cobalt); margin-top: .05rem; }
.pp-fact small { display: block; font-size: 12.5px; color: var(--pp-muted); }
.pp-list { margin-top: 1.1rem; flex: 1; display: grid; gap: .5rem; align-content: start; }
.pp-list li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .55rem; font-size: 14.5px; line-height: 1.5; color: #334155; }
.pp-list li::before { content: ""; width: 1rem; height: 1rem; margin-top: .2rem; background: var(--pp-cobalt); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pp-cta { margin-top: 1.5rem; display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; border-radius: .9rem; padding: .85rem 1.25rem; font-size: 15px; font-weight: 700; border: 1px solid #8bb0e2; color: var(--pp-cobalt-700); background: #fff; transition: background-color .15s; }
.pp-cta:hover { background: var(--pp-cobalt-50); }
.pp-card.is-recommended .pp-cta { background: var(--pp-cobalt); border-color: var(--pp-cobalt); color: #fff; }
.pp-card.is-recommended .pp-cta:hover { background: var(--pp-cobalt-700); }
.pp-card .pp-note { margin-top: .6rem; text-align: center; }

/* In jedem Paket enthalten */
.pp-areas { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 640px) { .pp-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pp-area { border-radius: 1.1rem; border: 1px solid var(--pp-line); background: #fff; padding: 1.25rem; }
.pp-area h3 { font-size: 15.5px; font-weight: 700; color: var(--pp-text); }
.pp-area ul { margin-top: .6rem; display: grid; gap: .35rem; }
.pp-area li { font-size: 14px; line-height: 1.5; color: var(--pp-muted); padding-left: .9rem; position: relative; }
.pp-area li::before { content: ""; position: absolute; left: 0; top: .6em; width: .35rem; height: .35rem; border-radius: 999px; background: #5a8cd3; }

/* Vergleichstabelle */
.pp-toolbar { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.pp-switch { display: inline-flex; align-items: center; gap: .6rem; font-size: 14.5px; font-weight: 600; color: var(--pp-text); cursor: pointer; }
.pp-switch input { width: 1.1rem; height: 1.1rem; accent-color: var(--pp-cobalt); }
.pp-table-wrap { margin-top: 1rem; border-radius: 1.25rem; border: 1px solid var(--pp-line); background: #fff; }
.pp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; }
.pp-table col.pp-col-label { width: 40%; }
@media (min-width: 768px) { .pp-table col.pp-col-label { width: 46%; } .pp-table { font-size: 15px; } }
.pp-table thead th { position: sticky; top: 3.5rem; z-index: 2; background: #fff; border-bottom: 1px solid var(--pp-line); padding: .85rem .4rem; text-align: center; vertical-align: bottom; }
.pp-table thead th:first-child { text-align: left; padding-left: 1rem; border-top-left-radius: 1.25rem; }
.pp-table thead th:last-child { border-top-right-radius: 1.25rem; }
.pp-th-name { display: block; font-size: 15px; font-weight: 700; color: var(--pp-text); }
.pp-th-price { display: block; font-size: 12.5px; font-weight: 500; color: var(--pp-soft); }
.pp-table thead th.is-recommended .pp-th-name { color: var(--pp-cobalt); }
.pp-table tbody th, .pp-table tbody td { border-bottom: 1px solid #f1f5f9; padding: .7rem .4rem; vertical-align: top; }
.pp-table tbody th { text-align: left; font-weight: 500; color: #334155; padding-left: 1rem; }
.pp-table tbody th small { display: block; margin-top: .15rem; font-size: 12.5px; font-weight: 400; color: var(--pp-soft); line-height: 1.45; }
.pp-table tbody td { text-align: center; color: var(--pp-text); font-weight: 600; overflow-wrap: anywhere; }
.pp-table td.is-recommended { background: #f7faff; }
.pp-yes { display: inline-block; width: 1.15rem; height: 1.15rem; vertical-align: -.2em; background: var(--pp-cobalt); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.pp-group th { background: #f8fafc; padding: 0 !important; }
.pp-group button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; text-align: left; font-size: 14.5px; font-weight: 700; color: var(--pp-text); }
.pp-group button::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--pp-soft); border-bottom: 2px solid var(--pp-soft); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.pp-group button[aria-expanded="false"]::after { transform: rotate(-45deg); }
.pp-table tbody[data-collapsed] tr:not(.pp-group) { display: none; }
.pp-only-diff .pp-table tr[data-same] { display: none; }
.pp-only-diff .pp-table tbody:not(:has(tr:not(.pp-group):not([data-same]))) { display: none; }
.pp-table tbody:last-child tr:last-child > * { border-bottom: 0; }
@media (max-width: 639px) {
  .pp-table thead th { padding: .7rem .2rem; }
  .pp-th-name { font-size: 13.5px; }
  .pp-th-price { font-size: 11.5px; }
  .pp-table tbody th, .pp-table tbody td { padding: .6rem .25rem; font-size: 13px; }
  .pp-table tbody th { padding-left: .75rem; }
  .pp-table thead th:first-child { padding-left: .75rem; }
  .pp-group button { padding: .75rem; }
}

/* Zusatzbuchungen und Ersparnis */
.pp-grid3 { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .pp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pp-grid2 { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 1024px) { .pp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-box { border-radius: 1.25rem; border: 1px solid var(--pp-line); background: #fff; padding: 1.5rem; }
.pp-box h3 { font-size: 1.1rem; font-weight: 700; color: var(--pp-text); }
.pp-box p { margin-top: .5rem; font-size: 14.5px; line-height: 1.6; color: var(--pp-muted); }
.pp-mini { margin-top: 1rem; width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pp-mini th, .pp-mini td { padding: .55rem 0; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; }
.pp-mini th { font-weight: 500; color: #334155; }
.pp-mini td { text-align: right; font-weight: 700; color: var(--pp-text); white-space: nowrap; padding-left: .75rem; }
.pp-mini tr:last-child > * { border-bottom: 0; }
.pp-mini small { display: block; font-size: 12.5px; font-weight: 500; color: var(--pp-soft); white-space: normal; }
.pp-mini .pp-save { color: var(--pp-ok); }
.pp-box .pp-pill { display: inline-block; margin-top: 1rem; border-radius: .75rem; background: var(--pp-ok-soft); color: var(--pp-ok); font-size: 13.5px; font-weight: 700; padding: .45rem .75rem; }

/* FAQ */
.pp-faq { margin: 2.5rem auto 0; max-width: 48rem; display: grid; gap: .75rem; }
.pp-faq details { border-radius: 1rem; border: 1px solid var(--pp-line); background: #fff; }
.pp-faq summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-size: 15.5px; font-weight: 700; color: var(--pp-text); }
.pp-faq summary::-webkit-details-marker { display: none; }
.pp-faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--pp-soft); border-bottom: 2px solid var(--pp-soft); transform: rotate(45deg); transition: transform .2s; }
.pp-faq details[open] summary::after { transform: rotate(-135deg); }
.pp-faq details > div { padding: 0 1.25rem 1.1rem; font-size: 15px; line-height: 1.65; color: var(--pp-muted); }
.pp-faq details > div p + p { margin-top: .6rem; }

.pp a.pp-link { color: var(--pp-cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pp-anchors { margin-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.pp-anchors a { border-radius: 999px; border: 1px solid var(--pp-line); background: #fff; padding: .4rem .9rem; font-size: 13.5px; font-weight: 600; color: #334155; }
.pp-anchors a:hover { border-color: #8bb0e2; color: var(--pp-cobalt-700); }