/* ===================================
   BESTATTUNGSPLANER FRONTEND CSS v1.3.0
   Einheitliches Design für alle Fieldsets
   BEREINIGT - Alte Extras-Styles entfernt
   =================================== */

:root{
  --brand-primary:#1A1552;         /* Primär Indigo */
  --brand-primary-dark:#0F0B33;    /* Indigo dunkel */
  --brand-interact:#2B4E99;        /* Interaktiv Blau */
  --brand-accent:#597765;          /* Preis-Akzent Sage */
  --paper:#F7F6F2;                 /* Papier (warm) */
  --neutral:#6B7280;               /* Neutral Grau */
  --divider:#E5E7EB;               /* Linien/Trenner */
  --success:#10b981;               /* Erfolg Grün */
  --warning:#f59e0b;               /* Warnung Orange */
  --error:#ef4444;                 /* Fehler Rot */
}

/* Verstecke fehlerhaft angezeigte CSS-Texte - Mobile Fix */
body > text,
.bp-fieldset > text,
.bp-step > text,
#bp-app > text {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}


/* ===================================
   PAKET-AUSWAHL
   =================================== */

/* Layout Pakete als Grid — gleiche Höhen */
.bp-packages{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
  align-items:stretch;
}
.bp-package-card{
  box-sizing:border-box;
  border:1px solid var(--divider);
  border-radius:8px;
  background:#fff;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.bp-package-card:hover{
  border-color:var(--brand-interact);
  box-shadow:0 0 0 2px rgba(43,78,153,.15);
}
.bp-package-card.selected{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 3px rgba(26,21,82,.20);
}

/* Titel */
.bp-title{
  font-size:1.2rem;
  font-weight:700;
  margin:0 0 8px 0;
  text-align:center;
}

/* Professionelles Grid-Layout für Extras */
.bp-extras-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    grid-auto-rows: 200px !important;
    gap: 20px !important;
    margin: 24px 0 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bp-extras-list {
        gap: 6px !important;
        margin: 8px 0 !important;
        grid-auto-rows: 140px !important;
    }
}

.bp-extra-item { 
    display: grid !important;
    grid-template-rows: 1fr auto auto !important; /* Inhalt, Preis, Mengenfeld */
    padding: 16px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

.bp-extra-content {
    display: flex !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

.bp-extra-text {
    flex: 1 !important;
}

.bp-extra-text strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.3 !important;
}

.bp-extra-price {
    text-align: right !important;
    font-weight: 700 !important;
    color: #059669 !important;
    margin: 8px 0 !important;
}

.bp-extra-qty {
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

.bp-extra-qty.show {
    display: flex !important;
}

/* Bild */
.bp-thumb{ position:relative; width:100%; aspect-ratio:520/320; overflow:hidden; }
.bp-thumb img.bp-thumb-img, .bp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* "Mehr Informationen" Button — immer farbig, keine feste 44x44 mehr */
.bp-thumb .bp-info-btn{
  position:absolute; top:10px; right:10px; z-index:10;   /* höher, liegt über allem */
  pointer-events:auto;                                    /* Klicks garantiert annehmen */
  width:auto !important; height:auto !important;
  padding:8px 12px !important;
  border:none !important;
  border-radius:9999px !important;
  background:var(--brand-interact) !important;
  color:#fff !important;
  font-weight:700; font-size:.9rem; line-height:1;
  cursor:pointer;
}

/* Safety: Karte/Bild bleiben klickbar, Info-Button hat Vorrang */
.bp-package-card{ position:relative; }       /* eigener Stacking-Context */
.bp-thumb{ cursor:pointer; }                 /* visuelles Feedback */
.bp-title{ cursor:pointer; }                 /* Titel ebenfalls klickbar */

.bp-thumb .bp-info-btn:hover{ background:var(--brand-primary) !important; }

/* Preise */
.bp-price{ font-weight:700; font-size:1.2em; margin-top:6px; text-align:center; }
.bp-old-price{ text-decoration:line-through; color:#888; text-align:center; }

/* Auswählen-Button in Karte */
.bp-select-btn{
  width:100%;
  padding:10px 16px;
  border:1px solid #222;
  background:#fff;
  cursor:pointer;
  border-radius:8px;
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  transition:background .2s;
}
.bp-select-btn:hover{ background:#f3f3f3; }

/* ===================================
   NAVIGATION UND BUTTONS
   =================================== */

/* Navigation unter Boxen */
.bp-nav{ 
  margin-top:20px; 
  display:flex; 
  gap:12px; 
  flex-wrap:wrap; 
}

/* Buttons – EINHEITLICH mit voller Breite auf Mobile */
.bp-btn-primary,
#bp-offer-email,
#bp-order-now,
#bp-go-to-summary,
#bp-go-to-contact,
#bp-final-form button[type=submit],
#bp-order-continue,
#bp-choose-quote,
#bp-choose-order{
  -webkit-appearance:none; 
  appearance:none;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  gap:8px; 
  padding:12px 16px; 
  min-height:46px;
  border-radius:8px; 
  border:1px solid var(--brand-primary);
  background:var(--brand-primary); 
  color:#fff;
  font-weight:700; 
  font-size:16px; 
  line-height:1.2; 
  cursor:pointer;
  box-sizing:border-box; 
  transition:background .2s, filter .2s;
  width: 100%; /* Mobile-First: Volle Breite */
}

.bp-btn-primary:hover,
#bp-offer-email:hover,
#bp-order-now:hover,
#bp-go-to-summary:hover,
#bp-go-to-contact:hover,
#bp-final-form button[type=submit]:hover,
#bp-order-continue:hover,
#bp-choose-quote:hover,
#bp-choose-order:hover{ 
  background:var(--brand-primary-dark); 
}

.bp-btn-secondary{
  -webkit-appearance:none; 
  appearance:none;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  gap:8px; 
  padding:12px 16px; 
  min-height:46px;
  border-radius:8px; 
  border:1px solid #222;
  background:#f5f5f5; 
  color:#111; 
  font-weight:600; 
  font-size:16px; 
  line-height:1.2;
  cursor:pointer; 
  box-sizing:border-box; 
  transition:background .2s;
  width: 100%; /* Mobile-First: Volle Breite */
}

.bp-btn-secondary:hover{ 
  background:#e2e2e2; 
}

/* ===================================
   ZURÜCK-BUTTONS - EINHEITLICHES DESIGN
   =================================== */

/* Alle Zurück-Buttons einheitlich stylen */
#bp-back-to-packages,
#bp-back-to-extras, 
#bp-back-to-summary {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid #6b7280;
    background: #f5f5f5;
    color: #111;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s;
    width: 100%; /* Mobile-First: Volle Breite */
}

#bp-back-to-packages:hover,
#bp-back-to-extras:hover,
#bp-back-to-summary:hover {
    background: #e2e2e2;
}

