/*
|--------------------------------------------------------------------------
| 2026-11-03
| Author: Claude
| Neuanlage (PHP-Sicherheitscheck R2b-2). Sonderelemente des Bestellwegs
| „Leistungen“ auf checkout-leistungen. Raster, Karten, Zahlart-Karten,
| Schrittleiste kommen aus assets/css/vt-checkout.css (wie checkout-3),
| Felder aus 03-components/vt-form-inputfield.css (dunkel kompakt),
| CTA aus 03-components/vt-cta-firstrank.css.
| Ersetzt den Inline-Stil von R2.
|--------------------------------------------------------------------------
*/

.vt-leistung [hidden] { display: none !important; }

/* R2b-3: Überschrift über .vt-checkout-intro/.vt-intro (vt-checkout.css, wie checkout-3);
   bis 04.11.2026: .vt-leistung__titel mittig, clamp(30px, 4vw, 52px). */
.vt-leistung .vt-intro h1 { text-transform: none; letter-spacing: normal; }

/* R2b-3a (Klaus 13:38): Überschrift und Karten bündig zur Logo-/Schrittleisten-
   kante, Abstand zur Schrittleiste. Hebt die Innenabstände aus vt-checkout.css
   (.vt-checkout-intro 0 24px, .vt-checkout-grid 0 24px) nur hier auf. */
.vt-leistung .vt-checkout-intro { max-width: none; margin: 0 0 32px; padding: 0; } /* R2b-5: Abstand oben aus .vt-funnel-kopf (vt-funnel.css); bis 04.11.: margin 48px 0 32px */
.vt-leistung .vt-checkout-container { max-width: none; margin: 0; padding: 0; }
.vt-leistung .vt-checkout-container .vt-checkout-grid { max-width: none; margin: 0; padding: 0; }

.vt-leistung__pflicht { margin: 0 0 16px; font-size: 14px; opacity: .8; }

