/**
 * SDH Vorteilsrechnung (Beispiel) — Handwerkerclub.
 *
 * Drei gleichwertige Karten, die zusammen EINE Argumentation ergeben:
 *
 *   1. .sdh-vr__sheet   Was der Club leistet   (Titel + Leistungszeilen)
 *   2. .sdh-vr__person  Fuer wen, und was dabei herauskommt (Persona + Bilanz)
 *   3. .sdh-vr__price   Was es kostet          (Preisliste, optional)
 *
 * Alle drei teilen sich denselben Bauplan `.sdh-vr__card` (Kopf / Koerper /
 * Fuss), dieselben Kanten und dieselbe Schriftskala. Das ist der Kern dieser
 * Datei: Die Preisspalte bringt ihr eigenes Token-System `--pl-*` mit; hier
 * wird es geschlossen auf die `--sdh-vr-*`-Werte umgelegt, statt mit
 * Einzelselektoren dagegenzuhalten. Deshalb steht unten ein eigener Abschnitt
 * „Preisspalte einkleiden".
 *
 * Kanten sind bewusst eckig (`--sdh-vr-radius: 0`) — abweichend vom
 * Kunden-Entwurf, aber passend zum uebrigen Seitendesign.
 */

.sdh-vr {
    /* Defaults — werden von den Elementor-Controls ueberschrieben. */
    --sdh-vr-text: #2b2e33;
    --sdh-vr-muted: #565a61;

    /* Drei Grautoene mit verschiedenen Aufgaben. Sie sehen gleich aus, muessen
       aber getrennt bleiben: --hint und --label stehen auf der hellen Karte,
       --note steht auf dem Seitenhintergrund. Auf einer dunklen Seite laufen
       sie auseinander. */
    --sdh-vr-hint: #767a81;
    --sdh-vr-label: #767a81;
    --sdh-vr-note: #767a81;

    --sdh-vr-line: #e2e3e6;
    --sdh-vr-border: 1px;
    --sdh-vr-card: #ffffff;
    --sdh-vr-card-soft: #f4f4f6;
    --sdh-vr-green: #15803d;
    --sdh-vr-result: var(--sdh-vr-green);
    --sdh-vr-red: #be1623;
    --sdh-vr-onred: #ffffff;
    --sdh-vr-radius: 0px;
    --sdh-vr-gap: 24px;
    --sdh-vr-avatar: 72px;

    /* Innenabstaende der Karten — an einer Stelle, damit die drei Spalten
       nicht auseinanderlaufen koennen. */
    --sdh-vr-pad-x: 20px;
    --sdh-vr-pad-y: 18px;

    max-width: 1024px;
    margin-inline: auto;
    color: var(--sdh-vr-text);
    box-sizing: border-box;
}

.sdh-vr *,
.sdh-vr *::before,
.sdh-vr *::after {
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .sdh-vr {
        --sdh-vr-pad-x: 24px;
        --sdh-vr-pad-y: 20px;
    }
}

/* Drei Spalten brauchen mehr Grundflaeche als zwei. */
.sdh-vr--with-price {
    max-width: 1400px;
}

/* =====================================================================
   Raster
   ===================================================================== */
.sdh-vr__grid {
    display: grid;
    gap: var(--sdh-vr-gap);
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

/* Zwei Spalten (ohne Preisspalte). Mit Preisspalte setzt das Widget je Instanz
   eine eigene Regel mit hoeherer Spezifitaet (#id) — diese hier muss sich dann
   heraushalten, sonst faellt die dritte Spalte unterhalb des dortigen
   Umbruchpunkts in eine zweite Zeile. */
@media (min-width: 900px) {
    .sdh-vr--split:not(.sdh-vr--with-price) .sdh-vr__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
}

/* Preisspalte links: Die DOM-Reihenfolge bleibt Leistungen → Person → Preise,
   damit Vorlese- und Tab-Reihenfolge der inhaltlichen Logik folgen. */
.sdh-vr--price-left .sdh-vr__price {
    order: -1;
}

/* =====================================================================
   Gemeinsamer Kartenbauplan
   ===================================================================== */
.sdh-vr__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: var(--sdh-vr-border) solid var(--sdh-vr-line);
    border-radius: var(--sdh-vr-radius);
    background: var(--sdh-vr-card);
}

