@font-face{font-family:Figtree;src:url('./figtree-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:Figtree;src:url('./figtree-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:Figtree;src:url('./figtree-700.woff2') format('woff2');font-weight:700;font-display:swap} :root{--orange:#F26A1F;--orange-dark:#C9520F;--ink:#1F1A16;--muted:#6B6258;--paper:#FAFAF8;--soft:#FBF1E8;--surface:#fff;--border:#EDE7DF;--green:#287b58;--radius:20px;--wrap:min(1160px,calc(100% - 64px))}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,Arial,sans-serif;font-size:17px;line-height:1.65}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.08;letter-spacing:-.045em;font-weight:600}h1{font-size:clamp(44px,4.8vw,68px)}h2{font-size:clamp(32px,3.5vw,48px)}h3{font-size:24px;letter-spacing:-.025em}p{color:var(--muted);max-width:65ch}p+p{margin-top:18px}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--orange-dark);outline-offset:5px}a:hover{color:var(--orange-dark)}.wrap{width:var(--wrap);margin:auto}.section{padding:104px 0}.soft{background:var(--soft)}.lead{font-size:21px;line-height:1.6}.kicker{font-weight:600;color:var(--orange-dark);font-size:14px;margin-bottom:22px}.fine,.small{font-size:14px;line-height:1.6}.fine{display:block;margin-top:16px}.text-link{display:inline-block;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#c9b8a8;margin-top:22px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 25px;border-radius:999px;background:var(--orange-dark);color:white;font-size:16px;font-weight:600;text-align:center;line-height:1.4}.button:hover{background:#ac4308;color:#fff}.button.small{min-height:44px;padding:11px 20px;font-size:14px}.actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:30px}.actions .text-link{margin:0}.header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;height:90px}.brand{display:flex;align-items:center}.brand img{width:61px;height:auto}.header nav{display:flex;align-items:center;gap:26px;font-size:14px;font-weight:600}.menu-toggle{display:none}.skip{position:fixed;top:-100px;left:20px;padding:12px;background:white;z-index:99}.skip:focus{top:10px}.hero{padding:76px 0 88px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.16fr 1fr;gap:40px;align-items:center}.hero-copy{position:relative;z-index:2}.hero .lead{margin-top:26px;max-width:540px}.hero-proof{display:flex;gap:24px;flex-wrap:wrap;margin-top:32px;font-size:13px;color:var(--muted)}.hero-proof span:before{content:'✓';color:var(--green);margin-right:8px}.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:590px}.orbit{position:absolute;width:440px;height:440px;border-radius:50%;background:#FBE7D8;bottom:35px;right:-5px}.orbit:after{content:'';position:absolute;inset:-20px;border-radius:50%;border:1px solid #f2d6c2}.phone{width:340px;position:relative;z-index:1;height:auto}.trip-note{position:absolute;bottom:50px;left:0;background:white;padding:15px 20px;border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px #4d301515;z-index:2;display:flex;align-items:center;gap:12px;font-size:14px}.trip-note span:not(.status-dot){display:block;font-size:12px;color:var(--muted)}.status-dot{width:10px;height:10px;background:var(--green);border-radius:50%}.recognition{border-top:1px solid var(--border)}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.split .lead{margin-top:0}.section-heading{max-width:730px;margin-bottom:48px}.section-heading>p:last-child:not(.kicker){margin-top:24px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}.step-number{display:flex;width:36px;height:36px;align-items:center;justify-content:center;background:white;color:var(--orange-dark);border-radius:50%;margin-bottom:24px;font-weight:600}.steps h3{margin-bottom:18px}.steps p{font-size:16px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.product-grid h2{margin-bottom:25px}.product-grid .lead{margin-bottom:20px}.screens{display:flex;gap:18px;align-items:flex-start;justify-content:center}.screenshot{width:calc(50% - 9px);max-width:230px;aspect-ratio:1290 / 2544;overflow:hidden;position:relative;border-radius:12px}.screenshot img{position:absolute;width:100%;max-width:none;height:auto;transform:translateY(-9%)}.tags{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0 15px}.tags span{background:var(--soft);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--orange-dark)}.smart{background:#f2f2ed}.smart .split{margin-bottom:50px}.smart-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-bottom:28px}.smart-grid h3{font-size:23px;max-width:310px;margin:15px 0}.smart-grid p{font-size:16px}.line-icon{color:var(--orange-dark);font-size:32px;line-height:1}.check-list{list-style:none;padding:0;margin:26px 0}.check-list li{padding:8px 0 8px 26px;position:relative}.check-list li:before{content:'✓';position:absolute;left:0;color:var(--green)}.report-shot{display:flex;justify-content:center}.report-shot .screenshot{width:260px;max-width:260px}.calculator-section{background:var(--soft)}.calculator{display:grid;grid-template-columns:1fr 1fr;gap:0;background:white;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}fieldset{border:0;padding:36px;margin:0}legend{float:left;width:100%;font-size:20px;font-weight:600;margin-bottom:24px}label{display:block;font-size:14px;font-weight:600;clear:both;margin:18px 0 7px}input{min-height:48px;width:100%;border:1px solid #bfb4a8;border-radius:8px;padding:10px 14px;color:var(--ink);background:white}input[aria-invalid=true]{border-color:#b03328}.input-unit{position:relative}.input-unit input{padding-right:50px}.input-unit span{position:absolute;right:16px;top:11px;color:var(--muted)}fieldset .small{margin-top:18px}.calc-results{background:#fffaf5;padding:40px;display:flex;flex-direction:column;justify-content:center}.result-caption{margin-top:22px;font-size:14px;color:var(--muted)}.result-number{font-size:64px;font-weight:600;letter-spacing:-.055em;line-height:1.3;color:var(--orange-dark);margin-bottom:24px}.result-row{display:flex;gap:15px;justify-content:space-between;padding:16px 0;border-top:1px solid var(--border);font-size:16px}.result-row strong{white-space:nowrap}#result-payback{font-size:15px;margin-top:20px}.calc-results .small{margin-top:16px}.calc-context{margin-top:25px;max-width:950px}.calc-context p{max-width:none;font-size:13px}.source{font-size:13px;margin-top:16px;line-height:1.6}.source a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px}[hidden]{display:none!important}.cta-bar{display:none}#calc-error{color:#a02d20;font-size:14px;margin-top:16px}.privacy-grid{display:grid;grid-template-columns:.6fr 1fr;align-items:center;gap:110px}.privacy-mark{display:flex;justify-content:center;padding:40px}.privacy-mark svg{width:170px;color:var(--orange-dark)}.privacy-grid h2{margin-bottom:25px}.privacy-grid .lead{margin-bottom:20px}.pricing-grid{display:grid;grid-template-columns:1fr .85fr;gap:110px;align-items:center}.pricing-grid h2{margin-bottom:25px}.pricing-grid .lead{margin-bottom:20px}.pricing-card{background:white;border:1px solid var(--border);border-radius:var(--radius);padding:40px}.pricing-card h3{font-size:21px;margin-bottom:20px}.price-line{display:flex;gap:12px;align-items:baseline}.price-line strong{font-size:60px;letter-spacing:-.055em;font-weight:600}.price-line span{color:var(--muted)}.annual{border-top:1px solid var(--border);margin:20px 0 28px;padding-top:20px}.annual span{display:block;font-size:14px;color:var(--muted);margin-top:8px}.pricing-card .button{width:100%;margin-bottom:20px}.knowledge-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.knowledge-cards a{display:flex;flex-direction:column;padding:28px;border:1px solid var(--border);border-radius:12px;background:#fff}.knowledge-cards a:hover{border-color:var(--orange-dark);color:var(--ink)}.knowledge-cards span{font-size:13px;color:var(--orange-dark);margin-bottom:20px}.knowledge-cards h3{font-size:25px;margin-bottom:16px}.knowledge-cards p{font-size:15px;margin-bottom:24px}.knowledge-cards b{font-size:14px;text-decoration:underline;text-underline-offset:5px;margin-top:auto}.faq-grid{display:grid;grid-template-columns:.7fr 1fr;gap:90px;align-items:start}.faq-grid h2{margin-bottom:24px}.faq-grid>div:first-child{position:sticky;top:130px}.faq details{border-bottom:1px solid #dfd3c7}.faq summary{display:flex;justify-content:space-between;gap:25px;list-style:none;cursor:pointer;font-weight:600;padding:21px 0;line-height:1.4}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--orange-dark);font-size:23px;line-height:1}.faq details[open] summary span{transform:rotate(45deg)}.faq details>div{padding:0 25px 24px 0}.faq p{font-size:16px}.faq p a{color:var(--orange-dark);text-decoration:underline}.closing{padding:90px 0;background:var(--ink);color:white;text-align:center}.closing h2{font-size:clamp(34px,4vw,54px)}.closing p{color:#d0c5bb;margin:24px auto}.closing .fine{color:#d0c5bb}.footer{padding:50px 0 22px;background:white}.footer-top{display:flex;justify-content:space-between;gap:40px}.footer-top img{width:65px;margin-bottom:20px}.footer-top p{font-size:14px}.footer-top>div:last-child{display:flex;gap:25px;align-items:flex-start;font-size:14px;padding-top:15px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--border);margin-top:35px;padding-top:20px;font-size:12px;color:var(--muted)}.article-hero{padding-top:75px;padding-bottom:35px;max-width:1160px}.article-hero h1{max-width:900px;margin:24px 0;font-size:clamp(40px,4.8vw,62px)}.article-hero .lead{max-width:740px;margin-bottom:20px}.article{max-width:780px;padding-bottom:85px}.article h2{font-size:31px;margin:48px 0 20px}.article p{max-width:none}.article a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:4px}.article-note{margin-top:40px;background:var(--soft);border-radius:12px;padding:24px;font-size:14px;color:var(--muted)} @media(max-width:1050px){.header nav{gap:17px;font-size:13px}.hero-grid{gap:20px}.hero-visual{min-height:520px}.phone{width:285px}.orbit{width:340px;height:340px}.hero h1{font-size:52px}.hero .lead{font-size:19px}.split,.product-grid,.privacy-grid,.pricing-grid,.faq-grid{gap:50px}.steps{gap:30px}.trip-note{left:-10px;bottom:20px}.knowledge-cards{gap:16px}.knowledge-cards a{padding:22px}.calc-results{padding:30px}.result-number{font-size:54px}} @media(max-width:760px){:root{--wrap:calc(100% - 40px)}body{font-size:16px}.header-inner{height:76px}.brand img{width:48px}.menu-toggle{display:block;background:white;border:1px solid var(--border);border-radius:999px;min-height:44px;padding:10px 18px;font-size:14px}.header nav{display:none;position:absolute;left:0;right:0;top:76px;padding:20px;background:var(--paper);border-bottom:1px solid var(--border);align-items:stretch;gap:3px}.header nav.open{display:flex;flex-direction:column}.header nav>a,.header nav>.lang-pick{padding:12px}.hero{padding:45px 0 55px}.hero-grid,.split,.product-grid,.privacy-grid,.pricing-grid,.faq-grid{grid-template-columns:1fr;gap:35px}.hero h1{font-size:clamp(40px,10.5vw,58px)}.hero .lead{font-size:19px}.hero-visual{min-height:440px;margin-top:10px}.phone{width:260px}.orbit{width:300px;height:300px;right:calc(50% - 150px);bottom:20px}.trip-note{left:10px;bottom:20px;font-size:13px}.hero-proof{gap:15px;margin-top:25px}.kicker{margin-bottom:18px}.actions{gap:20px}.actions .button{font-size:15px}.section{padding:64px 0}h2{font-size:35px}.lead{font-size:19px}.steps,.smart-grid,.knowledge-cards{grid-template-columns:1fr;gap:30px}.steps article{display:grid;grid-template-columns:36px 1fr;column-gap:20px}.steps article p{grid-column:2}.step-number{margin:0}.steps h3{align-self:center;font-size:23px}.section-heading{margin-bottom:35px}.screens{order:2;max-width:480px;width:100%;margin:auto;gap:14px}.screenshot{width:calc(50% - 7px)}.smart .split{margin-bottom:32px}.smart-grid article{padding-top:15px}.smart-grid h3{max-width:none}.report-shot .screenshot{width:230px}.calculator{grid-template-columns:1fr}fieldset{padding:25px}.calc-results{padding:28px}.result-number{font-size:56px}.result-row{font-size:15px}.privacy-mark{display:none}.pricing-card{padding:28px}.price-line strong{font-size:54px}.faq-grid>div:first-child{position:static}.faq summary{font-size:17px}.closing{padding:65px 0}.footer-top{flex-direction:column;gap:20px}.footer-top>div:last-child{flex-wrap:wrap;gap:15px 25px}.footer-bottom{flex-direction:column;gap:8px}.article-hero{padding-top:45px}.article-hero h1{font-size:40px}.article h2{font-size:28px}.article{padding-bottom:60px}.cta-bar{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(250,250,248,.97);border-top:1px solid var(--border);padding:12px 20px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #4d301512}.cta-bar span{font-size:12px;color:var(--muted);text-align:center}body{padding-bottom:112px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}} .calculator-section .section-heading { margin-bottom: 24px; } .calculator-disclosure > summary { display: inline-flex; align-items: center; gap: 16px; padding: 12px 0; min-height: 48px; cursor: pointer; list-style: none; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; } .calculator-disclosure > summary::-webkit-details-marker { display: none; } .calculator-disclosure > summary span { color: var(--orange-dark); font-size: 24px; } .calculator-disclosure[open] > summary span { transform: rotate(45deg); } .calculator-disclosure .calculator { margin-top: 24px; } .smart-grid .line-icon { display: block; width: 32px; height: 32px; overflow: visible; } /* The language switch, in the header nav and in the footer of every page. The header carries the two-letter code (it keeps the five-item Dutch nav on one line at 768px) with an aria-label and a title; the footer carries the language's own name. --muted on --paper measures 5,72:1, so it is AA at this size; on a phone the switch is a row of the open menu and inherits .header nav>a{padding:12px}, which keeps 44pt. */ .lang-switch{color:var(--muted);font-weight:600} /* NL | DE in the header. Showing BOTH codes says which language you are reading as well as which one you can have; the single "DE" said only the second, and sat in a row of nav items where it read like one. No flags: German is also Austria and Switzerland and Dutch is also Flanders, so a flag names a country the reader may not be in — the same reason `lang-suggest.mjs` matches on `de-AT` and `nl-BE`. No EN, because there is no English home page to send anyone to; the English LEGAL pages keep their own footer link, which points at a document that does exist. Measured at 768px: the pair costs 30px and leaves 54px of slack, so the five-item Dutch nav still sits on one line. */ .lang-pick{display:inline-flex;align-items:center;gap:7px;white-space:nowrap} .lang-pick-on{color:var(--ink);font-weight:600} .lang-pick-sep{color:var(--border);font-weight:400} .header nav .lang-pick{letter-spacing:.04em} .lang-switch:hover,.lang-switch:focus-visible{color:var(--ink)} .header nav .lang-switch{letter-spacing:.04em} /* The inline cancellation link on the price card. With no rule for it, it inherited a{color:inherit;text-decoration:none} and p{color:var(--muted)}, so the PAngV cancellation route („So kündigst du“) was byte-for-byte the same colour, weight and decoration as the sentence around it. Same treatment as .source a, which is the site's shape for an inline link in fine print. */ .pricing-card .small a{color:var(--orange-dark);text-decoration:underline;text-underline-offset:3px} /* The 112px of bottom padding in the ≤760px block is reserved for the FIXED .cta-bar, and was given to every page unconditionally: the Dutch /support page has no bar and showed 112px of empty paper under its footer on every phone (the English shell has been carrying an inline override for the same reason). :not(:has()) and not :has(), deliberately, not by taste: a browser without :has() drops this rule and gets today's behaviour, whereas the inverse would drop the padding a page WITH a bar needs and let the fixed bar cover the footer. */ @media(max-width:760px){body:not(:has(.cta-bar)){padding-bottom:0}} /* The language suggestion bar (assets/lang-suggest.js). It sits ABOVE the sticky header in normal flow rather than fixed: ≤760px already has a fixed .cta-bar at the bottom with 112px of body padding reserved for it, and a second fixed bar would either cover that one or cover the header it is trying to let you leave. In flow it pushes the page down once, and only for a visitor whose browser asks for the other language. */ .lang-suggest{background:var(--soft);border-bottom:1px solid var(--border)} .lang-suggest-inner{width:var(--wrap);margin:auto;display:flex;align-items:center;gap:16px; padding:10px 0;min-height:56px;font-size:15px} .lang-suggest p{color:var(--ink);margin:0;max-width:none} .lang-suggest-go{font-weight:600;color:var(--orange-dark);text-decoration:underline; text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px} .lang-suggest-go:after{content:'\00a0→'} /* 44px of tap target, pulled flush to the right edge without the padding widening the bar. */ .lang-suggest-close{margin-left:auto;background:none;border:0;color:var(--muted);font-size:24px; line-height:1;width:44px;height:44px;border-radius:999px;flex:none} .lang-suggest-close:hover{color:var(--ink);background:#fff} @media(max-width:760px){ .lang-suggest-inner{flex-wrap:wrap;gap:4px 16px;padding:10px 0 12px} .lang-suggest p{flex:1 1 100%;font-size:14px;order:1;padding-right:48px} .lang-suggest-go{order:3;font-size:14px;min-height:0} .lang-suggest-close{order:2;margin:0;position:absolute;right:calc((100% - var(--wrap)) / 2)} .lang-suggest{position:relative} } /* In the open mobile menu the group carried the 12px padding and the two codes did not, so "DE" was an 18×21px target in a column where every other row is 45px. The padding moves onto the codes themselves: each is its own 44px row, and the group only spaces them. */ @media(max-width:760px){ .header nav>.lang-pick{padding:0 12px;gap:0} .header nav>.lang-pick>a,.header nav>.lang-pick>.lang-pick-on{display:inline-flex; align-items:center;min-height:44px;padding:0 10px} .header nav>.lang-pick>:first-child{padding-left:0} } /* The commercial, beside the words that were already there. The page has no solitary visual anywhere: every image sits next to copy, which is why a lone centred player under a three-column grid read as filler. No new section and no new sentence; the section's own heading is its companion. `height: auto` is LOAD-BEARING: