/* app/static/css/info_pages.css
   About / Rules / Privacy bewusst im Impressum-Stil.
   Kein blauer Akzentverlauf. */

.vyo-info-page {
  --vyo-info-bg: rgba(255, 255, 255, 0.84);
  --vyo-info-border: rgba(15, 23, 42, 0.10);
  --vyo-info-text: #172033;
  --vyo-info-muted: #64748b;
  --vyo-info-soft: rgba(15, 23, 42, 0.045);
  --vyo-info-accent: #d2ae63;
  --vyo-info-accent-dark: #9c7831;
  --vyo-info-green: #15c70c;

  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) 0 !important;
}

html[data-theme="dark"] .vyo-info-page,
[data-bs-theme="dark"] .vyo-info-page,
.theme-dark .vyo-info-page,
body.dark .vyo-info-page {
  --vyo-info-bg: rgba(15, 23, 42, 0.78);
  --vyo-info-border: rgba(255, 255, 255, 0.11);
  --vyo-info-text: #f8fafc;
  --vyo-info-muted: #a8b3c7;
  --vyo-info-soft: rgba(255, 255, 255, 0.065);
  --vyo-info-accent: #d7b66d;
  --vyo-info-accent-dark: #f1d99a;
  --vyo-info-green: #31d843;
}

/* Hero: direkt an vyo-legal-hero angelehnt */
.vyo-info-page > h1 {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--vyo-info-border);
  border-radius: 28px;
  padding: clamp(1.35rem, 4vw, 2.35rem);
  margin: 0;
  color: var(--vyo-info-text);
  background:
    radial-gradient(circle at 14% 0%, rgba(210, 174, 99, 0.22), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(21, 199, 12, 0.10), transparent 32%),
    var(--vyo-info-bg);
  box-shadow: 0 22px 65px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

/* Ganz wichtig: kein zusätzliches VoteYourOpinion-Label im Hero */
.vyo-info-page > h1::before {
  content: none !important;
}

.vyo-info-page > h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 1.1rem 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--vyo-info-accent), transparent);
}

/* Einleitung unter dem Hero */
.vyo-info-page > .lead,
.vyo-info-page > p.text-muted:first-of-type {
  max-width: 720px;
  margin: 1rem 0 0;
  color: var(--vyo-info-muted) !important;
  font-size: 1.02rem;
  line-height: 1.65;
}

.vyo-info-page hr {
  display: none;
}

/* Allgemein */
.vyo-info-page h2,
.vyo-info-page h3 {
  color: var(--vyo-info-text);
  font-weight: 850;
  letter-spacing: -0.015em;
}

.vyo-info-page p {
  color: var(--vyo-info-text);
  line-height: 1.75;
}

.vyo-info-page .text-muted {
  color: var(--vyo-info-muted) !important;
}

.vyo-info-page a {
  color: var(--vyo-info-accent-dark);
  font-weight: 800;
  text-decoration: none;
  word-break: break-word;
}

.vyo-info-page a:hover {
  text-decoration: underline;
}

/* Karten wie im Impressum */
.vyo-info-page--about .row.g-4,
.vyo-info-page--rules,
.vyo-info-page--privacy {
  margin-top: 1.2rem;
}

.vyo-info-page--about .row.g-4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem !important;
  align-items: start;
}

.vyo-info-page--about .row.g-4::before,
.vyo-info-page--about .row.g-4::after {
  content: none !important;
}

.vyo-info-page--about .row.g-4 > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  min-width: 0;
  border: 1px solid var(--vyo-info-border);
  border-radius: 22px;
  padding: clamp(1rem, 3vw, 1.35rem) !important;
  background: var(--vyo-info-bg);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.075);
  backdrop-filter: blur(14px);
}

/* About-Überschriften exakt im Card-Stil */
.vyo-info-page--about h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  color: var(--vyo-info-text);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.015em;
}

.vyo-info-page--about h2:not(:first-child) {
  margin-top: 1.35rem;
}

.vyo-info-page--about h2::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--vyo-info-accent);
  box-shadow: 0 0 0 4px rgba(210, 174, 99, 0.14);
  flex: 0 0 auto;
}

.vyo-info-page--about p:last-child {
  margin-bottom: 0;
}

