/* Datei: css/ipconnect.css */
/* Ergänzende Styles für ip-connectivitytest.php – bewusst page-scoped */

/* Allgemeines */
body[data-page="connectivitytest"] .pageHead{ margin-top: 18px; }

/* Fortschritt */
body[data-page="connectivitytest"] .ctProgress{ margin-top: 14px; }
body[data-page="connectivitytest"] .ctProgress__bar{ height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
html[data-theme="light"] body[data-page="connectivitytest"] .ctProgress__bar{ background: rgba(0,0,0,0.08); }
body[data-page="connectivitytest"] .ctProgress__fill{ height: 100%; border-radius: 999px; background: rgba(255,255,255,0.55); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctProgress__fill{ background: rgba(0,0,0,0.55); }
body[data-page="connectivitytest"] .ctProgress__meta{ margin-top: 8px; font-size: 14px; opacity: 0.9; }

/* Start-Button zentrieren (konfliktsicher) */
body[data-page="connectivitytest"] .ctActions{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 14px;
}

/* Status unter dem Button */
body[data-page="connectivitytest"] .ctStatusRow{ margin-top: 10px; text-align: center; }
body[data-page="connectivitytest"] .ctStatus{ display: inline-block; opacity: 0.9; }

/* Button-Stil wie ip-analyse.php (blau) */
body[data-page="connectivitytest"] .heroSearch__btn{
  border: 0;
  border-radius: 16px;
  padding: 0 22px;
  min-width: 260px;
  height: 58px;
  line-height: 1;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(2,24,58,0.24);
  background: linear-gradient(90deg, rgba(74,187,255,1), rgba(45,118,255,1) 55%, rgba(44,60,255,1));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
body[data-page="connectivitytest"] .heroSearch__btn:disabled{ opacity: 0.72; cursor: not-allowed; }
body[data-page="connectivitytest"] .heroSearch__btnIcon{ width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; }

/* Mobile wie ip-analyse */
@media (max-width: 820px){
  body[data-page="connectivitytest"] .heroSearch__btn{ min-width: 100%; height: 54px; font-size: 18px; }
}

/* Sicherstellen, dass der Content über dem Hero liegt */
body[data-page="connectivitytest"] .mainContent{ position: relative; z-index: 2; }

/* Cards: im Darkmode nicht transparent */
body[data-page="connectivitytest"] .card.card--inner{ background: #fff; }
html:not([data-theme="light"]) body[data-page="connectivitytest"] .card.card--inner{
  background: rgba(18,24,36,0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Ergebnis-Grid */
body[data-page="connectivitytest"] .ctGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 980px){
  body[data-page="connectivitytest"] .ctGrid{ grid-template-columns: 1fr; }
}

body[data-page="connectivitytest"] .ctCard{ border-radius: 18px; padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctCard{ background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); }

body[data-page="connectivitytest"] .ctCard__head{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
body[data-page="connectivitytest"] .ctScore{ display: inline-flex; align-items: baseline; gap: 4px; }
body[data-page="connectivitytest"] .ctScore__num{ font-size: 34px; font-weight: 700; letter-spacing: -0.02em; transition: color 160ms ease; }
body[data-page="connectivitytest"] .ctScore__max{ opacity: 0.85; }

body[data-page="connectivitytest"] .ctKpis{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
body[data-page="connectivitytest"] .ctKpi{ padding: 10px; border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctKpi{ background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
body[data-page="connectivitytest"] .ctKpi__label{ font-size: 13px; opacity: 0.85; }
body[data-page="connectivitytest"] .ctKpi__value{ margin-top: 4px; font-size: 16px; font-weight: 600; }

body[data-page="connectivitytest"] .ctBadges{ margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="connectivitytest"] .ctBadge{ display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; font-size: 13px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctBadge{ border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.03); }
body[data-page="connectivitytest"] .ctBadge--bad{ border-color: rgba(255,60,60,0.55); }
body[data-page="connectivitytest"] .ctBadge--warn{ border-color: rgba(255,180,60,0.55); }
body[data-page="connectivitytest"] .ctBadge--info{ border-color: rgba(120,180,255,0.55); }

body[data-page="connectivitytest"] .ctAdvice{ margin-top: 12px; display: grid; gap: 10px; }
body[data-page="connectivitytest"] .ctAdvice__item{ border-radius: 14px; padding: 10px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.02); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctAdvice__item{ border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.02); }
body[data-page="connectivitytest"] .ctAdvice__item--bad{ border-color: rgba(255,60,60,0.35); }
body[data-page="connectivitytest"] .ctAdvice__item--warn{ border-color: rgba(255,180,60,0.35); }
body[data-page="connectivitytest"] .ctAdvice__item--info{ border-color: rgba(120,180,255,0.35); }
body[data-page="connectivitytest"] .ctAdvice__title{ font-weight: 700; margin-bottom: 4px; }
body[data-page="connectivitytest"] .ctAdvice__text{ opacity: 0.92; }
body[data-page="connectivitytest"] .ctAdvice__rec{ margin-top: 6px; opacity: 0.95; }

/* Vergleich */
body[data-page="connectivitytest"] .ctCompare__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 980px){
  body[data-page="connectivitytest"] .ctCompare__row{ grid-template-columns: 1fr; }
}
body[data-page="connectivitytest"] .ctCompare__label{ font-size: 13px; opacity: 0.85; }
body[data-page="connectivitytest"] .ctCompare__value{ margin-top: 4px; font-weight: 600; }
body[data-page="connectivitytest"] .ctCompare__note{ margin-top: 10px; opacity: 0.92; }

/* Details */
body[data-page="connectivitytest"] .ctDetails__cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 980px){
  body[data-page="connectivitytest"] .ctDetails__cols{ grid-template-columns: 1fr; }
}

body[data-page="connectivitytest"] .ctTableWrap{ overflow: auto; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctTableWrap{ border-color: rgba(0,0,0,0.10); }
body[data-page="connectivitytest"] .ctTable{ width: 100%; border-collapse: collapse; font-size: 14px; }
body[data-page="connectivitytest"] .ctTable th,
body[data-page="connectivitytest"] .ctTable td{ padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); vertical-align: top; }
html[data-theme="light"] body[data-page="connectivitytest"] .ctTable th,
html[data-theme="light"] body[data-page="connectivitytest"] .ctTable td{ border-bottom-color: rgba(0,0,0,0.08); }
body[data-page="connectivitytest"] .ctTable th{ text-align: left; font-weight: 700; opacity: 0.9; }

body[data-page="connectivitytest"] .ctMono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
body[data-page="connectivitytest"] .ctErr{ opacity: 0.9; max-width: 44ch; }

body[data-page="connectivitytest"] .ctRes{ display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(255,255,255,0.10); }
html[data-theme="light"] body[data-page="connectivitytest"] .ctRes{ border-color: rgba(0,0,0,0.12); }
body[data-page="connectivitytest"] .ctRes--pass{ border-color: rgba(80,220,140,0.55); }
body[data-page="connectivitytest"] .ctRes--fail{ border-color: rgba(255,90,90,0.55); }

body[data-page="connectivitytest"] .ctTargets{ margin-top: 12px; }
body[data-page="connectivitytest"] .ctTargets__title{ font-weight: 700; margin-bottom: 8px; }
body[data-page="connectivitytest"] .ctTargets__box{ margin: 0; padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.20); overflow: auto; }
html[data-theme="light"] body[data-page="connectivitytest"] .ctTargets__box{ border-color: rgba(0,0,0,0.10); background: rgba(0,0,0,0.04); }

/* Domain/Host immer dunkelorange */
body[data-page="connectivitytest"] .ctHostAccent,
body[data-page="connectivitytest"] .ctTarget{
  color: #d97a00 !important;
  font-weight: 800;
}

/* Score-Färbung (nur die Ergebniszahl) */
body[data-page="connectivitytest"] .ctScore__num.is-s0{ color: #ff4b4b; }  /* 0–2 */
body[data-page="connectivitytest"] .ctScore__num.is-s1{ color: #b06bff; }  /* >2–4 */
body[data-page="connectivitytest"] .ctScore__num.is-s2{ color: #ffb44b; }  /* >4–6 */
body[data-page="connectivitytest"] .ctScore__num.is-s3{ color: #9bb34a; }  /* >6–8 */
body[data-page="connectivitytest"] .ctScore__num.is-s4{ color: #2bd46f; }  /* >8–10 */

/* falls der Block innerhalb eines Grids liegt */
body[data-page="connectivitytest"] .ctFull{ grid-column: 1 / -1; }

/* Legende (mehr Abstand nach oben gewünscht) */
body[data-page="connectivitytest"] .ctLegend{
  margin-top: 26px;            /* Abstand zur Tabelle ("Leerzeile") */
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
html[data-theme="light"] body[data-page="connectivitytest"] .ctLegend{ border-top-color: rgba(0,0,0,0.10); }
body[data-page="connectivitytest"] .ctLegend__title{ font-weight: 800; margin-bottom: 6px; }
body[data-page="connectivitytest"] .ctLegend__list{ margin: 0; padding-left: 18px; }
body[data-page="connectivitytest"] .ctLegend__list li{ margin: 4px 0; }
body[data-page="connectivitytest"] .ctLegend__mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

/* Aufklappbarer Block (Genutzte Ziele) */
body[data-page="connectivitytest"] details.ctDebugDetails{ margin-top: 12px; }
body[data-page="connectivitytest"] details.ctDebugDetails > summary{ cursor: pointer; user-select: none; font-weight: 800; }
body[data-page="connectivitytest"] details.ctDebugDetails[open] > summary{ margin-bottom: 8px; }
body[data-page="connectivitytest"] .ctHeadSpacer{ height: 10px; }

/* Turnstile */
body[data-page="connectivitytest"] #ctCaptchaBox[hidden]{ display: none !important; }
body[data-page="connectivitytest"] #ctCaptchaBox{ display: block !important; }
body[data-page="connectivitytest"] #ctTurnstileMount{ min-height: 80px; }

/* Hero-Netz etwas dezenter */
body[data-page="connectivitytest"] .heroNet canvas{ opacity: 0.45; filter: blur(0.6px); }