/* „Nur so hoch wie der Inhalt" — sonst streckt das Raster alle Karten auf die
   Hoehe der laengsten. */
.sdh-vr--cards-auto .sdh-vr__grid {
    align-items: start;
}

.sdh-vr__card-head {
    padding: var(--sdh-vr-pad-y) var(--sdh-vr-pad-x);
    border-bottom: 1px solid var(--sdh-vr-line);
}

.sdh-vr__card-body {
    flex: 1 1 auto;
    padding: var(--sdh-vr-pad-y) var(--sdh-vr-pad-x);
}

.sdh-vr__card-foot {
    margin-top: auto;
    padding: var(--sdh-vr-pad-y) var(--sdh-vr-pad-x);
    border-top: 1px solid var(--sdh-vr-line);
    background: var(--sdh-vr-card-soft);
}

/* =====================================================================
   Karte 1: Leistungen
   ===================================================================== */
.sdh-vr__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.sdh-vr__list-title {
    margin: 8px 0 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sdh-vr-label);
}

.sdh-vr__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdh-vr__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sdh-vr-line);
}

.sdh-vr__row:first-child {
    padding-top: 0;
}

.sdh-vr__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.sdh-vr__row-main {
    min-width: 0;
}

.sdh-vr__row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sdh-vr__row-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.35;
}

.sdh-vr__row-badge {
    padding: 2px 8px;
    border-radius: var(--sdh-vr-radius);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sdh-vr-red);
    background: color-mix(in srgb, var(--sdh-vr-red) 10%, transparent);
}

.sdh-vr__row-text {
    margin: 2px 0 0;
    font-size: 0.73rem;
    line-height: 1.4;
    color: var(--sdh-vr-hint);
}

.sdh-vr__row-value {
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
    font-size: 0.88rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sdh-vr-green);
}

.sdh-vr__row-value--dim {
    color: var(--sdh-vr-hint);
}

/* =====================================================================
   Karte 2: Persona + Bilanz
   ===================================================================== */
.sdh-vr__persona {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* In der schmalen Mittelspalte bleibt neben einem 72-px-Bild zu wenig fuer die
   Berufszeile — sie braeche auf drei Zeilen um. Ab hier steht das Bild oben. */
@container (max-width: 340px) {
    .sdh-vr__persona {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

.sdh-vr__persona-text {
    min-width: 0;
}

.sdh-vr__person-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
}

.sdh-vr__person-role {
    margin: 2px 0 0;
    font-size: 0.73rem;
    line-height: 1.35;
    color: var(--sdh-vr-hint);
}

/* --- Bild: rundes Profilbild (Vorgabe) --- */
.sdh-vr__photo--avatar {
    position: relative;
    flex: 0 0 auto;
    width: var(--sdh-vr-avatar);
    height: var(--sdh-vr-avatar);
    overflow: hidden;
    border-radius: 50%;
    background: var(--sdh-vr-card-soft);
}

.sdh-vr__photo--avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* --- Bild: freigestelltes Hochformat --- */
.sdh-vr__photo--portrait {
    position: relative;
    flex: 0 0 auto;
    width: 40%;
    max-width: 180px;
    aspect-ratio: 3 / 5;
    background: var(--sdh-vr-card-soft);
}

.sdh-vr__photo--portrait img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom;
}

/* Platzhalter, solange kein Bild gewaehlt ist. */
.sdh-vr__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    color: var(--sdh-vr-hint);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 8px,
            rgba(0, 0, 0, 0.04) 8px 16px
        );
}