/* Listen wie Impressum-Kontaktboxen, nicht knallig */
.vyo-info-page ul {
  display: grid;
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.vyo-info-page li {
  padding: 0.72rem 0.8rem;
  border-radius: 16px;
  background: var(--vyo-info-soft);
  color: var(--vyo-info-text);
  line-height: 1.65;
}

/* Support-Karte in About nicht doppelt überstylen */
.vyo-info-page--about .support-card {
  box-shadow: none;
}

.vyo-info-page--about .border-support {
  border: 1px solid rgba(210, 174, 99, 0.24);
  background:
    radial-gradient(1200px 380px at 10% 0%, rgba(210, 174, 99, 0.12), transparent 55%),
    radial-gradient(900px 320px at 100% 100%, rgba(21, 199, 12, 0.08), transparent 55%),
    var(--vyo-info-soft);
}

/* Rules / Privacy: aus normalen h2/p/ul Blöcken werden Impressum-Karten */
.vyo-info-page--rules > h2,
.vyo-info-page--rules > h3,
.vyo-info-page--privacy > h2,
.vyo-info-page--privacy > h3 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
  border: 1px solid var(--vyo-info-border);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: clamp(1rem, 3vw, 1.35rem) clamp(1rem, 3vw, 1.35rem) 0.35rem;
  background: var(--vyo-info-bg);
  color: var(--vyo-info-text);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.075);
  backdrop-filter: blur(14px);
  font-size: 1.05rem;
  font-weight: 850;
}

.vyo-info-page--rules > h2::before,
.vyo-info-page--rules > h3::before,
.vyo-info-page--privacy > h2::before,
.vyo-info-page--privacy > h3::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--vyo-info-accent);
  box-shadow: 0 0 0 4px rgba(210, 174, 99, 0.14);
  flex: 0 0 auto;
}

/* Direkt folgende Inhalte an die Überschrift als Card-Unterteil hängen */
.vyo-info-page--rules > h2 + p,
.vyo-info-page--rules > h3 + p,
.vyo-info-page--privacy > h2 + p,
.vyo-info-page--privacy > h3 + p,
.vyo-info-page--rules > h2 + ul,
.vyo-info-page--rules > h3 + ul,
.vyo-info-page--privacy > h2 + ul,
.vyo-info-page--privacy > h3 + ul {
  margin: 0 0 1rem;
  border: 1px solid var(--vyo-info-border);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  padding: 0.75rem clamp(1rem, 3vw, 1.35rem) clamp(1rem, 3vw, 1.35rem);
  background: var(--vyo-info-bg);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.075);
}

/* Wenn nach einer Überschrift eine Liste folgt */
.vyo-info-page--rules > h2 + ul,
.vyo-info-page--rules > h3 + ul,
.vyo-info-page--privacy > h2 + ul,
.vyo-info-page--privacy > h3 + ul {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  padding-left: clamp(1rem, 3vw, 1.35rem);
}

/* Datenschutz-Tabelle */
.vyo-info-page .vyo-privacy-table-wrap {
  margin-top: 1rem;
  border: 1px solid var(--vyo-info-border);
  border-radius: 22px;
  overflow: hidden;
  background: var(--vyo-info-bg);
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.075);
  backdrop-filter: blur(14px);
}

.vyo-info-page .vyo-privacy-table {
  margin-bottom: 0;
  color: var(--vyo-info-text);
}

.vyo-info-page .vyo-privacy-table th {
  color: var(--vyo-info-text);
  background: var(--vyo-info-soft);
  border-color: var(--vyo-info-border);
}

.vyo-info-page .vyo-privacy-table td {
  border-color: var(--vyo-info-border);
  color: var(--vyo-info-text);
}

@media (max-width: 820px) {
  .vyo-info-page--about .row.g-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .vyo-info-page {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .vyo-info-page > h1 {
    border-radius: 22px;
    font-size: clamp(2rem, 10vw, 2.6rem);
  }

  .vyo-info-page--rules > h2,
  .vyo-info-page--rules > h3,
  .vyo-info-page--privacy > h2,
  .vyo-info-page--privacy > h3 {
    border-radius: 18px 18px 0 0;
  }

  .vyo-info-page--rules > h2 + p,
  .vyo-info-page--rules > h3 + p,
  .vyo-info-page--privacy > h2 + p,
  .vyo-info-page--privacy > h3 + p,
  .vyo-info-page--rules > h2 + ul,
  .vyo-info-page--rules > h3 + ul,
  .vyo-info-page--privacy > h2 + ul,
  .vyo-info-page--privacy > h3 + ul {
    border-radius: 0 0 18px 18px;
  }
}