/* TipsyTales Unterseiten: gleicher Look wie die Startseite (Partyknaller-Karten, Nunito/Sriracha, Nachtblau).
   Wird nach main.css und tipsy.css geladen und gilt nur für body.starter-page-page. */

body.starter-page-page {
  --ink: #0e2438;
  --table: #1b4f7a;
  --text: #16293b;
  --muted: #4a6072;
  --script: "Sriracha", "Sriracha Regular", cursive;
  --sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  font-family: var(--sans);
  color: var(--text);
  line-height: 1.65;
  font-size: 1.0625rem;
}
body.starter-page-page h1,
body.starter-page-page h2,
body.starter-page-page h3,
body.starter-page-page h4,
body.starter-page-page h5 {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.2;
}
body.starter-page-page main h2,
body.starter-page-page main h3,
body.starter-page-page main h4,
body.starter-page-page main h5 { color: var(--ink); }

/* Kopfbereich wie im Hero der Startseite */
body.starter-page-page .header { background: transparent; }
body.starter-page-page.scrolled .header { background: rgba(14, 36, 56, 0.94); }
body.starter-page-page .navmenu a { font-family: var(--sans); font-weight: 700; }

body.starter-page-page .page-title.dark-background {
  --background-color: #0e2438;
  --heading-color: #fff8e8;
  background:
    radial-gradient(34% 70% at 85% 60%, rgba(194, 24, 91, 0.28) 0%, rgba(194, 24, 91, 0) 70%),
    radial-gradient(50% 90% at 70% 40%, #245f8f 0%, rgba(36, 95, 143, 0) 70%),
    #0e2438;
}
body.starter-page-page .page-title .heading { border-top: 0; }
body.starter-page-page .page-title .heading h1 {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  font-weight: 400;
  color: #fff8e8;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
body.starter-page-page .page-title .heading p { color: #dbe9f5; }
body.starter-page-page .page-title nav { background: rgba(255, 255, 255, 0.08); }
body.starter-page-page .page-title nav a { color: #9fd6ff; }

/* Inhalt */
body.starter-page-page main section p,
body.starter-page-page main section li { max-width: 72ch; }
body.starter-page-page main section ol li { margin-bottom: 0.35rem; }
body.starter-page-page main section a:not(.btn):not(.d-block) {
  color: var(--table);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.starter-page-page main section a:not(.btn):not(.d-block):hover { color: #c2185b; }
body.starter-page-page .alert { border-radius: 14px; border: 0; }
body.starter-page-page .alert-success { background: #e1f7ea; color: #0d4a26; }
body.starter-page-page .alert-info { background: #e7f1fa; color: #0e3a5c; }

/* Fußbereich */
.footer.dark-background { --background-color: #0e2438; --surface-color: #17364f; }

body.starter-page-page a:focus-visible,
body.starter-page-page button:focus-visible {
  outline: 3px solid #f2db8e;
  outline-offset: 3px;
  border-radius: 6px;
}