/* --- Bilanz --- */
/* Oben ausgerichtet: Die Persona sitzt am Kartenkopf, die Bilanz gehoert
   unmittelbar darunter. Mittig zentriert stand der Vorteilsbetrag sonst
   irgendwo im Nichts, waehrend oben eine Luecke klaffte. */
.sdh-vr__card-body--balance {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.sdh-vr__sum {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sdh-vr-line);
}

.sdh-vr__sum-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.sdh-vr__sum-line + .sdh-vr__sum-line {
    margin-top: 6px;
}

.sdh-vr__sum-label {
    font-size: 0.78rem;
    font-weight: 700;
}

.sdh-vr__sum-value {
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sdh-vr__sum-line--fee {
    color: var(--sdh-vr-label);
}

.sdh-vr__sum-line--fee .sdh-vr__sum-label,
.sdh-vr__sum-line--fee .sdh-vr__sum-value {
    font-size: 0.73rem;
    font-weight: 400;
}

/* Das Ergebnis ist der Hoehepunkt der Karte — als einzige Zahl farbig. */
.sdh-vr__result {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}

.sdh-vr__result-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sdh-vr-label);
}

.sdh-vr__result-value {
    font-size: var(--sdh-vr-result-size, clamp(1.6rem, 14cqi, 2.4rem));
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--sdh-vr-result);
}

.sdh-vr__result-note {
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--sdh-vr-hint);
}

/* Der Betrag ist die laengste Zeile der schmalen Mittelspalte. Er skaliert
   deshalb mit der Kartenbreite statt umzubrechen. */
.sdh-vr__person {
    container-type: inline-size;
}

@supports not (container-type: inline-size) {
    .sdh-vr__result-value {
        font-size: var(--sdh-vr-result-size, 2rem);
    }
}

/* =====================================================================
   Aktionsschaltflaeche (nur ohne Preisspalte)
   ===================================================================== */
.sdh-vr__cta {
    display: block;
    margin-top: 16px;
    padding: 14px 24px;
    border-radius: var(--sdh-vr-radius);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--sdh-vr-onred);
    background: var(--sdh-vr-red);
    transition: opacity 0.15s ease;
}

.sdh-vr__cta:hover,
.sdh-vr__cta:focus-visible {
    opacity: 0.9;
    color: var(--sdh-vr-onred);
    text-decoration: none;
}

/* =====================================================================
   Karte 3: Preisspalte einkleiden
   ---------------------------------------------------------------------
   Die Preis-Engine bringt ihr eigenes Token-System mit. Statt gegen ihre
   Selektoren anzuschreiben, werden hier ihre Variablen umgelegt — dadurch
   greifen kuenftige Aenderungen an der Preisliste automatisch mit.

   WICHTIG — der Selektor muss `.sdh-pricing` treffen, nicht die Spalte:
   Die Engine deklariert alle `--pl-*` auf `.sdh-pricing` SELBST. Eigene
   Variablen sind zwar vererbbar, aber eine Deklaration am Element schlaegt
   immer den geerbten Wert. Stuenden diese Zeilen auf `.sdh-vr__price`
   (dem Elternelement), waeren sie wirkungslos — ohne Fehlermeldung, weil die
   Engine-Defaults einfach weitergelten. Deshalb hier derselbe Knoten mit
   hoeherer Spezifitaet.
   ===================================================================== */
