/* ==========================================
SpeedtestX – css-new.css (optimiert + strukturiert)
========================================== */

/* ======================
Design-Tokens
====================== */
:root{
--bg:#0a2a73; --bg2:#1a3f8f;
--fg:#ffffff; --muted:#c9d3e8;
--brand:#1a0dab; --visited:#551A8B; --active:#0b3ea4;
--ring:rgba(158,197,255,.35);

--card:#ffffff; --card-fg:#0f172a; --card-border:rgba(2,6,23,.08);
--accent-x:#ffd600;

--blue-a:#0b3ea4; --blue-b:#2b6adf;
--cta-a:#ffb224; --cta-b:#ff5c35;
--cta-ring:rgba(255,184,36,.35);
--hi-green:#61CF00;

--nav-shift: 20px;
--btn-h: 44px;
}

/* ======================
Reset & Basis
====================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body{overflow-x:clip}
body{
margin:0; color:var(--fg);
font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
line-height:1.6;
background:
radial-gradient(1200px 700px at 0% 0%, rgba(10,42,115,.85) 0%, transparent 60%),
linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
img{max-width:100%; height:auto; display:block}
.container{width:100%; max-width:72rem; margin-inline:auto; padding-inline:1rem}
.visually-hidden{
position:absolute!important; clip:rect(1px,1px,1px,1px);
padding:0; border:0; height:1px; width:1px; overflow:hidden; white-space:nowrap
}

/* Links vor Captcha vollständig sperren */
.download-link[aria-disabled="true"]{
pointer-events:none;
filter:saturate(.6) contrast(.9);
}

/* Links */
a:link{color:var(--brand); text-decoration:none}
a:visited{color:var(--visited)}
a:hover{text-decoration:underline}
a:active{color:var(--active)}
a:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:6px}

/* ======================
Header & Navigation
====================== */
.site-header{
position:sticky; top:0; z-index:1000;
background:linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.35) 100%);
backdrop-filter:saturate(1.2) blur(8px);
-webkit-backdrop-filter:saturate(1.2) blur(8px);
border-bottom:1px solid rgba(255,255,255,.14);
}
.header-wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0}