.vt-leistung__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}
.vt-leistung__raster > .vt-form-inputfield-group,
.vt-leistung__raster > div { min-width: 0; margin: 0 0 18px; }
.vt-leistung__breit { grid-column: 1 / -1; }
.vt-leistung .vt-form-inputfield-label { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.vt-leistung input.vt-form-inputfield,
.vt-leistung select.vt-form-inputfield { width: 100%; box-sizing: border-box; }
.vt-leistung .vt-form-inputfield-error { margin: 6px 0 0; font-size: 14px; }

.vt-leistung__abstand { margin-top: 28px; }

.vt-leistung__zeile { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
/* F2-2b (Klaus 04:37): Umbruch an Wortgrenzen, lange Domainnamen trotzdem umbrechen; bis 05.11.: word-break: break-all */
.vt-leistung__zeile small { display: block; opacity: .75; overflow-wrap: anywhere; }
.vt-leistung__zeile strong, .vt-leistung__gesamt span:last-child { white-space: nowrap; }
.vt-leistung__gesamt { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0 0; font-weight: 700; }

.vt-leistung__klein { margin: 14px 0 0; font-size: 14px; line-height: 1.5; opacity: .8; }
.vt-leistung__meldung { margin: 12px 0 0; color: #ff9b8f; font-weight: 500; }
.vt-leistung__meldung:empty { display: none; }

.vt-leistung .vt-leistung__weiter { width: 100%; margin-top: 20px; } /* R2b-3: Höhe/Schrift aus .kompakt (vt-cta-firstrank.css); bis 04.11.: font-size 20px, height 64px */
.vt-leistung .vt-leistung__weiter .vt-btn__icon { display: inline-flex; }
.vt-leistung .vt-leistung__weiter.is-loading .vt-btn__icon { display: none; }
.vt-leistung__zurueck { margin: 16px 0 0; text-align: center; }

.vt-leistung__fehlt { max-width: 640px; margin: 0 auto 48px; text-align: center; }

/* „Zahlungsart ändern“ auf der Zahlseite */
.vt-leistung-zahlart { margin: 0 0 16px; }

@media (max-width: 767px) {
    .vt-leistung__raster { grid-template-columns: minmax(0, 1fr); }
}

/* Danke-Seite: Angaben zur Website als kompakte Liste */
.vt-order-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0 0 24px; }
.vt-order-angaben dt { margin: 0; font-weight: 700; }
.vt-order-angaben dd { margin: 0; word-break: break-all; }

/*
|--------------------------------------------------------------------------
| 2026-11-04 | Claude | R2b-3 (Freigabe Klaus 04.11.2026 10:42/11:08)
| Danke-Seite (alle Bestellungen): Statuskästen so breit wie das Raster
| darunter; Hinweistext in normaler Schrift, linksbündig.
| Überschreibt vt-checkout.css (max-width 900px, 28px !important).
|--------------------------------------------------------------------------
*/
.vt-order-success-header .vt-order-waiting-info,
.vt-order-success-header .vt-order-success-info { max-width: none; }
.vt-order-success-header .vt-order-success-info {
    font-size: 18px !important;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
}
@media (max-width: 767px) {
    .vt-order-success-header .vt-order-success-info { font-size: 17px !important; padding: 18px 20px; }
}

/* R2b-3: Zahlseite – Widerruf-Checkbox (bisher Inline-Stil in class-checkout-widerruf.php).
   Fehlerrahmen/-text: .vt-agb-error/.vt-agb-message in vt-checkout.css. */
.vt-widerruf { margin: 0 0 12px; }
.vt-widerruf .form-row { margin-bottom: 0; }
body.vt-widerruf-offen #ppc-button-ppcp-gateway,
body.vt-widerruf-offen .ppc-button-wrapper { opacity: .45; pointer-events: none; }

/*
|--------------------------------------------------------------------------
| 2026-11-05 | Claude | F2-2b (Freigabe Klaus 04:02/04:59/05:04)
| Papierkorb je Zeile der Hosting-Zusammenfassung (checkout-3). Icon
| „trash“ über vt_FE_get_icon (Größe xsmall, vt-icons.css). Fokus = Hover
| (globale Richtlinie 5). Platzhalter in Zeilen ohne Papierkorb hält die
| Preise bündig.
| Rückfrage-Modal: atomares Modul 005-ui-modal, Farben aus vt-modal.css;
| hier nur Radius, Abstände und Aktionen dieses Dialogs (.vt-leistung__modal).
|--------------------------------------------------------------------------
*/
.vt-leistung__zeile-rechts { display: flex; align-items: flex-start; gap: 8px; }
.vt-leistung__entfernen,
.vt-leistung__entfernen-platz { flex: 0 0 28px; width: 28px; height: 28px; margin: -3px -6px 0 0; }
.vt-leistung__entfernen {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: inherit; opacity: .7; cursor: pointer;
    transition: opacity .15s ease, border-color .15s ease, background-color .15s ease;
}
/* Gesamtsumme bündig mit den Preisen, wenn die Zeilen einen Papierkorb haben (nur Hosting) */
.vt-leistung__summe:has(.vt-leistung__entfernen) .vt-leistung__gesamt { padding-right: 30px; }
.vt-leistung__entfernen:hover,
.vt-leistung__entfernen:focus,
.vt-leistung__entfernen:focus-visible {
    /* F2-4c2 | deckend (Projektregel); alt: background: rgba(12, 35, 77, .55) */
    opacity: 1; border-color: #228ae8; background: #0c234d; outline: none;
}
/* F2-4d: Zusammenfassung mit Lader (checkout-2 und checkout-3): Bereich relativ,
   Mindesthöhe für den Kreisel beim ersten Laden, Inhalt beim Neuberechnen abgedunkelt */
.vt-leistung__summe-box { position: relative; min-height: 120px; border-radius: 14px; }
.vt-leistung__summe-box .vt-leistung__summe { transition: opacity .16s linear; }
.vt-leistung__summe-box.is-laedt .vt-leistung__summe { opacity: .45; }
/* F2-4c2 (Messung Klaus 14:03): Theme gab dem Knopf 28 px Innenabstand (60 px breit),
   Preise neben dem Papierkorb standen dadurch nicht bündig mit der Abzugszeile. */
.vt-leistung button.vt-leistung__entfernen,
.vt-leistung button.vt-leistung__entfernen:hover,
.vt-leistung button.vt-leistung__entfernen:focus {
    width: 28px; min-width: 0; height: 28px; min-height: 0; padding: 0; line-height: 1; box-shadow: none;
}

.vt-leistung__modal .custom-modal__dialog { width: min(90vw, 520px); padding: 32px; border-radius: 20px; }
.vt-leistung__modal .custom-modal__title { margin: 0 32px 12px 0; font-size: 22px; line-height: 1.3; }
.vt-leistung__modal .custom-modal__content { font-size: 17px; line-height: 1.6; }
.vt-leistung__modal .custom-modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.vt-leistung__modal .custom-modal__close { padding: 0; border: 0; background: none; color: inherit; font-family: inherit; cursor: pointer; }
.vt-leistung__modal .vt-leistung__modal-nein { padding: 0; border: 0; background: none; cursor: pointer; } /* Farbe und Schrift aus .vt-textlink */
.vt-leistung__modal .custom-modal__close { top: 16px; right: 20px; font-size: 28px; line-height: 1; opacity: .7; }
.vt-leistung__modal .custom-modal__close:hover,
.vt-leistung__modal .custom-modal__close:focus,
.vt-leistung__modal .custom-modal__close:focus-visible { opacity: 1; outline: none; }

/* 2026-11-07 | Claude | D2: Danke-Seite – DNS-Anleitung für externe Domains */
.vt-order-dns {
    margin: 0 0 32px;
    padding: 20px 24px;
    border: 1px solid rgba(90,140,255,0.25);
    border-radius: 14px;
}
.vt-order-dns h3 { margin: 0 0 8px; }
.vt-order-dns ul { margin: 0 0 12px; padding-left: 20px; }
.vt-order-dns code { white-space: normal; word-break: break-all; }
.vt-order-dns__domain { margin: 12px 0 4px; font-weight: 600; }