/* Navigation-Container */
.bp-nav {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* ===================================
   DESKTOP: Button-Layout Zusammenfassung
   =================================== */

@media (min-width: 641px) {
    /* Zusammenfassung: 3-Spalten-Grid */
    .bp-step-3 .bp-nav {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
        align-items: stretch;
    }
    
    .bp-step-3 .bp-nav #bp-back-to-extras {
        width: auto;
        grid-column: 1;
    }
    
    .bp-step-3 .bp-nav #bp-choose-quote {
        width: auto;
        grid-column: 2;
    }
    
    .bp-step-3 .bp-nav #bp-choose-order {
        width: auto;
        grid-column: 3;
    }
    
    /* Alle anderen Buttons auf Desktop: automatische Breite */
    #bp-back-to-packages,
    #bp-back-to-extras,
    #bp-back-to-summary,
    #bp-go-to-summary,
    #bp-order-continue,
    #bp-choose-quote,
    #bp-choose-order,
    .bp-btn-primary,
    .bp-btn-secondary {
        width: auto;
    }
}

/* ===================================
   MOBILE: Alle Buttons volle Breite
   =================================== */

@media (max-width: 640px) {
    .bp-nav {
        flex-direction: column-reverse;
    }
    
    /* Auf Mobile: ALLE Buttons volle Breite */
    #bp-back-to-packages,
    #bp-back-to-extras,
    #bp-back-to-summary,
    #bp-go-to-summary,
    #bp-choose-quote,
    #bp-choose-order,
    #bp-order-continue,
    .bp-btn-primary,
    .bp-btn-secondary {
        width: 100% !important;
        justify-content: center;
    }
}

/* ===================================
   FIELDSETS - EINHEITLICHES DESIGN
   =================================== */

/* Basis-Fieldset Styling */
.bp-fieldset {
    border: 2px solid var(--divider);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: #fafbfc;
    position: relative;
}

.bp-fieldset legend {
    background: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    color: var(--brand-primary);
    border: 2px solid var(--divider);
    font-size: 1.1rem;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==== Fieldset-Icons – robust & ohne Duplikate ==== */


/* Alle inline-Icons innerhalb von Legenden ausblenden – wir nutzen nur ::before */
.bp-fieldset legend .bp-legend-icon,
fieldset legend .bp-legend-icon {
  display: none !important;
}

/* 1) STANDARD nur dann, wenn KEINES der Spezial-Fieldsets vorliegt */
fieldset.bp-fieldset:not(.bp-signature-fieldset):not([class*="verstorbene"]):not([class*="deceased"]):not([class*="auftraggeber"]):not([class*="customer"]) > legend::before,
.bp-fieldset:not(.bp-signature-fieldset):not([class*="verstorbene"]):not([class*="deceased"]):not([class*="auftraggeber"]):not([class*="customer"]) > legend::before {
  content: "📄";
  font-size: 1.2rem;
}

/* 2) Verstorben(e) */
fieldset.bp-fieldset[class*="verstorbene"] > legend::before,
fieldset.bp-fieldset[class*="deceased"] > legend::before,
.bp-fieldset[class*="verstorbene"] > legend::before,
.bp-fieldset[class*="deceased"] > legend::before {
  content: "👤";
}

/* 3) Auftraggeber */
fieldset.bp-fieldset[class*="auftraggeber"] > legend::before,
fieldset.bp-fieldset[class*="customer"] > legend::before,
.bp-fieldset[class*="auftraggeber"] > legend::before,
.bp-fieldset[class*="customer"] > legend::before {
  content: "📋";
}

/* 4) Unterschrift – explizit & mit höherer Spezifität */
fieldset.bp-fieldset.bp-signature-fieldset > legend::before,
.bp-fieldset.bp-signature-fieldset > legend::before {
  content: "✏️" !important;
}

/* Falls im Markup noch ein <span class="bp-legend-icon">…</span> steckt: ausblenden */
.bp-fieldset-legend .bp-legend-icon { display: none !important; }


/* Grid-Layout für Felder */
.bp-grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bp-grid-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bp-grid-span-2{
    grid-column: span 2;
}

/* Feld-Styling */
.bp-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.bp-field label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
    font-size: 0.95rem;
}

.bp-field input,
.bp-field select,
.bp-field textarea {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
}

.bp-field input:focus,
.bp-field select:focus,
.bp-field textarea:focus {
    outline: none;
    border-color: var(--brand-interact);
    box-shadow: 0 0 0 3px rgba(43, 78, 153, 0.1);
}

.bp-field input[required],
.bp-field select[required] {
    border-left: 4px solid var(--error);
}

.bp-field input[required]:valid,
.bp-field select[required]:valid {
    border-left: 4px solid var(--success);
}

/* Inline-Elemente (Radio-Buttons, Checkboxes) */
.bp-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.5rem;
}

.bp-inline label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: normal;
    margin-bottom: 0;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.bp-inline label:hover {
    background: #f3f4f6;
}

.bp-inline input[type="radio"],
.bp-inline input[type="checkbox"] {
    margin: 0;
    transform: scale(1.1);
}

/* Conditional Fields (per JS gesteuert) */
[data-block] {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

[data-block][style*="display: none"] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* ===================================
   ANGEBOTS-FORMULAR - ANGEPASST AN AUFTRAGSFORMULAR
   =================================== */

/* Angebots-Schritt Container */
.bp-step-quote {
    max-width: 800px;
    margin: 0 auto;
    padding: 1rem;
}

.bp-step-quote h2 {
    color: var(--brand-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    border-bottom: 2px solid var(--divider);
    padding-bottom: 1rem;
}

/* Angebots-Formular als Fieldset */
#bp-quote-form {
    background: #fafbfc;
    border: 2px solid var(--divider);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
}

/* Pseudo-Legend für Angebots-Formular */
#bp-quote-form::before {
    content: "📋 Ihre Kontaktdaten für das Angebot";
    position: absolute;
    top: -12px;
    left: 1rem;
    background: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    color: var(--brand-primary);
    border: 2px solid var(--divider);
    font-size: 1.1rem;
    z-index: 1;
}

/* Grid-Layout für Angebots-Felder */
.bp-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 2rem 0 1.5rem 0;
}

/* Feld-Styling für Angebots-Formular */
.bp-form-grid p {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.bp-form-grid label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.4;
}

.bp-form-grid input,
.bp-form-grid select {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: white;
    box-sizing: border-box;
}

.bp-form-grid input:focus,
.bp-form-grid select:focus {
    outline: none;
    border-color: var(--brand-interact);
    box-shadow: 0 0 0 3px rgba(43, 78, 153, 0.1);
}

.bp-form-grid input[required],
.bp-form-grid select[required] {
    border-left: 4px solid var(--error);
}

.bp-form-grid input[required]:valid,
.bp-form-grid select[required]:valid {
    border-left: 4px solid var(--success);	
}

/* Marital Status Felder */
#marital-status-fields {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid var(--brand-interact);
}

#marital-status-fields .bp-field {
    margin-bottom: 1rem;
}

/* Kinship Other Field */
#kinship-other-field {
    transition: opacity 0.3s ease;
}

