/* TKB IT Support, redesign kit for every page except the homepage (the homepage is home).
   Loaded after legacy.css. Calm and functional:
   the same dark, white and TKB green as the homepage, the same header and footer, readable content. */
:root{
  --bg:#17191b;--panel:#202326;--ink:#f0f3f1;--mute:#b0b9b4;--faint:#8b938e;--line:rgba(240,243,241,.13);
  --acc:#43c25b;--acc-hi:#8fe39d;--surface:#202326;
  --f:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;--gut:clamp(16px,3vw,44px);
  --cr:linear(0,0.0678,0.2079,0.3623,0.5044,0.6243,0.7205,0.7951,0.8514,0.8933,0.9239,0.9462,0.9621,0.9734,0.9815,0.9871,0.9911,0.9938,0.9958,0.9971,1);
  --sp:linear(0,0.0241,0.0848,0.1681,0.2631,0.3619,0.4587,0.5499,0.6331,0.7069,0.771,0.8255,0.8709,0.908,0.9377,0.961,0.9787,0.9919,1.0014,1.0078,1.0119,1.0142,1.0151,1.015,1.0143,1.0132,1.0118,1.0103,1.0088,1.0074,1.0061,1.0049,1.0039,1.003,1.0022,1.0016,1);
  --exit:cubic-bezier(.3,0,.8,.15);
  color-scheme:dark;
  /* type roles (pages.css, kit.css, homepage): the heading face is --head */
  /* a raised tile: what used to be a row between thin lines */
  --tile:linear-gradient(180deg,rgba(44,48,52,.66),rgba(33,36,39,.6));--tile-sh:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 22px 44px -34px rgba(0,0,0,.8);
  --head:"Bricolage Grotesque",var(--f);
  --t-display:clamp(40px,5.2vw,72px);--t-h2:clamp(27px,2.6vw,36px);--t-h3l:22px;--t-h3:19px;--t-lead:clamp(18px,1.4vw,21px);--t-final:clamp(30px,3.3vw,46px);
  --t-body:17px;--t-body2:16.5px;--t-small:15px;--t-micro:13.5px;
  --w-display:700;--w-head:700;--w-title:700;
  --ls-display:-.035em;--ls-head:-.022em;--ls-title:-.006em;
}
@media (prefers-reduced-motion:reduce){:root{--sp:var(--cr)}}
html{background:var(--bg);scrollbar-color:#27302c var(--bg);caret-color:var(--acc-hi)}
html{background:var(--bg)}
body{background:transparent !important;color:var(--ink);font-family:var(--f) !important;-webkit-font-smoothing:antialiased}
::selection{background:rgba(67,194,91,.38);color:#fff}
:focus-visible{outline:2px solid var(--acc-hi);outline-offset:3px}
body::after{content:"";position:fixed;inset:-50%;z-index:250;pointer-events:none;background:url(/assets/ui/img/grain.png);background-size:180px;opacity:.045;mix-blend-mode:screen}
.tkb-main{background:transparent !important;min-height:60vh;padding:28px 0 90px}

/* ---------- header: same look as the homepage ---------- */
.tkb-hdr{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:10px;height:72px;padding:0 var(--gut) !important;background:rgba(23,25,27,.9) !important;border-bottom:1px solid var(--line);color:var(--ink) !important;backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}
.tkb-swoosh{display:none !important}
.tkb-hdr-in{order:1;flex:1;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between;gap:24px;max-width:none !important;margin:0 !important;min-width:0}
.tkb-logo{display:flex !important;align-items:center;gap:9px;width:auto !important;max-width:none !important;line-height:1}
.tkb-logo .kit-logo{display:block;height:38px;width:auto}
.tkb-logo .kit-sp{width:30px;height:auto}
.tkb-logo .kit-wm{height:19px;width:auto}
.tkb-logo .kit-su{height:23.75px;width:auto;margin:4.75px 0 0 -2px}
.tkb-nav{margin:0 !important}
.tkb-nav ul{list-style:none;margin:0;padding:0}
.tkb-nav>ul{display:flex;flex-wrap:nowrap;gap:2px}
.tkb-nav li{position:relative}
.tkb-nav a,.tkb-nav button{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border:0;border-radius:8px;background:none !important;color:var(--mute) !important;font:400 14.5px/1.2 var(--f) !important;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color 212ms var(--cr)}
.tkb-nav a:hover,.tkb-nav button:hover,.tkb-nav li:focus-within>a,.tkb-nav li:focus-within>button{color:var(--ink) !important}
.tkb-nav a.is-active,.tkb-nav [aria-current="page"]{background:none !important;color:var(--ink) !important}
.tkb-caret{width:8px;height:7px;fill:currentColor;transition:transform 226ms var(--cr)}
.tkb-nav li:hover>a .tkb-caret,.tkb-nav li:hover>button .tkb-caret{transform:rotate(180deg)}
.tkb-sub{position:absolute;top:100%;left:4px;transform:none !important;min-width:210px;padding:8px !important;background:var(--panel) !important;border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 48px -20px rgba(0,0,0,.85) !important;display:block !important;opacity:0;visibility:hidden;translate:0 -8px;transition:opacity 150ms var(--exit),translate 160ms var(--exit),visibility 0s 160ms;z-index:20}
.tkb-nav li:hover>.tkb-sub,.tkb-nav li:focus-within>.tkb-sub{opacity:1;visibility:visible;translate:0 0;transition:opacity 212ms var(--cr),translate 431ms var(--sp)}
.tkb-nav>ul>li:nth-last-child(-n+2)>.tkb-sub{left:auto;right:0}
.tkb-sub a{display:flex;width:100%;box-sizing:border-box;padding:8px 11px;border-radius:7px;font-size:14px !important}
.tkb-sub a:hover{background:rgba(255,255,255,.05) !important}
.tkb-lang{order:2;position:static !important;padding:9px 12px !important;border:0 !important;border-radius:8px;background:none !important;color:var(--mute) !important;font:400 14px/1.2 var(--f) !important;text-decoration:none}
.tkb-lang:hover{color:var(--ink) !important}
.tkb-burger{order:3;display:none !important;width:44px;height:44px;padding:10px !important;border:0;background:none !important;color:var(--ink) !important;cursor:pointer;position:static !important}
.tkb-burger svg{width:22px !important;height:22px !important;fill:currentColor}
@media (max-width:999.95px){
  .tkb-burger{display:block !important}
  .tkb-nav{display:none !important}
  /* open: no blur on the header, it would pin the full-screen menu inside the 72px bar */
  .tkb-hdr.is-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg) !important}
  /* open: the menu button shows a cross */
  .tkb-hdr.is-open .tkb-burger svg{opacity:0}
  .tkb-hdr.is-open .tkb-burger{background:center/22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' fill='none' stroke='%23e8ede9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important}
  .tkb-hdr.is-open .tkb-nav{display:block !important;position:fixed;left:0;right:0;top:72px;bottom:0;overflow:auto;padding:18px var(--gut) 40px;background:var(--bg);border-top:1px solid var(--line)}
  .tkb-hdr.is-open .tkb-nav>ul{flex-direction:column;align-items:stretch;gap:2px}
  .tkb-hdr.is-open .tkb-nav a,.tkb-hdr.is-open .tkb-nav button{width:100%;justify-content:space-between;padding:13px 4px;font-size:21px !important;color:var(--ink) !important}
  .tkb-hdr.is-open .tkb-sub{position:static;opacity:1;visibility:visible;translate:none;display:none !important;padding:0 0 8px 8px !important;background:none !important;border:0;box-shadow:none !important}
  .tkb-hdr.is-open li.is-open>.tkb-sub{display:block !important}
  .tkb-hdr.is-open .tkb-sub a{font-size:17px !important;color:var(--mute) !important;padding:9px 4px}
  .tkb-hdr.is-open li.is-open>a .tkb-caret,.tkb-hdr.is-open li.is-open>button .tkb-caret{transform:rotate(180deg)}
  .tkb-logo .kit-sp{width:28px}
}

/* ---------- footer ---------- */
.tkb-ftr{margin:0;padding:40px var(--gut) 34px !important;background:var(--bg) !important;border-top:1px solid var(--line);color:var(--faint) !important;text-align:left !important;font:400 13.5px/1.4 var(--f) !important}
.tkb-ftr ul{list-style:none;margin:0 !important;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-start !important;align-items:center;gap:6px 22px}
.tkb-ftr a,.tkb-ftr button{color:var(--mute) !important;font:inherit !important;text-decoration:none;background:none;border:0;padding:4px 0;cursor:pointer}
.tkb-ftr a:hover,.tkb-ftr button:hover{color:var(--ink) !important}
.tkb-ftr .tkb-cc-open{display:grid !important;place-items:center;width:34px !important;height:34px !important;border:1px solid var(--line) !important;border-radius:50%}
.tkb-ftr .tkb-cc-open svg{width:17px;height:17px;fill:currentColor}
.tkb-ftr p{margin:22px 0 0 !important;color:var(--faint) !important;font-size:13.5px !important}

