/* ============================================================ EasyUsenet - base.css Shared stylesheet for every page: design tokens, typography, buttons, header/footer, cards, FAQ, grids and breakpoints. Every page loads it BEFORE its own stylesheet. The fonts live in ../fonts/ and are preloaded in the . ============================================================ */ /* ============================================================ EasyUsenet - base.css Shared stylesheet for every page: design tokens, typography, buttons, header/footer, cards, FAQ, grids and breakpoints. Every page loads it BEFORE its own stylesheet. The fonts live in ../fonts/ and are preloaded in the . ============================================================ */ /* ---- Schriften lokal eingebunden (kein Google-Request, kein Font-Swap) ---- */ @font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-700-latin-ext.woff2?v=2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/caveat-700-latin.woff2?v=4) format('woff2');unicode-range:U+0020-007E,U+00C4,U+00D6,U+00DC,U+00E4,U+00F6,U+00FC,U+00DF,U+2013-2014,U+2018-2019,U+201C-201E,U+2026} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin-ext.woff2?v=2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400-latin.woff2?v=4) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2192,U+2197,U+2212,U+2715,U+00B7} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin-ext.woff2?v=2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600-latin.woff2?v=4) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2192,U+2197,U+2212,U+2715,U+00B7} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-latin-ext.woff2?v=2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700-latin.woff2?v=4) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2192,U+2197,U+2212,U+2715,U+00B7} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-800-latin-ext.woff2?v=2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-800-latin.woff2?v=4) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2192,U+2197,U+2212,U+2715,U+00B7} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/sora-800-latin-ext.woff2?v=2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/sora-800-latin.woff2?v=4) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0152-0153,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2039-203A,U+20AC,U+2122,U+2192,U+2197,U+2212,U+2715,U+00B7} /* Metrically matched fallback fonts: same widths and heights as the original, so that swapping in the webfont causes no reflow and no jump. */ @font-face{font-family:'Sora Fallback';font-weight:400 500;src:local('Arial'),local('Helvetica Neue');size-adjust:113.18%;ascent-override:85.70%;descent-override:25.62%;line-gap-override:0.00%} @font-face{font-family:'Sora Fallback';font-weight:600 900;src:local('Arial Bold'),local('Helvetica Neue Bold');size-adjust:108.63%;ascent-override:89.29%;descent-override:26.70%;line-gap-override:0.00%} @font-face{font-family:'Inter Fallback';font-weight:100 500;src:local('Arial'),local('Helvetica Neue');size-adjust:104.70%;ascent-override:92.53%;descent-override:23.04%;line-gap-override:0.00%} @font-face{font-family:'Inter Fallback';font-weight:600 900;src:local('Arial Bold'),local('Helvetica Neue Bold');size-adjust:100.49%;ascent-override:96.41%;descent-override:24.00%;line-gap-override:0.00%} @font-face{font-family:'Caveat Fallback';font-weight:100 900;src:local('Arial Bold'),local('Helvetica Neue Bold');size-adjust:72.08%;ascent-override:133.19%;descent-override:41.62%;line-gap-override:0.00%} /* Always reserve room for the scrollbar -> no horizontal jump between pages */ html{scrollbar-gutter:stable} /* ============================================================ EasyUsenet - variant F "neobrutalism" Principle: a continuous cream ground, white cards, 2px black borders, hard shadows with no blur, 5px radius. ============================================================ */ :root{--black:#000;--text:#0B0B0B;--muted:#4B5347;--white:#fff;--ground:#FFFCF3;--green:#7FB539;--green-soft:#C9E29A;--orange:#F39200;--orange-soft:#FFCE85;--yellow:#FFDC58;--sky:#6FB8E4;--sky-soft:#DDEBF6;--trust:#00B67A;--trust-off:#DCDCE6;--r:5px;--bd:2px solid var(--black)} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--text);font-family:'Inter','Inter Fallback',system-ui,sans-serif;font-size:16px;line-height:1.5} h1{font-family:'Sora','Sora Fallback',system-ui,sans-serif;margin:0} h2{font-family:'Sora','Sora Fallback',system-ui,sans-serif;margin:0} h3{font-family:'Sora','Sora Fallback',system-ui,sans-serif;margin:0} p{margin:0} img{display:block;max-width:100%} svg{display:block;max-width:100%} a{color:var(--text);text-decoration:none} a:hover{color:var(--green)} /* --- Raster --- */ .wrap{max-width:1140px;margin:0 auto;padding:0 32px} .sec{background:var(--ground);padding:84px 0;border-bottom:var(--rule,var(--bd))} .sec--plans{background:var(--plansbg,var(--ground))} .sec--plans .btn--white{background:var(--plansbg,var(--ground))} .sec--plans .btn--white:hover{background:#FBE3C3} .sec--tight{padding:76px 0} .sec--last{padding-bottom:132px} .sec--first{padding-top:120px} .sec--trial{padding:96px 0;border-bottom:none;background:var(--sky)} .trial .box .btn:hover{background:#8CC8ED} .sec:has(+ .sec--trial){border-bottom:none} /* --- Kasten --- */ .nb{background:var(--white);border:var(--bd);border-radius:var(--r)} .sh-5{box-shadow:5px 5px 0 0 var(--black)} .sh-6{box-shadow:5px 5px 0 0 var(--black)} /* --- Buttons --- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:var(--text);border:var(--bd);border-radius:var(--r);box-shadow:4px 4px 0 0 var(--black);font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;padding:14px 24px;font-size:16px;cursor:pointer;transition:transform .12s,box-shadow .12s} .btn--xl{padding:17px 32px;font-size:17px} .btn--white{background:var(--white)} .btn--white{background:var(--ground)} .btn--white:hover{background:var(--white)} .btn--full{width:100%} .btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--black)} .cta-row{display:flex;justify-content:center;margin-top:64px;position:relative} .scrib-ask{position:absolute;right:50%;bottom:-2px;margin-right:158px;pointer-events:none;text-align:right} .scrib-ask span{display:block;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:29px;line-height:1;white-space:nowrap;transform:rotate(-4deg);transform-origin:100% 50%} .scrib-ask svg{display:block;margin-top:8px;margin-left:auto;transform:translateX(38px) rotate(10deg)} @media (max-width:720px){ .scrib-ask{display:none} } /* --- Tag / Pre-Headline --- */ .tag{display:inline-flex;align-items:center;gap:7px;background:var(--yellow);border:var(--bd);border-radius:var(--r);padding:6px 12px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--text)} .tag--green{background:var(--green-soft);color:var(--text)} .eyebrow{position:relative;z-index:0;display:inline-block;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:16px;letter-spacing:.4px;text-transform:none;color:var(--text);padding:2px 6px} .eyebrow::before{content:"";position:absolute;left:-12px;right:-12px;top:2%;bottom:-6%;background:#FFE07A;transform:skewX(-13deg) rotate(-1.4deg);border-radius:3px 8px 4px 7px;z-index:-1} .eyebrow--green::before{background:#C9E29A} .eyebrow--orange::before{background:#F9CE93} .eyebrow--blue::before{background:#BEDCEB} .eyebrow--tp::before{background:#A8DFC8} .eyebrow-row{margin-bottom:12px} /* --- Marker & Claim-Sticker --- */ /* The marker belongs behind the type - including behind words that precede it. The stacking context is therefore the heading, not .mk itself: with a z-index on .mk the marker as a whole was painted over the rest of the line. */ h1,h2{isolation:isolate} .mk{position:relative;white-space:nowrap} .mk::before{content:"";position:absolute;left:-8px;right:-8px;top:14%;bottom:4%;background:var(--yellow);transform:skewX(-11deg) rotate(-1deg);border-radius:3px 8px 4px 7px;z-index:-1} @keyframes mark-in{from{transform:skewX(-11deg) rotate(-1deg) scaleX(0)}to{transform:skewX(-11deg) rotate(-1deg) scaleX(1)}} /* --- Headings --- */ .head{text-align:center;margin-bottom:52px} .head h2{font-size:42px;font-weight:800;letter-spacing:-1.2px;margin-bottom:16px;text-wrap:pretty} .head p{font-size:17px;color:var(--muted);max-width:600px;margin:0 auto;line-height:1.6} /* --- Kopfzeile --- */ .site-head{background:var(--ground)} .site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 32px} .nav{display:flex} .nav a{position:relative;background:var(--white);border:var(--bd);border-radius:0;box-shadow:2px 3px 0 0 var(--black);padding:9px 16px;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;color:var(--text)} .nav a+a{margin-left:-2px} .nav a:first-child{border-radius:var(--r) 0 0 var(--r)} .nav a:last-child{border-radius:0 var(--r) var(--r) 0;box-shadow:3px 3px 0 0 var(--black)} .nav a.on{background:var(--green-soft)} .head-right{display:flex;align-items:center;gap:14px} .head-right .login{margin-left:14px} .pick{position:relative} .pick-btn{display:inline-flex;align-items:center;gap:7px;border:2px solid transparent;border-radius:var(--r);background:transparent;cursor:pointer;padding:5px 9px;font-family:'Inter','Inter Fallback',sans-serif;font-size:14px;font-weight:600;color:var(--muted);transition:color .16s ease,background-color .16s ease,border-color .16s ease} .pick-btn:hover{color:var(--text);background:rgba(0,0,0,.045)} .pick[data-open] .pick-btn{color:var(--text);background:var(--white);border-color:var(--black)} /* The globe in front of the language code. The button has gap:7px, which is too much between icon and code: in the currency switcher only a 3.5px space separates "€ EUR". The negative margin brings both to the same measure. */ .pick-btn .pick-ic{display:inline-flex;flex:none;width:15px;height:15px;margin-right:-3px} .pick-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .16s ease} .pick[data-open] .pick-caret{transform:translateY(1px) rotate(-135deg)} .pick-menu{position:absolute;top:calc(100% + 7px);right:0;z-index:40;min-width:100%;display:none;flex-direction:column;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:4px 4px 0 0 var(--black);padding:4px;gap:2px} .pick[data-open] .pick-menu{display:flex} .pick-menu button{border:none;background:transparent;border-radius:3px;cursor:pointer;text-align:left;white-space:nowrap;padding:7px 12px;font-family:'Inter','Inter Fallback',sans-serif;font-size:14px;font-weight:600;color:var(--muted);transition:background-color .16s ease,color .16s ease} .pick-menu button:hover{background:#F3EFE2;color:var(--text)} .pick-menu button.on{background:var(--green-soft);color:var(--text)} .login{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;border:2px solid transparent;border-radius:var(--r);padding:5px 9px} /* --- Header: signed in or signed out --- The shop sets data-account="on" on as soon as someone is logged in. The account menu then takes the place of the login link. The switch runs through display, not through [hidden] - [hidden] loses against display:flex. */ [data-signed-in]{display:none} html[data-account="on"] [data-signed-in]{display:block} html[data-account="on"] [data-signed-out]{display:none} .pick--account .pick-btn{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;color:var(--text)} .pick--account .pick-menu{min-width:206px;padding:6px} .pick--account .pick-menu a{display:flex;align-items:center;gap:11px;border-radius:3px;white-space:nowrap;padding:9px 12px;font-family:'Inter','Inter Fallback',sans-serif;font-size:14px;font-weight:600;color:var(--muted);transition:background-color .16s ease,color .16s ease} .pick--account .pick-menu a:hover{background:#F3EFE2;color:var(--text)} .pick--account .pick-menu a svg{flex:none;color:var(--muted)} .pick--account .pick-menu a:hover svg{color:var(--text)} .pick-trenner{display:block;height:2px;background:#EFEADD;margin:5px 8px} /* --- Hero --- */ .hero{background:var(--ground);border-bottom:var(--bd);padding:88px 0 104px} .hero .grid{display:grid;grid-template-columns:1.45fr minmax(358px,1fr);gap:60px;align-items:center} .hero h1{line-height:1.05;font-weight:800;margin:0 0 22px} .hero .lead{font-size:18px;line-height:1.6;color:var(--muted);max-width:560px;margin:0 0 30px} .hero .proof{margin-top:32px;display:flex;align-items:center} /* --- Trustpilot --- */ .tp-link{color:inherit;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(0,0,0,.28)} .tp-link:hover{color:inherit;text-decoration-color:var(--text)} .trustline{display:flex;align-items:center;flex-wrap:wrap;gap:6px 11px;font-size:18px} /* In narrow columns the line may wrap - but between the blocks, not in the middle of "4.7 / 5 · Trustpilot". */ .trustline .meta{white-space:nowrap} .trustline b{font-weight:700} .stars{display:flex;gap:4px} .star{background:var(--trust);width:28px;height:28px;border:var(--bd);border-radius:2px;display:grid;place-content:center} .star--half{background:linear-gradient(90deg,var(--trust) 50%,var(--trust-off) 50%)} /* Empty star. Never needed at 4.7, but it belongs to the set: without it no rating below 5 can be shown in full. */ .star--off{background:var(--trust-off)} .trustline .meta{color:var(--muted)} /* --- Preiskarte (Hero + Tarife) --- */ .pcard{background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 0 var(--black);padding:30px 26px;position:relative;display:flex;flex-direction:column} .pcard .kicker{padding-right:96px} .pcard .kicker .name{font-family:'Sora','Sora Fallback',sans-serif;font-size:21px;font-weight:800} .pcard .kicker .dur{font-size:14px;font-weight:700;color:var(--muted);margin-top:4px} .pcard .price{display:flex;align-items:baseline;gap:12px;margin-top:20px} .pcard .price .amount{font-family:'Sora','Sora Fallback',sans-serif;font-size:64px;line-height:.9;font-weight:800;letter-spacing:-3.6px} .pcard .price .unit{font-size:18px;font-weight:800} .pcard .save{background:var(--yellow);border:var(--bd);border-radius:var(--r);padding:2px 9px;font-family:'Sora','Sora Fallback',sans-serif;font-size:13px;font-weight:800;position:relative;bottom:3px} .rule{height:2px;background:var(--black);margin:24px 0 18px} .feat{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;font-weight:600} .chk{width:22px;height:22px;background:var(--green);border:var(--bd);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .pcard .list{flex:1} .pcard .btn{margin-top:24px} .scrib-arrow{position:absolute;left:-86px;top:-20px;overflow:visible;pointer-events:none} .scrib{position:absolute;left:-64px;top:-62px;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:29px;line-height:1;color:var(--text);white-space:nowrap;pointer-events:none;transform:rotate(-3deg)} .plans{display:grid;grid-template-columns:repeat(2,1fr);gap:44px;max-width:840px;margin:0 auto} .plans .kicker{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-right:0} /* -- Currency switch (.cswitch) --------------------------------------- A second switcher alongside .pick: two named currencies with a slider between them. Meant for the place where the question arises - at the price. The state sits on html[data-currency]; .pick uses the same hook, so both stay in sync without any extra work. .cswitch-box only handles placement and belongs to the page. */ .cswitch-box{display:flex;justify-content:center} /* Only the track is neobrutal: hard edge, hard shadow, and it gives way when pressed - the same motion as .btn elsewhere in the package. The button around it is invisible but makes the whole row, labels included, clickable. */ .cswitch{display:inline-flex;align-items:center;gap:14px;cursor:pointer;background:transparent;border:none;padding:0;font-family:'Sora','Sora Fallback',sans-serif;font-size:14px;font-weight:800;letter-spacing:.2px} .cswitch-lbl{color:var(--muted);transition:color .16s ease} /* White, not sand: with no card behind it the track sits directly on the sand of the plans section and would be invisible in sand. */ .cswitch-track{position:relative;flex:none;width:52px;height:26px;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:3px 3px 0 0 var(--black);transition:transform .16s ease,box-shadow .16s ease} .cswitch:hover .cswitch-track{transform:translate(-1px,-1px);box-shadow:4px 4px 0 0 var(--black)} .cswitch:active .cswitch-track{transform:translate(2px,2px);box-shadow:1px 1px 0 0 var(--black)} /* With no card, keyboard operation needs a marker of its own. */ .cswitch:focus-visible{outline:none} .cswitch:focus-visible .cswitch-track{box-shadow:3px 3px 0 0 var(--black),0 0 0 3px var(--sky)} /* Track 52px, border 2px -> inner width 48px. Knob 22px with a 2px margin on the left, so 22px of travel to the right-hand stop. */ .cswitch-knob{position:absolute;top:2px;left:2px;width:22px;height:18px;background:var(--yellow);border:var(--bd);border-radius:3px;transition:transform .18s cubic-bezier(.3,1.5,.5,1)} /* The state comes solely from the attribute the script sets anyway. */ html[data-currency="USD"] .cswitch-lbl[data-currency-label="USD"], html[data-currency="EUR"] .cswitch-lbl[data-currency-label="EUR"]{color:var(--text)} html[data-currency="EUR"] .cswitch-knob{transform:translateX(22px)} /* --- Leiste "In jedem Tarif enthalten" (unter Preiskarten) --- */ .specs-note{text-align:center;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-top:68px} .specs-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 26px;margin:20px 0 0} .spec{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700} .spec i{width:19px;height:19px;flex:none;border:var(--bd);border-radius:3px;background:var(--green);display:grid;place-content:center} /* --- Transition below the hero (switchable) --- */ .cut{display:none} .cut--specs{background:var(--ground);border-bottom:var(--bd);padding:14px 0} .cut--specs .wrap{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;font-size:13px;font-weight:700;color:var(--muted)} .cut--specs .wrap span+span::before{content:"·";color:#C9C4B4;margin-right:22px} /* Continuous surface: the hero shares the colour of the plans section, no edge */ html[data-cut="flat"] .hero{background:var(--plansbg,var(--ground));border-bottom:none;padding-bottom:104px} html[data-cut="flat"] .site-head{background:var(--plansbg,var(--ground))} html[data-cut="flat"] .nav a{background:#FFFDF6} html[data-cut="flat"] .nav a:hover{background:#FBE3C3} html[data-cut="flat"] .nav a.on{background:var(--green-soft)} html[data-cut="flat"] .hero .btn--white{background:var(--plansbg,var(--ground))} html[data-cut="flat"] .hero .btn--white:hover{background:#FBE3C3} /* --- Vorteile --- */ .head{position:relative} .big{padding:26px 28px;display:flex;flex-direction:row;align-items:flex-start;gap:22px;background:var(--bigbg,var(--white))} .big h3{font-size:25px;font-weight:800;letter-spacing:-.3px;margin-bottom:10px} .big p{font-size:16px;color:var(--muted);line-height:1.6} .big .ic--lg{flex:none} .big h3{margin-bottom:6px} .quad{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .quad .tile{flex-direction:column;gap:12px;padding:20px} .tile{padding:24px;display:flex;gap:16px;align-items:flex-start} .ic{width:52px;height:52px;border:var(--bd);border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .tile .ic{width:52px;height:52px;border:var(--bd);border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0} .ic--lg{width:74px;height:74px} .tile h3{font-size:18px;font-weight:800;margin-bottom:6px} .tile p{font-size:15px;color:var(--muted);line-height:1.6} /* --- Test-Zugang --- */ .trial{background:var(--sky);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 0 var(--black);padding:44px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap} .trial .txt{flex:1;min-width:420px} .trial h3{font-size:30px;font-weight:800;letter-spacing:-1.2px;margin-bottom:12px} .trial p{font-size:17px;max-width:520px;line-height:1.6} .trial .box{background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:24px 30px;text-align:center;flex-shrink:0} .trial .box .lbl{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)} .trial .box .amount{font-family:'Sora','Sora Fallback',sans-serif;font-size:58px;font-weight:800;line-height:1;letter-spacing:-2.4px;margin:10px 0 18px} /* --- Bewertungen --- */ .score{display:inline-flex;align-items:center;gap:12px} .score .n{font-size:16px;font-weight:800} .score .c{color:var(--muted);font-size:16px;font-weight:600} .review{padding:22px;display:flex;transition:transform .16s ease,box-shadow .16s ease} /* Fade the edges with a mask, not with a block of colour: depending on the page the band sits on cream or on a tinted ground. */ .mq{position:relative;overflow:hidden;padding:6px 0 10px;max-width:1560px;margin:0 auto;--mq-fade:90px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--mq-fade),#000 calc(100% - var(--mq-fade)),transparent 100%)} .mq-track{display:flex;gap:20px;width:max-content;animation:mqslide 77s linear infinite} .mq:hover .mq-track{animation-play-state:paused} @keyframes mqslide{to{transform:translateX(calc(-50% - 10px))}} .mq .review{width:330px;min-height:194px;flex:none} .mq .review:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 0 var(--trust)} .mq .review:active{transform:translate(5px,5px);box-shadow:0 0 0 0 var(--trust)} .mq-2{margin-top:20px} .mq-2 .mq-track{animation-duration:95s;animation-direction:reverse} @media (prefers-reduced-motion:reduce){ .mq-track{animation:none} } .review .body{display:flex;flex-direction:column;gap:10px;flex:1} .review .stars{display:flex;gap:4px} .review .star{width:17px;height:17px;border:var(--bd);border-radius:2px;display:grid;place-content:center} .review h3{font-family:'Sora','Sora Fallback',sans-serif;font-size:16px;font-weight:800;line-height:1.25} .review{color:var(--text)} .review:hover{color:var(--text)} .review p{margin:0;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .review .who{margin-top:auto;padding-top:4px;font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-width:0} .review .who .nm{white-space:nowrap} .review .who .tpl{white-space:nowrap} .review .who strong{color:var(--text)} .review .who .tpl{margin-left:auto;font-weight:700;font-size:13px;color:var(--muted)} .review:hover .who .tpl{color:var(--trust)} /* --- FAQ --- */ .faq{max-width:740px;margin:0 auto;background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);overflow:hidden} .faq details+details{border-top:var(--bd)} .faq summary{list-style:none;padding:19px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;font-family:'Sora','Sora Fallback',sans-serif;font-size:17px;font-weight:800} .faq summary::-webkit-details-marker{display:none} .faq .sign{width:28px;height:28px;background:var(--green);border:var(--bd);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative} .faq details[open] .sign{background:var(--orange)} .faq .sign::before{content:"";position:absolute;background:#fff;border-radius:2px} .faq .sign::after{content:"";position:absolute;background:#fff;border-radius:2px} .faq .sign::before{width:14px;height:3px} .faq .sign::after{width:3px;height:14px} .faq details[open] .sign::after{display:none} .faq .answer{padding:18px 26px 22px;max-width:640px;font-size:15px;color:var(--muted);line-height:1.6} /* Links inside FAQ answers. Without this rule they differ from body copy only by a slightly darker text colour - too little to be recognised as a link. Same treatment as in the legal texts (.vtx a). */ .faq .answer a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px} .faq .answer a:hover{color:var(--green)} /* --- Seitenkopf (Unterseiten) --- */ /* --- Versprechen --- */ .sec--promise{background:var(--green-soft)} /* --- Versprechen (Kompaktband) --- */ .prS{position:relative;max-width:940px;margin:0 auto;background:var(--green-soft);border:var(--bd);border-radius:var(--r);box-shadow:8px 8px 0 0 var(--black);padding:34px 34px 32px;text-align:center} .prS :is(h2,h3){font-size:32px;font-weight:800;letter-spacing:-1.4px;margin-bottom:12px} .prS>p{font-size:17px;line-height:1.6;color:#2E3A1E;max-width:640px;margin:0 auto} .prS .krit{position:absolute;right:28px;top:28px;font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:27px;line-height:1;transform:rotate(-4deg);white-space:nowrap} .prS .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 30px;max-width:780px;margin:28px auto 0;text-align:left} .prS .row>div{display:flex;gap:11px;align-items:flex-start} .prS i{width:30px;height:30px;border:var(--bd);border-radius:var(--r);background:var(--green);display:grid;place-items:center;flex:none;margin-top:1px} .prS b{display:block;font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.3px} .prS .sub{display:block;font-size:14px;line-height:1.6;color:#3A4A28} /* --- Prepaid --- */ /* --- Footer --- */ .site-foot{background:var(--footbg,#B8DC86);padding:50px 0 24px} .foot-grid{display:grid;grid-template-columns:1.5fr .72fr .82fr .72fr .92fr;gap:26px;margin-bottom:26px;align-items:start} .foot-tp{margin-top:0} .foot-tp .tp-block{display:block;text-decoration:none} .foot-tp .sub{display:block;font-size:13px;font-weight:700;color:#3A4A28;margin-top:8px} .foot-tp .sub b{color:var(--text)} .f-row{display:flex;align-items:center;gap:16px;margin-bottom:6px} .f-scrib{font-family:'Caveat','Caveat Fallback',cursive;font-weight:700;font-size:25px;transform:rotate(-3deg);white-space:nowrap} .foot-tp .stars{gap:5px} .foot-tp .star{width:30px;height:30px} .foot-tp .star svg{width:16px;height:16px} .foot-tp .tp-block:hover{color:var(--text)} .foot-tp .tp-block:hover .sub{color:var(--text)} .foot-tp .tp-block:hover .sub b{color:var(--text)} .logo{display:block;width:auto} .logo--head{height:36px} .logo--foot{height:36px} .head-logo{padding-top:3px;padding-right:24px} .foot-grid>div:first-child{padding-top:5px;padding-right:24px} .foot-logo{display:inline-flex;align-items:center;transition:transform .12s ease,opacity .12s ease} .head-logo:hover{opacity:.7} .foot-logo:hover{opacity:.7} .head-logo:active{transform:translate(1px,1px)} .foot-logo:active{transform:translate(1px,1px)} .foot-grid p{font-size:14px;line-height:1.6;color:#3A4A28;margin-top:14px;max-width:280px} /* Heading in black, not in the moss green of the links: otherwise heading, links and brand text all carry the same colour and the footer reads as one surface. This is also the only place where the columns pick up the black of the system. */ .foot-col .title{display:block;margin-bottom:12px;font-family:'Sora','Sora Fallback',sans-serif;font-size:13px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--text)} /* 6px gap at a 21px line height: 27px between baselines. Do not tighten further - from 3px the links fall below the 24px that WCAG 2.5.8 requires as an undisturbed target area. */ .foot-col .links{display:flex;flex-direction:column;gap:6px} .foot-col .links a{color:#3A4A28;font-size:14px;font-weight:600} .foot-bottom{border-top:var(--bd);padding-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#3A4A28;flex-wrap:wrap;gap:12px 24px;font-weight:600} .foot-bottom .legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 18px} /* The cookie control is deliberately a