/* Grid Anpassungen für neue Felder */
.bp-grid-3 .bp-field input,
.bp-grid-3 .bp-field select {
    width: 100%;
    box-sizing: border-box;
}

/* Privacy Checkbox Styling */
.bp-privacy {
    background: #f0f4f8;
    border-radius: 8px;
    padding: 1rem;
    border-left: 4px solid var(--brand-interact);
    margin: 1.5rem 0;
}

.bp-privacy label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    line-height: 1.5;
    font-size: 0.95rem;
    color: #374151;
    margin: 0;
}

.bp-privacy input[type="checkbox"] {
    margin: 0;
    transform: scale(1.2);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.bp-privacy a {
    color: var(--brand-interact);
    text-decoration: none;
    font-weight: 500;
}

.bp-privacy a:hover {
    text-decoration: underline;
}

/* Honeypot verstecken */
.bp-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Hinweis-Text */
.bp-hint {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

/* Formular-Aktionen */
.bp-form-actions {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider);
}

/* Button-Styling einheitlich mit Auftragsformular */
.bp-form-actions button[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s, filter 0.2s;
}

.bp-form-actions button[type="submit"]:hover {
    background: var(--brand-primary-dark);
}

.bp-form-actions button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.bp-form-actions button[type="button"] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid #6b7280;
    background: #f5f5f5;
    color: #111;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.2s;
}

.bp-form-actions button[type="button"]:hover {
    background: #e2e2e2;
}

/* Pflichtfeld-Hinweis */
.bp-required-note {
    font-size: 0.9rem;
    color: var(--neutral);
    margin: 1rem 0 0 0;
    font-style: italic;
}

/* Erfolgsmeldung */
#bp-quote-result {
    margin-top: 1.5rem;
}

#bp-quote-result .success,
#bp-quote-result .bp-success {
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    padding: 1rem;
    color: #065f46;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#bp-quote-result .success::before,
#bp-quote-result .bp-success::before {
    content: "✓";
    font-weight: 700;
    font-size: 1.2rem;
}

/* ===================================
   UNTERSCHRIFTEN-BASIS CSS
   =================================== */

/* Fieldset-Basis für Unterschrift */
.bp-signature-fieldset {
    border: 2px solid var(--divider);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    background: #fafbfc;
    position: relative;
}

.bp-fieldset-legend {
    background: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: bold;
    color: var(--brand-primary);
    border: 2px solid var(--divider);
    font-size: 1.1rem;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bp-legend-icon {
    margin-right: 0.5rem;
}

/* Rechtliche Hinweise */
.bp-signature-agreement {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #f0f4f8;
    border-radius: 8px;
    border-left: 4px solid var(--brand-interact);
}

.bp-legal-text p {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.bp-legal-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.bp-link-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--brand-interact);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.bp-link-button:hover {
    background: var(--brand-primary);
    color: white;
}

/* Fehleranzeige */
.bp-error-message {
    background: #fee;
    border: 1px solid #fcc;
    color: #a00;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* === Digitales Prüfsiegel unter der Unterschrift === */
.bp-seal{
  margin: 12px auto 0;
  max-width: 560px;
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  border-radius: 8px;
  padding: 12px 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
.bp-seal__title{
  font-weight: 700;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.bp-seal__row{
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-all;
}
.bp-seal__row strong{
  color: #334155;
  font-weight: 600;
}


/* ===================================
   MOBILE SIGNATURE CANVAS - OPTIMIERT FÜR TOUCH
   =================================== */

/* Status-Indikatoren */
.bp-signature-status {
    margin: 15px 0 !important;
    text-align: center !important;
}

.bp-signature-empty {
    display: block;
    background: #fff3cd !important;
    color: #856404 !important;
    border: 2px solid #ffeaa7 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

.bp-signature-valid {
    display: none;
    background: #d4edda !important;
    color: #155724 !important;
    border: 2px solid #c3e6cb !important;
    border-radius: 6px !important;
    padding: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* Clear Button - Mobile optimiert */
#clear_signature {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 15px 25px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    margin: 15px 0 !important;
    min-height: 50px !important;
    width: 100% !important;
    max-width: 200px !important;
}

#clear_signature:hover {
    background: #c82333 !important;
}

#clear_signature:active {
    background: #bd2130 !important;
    transform: scale(0.98) !important;
}

/* Mobile spezifische Verbesserungen */
@media (max-width: 768px) {
    #clear_signature {
        font-size: 18px !important;
        padding: 18px 25px !important;
        min-height: 55px !important;
        width: 100% !important;
        max-width: 250px !important;
        margin: 20px auto !important;
        display: block !important;
    }
    
    .bp-signature-status {
        margin: 20px 0 !important;
    }
    
    .bp-signature-empty,
    .bp-signature-valid {
        font-size: 18px !important;
        padding: 15px !important;
    }
}

/* Container-Optimierungen */
.bp-signature-fieldset {
    position: relative !important;
    overflow: hidden !important;
}

.bp-signature-mode-selection {
    margin-bottom: 20px !important;
}

.bp-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.bp-radio-option {
    padding: 15px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: white !important;
}

.bp-radio-option:hover {
    border-color: #007cba !important;
    background: #f0f9ff !important;
}

.bp-radio-option input[type="radio"]:checked + span {
    color: #007cba !important;
    font-weight: 600 !important;
}

/* Mobile Help Text */
.bp-mobile-signature-help {
    background: #e3f2fd !important;
    border: 1px solid #2196f3 !important;
    border-radius: 6px !important;
    padding: 12px !important;
    margin: 15px 0 !important;
    font-size: 14px !important;
    color: #1565c0 !important;
    text-align: center !important;
}

@media (min-width: 769px) {
    .bp-mobile-signature-help {
        display: none !important;
    }
}

/* Anti-Zoom für iOS Safari */
@supports (-webkit-touch-callout: none) {
  #signature_canvas {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Während der Unterschrift ruhigstellen, ohne Layout-Lock */
@media (hover: none) and (pointer: coarse) {
  body.signature-active {
    overflow: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: none !important;
    height: 100% !important;
  }
}




/* ===================================
   UNTERSCHRIFTEN-MODUS-AUSWAHL
   =================================== */

/* Modus-Auswahl */
.bp-signature-mode-selection {
    margin-bottom: 1.5rem;
}

.bp-subsection-title {
    color: var(--brand-primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.bp-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bp-radio-option {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border: 2px solid var(--divider);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    background: white;
}

.bp-radio-option:hover {
    border-color: var(--brand-interact);
    background: #f8f9ff;
}

.bp-radio-option input[type="radio"] {
    margin: 0;
    margin-right: 0.75rem;
    transform: scale(1.2);
}

.bp-radio-option input[type="radio"]:checked + .bp-radio-indicator + .bp-radio-content {
    color: var(--brand-primary);
}

.bp-radio-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
}

.bp-radio-icon {
    font-size: 1.5rem;
    margin-top: 0.1rem;
}

.bp-radio-label {
    flex: 1;
}

.bp-radio-label strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--brand-primary);
}

.bp-radio-label small {
    color: var(--neutral);
    font-size: 0.9rem;
}

/* Canvas-Container */
/* Canvas-Container */
.bp-digital-signature-container {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--divider);
}


/* Rahmen & Größe über den Wrapper steuern */
.bp-signature-canvas-wrapper {
  width: min(100%, 500px);
  border: 3px solid #007cba;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 auto;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  transform: none !important; /* falls ein Parent transform hat */
}

/* Canvas füllt den Wrapper; kein eigener Border, keine feste Höhe */
.bp-signature-canvas,
#signature_canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;       /* Höhe kommt vom Wrapper (aspect-ratio) */
  box-sizing: content-box !important;
  border: 0 !important;
  background: #fff !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: crosshair !important;
}


