/* ============================================
   MALIK CONSULTS – PREMIUM BLACK/WHITE THEME
   Ultra-clean, consulting-grade, responsive
============================================ */

/* ============================================
   GLOBAL THEME VARIABLES (LIGHT & DARK)
============================================ */
:root {
  --bg: #ffffff;
  --text: #111111;
  --card: #f8f8f8;
  --muted: #666666;

  --accent-red: #e2001a;
  --accent-red-dark: #c10016;
  --accent-green: #10b981;
  --accent-yellow: #f59e0b;

  --shadow-soft: 0 4px 18px rgba(0,0,0,0.06);
  --shadow-strong: 0 6px 26px rgba(0,0,0,0.12);

  --logo-filter: none;

  --button-bg: #000000;
  --button-text: #ffffff;
}

body.dark {
  --bg: #000000;
  --text: #ffffff;
  --card: #0d0d0d;
  --muted: #9ca3af;

  --shadow-soft: 0 4px 20px rgba(255,255,255,0.05);
  --shadow-strong: 0 10px 32px rgba(255,255,255,0.08);

  --logo-filter: invert(1) brightness(2);

  --button-bg: #ffffff;
  --button-text: #000000;
}

/* ============================================
   GLOBAL RESET / BOX-SIZING
============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================
   GLOBAL LAYOUT
============================================ */
body {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  text-align: center;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: var(--bg);
  margin: 0;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
  animation: fadeSlideUp 0.6s ease forwards;
}

/* ============================================
   INTRO SCREEN
============================================ */
#intro-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease;
}

#intro-screen img {
  width: clamp(140px, 30vw, 200px);
  filter: var(--logo-filter);
  animation: logoIntro 1s ease forwards;
}

#intro-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* ============================================
   DARK MODE TOGGLE
============================================ */
#darkmode-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid #444444;
  cursor: pointer;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 50;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

#darkmode-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
}

/* ============================================
   HEADER BRAND LINE
============================================ */
.brand-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #000000, #444444, #000000);
  margin: 10px auto 20px auto;
  opacity: 0.2;
}

body.dark .brand-line {
  background: linear-gradient(90deg, #ffffff, #666666, #ffffff);
  opacity: 0.25;
}

/* ============================================
   LOGO + INTRO ANIMATION
============================================ */
.logo {
  width: clamp(120px, 20vw, 180px);
  margin: 0 auto clamp(1rem, 2vw, 1.4rem) auto;
  display: block;
  filter: var(--logo-filter);
  opacity: 0;
  transform: translateY(20px);
  animation: logoIntro 0.8s ease forwards;
}

@keyframes logoIntro {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================
   HEADINGS
============================================ */
h1 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
  color: var(--text);
  font-weight: 700;
}

h2 {
  color: var(--text);
  font-weight: 600;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}
/* ============================================
   GRID TILES (DEFAULT)
============================================ */
.grid-tiles {
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  margin-top: 20px;
}

/* ============================================
   PC LAYOUT (3 oben + Summary unten)
============================================ */
@media (min-width: 900px) {
  .grid-tiles {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "download upload ping"
      "summary summary summary";
  }

  #tile-download { grid-area: download; }
  #tile-upload { grid-area: upload; }
  #tile-ping { grid-area: ping; }
  .summary { grid-area: summary; }
}

/* ============================================
   HANDY LAYOUT (2×2) – AB 250PX
============================================ */
@media (max-width: 250px) {
  body {
    padding: 1rem;
  }

  .grid-tiles {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "download upload"
      "ping summary";
    gap: 12px;
    width: 100%;
    margin: 0 auto;
  }

  #tile-download { grid-area: download; }
  #tile-upload { grid-area: upload; }
  #tile-ping { grid-area: ping; }
  .summary { grid-area: summary; }

  .tile {
    padding: 0.9rem;
    font-size: 0.95rem;
    min-height: auto;
  }

  #darkmode-toggle {
    top: 10px;
    right: 10px;
    padding: 6px 12px;
    font-size: 0.75rem;
  }

  button {
    font-size: 0.95rem;
    padding: 0.6rem 1.1rem;
  }

  h1 {
    font-size: 1.55rem;
  }

  h2 {
    font-size: 1.15rem;
  }

  .summary {
    padding: 1rem;
  }

  footer {
    font-size: 0.75rem;
    margin-top: 1rem;
  }

  /* Buttons untereinander auf sehr kleinen Screens */
  .button-row {
    flex-direction: column;
    align-items: center;
  }

  .button-row button {
    width: 100%;
    max-width: 240px;
    flex: none;
  }
}

