/*
 * Palido Design-System, globale Tokens und Komponenten.
 * Quelle: https://palido.com/design-system/index.html (Stand April 2026).
 * Geliefert vom Plugin „Palido Website". Änderungen zuerst im Design-System,
 * dann hier nachziehen. Nicht im Customizer überschreiben.
 */

:root {
  --palido-pink: #AC336D;
  --palido-gold: #C9A96E;
  --palido-dark: #2A2018;
  --palido-white: #FFFFFF;
  --palido-gold-faint: #FDFAF6;
  --palido-gold-muted: rgba(201,169,110,0.35);
  --palido-dark-muted: rgba(42,32,24,0.55);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-hero: 'Sorts Mill Goudy', Georgia, serif;
  --font-ui: 'Jost', system-ui, sans-serif;
}

/* ── Buttons ─────────────────────────────────────────────── */
.p-btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  border-radius: 0;
  border: 1px solid;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}
.p-btn--ghost-gold {
  background: transparent;
  color: var(--palido-dark);
  border-color: var(--palido-gold);
}
.p-btn--ghost-gold:hover {
  background: var(--palido-pink);
  color: var(--palido-white);
  border-color: var(--palido-pink);
}
.p-btn--ghost-dark {
  background: transparent;
  color: var(--palido-dark);
  border-color: var(--palido-dark);
}
.p-btn--ghost-dark:hover {
  background: var(--palido-dark);
  color: var(--palido-white);
}
.p-btn--filled-pink {
  background: var(--palido-pink);
  color: var(--palido-white);
  border-color: var(--palido-pink);
}
.p-btn--filled-pink:hover {
  background: #8f2257;
  border-color: #8f2257;
}
.p-btn--ghost-white {
  background: transparent;
  color: var(--palido-white);
  border-color: rgba(255,255,255,0.6);
}
.p-btn--ghost-white:hover {
  background: var(--palido-pink);
  color: var(--palido-white);
  border-color: var(--palido-pink);
}

/* ── Ratgeber-Navigation „In diesem Ratgeber" ────────────── */
.p-ratgeber {
  width: 100%;
  background: #FFFFFF;
  padding: 28px 0 24px;
  box-sizing: border-box;
}
.p-ratgeber__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.p-ratgeber__label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--palido-gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.p-ratgeber__line {
  flex: 1;
  height: 1px;
  background: var(--palido-gold-muted);
}
.p-ratgeber__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 32px;
}
.p-ratgeber__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.p-ratgeber__num {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--palido-gold);
  min-width: 18px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.p-ratgeber__link {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  color: var(--palido-dark);
  text-decoration: none;
  letter-spacing: 0.1px;
  line-height: 1.45;
  transition: color 0.2s;
  cursor: pointer;
}
.p-ratgeber__item:hover .p-ratgeber__num { color: var(--palido-pink); }
.p-ratgeber__item:hover .p-ratgeber__link { color: var(--palido-pink); }
@media (max-width: 768px) {
  .p-ratgeber__list { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Badges / Labels ─────────────────────────────────────── */
.p-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid;
}
.p-badge--gold { color: var(--palido-gold); border-color: var(--palido-gold); background: transparent; }
.p-badge--pink { color: var(--palido-white); border-color: var(--palido-pink); background: var(--palido-pink); }
.p-badge--dark { color: var(--palido-white); border-color: var(--palido-dark); background: var(--palido-dark); }
.p-badge--outline-dark { color: var(--palido-dark); border-color: var(--palido-dark); background: transparent; }

/* ── Inline-Links ────────────────────────────────────────── */
.p-link {
  position: relative;
  display: inline-block;
  color: var(--palido-dark);
  text-decoration: none;
  cursor: pointer;
}
.p-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--palido-pink);
  display: block;
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 0.5s;
}
.p-link:hover::after { transform: scaleX(0); transform-origin: right center; }
.p-link:hover { color: var(--palido-pink); }
.p-link--gold::after { background: var(--palido-gold); }
.p-link--gold:hover::after { transform: scaleX(0); transform-origin: right center; }
.p-link--gold:hover { color: var(--palido-gold); }

/* ── Trennelemente ───────────────────────────────────────── */
.p-divider--gold { border: none; border-top: 1px solid var(--palido-gold-muted); }
.p-divider--dark { border: none; border-top: 1px solid rgba(42,32,24,0.15); }
.p-divider--label { display: flex; align-items: center; gap: 16px; }
.p-divider--label span {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--palido-gold);
  white-space: nowrap;
}
.p-divider--label::before,
.p-divider--label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--palido-gold-muted);
}