.bp-signature-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bp-button {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.bp-button-secondary {
    background: var(--neutral);
    color: white;
}

.bp-button-secondary:hover {
    background: #4b5563;
}

.bp-signature-hint {
    text-align: center;
    padding: 0.75rem;
    background: #f0f9ff;
    border-radius: 6px;
    border: 1px solid #bae6fd;
}

/* Metadata-Felder */
.bp-signature-metadata {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider);
}

.bp-signature-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.bp-field-group {
    display: flex;
    flex-direction: column;
}

.bp-field-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: #374151;
}

.bp-input {
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.bp-input:focus {
    outline: none;
    border-color: var(--brand-interact);
    box-shadow: 0 0 0 3px rgba(43, 78, 153, 0.1);
}

/* Manueller Unterschriften-Container */
.bp-manual-signature-container {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid var(--divider);
}

.bp-info-box {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.bp-info-warning {
    background: #fef3c7;
    border: 1px solid #fcd34d;
}

.bp-info-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.bp-info-content {
    flex: 1;
}

.bp-info-content p {
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

.bp-manual-signature-steps {
    margin-bottom: 1.5rem;
}

.bp-step-list {
    padding-left: 1.5rem;
    line-height: 1.6;
}

.bp-step-list li {
    margin-bottom: 0.75rem;
}

.bp-return-contact {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.bp-company-address {
    font-style: normal;
    line-height: 1.6;
}

.bp-company-address a {
    color: var(--brand-interact);
    text-decoration: none;
}

.bp-company-address a:hover {
    text-decoration: underline;
}

.bp-manual-confirmation {
    background: #f0f4f8;
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--brand-interact);
}

.bp-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    line-height: 1.5;
}

.bp-checkbox-label input[type="checkbox"] {
    margin: 0;
    transform: scale(1.2);
    margin-top: 0.1rem;
}

.bp-checkbox-text {
    flex: 1;
}

/* ===================================
   MODAL UND ZUSAMMENFASSUNG
   =================================== */

/* Modal */
/* Overlay */
#bp-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  display:none; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  overflow:auto; -webkit-overflow-scrolling:touch;
}

/* Modal-Container: NICHT scrollen! -> nur Body scrollt */
.bp-modal-inner{
  background:#fff; border:1px solid #ccc; border-radius:14px;
  max-width:600px; width:calc(100% - 24px);
  margin:40px 12px;
  padding:0;                 /* neu: Padding nach innen auf Body/Header verlagern */
  display:flex; flex-direction:column;
  max-height:calc(100vh - 80px);
  overflow:hidden;           /* hält Header/Body sauber zusammen */
}

/* Modal-Header: Titel ÜBER dem Button, zentriert */
.bp-modal-header{
  position: sticky; top: 0; z-index: 2;
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 14px 18px 10px;

  display: flex;
  flex-direction: column;      /* <-- neu: untereinander */
  align-items: center;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.bp-modal-header h3{ margin: 0; text-align: center; }

/* Typografie */
.bp-modal-body p{ margin:0 0 .75rem; line-height:1.6; }
.bp-modal-body ul, .bp-modal-body ol{ margin:0 0 .75rem 1.25rem; }
.bp-modal-body{
  text-align: left !important;
}


/* Inhalt: der EINZIGE Scrollbereich */
/* Scrollbereich bleibt der EINZIGE scrol­lende Bereich */
.bp-modal-body{
  padding: 12px 18px 18px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Scroll-Hinweis */
.bp-scroll-hint{
  position: sticky; top: -6px;
  text-align: center; font-size: 12px;
  color: #6b7280; opacity: 1; transition: opacity .15s;
  padding: 2px 0 8px;
  background: linear-gradient(#fff, rgba(255,255,255,0));
  pointer-events: none;
}
.bp-modal-body.scrolled .bp-scroll-hint{ opacity: 0; }

/* Mobile kleine Reserve unten gegen Browser-UI */
@supports(padding:max(0px)){
  .bp-modal-body{ padding-bottom:max(18px, env(safe-area-inset-bottom)); }
}

/* Zusammenfassung im Corporate Design */
.bp-summary-box{
    border: 2px solid var(--divider);
    border-radius: 8px;
    background: #fafbfc; /* Gleicher heller Hintergrund wie Extras */
    padding: 20px;
    margin: 20px 0;
}

.bp-summary-head h3{ 
    margin: 0 0 16px 0; 
    font-size: 1.2rem; 
    font-weight: 600;
    color: var(--brand-primary);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--divider);
}

.bp-summary-list{ 
    display: flex; 
    flex-direction: column; 
    gap: 8px;
}

.bp-summary-row{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 24px; 
    padding: 12px 0; 
    border-bottom: 1px dashed var(--divider);
}

.bp-summary-row:last-child{ 
    border-bottom: none; 
}

.bp-summary-label{ 
    font-weight: 500;
    color: var(--brand-primary-dark);
    flex: 1;
}

.bp-summary-price{ 
    white-space: nowrap;
    font-weight: 600;
    color: var(--brand-accent);
    font-size: 1.1rem;
}

.bp-summary-total{
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    gap: 24px;
    padding: 16px 0 0 0; 
    margin-top: 16px; 
    border-top: 2px solid var(--brand-primary);
    font-size: 1.25rem; 
    font-weight: 700;
}

.bp-summary-total .bp-summary-label {
    color: var(--brand-primary);
    font-weight: 700;
}

.bp-summary-total .bp-summary-price {
    color: var(--brand-accent);
    font-weight: 700;
    font-size: 1.25rem;
}

/* ===================================
   LEGACY FORM SUPPORT
   =================================== */

.bp-legal{ font-size:.92rem; color:#333; margin-top:8px; }

.additional-fields-container {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 5px;
    border-left: 4px solid #007cba;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

@media (max-width: 768px) {
    .bp-fieldset {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .bp-fieldset legend {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        margin-left: 0.5rem;
    }
    
    .bp-grid-2,
    .bp-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .bp-grid-span-2 {
        grid-column: span 1;
    }
    
    .bp-inline {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .bp-legal-links {
        flex-direction: column;
    }
    
    .bp-radio-group {
        gap: 0.5rem;
    }
    
    .bp-radio-option {
        padding: 0.75rem;
    }
    
    .bp-signature-fields {
        grid-template-columns: 1fr;
    }
    
    /* Mobile Anpassungen für Angebots-Formular */
    .bp-step-quote {
        padding: 0.5rem;
    }
    
    .bp-step-quote h2 {
        font-size: 1.5rem;
    }
    
    #bp-quote-form {
        padding: 1rem;
        border-radius: 8px;
    }
    
    #bp-quote-form::before {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        left: 0.5rem;
        content: "📋 Kontaktdaten";
    }
    
    .bp-form-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin: 1.5rem 0 1rem 0;
    }
    
    .bp-form-grid input,
    .bp-form-grid select {
        padding: 0.625rem;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    .bp-form-actions {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    
    .bp-form-actions button {
        width: 100%;
    }
    
    .bp-privacy {
        padding: 0.75rem;
    }
    
    .bp-hint {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    #marital-status-fields {
        padding: 0.75rem;
    }
    
    #marital-status-fields .bp-grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width:640px){
  .bp-nav{ flex-direction:column; }
}

@media (max-width: 480px) {
    .bp-fieldset {
        padding: 0.75rem;
        border-radius: 8px;
    }
    
    .bp-field input,
    .bp-field select,
    .bp-field textarea {
        padding: 0.625rem;
        font-size: 16px; /* Verhindert Zoom auf iOS */
    }
    
    /* Weitere Mobile Anpassungen für Angebots-Formular */
    #bp-quote-form {
        padding: 0.75rem;
        margin: 1rem 0;
    }
    
    .bp-form-grid {
        margin: 1rem 0;
    }
}

/* ===================================
   DRUCKEN
   =================================== */

@media print {
    .bp-fieldset {
        break-inside: avoid;
    }
    
    .bp-signature-canvas {
        border: 2px solid #000;
    }
    
    .bp-button,
    .bp-btn-primary,
    .bp-btn-secondary {
        display: none;
    }
}

/* ===================================
   ACCESSIBILITY
   =================================== */

.bp-radio-option:focus-within {
    outline: 2px solid var(--brand-interact);
    outline-offset: 2px;
}

.bp-checkbox-label:focus-within {
    outline: 2px solid var(--brand-interact);
    outline-offset: 2px;
    border-radius: 4px;
}

.bp-field input:focus,
.bp-field select:focus,
.bp-field textarea:focus {
    outline: none;
    border-color: var(--brand-interact);
    box-shadow: 0 0 0 3px rgba(43, 78, 153, 0.1);
}

/* ===================================
   ANIMATIONS
   =================================== */

/* Animation für Modusumschaltung */
.bp-digital-signature-container,
.bp-manual-signature-container {
    transition: opacity 0.3s ease-in-out;
}

.bp-digital-signature-container[style*="display: none"],
.bp-manual-signature-container[style*="display: none"] {
    opacity: 0;
}

/* E-Mail und andere Input-Felder: Verhindere Auto-Scroll bei Touch */
.bp-step-order input[type="email"],
.bp-step-order input[type="text"],
.bp-step-order input[type="tel"] {
    scroll-margin-top: 100px;
}

/* Canvas: Verhindere Browser-Gesten */
.bp-signature-canvas {
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* === SIGNATURBLOCK: Desktop wieder mittig + untereinander === */

/* 1) Canvas-Container zentrieren */
.bp-signature-fieldset .bp-digital-signature-container{
  display:block;
  max-width: 560px;         /* 500px Canvas + Ränder */
  margin: 0 auto 12px;      /* mittig + kleiner Abstand nach unten */
}

/* 2) Wrapper sauber zentrieren (falls noch nicht) */
.bp-signature-fieldset .bp-signature-canvas-wrapper{
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* 3) Status-Hinweis gelb zentriert unter dem Canvas */
.bp-signature-fieldset .bp-signature-status{
  max-width: 560px;
  margin: 8px auto;
  text-align: center;
}

/* 4) "Unterschrift löschen" als Block unter dem Hinweis, zentriert */
.bp-signature-fieldset #clear_signature{
  display: block !important;
  width: min(100%, 260px) !important;
  margin: 8px auto 16px !important;
}

/* 5) Hilfetext (falls sichtbar) ebenfalls zentriert begrenzen */
.bp-signature-fieldset .bp-signature-hint{
  max-width: 560px;
  margin: 8px auto;
}

/* 6) Canvas selbst füllt den Wrapper (falls irgendwo überstimmt wurde) */
.bp-signature-fieldset .bp-signature-canvas,
.bp-signature-fieldset #signature_canvas{
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;        /* Rahmen liegt am Wrapper */
  box-sizing: content-box !important;
}

/* 7) Safety: auf schmalen Screens bleibt alles ohnehin untereinander */
@media (max-width: 768px){
  .bp-signature-fieldset .bp-digital-signature-container,
  .bp-signature-fieldset .bp-signature-status,
  .bp-signature-fieldset #clear_signature,
  .bp-signature-fieldset .bp-signature-hint{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* === FIX: Mobile Canvas links nicht abschneiden, sauber mittig === */
.bp-signature-fieldset .bp-signature-canvas-wrapper{
  box-sizing: border-box;            /* Border in die Breite einrechnen */
}

/* falsche/alte mobile Negativ-Margins und Overflows neutralisieren */
@media (max-width: 768px){
  .bp-signature-fieldset .bp-digital-signature-container{
    margin: 0 auto !important;
    padding: 12px !important;        /* kleiner Innenabstand */
    overflow: visible !important;    /* nichts wegschneiden */
  }

  .bp-signature-fieldset .bp-signature-canvas-wrapper{
    width: 100% !important;
    max-width: 500px;                /* wie Desktop */
    margin: 8px auto !important;     /* statt negativer Margins */
    border-width: 2px;               /* dein mobiler, dünnerer Rand */
    border-radius: 8px;
    overflow: hidden;                /* nur innerhalb des Wrappers beschneiden */
  }

  /* Canvas füllt den Wrapper 1:1 */
  .bp-signature-fieldset .bp-signature-canvas,
  .bp-signature-fieldset #signature_canvas{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;           /* Rand liegt am Wrapper */
    box-sizing: content-box !important;
  }
}

/* Safety: Falls irgendein Parent overflow versteckt, im Signatur-Block nicht */
.bp-signature-fieldset{
  overflow: visible !important;
}


/* Zusatzinfo-Badge im Paketbild */
.bp-thumb .bp-badge{
  position:absolute; left:10px; bottom:10px; z-index:10;
  display:inline-block; padding:6px 10px; border-radius:9999px;
  font-size:.85rem; font-weight:700; line-height:1;
  background:var(--brand-accent);   /* #597765 – Salbei */
  color:#fff; border:2px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  pointer-events:none;              /* klickt NICHT die Karte */
}

/* optionale Varianten per data-note-variant */
.bp-thumb .bp-badge.is-warning{ background:var(--warning); }
.bp-thumb .bp-badge.is-success{ background:var(--success); }
.bp-thumb .bp-badge.is-neutral{ background:var(--neutral); }

/* 1) Falls ein Header-Wrapper existiert: Inhalt mittig ausrichten */
.bp-package-card .bp-card-header{
  display:flex;
  flex-direction:column;
  align-items:center;    /* zentriert horizontal */
  gap:.35rem;
}

/* 2) Den Titel selbst zuverlässig zentrieren */
.bp-package-card .bp-title{
  display:block;         /* volle Breite einnehmen */
  width:100%;
  text-align:center !important;  /* überstimmt Theme-Vorgaben */
  font-weight:700;
  font-size:1.1rem;
  line-height:1.3;
  margin:.25rem 0 .5rem;
}

/* 3) (Fallback) Wenn du keinen .bp-card-header benutzt, notfalls die ganze Karte textzentrieren */
.bp-package-card{
  text-align:center;
}

.bp-badge{padding:.1rem .4rem;border-radius:.35rem;font-size:.75rem}
.bp-badge-accent{background:#eef; }
.bp-badge-warning{background:#fff4e5;}
.bp-badge-success{background:#eaf7ea;}
.bp-badge-neutral{background:#f3f4f6;}


.bp-portal-table{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:8px;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
}

/* Header */
.bp-portal-table thead th{
  background:#f8fafc;
  border-bottom:2px solid #e5e7eb;
  font-weight:600;
  padding:10px 12px;
}

/* Zellen + Zeilenlinien */
.bp-portal-table th,
.bp-portal-table td{
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
}

/* Zebra */
.bp-portal-table tbody tr:nth-child(odd){ background:#fcfcfd; }
.bp-portal-table tbody tr:nth-child(even){ background:#fff; }

/* Hover */
.bp-portal-table tbody tr:hover{ background:#f1f5f9; }

/* optional: schmale Aktionsspalte */
.bp-portal-table td:last-child{ white-space:nowrap; }


/* Extra: "Weitere Informationen" Button unten rechts */
.bp-extra-item { position: relative; }
.bp-extra-info-btn{
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border: none;
  border-radius: 9999px;
  background: var(--brand-interact);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
}
.bp-extra-info-btn:hover{ background: var(--brand-primary); }

/* Kurzbeschreibung optisch zügeln */
.bp-extra-shortdesc{
  color: #4b5563;
  font-size: .92rem;
  line-height: 1.4;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Extras: finale Meta-Zeile (Button links | Preis rechts) ===== */

/* Reserve unten für Meta + Menge */
.bp-extras-list .bp-extra-item .bp-extra-content{
  padding-bottom: 96px !important;
}

/* Meta-Zeile sitzt oberhalb der Menge */
.bp-extras-list .bp-extra-item .bp-extra-meta{
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 56px !important;              /* oberhalb .bp-extra-qty */
  display: flex !important;
  align-items: center !important;        /* exakt gleiche Höhe */
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* Button LINKS, nur Textbreite (kurz wie bei Paketen) */
.bp-extras-list .bp-extra-item .bp-extra-info-btn{
  display: inline-block !important;
  width: auto !important;                /* KEINE Vollbreite */
  max-width: 65% !important;             /* Sicherheitslimit */
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;                  /* zentrierende globalen Regeln aushebeln */

  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: #31597A !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.bp-extras-list .bp-extra-item .bp-extra-info-btn:hover{ background:#23445e !important; }

/* Preis RECHTS in derselben Zeile – absolut explizit NICHT absolut */
.bp-extras-list .bp-extra-item .bp-extra-meta .bp-extra-price{
  position: static !important;           /* alte absolute Rules killen */
  top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  margin-left: auto !important;          /* schiebt den Preis ganz nach rechts */

  font-size: 18px !important;
  font-weight: 700 !important;
  color: #059669 !important;
  background: rgba(255,255,255,.95) !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* Menge ganz unten mittig */
.bp-extras-list .bp-extra-item .bp-extra-qty{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;
  z-index: 2 !important;
}

/* Mobile Tweaks */
@media (max-width: 768px){
  .bp-extras-list .bp-extra-item .bp-extra-content{ padding-bottom: 88px !important; }
  .bp-extras-list .bp-extra-item .bp-extra-meta{ bottom: 50px !important; }
  .bp-extras-list .bp-extra-item .bp-extra-meta .bp-extra-price{ font-size:16px !important; padding:2px 6px !important; }
  .bp-extras-list .bp-extra-item .bp-extra-info-btn{ font-size:.88rem !important; max-width:70% !important; }
}

/* --- Extras: Button wirklich LINKS, Preis RECHTS, gleiche Zeile --- */
.bp-extras-list .bp-extra-item .bp-extra-meta{
  position: absolute;
  left: 14px; right: 14px; bottom: 56px;
  display: flex;
  align-items: center;           /* gleiche Höhe */
  justify-content: flex-start;   /* Startausrichtung */
  gap: 12px;
  text-align: left;              /* Zentrier-Vererbung aushebeln */
}

/* Button zwingend links (keine Auto-Zentrierung aus globalen Styles) */
.bp-extras-list .bp-extra-item .bp-extra-info-btn{
  display: inline-block;
  width: auto !important;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  margin: 0 !important;          /* hebt margin:auto auf */
  margin-left: 0 !important;     /* explizit links */
  margin-right: auto !important;  /* schiebt den Preis nach rechts */
}

/* Preis nach rechts in derselben Zeile */
.bp-extras-list .bp-extra-item .bp-extra-meta .bp-extra-price{
  position: static !important;   /* keine absolute Position mehr */
  margin-left: 0;                /* Reset */
  margin-right: 0;
  margin-inline-start: auto;     /* RTL-sicher -> schiebt nach rechts */
  white-space: nowrap;
}

/* falls irgendwo .bp-extra-item oder .bp-extra-content text-align:center hat */
.bp-extras-list .bp-extra-item,
.bp-extras-list .bp-extra-content{
  text-align: left !important;
}
/* === Extras – Titelzeile oben, Button oben rechts, +10px Höhe === */
.bp-extras-list .bp-extra-item{ height:170px!important; min-height:170px!important; max-height:170px!important; }

/* Checkbox sicher weg */
.bp-extras-list .bp-extra-item input[type="checkbox"]{ position:absolute!important; opacity:0!important; width:0!important; height:0!important; pointer-events:none!important; visibility:hidden!important; }

/* Titelzeile oben + Trennlinie; Titel mittig */
.bp-extras-list .bp-extra-item .bp-extra-titlebar{
  position:absolute!important; top:0; left:0; right:0; height:36px; padding:8px 14px 0;
  border-bottom:1px solid #e5e7eb; display:flex; align-items:flex-end; justify-content:center; background:transparent;
}
.bp-extras-list .bp-extra-item .bp-extra-title{
  font-size:15px; font-weight:600; color:#374151; line-height:1.2; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Button oben rechts direkt unter der Linie */
.bp-extras-list .bp-extra-item .bp-extra-topactions{
  position:absolute!important; top:38px; right:14px; display:flex; align-items:center;
}
.bp-extras-list .bp-extra-item .bp-extra-info-btn{
  display:inline-block!important; width:auto!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important;
  margin:0!important; padding:8px 12px!important; border:0!important; border-radius:9999px!important;
  background:#31597A!important; color:#fff!important; font-weight:700!important; font-size:.9rem!important; line-height:1!important; cursor:pointer!important;
}
.bp-extras-list .bp-extra-item .bp-extra-info-btn:hover{ background:#23445e!important; }

/* Inhalt: oben und unten Platz reservieren */
.bp-extras-list .bp-extra-item .bp-extra-content{ padding-top:64px!important; padding-bottom:96px!important; }

/* Preis unten rechts in Zeile über der Menge */
.bp-extras-list .bp-extra-item .bp-extra-meta{
  position:absolute!important; left:14px; right:14px; bottom:56px; display:flex; align-items:center;
}
.bp-extras-list .bp-extra-item .bp-extra-meta .bp-extra-price{
  margin-left:auto!important; font-size:16px!important; font-weight:700!important; color:#059669!important;
  background:rgba(255,255,255,.95)!important; padding:2px 8px!important; border-radius:6px!important; white-space:nowrap!important;
}

/* Menge ganz unten mittig */
.bp-extras-list .bp-extra-item .bp-extra-qty{ position:absolute!important; left:50%!important; transform:translateX(-50%)!important; bottom:14px!important; z-index:2!important; }

/* Mobile */
@media (max-width:768px){
  .bp-extras-list{ grid-template-columns:1fr!important; gap:10px!important; }
  .bp-extras-list .bp-extra-item{ min-height:168px!important; }
  .bp-extras-list .bp-extra-item .bp-extra-title{ font-size:14px; }
  .bp-extras-list .bp-extra-item .bp-extra-content{ padding-bottom:188px!important; }
  .bp-extras-list .bp-extra-item .bp-extra-meta{ bottom:60px!important; }
  .bp-extras-list .bp-extra-item .bp-extra-meta .bp-extra-price{ font-size:16px!important; padding:2px 6px!important; }
  .bp-extras-list .bp-extra-item .bp-extra-info-btn{ font-size:.88rem!important; }
}

/* --- Fix: Info-Button oben rechts auf normale Pill-Breite --- */
.bp-extras-list .bp-extra-item .bp-extra-topactions{
  position: absolute;
  top: 38px;
  right: 14px;
  left: auto;                 /* falls irgendwo links gesetzt wurde */
  z-index: 3;
}

.bp-extras-list .bp-extra-item .bp-extra-topactions .bp-extra-info-btn{
  display: inline-block !important;
  box-sizing: border-box !important;

  /* Größe erzwingen – kein Mini-Badge mehr */
  width: auto !important;
  min-width: 140px !important;        /* optional: kannst du auf 0 setzen, wenn auto reicht */
  height: auto !important;
  max-width: none !important;

  padding: 8px 14px !important;
  line-height: 1 !important;
  border-radius: 9999px !important;

  /* Optik */
  background: #31597A !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;

  /* Text sauber anzeigen */
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: .9rem !important;

  /* evtl. globale Badge/Chip-Regeln aushebeln */
  margin: 0 !important;
}
.bp-extras-list .bp-extra-item .bp-extra-topactions .bp-extra-info-btn:hover{
  background: #23445e !important;
}

/* Oben mehr Platz, damit nichts kollidiert */
.bp-extras-list .bp-extra-item .bp-extra-content{
  padding-top: 82px !important;  /* vorher ~64px */
}

@media (max-width: 768px){
  .bp-extras-list .bp-extra-item .bp-extra-topactions{ top: 50px !important; }
  .bp-extras-list .bp-extra-item .bp-extra-content{ padding-top: 78px !important; }
}

/* === HARTE OVERRIDES für den Info-Button === */

/* Karte generell linksbündig machen (sonst vererbt sich center) */
.bp-extras-list .bp-extra-item{ text-align: left !important; }

/* Titelbar darf weiter zentrieren, aber beeinflusst nichts anderes */
.bp-extras-list .bp-extra-item .bp-extra-titlebar{ text-align: center !important; }

/* Container des Buttons: AN DIE RECHTE KANTE FIXIEREN */
.bp-extras-list .bp-extra-item .bp-extra-topactions{
  position: absolute !important;
  right: 104px !important;
  left: auto !important;
  top: 110px !important;                 /* Höhe wie von dir gewünscht */
  display: block !important;
  width: auto !important;
  text-align: right !important;         /* falls Kinder zentriert werden */
  z-index: 3 !important;
}

/* Button selbst: niemals zentrieren / nie “Badge”-Maße erben */
.bp-extras-list .bp-extra-item .bp-extra-topactions .bp-extra-info-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 140px !important;          /* ggf. auf 0 setzen, wenn nicht gewünscht */
  height: auto !important;
  max-width: none !important;

  margin: 0 !important;                 /* hebt margin:auto o. Ä. auf */
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 9999px !important;

  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;

  background: #31597A !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
}
.bp-extras-list .bp-extra-item .bp-extra-topactions .bp-extra-info-btn:hover{
  background:#23445e !important;
}

/* Content oben genug Abstand, damit der Button nicht kollidiert */
.bp-extras-list .bp-extra-item .bp-extra-content{
  padding-top: 82px !important;         /* Titel + Button-Luft */
}

/* === EXTRAS: Anti-Überlappung + saubere Abstände (Patch) === */

/* 1) Grid-Karten dürfen sich in der Höhe selbst bemessen */
.bp-extras-list{
  grid-auto-rows: auto !important;      /* falls irgendwo fix gesetzt war */
}

/* 2) Kartenhöhe NICHT hart fixieren – nur Mindesthöhe beibehalten */
.bp-extras-list .bp-extra-item{
  height: auto !important;              /* wichtig gegen Überlappung */
  min-height: 168px !important;         /* dein Wunschwert bleibt */
  overflow: visible !important;         /* nichts abschneiden */
  z-index: 1;                           /* eigener Stacking-Context, sicher */
}

/* 3) Wenn irgendein Theme die Gaps killt: Fallback-Margin pro Karte */
@media (max-width: 768px){
  .bp-extras-list{
    grid-template-columns: 1fr !important;  /* dein Wunsch */
    gap: 10px !important;                   /* dein Wunsch */
    margin: 8px 0 14px !important;          /* dein Wunsch */
  }
  .bp-extras-list .bp-extra-item{
    margin-bottom: 10px !important;         /* Fallback, stört Grid nicht */
  }
}
/* --- EXTRAS: Klicks erlauben, Layout der Menge stabilisieren --- */

/* Overlays (Titel/Meta) nicht Klicks abfangen, sonst wird Karte nicht grün */
.bp-extras-list .bp-extra-item .bp-extra-topactions,
.bp-extras-list .bp-extra-item .bp-extra-meta{
  pointer-events: none !important;  /* Wrapper durchlässig … */
}

/* … aber interaktive Elemente darin müssen klickbar bleiben */
.bp-extras-list .bp-extra-item .bp-extra-topactions .bp-extra-info-btn{
  pointer-events: auto !important;
}

/* MENGENZEILE: unten mittig, in einer Reihe */
.bp-extras-list .bp-extra-item .bp-extra-qty{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;
  z-index: 3 !important;

  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;

  pointer-events: auto !important;  /* selbst klickbar */
}

.bp-extras-list .bp-extra-item .bp-extra-qty label{
  margin: 0 6px 0 0 !important;
}

/* Minus / Eingabe / Plus nebeneinander und gleich hoch */
.bp-extras-list .bp-extra-item .bp-qty-controls{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.bp-extras-list .bp-extra-item .bp-qty-btn{
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #d1d5db !important;
  background: #fff !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.bp-extras-list .bp-extra-item .bp-extra-qty input[type="number"]{
  width: 54px !important;
  height: 32px !important;
  padding: 0 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  text-align: center !important;
  line-height: 32px !important;              /* Zahl optisch mittig */
  -moz-appearance: textfield !important;
}
.bp-extras-list .bp-extra-item .bp-extra-qty input[type="number"]::-webkit-outer-spin-button,
.bp-extras-list .bp-extra-item .bp-extra-qty input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Platz nach unten für Menge beibehalten (damit nichts überlappt) */
.bp-extras-list .bp-extra-item .bp-extra-content{
  padding-bottom: 96px !important;
}

/* Mobile: dein Grid/Abstand beibehalten – nur Robustheit */
@media (max-width: 768px){
  .bp-extras-list{ grid-template-columns: 1fr !important; gap: 10px !important; }
  .bp-extras-list .bp-extra-item{ min-height: 168px !important; }
}

/* Menge standardmäßig ausblenden … */
.bp-extras-list .bp-extra-item .bp-extra-qty{
  display: none !important;
}

/* … und nur bei ausgewähltem Extra einblenden */
.bp-extras-list .bp-extra-item.selected .bp-extra-qty,
.bp-extras-list .bp-extra-item .bp-extra-qty.show{ /* falls du .show aus JS nutzt */
  display: flex !important;
}

/* Karte bleibt klickbar; nur der Info-Button fängt eigene Klicks */
.bp-extras-list .bp-extra-item { pointer-events: auto; }
.bp-extras-list .bp-extra-item * { pointer-events: auto; }

/* Falls du Layout-Layer hast, die die Karte überdecken: nicht blockieren */
.bp-extras-list .bp-extra-item .bp-extra-titlebar,
.bp-extras-list .bp-extra-item .bp-extra-meta { pointer-events: none; }

/* ABER: interaktive Elemente dürfen geklickt werden */
.bp-extras-list .bp-extra-item .bp-extra-info-btn,
.bp-extras-list .bp-extra-item .bp-extra-qty,
.bp-extras-list .bp-extra-item .bp-qty-btn,
.bp-extras-list .bp-extra-item input[type=number] { pointer-events: auto; }

/* Menge: mittig & gleich hoch */
.bp-extras-list .bp-extra-item .bp-extra-qty { display: none; align-items: center; justify-content: center; }
.bp-extras-list .bp-extra-item .bp-extra-qty.show { display: flex; }
.bp-extras-list .bp-extra-item .bp-extra-qty input[type=number] {
  text-align: center;
  height: 28px;
  line-height: 28px;
}

/* Sichtbare Auswahl der Extras (grüner Rahmen + sanfter Schatten) */
.bp-extras-list .bp-extra-item.selected{
  border-color: var(--success) !important;        /* #10b981 */
  box-shadow: 0 0 0 3px rgba(16,185,129,.18) !important;
  background: #f8fffb !important;
}

/* <!-- KOMPLETT NEUES CSS - MOBILE FIRST -->

/* Signature Canvas - Mobile-First Design */
.bp-signature-canvas-wrapper {
    background: #fff !important;
    padding: 15px !important;
    border-radius: 12px !important;
    margin: 15px 0 !important;
    text-align: center !important;
    border: 2px solid #007cba !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

#signature_canvas {
    display: block !important;
    margin: 0 auto !important;
    background: #fafafa !important;
    border: 3px solid #007cba !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    
    /* Touch-Optimierungen - KRITISCH für Mobile */
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    
    /* Responsive Größe */
    width: 100% !important;
    max-width: 500px !important;
    height: 200px !important;
    
    /* Cursor */
    cursor: crosshair !important;
}

/* Mobile Anpassungen – bündig + 200px Höhe */
@media (max-width: 768px) {
  .bp-signature-canvas-wrapper{
    padding: 10px !important;
    margin: 10px 0 !important;          /* NEGATIVE Ränder entfernen → kein Overflow */
    border-radius: 8px !important;
    aspect-ratio: auto !important;       /* Wrapper-Höhe NICHT durch 3:1 erzwingen */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #signature_canvas{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 200px !important;            /* exakt gewünschte Höhe */
  }
}

    
    .bp-radio-content {
        margin-left: 8px !important;
    }


/* Debugging Styles */
.bp-debug-signature {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    background: rgba(0,0,0,0.8) !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-family: monospace !important;
    z-index: 9999 !important;
    display: none !important;
}

/* === Signature: Anti-Overlay/Pointer-Schutz === */
#signature_canvas { pointer-events: auto !important; position: relative; z-index: 2; }
.bp-signature-canvas-wrapper { position: relative; }
.bp-signature-canvas-wrapper .bp-css-dump,
.bp-signature-canvas-wrapper [data-overlay],
.bp-signature-canvas-wrapper .signature-overlay {
  pointer-events: none !important;
}

#bp-dec-birthdate::-webkit-calendar-picker-indicator,
#bp-ag-birthdate::-webkit-calendar-picker-indicator { display:none !important; opacity:0 !important; }
#bp-dec-birthdate, #bp-ag-birthdate { -webkit-appearance: none !important; appearance: none !important; }

/* Mobile: Standard-Tap-Highlight ausblenden */
@media (pointer: coarse) {
  .bp-extra-item,
  .bp-extra-item * ,
  .bp-extra-info-btn {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }

  /* Mobile-Focusrahmen nicht zeigen (Keyboard-Fokus bleibt am Desktop erhalten) */
  .bp-extra-item:focus,
  .bp-extra-info-btn:focus {
    outline: none;
    box-shadow: none;
  }
  /* nur wenn der Browser :focus-visible unterstützt: am Handy ausblenden */
  .bp-extra-item:focus:not(:focus-visible),
  .bp-extra-info-btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

/* Falls die Markierung trotzdem über den Rand „blutet“, Container clippen */
.bp-extra-item {
  border-radius: 12px;        /* deinen Radius übernehmen */
  overflow: hidden;           /* verhindert, dass irgendein Highlight herausragt */
}