/* ---------- cookie banner ---------- */
.tkb-cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;display:none;max-width:720px;margin:0 auto;padding:18px 20px;background:var(--panel) !important;color:var(--ink) !important;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.9) !important;font:400 14.5px/1.5 var(--f) !important}
.tkb-cc.is-shown{display:block}
.tkb-cc p{margin:0 0 14px}
.tkb-cc a{color:var(--acc-hi) !important}
.tkb-cc-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.tkb-cc button{font:600 14.5px/1 var(--f) !important;padding:12px 18px;border-radius:10px;cursor:pointer;border:1px solid rgba(232,237,233,.22) !important;background:none !important;color:var(--ink) !important}
.tkb-cc button.tkb-cc-yes{background:var(--acc) !important;border-color:var(--acc) !important;color:#04120a !important}

/* ---------- content built with the old site editor: same grid, new type ---------- */
.tkb-content,.tkb-sec,.tkb-sec *{font-family:var(--f) !important}
:is(.tkb-content,.tkb-sec) :is(h1,h2,h3,h4,h5,h6){font-weight:600 !important;letter-spacing:-.02em}
:is(.tkb-content,.tkb-sec) strong,:is(.tkb-content,.tkb-sec) b{font-weight:650}
:is(.tkb-content,.tkb-sec) a{text-underline-offset:3px;text-decoration-thickness:1px}
.tkb-sec p,.tkb-sec li{line-height:1.5}
.tkb-img img,.tkb-cell img{border-radius:10px}

/* payment logos are pictures in the brands' own colours (some black): each sits on a small white card */
.payment-logo{background:#fff;border-radius:5px;padding:3px 5px;box-sizing:content-box}

/* YouTube previews: YouTube's own black box and play button */
.tkb-yt{background:#000 !important}
.tkb-yt-btn{background:rgba(33,33,33,.8) !important}
.tkb-yt-btn::after{border-color:transparent transparent transparent #fff !important}
.tkb-yt:hover .tkb-yt-btn,.tkb-yt:focus-visible .tkb-yt-btn{background:#f00 !important}

/* module headers that colour their own text: their headings follow it (the editor's heading colour would win otherwise) */
.deletion-header :is(h1,h2,h3),.success-header :is(h1,h2,h3),.cancel-header :is(h1,h2,h3){color:inherit !important}

/* tablets: Onest runs wider than Patua One, so the editor's desktop sizes come down a little, headings a quarter
   (otherwise long text wraps into the cell below it, e.g. a button; the editor's own tablet size still wins) */
@media (min-width:768px) and (max-width:1023.95px){
  .tkb-cell :is(h1,h2,h3,h4) .tkb-fs:not([style*="--ft"]){font-size:calc(var(--fd) * .75)}
  .tkb-cell :is(p,li) .tkb-fs:not([style*="--ft"]){font-size:calc(var(--fd) * .85)}
}

/* the page as a whole: one calm column of air at the top */
.tkb-main>section:first-child{padding-top:24px}

/* =====================================================================================================
   The old page modules, made calm.
   Only the look: every form, button, script, price and checkout step stays as it is.
   No eyebrows, no pills, no icon tiles, no card walls, no side stripes, no gradient buttons, no green headings.
   The module rules come after this file in each page, so these selectors start with "html body".
   ===================================================================================================== */

/* one ground: modules and alternating section boxes sit on the page */
html body :is(.tkbt,.tkbm,.tkbc,.mys-wrap){background:transparent !important}
html body :is(.tkbt,.tkbm,.tkbc){--ink:#f0f3f1;--ink-soft:#c3cbc6;--mist:#a7b0ab;--line:rgba(240,243,241,.13);--paper:transparent;--card:transparent;--shadow-1:none;--shadow-2:none}
html body .tkbt-section--alt{background:transparent !important;border-color:var(--line) !important}
html body :is(.tkbt,.tkbm,.tkbc) :is(h1,h2,h3){color:var(--ink) !important;font-family:var(--f) !important;font-weight:600 !important;letter-spacing:-.02em}
html body :is(.tkbt,.tkbm,.tkbc) :is(p,li,td,th,label,summary,small,span){font-family:var(--f)}

/* headings in the editor pages: white, not green; coloured spans inside them follow */
html body :is(.tkb-content,.tkb-sec) :is(h1,h2,h3,h4,h5,h6){color:var(--ink) !important}
html body :is(.tkb-content,.tkb-sec) :is(h1,h2,h3,h4,h5,h6) :is(span,strong,b,em,a)[style*="color"]{color:inherit !important}

/* eyebrows and their pulsing dots */
html body :is(.tkbt-eyebrow,.tkbm-eyebrow,.tkbc-eyebrow,.mys-eyebrow,.mys-eyebrow-dot){display:none !important}

/* pills and chips become plain text */
html body :is(.tkbt-chip,.tkbm-chip,.tkbc-chip,.tkbt-meta span,.tkbm-tag,.mys-tag,.tkbm-lang-chip,.tkbc-lang-chip,.tkbm-sum span,.tkbm-plan-label){background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;font:500 14.5px/1.5 var(--f) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--mute) !important}
html body .tkbt-chip::before{display:none !important}
html body :is(.tkbt-chips,.tkbm-chip-row,.mys-tags){gap:4px 20px !important}
html body :is(.tkbm-chip,.tkbc-chip) .tkbm-icon,html body .tkbc-chip .tkbc-icon{display:none}
html body .tkbt a.tkbt-lang{background:none !important;border:0 !important;padding:6px 0 !important;color:var(--ink) !important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(67,194,91,.6)}
html body :is(.mys-badge,.badge,.badge-pro,.badge-beta){background:none !important;border:0 !important;padding:0 !important;color:var(--mute) !important;font-weight:500 !important;text-transform:none !important;letter-spacing:0 !important}

/* icon tiles and emoji holders (emoji are already gone from the text) */
html body :is(.tkbt-tool-ico,.tkbm-feature-icon,.tkbc-feature-icon,.tkbm-privacy-icon,.tkbc-privacy-icon,.tkbm-order-icon,.tkbm-count-icon,.mys-card-icon,.mys-win-icon,.mys-demo-icon,.tkbt-note-ico){display:none !important}
html body :is(.icon,.success-icon,.expired-icon,.warning-icon,.custom-message-icon):empty{display:none !important}

/* cards become rows: a hairline on top, no box, no lift */
html body :is(a.tkbt-tool,.tkbt-card,.tkbt-step,.tkbm-feature-card,.tkbm-step,.tkbm-net-card,.tkbm-case,.tkbm-plan,.tkbc-feature-card,.mys-card){background:none !important;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;box-shadow:none !important;transform:none !important;padding:20px 0 24px !important}
html body :is(a.tkbt-tool,.tkbt-card,.tkbt-step,.mys-card):hover{transform:none !important;box-shadow:none !important}
html body a.tkbt-tool:hover h3{color:var(--acc-hi) !important}
html body .tkbt-tool-go{display:none !important}
html body a.tkbt-tool h3{text-decoration:underline;text-decoration-color:rgba(240,243,241,.2);text-underline-offset:5px}
html body :is(.tkbt-tools,.tkbt-grid,.tkbm-feature-grid,.tkbm-net-grid,.tkbc-feature-grid,.mys-grid){gap:0 40px !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
html body :is(.tkbt-steps,.tkbm-steps){grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
html body .tkbm-price-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 40px !important}
@media (max-width:700px){html body :is(.tkbt-tools,.tkbt-grid,.tkbm-feature-grid,.tkbm-net-grid,.tkbc-feature-grid,.mys-grid,.tkbm-price-grid){grid-template-columns:minmax(0,1fr) !important}}
html body .mys-card-bar{display:none !important}
/* numbers of real steps stay, as plain numbers */
html body :is(.tkbm-step-num,.step-number){background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;width:auto !important;height:auto !important;color:var(--acc-hi) !important;font:600 18px/1 var(--f) !important;justify-content:flex-start !important}
html body .tkbt-step::before{background:none !important;background-image:none !important;border-radius:0 !important;width:auto !important;height:auto !important;color:var(--acc-hi) !important;font:600 18px/1 var(--f) !important;box-shadow:none !important;display:block;margin-bottom:8px}
html body .timeline::before{display:none !important}
html body :is(.step:hover .card,.step:hover .step-number){transform:none !important;box-shadow:none !important}
html body .tkbm-plan-flag{display:none !important}
html body .tkbm-plan--free{border-top-color:rgba(67,194,91,.5) !important}

/* stripes become a quiet frame (warnings keep a warm frame) */
html body :is(.highlight-box,.download-info,.subscription-details,.submission-details,.checkout-agreement-section,#mysorty-download-section,#tkbmonitor-download-section){border:1px solid var(--line) !important;border-radius:8px !important;background:var(--panel) !important}
html body :is(.warning-box,.mys-note,.mys-ai-note){border:1px solid rgba(242,196,106,.4) !important;border-radius:8px !important;background:rgba(242,196,106,.06) !important;color:var(--ink) !important}
html body .mys-what-list li{background:none !important;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;padding:14px 0 !important}
html body .mys-what-list{grid-template-columns:minmax(0,1fr) !important;gap:0 !important}
html body .mys-what{background:none !important;border:0 !important;box-shadow:none !important;padding-left:0 !important;padding-right:0 !important}
html body .mys-what-tagline{font-style:normal !important;color:var(--mute) !important;font-weight:400 !important}
html body .mys-section-label{font:600 20px/1.3 var(--f) !important;text-transform:none !important;letter-spacing:0 !important;color:var(--ink) !important}
html body .mys-section-label::after{display:none !important}
html body .feature-list li::before{content:none !important}
html body .feature-list{list-style:disc;padding-left:20px !important}

/* nested marketing boxes flatten; real controls keep a frame */
html body :is(.tkbt-panel,.tkbc-privacy,.tkbm-privacy,.tkbt-table-wrap,.tkbm-accept,.tkbm-incl,.tkbm-count,.payment-methods-section,.mys-demo-wrapper .mys-demo-box,.timeline .card){background:none !important;border:0 !important;box-shadow:none !important;background-image:none !important}
html body .tkbt-drop{background:var(--panel) !important;border:1px dashed rgba(240,243,241,.28) !important;border-radius:10px !important}
html body .tkbt-drop:hover,html body .tkbt-drop.is-over{border-color:var(--acc) !important}
html body .tkbt-drop svg{width:26px !important;height:26px !important}
html body .tkbt-cta{background:none !important;background-image:none !important;border-top:1px solid var(--line) !important;border-radius:0 !important;color:var(--ink) !important}
html body .tkbt-cta :is(h2,p){color:var(--ink) !important}
html body :is(.tkbt-faq details,.tkbm-faq-item,.tkbc-faq-item){background:none !important;border:0 !important;border-bottom:1px solid var(--line) !important;border-radius:0 !important;box-shadow:none !important}
html body .tkbt thead th{text-transform:none !important;letter-spacing:0 !important;font-size:14px !important}
html body .tkbm-flow-tag{position:static !important;display:block !important;background:none !important;border:0 !important;padding:0 !important;margin-bottom:14px !important;font:500 14px/1.4 var(--f) !important;letter-spacing:0 !important;text-transform:none !important;color:var(--faint) !important}
html body .tkbm-flow{border:1px solid var(--line) !important;border-radius:12px !important;background:var(--panel) !important}
html body .tkbm-flow-chip{background:none !important;border:0 !important;border-top:1px solid var(--line) !important;border-radius:0 !important;box-shadow:none !important}
html body .tkbm-flow-chip .tkbm-icon,html body .tkbm-flow-core-icon{display:none !important}
html body .tkbm-flow-core{background:var(--panel) !important;background-image:none !important;border:1px solid rgba(67,194,91,.55) !important;box-shadow:none !important;color:var(--ink) !important}
html body .tkbm-flow-core *{color:var(--ink) !important}

/* scroll-reveal must never leave text invisible */
html body :is(.tkbt-reveal,.tkbm-reveal,.tkbc-reveal){opacity:1 !important;transform:none !important}
/* a price stays readable while checkout is not available yet (the buttons keep their state) */
html body .pricing-card:is(.initial-loading,.loading,.restricted){opacity:1 !important}

/* buttons: one shape. Primary = solid green; the rest = outline. No gradients, glow, lift or letter-spacing */
html body :is(.tkb-btn,.tkbt .tkbt-btn,.tkbm a.tkbm-btn,.tkbc-btn,a.tkbc-btn,.price-btn,#download-mysorty-btn,.mys-demo-box a.mys-demo-button,.tag-demo-button,.custom-message-btn,.tkb-form button){background-image:none !important;border-radius:8px !important;box-shadow:none !important;letter-spacing:0 !important;text-transform:none !important;transform:none !important;animation:none !important;font-family:var(--f) !important;font-weight:600 !important}
html body :is(.tkb-btn,.tkbt .tkbt-btn--primary,.tkbm a.tkbm-btn--primary,.tkbc-btn--primary,.price-btn,#download-mysorty-btn,.tkb-form button[type="submit"],.custom-message-btn.primary){background:var(--acc) !important;background-color:var(--acc) !important;border:1px solid var(--acc) !important;color:#0b1a10 !important}
html body :is(.tkb-btn,.tkbt .tkbt-btn--primary,.tkbm a.tkbm-btn--primary,.price-btn,#download-mysorty-btn):hover{background:var(--acc-hi) !important;border-color:var(--acc-hi) !important}
html body :is(.tkbt .tkbt-btn:not(.tkbt-btn--primary),.tkbm a.tkbm-btn--ghost,.mys-demo-box a.mys-demo-button,.custom-message-btn.secondary){background:transparent !important;border:1px solid rgba(240,243,241,.24) !important;color:var(--ink) !important}
html body :is(.tkbm-cta-row .tkbm-btn>.tkbm-icon,.price-btn svg,.mys-demo-box a.mys-demo-button span){display:none !important}
html body :is(.tkbt .tkbt-btn,.tkbm a.tkbm-btn,.price-btn):disabled,html body .pricing-card button:disabled{opacity:.55 !important}

/* MySorty prices: four plain boxes, left-aligned, no colour codes */
html body .pricing-card{border:1px solid var(--line) !important;border-radius:12px !important;box-shadow:none !important;background:var(--panel) !important;text-align:left !important}
html body .pricing-card:hover{transform:none !important;box-shadow:none !important}
html body .pricing-card h2{color:var(--ink) !important;text-align:left !important}
html body h1#mys-price-h1{color:var(--ink) !important}
html body .payment-method-item{background:none !important;border:0 !important;box-shadow:none !important}
html body .payment-methods-grid{justify-content:flex-start !important}

/* help and FAQ page: no blue, no bubbles */
html body .header .logo{width:72px !important;height:auto !important;animation:none !important}
html body .card h3[style*="color"]{color:var(--ink) !important}
html body .tag-demo{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:10px !important}

/* forms: calm fields */
html body .tkb-form :is(input,textarea,select){border-radius:6px !important;background:var(--panel) !important;border:1px solid rgba(240,243,241,.2) !important;color:var(--ink) !important}
html body .tkb-form :is(input,textarea,select):focus{border-color:var(--acc) !important;outline:none}

/* the big decorative chapter numbers (01 to 06) on the guide pages */
html body .tkb-cell:has(> .tkb-text .tkb-fs[style*="--fd:135px"]){visibility:hidden}

/* the grain belongs to the homepage only */
body::after{display:none}

/* included / not included in the price lists */
.kit-yes,.kit-no{display:inline-block;width:16px;height:16px;margin-right:9px;vertical-align:-3px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.kit-yes{color:var(--acc);--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E")}
.kit-no{color:#e07a6c;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E")}
/* help page: the example boxes' label and the info lines read in the page's own colours */
html body .tag-demo-header,html body .tag-demo-label{color:var(--ink) !important}
html body .highlight-box,html body .highlight-box :is(strong,b){color:var(--ink) !important}

/* the green band (contact on About us): like the homepage's IT-Hilfe band, dark text and a dark button */
html body .tkb-sec.kit-band{background:var(--acc) !important}
html body .tkb-sec.kit-band :is(h1,h2,h3,h4,p,li,span,strong){color:#04120a !important}
html body .tkb-sec.kit-band .tkb-btn{background:#17191b !important;border-color:#17191b !important;color:#f2f6f3 !important;width:auto !important;align-self:flex-start}

/* guide chapters with the big numbers: one plain stack per chapter (the numbers are decoration) */
html body .tkb-grp:has(.tkb-fs[style*="--fd:135px"]){display:flex !important;flex-direction:column;gap:12px;padding:28px 0 8px;border-top:1px solid var(--line)}
html body .tkb-grp:has(.tkb-fs[style*="--fd:135px"])>.tkb-cell{height:auto !important;min-height:0 !important}
html body .tkb-grp:has(.tkb-fs[style*="--fd:135px"])>.tkb-cell:has(.tkb-fs[style*="--fd:135px"]){display:none !important}
/* module headers that colour their own text keep it (after the white-heading rule above, so they win) */
html body :is(.deletion-header,.success-header,.cancel-header) :is(h1,h2,h3){color:inherit !important}
/* help page: the example panels copy MySorty's own green UI; they keep its real colour (#116734 with white text) */
html body :is(.tag-input-section,.tag-rules-section),html body .tag-demo>div[style*="padding: 15px"]{background:#116734 !important}
html body .tag-demo [style*="background: #52a069"],html body .card [style*="background: #52a069"]{background:#116734 !important}

/* headings on the older pages use the heading face too (one token: --head) */
html body :is(.tkb-content,.tkb-sec,.tkbt,.tkbm,.tkbc) :is(h1,h2,h3){font-family:var(--head) !important;text-wrap:balance}
html body :is(.tkb-content,.tkb-sec) :is(p,li){text-wrap:pretty}

/* stars behind every page (kit.js draws them); the page itself is see-through */
.kit-stars{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* older pages: sections take turns between the open sky and a translucent band with a lit top edge (the stars still show through) */
html body main.tkb-main>section.tkb-sec:nth-of-type(even){background:linear-gradient(180deg,rgba(40,44,48,.62) 0%,rgba(30,33,36,.5) 30%,rgba(26,29,31,.42) 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.075),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 30px 60px -40px rgba(143,227,157,.07)}
/* their pieces rise in once (kit.js; not on pages with forms) */
.kit-rise .kit-r{opacity:0;transform:translateY(22px)}
.kit-rise .kit-r.in{opacity:1;transform:none;transition:opacity 340ms var(--cr) var(--d,0ms),transform 760ms var(--sp) var(--d,0ms)}

/* =====================================================================================
   Prices, forms, tools, login, blog: same depth as the rebuilt pages (raised panels over the stars).
   Layout and look only; every input, button, select and script hook stays as it is.
   ===================================================================================== */
/* price plans: four across on wide screens, two on tablets, one on phones */
/* the page keeps its content in a 960 px column; the plans break out of it to the full 1180 px */
html body .pricing-container{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px !important;width:min(1180px,calc(100vw - 2 * var(--gut)));max-width:none !important;margin:36px 0 !important;margin-left:calc(50% - min(590px,50vw - var(--gut))) !important;padding:0 !important}
html body .pricing-card .license-row{display:grid !important;gap:4px;margin-top:10px;font-size:13.5px;color:var(--mute)}
@media (max-width:1100px){html body .pricing-container{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html body .pricing-container{grid-template-columns:minmax(0,1fr)}}
html body .pricing-card{width:auto !important;display:flex !important;flex-direction:column;padding:26px 24px 24px !important;border:0 !important;border-radius:20px !important;
  background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important}
html body .pricing-card h2{margin:0 !important;font-family:var(--head) !important;line-height:1.1 !important}
html body .pricing-card h2:first-of-type{font-size:16px !important;font-weight:600 !important;color:var(--mute) !important;letter-spacing:0 !important}
html body .pricing-card h2+h2{margin-top:2px !important;font-size:30px !important;font-weight:700 !important;letter-spacing:-.02em !important}
html body .pricing-card>p{margin:16px 0 4px !important;font-size:15px !important;line-height:1.5 !important;color:var(--mute) !important;font-variant-numeric:tabular-nums}
html body .pricing-card>p strong{display:inline-block;color:var(--ink) !important;font-size:19px;font-weight:700;letter-spacing:-.01em}
html body .pricing-card .vat-note{display:block;margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--faint)}
html body .pricing-card ul{margin:16px 0 18px !important;padding:14px 0 0 !important;border-top:1px solid var(--line)}
html body .pricing-card li{display:flex;align-items:flex-start;gap:8px;margin:0 !important;padding:5px 0;font-size:14.5px;line-height:1.4;color:var(--ink)}
html body .pricing-card li:has(.kit-no){color:var(--faint)}
html body .pricing-card select{width:100%;min-height:40px;margin-top:6px;border-radius:8px}
html body .pricing-card button{width:100%;min-height:48px;margin-top:14px;border-radius:10px !important;font-size:15px !important}
html body .payment-methods-section,html body .checkout-agreement{max-width:1180px;margin-left:auto !important;margin-right:auto !important}
html body .checkout-agreement{padding:22px 24px !important;border-radius:18px !important;border:0 !important;background:rgba(32,35,38,.8) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05) !important}

/* contact and appointment forms: one raised panel with a clear title */
html body main.tkb-main .tkb-form{max-width:640px;margin:8px auto 0 !important;padding:clamp(24px,3vw,36px) !important;border-radius:20px;
  background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95)}
html body main.tkb-main:has(.tkb-form) :is(h1,h2){text-align:left;max-width:640px;margin-left:auto !important;margin-right:auto !important}
html body main.tkb-main:has(.tkb-form) .tkb-flow>p{max-width:640px;margin-left:auto !important;margin-right:auto !important}
html body .tkb-form :is(input:not([type=checkbox]):not([type=radio]),select,textarea){border-radius:10px !important;min-height:46px}
html body .tkb-form button[type=submit]{min-height:50px;padding:0 26px !important;border-radius:10px !important}

/* tools: the working area is a raised panel, sections take turns like the bands */
html body .tkbt-panel{border:0 !important;border-radius:20px !important;background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important}
html body .tkbt-drop{border-radius:14px !important;transition:border-color 212ms var(--cr),background-color 212ms var(--cr)}
html body .tkbt-drop:hover{border-color:rgba(143,227,157,.6) !important;background:rgba(67,194,91,.05) !important}
html body .tkbt-section--alt{position:relative}

/* login: the form on a raised panel */
html body .tkb-main .firebase-module:not(.hidden){max-width:460px;margin:0 auto;padding:clamp(24px,3vw,34px);border-radius:20px;background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95)}

/* blog list: cards lift a little under the pointer */
html body .tkb-bloglist .tkb-card{border-radius:16px !important;overflow:hidden;transition:transform 431ms var(--sp),box-shadow 212ms var(--cr)}
html body .tkb-bloglist .tkb-card:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(143,227,157,.35),0 40px 70px -40px rgba(0,0,0,.95)}
@media (prefers-reduced-motion:reduce){html body .tkb-bloglist .tkb-card:hover{transform:none}}
html body .pricing-card li:has(.license-row){display:block;color:var(--mute)}
html body .pricing-card li>:is(.kit-yes,.kit-no){flex:none;margin-top:2px}
/* tools: their second-tone sections sit on a raised panel (a full-width band would be cut off by the tool module) */
html body .tkbt-section--alt{background:linear-gradient(180deg,rgba(40,44,48,.8),rgba(30,33,36,.72)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important;border:0 !important;border-radius:20px !important}

/* fewer lines on the older pages too: their rows become raised tiles again (with depth, not the old flat cards) */
html body :is(a.tkbt-tool,.tkbt-card,.tkbt-step,.tkbm-feature-card,.tkbm-step,.tkbm-net-card,.tkbm-case,.tkbm-plan,.tkbc-feature-card,.mys-card){background:var(--tile) !important;border:0 !important;border-radius:16px !important;box-shadow:var(--tile-sh) !important;padding:22px 24px !important}
html body .mys-what-list li{background:var(--tile) !important;border:0 !important;border-radius:12px !important;box-shadow:var(--tile-sh) !important;padding:14px 18px !important;margin-bottom:10px !important}
html body :is(.tkbt-faq details,.tkbm-faq-item,.tkbc-faq-item){background:var(--tile) !important;border:0 !important;border-radius:14px !important;box-shadow:var(--tile-sh) !important;padding-left:18px !important;padding-right:18px !important;margin-bottom:10px !important}
html body .tkbt-cta{border-top:0 !important}
html body main.tkb-main>section.tkb-sec:nth-of-type(even){background:linear-gradient(180deg,rgba(44,48,52,.8) 0%,rgba(34,37,40,.7) 40%,rgba(28,31,34,.62) 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 40px 80px -50px rgba(143,227,157,.08) !important}
@media (max-width:640px){.tkb-logo .kit-logo{height:30px}.tkb-logo .kit-sp{width:26px}.tkb-logo .kit-wm{height:16px}.tkb-logo .kit-su{height:20px;margin-top:4px}}

/* ---------- tools pages, after the first-visit review: tiles get air between rows, the green banner becomes a charcoal
   closing panel, prose gets room before each new heading, the colour pickers look like the other fields ---------- */
html body :is(.tkbt-tools,.tkbt-grid,.tkbm-feature-grid,.tkbm-net-grid,.tkbc-feature-grid,.mys-grid){gap:14px 18px !important}
html body :is(.tkbt-steps,.tkbm-steps){gap:12px !important}
html body .tkbt .tkbt-chips{margin-top:18px !important}
html body .tkbt .tkbt-cta{background:var(--tile) !important;background-image:none !important;box-shadow:var(--tile-sh) !important;border:0 !important;border-radius:20px !important;padding:clamp(26px,4vw,44px) !important;gap:20px 32px !important}
html body .tkbt .tkbt-cta h2{color:var(--ink) !important}
html body .tkbt .tkbt-cta p{color:var(--mute) !important;opacity:1 !important}
html body .tkbt .tkbt-cta .tkbt-btn{background:var(--acc) !important;border-color:var(--acc) !important;color:#0b1a10 !important}
html body .tkbt .tkbt-cta .tkbt-btn:hover{background:var(--acc-hi) !important;border-color:var(--acc-hi) !important}
html body .tkbt-prose :is(p,ul,ol,div)+h2{margin-top:clamp(40px,6vh,64px) !important}
html body .tkbt-prose :is(p,ul,ol)+h3{margin-top:28px !important}
html body .tkbt input[type="color"]{height:44px !important;padding:4px !important;border-radius:10px !important;border:1px solid rgba(240,243,241,.16) !important;background:var(--panel) !important;cursor:pointer}
html body .tkbt input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
html body .tkbt input[type="color"]::-webkit-color-swatch{border:0;border-radius:6px}
html body .tkbt input[type="color"]::-moz-color-swatch{border:0;border-radius:6px}
/* questions on the older pages: one panel split by thin rules, like on the product pages */
html body :is(.tkbt-faq,.tkbm-faq-list){background:var(--tile) !important;box-shadow:var(--tile-sh) !important;border-radius:18px !important;overflow:hidden;padding:0 !important}
html body :is(.tkbt-faq details,.tkbm-faq-item){background:none !important;box-shadow:none !important;border-radius:0 !important;margin:0 !important;padding-left:22px !important;padding-right:22px !important;border:0 !important}
html body :is(.tkbt-faq details+details,.tkbm-faq-item+.tkbm-faq-item){border-top:1px solid rgba(255,255,255,.07) !important}
html body :is(.tkbt-faq details[open],.tkbm-faq-item[open]){background:rgba(255,255,255,.03) !important}
/* a whole tool tile is the link: it lifts a little under the pointer instead of underlining its title */
html body a.tkbt-tool h3{text-decoration:none !important}
html body a.tkbt-tool{transition:transform 360ms var(--sp),box-shadow 212ms var(--cr) !important}
html body a.tkbt-tool:hover{transform:translateY(-3px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(143,227,157,.22),0 34px 60px -36px rgba(0,0,0,.95) !important}
html body a.tkbt-tool:active{transform:translateY(-1px) scale(.99) !important}
/* a raised band never touches the section after it */
html body .tkbt-section--alt+.tkbt-section{padding-top:clamp(48px,7vh,72px) !important}

/* ---------- MySorty prices, after the first-visit review: the plans come first, the payment logos after them;
   the sign-in hint is a quiet line, not an alarm; a price reads as one big monthly figure and a smaller yearly one ---------- */
html body .tkb-content:has(> .pricing-container){display:flex;flex-direction:column}
html body .tkb-content:has(> .pricing-container)>.payment-methods-section{order:1;margin-top:clamp(48px,7vh,80px) !important}
html body .tkb-content:has(> .pricing-container)>.mys-demo-wrapper{order:2}
html body .tkb-content:has(> .pricing-container)>.custom-message-overlay{order:3}
html body .auth-message.warning{align-self:center;width:auto !important;max-width:min(640px,calc(100vw - 2 * var(--gut))) !important;margin:0 auto 10px !important;padding:10px 18px 10px 38px !important;position:relative;border:0 !important;border-radius:12px !important;background:rgba(255,255,255,.045) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07) !important;color:var(--mute) !important;font-size:15px !important;text-align:left !important}
html body .auth-message.warning::before{content:"";position:absolute;left:18px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#f2c46a}
html body .pricing-card p[id^="price-"]>strong:first-of-type{display:block;font-size:clamp(21px,1.8vw,25px) !important;letter-spacing:-.02em;color:var(--ink) !important}
html body .pricing-card p[id^="price-"]>br:first-of-type{display:none}
html body .pricing-card p[id^="price-"]{color:var(--mute) !important;font-size:14px !important}
html body .pricing-card p[id^="price-"]>strong:nth-of-type(2){white-space:nowrap;font-size:14.5px !important;color:var(--ink) !important}
html body .pricing-card .vat-note{display:block;margin-top:10px}
html body .mys-ai-note{border:0 !important;border-radius:16px !important;background:var(--tile) !important;box-shadow:var(--tile-sh) !important;color:var(--mute) !important;padding:20px 24px !important}
html body .mys-ai-note strong{color:var(--ink) !important}

/* ---------- TKB Monitor prices: plan tiles get air between rows; the order panel is charcoal like every other panel ---------- */
html body .tkbm-price-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:18px !important}
@media (max-width:1000px){html body .tkbm-price-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:640px){html body .tkbm-price-grid{grid-template-columns:minmax(0,1fr) !important}}
html body .tkbm .tkbm-order{background:var(--tile) !important;box-shadow:var(--tile-sh) !important;border-radius:22px !important;color:var(--ink) !important}
html body .tkbm .tkbm-order h2{color:var(--ink) !important}
html body .tkbm .tkbm-order p{color:var(--mute) !important}
html body .tkbm .tkbm-order .tkbm-accept{background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:12px !important}
html body .tkbm .tkbm-order .tkbm-accept label{color:var(--mute) !important}
html body .tkbm .tkbm-order .tkbm-accept a{color:var(--ink) !important}
html body .tkbm .tkbm-order .tkbm-accept-msg{color:#fff !important;background:rgba(233,80,70,.85) !important}
html body .tkbm .tkbm-order a.tkbm-btn{background:var(--acc) !important;border-color:var(--acc) !important;color:#0b1a10 !important;box-shadow:none !important}
html body .tkbm .tkbm-order a.tkbm-btn:hover{background:var(--acc-hi) !important}
html body .tkbm .tkbm-order a.tkbm-btn .tkbm-icon{color:#0b1a10 !important}
/* every MySorty price reads the same way in every card: the monthly figure, then "oder", then the other offer */
html body .pricing-card p[id^="price-"]>strong:nth-of-type(2){display:block}
/* the six Monitor plans use the full content width, so each plan's button fits on one line */
@media (min-width:1001px){html body .tkbm-price-grid{width:min(1180px,calc(100vw - 2 * var(--gut)));margin-left:calc(50% - min(590px,50vw - var(--gut))) !important}}
html body .tkbm-plan .tkbm-btn{white-space:nowrap}
html body .tkbm:has(.tkbm-price-grid){overflow:visible !important}

/* ---------- forms, login and blog after the first-visit review ---------- */
/* a message needs room: the box starts about seven lines tall */
html body .tkb-form textarea{min-height:168px !important;resize:vertical}
/* login: the site's own type; one green action, account creation is the quiet second choice; recovery links each on a line */
html body #tkb-auth-container{--font-family:var(--f) !important;--primary-green:var(--acc) !important}
html body #tkb-auth-container :is(input,button,.nav-link,p,label,h1,h2){font-family:var(--f) !important}
html body #tkb-auth-container :is(h1,h2){font-family:var(--head) !important}
html body #tkb-auth-container .form-button:not(.form-button-secondary){background:var(--acc) !important;color:#0b1a10 !important}
html body #tkb-auth-container .form-button:not(.form-button-secondary):hover{background:var(--acc-hi) !important}
html body #tkb-auth-container .form-button-secondary{background:transparent !important;color:var(--ink) !important;border:1px solid rgba(240,243,241,.24) !important;box-shadow:none !important}
html body #tkb-auth-container .form-button-secondary:hover{border-color:rgba(240,243,241,.55) !important;background:rgba(255,255,255,.03) !important}
html body #tkb-auth-container .form-links{display:flex !important;flex-direction:column !important;align-items:center !important;gap:10px !important;margin-top:18px !important}
html body #tkb-auth-container .form-links .nav-link{font-size:14.5px !important;font-weight:500 !important;color:var(--acc-hi) !important}
/* blog: a page title, and card titles in the text colour; green only under the pointer */
html body .kit-blog-head{margin:0 0 clamp(28px,4vh,44px)}
html body .kit-blog-head h1{margin:0;font-family:var(--head) !important;font-size:clamp(36px,4.4vw,60px);font-weight:700;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
html body .kit-blog-head p{margin:12px 0 0;color:var(--mute);font-size:clamp(17px,1.35vw,20px)}
html body .tkb-bloglist .tkb-card strong{color:var(--ink) !important;transition:color 212ms var(--cr)}
html body .tkb-bloglist .tkb-card:hover strong{color:var(--acc-hi) !important}
html body .tkb-flow:has(.tkb-form)>h1{text-align:left !important;width:100% !important;max-width:640px !important;margin-left:auto !important;margin-right:auto !important}
/* MySorty help: each step's number stands at the top beside its heading and stays in view while the step is read */
html body .timeline .step{align-items:flex-start !important;gap:clamp(16px,2.4vw,32px) !important}
html body .timeline .step-number{flex:none !important;align-self:flex-start !important;position:sticky !important;top:96px;min-width:48px;padding-top:2px !important;font-family:var(--head) !important;font-size:clamp(28px,2.6vw,38px) !important;font-weight:700 !important;line-height:1 !important;letter-spacing:-.03em;text-align:right;color:var(--acc-hi) !important;font-variant-numeric:tabular-nums}
@media (max-width:700px){html body .timeline .step{flex-direction:column !important;gap:8px !important}html body .timeline .step-number{position:static !important;text-align:left;min-width:0}}
/* the consent box on forms is a real target: 20 px, in the accent colour, aligned with the first line of its label */
html body .tkb-form input[type="checkbox"]{width:20px !important;height:20px !important;min-width:20px;margin:2px 10px 0 0 !important;accent-color:var(--acc);cursor:pointer;vertical-align:top}
/* tool pages: the tool is the raised surface and the help below it is plain, not the other way round (second review);
   the heading above the tool is smaller so the tool starts higher */
html body .tkbt .tkbt-panel{border:0 !important;border-radius:22px !important;padding:clamp(22px,3vw,34px) !important;background:linear-gradient(180deg,rgba(44,48,52,.86),rgba(32,35,38,.8)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important}
html body .tkbt:has(.tkbt-section--tool) .tkbt-section--alt{background:none !important;box-shadow:none !important;border-radius:0 !important}
html body .tkbt:has(.tkbt-section--tool) .tkbt-h1{font-size:clamp(30px,3.2vw,44px) !important;line-height:1.08 !important}
/* blog posts end on their product: the closing "Mehr dazu" line becomes a raised panel with a real button (second review) */
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2)):has(>a:only-child[href^="/produkte/"],>a:only-child[href^="/products/"]){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:40px !important;padding:22px 26px;border-radius:18px;background:var(--tile);box-shadow:var(--tile-sh);color:var(--mute)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"]){display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:10px;background:var(--acc);color:#0b1a10 !important;font-weight:600;text-decoration:none !important;transition:background-color 212ms var(--cr),transform 226ms var(--cr)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"]):hover{background:var(--acc-hi)}
@media (max-width:640px){html body .tkbt .tkbt-panel{padding:18px 14px !important;border-radius:18px !important}}
@media (max-width:640px){html body .tkb-hdr{height:60px}html body .tkb-logo .kit-sp{width:24px}html body .tkb-logo .kit-wm{height:15px}html body .tkb-logo .kit-su{height:18.75px;margin-top:3.75px}}   /* phones: a slimmer header */
@media (max-width:640px){html body .tkb-hdr.is-open .tkb-nav{top:60px !important}}
/* older pages' headline arrival: each word rises out of its own line, as on the rebuilt pages */
.kit-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.kit-w>span{display:inline-block}
.kit-intro .kit-w>span{transform:translateY(105%)}
.kit-intro-go .kit-w>span{transform:none;transition:transform 900ms var(--sp) calc(var(--wi) * 45ms)}

/* ---------- fourth review ---------- */
/* form pages: the title starts where the form's panel starts, not where its fields start */
html body main:has(.tkb-form) .tkb-cell>h1{width:100%;max-width:calc(640px + 2 * clamp(24px,3vw,36px)) !important;margin-left:auto !important;margin-right:auto !important;text-align:left !important}
html body .tkb-flow:has(.tkb-form)>:is(h1,p){max-width:calc(640px + 2 * clamp(24px,3vw,36px)) !important;margin-left:auto !important;margin-right:auto !important;text-align:left !important}

/* login: account creation is clearly second (smaller), the two recovery links have room around them */
html body #tkb-auth-container .form-button-secondary{min-height:46px !important;height:auto !important;padding:10px 18px !important;font-size:16px !important}
html body #tkb-auth-container .form-links{gap:14px !important}
html body #tkb-auth-container .form-links .nav-link{padding:4px 8px;border-radius:8px}
html body #tkb-auth-container .form-links .nav-link:hover{background:rgba(255,255,255,.05)}
/* QR tool: the chosen tab is unmistakable */
html body .tkbt .tkbt-tabs button[aria-selected="true"]{background:var(--acc) !important;color:#0b1a10 !important;box-shadow:none !important}
html body .tkbt .tkbt-tabs button[aria-selected="false"]{background:transparent !important;color:var(--mute) !important}
html body .tkbt .tkbt-tabs button[aria-selected="false"]:hover{color:var(--ink) !important}
/* blog list: shorter pictures, so the titles tell the articles apart */
html body .tkb-bloglist .tkb-card>img{aspect-ratio:16/7 !important;height:auto !important;object-fit:cover !important;width:100% !important}
/* blog post: the closing line and its button sit together */
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2)):has(>a:only-child[href^="/produkte/"],>a:only-child[href^="/products/"]){justify-content:flex-start !important}
/* MySorty help: a page title that leads, step numbers that follow */
html body main h1.subtitle{font-size:clamp(28px,3.2vw,44px) !important;line-height:1.1 !important;letter-spacing:-.025em}
html body .timeline .step-number{font-size:clamp(22px,2vw,28px) !important}
/* tools directory: the categories closer together; questions as wide as the tool grid */
html body .tkbt-section{padding-top:clamp(36px,5vh,52px) !important;padding-bottom:clamp(36px,5vh,52px) !important}
html body .tkbt .tkbt-faq{max-width:none !important}
/* tools: a button that cannot be used yet looks it (grey, not a dimmed green); the empty QR preview shows the outline of a
   code (its three corner squares) instead of a blank square */
html body .tkbt .tkbt-btn:disabled:not(#_),html body .tkbt .tkbt-btn--primary:disabled:not(#_){background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.1) !important;color:var(--faint) !important;opacity:1 !important;cursor:not-allowed}
html body .tkbt-qr-box:has(img[hidden]){position:relative;min-height:240px}
html body .tkbt-qr-box:has(img[hidden])::before{content:"";position:absolute;inset:0;margin:auto;width:150px;height:150px;opacity:.22;
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/42px 42px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/42px 42px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/42px 42px no-repeat;
  outline:2px dashed rgba(240,243,241,.5);outline-offset:14px;border-radius:4px}
/* MySorty help, workflow picture: light arrows and labels on the green, the folders as readable tiles */
html body .workflow-container>div[style*="font-size: 60px"]{color:#e8ede9 !important}
html body .workflow-container [style*="color: #17191b"]{color:#f0f3f1 !important}
html body .workflow-container [style*="color: #1c3a2c"]{color:rgba(240,243,241,.75) !important}
html body .workflow-container>div:last-child>div{background:rgba(10,30,18,.55) !important;color:#f0f3f1 !important;border-color:rgba(255,255,255,.12) !important}
/* login: field names above the fields */
html body #tkb-auth-container .kit-lbl{display:block;margin:0 0 6px;font:600 14px/1.2 var(--f);color:var(--mute);text-align:left}
/* blog post: the product logo at the top is a small mark beside the article's start, not a large picture before it */
html body .tkb-post>.tkb-post-img[alt*="Logo"]{width:72px !important;height:auto !important;margin:0 0 18px !important;filter:drop-shadow(0 14px 22px rgba(0,0,0,.5))}
/* blog articles: section headings a step smaller than the title, so a simple article doesn't feel heavy */
html body .tkb-post h2{font-size:clamp(24px,2.2vw,31px) !important;line-height:1.15 !important;margin-top:44px !important;max-width:none !important}
html body .tkb-post h3{font-size:clamp(19px,1.6vw,22px) !important;margin-top:28px !important}
/* MySorty prices, lower part: the payment logos as one quiet strip; invoice and trial as two raised tiles side by side */
html body .payment-methods-section h2{font-size:15px !important;font-weight:600 !important;color:var(--mute) !important;letter-spacing:0 !important}
html body .payment-methods-grid{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:14px 18px !important;max-width:1180px;margin:18px auto 0 !important}
html body .payment-method-item{display:grid !important;justify-items:center;gap:6px;width:auto !important;min-width:64px}
html body .payment-method-item .payment-text{font-size:12px !important;color:var(--faint) !important}
html body .mys-demo-wrapper{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important;max-width:1180px;margin-left:auto !important;margin-right:auto !important}
html body .mys-demo-wrapper .mys-demo-box{background:var(--tile) !important;box-shadow:var(--tile-sh) !important;border-radius:20px !important;padding:clamp(24px,3vw,36px) !important;text-align:left !important}
html body .mys-demo-wrapper .mys-demo-box :is(h2,p){text-align:left !important;margin-left:0 !important;margin-right:0 !important}
html body .mys-demo-wrapper .mys-demo-box h2{font-size:clamp(22px,2vw,27px) !important}
html body .mys-demo-wrapper .mys-demo-box a.mys-demo-button{margin-left:0 !important}
@media (max-width:800px){html body .mys-demo-wrapper{grid-template-columns:minmax(0,1fr) !important}}
/* TKB Monitor prices: the four ordering steps as a compact 2 x 2 grid instead of four full-width panels */
@media (min-width:900px){html body .tkbm .tkbm-steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}}

/* ---------- fifth review ---------- */
/* one hamburger everywhere: the homepage's thin rounded lines, not the old filled bars */
html body .tkb-burger svg{opacity:0}
html body .tkb-hdr:not(.is-open) .tkb-burger{background:center/24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h18M3 12h18M3 17h18' fill='none' stroke='%23f0f3f1' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important}
/* form pages: no long empty stretch under the form */
html body .tkb-main:has(.tkb-form) .tkb-sec{padding-bottom:clamp(48px,8vh,88px) !important}
/* selects show they open */
html body .tkb-form select{appearance:none;-webkit-appearance:none;padding-right:40px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23b0b9b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:right 12px center !important;background-size:20px !important}
/* login: both buttons the same height; the rarer recovery link is quieter */
html body #tkb-auth-container .form-button-secondary{min-height:52px !important}
html body #tkb-auth-container .form-links .nav-link+.nav-link{font-size:13.5px !important;color:var(--mute) !important;font-weight:500 !important}
/* tools: a category with a single tool gets the full row; the three how-to steps sit side by side */
html body .tkbt-tools:has(> a.tkbt-tool:only-child){grid-template-columns:minmax(0,1fr) !important}
@media (min-width:820px){html body .tkbt .tkbt-steps{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
/* blog article: the product mark sits beside the date line; the closing panel hugs its content */
html body .tkb-post>.tkb-post-img[alt*="Logo"]{float:left;width:44px !important;margin:2px 14px 0 0 !important}
html body .tkb-post>.tkb-post-img[alt*="Logo"]+*{min-height:44px}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2)):has(>a:only-child[href^="/produkte/"],>a:only-child[href^="/products/"]){display:inline-flex !important;width:auto}
/* menu indicators: the homepage's thin chevron on every page (the triangle is hidden, the chevron drawn in its place) */
html body .tkb-caret{fill:none !important;width:10px !important;height:6px !important;background:center/10px 6px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b0b9b4' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");opacity:.85}
html body .tkb-caret polygon{display:none}
html body .tkb-form :is(input,select,textarea){color-scheme:dark}
/* help page: each step number on the line of its heading */
@media (min-width:701px){html body .timeline .step-number{margin-top:24px !important}}

/* moving between pages: the old page fades up and away, the new one rises in; the header stays put (browsers without
   cross-page view transitions simply load the page as before) */
@view-transition{navigation:auto}
html body .tkb-hdr{view-transition-name:site-header}
::view-transition-old(root){animation:kit-vt-out 200ms cubic-bezier(.3,0,.8,.15) both}
::view-transition-new(root){animation:kit-vt-in 460ms cubic-bezier(.2,.8,.2,1) both}
@keyframes kit-vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes kit-vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* =====================================================================================================
   Tool pages
   ===================================================================================================== */
/* one typeface in the tool panels (fields, drop-zone title, tabs and messages used the system font) */
html body :is(.tkbt,.tkbm,.tkbc){--font-body:var(--f)}
/* the buttons behave like everywhere else: the green one wipes to a dark button with a green edge, lifts, presses in */
html body :is(.tkbt .tkbt-btn--primary,.tkbt .tkbt-cta .tkbt-btn):not(:disabled):not(#q){position:relative;isolation:isolate;overflow:hidden;background:#23282b !important;border:0 !important;
  box-shadow:inset 0 0 0 1.5px var(--acc) !important;color:#0b1a10 !important;transition:color 260ms var(--cr) 60ms,transform 431ms var(--sp),box-shadow 212ms var(--cr) !important}
html body :is(.tkbt .tkbt-btn--primary,.tkbt .tkbt-cta .tkbt-btn):not(:disabled):not(#q)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform-origin:100% 50%;transition:transform 420ms cubic-bezier(.65,0,.35,1)}
html body :is(.tkbt .tkbt-btn--primary,.tkbt .tkbt-cta .tkbt-btn):not(:disabled):not(#q):hover{background:#23282b !important;color:var(--acc-hi) !important;transform:translateY(-2px) !important;box-shadow:inset 0 0 0 1.5px var(--acc-hi),0 6px 16px -10px rgba(67,194,91,.35) !important}
html body :is(.tkbt .tkbt-btn--primary,.tkbt .tkbt-cta .tkbt-btn):not(:disabled):not(#q):hover::before{transform:scaleX(0)}
html body .tkbt .tkbt-btn:not(.tkbt-btn--primary):not(.tkbt-cta .tkbt-btn):not(:disabled):not(#q){transition:border-color 212ms var(--cr),background-color 212ms var(--cr),transform 431ms var(--sp) !important}
html body .tkbt .tkbt-btn:not(.tkbt-btn--primary):not(.tkbt-cta .tkbt-btn):not(:disabled):not(#q):hover{border-color:rgba(240,243,241,.55) !important;background:rgba(255,255,255,.03) !important;transform:translateY(-2px) !important}
html body .tkbt .tkbt-btn.tkbt-btn.tkbt-btn.tkbt-btn.tkbt-btn:not(:disabled):not(#q):active{transform:translateY(0) scale(.96) !important;transition-duration:120ms !important}
html body .tkbt .tkbt-icon-btn{transition:border-color 212ms var(--cr),color 212ms var(--cr),transform 431ms var(--sp)}
html body .tkbt .tkbt-icon-btn:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){html body .tkbt .tkbt-btn:not(:disabled):not(#q):not(#q2):is(:hover,:active){transform:none !important}html body .tkbt .tkbt-btn::before{transition:none !important}}
/* spacing the module's resets had collapsed */
html body .tkbt .tkbt-files{margin-top:12px}
html body .tkbt .tkbt-count{margin-top:8px}
html body .tkbt .tkbt-note{margin-top:16px}
html body .tkbt h3.tkbt-sub-h{margin:36px 0 12px !important;font-size:19px !important;line-height:1.3 !important}
/* IP addresses never break inside a number; wide tables scroll in their own box */
html body .tkbt td code{word-break:normal !important;white-space:nowrap}
html body .tkbt .tkbt-kv td code{white-space:normal}
/* the JSON error snippet sits on the dark page like the rest */
html body .tkbt .tkbt-errsnip{background:rgba(255,255,255,.04) !important;color:var(--ink) !important;box-shadow:inset 0 0 0 1px rgba(255,168,155,.25)}
/* a file dragged over a drop zone: clearly ready to take it */
html body .tkbt-drop{transition:border-color 212ms var(--cr),background-color 212ms var(--cr),transform 431ms var(--sp) !important}
html body .tkbt-drop.is-over{background:rgba(67,194,91,.10) !important;border-style:solid !important;border-color:var(--acc-hi) !important;transform:scale(1.01)}
@media (prefers-reduced-motion:reduce){html body .tkbt-drop.is-over{transform:none}}
/* the consent box in the site's own colours */
html body .tkbt .tkbt-consent{border:0 !important;background:rgba(255,255,255,.04) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:14px}
/* fields and selects in one row are the same height */
html body .tkbt :is(input[type=text],input[type=number],input[type=url],input[type=email],input[type=tel],input[type=password],select){min-height:44px;box-sizing:border-box}
/* one focus ring, also on checkboxes and colour pickers */
html body .tkbt :focus-visible{outline:2px solid var(--acc-hi) !important;outline-offset:3px}
html body .tkbt :is(input[type=checkbox],input[type=color]):focus-visible{outline:2px solid var(--acc-hi) !important;outline-offset:3px}
/* the open phone menu marks the page you are on */
html body .tkb-hdr.is-open .tkb-sub a[aria-current="page"]{color:var(--ink) !important}
@media (max-width:640px){
  /* image resizer results: name and sizes on one line, the buttons below */
  html body .tkbt-imgrow{flex-wrap:wrap}
  html body .tkbt-imgrow .tkbt-fmeta{flex:1 1 calc(100% - 64px);min-width:0}
  html body .tkbt-imgrow .tkbt-fbtns{flex:1 0 100%;justify-content:flex-end}
  /* PDF lists: smaller icons, the name may take two lines, so files can be told apart */
  html body .tkbt :is(.tkbt-ficon,.tkbt-file img){width:36px !important;height:36px !important}
  html body .tkbt .tkbt-icon-btn{width:30px !important;height:30px !important}
  html body .tkbt .tkbt-fmeta strong{white-space:normal !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:normal;overflow-wrap:anywhere}
  /* breadcrumbs wrap between items, never before a separator */
  html body .tkbt-crumbs li{white-space:nowrap}
}

/* =====================================================================================================
   Blog, help page, legal pages, phone menu, footer
   ===================================================================================================== */
/* blog list: the whole picture shows (logos and tables were cut at the edges), on the panel colour */
html body .tkb-bloglist .tkb-card>img{object-fit:contain !important;background:var(--panel) !important}
/* blog posts: the closing line's button behaves like every green button: the green wipes away to the right and leaves a dark
   button with a green edge and green text, lifts a little, presses in; the price link ends a post the same way */
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2)):has(>a:only-child[href^="/preise/"],>a:only-child[href^="/prices/"]){display:inline-flex !important;width:auto;flex-wrap:wrap;align-items:center;justify-content:flex-start !important;gap:14px 24px;margin-top:40px !important;padding:22px 26px;border-radius:18px;background:var(--tile);box-shadow:var(--tile-sh);color:var(--mute)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"],[href^="/preise/"],[href^="/prices/"]):not(#q){position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 24px;border:0;border-radius:12px;background:#23282b;box-shadow:inset 0 0 0 1.5px var(--acc);color:#0b1a10 !important;font:600 16px/1.2 var(--f);letter-spacing:-.005em;text-decoration:none !important;
  transition:color 260ms var(--cr) 60ms,transform 431ms var(--sp),box-shadow 212ms var(--cr)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"],[href^="/preise/"],[href^="/prices/"]):not(#q)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform-origin:100% 50%;transition:transform 420ms cubic-bezier(.65,0,.35,1)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"],[href^="/preise/"],[href^="/prices/"]):not(#q):hover{background:#23282b;color:var(--acc-hi) !important;transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--acc-hi),0 6px 16px -10px rgba(67,194,91,.35)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"],[href^="/preise/"],[href^="/prices/"]):not(#q):hover::before{transform:scaleX(0)}
html body .tkb-main article>p:is(:last-of-type,:nth-last-of-type(2))>a:only-child:is([href^="/produkte/"],[href^="/products/"],[href^="/preise/"],[href^="/prices/"]):not(#q):active{transform:translateY(0) scale(.96);transition-duration:120ms}
@media (prefers-reduced-motion:reduce){
  html body .tkb-main article>p>a:only-child:not(#q){transition:color 212ms,box-shadow 212ms !important;transform:none !important}
  html body .tkb-main article>p>a:only-child:not(#q)::before{transition:none !important}
  html body .tkb-main article>p>a:only-child:not(#q):hover::before{transform:none;opacity:0}
}
/* links inside running text look alike everywhere: text colour, a green underline that brightens under the pointer
   (blog posts had a white underline, the EULA green text); the jump and back links keep their own look */
html body :is(.tkb-post a:not(.tkb-post-back a),.tkbm-doc a:not(.tkbm-jump)){color:var(--ink) !important;text-decoration:underline;text-decoration-color:rgba(67,194,91,.6) !important;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color 212ms var(--cr)}
html body :is(.tkb-post a:not(.tkb-post-back a),.tkbm-doc a:not(.tkbm-jump)):hover{text-decoration-color:var(--acc-hi) !important}

/* MySorty help: the steps rise in as they reach the screen (kit.js), not all at once on load and below the fold;
   with reduced motion nothing moves */
html body .timeline .step{animation:none !important;opacity:1}
html.kit-rise body .timeline .step.kit-r{opacity:0;transform:translateY(22px)}
html.kit-rise body .timeline .step.kit-r.in{opacity:1;transform:none;transition:opacity 340ms var(--cr) var(--d,0ms),transform 760ms var(--sp) var(--d,0ms)}
@media (prefers-reduced-motion:reduce){html body .header{animation:none !important}}
/* MySorty help, demo panels: text at least 13 px; the AI label light on its green (it was dark on dark green) */
html body .timeline :is(.badge,.ai-file small,.ai-brain,.ai-rule,.tag-demo-label,.tag-demo-input,.tag-demo-select,.tag-chip,.tag-demo-button,.rule-folder,.rule-tag,.rule-mode,.rule-delete,.rule-edit,.rule-priority,.empty-state),
html body .timeline :is([style*="font-size: 10px"],[style*="font-size: 11px"],[style*="font-size: 12px"]){font-size:13px !important}
html body .ai-brain{color:#f0f3f1 !important}

/* small links get a bigger target without moving anything: padding, taken back by a negative margin */
html body .guide-link{padding:12px 0;margin-top:3px !important;margin-bottom:-12px}
html body .tkbm .tkbm-jump{padding:12px 0;margin-top:4px;margin-bottom:-12px}   /* (its own top margin is 16 px) */
html body .tkbm-back a{display:inline-block;padding:12px 0;margin:-12px 0}
@media (max-width:640px){
  /* footer links on phones: each a full-height target, the rows spaced by it */
  html body .tkb-ftr ul{row-gap:0}
  html body .tkb-ftr a{display:inline-block;padding:10px 0}
}

/* phone menu: the panel slides and fades in on a spring and leaves faster; a section's sub-list unfolds instead of
   jumping in; every entry is the same width, so all chevrons line up ("Mehr" is a button, the others links) */
@media (max-width:999.95px){
  html body .tkb-hdr .tkb-nav{position:fixed;left:0;right:0;top:72px;bottom:0;overflow:auto;padding:18px var(--gut) 40px;background:var(--bg);border-top:1px solid var(--line);
    opacity:0;translate:0 -10px;transition:opacity 150ms var(--exit),translate 160ms var(--exit),display 160ms allow-discrete}
  html body .tkb-hdr.is-open .tkb-nav{opacity:1;translate:none;transition:opacity 212ms var(--cr),translate 431ms var(--sp),display 0s allow-discrete}
  @starting-style{html body .tkb-hdr.is-open .tkb-nav{opacity:0;translate:0 -10px}}
  /* the header's blur comes back only once the panel has left (with it, the panel would be held inside the 72 px bar) */
  html body .tkb-hdr{transition:backdrop-filter 0s 160ms,-webkit-backdrop-filter 0s 160ms}
  html body .tkb-hdr.is-open{transition:none}
  html body .tkb-hdr.is-open .tkb-nav :is(a,button){box-sizing:border-box}
  html body .tkb-hdr.is-open .tkb-sub{display:block !important;height:0;overflow:hidden;opacity:0;visibility:hidden;padding:0 0 0 8px !important;interpolate-size:allow-keywords;
    transition:height 260ms var(--exit),padding-bottom 260ms var(--exit),opacity 150ms var(--exit),visibility 0s 260ms}
  html body .tkb-hdr.is-open li.is-open>.tkb-sub{height:auto;opacity:1;visibility:visible;padding-bottom:8px !important;transition:height 431ms var(--cr),padding-bottom 431ms var(--cr),opacity 212ms var(--cr) 60ms,visibility 0s}
}
@media (max-width:640px){html body .tkb-hdr .tkb-nav{top:60px !important}}
@media (prefers-reduced-motion:reduce){html body .tkb-hdr :is(.tkb-nav,.tkb-sub){transition:none !important;translate:none !important}}

/* =====================================================================================================
   Prices, forms and result pages; one button behaviour everywhere; tools; docs
   ===================================================================================================== */
/* fonts: the text arrives in a fallback with Onest's width (Segoe UI scaled to it), so nothing re-wraps when Onest lands */
@font-face{font-family:"Onest Fallback";src:local("Segoe UI"),local("Arial");size-adjust:104.5%}
@font-face{font-family:"Bricolage Fallback";src:local("Segoe UI Bold"),local("Arial Bold");font-weight:700;size-adjust:102.4%}
:root{--f:"Onest","Onest Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;--head:"Bricolage Grotesque","Bricolage Fallback",var(--f);
  /* one page title for prices and form pages: size, and its distance below the header (as on the rebuilt pages) */
  --t-page:clamp(34px,4vw,52px);--pg-top:clamp(44px,8vh,100px)}
@media (max-width:640px){:root{--pg-top:28px}}

/* one typeface: fields, buttons, selects and the old modules' cards were in the system font or Arial */
html body .tkb-main :is(button,select,input,textarea,option),
html body :is(.success-card,.cancel-card,#confirm-deletion-container,#termination-form-container,#tkb-auth-action-container,.pricing-card,.tkbm),
html body :is(.success-card,.cancel-card,#confirm-deletion-container,#termination-form-container,#tkb-auth-action-container) :is(p,span,label,a,li,div,strong,small,em,i,b){font-family:var(--f) !important}
html body :is(.success-card,.cancel-card,#termination-form-container,#tkb-auth-action-container,#confirm-deletion-container) :is(h1,h2,h3,h4){font-family:var(--head) !important}
html body #termination-form-container :is(em,i),html body .tkb-content:has(> #termination-form-container) :is(em,i){font-style:normal}   /* (the only italic on these pages) */

/* ---------- one page title: prices and form pages ---------- */
html body :is(.tkbm-h1,#mys-price-h1,.tkb-flow:has(.tkb-form)>h1,.termination-header h1,.pg:has(.pg-prods--prices) .pg-hero h1){font:700 var(--t-page)/1.05 var(--head) !important;letter-spacing:-.03em !important;text-align:left !important;color:var(--ink) !important;text-wrap:balance}

/* ---------- one button behaviour everywhere: the solid green button; under the pointer the green wipes away to the
   right and leaves a dark button with a green edge and light-green text; it lifts a little and presses in. The label turns
   light only once the wipe has passed it, so it stays readable. Outline buttons lift and brighten their edge. ---------- */
html body :is(.tkbm a.tkbm-btn--primary,.tkbm .tkbm-order a.tkbm-btn,.tkb-form button[type=submit],.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .action-buttons .btn:first-child,.tkb-main .btn.btn-primary,#tkb-auth-container .form-button:not(.form-button-secondary),#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn:not(.kit-band .tkb-btn),#download-mysorty-btn,.tkbc-btn--primary):not(:disabled):not(#q){
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px !important;box-sizing:border-box;
  border:0 !important;border-radius:12px !important;background:#23282b !important;box-shadow:inset 0 0 0 1.5px var(--acc) !important;color:#0b1a10 !important;
  font:600 16px/1.2 var(--f) !important;letter-spacing:-.005em !important;text-decoration:none !important;text-transform:none !important;cursor:pointer;opacity:1 !important;
  transition:color 140ms var(--cr) 220ms,transform 431ms var(--sp),box-shadow 212ms var(--cr) !important}
html body :is(.tkbm a.tkbm-btn--primary,.tkbm .tkbm-order a.tkbm-btn,.tkb-form button[type=submit],.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .action-buttons .btn:first-child,.tkb-main .btn.btn-primary,#tkb-auth-container .form-button:not(.form-button-secondary),#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn:not(.kit-band .tkb-btn),#download-mysorty-btn,.tkbc-btn--primary):not(:disabled):not(#q)::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--acc);transform-origin:100% 50%;transition:transform 420ms cubic-bezier(.65,0,.35,1)}
html body :is(.tkbm a.tkbm-btn--primary,.tkbm .tkbm-order a.tkbm-btn,.tkb-form button[type=submit],.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .action-buttons .btn:first-child,.tkb-main .btn.btn-primary,#tkb-auth-container .form-button:not(.form-button-secondary),#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn:not(.kit-band .tkb-btn),#download-mysorty-btn,.tkbc-btn--primary):not(:disabled):not(#q):hover{
  background:#23282b !important;color:var(--acc-hi) !important;transform:translateY(-2px) !important;box-shadow:inset 0 0 0 1.5px var(--acc-hi),0 6px 16px -10px rgba(67,194,91,.35) !important}
html body :is(.tkbm a.tkbm-btn--primary,.tkbm .tkbm-order a.tkbm-btn,.tkb-form button[type=submit],.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .action-buttons .btn:first-child,.tkb-main .btn.btn-primary,#tkb-auth-container .form-button:not(.form-button-secondary),#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn:not(.kit-band .tkb-btn),#download-mysorty-btn,.tkbc-btn--primary):not(:disabled):not(#q):hover::before{transform:scaleX(0)}
html body :is(.tkbm a.tkbm-btn--primary,.tkbm .tkbm-order a.tkbm-btn,.tkb-form button[type=submit],.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .action-buttons .btn:first-child,.tkb-main .btn.btn-primary,#tkb-auth-container .form-button:not(.form-button-secondary),#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn:not(.kit-band .tkb-btn),#download-mysorty-btn,.tkbc-btn--primary):not(:disabled):not(#q):active{transform:translateY(0) scale(.96) !important;transition-duration:140ms,120ms,212ms !important}
/* icons inside a green button follow its text colour */
html body :is(.tkbm a.tkbm-btn--primary,.tkbm .tkbm-order a.tkbm-btn) .tkbm-icon{color:currentColor !important}
/* the same label timing for the green buttons built earlier (rebuilt pages, tools, blog) */
html body :is(.pg-link,.pg-btn--pri,.tkbt .tkbt-btn--primary,.tkbt .tkbt-cta .tkbt-btn,.tkb-main article>p>a:only-child):not(:disabled):not(#q){transition:color 140ms var(--cr) 220ms,transform 431ms var(--sp),box-shadow 212ms var(--cr) !important}
/* outline buttons: the edge brightens, the button lifts and presses in */
html body :is(.tkbm a.tkbm-btn--ghost,.cancel-card .btn-secondary,.success-card .action-buttons .btn:not(:first-child),.tkb-main .btn.btn-secondary,#tkb-auth-container .form-button-secondary,.custom-message-btn.secondary,.pg-btn:not(.pg-btn--pri)):not(:disabled):not(#q){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px !important;box-sizing:border-box;border-radius:12px !important;background:transparent !important;
  border:1px solid rgba(240,243,241,.24) !important;box-shadow:none !important;color:var(--ink) !important;font:600 16px/1.2 var(--f) !important;text-decoration:none !important;cursor:pointer;
  transition:border-color 212ms var(--cr),background-color 212ms var(--cr),transform 431ms var(--sp) !important}
html body :is(.tkbm a.tkbm-btn--ghost,.cancel-card .btn-secondary,.success-card .action-buttons .btn:not(:first-child),.tkb-main .btn.btn-secondary,#tkb-auth-container .form-button-secondary,.custom-message-btn.secondary,.pg-btn:not(.pg-btn--pri)):not(:disabled):not(#q):hover{border-color:rgba(240,243,241,.6) !important;background:rgba(255,255,255,.04) !important;color:var(--ink) !important;transform:translateY(-2px) !important}
html body :is(.tkbm a.tkbm-btn--ghost,.cancel-card .btn-secondary,.success-card .action-buttons .btn:not(:first-child),.tkb-main .btn.btn-secondary,#tkb-auth-container .form-button-secondary,.custom-message-btn.secondary,.pg-btn:not(.pg-btn--pri)):not(:disabled):not(#q):active{transform:translateY(0) scale(.96) !important;transition-duration:212ms,212ms,120ms !important}
/* a button that cannot be used yet stays flat and grey (not a dimmed green) */
html body :is(.pricing-card button,.tkb-form button,#tkb-auth-container .form-button,#tkb-auth-action-container .form-button,.tkb-main .btn):disabled:not(#q){background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.1) !important;box-shadow:none !important;color:var(--faint) !important;opacity:1 !important;transform:none !important;cursor:not-allowed}
html body .pricing-card button:disabled:not(#q){min-height:50px;border-radius:12px !important;font:600 15px/1.25 var(--f) !important}
@media (prefers-reduced-motion:reduce){
  html body :is(.tkbm a.tkbm-btn,.tkb-form button,.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .btn,.cancel-card .btn,.tkb-main .btn,#tkb-auth-container .form-button,#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn,.tkbc-btn,.pg-btn):not(#q):not(#q2):is(:hover,:active){transform:none !important}
  html body :is(.tkbm a.tkbm-btn,.tkb-form button,.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .btn,.cancel-card .btn,.tkb-main .btn,#tkb-auth-container .form-button,#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn,.tkbc-btn):not(#q):not(#q2)::before{transition:none !important}
  html body :is(.tkbm a.tkbm-btn,.tkb-form button,.mys-demo-box a.mys-demo-button,.pricing-card button,.success-card .btn,.cancel-card .btn,.tkb-main .btn,#tkb-auth-container .form-button,#tkb-auth-action-container .form-button,.tkb-main .download-button,.tkb-btn,.tkbc-btn):not(#q):not(#q2):hover::before{transform:none !important;opacity:0}
}

/* ---------- one focus ring (2 px light green, as in the header) on every form, price and result page ---------- */
html body :is(.tkbm,.tkb-form,.pricing-card,.checkout-agreement,#termination-form-container,#tkb-auth-container,#tkb-auth-action-container,.success-card,.cancel-card,.mys-demo-wrapper,.payment-methods-section,.mys-ai-note) :focus-visible{outline:2px solid var(--acc-hi) !important;outline-offset:3px !important}
html body :is(.tkbm,.tkb-form,.pricing-card,.checkout-agreement,#termination-form-container,#tkb-auth-container,#tkb-auth-action-container) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus-visible{outline-offset:2px !important}
/* the fields: a green edge while typing (no red glow on the termination form, no white glow at login) */
html body :is(.tkb-form,#termination-form-container,#tkb-auth-container,#tkb-auth-action-container) :is(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--acc) !important;box-shadow:none !important;background-color:var(--panel) !important}

/* empty fields look empty: a select still on its "please choose" line and an empty date are grey like a placeholder */
html body .tkb-form select:has(option[value=""]:checked){color:var(--faint) !important}
html body .tkb-form select option{color:var(--ink)}
html body .tkb-form input[type=date]:not(:focus):not(:valid),html body .tkb-form input[type=date]:not(:focus):placeholder-shown{color:var(--faint) !important}
html body :is(.tkb-form,#tkb-auth-container,#termination-form-container) ::placeholder{color:var(--faint) !important;opacity:1}

/* inline text links: text colour with a green underline that brightens under the pointer (monitor, MySorty, forms, termination) */
html body :is(.tkbm,.mys-ai-note,.mys-demo-box,.payment-methods-section,.checkout-agreement,.tkb-form,#termination-form-container,.tkb-native,#tkb-auth-container .checkbox-group) a:not([class*="btn"]):not(.mys-demo-button):not(.tkbm-jump):not(.tkbm-back a):not(#q){
  color:var(--ink) !important;text-decoration:underline !important;text-decoration-color:rgba(67,194,91,.6) !important;text-decoration-thickness:1px !important;text-underline-offset:3px !important;transition:text-decoration-color 212ms var(--cr),color 212ms var(--cr)}
html body :is(.tkbm,.mys-ai-note,.mys-demo-box,.payment-methods-section,.checkout-agreement,.tkb-form,#termination-form-container,.tkb-native,#tkb-auth-container .checkbox-group) a:not([class*="btn"]):not(.mys-demo-button):not(.tkbm-jump):not(.tkbm-back a):not(#q):hover{text-decoration-color:var(--acc-hi) !important}
html body :is(.mys-ai-note,.payment-methods-section) a:not(#q){font-weight:500 !important}

/* ---------- MySorty prices: one width for every part (the plans' 1180 px), one VAT line under the plans, calm selects ---------- */
html body .tkb-content:has(> .pricing-container){width:min(1180px,100% - 2 * var(--gut)) !important;max-width:none !important;padding-top:var(--pg-top) !important}
html body .tkb-content:has(> .pricing-container) .pricing-container{width:100% !important;margin-left:0 !important;margin-right:0 !important}
html body .tkb-content:has(> .pricing-container)>:is(.payment-methods-section,.checkout-agreement,.mys-ai-note,.mys-demo-wrapper,.kit-vat){width:100% !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box}
html body .tkb-main #mys-price-h1{margin:0 0 4px !important}
html body .tkb-content:has(> .pricing-container)>.auth-message.warning{align-self:flex-start;margin:0 0 18px !important}
html body .kit-vat{margin:-14px 0 28px !important;color:var(--faint);font-size:13.5px;line-height:1.5}
html body .payment-methods-section :is(h2,p){text-align:left !important}
html body .payment-methods-grid{justify-content:flex-start !important}
html body .pricing-card select{margin-left:0 !important;margin-right:0 !important;width:100% !important;min-height:44px;padding:0 40px 0 12px !important;box-sizing:border-box;appearance:none;-webkit-appearance:none;cursor:pointer;
  font:500 15px/1.2 var(--f) !important;color:var(--ink) !important;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23b0b9b4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center/20px !important;
  border:1px solid rgba(240,243,241,.2) !important;border-radius:10px !important;transition:border-color 212ms var(--cr)}
html body .pricing-card select:hover{border-color:rgba(240,243,241,.4) !important}
html body .pricing-card select:focus{border-color:var(--acc) !important}
html body .pricing-card .license-row>span{color:var(--mute)}
/* a plan's long button label may wrap, centred, with room above and below */
html body .pricing-card button{line-height:1.25 !important;padding-top:10px !important;padding-bottom:10px !important;text-align:center;white-space:normal}

/* ---------- TKB Monitor prices: one left edge for title, plans, notes and steps; phone gutters like the header ---------- */
html body .tkb-content:has(> .tkbm){width:auto !important;max-width:none !important}
html body .tkbm .tkbm-wrap{max-width:1180px !important;padding-left:var(--gut) !important;padding-right:var(--gut) !important;box-sizing:content-box}
html body .tkbm :is(.tkbm-incl,.tkbm-count),html body .tkbm .tkbm-section>.tkbm-wrap>.tkbm-accept{padding-left:0 !important;padding-right:0 !important}
html body .tkbm .tkbm-vat{text-align:left !important}
html body .tkbm .tkbm-top{padding-top:var(--pg-top) !important}
html body .tkbm .tkbm-h1{margin-top:0 !important}
/* the back link: one quiet text link with one underline, green under the pointer; the "developed by" line under it said the
   same as the footer */
html body .tkbm .tkbm-back a{color:var(--mute) !important;font-weight:500 !important;text-decoration:none !important;transition:color 212ms var(--cr)}
html body .tkbm .tkbm-back a *{text-decoration:none !important}
html body .tkbm .tkbm-back a:hover{color:var(--acc-hi) !important}
html body .tkbm .tkbm-back p{display:none !important}
/* questions open with a spring in their height (the homepage's spring), and close a little faster */
html body :is(.tkbm-faq-item,.tkbt-faq details,.tkbc-faq-item,.pg-faq){interpolate-size:allow-keywords}
html body :is(.tkbm-faq-item,.tkbt-faq details,.tkbc-faq-item,.pg-faq)::details-content{height:0;overflow:clip;transition:height 260ms var(--exit),content-visibility 260ms allow-discrete}
html body :is(.tkbm-faq-item,.tkbt-faq details,.tkbc-faq-item,.pg-faq)[open]::details-content{height:auto;transition:height 560ms var(--sp),content-visibility 560ms allow-discrete}
@media (prefers-reduced-motion:reduce){html body :is(.tkbm-faq-item,.tkbt-faq details,.tkbc-faq-item,.pg-faq)::details-content{transition:none !important}}

/* ---------- contact and appointment: the title at the same height as on the other pages ---------- */
html body .tkb-main:has(.tkb-form){padding-top:0 !important}
html body .tkb-main:has(.tkb-form)>.tkb-sec:first-child{padding-top:var(--pg-top) !important}
html body .tkb-flow:has(.tkb-form)>h1{margin-top:0 !important}
html body .tkb-form input[type=checkbox]:focus-visible{outline:2px solid var(--acc-hi) !important;outline-offset:3px !important}

/* ---------- payment result pages (success, cancel) and the deletion page: no grey slab; the card is a raised panel ---------- */
html body :is(#stripe-success-container,.cancel-container,#confirm-deletion-container){display:block !important;background:none !important;min-height:0 !important;max-width:none !important;width:auto !important;margin:0 !important;padding:var(--pg-top) 0 clamp(48px,8vh,96px) !important;box-shadow:none !important}
html body .tkb-content:has(> :is(#stripe-success-container,.cancel-container)){width:min(712px,100% - 2 * var(--gut)) !important;padding:0 !important}
html body :is(.success-card,.cancel-card){max-width:none !important;width:100% !important;box-sizing:border-box;margin:0 !important;padding:clamp(24px,3vw,36px) !important;text-align:left !important;border:0 !important;border-radius:20px !important;
  background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important;animation:none !important}
html body :is(.success-icon,.cancel-icon){width:52px !important;height:52px !important;margin:0 0 20px !important}
html body :is(.success-icon,.cancel-icon) svg{width:26px !important;height:26px !important}
html body .success-icon{background:var(--acc) !important;color:#0b1a10 !important}
html body svg.success-icon{background:none !important;color:var(--acc) !important}
/* payment cancelled: a red circle with a white X, the counterpart of the green tick on the success page */
html body .cancel-icon{background:#e5484d !important;color:#fff !important}
html body .cancel-icon svg{color:#fff !important;stroke:#fff !important}
html body :is(.success-title,.cancel-title){margin:0 0 12px !important;font:700 var(--t-page)/1.05 var(--head) !important;letter-spacing:-.03em !important;color:var(--ink) !important;text-align:left !important}
html body :is(.success-message,.cancel-message){margin:0 0 4px !important;color:var(--mute) !important;font-size:17px !important;line-height:1.55 !important;text-align:left !important}
html body :is(.success-card,.cancel-card) .action-buttons{display:flex !important;flex-wrap:wrap;justify-content:flex-start !important;gap:12px !important;margin-top:24px !important}
html body :is(.success-card,.cancel-card) .action-buttons .btn{margin:0 !important}
@media (max-width:520px){html body :is(.success-card,.cancel-card) .action-buttons{flex-direction:column !important;gap:10px !important}html body :is(.success-card,.cancel-card) .action-buttons .btn{width:100% !important}}
html body .success-card .error-message{text-align:left !important;border-radius:12px !important;background:rgba(233,80,70,.1) !important;box-shadow:inset 0 0 0 1px rgba(255,168,155,.25) !important;border:0 !important;color:#ffb3a8 !important;margin-top:16px !important}
html body .success-card .subscription-details{text-align:left !important;border-radius:12px !important}
/* no valid order: the second title and no check mark (the page's own error box decides; its script is unchanged) */
html body .success-title .kit-err{display:none}
html body .success-card:has(#error-container[style*="block"]) .success-title .kit-ok{display:none}
html body .success-card:has(#error-container[style*="block"]) .success-title .kit-err{display:inline}
html body .success-card:has(#error-container[style*="block"]) .success-icon{display:none !important}
/* the deletion page keeps its own card; only the grey slab around it goes */
html body .tkb-content:has(> #confirm-deletion-container){width:min(960px,100% - 2 * var(--gut)) !important}

/* ---------- termination form in the site's own look: title and lead like the other form pages, the
   portal option and the form on raised charcoal panels, the site's fields, focus and buttons; no coral, no red glow ---------- */
html body .tkb-content:has(> #termination-form-container){display:flex;flex-direction:column;width:min(712px,100% - 2 * var(--gut)) !important;padding:var(--pg-top) 0 clamp(48px,8vh,88px) !important}
html body #termination-form-container,html body #form-state:not(.hidden){display:contents !important}
html body .tkb-content:has(> #termination-form-container)>.tkb-native{order:1;margin:0 0 28px !important}
html body .tkb-content:has(> #termination-form-container)>.tkb-native p{text-align:left !important;color:var(--mute) !important;font-size:17px !important;line-height:1.55 !important}
html body .tkb-content:has(> #termination-form-container)>.tkb-native span{font-size:inherit !important;color:inherit !important}
html body .tkb-content:has(> #termination-form-container)>.tkb-native strong{font-weight:500;color:var(--ink)}
html body #termination-form-container .termination-header{order:0;margin:0 0 12px !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;box-shadow:none !important;text-align:left !important}
html body #termination-form-container .termination-header h1{margin:0 !important}
html body #termination-form-container .termination-header p{margin:10px 0 0 !important;color:var(--ink) !important;font-size:clamp(17px,1.35vw,20px) !important;opacity:1 !important}
html body #termination-form-container :is(.portal-option,.form-section){order:2;margin:0 0 16px !important;padding:clamp(22px,3vw,34px) !important;border:0 !important;border-radius:20px !important;text-align:left !important;
  background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important}
html body #termination-form-container .portal-option{background:var(--tile) !important;box-shadow:var(--tile-sh) !important}
html body #termination-form-container #success-state:not(.hidden){order:3;display:block}
html body #termination-form-container :is(.portal-option,.form-section) h2{margin:0 0 10px !important;padding:0 !important;border:0 !important;font:700 clamp(21px,1.9vw,26px)/1.2 var(--head) !important;letter-spacing:-.02em !important;color:var(--ink) !important}
html body #termination-form-container :is(.portal-option,.form-section)>p{margin:0 0 6px !important;color:var(--mute) !important;font-size:16.5px !important;line-height:1.55 !important}
html body #termination-form-container :is(.portal-option,.form-section) strong{color:var(--ink) !important;font-weight:600}
html body #termination-form-container .portal-option .btn{margin-top:18px !important}
html body #termination-form-container .form-section>div[style*="margin-bottom"]{margin-bottom:22px !important}
html body #termination-form-container .form-row{gap:0 16px !important}
html body #termination-form-container .form-group{margin:0 0 18px !important}
html body #termination-form-container .form-group label{display:block;margin:0 0 6px !important;font:600 14.5px/1.3 var(--f) !important;color:var(--mute) !important}
html body #termination-form-container .form-group.required label::after{color:var(--acc-hi) !important}
html body #termination-form-container :is(.form-input,.form-textarea){min-height:46px;padding:11px 13px !important;border:1px solid rgba(240,243,241,.2) !important;border-radius:10px !important;background:var(--panel) !important;color:var(--ink) !important;font:400 16px/1.4 var(--f) !important;color-scheme:dark;transition:border-color 212ms var(--cr)}
html body #termination-form-container .form-textarea{min-height:140px}
html body #termination-form-container .info-box{margin:6px 0 4px !important;padding:16px 18px !important;border:1px solid rgba(242,196,106,.4) !important;border-radius:12px !important;background:rgba(242,196,106,.06) !important}
html body #termination-form-container .info-box h3{margin:0 0 6px !important;font:600 16px/1.3 var(--f) !important;color:var(--ink) !important;letter-spacing:0 !important}
html body #termination-form-container .info-box p{margin:0 0 4px !important;color:var(--mute) !important;font-size:15px !important;line-height:1.5 !important}
html body #termination-form-container .info-box p strong{color:var(--ink) !important}
html body #termination-form-container .action-buttons{justify-content:flex-start !important;margin-top:22px !important;gap:12px !important}
html body #termination-form-container .message{border-radius:12px !important;font-size:15px}
html body #termination-form-container .message.error{background:rgba(233,80,70,.1) !important;color:#ffb3a8 !important;border:1px solid rgba(255,168,155,.3) !important}
html body #termination-form-container .message.success{background:rgba(67,194,91,.1) !important;color:var(--acc-hi) !important;border:1px solid rgba(143,227,157,.3) !important}
html body #termination-form-container .cdn-consent{border:0 !important;background:rgba(255,255,255,.04) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:14px !important;color:var(--mute)}
html body #termination-form-container .cdn-consent strong{color:var(--ink) !important}
html body #termination-form-container .cdn-revoke{color:var(--mute) !important;text-decoration-color:rgba(67,194,91,.6) !important}
html body #termination-form-container .cdn-revoke:hover{color:var(--ink) !important}
html body #termination-form-container .success-card h2{font:700 clamp(24px,2.4vw,32px)/1.15 var(--head) !important;color:var(--ink) !important}
html body #termination-form-container .submission-details{border-radius:12px !important}
html body #termination-form-container .loader-overlay{background:rgba(23,25,27,.92) !important}
html body #termination-form-container .loader-overlay p{color:var(--mute) !important}
html body #termination-form-container .spinner{border-color:rgba(255,255,255,.12) !important;border-top-color:var(--acc) !important}
@media (max-width:768px){
  html body #termination-form-container .form-row{display:block !important}
  html body #termination-form-container .action-buttons{flex-direction:column !important}
  html body #termination-form-container :is(.action-buttons,.portal-option) .btn{width:100% !important}
}

/* ---------- login and registration ---------- */
/* registration: names above the fields; two fields in a row share it evenly */
html body #tkb-auth-container .kit-fld{flex:1 1 0;min-width:0}
/* a field whose name stands above it does not repeat the name inside it */
html body #tkb-auth-container :is(.kit-lbl+input,.kit-lbl+select,.kit-lbl+.password-input-container input)::placeholder{color:transparent !important}
/* no red edge before anything was typed (the register check marks empty fields as soon as the form opens) */
html body #register-module .form-input.error:placeholder-shown,html body #register-module select.form-input.error:has(option[value=""]:checked){border-color:rgba(240,243,241,.2) !important;box-shadow:none !important}
/* checkboxes start at the first line of their long labels; the private / business choice uses real-size radios */
html body #tkb-auth-container .checkbox-group{align-items:flex-start !important;gap:10px !important}
html body #tkb-auth-container .checkbox-group input[type=checkbox]{flex:none;width:18px;height:18px;margin:2px 0 0 !important;accent-color:var(--acc)}
html body #tkb-auth-container .checkbox-group label{line-height:1.45 !important;color:var(--mute) !important}
html body #tkb-auth-container .radio-option{gap:8px !important}
html body #tkb-auth-container .radio-option input[type=radio]{width:18px;height:18px;margin:0 !important;accent-color:var(--acc);cursor:pointer}
html body #tkb-auth-container .radio-option label{color:var(--ink) !important;font-size:15.5px !important}
html body #tkb-auth-container .form-input{background-color:var(--panel) !important;color:var(--ink) !important;font-family:var(--f) !important;color-scheme:dark}
html body #tkb-auth-container .password-toggle-icon{color:var(--mute) !important;transition:color 212ms var(--cr)}
html body #tkb-auth-container .password-toggle-icon:hover{color:var(--acc-hi) !important}

/* ---------- account action page (password reset, e-mail confirmation): the site's raised panel, type and button ---------- */
html body #tkb-auth-action-container{padding:var(--pg-top) 0 clamp(48px,8vh,96px) !important;background:none !important;min-height:0 !important}
html body #tkb-auth-action-container .firebase-action-module{max-width:460px;margin:0 auto !important;padding:clamp(24px,3vw,34px) !important;border:0 !important;border-radius:20px !important;text-align:left !important;box-sizing:border-box;
  background:linear-gradient(180deg,rgba(40,44,48,.86),rgba(30,33,36,.8)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.06),0 50px 90px -50px rgba(0,0,0,.95) !important}
html body #tkb-auth-action-container h2{margin:0 0 14px !important;font:700 clamp(26px,2.6vw,34px)/1.1 var(--head) !important;letter-spacing:-.025em !important;color:var(--ink) !important;text-align:left !important}
html body #tkb-auth-action-container .message{margin:0 0 16px !important;padding:12px 14px !important;border-radius:12px !important;font-size:15.5px !important;line-height:1.5;text-align:left !important;color:var(--mute) !important;background:rgba(255,255,255,.04) !important;border:0 !important}
html body #tkb-auth-action-container .message:empty{display:none}
html body #tkb-auth-action-container .message.error{background:rgba(233,80,70,.1) !important;color:#ffb3a8 !important}
html body #tkb-auth-action-container .message.success{background:rgba(67,194,91,.1) !important;color:var(--acc-hi) !important}
html body #tkb-auth-action-container label{display:block;margin:0 0 6px !important;font:600 14px/1.3 var(--f) !important;color:var(--mute) !important;text-align:left}
html body #tkb-auth-action-container .form-group{position:relative;margin:0 0 4px !important}
html body #tkb-auth-action-container .form-input{width:100%;min-height:48px;box-sizing:border-box;padding:12px 48px 12px 14px !important;border:1px solid rgba(240,243,241,.2) !important;border-radius:10px !important;background:var(--panel) !important;color:var(--ink) !important;font:400 16px/1.3 var(--f) !important;color-scheme:dark}
html body #tkb-auth-action-container .form-input.error{border-color:rgba(255,143,128,.7) !important}
html body #tkb-auth-action-container .form-button:not(#q){width:100%;margin-top:18px !important}
/* the show / hide password eye, as on the login (kit.js adds it; it only switches the field between hidden and shown) */
html body .kit-eye{position:absolute;right:4px;bottom:4px;width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:none;color:var(--mute);cursor:pointer;transition:color 212ms var(--cr)}
html body .kit-eye:hover{color:var(--acc-hi)}
html body .kit-eye svg{width:22px;height:22px}

/* ---------- header ---------- */
/* only the last menu ("Mehr") opens to the left; "Login" opens under its own name like the others */
html body .tkb-nav>ul>li:nth-last-child(2)>.tkb-sub{left:4px;right:auto;min-width:160px;width:max-content}

/* ---------- prices overview and About us on phones: the logo above the text, the text uses the card's full width ---------- */
@media (max-width:640px){
  html body .pg-prod{grid-template-columns:minmax(0,1fr) !important;row-gap:10px !important}
  html body .pg-prod>img{grid-row:auto !important;width:44px !important;height:44px !important}
  html body .pg-prod-acts{grid-column:1 !important}
}

/* ---------- tools ---------- */
/* the page's longer introduction now follows the tool, word for word */
html body .tkbt .kit-tool-more{max-width:72ch;margin:clamp(28px,4vh,40px) 0 0 !important;color:var(--mute) !important;font-size:16.5px !important;line-height:1.6 !important}
/* the QR tool's "type something" message is grey, not blue */
html body .tkbt .tkbt-status--info{color:var(--mute) !important;background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.08) !important}
/* results, status lines and new rows rise in gently instead of popping in */
html body .tkbt :is(.tkbt-status:not([hidden]),.tkbt-file,.tkbt-gallery>*,.tkbt-qr-box img:not([hidden]),.tkbt-table-wrap,.tkbt-kv,.tkbt-actions>.tkbt-btn:not([hidden])){transition:opacity 212ms var(--cr),translate 431ms var(--sp)}
@starting-style{html body .tkbt :is(.tkbt-status:not([hidden]),.tkbt-file,.tkbt-gallery>*,.tkbt-qr-box img:not([hidden]),.tkbt-table-wrap,.tkbt-kv,.tkbt-actions>.tkbt-btn:not([hidden])){opacity:0;translate:0 6px}}
@media (prefers-reduced-motion:reduce){html body .tkbt :is(.tkbt-status,.tkbt-file,.tkbt-gallery>*,.tkbt-qr-box img,.tkbt-table-wrap,.tkbt-kv,.tkbt-actions>.tkbt-btn){transition:none !important}}

/* ---------- blog: the back link is a quiet text link, green under the pointer; every clickable card lifts 3 px and presses in ---------- */
html body .tkb-post-back a{color:var(--mute) !important;text-decoration:none !important;transition:color 212ms var(--cr)}
html body .tkb-post-back a:hover{color:var(--acc-hi) !important}
html body .tkb-bloglist .tkb-card{transition:transform 431ms var(--sp),box-shadow 212ms var(--cr) !important}
html body .tkb-bloglist .tkb-card:hover{transform:translateY(-3px) !important}
html body .tkb-bloglist .tkb-card:active{transform:translateY(-1px) scale(.99) !important;transition-duration:120ms,212ms !important}
@media (prefers-reduced-motion:reduce){html body .tkb-bloglist .tkb-card:is(:hover,:active){transform:none !important}}
/* help page: its guide links are quiet text links with a green hover too */
html body .guide-link{transition:color 212ms var(--cr)}
html body .guide-link:hover{color:var(--acc-hi) !important}
/* tools: the big subnet split scrolls inside its own box, its column names stay in view */
html body .tkbt [data-splitbox] .tkbt-table-wrap{max-height:420px;overflow:auto !important;overscroll-behavior:contain}
html body .tkbt [data-splitbox] thead th{position:sticky;top:0;z-index:1;background:#25292c !important;box-shadow:inset 0 -1px 0 rgba(240,243,241,.16)}
/* the page title sits the same distance below the header on every price, form and result page */
html body .tkb-main:has(#termination-form-container,.pricing-container,.tkbm-h1,#stripe-success-container,.cancel-container,#tkb-auth-action-container){padding-top:0 !important}
html body .tkb-content:has(> .tkbm){padding-top:0 !important}
html body main:has(.tkb-form) .tkb-cell>h1{font:700 var(--t-page)/1.05 var(--head) !important;letter-spacing:-.03em !important;color:var(--ink) !important;margin-top:0 !important}
/* MySorty prices: the title first, the sign-in hint under it */
html body .tkb-content:has(> .pricing-container)>#mys-price-h1{order:-1}
html body .tkb-flow:has(.tkb-form){width:min(920px,100% - 2 * var(--gut)) !important}
html body .tkb-content:has(> .pricing-container)>#mys-price-h1{padding-left:0 !important;padding-right:0 !important}
html body #tkb-auth-container .form-input:not(.error):not(.valid){border-color:rgba(240,243,241,.2) !important}
html body #tkb-auth-container .form-input.error{border-color:rgba(255,143,128,.75) !important;box-shadow:none !important}
html body #tkb-auth-container .form-input.valid{border-color:rgba(67,194,91,.7) !important;box-shadow:none !important}
html body #register-module .form-input.error:placeholder-shown,html body #register-module select.form-input.error:has(option[value=""]:checked){border-color:rgba(240,243,241,.2) !important}
html body #tkb-auth-container select.form-input:has(option[value=""]:checked){color:var(--faint) !important}
html body #tkb-auth-container select.form-input option{color:var(--ink)}
/* QR tool: the info line keeps its place when it goes away (the panel no longer shrinks by a line when you start typing) */
html body .tkbt-panel--qr [data-status]{min-height:44px;box-sizing:border-box}
html body .tkbt-panel--qr [data-status][hidden]{display:block !important;visibility:hidden}
html body .tkb-form input[type=date].kit-empty:not(:focus),html body .tkb-form input[type=date].kit-empty:not(:focus)::-webkit-datetime-edit{color:var(--faint) !important}
html body #confirm-deletion-container .deletion-card{margin-left:auto !important;margin-right:auto !important}

/* =====================================================================================================
   Price pages
   ===================================================================================================== */
/* the sign-in notice: no dot (it read as decoration), and a way to make an account right beside it */
html body .auth-message.warning{padding:12px 18px !important;border-radius:12px !important;background:rgba(242,196,106,.08) !important;box-shadow:inset 0 0 0 1px rgba(242,196,106,.28) !important}
html body .auth-message.warning::before{display:none !important}
html body .kit-acct{margin-left:12px;color:var(--acc-hi) !important;font-weight:600;text-decoration:underline;text-decoration-color:rgba(143,227,157,.5);text-underline-offset:3px;white-space:nowrap}
html body .kit-acct:hover{text-decoration-color:var(--acc-hi)}
/* "first make an account at tkbitsupport.de/login …": a calm hint box, easy to see, not shouting */
html body :is(.mys-demo-intro,.pg-final-tx p,.pg-p,p):has(> a[href^="/login/"]){position:relative;padding:14px 16px 14px 46px !important;border-radius:14px;background:rgba(67,194,91,.08);box-shadow:inset 0 0 0 1px rgba(143,227,157,.28);color:var(--ink) !important;text-align:left}
html body :is(.mys-demo-intro,.pg-final-tx p,.pg-p,p):has(> a[href^="/login/"])::before{content:"";position:absolute;left:16px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 10h2v7h-2zM11 6.5h2v2h-2z' fill='%230b1a10'/%3E%3C/svg%3E") center/16px no-repeat}
html body :is(.mys-demo-intro,.pg-final-tx p,.pg-p,p):has(> a[href^="/login/"]) a{color:var(--acc-hi) !important;font-weight:600}
/* the payment methods: one raised panel, every method an even tile with its logo on a white chip */
html body .payment-methods-section:not(#q){max-width:1180px;margin:0 auto 26px !important;padding:22px 24px !important;border-radius:20px !important;background:linear-gradient(180deg,rgba(44,48,52,.66),rgba(31,34,37,.6)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 40px 70px -46px rgba(0,0,0,.9) !important}
html body .payment-methods-section h2{margin:0 0 16px !important;color:var(--mute) !important;font-size:15px !important;font-weight:600 !important;text-align:left !important}
html body .payment-methods-grid{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:10px !important;justify-content:stretch !important}
html body .payment-method-item{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;margin:0 !important;padding:12px 8px 10px !important;border-radius:12px !important;background:rgba(255,255,255,.04) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06) !important}
html body .payment-method-item .payment-logo{width:64px !important;height:40px !important;padding:6px 8px !important;object-fit:contain !important;border-radius:8px !important;background:#fff !important;box-shadow:0 6px 14px -8px rgba(0,0,0,.6) !important}
html body .payment-method-item .payment-text{color:var(--ink) !important;font-size:13px !important;line-height:1.2 !important;text-align:center}
/* TKB Monitor: what every package has, as one comparison table */
html body .tkbm-cmp{max-width:1180px;margin:0 auto}
html body .tkbm-cmp h2{margin:0 0 18px !important}
html body .tkbm-ctab-w{overflow-x:auto;border-radius:20px;background:linear-gradient(180deg,rgba(44,48,52,.66),rgba(31,34,37,.6));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 40px 70px -46px rgba(0,0,0,.9)}
html body .tkbm-ctab{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:15px}
html body .tkbm-ctab :is(th,td){padding:12px 18px !important;border:0 !important;text-align:center;vertical-align:middle;color:var(--ink)}
html body .tkbm-ctab th[scope=row]{text-align:left;font-weight:500;color:var(--ink)}
html body .tkbm-ctab thead th{padding:20px 18px 16px !important;font-family:var(--head);font-size:18px;font-weight:700;letter-spacing:-.01em;background:rgba(255,255,255,.03)}
html body .tkbm-ctab thead th small{display:block;margin-top:3px;font-family:var(--f);font-size:13px;font-weight:500;color:var(--mute)}
html body .tkbm-ctab thead th:nth-child(3){background:rgba(67,194,91,.1);box-shadow:inset 0 2px 0 var(--acc)}
html body .tkbm-ctab tbody td:nth-child(3){background:rgba(67,194,91,.05)}
html body .tkbm-ctab tbody tr:nth-child(even):not(.tkbm-cgrp) :is(th,td){background-color:rgba(255,255,255,.022)}
html body .tkbm-ctab tbody tr:nth-child(even) td:nth-child(3){background-color:rgba(67,194,91,.07)}
html body .tkbm-ctab td{color:var(--mute)}
html body .tkbm-cgrp th{padding-top:20px !important;text-align:left !important;color:var(--acc-hi) !important;font-size:13px;font-weight:600;letter-spacing:.02em}
html body .tkbm-ctick{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(67,194,91,.16);color:var(--acc-hi)}
html body .tkbm-ctick .tkbm-icon{width:14px;height:14px}
@media (max-width:640px){html body .tkbm-ctab{font-size:13.5px}html body .tkbm-ctab :is(th,td){padding:10px 10px !important}}
@media (max-width:640px){html body .payment-methods-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}html body .payment-methods-section:not(#q){padding:20px 24px !important}}
/* the tools overview shows each tool's icon again: a green line icon on a soft surface, it lifts with its tile */
html body .tkbt-tool .tkbt-tool-ico:not(#q){display:grid !important;place-items:center;width:52px !important;height:52px !important;margin:0 0 16px !important;border-radius:14px !important;background:rgba(67,194,91,.1) !important;box-shadow:inset 0 0 0 1px rgba(143,227,157,.22) !important;color:var(--acc-hi) !important;transition:transform 431ms var(--sp),background-color 212ms var(--cr)}
html body .tkbt-tool .tkbt-tool-ico:not(#q) svg{display:block !important;width:26px !important;height:26px !important}
html body .tkbt-tool:hover .tkbt-tool-ico:not(#q){background:rgba(67,194,91,.18) !important;transform:rotate(-6deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){html body .tkbt-tool:hover .tkbt-tool-ico:not(#q){transform:none}}
/* the Kontakt page's mascot (contact-buddy.js): the swirl logo with a face in its hole, peeking over the card's top edge.
   The card is opaque there so the mascot's lower part hides behind it. */
html body .tkb-cell:has(> .tkb-form[data-type="kontakt"]){position:relative}
html body main.tkb-main .tkb-form[data-type="kontakt"]{position:relative;z-index:1;background:linear-gradient(180deg,#26292c,#1d1f22)}
.cb{position:absolute;z-index:0;width:var(--s,132px);height:var(--s,132px);font-size:calc(var(--s,132px) / 13.2)}
.cb-in{position:absolute;inset:0;transform:translateY(70%);transform-origin:48% 100%;will-change:transform}
.cb-sp{display:block;width:100%;height:auto;transform-origin:48.1% 48.5%;filter:drop-shadow(0 .8em 1.4em rgba(0,0,0,.55));user-select:none;-webkit-user-drag:none}
.cb-face{position:absolute;left:48.1%;top:47.6%;width:28.6%;height:27.6%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#202427,#0f1112 72%);box-shadow:inset 0 .35em .6em rgba(0,0,0,.7);display:grid;place-items:center;overflow:hidden}
.cb-eyes{display:flex;gap:.55em;margin-top:-.25em}
.cb-eye{display:block;width:1.15em;height:1.45em;border-radius:50%;background:#f3f6f4;transform-origin:50% 50%;position:relative;transition:height 180ms,border-radius 180ms,background-color 120ms}
.cb-eye b{position:absolute;left:50%;top:50%;width:.64em;height:.64em;margin:-.32em 0 0 -.32em;border-radius:50%;background:#0f1112}
.cb-eye b::after{content:"";position:absolute;right:.1em;top:.08em;width:.18em;height:.18em;border-radius:50%;background:#fff}
.cb-mouth{position:absolute;left:50%;top:70%;width:1.1em;height:.5em;margin-left:-.55em;border:.2em solid #8fe39d;border-top:0;border-radius:0 0 1em 1em;opacity:0;transform:scale(.4);transition:opacity 160ms,transform 260ms cubic-bezier(.3,1.6,.5,1)}
.cb-face.is-happy .cb-eye{height:.62em;margin-top:-.4em;background:transparent;border:.22em solid #f3f6f4;border-bottom:0;border-radius:1em 1em 0 0}
.cb-face.is-happy .cb-eye b{display:none}
.cb-face.is-happy .cb-mouth{opacity:1;transform:none}
.cb-face.is-o .cb-mouth{opacity:1;transform:none;width:.5em;height:.5em;margin-left:-.25em;border:.18em solid #8fe39d;border-radius:50%}
.cb-face.is-sleepy .cb-eye{height:.3em;margin-top:.3em}
.cb-face.is-sleepy .cb-eye b{top:10%}
@media (prefers-reduced-motion:reduce){.cb-in{transform:none}}
/* price pages, depth instead of lines: MySorty's price sits in a recessed well instead of above a
   hairline; TKB Monitor's "Was zählt als Gerät?" becomes a raised panel with its device icon, the example sum as quiet tiles */
html body .pricing-card ul:not(#q){border-top:0 !important;padding-top:0 !important;margin-top:18px !important}
html body .pricing-card p[id^="price-"]:not(#q){margin:12px 0 0 !important;padding:12px 14px !important;border-radius:12px;background:rgba(0,0,0,.2);box-shadow:inset 0 1px 2px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.04)}
html body .tkbm .tkbm-count:not(#q){display:grid !important;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start;padding:clamp(24px,3vw,34px) !important;border-radius:20px !important;background:linear-gradient(180deg,rgba(44,48,52,.66),rgba(31,34,37,.6)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 40px 80px -46px rgba(0,0,0,.95) !important}
html body .tkbm .tkbm-count .tkbm-count-icon:not(#q){display:grid !important;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(67,194,91,.1);box-shadow:inset 0 0 0 1px rgba(143,227,157,.22);color:var(--acc-hi)}
html body .tkbm .tkbm-count .tkbm-count-icon svg{width:26px;height:26px}
html body .tkbm .tkbm-sum:not(#q){display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
html body .tkbm .tkbm-sum span:not(#q){padding:7px 12px !important;border-radius:8px !important;background:rgba(255,255,255,.05) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;color:var(--ink)}
html body .tkbm .tkbm-sum .tkbm-sum-total:not(#q){background:rgba(67,194,91,.14) !important;color:var(--acc-hi);font-weight:600}
html body .tkbm .tkbm-sum b{color:var(--mute);font-weight:500}
@media (max-width:640px){html body .tkbm .tkbm-count:not(#q){grid-template-columns:minmax(0,1fr)}}
/* the comparison table fits a phone instead of scrolling sideways with two plans out of sight */
@media (max-width:640px){
  html body .tkbm-ctab{min-width:0;table-layout:fixed;font-size:12.5px}
  html body .tkbm-ctab :is(th,td){padding:9px 5px !important;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  html body .tkbm-ctab :is(thead,tbody) th[scope=row],html body .tkbm-ctab thead th:first-child{width:37%;padding-left:12px !important}
  html body .tkbm-ctab thead th{padding:14px 4px 12px !important;font-size:14px}
  html body .tkbm-ctab thead th small{font-size:11px}
  html body .tkbm-ctab .tkbm-ctick{transform:scale(.85)}
}
/* blog article: a picture at the top that is content, not a logo (the sorting animation, the XRechnung/ZUGFeRD table),
   stays a real picture at its own size, as on the live site (the small-mark rule above is for logos only) */
html body .tkb-post>.tkb-post-img:not([alt*="Logo"]){display:block;float:none;width:auto !important;max-width:100% !important;height:auto !important;max-height:520px;margin:6px 0 26px !important;border-radius:12px;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 60px -36px rgba(0,0,0,.9)}
/* MySorty help page: the app's fields as in the app, white with dark text */
html body .tag-demo :is(input,select,textarea,.tag-demo-input,.tag-demo-select):not(#q){background:#fff !important;color:#1b1f1c !important;-webkit-text-fill-color:#1b1f1c;border:1px solid rgba(0,0,0,.14) !important;border-radius:6px !important;opacity:1}
html body .tag-demo :is(input,textarea)::placeholder{color:#6b726d !important}
/* the customer portal preview (login/kundenportal/vorschau/, portal-preview.js): the example-account bar and a short note */
.pv-bar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:200;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px);transform:translateX(-50%);padding:6px;border-radius:14px;background:#1d2023;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 20px 44px -14px rgba(0,0,0,.85);font:500 13.5px/1 var(--f)}
.pv-k{padding:0 8px 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.03em;color:var(--mute)}
.pv-acc{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.pv-acc button{height:36px;padding:0 12px;border:0;border-radius:9px;background:none;color:var(--ink);font:600 13.5px/1 var(--f);cursor:pointer;transition:background-color 212ms}
.pv-acc button:hover{background:rgba(255,255,255,.06)}
.pv-acc button.is-on{background:var(--acc);color:#0b1a10}
.pv-note{position:fixed;left:50%;top:84px;z-index:200;padding:10px 16px;border-radius:10px;background:#1d2023;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 16px 36px -12px rgba(0,0,0,.8);color:var(--ink);font:500 14px/1.3 var(--f);opacity:0;transform:translate(-50%,-8px);transition:opacity 200ms,transform 420ms var(--sp,ease);pointer-events:none}
.pv-note.is-on{opacity:1;transform:translate(-50%,0)}
/* customer portal: all five tabs visible (the business admin's "Benutzer- und Lizenzverwaltung" was cut off at the right
   edge of an 800 px column): a wider column and tighter tabs; a long label wraps rather than hides */
html body #user-profile-container{max-width:960px !important}
html body #user-profile-container .tab-navigation{overflow-x:auto;scrollbar-width:none}
html body #user-profile-container .tab-navigation::-webkit-scrollbar{display:none}
html body #user-profile-container .tab-button{padding:1rem 1.1rem !important;flex:0 1 auto;white-space:normal;text-align:center;line-height:1.25}
@media (max-width:640px){html body #user-profile-container .tab-button{white-space:nowrap;flex:none}}

/* ---------- phones: the rest of the mobile version ---------- */
@media (max-width:640px){
  /* tools: each tool a compact row (icon, name, one line, an arrow) instead of a tall card; the overview and the
     "more tools" list under every tool are about half as long, the whole row stays the link */
  html body a.tkbt-tool:not(#q){display:grid !important;grid-template-columns:44px minmax(0,1fr) 18px;grid-template-areas:"ico h go" "ico p go";column-gap:14px;row-gap:2px;align-items:center;padding:14px 14px 14px 12px !important;min-height:0 !important}
  html body a.tkbt-tool .tkbt-tool-ico:not(#q){grid-area:ico;width:44px !important;height:44px !important;margin:0 !important;border-radius:12px !important}
  html body a.tkbt-tool .tkbt-tool-ico:not(#q) svg{width:22px !important;height:22px !important}
  html body a.tkbt-tool:not(#q) h3{grid-area:h;margin:0 !important;text-decoration:none !important;font-size:16px !important;line-height:1.25 !important}
  html body a.tkbt-tool:not(#q) p{grid-area:p;margin:0 !important;font-size:14px !important;line-height:1.4 !important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  html body a.tkbt-tool .tkbt-tool-go:not(#q){display:block !important;grid-area:go;font-size:0 !important;width:18px;height:18px;padding:0 !important;margin:0 !important;background:none !important;border:0 !important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat;background-color:var(--acc-hi) !important}
  html body .tkbt-tools:not(#q){gap:10px !important}
  /* MySorty help page: its long lists readable on a phone (they were 13 px) */
  html body .timeline .feature-list li:not(#q){font-size:15px !important;line-height:1.5 !important;padding:6px 0 !important}
  html body .timeline .card :is(p,.highlight-box):not(#q){font-size:15px !important;line-height:1.55 !important}
  /* consent and option boxes: a size a thumb hits */
  html body main input[type=checkbox]:not(#q){width:22px !important;height:22px !important;min-width:22px}
  /* customer portal: the tabs one row you swipe sideways (they stacked into four full-width rows), the open tab scrolled into view */
  html body #user-profile-container .tab-navigation:not(#q){flex-direction:row !important;overflow-x:auto !important;scroll-snap-type:x proximity;gap:2px;margin:0 -8px 1.5rem !important;padding:0 8px}
  html body #user-profile-container .tab-button:not(#q){flex:none !important;width:auto !important;white-space:nowrap !important;scroll-snap-align:start;padding:.8rem .9rem !important;font-size:15px !important;text-align:left}
}
@media (max-width:640px){
  .pv-bar{flex-wrap:nowrap;max-width:calc(100% - 16px);overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .pv-bar::-webkit-scrollbar{display:none}
  .pv-k{display:none}
  .pv-acc{flex-wrap:nowrap}
  .pv-acc button{white-space:nowrap;padding:0 10px;font-size:13px}
}
/* phone menu: product logos beside the product links, the items come in one after another, the IT-help appointment at
   the bottom (kit.js adds the logos and the link); desktop drop-downs keep their own look, the logos hide there */
.kit-nav-logo,.kit-nav-cta{display:none}
@media (max-width:999.95px){
  .tkb-hdr.is-open .tkb-sub a:not(#q){justify-content:flex-start !important;gap:12px}
  .tkb-hdr.is-open .kit-nav-logo{display:block;width:24px;height:24px;object-fit:contain;flex:none}
  .tkb-hdr.is-open .tkb-nav{display:flex !important;flex-direction:column}
  .tkb-hdr.is-open .tkb-nav>ul>li{opacity:0;transform:translateY(10px);animation:kit-menu-in 520ms var(--sp,ease) forwards}
  .tkb-hdr.is-open .tkb-nav>ul>li:nth-child(2){animation-delay:35ms}.tkb-hdr.is-open .tkb-nav>ul>li:nth-child(3){animation-delay:70ms}
  .tkb-hdr.is-open .tkb-nav>ul>li:nth-child(4){animation-delay:105ms}.tkb-hdr.is-open .tkb-nav>ul>li:nth-child(5){animation-delay:140ms}
  .tkb-hdr.is-open .tkb-nav>ul>li:nth-child(6){animation-delay:175ms}.tkb-hdr.is-open .tkb-nav>ul>li:nth-child(7){animation-delay:210ms}
  .tkb-hdr.is-open .tkb-sub li{animation:kit-menu-in 420ms var(--sp,ease) backwards}
  .tkb-hdr.is-open .kit-nav-cta:not(#q){display:flex;align-items:center;gap:14px;margin-top:auto;padding:16px 18px !important;border-radius:16px;font-size:16px !important;justify-content:flex-start !important;text-decoration:none;
    background:linear-gradient(180deg,rgba(44,48,52,.72),rgba(31,34,37,.64));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05);opacity:0;animation:kit-menu-in 560ms var(--sp,ease) 240ms forwards}
  .kit-nav-cta img{width:34px;height:auto}
  .kit-nav-cta span{display:grid;gap:2px}
  .kit-nav-cta b{font-size:16px;color:var(--ink)}
  .kit-nav-cta small{font-size:14px;color:var(--acc-hi)}
}
@keyframes kit-menu-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tkb-hdr.is-open .tkb-nav>ul>li,.tkb-hdr.is-open .kit-nav-cta,.tkb-hdr.is-open .tkb-sub li{animation:none !important;opacity:1 !important;transform:none !important}}
/* (the phone-menu extras never show in the desktop header) */
html body .tkb-hdr:not(.is-open) :is(.kit-nav-cta,.kit-nav-logo):not(#q){display:none !important}
@media (min-width:1000px){html body .tkb-hdr :is(.kit-nav-cta,.kit-nav-logo):not(#q){display:none !important}}
/* TKB Monitor prices, "In jedem Paket enthalten": the page's own list as a grid in a raised panel */
html body .tkbm .tkbm-incl:not(#q){padding:clamp(24px,3vw,36px) !important;border-radius:20px !important;background:linear-gradient(180deg,rgba(44,48,52,.66),rgba(31,34,37,.6)) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.05),0 40px 80px -46px rgba(0,0,0,.95) !important}
html body .tkbm .tkbm-incl h2:not(#q){margin:0 0 20px !important}
html body .tkbm .tkbm-incl ul:not(#q){display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;margin:0 !important;padding:0 !important;list-style:none}
html body .tkbm .tkbm-incl li:not(#q){display:flex;align-items:flex-start;gap:10px;margin:0 !important;padding:0 !important;color:var(--ink);font-size:15px;line-height:1.45}
html body .tkbm .tkbm-incl .tkbm-check:not(#q){display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:-1px;border-radius:7px;background:rgba(67,194,91,.14);color:var(--acc-hi)}
html body .tkbm .tkbm-incl .tkbm-check svg{width:13px;height:13px}
@media (max-width:999px){html body .tkbm .tkbm-incl ul:not(#q){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){html body .tkbm .tkbm-incl ul:not(#q){grid-template-columns:minmax(0,1fr);gap:10px}html body .tkbm .tkbm-incl li:not(#q){font-size:15px}}
/* MySorty prices: the payment methods tidy (phones: five logos a row, two even rows, the names stay for
   screen readers), the "pay by invoice" note centred under them; on phones the invoice / test boxes and the forms'
   send buttons centred in their card */
html body .payment-methods-section:not(#q) :is(h2,p){text-align:center !important;margin-left:auto !important;margin-right:auto !important}
html body .payment-methods-section:not(#q)>p{margin-top:18px !important;font-size:14.5px !important}
html body .payment-methods-section:not(#q)>p a{font-size:15px}
@media (max-width:640px){
  html body .payment-methods-grid:not(#q){grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:8px !important}
  html body .payment-method-item:not(#q){min-width:0 !important;width:auto !important;padding:0 !important;background:none !important;box-shadow:none !important;border:0 !important;align-items:stretch !important}
  html body .payment-method-item .payment-logo:not(#q){width:100% !important;height:36px !important;padding:5px 6px !important;box-sizing:border-box !important}
  html body .payment-method-item .payment-text:not(#q){position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html body .mys-demo-wrapper .mys-demo-box:not(#q) :is(h2,p){text-align:center !important}
  html body .mys-demo-wrapper .mys-demo-box:not(#q) a.mys-demo-button{display:flex !important;width:100% !important;box-sizing:border-box !important;justify-content:center;margin:0 auto !important}
  html body .tkb-form button[type=submit]:not(#q){width:100% !important;box-sizing:border-box !important;justify-content:center}
  html body .pg-guide-tx .pg-link:not(#q){display:flex;justify-content:center;width:100%;box-sizing:border-box}
}
/* phones: a card's lone or wrapped buttons fill its width instead of
   hanging off to the left; the tools' action rows share the row evenly */
@media (max-width:640px){
  html body .pg-prod-acts:not(#q){flex-direction:column !important;align-items:stretch !important}
  html body .pg-prod-acts:not(#q)>a{width:100% !important;box-sizing:border-box !important;justify-content:center;text-align:center}
  html body .tkbt-cta:not(#q){flex-direction:column !important;align-items:stretch !important}
  html body .tkbt-cta:not(#q)>a.tkbt-btn{width:100% !important;justify-content:center}
  html body .tkbt-actions:not(#q){flex-wrap:wrap !important}
  html body .tkbt-actions:not(#q)>.tkbt-btn{flex:1 1 0 !important;min-width:max-content;justify-content:center}
  html body .form-section:not(#q) .btn.btn-primary{width:100% !important;box-sizing:border-box !important;justify-content:center}
}
/* the small note under an e-mail button ("Wir melden uns …", "Antwort meist …") gets room from the button */
html body .mys-demo-box .mys-demo-note:not(#q),html body .tkbm .tkbm-order-note:not(#q){margin-top:14px !important;line-height:1.5 !important}
/* the portal's tab row on phones: its ends fade where more tabs wait (kit.js sets kit-more-l / kit-more-r), no text
   gets selected while dragging it with a mouse */
@media (max-width:640px){
  html body #user-profile-container .tab-navigation:not(#q){user-select:none;-webkit-user-select:none;cursor:grab;scrollbar-width:none;scroll-snap-type:none !important}
  html body #user-profile-container .tab-navigation.kit-more-r:not(#q){-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  html body #user-profile-container .tab-navigation.kit-more-l:not(#q){-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 18%)}
  html body #user-profile-container .tab-navigation.kit-more-l.kit-more-r:not(#q){-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
}