/* VarioTrade HP Renew – Box auf der Artikelseite und Seite /hp-renew-schweiz.
   Farben aus VariotradeChild/_variables.scss: HP-Blau fuer Aktionen, Gruen nur fuer
   Renew/Ersparnis (wie .vt-condition-renew), Fast-Schwarz fuer die Buehne. */
:root {
    --vtr-blau: #0B5FD6;
    --vtr-blau-dunkel: #0A48A6;
    --vtr-gruen: #15803D;
    --vtr-gruen-flaeche: #E3F4E9;
    --vtr-nacht: #111418;
    --vtr-text: #16181C;
    --vtr-grau: #6B7075;
    --vtr-grau-dunkel: #3A3F45;
    --vtr-flaeche: #F5F6F7;
    --vtr-linie: #E3E5E8;
    --vtr-radius: 12px;
}

/* ---------- Gemeinsam ---------- */
.vtr-chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--vtr-gruen-flaeche);
    color: var(--vtr-gruen);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.vtr-kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vtr-grau);
}

/* ---------- Box auf der Artikelseite ---------- */
.vtr-box {
    margin: 16px 0;
    padding: 16px 18px;
    border: 1px solid var(--vtr-linie);
    border-left: 4px solid var(--vtr-gruen);
    border-radius: var(--vtr-radius);
    background: #fff;
    font-size: 14px;
    line-height: 1.45;
    color: var(--vtr-text);
}
.vtr-box-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.vtr-box-kopf strong { font-size: 15px; }
.vtr-box-preise {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}
.vtr-box-betrag {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.vtr-box-statt {
    color: var(--vtr-grau);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.vtr-box-spar {
    display: inline-block;
    margin: 6px 0 4px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--vtr-gruen-flaeche);
    color: var(--vtr-gruen);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.vtr-box-punkte {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.vtr-box-punkte li {
    position: relative;
    padding-left: 20px;
    margin-top: 3px;
    color: var(--vtr-grau-dunkel);
}
.vtr-box-punkte li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: .45em;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--vtr-gruen);
    border-bottom: 2px solid var(--vtr-gruen);
    transform: rotate(-45deg);
}
.vtr-box-leise { color: var(--vtr-grau); font-size: 13px; }
p.vtr-box-leise { margin: 8px 0 0; }
.vtr-box-liste {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}
.vtr-box-liste li + li { border-top: 1px solid var(--vtr-linie); }
.vtr-box-liste a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    color: var(--vtr-text);
    text-decoration: none;
}
.vtr-box-liste a:hover span { color: var(--vtr-blau); text-decoration: underline; }
.vtr-box-liste b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vtr-box-aktion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-top: 12px;
}
.vtr-box-mehr {
    color: var(--vtr-blau);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.vtr-box-mehr--leise { color: var(--vtr-grau-dunkel); font-weight: 400; }

/* ---------- Seite /hp-renew-schweiz ---------- */
/* JTL setzt den Seitentitel als eigene h1 ueber den Inhalt; die Buehne hat ihre eigene.
   body#vt_renew_seite = Identifier des Frontend-Links, gilt also nur auf dieser Seite. */
body#vt_renew_seite .index-heading-wrapper { display: none; }
.vtr-seite {
    color: var(--vtr-text);
    font-size: 16px;
    line-height: 1.55;
}
.vtr-seite section { margin-bottom: 56px; }
.vtr-seite h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
}
.vtr-kopf { max-width: 720px; margin-bottom: 24px; }
.vtr-kopf p { color: var(--vtr-grau-dunkel); margin: 0; }