/* ============================================
   TILE STYLE (gleichrangig, gleiche Höhe)
============================================ */
.tile {
  background: var(--card);
  padding: clamp(14px, 2vw, 22px);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  transition: 0.25s ease;
  animation: fadeSlideUp 0.6s ease forwards;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
  overflow: hidden; /* FIX: verhindert Skalen-Überlauf */
}

/* Inhalt in Tiles zentrieren */
.tile h3,
.tile p,
.gauge,
.gauge-rating,
.gauge-quality {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

/* ============================================
   ICONS
============================================ */
.icon {
  width: 1.1em;
  height: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.9em;
}

.icon-download::before { content: "⬇"; }
.icon-upload::before { content: "⬆"; }
.icon-ping::before { content: "📡"; }

/* ============================================
   SUMMARY BOX
============================================ */
.summary {
  background: var(--card);
  border: 1px solid #dddddd;
  padding: clamp(1rem, 2vw, 1.6rem);
  border-radius: 18px;
}

/* ============================================
   GAUGE + BOUNCE ANIMATION
============================================ */
.gauge {
  width: clamp(150px, 22vw, 190px);
  margin: 0 auto;
  position: relative;
  animation: gaugeBounce 0.6s ease;
}

@keyframes gaugeBounce {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.gauge svg {
  width: 100%;
  height: auto;
  display: block;
}

.gauge-bg {
  fill: none;
  stroke: #d8d8d8;
  stroke-width: clamp(8px, 1vw, 12px);
}

.gauge-fill {
  fill: none;
  stroke-width: clamp(8px, 1vw, 12px);
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.25s ease-out, filter 0.3s ease;
}

.gauge-fill[style*="#10b981"] {
  filter: drop-shadow(0 0 6px rgba(16,185,129,0.45));
}

.gauge-fill[style*="#f59e0b"] {
  filter: drop-shadow(0 0 6px rgba(245,158,11,0.45));
}

.gauge-fill[style*="#e2001a"] {
  filter: drop-shadow(0 0 6px rgba(226,0,26,0.45));
}

.gauge-value {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--text);
  z-index: 2;
}
/* ============================================
   GAUGE + BOUNCE ANIMATION
============================================ */
.gauge {
  width: clamp(150px, 22vw, 190px);
  margin: 0 auto;
  position: relative;
  animation: gaugeBounce 0.6s ease;
}

@keyframes gaugeBounce {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.gauge svg {
  width: 100%;
  height: auto;
  display: block;
}

.gauge-bg {
  fill: none;
  stroke: #d8d8d8;
  stroke-width: clamp(8px, 1vw, 12px);
}

.gauge-fill {
  fill: none;
  stroke-width: clamp(8px, 1vw, 12px);
  stroke-linecap: round;
  stroke-dasharray: 126;
  stroke-dashoffset: 126;
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.25s ease-out, filter 0.3s ease;
}

.gauge-fill[style*="#10b981"] {
  filter: drop-shadow(0 0 6px rgba(16,185,129,0.45));
}

.gauge-fill[style*="#f59e0b"] {
  filter: drop-shadow(0 0 6px rgba(245,158,11,0.45));
}

.gauge-fill[style*="#e2001a"] {
  filter: drop-shadow(0 0 6px rgba(226,0,26,0.45));
}

.gauge-value {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--text);
  z-index: 2;
}

/* ============================================
   SKALA (SVG TEXT) — FIXED
============================================ */
.gauge-scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.arc-label {
  fill: var(--text);
  font-size: clamp(0.65rem, 1.2vw, 0.9rem);
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;

  /* FIX: perfekte vertikale Ausrichtung */
  transform: translateY(4px);
}

/* ============================================
   RATING / QUALITY
============================================ */
.gauge-rating {
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

.gauge-quality {
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ============================================
   CONNECTION BADGE
============================================ */
.connection-badge {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  display: inline-block;
  background: #000000;
  color: #ffffff;
  opacity: 0;
  transform: translateY(10px);
  transition: 0.4s ease;
}

.connection-badge.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   FOOTER
============================================ */
footer {
  margin-top: 1.5rem;
  font-size: clamp(0.75rem, 1.4vw, 0.9rem);
  color: var(--muted);
}

/* ============================================
   MOBILE GAUGE + SKALA TUNING – AB 250PX
============================================ */
@media (max-width: 250px) {

  .gauge {
    width: 120px;
    margin: 0 auto;
  }

  .gauge-scale {
    transform: scale(0.8);
    transform-origin: center center;
  }

  .arc-label {
    font-size: 0.55rem;
    transform: translateY(3px); /* Mobile Fix */
  }

  .gauge-value {
    font-size: 1.05rem;
  }
}