/* Pricing page /preise/ (tarifmodell/preise.xhtml): scoped to .hwp, works inside every sales template. */
.hwp {
  --hwp-ink: #18181b; --hwp-muted: #52525b; --hwp-line: #e4e4e7; --hwp-soft: #f4f4f5;
  --hwp-accent: #4f46e5; --hwp-accent-ink: #fff; --hwp-ok: #15803d; --hwp-radius: 14px;
  max-width: 72em; margin: 0 auto; padding: 3em 1em 4em; color: var(--hwp-ink);
  font-size: 16px; line-height: 1.6; display: grid; gap: 3em; box-sizing: border-box;
}
.hwp *, .hwp *::before, .hwp *::after { box-sizing: inherit; }
.hwp > *, .hwp-plans > * { min-width: 0; }
.hwp { width: 100%; overflow-wrap: anywhere; }
/* own light background across the whole width: some sales frames are dark (hwa-modern .hwa-page) – the page is a
   <div> inside the frame's <main>, so box-shadow + clip-path paint the sides without horizontal scrolling */
.hwp { --hwp-page: #faf8f5; background: var(--hwp-page); box-shadow: 0 0 0 100vmax var(--hwp-page); clip-path: inset(0 -100vmax); }
/* hwa-modern: the navigation is fixed, the content starts below it like the other inner pages */
.hwa-page > .hwp { padding-top: 6.5rem; }
.hwp h1 { font-weight: 800; font-size: clamp(1.8em, 4vw, 2.6em); line-height: 1.15; margin: .25em 0 .75em; }
.hwp h2 { margin: 0; font-size: 1.3em; line-height: 1.3; font-weight: 700; }
.hwp-h2 { font-size: 1.5em; margin-bottom: 1em !important; }
.hwp-hero { text-align: center; max-width: 46em; margin: 0 auto; }
.hwp-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8em; font-weight: 700; color: var(--hwp-accent); margin: 0; }
.hwp-sub { color: var(--hwp-muted); font-size: 1.1em; margin: 0 0 1.5em; }
.hwp-setup { color: var(--hwp-ink); font-weight: 600; font-size: 15px; line-height: 1.4; margin: .25em 0 0; }
.hwp-muted { color: var(--hwp-muted); font-size: .9em; margin: 0; }

.hwp-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--hwp-soft); gap: 4px; }
.hwp-toggle button {
  border: 0; background: transparent; padding: .5em 1.1em; border-radius: 999px; font: inherit; font-weight: 600;
  color: var(--hwp-muted); cursor: pointer;
}
.hwp-toggle button[aria-checked="true"] { background: #fff; color: var(--hwp-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.hwp-toggle button:focus-visible, .hwp-btn:focus-visible, .hwp summary:focus-visible { outline: 3px solid var(--hwp-accent); outline-offset: 2px; }
.hwp-save { font-size: .75em; color: var(--hwp-ok); margin-left: .25em; }

.hwp[data-billing="yearly"] .hwp-m, .hwp[data-billing="monthly"] .hwp-y { display: none; }

.hwp-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25em; }
@media (max-width: 860px) { .hwp-plans { grid-template-columns: 1fr; } }
.hwp-plan {
  position: relative; display: flex; flex-direction: column; gap: .4em; padding: 1.75em 1.5em;
  border: 1px solid var(--hwp-line); border-radius: var(--hwp-radius); background: #fff;
}
.hwp-plan--popular { border: 2px solid var(--hwp-accent); box-shadow: 0 12px 32px -12px rgba(79,70,229,.35); }
.hwp-plan h2 { font-size: 1.25em; }
.hwp-badge {
  position: absolute; top: -.8em; left: 1.5em; background: var(--hwp-accent); color: var(--hwp-accent-ink);
  font-size: .75em; font-weight: 700; padding: .2em .7em; border-radius: 999px;
}
.hwp-price { margin: .25em 0 0; color: var(--hwp-muted); }
.hwp-price strong { font-size: 2.5em; line-height: 1; color: var(--hwp-ink); }
.hwp-note { margin: .5em 0 1em; flex: 1; }
.hwp-btn {
  display: inline-flex; justify-content: center; align-items: center; min-height: 2.75em; padding: .6em 1.25em;
  border-radius: 10px; border: 1px solid var(--hwp-line); background: #fff; color: var(--hwp-ink) !important;
  font-weight: 700; text-decoration: none !important;
}
.hwp-btn--primary { background: var(--hwp-accent); border-color: var(--hwp-accent); color: var(--hwp-accent-ink) !important; }
.hwp-btn--lg { font-size: 1.1em; padding: .8em 1.75em; }

.hwp-verband {
  display: flex; flex-wrap: wrap; gap: 1em 2em; justify-content: space-between; align-items: center;
  padding: 1.5em; border-radius: var(--hwp-radius); background: var(--hwp-soft);
}
.hwp-verband p { margin: .25em 0 0; max-width: 44em; color: var(--hwp-muted); }

.hwp-table-wrap { overflow-x: auto; border: 1px solid var(--hwp-line); border-radius: var(--hwp-radius); }
.hwp-table { width: 100%; border-collapse: collapse; font-size: .95em; min-width: 40em; }
.hwp-table th, .hwp-table td { padding: .7em 1em; border-bottom: 1px solid var(--hwp-line); text-align: center; vertical-align: top; }
.hwp-table th[scope="row"], .hwp-table thead th:first-child { text-align: left; font-weight: 500; }
.hwp-table thead th { background: var(--hwp-soft); font-weight: 700; }
.hwp-table tr:last-child th, .hwp-table tr:last-child td { border-bottom: 0; }
.hwp-yes { color: var(--hwp-ok); font-weight: 700; }
.hwp-no { color: #a1a1aa; }

.hwp-addons { list-style: none; margin: 0 0 .75em; padding: 0; display: grid; gap: .5em; }
.hwp-addons li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25em 1em; padding: .7em 0; border-bottom: 1px solid var(--hwp-line); }

.hwp-faq { display: grid; gap: .5em; max-width: 52em; }
.hwp-faq details { border: 1px solid var(--hwp-line); border-radius: 10px; padding: .25em 1em; background: #fff; }
.hwp-faq summary { cursor: pointer; font-weight: 600; padding: .6em 0; }
.hwp-faq p { margin: 0 0 .9em; color: var(--hwp-muted); }

.hwp-final { text-align: center; display: grid; gap: .75em; justify-items: center; }

.hwp-ngo { margin: 0; padding: 1em 1.25em; text-align: center; border: 1px dashed var(--hwp-line); border-radius: var(--hwp-radius); color: var(--hwp-muted); user-select: text; }