/* verpasst – „Was hab ich verpasst?“ und Willkommen-zurück-Hinweis */
.vp-hinweis { position: relative; background: var(--gold); padding: 14px 44px 14px 16px; margin-bottom: 16px; }
.vp-hinweis-text { font-size: 17px; line-height: 1.45; }
.vp-hinweis-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.vp-hinweis .knopf { background: var(--flaeche); text-decoration: none; }
.vp-zu { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); padding: 4px 8px; }
.vp-koepfe { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vp-koepfe a { text-decoration: none; }

.vp-wahl { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px; }
.vp-satz { font-size: 18px; margin: 0 0 16px; }
.vp-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vp-karte { margin-bottom: 16px; }
.vp-karte > .untertitel { margin: 4px 0 12px; }
.vp-momente li { align-items: flex-start; }
.vp-text { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.vp-text small { display: block; color: var(--text-3); }
.vp-held { display: flex; gap: 16px; align-items: center; }
.vp-held-name { font-size: 20px; font-weight: 700; }
.vp-gruende { margin: 6px 0 0; padding-left: 18px; }
.vp-ki { white-space: pre-line; margin: 0 0 10px; }
.vp-mehr { margin-top: 10px; }
.vp-versteckt { display: none !important; }

@media (max-width: 600px) {
  .vp-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-hinweis-text { font-size: 16px; }
}