/* index.css – Menüdesign für ViraTipps */

/* ========= Variablen ========= */
:root {
  --bg: #e9edf5;
  --rad: 14px;
  --gap: 22px;

  --free-bg: #13c24a;
  --free-fg: #fff;
  --pro-bg: #fff;
  --pro-fg: #000;

  --vira-color: #00b66b;
}

/* ========= Base ========= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--bg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ========= Layout ========= */
.wrap {
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 50px 16px;
}

nav {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;      /* fix: immer einspaltig */
  gap: var(--gap);
  max-width: 560px;                /* fix: Desktop-Breite begrenzen */
  margin: 0 auto;                  /* fix: zentrieren */
  padding-inline: 16px;            /* fix: wie Mobile anfühlen */
}

.vira-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: clamp(13px, 3vw, 15px);
  color: rgba(0,0,0,.65);
  letter-spacing: .04em;

  /* neu: gleiche Breite/Einrückung wie nav */
  width: min(560px, 100%);
  margin: 24px auto 8px;          /* zentrieren + etwas Abstand */
  padding-left: 16px;              /* selbe Innenkante wie nav */
}


.ai-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vira-color);
  box-shadow: 0 0 10px var(--vira-color);
  animation: pulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}

/* ========= Tiles ========= */
.tile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--rad);
  text-decoration: none;
  text-align: center;
  padding-inline: clamp(20px, 5vw, 32px);
  height: clamp(72px, 14vw, 110px);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease, background .3s ease;
  background-size: 200% 200%;
}

.tile:active { transform: translateY(1px) scale(.985); }

@media (hover:hover) and (pointer:fine){
  .tile:hover { transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,.25); }
}

/* ========= Tile Farben ========= */
.t1 { background: linear-gradient(135deg, #111 0%, #1b2735 100%); }
.t2 { background: linear-gradient(135deg, #111 0%, #162a2c 100%); }
.t3 { background: linear-gradient(135deg, #111 0%, #2a1632 100%); }
.t4 { background: linear-gradient(135deg, #111 0%, #302018 100%); }
.t5 { background: linear-gradient(135deg, #111 0%, #1f2d20 100%); }
.t6 { background: linear-gradient(135deg, #111 0%, #261e2f 100%); }

/* ========= Label ========= */
.label {
  color: var(--bg);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(14px, 3.9vw, 19px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.label svg {
  width: 1.15em;
  height: 1.15em;
  fill: var(--bg);
  flex-shrink: 0;
}

/* ========= Badge ========= */
.badge {
  position: absolute;
  top: 8px;
  right: 12px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: .3ch;
  padding: .3em .75em;
  border-radius: 999px;
  font-size: clamp(10px, 3vw, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

.badge.free { background: var(--free-bg); color: var(--free-fg); }
.badge.pro  { background: var(--pro-bg);  color: var(--pro-fg); }

.lock {
  width: .85em;
  height: .85em;
  display: inline-block;
}
 /* Kopfzeile: mittig zentriert */
  .vira-status{
    display:flex;
    align-items:center;
    justify-content:center; /* ⟵ zentriert horizontal */
    gap:.5rem;
    flex-wrap:wrap;
    width:100%;
    padding:8px 0;
    margin:6px auto 12px;
  }
  .vira-status .ai-circle{ margin-right:.25rem; }
  /* Badge im Header darf NICHT die Kachel-Positionierung erben */
  .vira-status .badge{
    position:static !important;
    transform:none !important;
    margin:0;
    vertical-align:middle;
  }
  .vira-status .badge.pro svg.lock{ width:14px; height:14px; margin-right:6px; }
.vira-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 24px 0 10px;
}

.vira-logo::before,
.vira-logo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #000; /* feiner schwarzer Strich */
  opacity: 0.25;    /* leicht transparent für dezente Optik */
}

.vira-logo img {
  max-width: 160px;
  height: auto;
  display: block;
}