.sdh-vr__price .sdh-pricing {
    --pl-card-bg: transparent;
    --pl-card-border: transparent;
    --pl-card-border-width: 0;
    --pl-radius: var(--sdh-vr-radius);

    --pl-text: var(--sdh-vr-text);
    --pl-muted: var(--sdh-vr-hint);
    --pl-divider: var(--sdh-vr-line);
    --pl-accent: var(--sdh-vr-red);

    --pl-btn-bg: var(--sdh-vr-red);
    --pl-btn-text: var(--sdh-vr-onred);
    --pl-btn-bg-hover: var(--sdh-vr-red);
    --pl-btn-text-hover: var(--sdh-vr-onred);

    --pl-icon-yes: var(--sdh-vr-green);
    --pl-icon-no: var(--sdh-vr-hint);
    --pl-icon-size: 16px;
    --pl-feature-divider-width: 1px;

    /* Basiswerte = Tarif-Schalter. Der Zahlweise-Schalter liest zuerst seine
       eigenen `--pl-cardsw-*` und faellt auf diese zurueck — deshalb sehen
       beide gleich aus, solange die zweite Gruppe leer bleibt. */
    --pl-switch-bg: var(--sdh-vr-card-soft);
    --pl-switch-active-bg: var(--sdh-vr-card);
    --pl-switch-text: var(--sdh-vr-label);
    --pl-switch-active-text: var(--sdh-vr-text);
    --pl-switch-radius: var(--sdh-vr-radius);

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/* Der Tarif-Schalter uebernimmt die Rolle des Kartenkopfs — gleiche Hoehe,
   gleiche Trennlinie wie bei den Nachbarkarten. */
.sdh-vr__price .sdh-pricing__switchbar {
    margin: 0;
    padding: var(--sdh-vr-pad-y) var(--sdh-vr-pad-x);
    border-bottom: 1px solid var(--sdh-vr-line);
}

/* Beide Schalter ueber die volle Kartenbreite — der untere kann das bereits
   (`is-full`), der obere ist von Haus aus mittig und schmal. Ungleich breite
   Schalter uebereinander sind das Erste, was als „zusammengesetzt" auffaellt. */
.sdh-vr__price .sdh-pricing__switchbar .sdh-pricing__switch {
    display: flex;
    width: 100%;
}

.sdh-vr__price .sdh-pricing__switchbar .sdh-pricing__switch-btn {
    flex: 1 1 0;
}

/* Steht der Tarif-Schalter IN der Karte, ist er kein Kartenkopf mehr, sondern
   ein Bedienelement im Kartenfluss — also ohne Polsterung und ohne Trennlinie.

   Aussenabstand: Der Wert nach unten ist kleiner als der nach oben, damit der
   Schalter optisch zum Preis darunter gehoert und nicht zur Ueberschrift
   darueber. Beide Werte sind im Backend einzeln einstellbar. */
.sdh-vr__price .sdh-pricing__switchbar--in-card {
    padding: 0;
    border-bottom: 0;
    margin-top: 16px;
    margin-bottom: 10px;
}

.sdh-vr__price .sdh-pricing__cardswitch {
    margin-top: 14px;
    margin-bottom: 0;
}

/* Folgt der Preis direkt auf einen Schalter, zaehlt allein dessen Unterabstand.
   Ohne das addierte sich der eigene Oberabstand des Preises dazu — der Regler
   im Backend zeigte dann nicht den Abstand, den man sieht.

   Zwei Schalter direkt untereinander addieren dagegen bewusst (Unterabstand des
   oberen + Oberabstand des unteren): Dort sind es zwei gleichrangige
   Bedienelemente, und beide Regler sollen wirken. */
.sdh-vr__price .sdh-pricing__switchbar--in-card + .sdh-pricing__price,
.sdh-vr__price .sdh-pricing__cardswitch + .sdh-pricing__price {
    margin-top: 0;
}

/* Ohne diese beiden Ruecknahmen zentriert die Engine die Karte auf 560 px —
   in einer Spalte sieht sie dann aus, als schwaemme sie darin. */
.sdh-vr__price .sdh-pricing__cards {
    display: flex;
    flex: 1 1 auto;
    max-width: none;
    margin-inline: 0;
    gap: 0;
}

.sdh-vr__price .sdh-pricing__card {
    flex: 1 1 auto;
    padding: var(--sdh-vr-pad-y) var(--sdh-vr-pad-x);
}

/* --- Schriftskala an die Nachbarkarten angleichen --- */
.sdh-vr__price .sdh-pricing__title {
    margin: 0 0 2px;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.sdh-vr__price .sdh-pricing__eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
}

.sdh-vr__price .sdh-pricing__desc {
    font-size: 0.73rem;
    line-height: 1.4;
}

.sdh-vr__price .sdh-pricing__price {
    margin: 14px 0 4px;
    gap: 6px;
}

/* Der Preis bleibt neutral: Gruen ist in diesem Widget die Farbe des Vorteils
   und Rot die der Handlung. Ein roter Preis neben einem roten Knopf nimmt
   beiden die Bedeutung. */
.sdh-vr__price .sdh-pricing__amount {
    font-size: var(--sdh-vr-price-size, clamp(1.6rem, 12cqi, 2.4rem));
    color: var(--sdh-vr-text);
}

.sdh-vr__price .sdh-pricing__suffix {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sdh-vr-hint);
}

