/* ts3musicbot.net v2 – inner pages. Loaded on every v2 page except home (and on login.php).
   1. inner page components (.p-*) and small product visuals
   2. welcome · 3. hoster list · 4. news · 5. contact
   6. legacy bridge: unchanged legacy bodies (sites/<mode>/<site>.php) inside
      <main class="v2-legacy v2-legacy-<mode>"> – every rule is scoped under .v2-legacy */

/* =================== 1. inner page components =================== */
.v2-page{display:block}
.p-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(56px,7.5vw,104px) clamp(36px,4.5vw,64px)}
.p-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(46% 80% at 50% 0%,var(--a30),transparent 72%),
  radial-gradient(28% 50% at 78% 18%,var(--a10),transparent 70%),
  radial-gradient(color-mix(in srgb,var(--muted) 16%,transparent) 1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(#000 35%,transparent);mask-image:linear-gradient(#000 35%,transparent)}
.p-hero .stack{gap:18px}
.p-hero .lead{margin-inline:auto;text-wrap:balance}
.p-title{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:1.02;font-size:clamp(36px,5.2vw,64px);max-width:24ch;margin-inline:auto}
.p-sec{display:grid;gap:clamp(36px,4.5vw,56px);padding-bottom:clamp(80px,9vw,128px)}
.p-sec>*{min-width:0}
.p-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 24px;flex-wrap:wrap;margin-top:clamp(8px,2vw,24px)}
.p-head .stack{gap:10px}
.p-head+*{margin-top:calc(-1 * clamp(14px,2.2vw,28px))}
.p-h2{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.08;font-size:clamp(26px,3vw,38px)}
.p-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:color-mix(in srgb,var(--text) 88%,transparent)}
.p-checks-row{display:flex;flex-wrap:wrap;gap:10px 22px}
.v2-page .badge svg{flex-shrink:0}
.v2-page button.btn{font-weight:600;font-size:15px;line-height:1.2}
.v2-page button.btn:disabled{cursor:progress;opacity:.75;transform:none}
.v2-page .btn-sm{min-height:40px}

