Pilgerstorfer Classic D 4 · B-Klarinetten-Blatt

/* ============================================================ PDP Lieferblock (sv-delivery-*) + Finanzierungskasten (sv-finance-*) Ziel: Figma High Fidelity RC 1.0, Issue #142 Alle Texte in den Kästen: calc(1em - 1px) relativ zur body-Basis. Stand: 04.09.2026 ============================================================ */ /* [FEST] Schriftgrösse: alle Texte 1px kleiner als Fliesstext. Gilt fuer alle Kinder beider Kaesten automatisch per Vererbung. */ .sv-delivery-block, .sv-finance-block { font-size: calc(1em - 1px); } /* [FEST] Aeusserer Rahmen Lieferblock */ .sv-delivery-block { display: flex; flex-direction: column; border: 1px solid var(--sw-border-color); border-radius: 8px; padding: 16px 20px; background: #fff; overflow: hidden; margin-top: 16px; } .sv-delivery-row { display: flex; align-items: center; gap: 8px; /* [ANPASSBAR] war 10px, reduziert fuer Label-Platz */ padding: 10px 0; border-bottom: 1px solid var(--sw-border-color); } /* [FEST] Keine Trennlinie an letzter Zeile UND vor dem grauen Link-Streifen */ .sv-delivery-row:last-of-type, .sv-delivery-row:has(+ .sv-delivery-linkrow) { border-bottom: none; } /* [FEST] Zweizeilige Versandkosten-Zeile */ .sv-delivery-row--stacked { align-items: flex-start; } .sv-delivery-row--stacked .sv-delivery-icon-img { margin-top: 3px; /* [ANPASSBAR] Icon auf Hoehe der Label-Grossbuchstaben */ } .sv-delivery-row--stacked .sv-delivery-value { margin-top: 1px; /* [ANPASSBAR] Preis leicht anheben */ } .sv-delivery-icon { display: inline-flex; flex: 0 0 auto; color: var(--sw-text-color); } /* [FEST] sw_icon-SVG-Offset neutralisieren */ .sv-delivery-icon .icon > svg { top: 0; } /* [FEST] Labels fett – Groesse erbt vom Block-Container */ .sv-delivery-label, .sv-finance-label { color: var(--sw-text-color); font-weight: 600; } .sv-delivery-value { flex: 0 0 auto; color: var(--sw-text-color); font-weight: 700; white-space: nowrap; } .sv-delivery-text { flex: 1 1 auto; display: flex; flex-direction: column; } .sv-delivery-value--free { /* color: var(--sw-color-success, #3ca338); */ /* [OFFEN] mit Reisser Musik/Figma klaeren */ } .sv-delivery-subline { margin-top: 2px; font-weight: 400; /* [FEST] Hinweis nicht fett */ color: var(--sw-text-color); } /* [FEST] Grauer Link-Streifen unten */ .sv-delivery-linkrow { padding: 12px 20px; margin: 0 -20px -16px -20px; background: var(--sv-color-subtle); } .sv-delivery-link { display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: none; } /* [FEST] Aeusserer Rahmen Finanzierungskasten */ .sv-finance-block { display: flex; flex-direction: column; border: 1px solid var(--sw-border-color); border-radius: 8px; padding: 16px 20px; background: #fff; overflow: hidden; margin-top: 16px; } .sv-finance-row { display: flex; flex-direction: column; gap: 4px; /* [ANPASSBAR] Abstand Label -> Link */ padding: 10px 0; border-bottom: 1px solid var(--sw-border-color); } .sv-finance-row--last { border-bottom: none; } .sv-finance-header { display: flex; align-items: center; gap: 10px; } .sv-finance-header--no-icon { gap: 0; } .sv-finance-icon { display: inline-flex; flex: 0 0 auto; color: var(--sw-text-color); } .sv-finance-icon .icon > svg { top: 0; } .sv-finance-icon-img { width: 1rem; height: 1rem; object-fit: contain; display: block; } /* [FEST] Link unter Label, linksbuendig, Textfarbe, unterstrichen */ .sv-finance-link { display: inline-block; padding: 0; background: none; border: none; color: var(--sw-text-color); font-size: inherit; font-weight: 400; text-decoration: underline; cursor: pointer; text-align: left; } .sv-finance-link:hover, .sv-finance-link:focus { text-decoration: none; outline: none; }