.sdh-vr__price .sdh-pricing__sub {
    margin: 0 0 2px;
    font-size: 0.73rem;
    font-weight: 400;
    color: var(--sdh-vr-hint);
}

.sdh-vr__price .sdh-pricing__tax {
    font-size: 0.68rem;
    color: var(--sdh-vr-hint);
}

/* --- Zahlweise-Schalter in der Karte --- */
.sdh-vr__price .sdh-pricing__cardswitch {
    margin-top: 14px;
}

.sdh-vr__price .sdh-pricing__switchbar .sdh-pricing__switch-btn,
.sdh-vr__price .sdh-pricing__cardswitch .sdh-pricing__switch-btn {
    padding: 9px 12px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Der Zusatz („60 € günstiger") steht in der schmalen Spalte immer auf einer
   eigenen Zeile. Von Haus aus bricht er nur um, wenn er nicht mehr danebenpasst
   — dann liegt er im Tarif-Schalter unter der Beschriftung und im
   Zahlweise-Schalter daneben, und die beiden Schalter sehen unterschiedlich
   aus, ohne dass jemand das so entschieden haette. */
.sdh-vr__price .sdh-pricing__switch-note {
    flex-basis: 100%;
}

/* Schienenrahmen je Schalter getrennt, damit sich beide unterschiedlich
   gestalten lassen. */
.sdh-vr__price .sdh-pricing__switchbar .sdh-pricing__switch {
    border: 1px solid var(--sdh-vr-line);
}

.sdh-vr__price .sdh-pricing__cardswitch .sdh-pricing__switch {
    border: 1px solid var(--sdh-vr-line);
}

/* --- Leistungen in der Preiskarte --- */
.sdh-vr__price .sdh-pricing__features {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sdh-vr-line);
}

.sdh-vr__price .sdh-pricing__feature {
    padding: 7px 0;
    gap: 10px;
}

.sdh-vr__price .sdh-pricing__feature-text {
    font-size: 0.8rem;
    line-height: 1.35;
}

/* --- Button: identisch zur Aktionsschaltflaeche der Bilanz --- */
.sdh-vr__price .sdh-pricing__action {
    padding-top: 16px;
}

.sdh-vr__price .sdh-pricing__cta {
    padding: 14px 24px;
    border-radius: var(--sdh-vr-radius);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    transition: opacity 0.15s ease;
}

.sdh-vr__price .sdh-pricing__cta:hover,
.sdh-vr__price .sdh-pricing__cta:focus {
    opacity: 0.9;
}

.sdh-vr__price .sdh-pricing__cta-note {
    margin-top: 8px;
    font-size: 0.68rem;
    text-align: center;
    color: var(--sdh-vr-hint);
}

/* =====================================================================
   Fussnoten
   ===================================================================== */
.sdh-vr__notes {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sdh-vr-line);
    font-size: 0.65rem;
    line-height: 1.65;
    color: var(--sdh-vr-note);
}

.sdh-vr__note {
    margin: 0;
}

.sdh-vr__note + .sdh-vr__note {
    margin-top: 8px;
}

.sdh-vr__note strong {
    color: var(--sdh-vr-muted);
}