/*! HPN VIP-Seite
    Gehört zu den Sektionen sections/hpn-vip-*.liquid und zur Vorlage
    templates/page.vip.json. Gebaut am 22.09.2026 aus dem HiFi-Entwurf
    WERKSTATT/vip-landingpage/2026-09-20-konzept im Kundenordner, danach
    von Sami gegen das Designsystem geprüft und angepasst.

    WAS GEGENÜBER DEM ENTWURF ANDERS IST, mit Grund:
      Farben      Keine abgeschauten Werte mehr, alles aus dem Theme:
                  Lack-Verlauf und Obsidian aus den Button-Einstellungen,
                  Text aus --color-foreground, Akzent #C25E17 wie die
                  Dachzeilen im Shop (hpn-wissen-teaser.css), Apricot
                  #DE9672 aus dem Must-haves-Etikett des Designers.
      Verläufe    Nie über eine ganze Fläche (Formsprache des Designers,
                  03.09.2026). Nur aus einer Ecke über einen Ausschnitt.
      Rahmen      Keine um Karten, Felder oder Bilder (Sami 22.09.2026).
                  Karten tragen den Schatten von .hpn-kachel, getrennt wird
                  mit Haarlinien.
      Typografie  Größe und Gewicht aus den Theme-Klassen (TYPOGRAFIE.md).
                  Einzige Ausnahme sind die großen Prozentzahlen der Stufen,
                  siehe dort.
      Radien      --card-radius, --buttons-radius, --inputs-radius.

    Inhaltsebenen stehen in .page-width.relative, weil .section::before
    sonst jeden nicht positionierten Inhalt zudeckt (STATUS.md).
*/.hpn-vip{--vip-akzent: #C25E17;--vip-apricot: #DE9672;--vip-silber: #F7F8FA;--vip-lack-1: #344F61;--vip-haarlinie: rgb(var(--color-foreground) / .09);--vip-leise: rgb(var(--color-foreground) / .72);--vip-schatten: 0 1px 2px rgb(var(--color-shadow) / .06), 0 12px 28px -10px rgb(var(--color-shadow) / .16)}/*! Dunkle Fläche. Die Farben laufen über die Theme-Variablen, dann malt
   .section::before die Fläche und alle Theme-Klassen (heading, button,
   input) schalten von selbst auf hell. Der Lack-Ton kommt nur aus der
   oberen linken Ecke, nicht über die volle Breite. */.hpn-vip--dunkel{--color-background: var(--color-button-background);--color-foreground: 255 255 255;--gradient-background: radial-gradient(ellipse 70% 90% at 0% 0%, rgb(52 79 97 / .9) 0%, rgb(52 79 97 / 0) 70%);--vip-haarlinie: rgb(255 255 255 / .14);--vip-leise: rgb(255 255 255 / .72)}.hpn-vip--silber{--color-background: 247 248 250;--gradient-background: none}.hpn-vip__dachzeile{margin:0 0 var(--sp-4);font-size:12px;font-weight:var(--font-bold);letter-spacing:.1em;text-transform:uppercase;color:var(--vip-akzent)}.hpn-vip--dunkel .hpn-vip__dachzeile{color:var(--vip-apricot)}.hpn-vip__leise{color:var(--vip-leise)}.hpn-vip__akzent{color:var(--vip-akzent)}.hpn-vip__zweispaltig{display:grid;gap:var(--sp-8) var(--sp-16);align-items:center}@media screen and (min-width:1024px){.hpn-vip__zweispaltig{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.hpn-vip__kopf{display:grid;gap:var(--sp-4) var(--sp-16);margin-bottom:var(--sp-10)}@media screen and (min-width:1024px){.hpn-vip__kopf{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:end}}.hpn-vip__kopf p{margin:0;max-width:34rem}/*! ---------- Hero ---------- */.hpn-vip-hero h1{margin:0}.hpn-vip-hero__text>*+*{margin-top:var(--sp-5)}.hpn-vip-hero__text p{max-width:34rem}.hpn-vip-hero__text .subtext-lg>p{margin:0}.hpn-vip-hero__text .subtext-lg>p+p{margin-top:var(--sp-3)}/*! Der Sofortvorteil. Gefüllte dunkle Pille, das Bauteil des Designers für
   harte Aussagen. Bewusst nicht der Button-Verlauf, damit sie nicht wie
   ein zweiter Knopf aussieht. */.hpn-vip-pille{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-8);padding:var(--sp-2) var(--sp-4);border-radius:999px;background:rgb(var(--color-button-background));color:rgb(var(--color-button-text));font-size:var(--text-sm);font-weight:var(--font-semibold);line-height:1.3}.hpn-vip-pille .icon{flex:none;width:16px;height:16px}.hpn-vip-hero__bild{position:relative;overflow:hidden;border-radius:var(--card-radius);aspect-ratio:4 / 5;background:rgb(var(--color-foreground) / .04)}@media screen and (min-width:1024px){.hpn-vip-hero__bild{aspect-ratio:1 / 1}}.hpn-vip-bild img,.hpn-vip-hero__bild img{display:block;width:100%;height:100%;object-fit:cover}/*! Bildunterschrift auf dem Foto. Der Schleier ist eine Lesehilfe über dem
   unteren Bildrand, keine Dekoration. */.hpn-vip-bild__text{position:absolute;inset:auto 0 0 0;padding:var(--sp-16) var(--sp-6) var(--sp-6);background:linear-gradient(to bottom,#0000,#0000009e);color:#fff}.hpn-vip-bild__text strong{display:block;font-weight:var(--font-bold)}.hpn-vip-bild__text span{display:block;margin-top:var(--sp-1);color:#fffc}/*! Nutzenleiste unter dem Hero. Fläche ja, Linien nein. */.hpn-vip-leiste{display:grid;gap:var(--sp-5) var(--sp-8);margin:0;padding:0;list-style:none}@media screen and (min-width:768px){.hpn-vip-leiste{grid-template-columns:repeat(3,minmax(0,1fr))}}.hpn-vip-leiste li{display:flex;gap:var(--sp-3);align-items:flex-start}.hpn-vip-leiste .icon{flex:none;width:20px;height:20px;margin-top:2px;color:var(--vip-akzent)}.hpn-vip-leiste strong{display:block;font-weight:var(--font-bold)}/*! ---------- Formular ---------- */.hpn-vip-mailfeld{margin-top:var(--sp-4);max-width:34rem}.hpn-vip-mailfeld__zeile{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.hpn-vip-mailfeld__zeile .input{flex:1 1 16rem;min-width:0}.hpn-vip-mailfeld__zeile .button{flex:0 0 auto}@media screen and (max-width:767px){.hpn-vip-mailfeld__zeile .button{flex-basis:100%}}.hpn-vip-mailfeld__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.hpn-vip-mailfeld__hinweis,.hpn-vip-mailfeld__meldung{margin:var(--sp-3) 0 0}.hpn-vip-mailfeld__hinweis a{color:inherit;text-decoration:underline;text-underline-offset:2px}.hpn-vip-mailfeld__meldung[data-art=erfolg]{font-weight:var(--font-semibold)}.hpn-vip-mailfeld__meldung[data-art=fehler]{color:rgb(var(--color-error-text, 156 13 56))}.hpn-vip--dunkel .hpn-vip-mailfeld__meldung[data-art=fehler]{color:var(--vip-apricot)}/*! Auf dunkler Fläche wird der Theme-Button hell. Nur die Farbvariablen
   werden umgestellt, Form, Größe und Verhalten bleiben die des Themes. */.hpn-vip--dunkel .button--primary{--color-button-background: 255 255 255;--color-button-text: 26 40 49;--color-button-gradient: none}/*! ---------- Haltung ---------- */.hpn-vip-haltung__text>p{margin:0;max-width:34rem}.hpn-vip-haltung__text>p+p{margin-top:var(--sp-4)}.hpn-vip-haltung h2{margin:0}/*! ---------- Stufen ---------- */.hpn-vip-stufen__liste{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--vip-haarlinie)}@media screen and (min-width:768px){.hpn-vip-stufen__liste{grid-template-columns:repeat(3,minmax(0,1fr))}}.hpn-vip-stufe{display:flex;flex-direction:column;padding:var(--sp-6) 0;border-bottom:1px solid var(--vip-haarlinie)}@media screen and (min-width:768px){.hpn-vip-stufe{padding:var(--sp-6) var(--sp-8) var(--sp-8);border-bottom:0}.hpn-vip-stufe:first-child{padding-inline-start:0}.hpn-vip-stufe+.hpn-vip-stufe{border-inline-start:1px solid var(--vip-haarlinie)}}.hpn-vip-stufe__kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}/*! Drei Schrägstriche als Stufenanzeige, das Kursivmotiv des Logos. Aktive
   Striche in Apricot, die übrigen als Haarlinienton. */.hpn-vip-stufe__striche{display:inline-flex;gap:3px}.hpn-vip-stufe__striche span{width:3px;height:14px;border-radius:1px;background:var(--vip-haarlinie);transform:skew(-18deg)}.hpn-vip-stufe__striche span.is-aktiv{background:var(--vip-apricot)}/*! Die große Prozentzahl. Fett wie die Hero-Zahl der Faktenbox, Laufweite
   und Tabellenziffern wie dort. Die Größe steht als Zahl, weil die
   Überschriften-Skala bei 52px endet und diese Zahl bewusst größer ist:
   sie ist die Hauptaussage der Seite. */.hpn-vip-stufe__zahl{display:flex;align-items:baseline;gap:4px;margin:var(--sp-6) 0 0;font-size:clamp(56px,6.5vw,88px);font-weight:var(--font-bold);line-height:.95;letter-spacing:-.045em;font-variant-numeric:tabular-nums}.hpn-vip-stufe__zahl span{font-size:.42em;font-weight:var(--font-medium);letter-spacing:0}.hpn-vip-stufe__art{margin:var(--sp-2) 0 0}.hpn-vip-stufe__schwelle{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--vip-haarlinie)}.hpn-vip-stufe__schwelle p{margin:0}.hpn-vip-stufe__bleibt{display:flex;gap:var(--sp-2);align-items:center;margin:var(--sp-4) 0 0}.hpn-vip-stufe__bleibt .icon{flex:none;width:16px;height:16px;color:var(--vip-apricot)}.hpn-vip-stufen__fuss{display:grid;gap:var(--sp-4) var(--sp-16);margin-top:var(--sp-8)}@media screen and (min-width:768px){.hpn-vip-stufen__fuss{grid-template-columns:repeat(2,minmax(0,1fr))}}.hpn-vip-stufen__fuss p{margin:0}.hpn-vip-stufen__fuss strong{display:block;font-weight:var(--font-bold)}/*! ---------- Specials ---------- */.hpn-vip-anlaesse{display:grid;gap:var(--sp-5)}@media screen and (min-width:768px){.hpn-vip-anlaesse{grid-template-columns:repeat(2,minmax(0,1fr))}}/*! Anlass-Karte. Kein Rahmen, Radius und Schatten wie .hpn-kachel. Der
   Verlauf kommt aus der oberen rechten Ecke und läuft über einen Teil der
   Karte, wie auf den Etiketten des Designers. */.hpn-vip-anlass{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:20rem;padding:var(--sp-8);overflow:hidden;border-radius:var(--card-radius);box-shadow:var(--vip-schatten);background-color:rgb(var(--color-background))}.hpn-vip-anlass--dunkel{--color-foreground: 255 255 255;background-color:rgb(var(--color-button-background));background-image:radial-gradient(ellipse 80% 90% at 100% 0%,#344f61f2,#344f6100 70%);color:#fff}.hpn-vip-anlass--apricot{background-image:radial-gradient(ellipse 85% 95% at 100% 0%,#de96728c,#de967200 72%)}.hpn-vip-anlass__marke{margin:0;font-size:12px;font-weight:var(--font-semibold);letter-spacing:.1em;text-transform:uppercase;opacity:.8}.hpn-vip-anlass h3{margin:var(--sp-10) 0 0}.hpn-vip-anlass__fuss{margin:var(--sp-8) 0 0;padding-top:var(--sp-4);border-top:1px solid rgb(var(--color-foreground) / .14)}.hpn-vip-mehr{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-10);align-items:center;justify-content:space-between;margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--vip-haarlinie)}.hpn-vip-mehr p{margin:var(--sp-2) 0 0;max-width:40rem}.hpn-vip-mehr h3{margin:0}/*! ---------- Anrechnung ---------- */.hpn-vip-schritte{margin:var(--sp-8) 0 0;padding:0;list-style:none;border-top:1px solid var(--vip-haarlinie)}.hpn-vip-schritt{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--sp-2);padding:var(--sp-5) 0;border-bottom:1px solid var(--vip-haarlinie)}.hpn-vip-schritt__nr{padding-top:3px;font-size:var(--text-sm);font-weight:var(--font-semibold);font-variant-numeric:tabular-nums;color:var(--vip-akzent)}.hpn-vip-schritt h3,.hpn-vip-schritt p{margin:0}.hpn-vip-schritt p{margin-top:var(--sp-1)}.hpn-vip-anrechnung h2{margin:0}.hpn-vip-anrechnung__intro{margin:var(--sp-5) 0 0;max-width:34rem}.hpn-vip-bild{position:relative;overflow:hidden;border-radius:var(--card-radius);aspect-ratio:1 / 1;background:rgb(var(--color-foreground) / .04)}/*! ---------- Fragen ---------- */.hpn-vip-fragen__kopf h2{margin:0}.hpn-vip-fragen__kopf p{margin:var(--sp-4) 0 0;max-width:26rem}@media screen and (min-width:1024px){.hpn-vip-fragen__raster{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-16);align-items:start}}.hpn-vip-fragen__liste{margin-top:var(--sp-8);border-top:1px solid var(--vip-haarlinie)}@media screen and (min-width:1024px){.hpn-vip-fragen__liste{margin-top:0}}.hpn-vip-frage{border-bottom:1px solid var(--vip-haarlinie)}.hpn-vip-frage summary{display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between;padding:var(--sp-5) 0;cursor:pointer;list-style:none}.hpn-vip-frage summary::-webkit-details-marker{display:none}.hpn-vip-frage summary:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:4px}.hpn-vip-frage__zeichen{position:relative;flex:none;width:14px;height:14px;color:var(--vip-akzent)}.hpn-vip-frage__zeichen:before,.hpn-vip-frage__zeichen:after{content:"";position:absolute;inset:6px 0 auto 0;height:2px;border-radius:1px;background:currentColor;transition:transform .25s ease}.hpn-vip-frage__zeichen:after{transform:rotate(90deg)}.hpn-vip-frage[open] .hpn-vip-frage__zeichen:after{transform:rotate(0)}.hpn-vip-frage__antwort{padding:0 var(--sp-8) var(--sp-5) 0}.hpn-vip-frage__antwort>*{margin:0}.hpn-vip-frage__antwort>*+*{margin-top:var(--sp-3)}/*! ---------- Abschluss ---------- */.hpn-vip-abschluss__flaeche{--color-background: var(--color-button-background);--color-foreground: 255 255 255;display:grid;gap:var(--sp-8) var(--sp-16);align-items:center;padding:var(--sp-10) var(--sp-6);border-radius:var(--card-radius);background-color:rgb(var(--color-button-background));background-image:radial-gradient(ellipse 60% 100% at 0% 0%,#344f61e6,#344f6100 70%);color:#fff;--vip-haarlinie: rgb(255 255 255 / .14);--vip-leise: rgb(255 255 255 / .72)}@media screen and (min-width:768px){.hpn-vip-abschluss__flaeche{padding:var(--sp-14, 3.5rem) var(--sp-12)}}@media screen and (min-width:1024px){.hpn-vip-abschluss__flaeche{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.hpn-vip-abschluss__flaeche .hpn-vip__dachzeile{color:var(--vip-apricot)}.hpn-vip-abschluss__flaeche .button--primary{--color-button-background: 255 255 255;--color-button-text: 26 40 49;--color-button-gradient: none}.hpn-vip-abschluss__flaeche .hpn-vip-mailfeld__meldung[data-art=fehler]{color:var(--vip-apricot)}.hpn-vip-abschluss h2{margin:0}.hpn-vip-abschluss__text p{margin:var(--sp-4) 0 0;max-width:32rem}.hpn-vip-abschluss .hpn-vip-mailfeld{margin-top:0}.hpn-vip-abschluss__formular-label{margin:0 0 var(--sp-3);font-weight:var(--font-semibold)}/*! Die Dachzeile behält ihren Abstand auch dort, wo eine Umgebungsregel die
   Absätze auf margin 0 setzt (Kopfzeilen, Abschluss). */.hpn-vip .hpn-vip__kopf .hpn-vip__dachzeile,.hpn-vip .hpn-vip-fragen__kopf .hpn-vip__dachzeile,.hpn-vip .hpn-vip-abschluss__text .hpn-vip__dachzeile{margin:0 0 var(--sp-4)}/*! Auf dunkler Fläche trägt das Theme-Feld nur 2,5 Prozent Weiß und ist
   kaum zu sehen. Etwas mehr Füllung, weiterhin ohne Rahmen. */.hpn-vip-abschluss__flaeche .input{background-color:#ffffff1a}.hpn-vip-abschluss__flaeche .input:focus{background-color:#ffffff29}.hpn-vip-abschluss__flaeche .input::placeholder{color:#ffffff9e}
/*# sourceMappingURL=/cdn/shop/t/230/assets/hpn-vip.css.map */