/* mini product visuals: hosted bot window, terminal */
.mini-win,.mini-term{width:100%;max-width:400px;border-radius:16px;background:color-mix(in srgb,var(--side) 94%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px var(--a10),0 0 60px var(--a18);overflow:hidden;text-align:start}
.mini-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--line)}
.mini-bar i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--muted) 35%,transparent);flex-shrink:0}
.mini-bar span{flex:1;min-width:0;margin-inline-start:8px;padding:3px 10px;border-radius:7px;background:color-mix(in srgb,var(--text) 5%,transparent);font:11.5px/1.5 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-bot{display:flex;align-items:center;gap:14px;padding:18px 18px 14px}
.mini-cover{width:56px;height:56px;border-radius:12px;flex-shrink:0;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.45),0 0 20px var(--a30)}
.mini-meta{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.mini-meta b{font-size:15px;letter-spacing:-.01em}
.mini-meta small{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ok-soft)}
.eqbars{display:flex;align-items:flex-end;gap:3px;height:28px;flex-shrink:0}
.eqbars i{width:4px;height:100%;border-radius:2px;background:linear-gradient(var(--accent-soft),var(--accent));box-shadow:0 0 8px var(--a45);transform-origin:50% 100%;transform:scaleY(.35);animation:p-eq 1.1s ease-in-out infinite}
.eqbars i:nth-child(2){animation-duration:.9s;animation-delay:-.3s}
.eqbars i:nth-child(3){animation-duration:1.3s;animation-delay:-.6s}
.eqbars i:nth-child(4){animation-duration:1s;animation-delay:-.2s}
.eqbars i:nth-child(5){animation-duration:1.2s;animation-delay:-.8s}
@keyframes p-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.mini-track{display:flex;flex-direction:column;gap:8px;padding:0 18px 18px;font-size:12.5px;color:var(--muted)}
.mini-progress{display:block;height:4px;border-radius:2px;background:color-mix(in srgb,var(--card) 90%,#000);overflow:hidden}
.mini-progress span{display:block;height:100%;border-radius:2px;background:var(--accent);box-shadow:0 0 8px var(--a60);transform-origin:0 50%;animation:p-progress 18s linear infinite}
@keyframes p-progress{from{transform:scaleX(.18)}to{transform:scaleX(1)}}
.mini-lines{display:flex;flex-direction:column;gap:7px;padding:18px 18px 22px;background:#04060b;font:12.5px/1.5 var(--mono);color:color-mix(in srgb,var(--text) 86%,transparent)}
.mini-lines span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-lines b{color:var(--accent-soft);font-weight:700}
.mini-lines .hl{color:var(--accent-softer)}
.caret{display:inline-block;width:8px;height:15px;vertical-align:-3px;background:var(--accent-soft);animation:p-blink 1.1s steps(1) infinite}
@keyframes p-blink{50%{opacity:0}}

/* brand icon tiles (news channels, contact cards) */
.nw-ic{--c:var(--accent);width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex-shrink:0;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 88%,#fff),color-mix(in srgb,var(--c) 80%,#000));box-shadow:0 0 20px color-mix(in srgb,var(--c) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.nw-ic-discord,.nw-ch-discord{--c:#5865f2}
.nw-ic-facebook,.nw-ch-facebook{--c:#1877f2}
.nw-ic-youtube,.nw-ch-youtube{--c:#ff0033}
.nw-ic-x,.nw-ch-x{--c:#334155}
.nw-ic-forum,.nw-ch-forum,.nw-ic-ticket{--c:var(--accent)}

/* change type chips (news) – same look as the legacy changelog badges below */
.chg,.v2-legacy .update-new,.v2-legacy .update-fix,.v2-legacy .update-enhanced,.v2-legacy .update-removed{--c:#4ade80;display:inline-flex;align-items:center;justify-content:center;min-width:84px;padding:0 8px;border-radius:6px;background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 36%,transparent);color:color-mix(in srgb,var(--c) 62%,#fff);font:700 10.5px/19px var(--body);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;vertical-align:1px}
.chg-fix,.v2-legacy .update-fix{--c:#38bdf8}
.chg-enhanced,.v2-legacy .update-enhanced{--c:#a78bfa}
.chg-removed,.v2-legacy .update-removed{--c:#fb7185}

/* =================== 2. welcome =================== */
.wl-paths{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-rows:auto auto auto auto;column-gap:18px;align-items:stretch}
.wl-path{position:relative;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s}
.wl-path:first-child{grid-column:1}
.wl-path:last-child{grid-column:3}
.wl-path:hover{border-color:var(--line-hover);box-shadow:0 0 0 1px var(--a18),0 30px 80px rgba(0,0,0,.35);transform:translateY(-2px)}
.wl-visual{position:relative;display:grid;place-items:center;min-height:250px;padding:36px 28px;border-bottom:1px solid var(--line);background:
  radial-gradient(70% 90% at 50% 110%,var(--a30),transparent 70%),
  radial-gradient(color-mix(in srgb,var(--muted) 13%,transparent) 1px,transparent 1.2px) 0 0/18px 18px,
  color-mix(in srgb,var(--side) 70%,transparent)}
.wl-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:30px 30px 0}
.wl-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft)}
.wl-title{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1.05;font-size:clamp(28px,3vw,38px)}
.wl-body>p.muted{font-size:16px;max-width:48ch}
.wl-actions{display:flex;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:12px;padding:26px 30px 0}
.wl-actions .btn-lg{padding:0 20px}
.v2-body .wl-login{display:inline-block;padding-block:11px;padding-inline:4px 0;line-height:1.5;font-size:14.5px;color:var(--muted)}
.v2-body .wl-login b{color:var(--accent-soft);margin-inline-start:4px}
.v2-body .wl-login:hover b{color:var(--accent-softer)}
.wl-foot{align-self:end;padding:18px 30px 28px;font-size:13px}
.wl-or{grid-column:2;grid-row:1/span 4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--dim);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.wl-or::before,.wl-or::after{content:"";flex:1;width:1px;background:linear-gradient(transparent,var(--line) 30%,var(--line) 70%,transparent)}
.wl-or span{display:grid;place-items:center;min-width:44px;height:44px;padding:0 12px;border-radius:9999px;border:1px solid var(--line);background:var(--glass-strong)}
.wl-same{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding:18px 20px;border-radius:16px;background:var(--glass-strong);border:1px solid var(--line);font-size:15px}
.wl-same p{flex:1;min-width:min(100%,260px)}

/* =================== 3. hoster list =================== */
.hl-own{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(26px,4vw,52px);border-color:var(--a45);background:radial-gradient(70% 120% at 100% 50%,var(--a18),transparent 70%),linear-gradient(135deg,var(--a18),color-mix(in srgb,var(--accent) 4%,transparent) 60%),var(--glass)}
.hl-own-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hl-own-title{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;font-size:clamp(32px,3.8vw,50px)}
.hl-own-text{font-size:16.5px;max-width:52ch;color:color-mix(in srgb,var(--text) 82%,transparent)}
.hl-own .cta-row{padding-top:6px}
.hl-own-visual{display:grid;place-items:center}
.hl-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:18px}
.hl-card{position:relative;display:flex;flex-direction:column;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s}
.hl-card:hover{border-color:var(--line-hover);transform:translateY(-3px);box-shadow:0 24px 60px rgba(0,0,0,.4),0 0 0 1px var(--a18)}
.hl-shot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:
  radial-gradient(110% 90% at 0% 0%,hsl(var(--hue,220) 75% 58% / .6),transparent 62%),
  radial-gradient(90% 90% at 100% 100%,var(--a45),transparent 65%),
  radial-gradient(color-mix(in srgb,#fff 10%,transparent) 1px,transparent 1.2px) 0 0/16px 16px,
  var(--bg2)}
.hl-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:0;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.hl-card:hover .hl-shot img{transform:scale(1.035)}
.hl-shot::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(transparent,rgba(9,13,22,.5));pointer-events:none}
.hl-initial{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(56px,6vw,80px);letter-spacing:-.04em;color:rgba(255,255,255,.92);text-shadow:0 10px 40px rgba(0,0,0,.35)}
.hl-body{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px 22px 22px}
/* a long name keeps its line: the verified badge moves below it instead */
.hl-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0}
.hl-name h3{flex:1 1 auto;min-width:0;font-size:19px;font-weight:700;letter-spacing:-.015em;overflow-wrap:anywhere}
.v2-body .hl-name h3 a{color:var(--text)}
.v2-body .hl-name h3 a:hover{color:var(--accent-softer)}
.hl-flag,.hl-flags img{width:20px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.14);flex-shrink:0}
.hl-verified{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;padding:3px 9px;border-radius:9999px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.32);color:var(--ok-soft);font-size:11.5px;font-weight:700}
.hl-host{margin-top:-6px;font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
.hl-text{font-size:14.5px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:7;line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.hl-locs{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 12px;border-radius:10px;background:var(--glass-strong);border:1px solid var(--line)}
.hl-locs .label{display:inline-flex;align-items:center;gap:6px}
.hl-flags{display:flex;flex-wrap:wrap;gap:7px}
.hl-foot{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.hl-visit{width:100%}
.hl-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:52px 24px;text-align:center}
.hl-empty .btn{margin-top:6px}
.hl-join{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;padding:24px 28px;background:var(--glass-strong)}
.hl-join .stack{gap:8px;flex:1;min-width:min(100%,280px)}
.hl-join p{max-width:78ch;color:color-mix(in srgb,var(--text) 82%,transparent);font-size:15px}

/* =================== 4. news =================== */
.nw-release{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(26px,4vw,48px);border-color:var(--a30);background:radial-gradient(80% 130% at 0% 0%,var(--a18),transparent 62%),var(--glass)}
.nw-release-main{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.nw-version{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.02;font-size:clamp(32px,4vw,52px)}
.nw-date{font-size:15.5px;font-weight:600;color:color-mix(in srgb,var(--text) 82%,transparent)}
.nw-release-main .cta-row{padding-top:6px}
.nw-changes{list-style:none;margin:0;padding:20px;display:flex;flex-direction:column;gap:14px;border-radius:16px;background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);font-size:14.5px;line-height:1.55;color:color-mix(in srgb,var(--text) 84%,transparent)}
.nw-changes li{display:flex;align-items:flex-start;gap:12px}
.nw-changes .chg{margin-top:1px;flex-shrink:0}
.nw-channels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.nw-channels li{display:flex}
.nw-channels li:first-child{grid-column:span 2}
.v2-body .nw-ch{position:relative;display:flex;align-items:flex-start;gap:16px;width:100%;padding:24px;color:var(--text);transition:border-color .25s,box-shadow .25s,transform .25s}
.v2-body .nw-ch:hover{color:var(--text);transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 30px color-mix(in srgb,var(--c) 18%,transparent)}
.nw-ch .nw-ic{--c:inherit}
.nw-ch-body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.nw-ch-body b{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:17.5px;letter-spacing:-.01em}
.nw-ch-body .muted{font-size:14.5px;line-height:1.55}
.nw-ch-body .cmd{font-size:12px;padding:3px 8px;font-weight:500}
.nw-go{color:var(--dim);transition:color .2s,transform .2s}
.nw-ch:hover .nw-go{color:var(--text);transform:translate(2px,-2px)}
.nw-ch-discord{background:radial-gradient(70% 140% at 100% 0%,rgba(88,101,242,.26),transparent 62%),var(--glass);border-color:rgba(88,101,242,.32)}
.nw-ch-discord .nw-ic{width:56px;height:56px;border-radius:15px}
.nw-ch-discord{overflow:hidden}
.nw-watermark{position:absolute;inset-inline-end:-18px;bottom:-34px;color:rgba(88,101,242,.16);pointer-events:none;transform:rotate(-12deg)}
.nw-watermark svg{display:block;width:150px;height:150px}
.nw-ch-discord .nw-ch-body,.nw-ch-discord .nw-go{position:relative}
.nw-fb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(24px,3.6vw,44px)}
.nw-fb-info{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.nw-fb-title{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.1;font-size:clamp(24px,2.6vw,32px)}
.nw-privacy{display:flex;align-items:flex-start;gap:10px;max-width:54ch;font-size:13px;line-height:1.55;color:var(--dim)}
.nw-privacy svg{flex-shrink:0;margin-top:1px;color:var(--muted)}
.nw-fb-frame{position:relative;min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;border-radius:16px;border:1px dashed color-mix(in srgb,var(--text) 16%,transparent);background:color-mix(in srgb,var(--bg) 55%,transparent);overflow:hidden}
.nw-fb-frame.is-live{padding:0;border-style:solid;border-color:var(--line);background:color-mix(in srgb,var(--bg) 40%,transparent)}
.nw-fb-frame .fb-page{width:100%;max-width:500px}
.nw-fb-embed{width:100%;max-width:500px}
.nw-fb-frame:not(.is-live) .nw-fb-embed{position:absolute;inset:20px;visibility:hidden;pointer-events:none}
.nw-fb-embed .fb-xfbml-parse-ignore{display:none}
.nw-fb-fail{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:340px;text-align:center;font-size:14.5px;line-height:1.55}
.nw-fb-fail[hidden]{display:none}
.nw-skel{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px}
.nw-skel i{display:block;border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--text) 6%,transparent),color-mix(in srgb,var(--text) 11%,transparent),color-mix(in srgb,var(--text) 6%,transparent)) 0 0/200% 100%;animation:p-shimmer 2.4s ease-in-out infinite}
.nw-skel-head{display:flex;align-items:center;gap:12px;margin-top:6px}
.nw-skel-head span{display:flex;flex-direction:column;gap:7px;flex:1}
.nw-skel-head span i{height:10px;width:46%}
.nw-skel-head span i+i{width:28%}
i.nw-skel-av{width:40px;height:40px;border-radius:50%;flex-shrink:0}
i.nw-skel-line{height:11px}
i.nw-skel-line.short{width:64%}
i.nw-skel-img{height:150px;border-radius:12px}
@keyframes p-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* =================== 5. contact =================== */
.ct-chat{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(26px,4vw,52px);border-color:var(--a45);background:radial-gradient(70% 120% at 100% 50%,var(--a18),transparent 70%),linear-gradient(135deg,var(--a18),color-mix(in srgb,var(--accent) 4%,transparent) 60%),var(--glass)}
.ct-chat-body{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ct-chat-title{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1;font-size:clamp(32px,3.8vw,50px)}
.ct-chat-body .muted{font-size:16.5px;max-width:46ch}
.ct-chat-body .cta-row{padding-top:6px}
.ct-chat-visual{justify-self:center;width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;background:color-mix(in srgb,var(--side) 92%,transparent);border:1px solid color-mix(in srgb,var(--text) 10%,transparent);box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 50px var(--a18);font-size:14px;line-height:1.45}
.ct-bubble{max-width:86%;display:flex;flex-direction:column;gap:3px;padding:10px 14px;border-radius:14px}
.ct-bubble b{font-size:12px;color:var(--accent-soft)}
.ct-bubble-in{align-self:flex-start;background:var(--glass);border:1px solid var(--line);border-end-start-radius:4px}
.ct-bubble-out{align-self:flex-end;background:var(--grad);color:var(--on-accent);border-end-end-radius:4px;box-shadow:0 0 18px var(--a30)}
.ct-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:14px;border-end-start-radius:4px;background:var(--glass);border:1px solid var(--line)}
.ct-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:p-typing 1.2s ease-in-out infinite}
.ct-typing i:nth-child(2){animation-delay:.15s}
.ct-typing i:nth-child(3){animation-delay:.3s}
@keyframes p-typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.ct-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ct-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:26px;transition:border-color .25s,box-shadow .25s,transform .25s}
.ct-card:hover{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.ct-card .muted{font-size:15px}
.v2-body .ct-link{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:auto;font-weight:600}
.ct-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.ct-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ct-note{align-items:center;font-size:14.5px}
.ct-note p{flex:1;min-width:0}
.ct-note .btn{flex-shrink:0}

/* =================== 6. legacy bridge =================== */
.v2-legacy{position:relative;isolation:isolate;min-height:56vh;padding-bottom:clamp(80px,9vw,128px);font-size:16px;line-height:1.7;color:color-mix(in srgb,var(--text) 84%,transparent)}
.v2-legacy::before{content:"";position:absolute;inset:0 0 auto;height:min(560px,90vh);z-index:-1;pointer-events:none;background:
  radial-gradient(46% 90% at 50% 0%,var(--a30),transparent 72%),
  radial-gradient(color-mix(in srgb,var(--muted) 16%,transparent) 1px,transparent 1.3px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(#000 25%,transparent);mask-image:linear-gradient(#000 25%,transparent)}
.v2-legacy .wrapper{width:100%;max-width:var(--wrap-max);margin-inline:auto;padding:clamp(56px,7vw,96px) var(--gutter) 0}
.v2-legacy .transparent-wrapper{display:none}
.v2-legacy .main{max-width:860px;margin-inline:auto;overflow-wrap:break-word}
.v2-legacy .main::after{content:"";display:block;clear:both}
.v2-legacy .clear{clear:both}
/* right-to-left pages: the floats are mirrored (one-half columns start on the right), so are
   the legacy clearing divs */
.v2-legacy [style*="clear: left"]:dir(rtl){clear:right!important}
.v2-legacy [style*="clear: right"]:dir(rtl){clear:left!important}
/* a <br> right after a block only adds an empty line */
.v2-legacy :is(.main,.impressum)>:is(h1,h2,h3,h4,p,hr,ul,ol,div,table,pre)+br,.v2-legacy :is(.main,.impressum)>:is(h1,h2,h3,h4,p,hr,ul,ol,div,table,pre)+br+br{display:none}
.v2-legacy .one-half{float:left;float:inline-start;width:calc(50% - 14px);margin-inline-end:28px}
.v2-legacy .one-half.last{margin-inline-end:0}

/* type */
.v2-legacy h1{margin:0 0 28px;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.04;font-size:clamp(34px,4.6vw,56px);color:var(--text)}
.v2-legacy h2{margin:44px 0 14px;font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.025em;color:var(--text)}
.v2-legacy h3{margin:36px 0 12px;font-size:clamp(19px,1.8vw,22px);font-weight:700;letter-spacing:-.015em;color:var(--text)}
.v2-legacy h4{margin:32px 0 10px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.v2-legacy p{margin:0 0 14px}
.v2-legacy b,.v2-legacy strong{font-weight:700;color:var(--text)}
.v2-legacy i,.v2-legacy em{color:inherit}
.v2-legacy a:not(.button):not(.ui-tabs-anchor){color:var(--accent-soft);text-decoration:underline;text-decoration-color:var(--a45);text-decoration-thickness:1px;text-underline-offset:3px}
.v2-legacy a:not(.button):not(.ui-tabs-anchor):hover{color:var(--accent-softer);text-decoration-color:currentColor}
.v2-legacy a:not([href]){color:inherit!important;text-decoration:none!important}
.v2-legacy ul,.v2-legacy ol{margin:0 0 14px;padding-inline-start:22px}
.v2-legacy li{margin:4px 0}
.v2-legacy li::marker{color:var(--accent-soft)}
.v2-legacy ul[style*="list-style"]{padding-inline-start:0}
.v2-legacy hr{height:1px;margin:40px 0;border:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 14%,transparent) 15%,color-mix(in srgb,var(--text) 14%,transparent) 85%,transparent)}
.v2-legacy img{max-width:100%;height:auto;vertical-align:middle}
.v2-legacy img[style*="border"]{border:1px solid color-mix(in srgb,var(--text) 12%,transparent)!important;border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.v2-legacy pre{max-width:100%;margin:10px 0 16px;padding:14px 16px;overflow-x:auto;border-radius:12px;background:#04060b;border:1px solid var(--line);font:13px/1.6 var(--mono);color:var(--accent-softer);white-space:pre}
.v2-legacy [style*="color: green"],.v2-legacy span.green,.v2-legacy b.green{color:var(--ok-soft)!important}
.v2-legacy [style*="color: red"],.v2-legacy span.red,.v2-legacy b.red{color:#fb7185!important}
.v2-legacy [style*="color: orange"]{color:#fbbf24!important}
.v2-legacy [style*="width:950px"],.v2-legacy [style*="width: 950px"]{width:auto!important;max-width:100%}

/* tables */
.v2-legacy table{width:100%;margin:16px 0;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15px}
.v2-legacy th,.v2-legacy td{padding:10px 14px;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.v2-legacy th{background:var(--glass-strong);color:var(--text);font-weight:700}
.v2-legacy tr:last-child>td{border-bottom:0}

/* alerts */
.v2-legacy .alert{--c:var(--accent);margin:16px 0;padding:14px 18px;border-radius:12px;background:color-mix(in srgb,var(--c) 9%,var(--bg2));border:1px solid color-mix(in srgb,var(--c) 30%,transparent);box-shadow:inset 3px 0 0 var(--c);font-size:15px;line-height:1.65;color:color-mix(in srgb,var(--text) 88%,transparent)}
.v2-legacy .alert.green{--c:#22c55e}
.v2-legacy .alert.red{--c:#f43f5e}
.v2-legacy .alert.blue{--c:#3b82f6}
.v2-legacy .alert.yellow{--c:#f59e0b}
.v2-legacy .alert b{color:color-mix(in srgb,var(--c) 35%,#fff)}
.v2-legacy .alert:dir(rtl){box-shadow:inset -3px 0 0 var(--c)}

/* buttons (legacy .button.blue/.green/.black, <button>) */
.v2-legacy a.button,.v2-legacy button,.v2-legacy input[type="submit"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;margin:4px 0;padding:0 18px;border-radius:11px;border:1px solid transparent;background:var(--grad);color:var(--on-accent)!important;font:600 14.5px/1.2 var(--body);text-decoration:none!important;text-align:center;vertical-align:middle;box-shadow:0 0 20px var(--a30),inset 0 1px 0 rgba(255,255,255,.2);cursor:pointer;transition:transform .15s,box-shadow .2s,border-color .2s}
.v2-legacy a.button:hover,.v2-legacy button:hover,.v2-legacy input[type="submit"]:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--a45),inset 0 1px 0 rgba(255,255,255,.25)}
.v2-legacy a.button.green,.v2-legacy button.green{background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 0 20px rgba(34,197,94,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.v2-legacy a.button.red,.v2-legacy button.red{background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:0 0 20px rgba(244,63,94,.28),inset 0 1px 0 rgba(255,255,255,.2)}
.v2-legacy a.button.black,.v2-legacy a.button.grey,.v2-legacy a.button.gray,.v2-legacy a.button.white{background:var(--glass);border-color:color-mix(in srgb,var(--text) 14%,transparent);color:var(--text)!important;box-shadow:none}
.v2-legacy p a.button,.v2-legacy .alert a.button{min-height:32px;margin:2px 4px;padding:0 12px;border-radius:9px;font-size:13.5px}

/* forms */
.v2-legacy label{display:block;margin:12px 0 0;font-size:13.5px;font-weight:600;color:color-mix(in srgb,var(--text) 86%,transparent)}
.v2-legacy input[type="text"],.v2-legacy input[type="password"],.v2-legacy input[type="email"],.v2-legacy select,.v2-legacy textarea{display:block;width:100%;min-height:46px;margin:6px 0 0;padding:10px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--text) 14%,transparent);background:color-mix(in srgb,var(--bg) 70%,var(--bg2));color:var(--text);font:400 15px/1.4 var(--body);transition:border-color .15s,box-shadow .15s}
.v2-legacy input:focus,.v2-legacy select:focus,.v2-legacy textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--a30)}
.v2-legacy .accountbox{position:relative;max-width:460px;margin:0 auto;padding:clamp(22px,3.2vw,34px)!important;border-radius:18px;background:var(--glass);border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px var(--a10);text-align:start}
.v2-legacy .accountbox:not(:has(*)){display:none}
.v2-legacy .accountbox .row{display:block!important;margin:0 0 14px}
.v2-legacy .accountbox .row:last-child{margin-bottom:0}
.v2-legacy .accountbox .row>label:first-child{margin-top:0}
.v2-legacy .accountbox .row br{display:none}
.v2-legacy .accountbox .column{width:100%!important;max-width:none!important;margin:0!important;font-size:13.5px;font-weight:600;color:color-mix(in srgb,var(--text) 86%,transparent)}
.v2-legacy .accountbox form{font-size:13.5px;font-weight:600;color:color-mix(in srgb,var(--text) 86%,transparent)}
.v2-legacy .accountbox form>br{display:none}
.v2-legacy .accountbox form>input[type="password"]{margin-bottom:14px}
.v2-legacy .accountbox .alert{margin:10px 0 0;padding:10px 14px;font-size:14px;font-weight:500}
.v2-legacy .accountbox>.alert:first-child{margin-top:0}
.v2-legacy .accountbox .button,.v2-legacy .accountbox button{display:flex;width:100%;min-height:50px;margin:10px 0 0!important;font-size:15.5px}
.v2-legacy #captcha{display:block;width:auto;max-width:100%;margin:8px 0 6px;padding:8px;border-radius:10px;background:#f8fafc;box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(0,0,0,.3)}
.v2-legacy #captcha+br+a,.v2-legacy #captcha+a{display:inline-flex;align-items:center;min-height:40px;font-size:13px;font-weight:600;text-decoration:none!important}
.v2-legacy-account .main:has(.accountbox){max-width:520px}
.v2-legacy-account .main:has(.accountbox)>h1{text-align:center}

/* legal + prose pages: imprint, terms, privacy */
.v2-legacy-company .main,.v2-legacy-account .main{max-width:72ch}
.v2-legacy-company .main,.v2-legacy-account .main{font-size:16.5px}
.v2-legacy-account .main>div>h4:first-child{margin:0 0 28px;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:1.04;font-size:clamp(34px,4.6vw,56px)}
.v2-legacy-account .main>div>h4:not(:first-child){margin:48px 0 14px;padding-top:28px;border-top:1px solid var(--line);font-size:clamp(20px,2vw,24px);font-weight:800;letter-spacing:-.02em}
.v2-legacy-account .main li>h4{margin:26px 0 6px;font-size:17px;color:var(--accent-softer)}
.v2-legacy .impressum h2{padding-top:26px;border-top:1px solid var(--line)}
.v2-legacy .impressum p[style*="float"]{margin:0 12px 0 0!important;color:var(--muted)}
.v2-legacy .impressum p[style*="float"]:has(+img){line-height:43px}
.v2-legacy img[src*="email.gif"]{padding:6px 10px;border-radius:8px;background:#f8fafc;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.3)}

/* link us: banner + embed code in two columns */
.v2-legacy-company .main:has(.linkusCode){max-width:1080px}
.v2-legacy .impressum:has(.linkusCode){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px;align-items:stretch}
.v2-legacy .impressum:has(.linkusCode)>h1{grid-column:1/-1}
.v2-legacy .impressum:has(.linkusCode)>img,.v2-legacy .impressum:has(.linkusCode)>div{width:100%;height:170px;padding:22px;border-radius:14px;border:1px solid var(--line);object-fit:contain;background:
  linear-gradient(45deg,color-mix(in srgb,var(--text) 4%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--text) 4%,transparent) 75%) 0 0/20px 20px,
  linear-gradient(45deg,color-mix(in srgb,var(--text) 4%,transparent) 25%,transparent 25%,transparent 75%,color-mix(in srgb,var(--text) 4%,transparent) 75%) 10px 10px/20px 20px,
  var(--bg2)}
.v2-legacy .impressum:has(.linkusCode)>div{display:grid;place-items:center}
.v2-legacy .impressum:has(.linkusCode)>img[src*="logo.gif"]{background:#e2e8f0}
.v2-legacy .impressum:has(.linkusCode)>div[style*="lightgrey"]{background-color:var(--bg2)!important}
.v2-legacy .impressum:has(.linkusCode)>div img{max-height:100%;object-fit:contain}
.v2-legacy textarea.linkusCode{height:170px;margin:0;padding:14px 16px;resize:none;border-radius:14px;background:#04060b;border-color:var(--line);font:12.5px/1.65 var(--mono);color:var(--accent-softer);cursor:pointer}

/* changelog (versions) */
.v2-legacy-versions .wrapper{max-width:1000px}
.v2-legacy-versions #tabs{max-width:none;display:flex;justify-content:center;margin:0 0 clamp(32px,4vw,48px)}
.v2-legacy-versions .tabs-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:0;padding:5px;list-style:none;border-radius:16px;border:1px solid color-mix(in srgb,var(--text) 10%,transparent);background:var(--glass-strong);box-shadow:0 12px 34px rgba(0,0,0,.3)}
.v2-legacy-versions .tabs-nav li{margin:0}
.v2-legacy-versions .tabs-nav a{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:11px;color:var(--muted);font-size:14.5px;font-weight:600;white-space:nowrap;text-decoration:none!important;transition:color .15s,background .15s}
.v2-legacy-versions .tabs-nav a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}
.v2-legacy-versions .tabs-nav .ui-tabs-active a{background:var(--grad);color:var(--on-accent);box-shadow:0 0 18px var(--a45),inset 0 1px 0 rgba(255,255,255,.2)}
/* the legacy markup closes .main early in the old entries, so entries also sit directly in .wrapper */
.v2-legacy-versions .main:not(#tabs),.v2-legacy-versions .wrapper>:not(#tabs){max-width:860px;margin-left:auto;margin-right:auto}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>br{display:none}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>h3{margin:44px auto 18px;font-family:var(--display);font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.03em}
.v2-legacy-versions .main:not(#tabs)>h3:first-child{margin-top:0}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child){position:relative;z-index:0;margin:0 auto;padding:24px 24px 24px 60px;background:linear-gradient(color-mix(in srgb,var(--text) 11%,transparent),color-mix(in srgb,var(--text) 11%,transparent)) 15px 0/2px 100% no-repeat;content-visibility:auto;contain-intrinsic-size:auto 250px}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)::before{content:"";position:absolute;z-index:-1;inset:6px 0 6px 38px;border-radius:14px;background:var(--glass);border:1px solid var(--line)}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)::after{content:"";position:absolute;left:9px;top:29px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid color-mix(in srgb,var(--accent) 70%,var(--muted));box-shadow:0 0 0 4px var(--bg)}
.v2-legacy-versions .main:not(#tabs)>div:nth-child(1 of :has(>b:first-child))::before{border-color:var(--a45);background:linear-gradient(135deg,var(--a18),transparent 60%),var(--glass);box-shadow:0 0 40px var(--a18)}
.v2-legacy-versions .main:not(#tabs)>div:nth-child(1 of :has(>b:first-child))::after{background:var(--accent);border-color:var(--accent-soft);box-shadow:0 0 0 4px var(--bg),0 0 16px var(--accent)}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)>b:first-child,.v2-legacy-versions .main:not(#tabs)>b{display:block;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:16.5px;line-height:1.4;letter-spacing:-.01em;color:var(--text)}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)>p,.v2-legacy-versions .main:not(#tabs)>b+p{margin:0 0 10px;font-size:15px;line-height:1.8;color:color-mix(in srgb,var(--text) 80%,transparent)}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)>p:last-child{margin-bottom:0}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)>p:empty{display:none}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)>.alert{margin:12px 0 4px}
.v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child) img{margin:10px 0}
/* one old entry lost its <div>: its version line and text sit directly in .main */
.v2-legacy-versions .main:not(#tabs)>b{margin:6px 0 0 38px;padding:18px 22px 12px;border:1px solid var(--line);border-radius:14px 14px 0 0;background:var(--glass)}
.v2-legacy-versions .main:not(#tabs)>b+p{margin:0 0 6px 38px;padding:12px 22px 22px;border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;background:var(--glass)}
.v2-legacy-versions .update-new,.v2-legacy-versions .update-fix,.v2-legacy-versions .update-enhanced,.v2-legacy-versions .update-removed{margin-right:10px}
.v2-legacy-versions img[height="300"]{width:auto;height:300px}
.v2-legacy-versions img[height="60"]{width:auto;height:52px;border-radius:10px;box-shadow:none}
.v2-legacy-versions div[style*="margin: 10px 0 0 0"]{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px!important}
.v2-legacy-versions .main:not(#tabs)>a.button{margin:6px 8px 6px 0}

/* video tutorials */
.v2-legacy-videos .main{max-width:1180px}
.v2-legacy-videos .video-tutorials{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px}
.v2-legacy-videos .video-tutorials>h1,.v2-legacy-videos .video-tutorials>h3{grid-column:1/-1;margin-bottom:0}
.v2-legacy-videos .video-tutorials>h3{margin-top:8px}
.v2-legacy-videos a[rel="facebox"]{display:flex;color:inherit;text-decoration:none!important}
.v2-legacy-videos a[rel="facebox"]:has(:target){grid-column:1/-1}
.v2-legacy .tutorial-video{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:14px;background:var(--glass);border:1px solid var(--line);transition:border-color .25s,transform .25s,box-shadow .25s}
.v2-legacy a:hover .tutorial-video{border-color:var(--line-hover);transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.v2-legacy .tutorial-video .preview{position:relative}
.v2-legacy .tutorial-video .preview img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.v2-legacy .tutorial-video .preview::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 6px var(--a18),0 0 30px var(--a60)}
.v2-legacy .tutorial-video .preview::before{content:"";position:absolute;z-index:1;left:50%;top:50%;margin:-9px 0 0 -5px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.v2-legacy .tutorial-video .youtuber-avatar{position:absolute;z-index:2;top:10px;left:10px}
.v2-legacy .tutorial-video .youtuber-avatar img{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.v2-legacy .tutorial-video .flag{position:absolute;z-index:2;top:12px;right:12px;border-radius:2px}
.v2-legacy .tutorial-video .name{padding:14px 16px 0;font-size:12.5px;font-weight:700;color:var(--accent-soft)}
.v2-legacy .tutorial-video .text{padding:4px 16px 16px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--text)}
.v2-legacy .tutorial-video div[id]:target{display:block!important;order:-1}
.v2-legacy .tutorial-video div[id] iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0}
.v2-legacy .tutorial-video:has(:target) :is(.preview,.youtuber-avatar){display:none}

/* =================== right to left (Arabic) ===================
   Logical properties mirror the layout; glows that sit in one corner move to the
   other side. The terminal mock-up keeps dir="ltr" in the markup (shell commands).
   Legacy bodies are English: page.php marks them lang="en" dir="ltr". */
[dir="rtl"] .p-hero::before{background:
  radial-gradient(46% 80% at 50% 0%,var(--a30),transparent 72%),
  radial-gradient(28% 50% at 22% 18%,var(--a10),transparent 70%),
  radial-gradient(color-mix(in srgb,var(--muted) 16%,transparent) 1px,transparent 1.3px) 0 0/22px 22px}
[dir="rtl"] .mini-term{text-align:left}
[dir="rtl"] .hl-host{text-align:end}
[dir="rtl"] .nw-release{background:radial-gradient(80% 130% at 100% 0%,var(--a18),transparent 62%),var(--glass)}
[dir="rtl"] .nw-ch-discord{background:radial-gradient(70% 140% at 0% 0%,rgba(88,101,242,.26),transparent 62%),var(--glass)}
[dir="rtl"] .nw-watermark{transform:rotate(12deg)}
[dir="rtl"] :is(.hl-own,.ct-chat){background:radial-gradient(70% 120% at 0% 50%,var(--a18),transparent 70%),linear-gradient(225deg,var(--a18),color-mix(in srgb,var(--accent) 4%,transparent) 60%),var(--glass)}

/* =================== responsive =================== */
@media (max-width:1100px){
  .hl-own,.ct-chat,.nw-release,.nw-fb{grid-template-columns:minmax(0,1fr)}
  .hl-own-visual{justify-self:start;width:100%}
  .hl-own-visual .mini-win{margin-inline:auto}
  .nw-channels{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .wl-paths{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:14px}
  .wl-path,.wl-path:first-child,.wl-path:last-child{grid-column:auto;grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
  .wl-actions{padding-top:24px}
  .wl-or{grid-column:auto;grid-row:auto;flex-direction:row}
  .wl-or::before,.wl-or::after{width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}
  .ct-grid{grid-template-columns:minmax(0,1fr)}
  .ct-notes{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .p-hero{padding-block:44px 28px}
  .wl-visual{min-height:0;padding:26px 18px}
  .wl-body{padding:24px 20px 0}
  .wl-actions{padding:22px 20px 0}
  .wl-foot{align-self:auto;padding:16px 20px 24px}
  .wl-actions .btn{width:100%}
  .hl-own .cta-row,.ct-chat .cta-row,.nw-fb .cta-row,.nw-release .cta-row{align-self:stretch}
  .hl-own .cta-row .btn,.ct-chat .cta-row .btn,.nw-fb .cta-row .btn,.nw-release .cta-row .btn{width:100%}
  .hl-body{padding:18px 18px 20px}
  .hl-join{padding:20px}
  .hl-join .btn{width:100%}
  .nw-channels{grid-template-columns:minmax(0,1fr)}
  .nw-channels li:first-child{grid-column:auto}
  .v2-body .nw-ch{padding:20px}
  .nw-watermark{display:none}
  .nw-changes{padding:16px}
  .nw-changes li{flex-direction:column;gap:6px}
  .nw-fb-frame{min-height:360px;padding:14px}
  .ct-card{padding:22px}
  .ct-note{flex-wrap:wrap}
  .ct-note .btn{width:100%}
  .v2-legacy{font-size:15.5px}
  .v2-legacy .wrapper{padding-top:40px}
  .v2-legacy .one-half{float:none;width:auto;margin-inline-end:0}
  .v2-legacy .impressum:has(.linkusCode){grid-template-columns:minmax(0,1fr);gap:10px}
  .v2-legacy textarea.linkusCode{height:auto;min-height:120px;margin-bottom:22px}
  .v2-legacy .impressum:has(.linkusCode)>img,.v2-legacy .impressum:has(.linkusCode)>div{height:130px;padding:16px}
  .v2-legacy-versions .tabs-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .v2-legacy-versions .tabs-nav a{padding:0 10px;font-size:14px}
  .v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child){padding:20px 16px 20px 44px;background-position:9px 0;contain-intrinsic-size:auto 400px}
  .v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)::before{left:28px}
  .v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)::after{left:3px;top:25px}
  .v2-legacy-versions :is(.main:not(#tabs),.wrapper)>div:has(>b:first-child)>p{font-size:14.5px;line-height:1.75}
  .chg,.v2-legacy .update-new,.v2-legacy .update-fix,.v2-legacy .update-enhanced,.v2-legacy .update-removed{min-width:74px}
  .v2-legacy-versions img[height="300"]{height:auto;max-height:300px}
}
/* the narrowest phones: the long terminal line ("Webinterface: http://your-server:8080") stays whole */
@media (max-width:380px){
  .mini-lines{font-size:11px;padding-inline:14px}
}