/* Pricing content only. Website chrome comes from html/css. */
:root { --orange: #ffa237; --orange-hover: #ff9e2d; --cyan: #59d0dc; --teal: #1099a8; --blue: #0b5db8; --cream: #fefaf6; --ink: #202020; --muted: #605d5d; --line: #e5e2de; --white: #fff; --radius: 28px; --header: 80px; --subnav: 58px; }
:where(.pricing-content) * { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + var(--subnav) + 24px); }
:where(.pricing-content) h1, :where(.pricing-content) h2, :where(.pricing-content) h3, :where(.pricing-content) p { margin-top: 0px; }
:where(.pricing-content) h1, :where(.pricing-content) h2, :where(.pricing-content) h3 { color: rgb(17, 17, 17); line-height: 1.2; letter-spacing: -0.035em; }
:where(.pricing-content) h1 { font-size: clamp(36px, 4.1vw, 58px); font-weight: 700; }
:where(.pricing-content) h2 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 22px; }
:where(.pricing-content) h3 { font-size: 21px; font-weight: 600; margin-bottom: 14px; }
:where(.pricing-content) p { margin-bottom: 18px; }
:where(.pricing-content) a { color: inherit; text-underline-offset: 4px; }
:where(.pricing-content) button, :where(.pricing-content) input, :where(.pricing-content) select { font: inherit; }
:where(.pricing-content) button, :where(.pricing-content) a, :where(.pricing-content) summary { -webkit-tap-highlight-color: transparent; }
:where(.pricing-content) button { cursor: pointer; }
:where(.pricing-content) button:disabled { cursor: default; }
:where(.pricing-content) a:focus-visible, :where(.pricing-content) button:focus-visible, :where(.pricing-content) summary:focus-visible, :where(.pricing-content) [tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
:where(.pricing-content) a:hover { text-decoration-thickness: 2px; }
:where(.pricing-content) img { max-width: 100%; height: auto; }
:where(.pricing-content) section { scroll-margin-top: calc(var(--header) + var(--subnav) + 20px); }
:where(.pricing-content) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 20px; background: var(--orange); border-radius: 14px; }
.skip-link:focus { top: 12px; }
:where(.pricing-content) .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 14px 23px; background: var(--orange); color: rgb(23, 23, 23); border: 1px solid transparent; border-radius: 28px; text-decoration: none; font-size: 15px; font-weight: 600; line-height: 1.45; text-align: center; transition: background 0.18s, box-shadow 0.18s; }
:where(.pricing-content) .button:hover { background: var(--orange-hover); box-shadow: rgba(0, 0, 0, 0.063) 0px 5px 15px; text-decoration: none; }
.section-nav { position: sticky; top: var(--header); z-index: 20; background: var(--cream); border-bottom: 1px solid var(--line); }
.section-nav > div { display: flex; gap: 8px; max-width: 1340px; margin: auto; padding: 8px 24px; overflow-x: auto; scrollbar-width: thin; min-height: var(--subnav); align-items: center; }
.section-nav a { white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 22px; color: rgb(79, 77, 75); }
.section-nav a:hover, .section-nav a[aria-current="true"] { background: rgb(255, 255, 255); color: rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.047) 0px 1px 4px; }
.pricing-content { max-width: 1340px; margin: auto; padding: 0px 28px; }
.pricing-content > section { padding: 64px 0px; border-bottom: 1px solid rgb(238, 234, 229); }
.pricing-content > section:last-child { border-bottom: 0px; }
:where(.pricing-content) .hero { position: relative; text-align: center; padding: 58px 16px 24px; isolation: isolate; }
:where(.pricing-content) .kicker { font-size: 13px; letter-spacing: 0.11em; font-weight: 600; color: rgb(22, 115, 167); margin-bottom: 16px; }
:where(.pricing-content) .hero h1 { margin: 0px 0px 24px; }
:where(.pricing-content) .lead { font-size: 18px; color: var(--muted); line-height: 1.75; max-width: 850px; }
:where(.pricing-content) .hero .lead { margin: 0px auto 24px; max-width: 790px; }
:where(.pricing-content) .switch { display: flex; width: max-content; max-width: 100%; margin: 27px auto 12px; gap: 5px; background: rgb(238, 236, 232); border: 1px solid rgb(227, 224, 218); border-radius: 30px; padding: 5px; }
:where(.pricing-content) .switch button { border: 0px; padding: 11px 21px; border-radius: 25px; background: transparent; color: rgb(62, 60, 57); font-size: 14px; font-weight: 600; min-height: 44px; }
:where(.pricing-content) .switch button[aria-pressed="true"] { background: var(--orange); color: rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.047) 0px 2px 5px; }
:where(.pricing-content) .note { font-size: 13px; color: var(--muted); line-height: 1.7; }
:where(.pricing-content) .hero .note { margin-bottom: 6px; }
.pricing-page .plans>.limited-offer{grid-column:3/5;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 11px;margin:0;padding:10px 16px;border-radius:16px;background:#082b3c;color:#fff;box-shadow:0 8px 24px #082b3c1a;text-align:center}
.pricing-page .limited-offer span{font-size:10px;font-weight:700;letter-spacing:.12em;color:#ffa32e}
.pricing-page .limited-offer strong{font-size:14px;line-height:1.3}
.pricing-page .limited-offer small{font-size:11px;line-height:1.35;color:#d9edf0}
:where(.pricing-content) .plans { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 17px; margin: 24px 0px; scroll-margin-top: calc(var(--header) + var(--subnav) + 20px); }
:where(.pricing-content) .plan { background: rgb(255, 255, 255); border: 1px solid rgb(222, 219, 214); border-radius: var(--radius); box-shadow: rgba(48, 39, 21, 0.027) 0px 12px 35px; overflow: hidden; display: flex; flex-direction: column; }
:where(.pricing-content) .plan.recommended { border: 2px solid var(--orange); box-shadow: rgba(255, 162, 55, 0.133) 0px 12px 38px; }
:where(.pricing-content) .tag { min-height: 48px; background: rgb(244, 242, 239); padding: 13px 18px; font-size: 11.5px; font-weight: 600; display: flex; align-items: center; }
:where(.pricing-content) .recommended .tag { background: var(--orange); }
:where(.pricing-content) .inside { padding: 23px 21px; display: flex; flex-direction: column; flex: 1 1 0%; }
:where(.pricing-content) .inside h2 { font-size: 29px; margin-bottom: 12px; letter-spacing: -0.025em; }
:where(.pricing-content) .price { font-size: 48px; font-weight: 700; line-height: 1.2; letter-spacing: -2px; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; }
:where(.pricing-content) .unit, :where(.pricing-content) .billing { font-size: 12px; color: rgb(85, 85, 85); margin: 8px 0px 0px; }
:where(.pricing-content) .billing { min-height: 38px; }
:where(.pricing-content) .desc { font-size: 14px; line-height: 1.6; font-weight: 600; margin: 16px 0px; min-height: 45px; }
:where(.pricing-content) .plan ul { padding: 0px; margin: 0px 0px 26px; list-style: none; flex: 1 1 0%; font-size: 13px; line-height: 1.6; }
:where(.pricing-content) .plan li { position: relative; padding: 10px 0px 10px 19px; border-bottom: 1px solid rgb(239, 237, 232); }
:where(.pricing-content) .plan li::before { content: "✓"; position: absolute; left: 0px; color: rgb(8, 116, 127); font-weight: 600; }
:where(.pricing-content) .plan li:last-child { border-bottom: 0px; }
:where(.pricing-content) .plan .button { padding: 13px 10px; width: 100%; font-size: 13px; background: white; border-color: rgb(198, 194, 190); }
:where(.pricing-content) .plan.recommended .button { background: var(--orange); border-color: var(--orange); }
:where(.pricing-content) .plan .button:hover { background: rgb(255, 241, 223); border-color: var(--orange); }
:where(.pricing-content) .plan.recommended .button:hover { background: var(--orange-hover); }
.pricing-page .trial-promo{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;margin:0 0 18px;padding:20px 24px;border:1px solid #cce9eb;border-radius:20px;background:#e8f7f8}
.pricing-page .trial-promo-badge{display:inline-block;margin-bottom:5px;font-size:10px;font-weight:700;letter-spacing:.11em;color:#08747f}
.pricing-page .trial-promo h2{font-size:21px;line-height:1.25;margin:0 0 4px}
.pricing-page .trial-promo p{margin:0;color:#454d4e;font-size:14px}
.pricing-page .trial-promo .button{min-width:190px;background:#ffa32e;border-color:#ffa32e;color:#111}
.pricing-page .trial-promo .button:hover{background:#ffad45}
.pricing-content > .note { text-align: center; margin: 10px auto; max-width: 1080px; }
:where(.pricing-content) .benefits { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 22px; margin: 30px 0px 38px; }
:where(.pricing-content) .benefits article { background: var(--cream); padding: 28px; border-radius: var(--radius); border: 1px solid rgb(240, 232, 223); }
:where(.pricing-content) .benefits h3 { font-size: 19px; }
:where(.pricing-content) .benefits p { font-size: 15px; color: var(--muted); margin-bottom: 12px; }
:where(.pricing-content) .benefits a { font-size: 14px; font-weight: 600; }
:where(.pricing-content) .freegrid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 22px; margin: 30px 0px; }
:where(.pricing-content) .freegrid article { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; background: rgb(255, 255, 255); }
:where(.pricing-content) .step { font-family: Rajdhani, Poppins, sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.02em; color: rgb(18, 106, 133); margin-bottom: 16px; }
:where(.pricing-content) .freegrid h3 { font-size: 21px; line-height: 1.35; }
:where(.pricing-content) .freegrid p { font-size: 15px; color: var(--muted); margin: 0px; }
:where(.pricing-content) .darknote { background: rgb(232, 247, 248); color: var(--ink); border: 1px solid rgb(204, 233, 235); border-radius: var(--radius); padding: 36px; margin-top: 28px; }
:where(.pricing-content) .darknote h2, :where(.pricing-content) .darknote h3 { color: rgb(17, 17, 17); }
:where(.pricing-content) .darknote .kicker { color: rgb(18, 106, 133) !important; }
:where(.pricing-content) .darknote p { color: rgb(69, 77, 78); max-width: 1000px; }
:where(.pricing-content) .darknote .button { margin-top: 4px; }
:where(.pricing-content) .featuregrid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 32px; margin: 30px 0px; }
:where(.pricing-content) .featuregrid h3 { font-size: 20px; }
:where(.pricing-content) .featuregrid p { font-size: 15px; }
:where(.pricing-content) .hotelprice { font-size: 47px; font-weight: 700; line-height: 1.2; letter-spacing: -1.5px; margin-top: 10px; }
:where(.pricing-content) #hotelbilling { font-size: 14px; margin: 10px 0px 20px; }
:where(.pricing-content) .storagegrid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 18px; margin: 30px 0px 15px; }
:where(.pricing-content) .storagegrid article { border: 1px solid var(--line); padding: 24px; border-radius: var(--radius); }
:where(.pricing-content) .storagegrid h3 { font-size: 20px; margin-bottom: 12px; }
:where(.pricing-content) .datacard { font-size: 36px; font-weight: 700; color: rgb(8, 116, 127); letter-spacing: -1px; }
:where(.pricing-content) .storagegrid p { font-size: 14px; color: var(--muted); margin: 12px 0px 0px; }
:where(.pricing-content) .reviewspot { background: var(--cream); border: 1px solid rgb(241, 223, 198); padding: 40px; position: relative; overflow: hidden; }
:where(.pricing-content) .reviewspot::before { content: ""; position: absolute; right: -95px; top: -95px; width: 230px; height: 230px; border: 35px solid rgba(255, 162, 55, 0.145); border-radius: 50%; pointer-events: none; }
:where(.pricing-content) .reviewspot > h2 { max-width: 850px; font-size: clamp(27px, 2.8vw, 38px); position: relative; }
:where(.pricing-content) .reviewspot > .lead { max-width: 900px; font-size: 17px; }
:where(.pricing-content) .reviewspot .kicker { color: rgb(150, 80, 10) !important; }
:where(.pricing-content) .reviewspot .featuregrid { gap: 30px; padding-top: 10px; }
:where(.pricing-content) .agentcards { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 22px; }
:where(.pricing-content) .agentcards article { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(255, 255, 255); }
:where(.pricing-content) .agentcards article:nth-child(2) { border-color: rgb(89, 179, 189); background: rgb(245, 252, 252); }
:where(.pricing-content) .agentcards strong { font-size: 26px; font-weight: 600; letter-spacing: -0.8px; color: rgb(18, 106, 133); display: block; line-height: 1.4; }
:where(.pricing-content) .agentcards p { font-size: 14px; color: var(--muted); }
:where(.pricing-content) .agentcards p:first-of-type { margin-top: 7px; }
:where(.pricing-content) .addons { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px; }
:where(.pricing-content) .addons article { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: rgb(255, 255, 255); }
:where(.pricing-content) .addons h3 { font-size: 21px; }
:where(.pricing-content) .addons strong { font-size: 28px; font-weight: 600; color: rgb(18, 106, 133); }
:where(.pricing-content) .addons p { font-size: 15px; color: var(--muted); margin-bottom: 0px; }
:where(.pricing-content) .faqs { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 35px; align-items: start; }
:where(.pricing-content) .faqs details { font-size: 15px; }
:where(.pricing-content) .faqs p { padding-right: 20px; }
:where(.pricing-content) details { border-bottom: 1px solid var(--line); padding: 0px; }
:where(.pricing-content) summary { font-size: 17px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; list-style: none; padding: 22px 0px; min-height: 66px; line-height: 1.5; }
:where(.pricing-content) summary::-webkit-details-marker { display: none; }
:where(.pricing-content) summary::after { content: "+"; font-weight: 400; font-size: 24px; flex: 0 0 auto; line-height: 1; color: rgb(18, 106, 133); }
:where(.pricing-content) details[open] > summary::after { content: "−"; }
:where(.pricing-content) details p { line-height: 1.85; color: var(--muted); margin-top: 0px; }
:where(.pricing-content) #vergleich > details { border: 1px solid var(--line); border-radius: 20px; padding: 0px 24px; background: rgb(255, 255, 255); }
:where(.pricing-content) #vergleich > details > summary { font-size: 18px; }
:where(.pricing-content) #vergleich .note { font-size: 13px; }
:where(.pricing-content) .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 22px; scrollbar-width: thin; }
:where(.pricing-content) table { border-collapse: separate; border-spacing: 0px; width: 100%; min-width: 920px; font-size: 13px; line-height: 1.6; text-align: left; }
:where(.pricing-content) caption { text-align: left; font-size: 13px; font-weight: 600; padding: 12px 16px; background: var(--cream); }
:where(.pricing-content) th, :where(.pricing-content) td { padding: 15px 16px; border-bottom: 1px solid rgb(229, 231, 229); vertical-align: top; }
:where(.pricing-content) thead th { background: rgb(227, 244, 245); color: rgb(32, 57, 60); font-weight: 600; }
:where(.pricing-content) tbody th { font-weight: 400; min-width: 240px; max-width: 330px; background: rgb(255, 255, 255); }
:where(.pricing-content) tr:nth-child(2n) td, :where(.pricing-content) tr:nth-child(2n) th { background: rgb(249, 249, 247); }
:where(.pricing-content) tr:last-child td, :where(.pricing-content) tr:last-child th { border-bottom: 0px; }
:where(.pricing-content) thead th:first-child, :where(.pricing-content) tbody th { position: sticky; left: 0px; z-index: 1; box-shadow: rgb(229, 231, 229) 1px 0px; }
:where(.pricing-content) td { min-width: 150px; }
:where(.pricing-content) .fair { border: 1px solid var(--line); border-radius: 20px; padding: 0px 28px; background: var(--cream); }
:where(.pricing-content) .fair p { padding-bottom: 15px; font-size: 15px; }
:where(.pricing-content) #partner { padding: 28px 0px; }
:where(.pricing-content) #partner > details > summary { font-size: 17px; }
:where(.pricing-content) #partner .darknote { margin-bottom: 24px; }
:where(.pricing-content) .final { border-radius: var(--radius); background: var(--cream); border: 1px solid rgb(237, 222, 201); padding: 38px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
:where(.pricing-content) .final h2 { font-size: 30px; max-width: 760px; }
:where(.pricing-content) .final p { font-size: 15px; color: var(--muted); margin-bottom: 0px; }
:where(.pricing-content) .tierlink { flex-shrink: 0; }
@media (min-width: 1101px) {
:where(.pricing-content) .plan.recommended { transform: translateY(-5px); }
.pricing-page .plans>#tarif-free{grid-column:1;grid-row:2}
.pricing-page .plans>#tarif-grow{grid-column:2;grid-row:2}
.pricing-page .plans>.limited-offer{grid-column:3/5;grid-row:1}
.pricing-page .plans>#tarif-pro{grid-column:3;grid-row:2}
.pricing-page .plans>#tarif-business{grid-column:4;grid-row:2}
}
@media (max-width: 1100px) {
:where(.pricing-content) .plans { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 22px; }
.pricing-page .plans>.limited-offer{grid-column:1/-1}
:where(.pricing-content) .tag { font-size: 13px; }
:where(.pricing-content) .inside { padding: 26px; }
:where(.pricing-content) .plan li { font-size: 14px; }
:where(.pricing-content) .plan .button { font-size: 15px; }
:where(.pricing-content) .desc { min-height: 0px; }
:where(.pricing-content) .billing { min-height: 24px; }
:where(.pricing-content) .storagegrid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
:where(.pricing-content) .featuregrid { gap: 20px; }
:where(.pricing-content) .final { flex-direction: column; align-items: flex-start; }
:where(.pricing-content) .freegrid article, :where(.pricing-content) .benefits article { padding: 22px; }
}
@media (max-width: 800px) {
:root { --header: 72px; }
:where(.pricing-content) .hero { padding-top: 40px; }
:where(.pricing-content) .hero h1 { font-size: 42px; }
:where(.pricing-content) .benefits, :where(.pricing-content) .freegrid, :where(.pricing-content) .featuregrid, :where(.pricing-content) .agentcards { grid-template-columns: 1fr; }
:where(.pricing-content) .benefits { gap: 14px; }
:where(.pricing-content) .freegrid { gap: 14px; }
:where(.pricing-content) .featuregrid { gap: 12px; }
:where(.pricing-content) .featuregrid p { margin-bottom: 8px; }
:where(.pricing-content) .darknote { padding: 28px; }
:where(.pricing-content) .reviewspot { padding: 30px; }
:where(.pricing-content) .faqs { grid-template-columns: 1fr; }
:where(.pricing-content) .benefits h3 { font-size: 20px; }
.pricing-content > section { padding: 44px 0px; }
.section-nav > div { padding-left: 18px; padding-right: 18px; }
.section-nav a { padding: 8px 12px; }
:where(.pricing-content) #orientierung .benefits { margin: 24px 0px; }
}
@media (max-width: 540px) {
.pricing-content { padding: 0px 18px; }
.section-nav a { font-size: 12px; }
:where(.pricing-content) .hero { padding: 32px 0px 18px; }
:where(.pricing-content) .hero h1 { font-size: 35px; letter-spacing: -1px; }
:where(.pricing-content) .hero .lead { font-size: 16px; line-height: 1.75; }
:where(.pricing-content) .kicker { font-size: 12px; }
:where(.pricing-content) .plans { grid-template-columns: 1fr; margin-top: 20px; gap: 20px; }
.pricing-page .plans>.limited-offer{grid-column:1}
:where(.pricing-content) .inside { padding: 25px; }
:where(.pricing-content) .tag { font-size: 12px; }
:where(.pricing-content) .plan ul { margin-bottom: 22px; }
:where(.pricing-content) .plan li { font-size: 14px; }
:where(.pricing-content) .plan .button { font-size: 15px; }
:where(.pricing-content) .price { font-size: 49px; }
:where(.pricing-content) .desc { margin-top: 18px; }
:where(.pricing-content) .billing { min-height: 0px; }
:where(.pricing-content) .lead { font-size: 16px; }
:where(.pricing-content) .storagegrid { gap: 12px; }
:where(.pricing-content) .storagegrid article { padding: 18px; border-radius: 20px; }
:where(.pricing-content) .storagegrid h3 { font-size: 18px; }
:where(.pricing-content) .datacard { font-size: 29px; }
:where(.pricing-content) .storagegrid p { font-size: 13px; }
:where(.pricing-content) .addons { grid-template-columns: 1fr; }
:where(.pricing-content) .addons article { padding: 24px; }
:where(.pricing-content) .featuregrid { grid-template-columns: 1fr; }
:where(.pricing-content) .reviewspot { padding: 25px; }
:where(.pricing-content) .darknote { padding: 25px; }
:where(.pricing-content) .reviewspot h2 { font-size: 28px; }
:where(.pricing-content) .reviewspot .lead { font-size: 16px; }
:where(.pricing-content) .reviewspot > h3 { font-size: 21px; }
:where(.pricing-content) .button { min-height: 48px; }
:where(.pricing-content) .reviewspot > .button { width: 100%; font-size: 14px; }
:where(.pricing-content) .agentcards article { padding: 25px; }
:where(.pricing-content) #vergleich > details { padding: 0px 16px; }
:where(.pricing-content) .tablewrap { margin-left: -4px; margin-right: -4px; }
:where(.pricing-content) thead th:first-child, :where(.pricing-content) tbody th { min-width: 145px; max-width: 145px; white-space: normal; }
:where(.pricing-content) table { min-width: 770px; font-size: 12px; }
:where(.pricing-content) th, :where(.pricing-content) td { padding: 13px 11px; }
:where(.pricing-content) td { min-width: 145px; }
:where(.pricing-content) summary { font-size: 16px; gap: 14px; }
:where(.pricing-content) .fair { padding: 0px 20px; }
:where(.pricing-content) .fair p { font-size: 14px; }
:where(.pricing-content) .final { padding: 26px; gap: 18px; }
:where(.pricing-content) .final h2 { font-size: 27px; }
:where(.pricing-content) .final .button { width: 100%; }
:where(.pricing-content) .hero .switch button { padding: 11px 17px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
:where(.pricing-content) *, :where(.pricing-content) ::before, :where(.pricing-content) ::after { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
}
html { scroll-padding-top: 0px; }
.pricing-content { scroll-margin-top: calc(var(--header) + var(--subnav) + 20px); }
@media print {
.section-nav, .skip-link { display: none; }
.pricing-content { max-width: none; padding: 0px; }
:where(.pricing-content) .hero { padding: 0px; }
:where(.pricing-content) .plans { grid-template-columns: repeat(2, 1fr); }
:where(.pricing-content) section { break-inside: avoid; }
:where(.pricing-content) .plan { break-inside: avoid; }
:where(.pricing-content) details > * { display: block !important; }
:where(.pricing-content) .tablewrap { overflow: visible; }
:where(.pricing-content) table { min-width: 0px; font-size: 9px; }
:where(.pricing-content) th, :where(.pricing-content) td { min-width: 0px !important; position: static !important; }
:where(.pricing-content) .button { border: 1px solid rgb(170, 170, 170); }
}
:where(.pricing-content) .hero { padding: 30px 10px 8px; }
:where(.pricing-content) .hero h1 { font-size: clamp(30px, 3.2vw, 44px); max-width: 1000px; margin: 0px auto 14px; }
:where(.pricing-content) .hero .lead { font-size: 17px; margin-bottom: 16px; }
:where(.pricing-content) .hero .kicker { margin-bottom: 12px; }
:where(.pricing-content) .switch { margin-top: 18px; }
:where(.pricing-content) .plans { margin-top: 18px; }
.pricing-content > section { padding: 38px 0px; }
:where(.pricing-content) #vergleich > .lead { display: none; }
:where(.pricing-content) #vergleich h2, :where(.pricing-content) #fragen h2 { font-size: 30px; }
:where(.pricing-content) #vergleich > .fair { margin-top: 12px; background: var(--cream); }
:where(.pricing-content) .faqs { grid-template-columns: 1fr; max-width: 960px; }
:where(.pricing-content) .faqs summary { padding: 18px 0px; min-height: 60px; }
:where(.pricing-content) .back-to-plans { font-size: 14px; font-weight: 600; margin: 26px 0px 0px; }
@media (max-width: 540px) {
:where(.pricing-content) .hero { padding: 26px 0px 10px; }
:where(.pricing-content) .hero h1 { font-size: 30px; line-height: 1.25; }
:where(.pricing-content) .hero .lead { font-size: 15px; }
.pricing-content > section { padding: 30px 0px; }
.compact-page .section-nav > div { justify-content: center; }
:where(.pricing-content) .inside { padding: 22px; }
:where(.pricing-content) #vergleich h2, :where(.pricing-content) #fragen h2 { font-size: 27px; }
}

/* Match version 1: center submenu, preserve access when overflowing. */
.section-nav > div { justify-content: safe center; }

/* Compact trial request; expanded by the Pro CTA. */
.pricing-page .trial-section{margin:48px 0;scroll-margin-top:calc(var(--header-height,80px) + 90px)}
.pricing-page .trial-details{border:1px solid #dedbd7;border-radius:24px;background:#fefaf6;padding:24px}
.pricing-page .trial-details>summary{cursor:pointer;font-weight:600;font-size:1.15rem}
.pricing-page .trial-body{max-width:840px;margin:24px auto 0}
.pricing-page .trial-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
.pricing-page #trial-form label{display:block;font-weight:500;margin-bottom:5px}
.pricing-page #trial-form input,.pricing-page #trial-form select,.pricing-page #trial-form textarea{box-sizing:border-box;width:100%;padding:10px 12px;background:white;border:1px solid #aaa;border-radius:10px;font:inherit;color:#161616;min-height:44px}
.pricing-page #trial-form :is(input,select,textarea,button):focus-visible{outline:3px solid #00728c;outline-offset:3px}
.pricing-page #trial-form .note{margin:14px 0;text-align:left}
.pricing-page #trial-form button{cursor:pointer;border:0;background:#ffa32e;color:#111}
.pricing-page #trial-form button:disabled{opacity:.6;cursor:wait}
.pricing-page .trial-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pricing-page #trial-status[data-error="true"]{color:#a12020}
@media(max-width:600px){.pricing-page .trial-grid{grid-template-columns:1fr}.pricing-page .trial-details{padding:18px}.pricing-page #trial-form button{width:100%}}

.pricing-page .trial-help{font-size:.85rem;line-height:1.5;margin:7px 0 0;color:#555}.pricing-page #trial-form [hidden]{display:none!important}

/* Trial form: familiar homepage imagery with a focused form panel. */
.pricing-page .trial-details{padding:0;overflow:hidden;background:#fff;box-shadow:0 16px 48px #17273208;border-radius:28px}
.pricing-page .trial-details>summary{padding:26px 30px;background:#e8f7f8;color:#111;line-height:1.45;transition:background-color .15s ease}
.pricing-page .trial-details>summary:hover{background:#dff1f3}
.pricing-page .trial-details>summary:focus-visible{outline:3px solid #00728c;outline-offset:-4px}
.pricing-page .trial-details[open]>summary{border-bottom:1px solid #cce9eb}
.pricing-page .trial-body{max-width:none;margin:0}
.pricing-page .trial-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr)}
.pricing-page .trial-visual{padding:36px 30px;background:linear-gradient(155deg,#fff5e8 0%,#fefaf6 60%,#e8f7f8 100%);align-self:stretch}
.pricing-page .trial-eyebrow{display:block;font-size:.72rem;font-weight:600;letter-spacing:.12em;color:#916020;margin-bottom:14px}
.pricing-page .trial-visual h3{font-size:clamp(23px,2.1vw,30px);line-height:1.22;letter-spacing:-.025em;margin:0;color:#101010}
.pricing-page .trial-visual-image{display:block;width:100%;height:auto;margin:28px auto 24px;filter:drop-shadow(0 12px 18px #674b3012)}
.pricing-page .trial-visual-intro p{font-size:.94rem;line-height:1.75;margin:0;color:#4b4b4b}
.pricing-page .trial-reassurance{display:flex;flex-direction:column;gap:10px;margin-top:24px;font-size:.82rem;font-weight:500}
.pricing-page .trial-reassurance span::before{content:'✓';color:#00728c;margin-right:9px}
.pricing-page .trial-form-panel{padding:30px 34px;min-width:0}
.pricing-page .trial-form-panel>h3{font-size:1.35rem;line-height:1.3;margin:0 0 8px;letter-spacing:-.02em}
.pricing-page .trial-form-panel>.note{font-size:.78rem;text-align:left;margin:0;color:#666}
.pricing-page .trial-fieldset{border:0;border-top:1px solid #ebe6e1;margin:16px 0 0;padding:14px 0 0;min-width:0}
.pricing-page .trial-fieldset:first-of-type{margin-top:14px}
.pricing-page .trial-fieldset legend{padding:0 10px 0 0;font-size:.95rem;font-weight:600;color:#00728c}
.pricing-page .trial-grid{gap:12px 16px;margin:10px 0 0}
.pricing-page .trial-span-2{grid-column:1/-1}
.pricing-page .trial-fieldset:last-of-type{margin-bottom:16px}
.pricing-page .trial-question{border-top:1px solid #ebe6e1;padding-top:14px}
.pricing-page .trial-question h4{margin:0 0 10px;font-size:.95rem;color:#00728c}
.pricing-page #trial-form label{font-size:.87rem}
.pricing-page #trial-form input,.pricing-page #trial-form select,.pricing-page #trial-form textarea{font-size:.94rem;border-color:#d7d1cb;background:#fff;transition:border-color .15s,box-shadow .15s}
.pricing-page #trial-form input:hover,.pricing-page #trial-form select:hover,.pricing-page #trial-form textarea:hover{border-color:#97918b}
.pricing-page #trial-form input::placeholder{color:#8a8681}
.pricing-page #trial-form button{width:100%;min-height:52px;box-shadow:0 6px 16px #ffa32e20}
.pricing-page #trial-status:empty{display:none}
.pricing-page #trial-status:not(:empty){padding:18px;border-radius:14px;background:#e8f7f8;line-height:1.6}
.pricing-page #trial-status[data-error="true"]{background:#fff0ee}
@media(max-width:900px){.pricing-page .trial-form-panel{padding:24px}.pricing-page .trial-visual{padding:28px 22px}.pricing-page .trial-grid{grid-template-columns:1fr}.pricing-page .trial-span-2{grid-column:auto}}
@media(max-width:700px){.pricing-page .plans>.limited-offer{border-radius:16px;padding:11px 14px;gap:4px 9px}.pricing-page .limited-offer small{flex-basis:100%}.pricing-page .trial-promo{grid-template-columns:1fr;padding:18px}.pricing-page .trial-promo .button{width:100%;min-width:0}.pricing-page .trial-layout{grid-template-columns:1fr}.pricing-page .trial-details>summary{padding:22px;font-size:1.1rem}.pricing-page .trial-visual{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:14px;padding:24px}.pricing-page .trial-visual h3{font-size:22px}.pricing-page .trial-eyebrow{font-size:.65rem;margin-bottom:10px}.pricing-page .trial-visual-image{margin:0;align-self:center}.pricing-page .trial-visual-intro{grid-column:1/-1}.pricing-page .trial-visual-intro p{font-size:.87rem;line-height:1.6}.pricing-page .trial-reassurance{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:8px 14px;margin:0;font-size:.72rem}.pricing-page .trial-form-panel{padding:24px}.pricing-page #trial-form input,.pricing-page #trial-form select,.pricing-page #trial-form textarea{font-size:16px}}
@media(prefers-reduced-motion:reduce){.pricing-page .trial-details>summary,.pricing-page #trial-form input,.pricing-page #trial-form select,.pricing-page #trial-form textarea{transition:none}}