/* vona: öffentliche Seiten von news.vonalab.com im Stil von vonalab.com.
   Wird nach style.css von listmonk geladen; Einstellungen → Aussehen → Öffentlich kann weiterhin ergänzen. */
:root {
  --vona-bg: #f4f4f5;
  --vona-card: #ffffff;
  --vona-line: #e4e4e7;
  --vona-fg: #18181b;
  --vona-muted: #52525b;
  --vona-subtle: #71717a;
  --vona-link: #2563eb;
  --vona-accent: #3b82f6;
  --vona-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --vona-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  background: var(--vona-bg);
  color: var(--vona-fg);
  font-family: var(--vona-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vona-link); text-decoration-color: rgba(37, 99, 235, 0.35); text-underline-offset: 2px; }
a:hover { color: var(--vona-fg); }

h1, h2, h3, h4 { font-weight: 600; color: var(--vona-fg); letter-spacing: -0.01em; }
h2 { font-size: 24px; line-height: 32px; margin: 0 0 20px; }
h3 { font-size: 17px; line-height: 26px; margin: 24px 0 10px; }
label { color: var(--vona-muted); }

.container { margin: 56px auto 0; max-width: 560px; }
.wrap {
  background: var(--vona-card);
  border: 1px solid var(--vona-line);
  border-radius: 12px;
  box-shadow: none;
  padding: 36px 40px 40px;
}

.header { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.header .logo img { display: block; width: 142px; max-width: 142px; height: auto; }

input[type="text"], input[type="email"], input[type="password"], select {
  font: inherit;
  color: var(--vona-fg);
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  box-shadow: none;
  padding: 10px 14px;
  margin-top: 4px;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--vona-accent);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--vona-fg); width: 16px; height: 16px; vertical-align: -2px; margin: 0 8px 0 0; }

.button {
  background: var(--vona-fg);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  padding: 12px 24px;
  border-radius: 8px;
  min-width: 0;
}
.button:hover { background: #3f3f46; color: #fff; }
.button:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.4); outline-offset: 2px; }
.button.button-outline { background: #fff; border: 1px solid #d4d4d8; color: var(--vona-fg); }
.button.button-outline:hover { background: var(--vona-bg); border-color: #a1a1aa; color: var(--vona-fg); }

/* Listen im Formular als ruhige Kacheln */
.lists h2 { font-family: var(--vona-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vona-subtle); margin: 28px 0 10px; }
.lists li { margin: 0 0 8px; }
.lists .description { color: var(--vona-subtle); margin: 2px 0 12px 24px; }

.vona-consent { display: flex; gap: 0; align-items: flex-start; margin: 24px 0 0; }
.vona-consent input { flex: none; margin-top: 4px; }
.vona-consent label { font-size: 14px; line-height: 22px; color: var(--vona-muted); }

.unsub-all, .data-form { border-top: 1px solid var(--vona-line); }
.data-form { margin-top: 8px; padding-top: 28px; }
.row { color: var(--vona-muted); font-size: 15px; }
.row strong { color: var(--vona-fg); font-weight: 600; }
.error { color: #dc2626; }

.archive li { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--vona-line); }
.archive li:last-child { border-bottom: 0; }
.archive a { font-weight: 600; text-decoration: none; color: var(--vona-fg); }
.archive a:hover { color: var(--vona-link); }
.archive .date { font-family: var(--vona-mono); font-size: 12px; color: var(--vona-subtle); }
.pg-page.pg-selected { text-decoration: none; color: var(--vona-fg); }

.home-options a { color: var(--vona-muted); }

footer.container.vona-footer { margin: 22px auto 44px; padding: 0 24px; color: var(--vona-subtle); font-size: 12px; line-height: 18px; }
.vona-footer p { margin: 0 0 6px; }
.vona-footer .vona-claim { font-weight: 600; color: var(--vona-muted); }
.vona-footer a { color: var(--vona-subtle); text-decoration: underline; text-decoration-color: rgba(113, 113, 122, 0.4); }
.vona-footer a:hover { color: var(--vona-fg); }

@media screen and (max-width: 650px) {
  .container { margin-top: 24px; }
  .container.wrap { margin-left: 12px; margin-right: 12px; padding: 26px 22px 30px; }
  h2 { font-size: 21px; line-height: 28px; }
}