/* Buehne */
.vtr-seite .vtr-buehne {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 32px;
    align-items: end;
    margin-top: 8px;
    padding: clamp(24px, 5vw, 56px);
    border-radius: 20px;
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(21, 128, 61, .35), rgba(21, 128, 61, 0) 70%),
        var(--vtr-nacht);
    color: #fff;
}
.vtr-buehne .vtr-kicker { color: #9FE3B8; }
.vtr-buehne h1 {
    margin: 0 0 16px;
    font-size: clamp(30px, 4.6vw, 52px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: #fff;
}
.vtr-buehne h1 em { font-style: normal; color: #7DDB9E; }
.vtr-buehne p { max-width: 560px; margin: 0 0 24px; color: #D7DADE; font-size: 17px; }
.vtr-buehne-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.vtr-zahlen {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.vtr-zahlen li {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--vtr-radius);
    background: rgba(255, 255, 255, .05);
}
.vtr-zahlen b {
    display: block;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.vtr-zahlen span { color: #C4C8CD; font-size: 13px; line-height: 1.4; }

/* Gruende */
.vtr-gruende {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.vtr-gruende article {
    padding: 24px;
    border-radius: var(--vtr-radius);
    background: var(--vtr-flaeche);
}
.vtr-gruende-nr { color: var(--vtr-gruen); font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.vtr-gruende h2 { margin-top: 6px; font-size: 22px; }
.vtr-gruende p { margin: 0; color: var(--vtr-grau-dunkel); }

/* Vergleich */
.vtr-paare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.vtr-paar {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--vtr-linie);
    border-radius: var(--vtr-radius);
    background: #fff;
}
.vtr-paar img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 12px;
}
.vtr-paar h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.vtr-paar-ausstattung { margin: 0 0 12px; color: var(--vtr-grau); font-size: 13px; line-height: 1.4; }
.vtr-paar dl { margin: auto 0 0; }
.vtr-paar dl div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px solid var(--vtr-linie);
}
.vtr-paar dt { font-weight: 400; color: var(--vtr-grau-dunkel); }
.vtr-paar dd { margin: 0; font-variant-numeric: tabular-nums; }
.vtr-paar-neu { color: var(--vtr-grau); text-decoration: line-through; }
.vtr-paar-renew { font-size: 20px; font-weight: 700; }
.vtr-paar-spar {
    margin: 4px 0 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--vtr-gruen-flaeche);
    color: var(--vtr-gruen);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.vtr-paar-garantie { margin: 0 0 12px; color: var(--vtr-grau); font-size: 12.5px; line-height: 1.4; }

/* Ablauf */
.vtr-schritte {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: vtr;
}
.vtr-schritte li {
    position: relative;
    padding: 52px 18px 18px;
    border-top: 3px solid var(--vtr-gruen);
    background: var(--vtr-flaeche);
    border-radius: 0 0 var(--vtr-radius) var(--vtr-radius);
    counter-increment: vtr;
}
.vtr-schritte li::before {
    content: counter(vtr);
    position: absolute;
    top: 14px;
    left: 18px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vtr-gruen);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 26px;
    text-align: center;
}
.vtr-schritte b { display: block; margin-bottom: 4px; }
.vtr-schritte span { color: var(--vtr-grau-dunkel); font-size: 14px; }

/* Sortiment */
.vtr-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.vtr-sprung a {
    padding: 6px 14px;
    border: 1px solid var(--vtr-linie);
    border-radius: 999px;
    color: var(--vtr-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.vtr-sprung a:hover { border-color: var(--vtr-blau); color: var(--vtr-blau); }
.vtr-gruppe { margin-bottom: 32px; scroll-margin-top: 120px; }
.vtr-gruppe h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.vtr-gruppe h3 span { color: var(--vtr-grau); font-weight: 400; font-size: 15px; }
.vtr-alle a { font-weight: 600; color: var(--vtr-blau); }

/* Rechner */
.vtr-seite .vtr-rechner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: clamp(20px, 4vw, 40px);
    border-radius: 20px;
    background: var(--vtr-gruen-flaeche);
}
.vtr-rechner p { margin: 0; color: var(--vtr-grau-dunkel); }
.vtr-rechner-feld {
    display: grid;
    gap: 10px;
    padding: 20px;
    border-radius: var(--vtr-radius);
    background: #fff;
}
.vtr-rechner-feld label { margin: 0; font-weight: 600; font-size: 14px; }
.vtr-rechner-feld input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--vtr-linie);
    border-radius: 8px;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}
.vtr-rechner-feld output { font-size: 15px; color: var(--vtr-grau-dunkel); }
.vtr-rechner-feld output b {
    font-size: 32px;
    color: var(--vtr-gruen);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* Fragen */
.vtr-fragen details {
    max-width: 820px;
    border-bottom: 1px solid var(--vtr-linie);
}
.vtr-fragen summary {
    padding: 14px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 17px;
}
.vtr-fragen details p { margin: 0 0 16px; color: var(--vtr-grau-dunkel); }

/* Schmal */
@media (max-width: 991.98px) {
    .vtr-seite .vtr-buehne,
    .vtr-seite .vtr-rechner { grid-template-columns: 1fr; }
    .vtr-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .vtr-gruende,
    .vtr-schritte { grid-template-columns: 1fr; }
    .vtr-seite section { margin-bottom: 40px; }
    .vtr-buehne-knoepfe .btn { width: 100%; }
}