.brand:link, .brand:visited{color:#fff; text-decoration:none}
.brand:hover, .brand:active{color:#fff; text-decoration:none}
.brand{display:flex; flex-direction:column; gap:.15rem}
.brand-title{font-weight:800; letter-spacing:.2px; font-size:calc(clamp(1.1rem,3vw,1.6rem) + 1px)}
.brand-title .accent{color:var(--accent-x); font-size:calc(1em + 1px)}
.brand-claim{font-size:.95rem; opacity:.9}

/* Burger */
.nav-toggle{
width:44px; height:38px; display:grid; place-content:center;
border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; border-radius:10px; cursor:pointer;
}
.nav-toggle .bar{width:22px; height:2px; background:#fff; margin:3px 0; display:block}

/* Scrim */
.nav-scrim{
position:fixed; inset:0; background:rgba(0,0,0,.2);
opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
z-index:1990;
}
.nav-scrim.open{opacity:1; visibility:visible; transition:opacity .25s ease}

/* Off-Canvas-Panel (mobile) */
.nav{
position:fixed;
top:12px; right:12px; left:auto; bottom:auto;
width:min(340px, 88vw);
height:300px;
max-height:calc(100vh - 24px);
overflow-y:auto; overscroll-behavior:contain;
transform:translateX(calc(100% + 24px));
transition:transform .28s ease;
background:rgba(0,0,0,.8);
border-radius:16px;
padding:4.5rem 1.25rem 1.5rem;
display:flex; flex-direction:column; gap:1rem;
z-index:2000;
will-change:transform;
contain:paint;
}
/* Mobile Nav-Links: gewünschte große Schrift */
.nav a{color:#fff; font-weight:600; font-size: 1.45rem; line-height: 1.35;}
.nav.open{transform:translateX(0)}

/* „Startseite“ Style (nur mobile sichtbar) */
.nav .nav-home{
display:block;
font-weight:700;
padding:.25rem 0;
text-decoration:none;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.12);
}

/* Close-Button im Panel */
.nav-close{
position:absolute; top:10px; right:10px;
width:36px; height:36px; border-radius:10px;
border:1px solid rgba(255,255,255,.25);
background:rgba(0,0,0,.35); color:#fff; font:inherit;
display:grid; place-content:center; cursor:pointer;
}
.nav-close:focus-visible{box-shadow:0 0 0 3px var(--ring)}

/* Desktop-Navigation */
@media (min-width:900px){
.nav{
position:static; top:auto; right:auto; bottom:auto; left:auto;
height:auto; max-height:none; overflow:visible;
transform:none; background:transparent; border-radius:0;
padding:0; flex-direction:row; gap:1rem; z-index:auto;
}
/* Desktop: kleinere Schriftgröße */
.nav a{opacity:.95; font-size:1.05rem; line-height:1.25;}
.nav-toggle{display:none}
.nav-close{display:none}
.nav-scrim{display:none}
}

/* Desktop: Linke Verschiebung + Trenner */
@media (min-width:900px){
#site-nav.nav{
transform:translateX(calc(-1 * var(--nav-shift)));
gap:0;
}
#site-nav.nav a{padding:0 .6rem}
#site-nav.nav a + a{border-left:1px solid rgba(255,255,255,.70); padding-left:.6rem}
#site-nav.nav a:first-child{padding-left:0}
}

/* ======================
Main / Content
====================== */
#main{margin-block:1.2rem 2rem}
.content-body{
background:var(--card); color:var(--card-fg);
border:1px solid var(--card-border); border-radius:18px;
box-shadow:0 20px 40px rgba(0,0,0,.18);
padding:1.25rem 20px;
}
.content-body > * + *{margin-top:1.25rem}
.content-card{display:contents}

/* Hero */
.hero h1{margin:.2rem 0 .6rem}

/* ======================
Captcha
====================== */
.captcha-grid{
display:grid;
grid-template-columns: minmax(150px, max-content) max-content 250px max-content;
column-gap:.6rem; row-gap:.4rem; align-items:center;
}
.captcha-grid > *{ min-width:0 }
#captcha-img{ height: 50px;   /* hier gewünschte Höhe setzen */
 background:#fff; border:1px solid var(--card-border); border-radius:8px }

.captcha .input{
width:100%; padding:.6rem .8rem; border:1px solid var(--card-border); border-radius:10px; font:inherit; justify-self:start;
}
.captcha .hp{ position:absolute; left:-9999px; top:auto }
.cap-msg{ margin-top:.5rem; min-height:1.2em }
.captcha .btn.primary{ justify-self:start }

/* Captcha: mobil zweizeilig */
@media (max-width: 700px){
.captcha-grid{ grid-template-columns: minmax(150px, max-content) max-content }
}

/* Captcha-Status */
.cap-msg{ padding:.5rem .66rem; border-radius:8px }
.cap-msg.is-ok{
color:#0f3d10; background:rgba(97,207,0,.12); border-left:4px solid var(--hi-green)
}
.cap-msg.is-fehler{
color:#7a2e00; background:rgba(255,184,36,.12); border-left:4px solid var(--cta-a)
}

/* ======================
Buttons
====================== */
.btn{
display:inline-flex; align-items:center; gap:.6rem;
border-radius:12px; padding:.7rem 1.05rem; border:1px solid var(--card-border); font-weight:600
}
.btn:hover{box-shadow:0 0 0 3px var(--ring)}
.btn.primary{background:#0f766e; color:#fff; border-color:#0f766e}
.btn.ghost{background:transparent; color:var(--card-fg)}
.btn[aria-disabled="true"]{opacity:.55; cursor:not-allowed}
.btn.download{
border:0; background:linear-gradient(135deg, var(--blue-a), var(--blue-b)); color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 6px 20px rgba(43,106,223,.25);
padding:.55rem .8rem; font-size:.95rem; line-height:1.1;
}
.btn.download:active{transform:translateY(1px)}

/* ======================
Tabellen
====================== */
.table{
display:table; width:100%;
border-collapse:separate; border-spacing:0;
min-width:720px;
}
.table-wrap{ overflow:visible }
.table th,.table td{
padding:.8rem 1rem; border-bottom:1px solid var(--card-border);
text-align:left; vertical-align:middle
}
.table thead th{
position:sticky; top:0; z-index:1;
background:color-mix(in oklab, #fff, var(--blue-a) 6%);
font-weight:700
}
.table tbody tr:nth-child(even){background:color-mix(in oklab, #fff, var(--blue-a) 4%)}
.table td.links a{white-space:nowrap}
.table tr.rec td{background:color-mix(in oklab, var(--hi-green), white 70%)}
.table.fancy td:nth-child(2){width:96px}
.table tr.rec th, .table tr.rec td{ background:color-mix(in oklab, var(--hi-green), white 70%) }

/* Tabelle: erste Spalte schmaler */
.table.fancy th:first-child,
.table.fancy td:first-child{
width:350px; max-width:350px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Fallbacks für color-mix */
.table thead th{ background:#fff; background:color-mix(in oklab, #fff, var(--blue-a) 6%) }
.table tbody tr:nth-child(even){ background:#fff; background:color-mix(in oklab, #fff, var(--blue-a) 4%) }

/* ======================
Promo
====================== */
.promo{
text-align:center; margin-bottom:20px;
background:#f5f7fb; border:1px solid var(--card-border); border-radius:16px; padding:.9rem 1rem;
}
.promo > p:first-of-type{font-weight:800}
.promo-ctas{display:flex; flex-direction:column; align-items:center; gap:.6rem; margin:.6rem 0 1rem}

/* Promo: Tipp-Variante (grün) */
.promo.promotip{
background:color-mix(in oklab, #fff, var(--hi-green) 14%);
border-color:color-mix(in oklab, var(--hi-green), #0f172a 12%);
}
.promo.promotip a:link{color:var(--brand)}
.promo.promotip a:visited{color:var(--visited)}
.promo.promotip a:active{color:var(--active)}

.btn.cta{
display:inline-flex; align-items:center; gap:.55rem; width:auto;
padding:.66rem .9rem; border-radius:999px; border:0;
background:linear-gradient(135deg, var(--cta-a), var(--cta-b)); color:#fff;
font-weight:800; letter-spacing:.2px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(255,92,53,.28);
}
.btn.cta:hover{box-shadow:0 0 0 3px var(--cta-ring), 0 12px 30px rgba(255,92,53,.34); text-decoration:none; transform:translateY(-1px)}
.btn.cta:active{transform:translateY(0)}
.btn.cta [aria-hidden="true"]{transition:transform .15s ease}
.btn.cta:hover [aria-hidden="true"]{transform:translateX(2px)}

/* ======================
Footer & Banner
====================== */
.site-footer{background:rgba(0,0,0,.82); color:#e5e7eb; border-top:1px solid rgba(255,255,255,.12)}
.footer-wrap{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; padding:1rem 0}
.footer-nav ul{list-style:none; display:flex; gap:1rem; margin:0; padding:0; justify-content:center}
.site-footer a{color:#d6e4ff}
.copy{margin:0; font-size:.95rem}

/* Fixer Side-Banner */
.side-banner{
position:fixed; top:200px;
left:calc(50% + 36rem + 24px);
width:160px; height:600px;
z-index:800;
}
.side-banner img{
display:block; width:100%; height:100%; object-fit:contain;
border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.25); background:#fff;
}

.note{padding-top:25px;text-align:center}
.space{padding-top:20px}

/* ======================
Responsive Helfer
====================== */
/* Tabelle mobil: nur horizontal scrollen */
@media (max-width:768px){
.table-wrap{
overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch
}
.table{ min-width:720px }
}

/* Banner ausblenden */
@media (max-width:1360px){ .side-banner{display:none} }

/* Print */
@media print{ .side-banner{display:none !important} }

/* Motion-Reduktion */
@media (prefers-reduced-motion: reduce){
*{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}

/* ======================
Code-Stile (Inline/Block, Badge)
====================== */
:root{
--code-bg:        #f6f8fa;
--code-border:    #e2e6ea;
--code-text:      #111827;
--badge-bg:       #e0f2fe;
--badge-border:   #93c5fd;
--badge-text:     #0c4a6e;
--shadow:         0 6px 18px rgba(0,0,0,.06);
--code-overlay:   linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
}
@media (prefers-color-scheme: dark){
:root{
--code-bg:      #0f172a;
--code-border:  #233044;
--code-text:    #e5e7eb;
--badge-bg:     #073042;
--badge-border: #1c5673;
--badge-text:   #c3e7ff;
--shadow:       0 8px 24px rgba(0,0,0,.35);
--code-overlay: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}
}

/* Inline-Code */
code{
font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
background: var(--code-bg);
color: var(--code-text);
border: 1px solid var(--code-border);
padding: .12rem .38rem;
border-radius: .4rem;
}

/* Code-Block */
pre.code-block{
position: relative;
margin: 1.5rem 0;
padding: 1.25rem 1.1rem 1rem; /* etwas Luft unter dem Badge */
font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
background: var(--code-bg);
background-image: var(--code-overlay);
color: var(--code-text);
border: 1px solid var(--code-border);
border-radius: .7rem;
box-shadow: var(--shadow);
overflow: visible; /* Badge ragt halb nach außen */
}
pre.code-block code{
background: transparent; border: 0; padding: 0; white-space: pre;
}

/* Badge mittig auf Rahmenlinie */
pre.code-block[data-label]::before{
content: attr(data-label);
position: absolute;
top: 0;
transform: translateY(-50%);
left: 1rem;
padding: .18rem .6rem;
font-size: .74rem;
font-weight: 600;
letter-spacing: .02em;
color: var(--badge-text);
background: var(--badge-bg);
border: 1px solid var(--badge-border);
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 2px 6px rgba(0,0,0,.08);
z-index: 2;
}

/* Tastenkürzel */
kbd{
font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size: .85em;
background: var(--code-bg);
color: var(--code-text);
border: 1px solid var(--code-border);
border-bottom-width: 2px;
padding: .08rem .35rem;
border-radius: .35rem;
}



.captcha-form .btn,
.captcha-form #captcha-reload{
  min-height: var(--btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: .55rem 1rem; /* konsistent zu Start/Stopp */
  border-radius: 12px;   /* wie .btn */
}