/* ============================================================
   JARVIS Info-Zentrum — eigene Styles (baut auf theme.css auf)
   ============================================================ */

/* ---------- Umfrage als Einzelfenster (Modal-Wizard) ---------- */
.umfrage-modal { max-width: 560px; width: calc(100% - 32px); }
.umfrage-fortschritt { color: var(--accent); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.umfrage-navi { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.umfrage-navi .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Umfrage (Legacy, falls als Sektion eingebaut) ---------- */
.survey-card { margin-top: 96px; }
.survey-question { margin-top: 18px; }
.survey-label { font-weight: 600; margin-bottom: 8px; }
.survey-options { display: flex; flex-wrap: wrap; gap: 8px; }
.survey-options .pill {
  font: inherit; color: var(--text); background: var(--glass);
  border: 1px solid var(--glass-border); border-radius: 999px;
  padding: 8px 14px; cursor: pointer; transition: all .15s ease;
}
.survey-options .pill:hover { border-color: var(--accent); transform: translateY(-1px); }
.survey-options .pill.aktiv {
  background: rgba(0, 217, 255, 0.16); border-color: var(--accent);
  box-shadow: var(--glow); color: var(--accent-2);
}
#umfrageNotiz {
  width: 100%; font: inherit; color: var(--text);
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); padding: 10px 12px; resize: vertical;
}
#umfrageNotiz:focus { outline: none; border-color: var(--accent); }
.survey-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* ---------- Zentrum / Hero ---------- */
.hero-info { padding-top: 40px; text-align: center; }
.hero-info h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 8px; }
.hero-info .lead { color: var(--muted); margin-bottom: 24px; }
.eyebrow { color: var(--accent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }

/* ---------- Suche (reine Auswahl, keine Eingabe) ---------- */
.suche-wrap { max-width: 560px; margin: 0 auto 10px; position: relative; }
.suche-btn {
  width: 100%; font: inherit; font-size: 1rem; color: var(--muted);
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 12px 18px; cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.suche-btn:hover { border-color: var(--accent); }
.suche-btn.aktiv { border-color: var(--accent); box-shadow: var(--glow); color: var(--text); }

/* Vorschlagsliste: die Namen UNTEREINANDER (vertikal) */
.vorschlaege {
  display: flex; flex-direction: column; gap: 6px;
  width: min(560px, 100%); margin: 8px auto 20px; padding: 10px;
  background: rgba(11, 18, 32, 0.94); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.vorschlaege .pill {
  font: inherit; font-size: .95rem; color: var(--text); text-align: left;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: all .15s ease;
}
.vorschlaege .pill:hover { border-color: var(--accent); color: var(--accent-2); transform: translateX(3px); }
.vorschlag-alle { background: rgba(0, 217, 255, 0.14); border-color: var(--accent); color: var(--accent-2); }

/* "Alle"-Ansicht: alle Themen mit vollem Inhalt untereinander */
.alle-stack {
  display: grid; gap: 18px; max-width: 720px;
  margin: 12px auto 0; text-align: left;
}
.alle-thema { scroll-margin-top: 80px; }
.alle-sprung {
  display: inline-block; font-size: .82rem; color: var(--accent);
  text-decoration: none; margin-bottom: 4px; opacity: .85;
}
.alle-sprung:hover { opacity: 1; text-decoration: underline; }

/* ---------- Karten ---------- */
.karten-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; text-align: left; margin-top: 18px;
}
.karte {
  display: block; padding: 18px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
  text-decoration: none; color: var(--text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.karte:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow); }
.karte-icon { font-size: 1.6rem; }
.karte h3 { margin: 8px 0 6px; font-size: 1.05rem; }
.karte p { color: var(--muted); font-size: .9rem; }

/* ---------- Themen-Ansicht ---------- */
.thema-ansicht { text-align: left; }
.btn-zurueck { margin-bottom: 14px; }
.thema-card { padding: 26px; }
.thema-card h2 { font-size: 1.6rem; margin-bottom: 14px; }
.thema-icon { margin-right: 6px; }
.thema-block { padding: 14px 0; border-top: 1px solid var(--glass-border); }
.thema-block:first-of-type { border-top: none; padding-top: 4px; }
.thema-block h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--accent-2); }
.thema-block p { color: var(--text); line-height: 1.65; }
.thema-block code {
  background: rgba(0, 217, 255, 0.10); border-radius: 6px;
  padding: 1px 6px; font-size: .92em;
}
.thema-block a { color: var(--accent); }
.suche-treffer { color: var(--muted); margin: 6px 0 4px; text-align: left; }

/* ---------- Haus-Button: sitzt UNTER der Navigationsleiste rechts,
   damit er das Suche-Symbol (in der Nav) nicht überdeckt ---------- */
.haus-btn {
  position: fixed; top: 74px; right: 14px; z-index: 45;
  width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 1.15rem; text-decoration: none;
  background: rgba(11, 18, 32, 0.85); border: 1px solid var(--glass-border);
  border-radius: 12px; backdrop-filter: blur(8px);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.haus-btn:hover { transform: scale(1.08); border-color: var(--accent); box-shadow: var(--glow); }

/* ---------- Pfeil-Button (von-web-Modus): oben LINKS unter der Nav,
   führt automatisch zurück zur JARVIS-Web ---------- */
.zurueck-btn {
  position: fixed; top: 74px; left: 14px; z-index: 45;
  width: 42px; height: 42px; display: grid; place-items: center;
  font-size: 1.3rem; color: var(--text); cursor: pointer;
  background: rgba(11, 18, 32, 0.85); border: 1px solid var(--glass-border);
  border-radius: 12px; backdrop-filter: blur(8px);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.zurueck-btn:hover { transform: scale(1.08); border-color: var(--accent); box-shadow: var(--glow); }

/* ---------- Bestätigungs-Dialog (Logo-Modus) ---------- */
.bestaetigung-modal { max-width: 460px; }
.bestaetigung-modal h2 { margin-bottom: 10px; }

/* ---------- Logo-Kreis (HOLL wie das Standard-JARVIS-Logo):
   ! (Info-Seite) / ? (von-web-Variante) — beide JARVIS-Blau ---------- */
.logo-kreis {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-weight: 800; font-size: .95rem; line-height: 1;
  color: var(--accent);
  border: 3px solid var(--accent);
  background: transparent;
  box-shadow: var(--glow);
}
.logo-kreis-frage {
  /* gleiches Blau, gleiches Design — nur das Zeichen ist ? (steht im HTML) */
}

/* ---------- Footer ---------- */
.footer { margin-top: 60px; padding: 26px 0; border-top: 1px solid var(--glass-border); }
.footer-inner { text-align: center; display: grid; gap: 8px; }