/* Ein- und Auspacken: Einstieg D2 (Foto volle Breite, Fläche unten links) */
.vp-hero__buehne { position: relative; height: clamp(620px, 80vh, 860px); }
.vp-hero__buehne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-hero__flaeche { position: absolute; left: 0; bottom: 0; width: min(680px, 94vw); padding: clamp(28px, 3.6vw, 48px) clamp(24px, 4vw, 52px) clamp(28px, 3.6vw, 48px) max(16px, calc((100vw - 1240px) / 2)); background: var(--grund); border-top-right-radius: var(--r); }
.vp-hero .krumen { margin-bottom: 18px; }
.vp-hero h1 { font: 400 clamp(34px, 3.6vw, 50px)/1.06 var(--serif); letter-spacing: -0.022em; color: var(--titel); text-wrap: balance; }
.vp-hero h1 em { display: block; color: var(--akzent-text); }
.vp-hero__lead { margin-top: 16px; max-width: 32em; font-size: 18px; line-height: 1.7; color: var(--text-2); }
.vp-hero__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
@media (max-width: 960px) {
  .vp-hero__buehne { height: auto; }
  .vp-hero__buehne > img { position: static; height: 320px; }
  .vp-hero__flaeche { position: static; width: auto; padding: 28px 16px 36px; border-radius: 0; }
  .vp-hero__aktion .knopf { width: 100%; justify-content: center; white-space: nowrap; font-size: 15px; padding-inline: 16px; }
}

/* Fünf Gründe (U1) */
.vp-gr { padding-block: clamp(64px, 8vw, 112px); }
.vp-gr__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.vp-gr__foto { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; }
.vp-gr__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-gr__liste { margin: 26px 0 30px; padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.vp-gr__liste li { padding-block: 18px; border-bottom: 1px solid var(--linie); }
.vp-gr__f { font: 400 24px/1.2 var(--serif); color: var(--titel); }
.vp-gr__a { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-weight: 600; color: var(--text); }
.vp-gr__a .i { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--gold); color: #fff; }
@media (max-width: 960px) { .vp-gr__in { grid-template-columns: 1fr; } .vp-gr__foto { aspect-ratio: 4 / 3; } }

/* Übergang: alte Info-Abschnitte ohne linke Leiste */

/* Gründe als Raster in zwei Spalten, der fünfte über die volle Breite */
.vp-gr__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.vp-gr__liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) { .vp-gr__liste { grid-template-columns: 1fr; } }

/* Weicher Übergang: das Einstiegsfoto läuft unten ins Weiß aus */
.vp-hero__buehne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to bottom, transparent, var(--grund)); pointer-events: none; }
.vp-hero__flaeche { z-index: 1; }
.vp-gr { padding-top: clamp(40px, 5vw, 72px); }
@media (max-width: 960px) { .vp-hero__buehne::after { display: none; } }

/* Gründe minimal: ohne Linien, Haken vorne, Knopf als sechstes Feld */
.vp-gr__liste { border-top: 0; gap: 34px 40px; margin: 34px 0 0; }
.vp-gr__liste li { position: relative; padding: 0 0 0 40px; border: 0; }
.vp-gr__liste li:last-child:nth-child(odd) { grid-column: auto; }
.vp-gr__liste li:not(.vp-gr__cta)::before { content: ""; position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.vp-gr__f { font: 400 23px/1.2 var(--serif); }
.vp-gr__a { display: block; margin-top: 6px; font-weight: 500; color: var(--text-2); }
.vp-gr__a .i { display: none; }
.vp-gr__cta { padding-left: 0 !important; align-self: center; }
@media (max-width: 640px) { .vp-gr__liste { gap: 26px; } }
@media (max-width: 1100px) { .vp-gr__cta { grid-column: 1 / -1; } }

/* Das packen Sie besser selbst: Zeichnung links, vier Dinge mit Grund rechts */
.vp-ws { padding-block: clamp(72px, 9vw, 120px); }
.vp-ws__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.vp-ws__bild img { display: block; width: 100%; height: auto; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.vp-ws__bild.wartet img { opacity: 0; transform: translateY(24px); }
.vp-ws__lead { margin-top: 18px; max-width: 31em; font-size: 18px; line-height: 1.7; color: var(--text-2); }
.vp-ws__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; margin: 40px 0 0; padding: 0; list-style: none; }
.vp-ws__liste li { display: flex; gap: 16px; }
.vp-ws__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--gold) 14%, var(--karte)); color: var(--akzent-text); }
.vp-ws__ic .i { width: 20px; height: 20px; }
.vp-ws__liste h3 { font: 400 22px/1.2 var(--serif); color: var(--titel); }
.vp-ws__was { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--text); }
.vp-ws__warum { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 960px) { .vp-ws__in { grid-template-columns: 1fr; } .vp-ws__bild { max-width: 440px; } }
@media (max-width: 640px) { .vp-ws__liste { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vp-ws__bild img { transition: none; } }

/* Zwei Wege: alles einpacken oder nur das Zerbrechliche */
.vp-zw { padding-block: clamp(64px, 8vw, 112px); background: var(--flaeche); }
.vp-zw__t { max-width: 22em; margin-inline: auto; text-align: center; }
.vp-zw__karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: clamp(36px, 4vw, 52px) auto 0; }
.vp-zw__k { padding: 14px 14px 32px; border-radius: 26px; background: var(--karte); }
.vp-zw__k > :not(.vp-zw__foto) { margin-inline: 14px; }
.vp-zw__foto { aspect-ratio: 16 / 9; margin-bottom: 22px; border-radius: 16px; overflow: hidden; }
.vp-zw__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-zw__k h3 { font: 400 28px/1.2 var(--serif); color: var(--titel); }
.vp-zw__k p { margin-top: 8px; font-size: 16.5px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.vp-zw__band { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 40px; margin: 28px 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; color: var(--text-2); }
.vp-zw__band li { display: flex; align-items: center; gap: 10px; }
.vp-zw__band .i { width: 20px; height: 20px; color: var(--akzent-text); }
@media (max-width: 960px) { .vp-zw__karten { grid-template-columns: 1fr; } }

/* Anhang an die zwei Wege: Farbsystem mit Aufklebern auf Karton und Türzarge */
.vp-fs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center; max-width: 980px; margin: clamp(64px, 8vw, 96px) auto 0; }
.vp-fs__t { font: 400 26px/1.2 var(--serif); color: var(--titel); }
.vp-fs__t em { font-style: italic; color: var(--akzent-text); }
.vp-fs__p { margin-top: 10px; max-width: 34em; font-size: 16.5px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.vp-fs__paar { display: flex; }
.vp-fs__paar figure { width: 190px; margin: 0; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; outline: 6px solid var(--flaeche); }
.vp-fs__paar figure + figure { margin-left: -36px; }
.vp-fs__paar img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .vp-fs { grid-template-columns: 1fr; gap: 28px; } .vp-fs__paar figure { width: 150px; } }