/* ===========================================================================
   ratgeber-info.css – zusätzlicher, server-gerenderter Textinhalt der Startseite.
   Nutzt AUSSCHLIESSLICH die bestehenden Design-Tokens aus app.css
   (Farben + Fonts). Es werden KEINE neuen Farben oder Schriftarten eingeführt –
   der Look des Quiz bleibt unverändert, es kommt nur Inhalt dazu.
   =========================================================================== */

.rs-wrap {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(2.5rem, 6vw, 5rem) 1.25rem clamp(3rem, 7vw, 6rem);
  border-top: 1px solid rgba(200, 162, 74, .14);
}
.rs-inner { max-width: 760px; margin: 0 auto; }

.rs-section { margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.rs-section:last-child { margin-bottom: 0; }

.rs-h {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 3.2vw, 1.7rem);
  letter-spacing: .01em;
  color: var(--cream);
  margin: 0 0 .7rem;
}

.rs-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--cream-soft);
  margin: 0 0 .8rem;
}
.rs-p:last-child { margin-bottom: 0; }

.rs-list {
  list-style: none;
  margin: .4rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.rs-list li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cream-soft);
  position: relative;
  padding-left: 1.1rem;
}
.rs-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .4rem; height: .4rem;
  border-radius: 50%;
  background: var(--gold);
}
.rs-list strong { color: var(--cream); font-weight: 600; }

.rs-cta { margin: 1rem 0 0; }

.rs-btn {
  display: inline-block;
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  font-size: .98rem;
  color: var(--ink);
  background: var(--gold-sheen);
  padding: .7rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-glow-soft);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rs-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); }

.rs-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: var(--gold-bright);
  text-decoration: none;
}
.rs-link:hover { color: var(--gold); }

.rs-grid {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.rs-chip {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--cream-soft);
  background: var(--ink-700);
  border: 1px solid rgba(200, 162, 74, .16);
  padding: .45rem .8rem;
  border-radius: 999px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rs-chip:hover {
  color: var(--ink);
  background: var(--gold-sheen);
  border-color: transparent;
}

/* Logo im Hero als Link auf /frisuren – ohne Layout-Einfluss */
.brand-logo-link { display: contents; }

.rs-noscript {
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 1rem 1.25rem;
  color: var(--cream-soft);
  font-family: 'Inter', system-ui, sans-serif;
  text-align: center;
}
.rs-noscript a { color: var(--gold-bright); }

/* Scroll-Hinweis unter dem Hero (holt Leser zum Inhalt) */
.hero-scroll {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.6rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem; letter-spacing: .02em;
  color: var(--muted); text-decoration: none;
  transition: color .15s ease;
}
.hero-scroll:hover { color: var(--gold-bright); }
.hero-scroll .chev { animation: heroScrollBounce 1.8s ease-in-out infinite; }
@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}