/**
Theme Name: online-energieausweis
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: online-energieausweis
Template: astra
*/


/* Gesamtpreis-Bereich */
.elementor-field-group-v_ausweis_gesamt,
.elementor-field-group-v_netto,
.elementor-field-group-v_mwst {
    border: 1px solid var(--e-global-color-b1ec787);
    margin-bottom: 0;
    background: var(--e-global-color-7815c72);
}

.elementor-field-group-v_ausweis_gesamt {
    border-bottom: none;
    background: var(--e-global-color-secondary);
}

.elementor-field-group-v_netto {
    border-top: none;
    border-bottom: none;
}

.elementor-field-group-v_mwst {
    border-top: none;
}

.elementor-field-group-v_ausweis_gesamt .elementor-field-label,
.elementor-field-group-v_netto .elementor-field-label,
.elementor-field-group-v_mwst .elementor-field-label {
    display: inline-block;
    font-weight: 600;
    color: var(--e-global-color-text);
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    width: auto;
}

.elementor-field-group-v_ausweis_gesamt .dce-amount-visible,
.elementor-field-group-v_netto .dce-amount-visible,
.elementor-field-group-v_mwst .dce-amount-visible {
    display: inline-block;
    font-weight: 600;
    color: var(--e-global-color-text);
    background: transparent;
    border: none;
    padding: 0.75rem 1rem 0.75rem 0;
    text-align: right;
    width: auto;
    float: right;
    margin-right: 1rem;
}

.elementor-field-group-v_ausweis_gesamt .dce-amount-visible {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Section Styles */
.energieausweis-display section {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--e-global-color-primary);
}

.energieausweis-display section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Headings */
.energieausweis-display h2 {
    color: var(--e-global-color-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--e-global-color-primary);
}

.energieausweis-display h3 {
    color: var(--e-global-color-primary);
    margin: 1.5rem 0 0.75rem 0;
}

/* Definition Lists */
.energieausweis-display dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0.5rem 1rem;
    align-items: baseline;
}

.energieausweis-display dt {
    padding: 0.5rem 0;
    border-bottom: 1px dotted #ddd;
}

.energieausweis-display dd {
    margin: 0;
    padding: 0.5rem 0;
    border-bottom: 1px dotted #ddd;
    word-break: break-word;
}

/* Special formatting for empty values */
.energieausweis-display dd:empty::after {
    content: "—";
    color: #999;
    font-style: italic;
}

/* Image Gallery */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.image-item {
    text-align: center;
}

.image-item h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: #666;
}

.image-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Notes Section */
.notes-content {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    border-left: 4px solid #2c5aa0;
    white-space: pre-wrap;
    font-family: inherit;
}

/* Responsive Design */
@media (max-width: 768px) {
    .energieausweis-display {
        padding: 1rem;
        margin: 1rem;
    }
    
    .energieausweis-display dl {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .energieausweis-display dt {
        font-weight: 700;
        background: #f8f9fa;
        padding: 0.75rem;
        margin-top: 1rem;
        border-radius: 4px 4px 0 0;
        border-bottom: none;
    }
    
    .energieausweis-display dd {
        background: #fff;
        padding: 0.75rem;
        margin-bottom: 0;
        border: 1px solid #e5e5e5;
        border-top: none;
        border-radius: 0 0 4px 4px;
    }
    
    .image-gallery {
        grid-template-columns: 1fr;
    }
}

/* Print Styles */
@media print {
    .energieausweis-display {
        box-shadow: none;
        padding: 0;
        max-width: none;
    }
    
    .energieausweis-display section {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .energieausweis-display h2 {
        color: #000;
        border-bottom-color: #000;
    }
    
    .energieausweis-display h3 {
        color: #000;
    }
}

/* Status Indicators */
.status-positive {
    color: #28a745;
    font-weight: 600;
}

.status-negative {
    color: #dc3545;
    font-weight: 600;
}

.status-neutral {
    color: #6c757d;
}

/* Highlight important values */
.energieausweis-display dd strong {
    color: #2c5aa0;
    font-weight: 700;
}

/* Section-specific styling */
.building-info {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 1.5rem;
    border-radius: 8px;
    border: none;
}

.period-formatted {
	background-color: var(--e-global-color-f789676, #FFECB4);
	padding: 2px 6px;
	border-radius: 4px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.period-formatted:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Mirror-Field Kennzeichnung */
.mirror-field {
	font-style: italic;
}

/* Loading-Animation für unformatierte Codes */
.period-field:not(.period-formatted)::after {
	opacity: 0.5;
	font-size: 0.8em;
	animation: periodPulse 1.5s infinite;
}

@keyframes periodPulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.8; }
}

/* Print-Optimierung */
@media print {
	.period-field::after {
		display: none;
	}

	.mirror-field::before {
		display: none;
	}
}

	/* Basis: Auf Formular-Container Elementor-typische Typografie & Abstände */
	.simpay-checkout-form,
	.simpay-checkout-form * {
	  box-sizing: border-box;
	}
	.simpay-checkout-form {
	  --el-primary: var(--e-global-color-primary, #6EC1E4);
	  --el-text: var(--e-global-color-text, #3a3a3a);
	  --el-muted: #7a7a7a;
	  --el-border: #e0e0e0;
	  --el-bg: #ffffff;
	  --el-radius: 6px;
	  --el-focus-ring: rgba(110, 193, 228, .25);
	  color: var(--el-text);
	  font-family: var(--e-global-typography-text-font-family, inherit);
	  font-size: var(--e-global-typography-text-font-size, 16px);
	  line-height: 1.5;
	}

	/* Überschriften wie Elementor */
	.simpay-checkout-form h2,
	.simpay-checkout-form legend {
	  font-family: var(--e-global-typography-primary-font-family, inherit);
	  font-weight: var(--e-global-typography-primary-font-weight, 700);
	  font-size: clamp(20px, 2vw, 26px);
	  margin: 1.2em 0 .6em;
  color: var(--e-global-color-primary, #1f2937);
}

/* Labels im Elementor-Stil */
.simpay-checkout-form .simpay-label-wrap label,
.simpay-checkout-form legend.simpay-label-wrap,
.simpay-checkout-form .simpay-label-wrap {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--el-text);
  margin: 0 0 .4rem;
}

/* Kleinere Hinweise (optional/Fehler etc.) */
.simpay-checkout-form .simpay-optional-indicator {
  color: var(--el-muted);
  font-weight: 400;
}

/* Inputs/Selects/Textfields an Elementor angleichen */
.simpay-checkout-form input[type="text"],
.simpay-checkout-form input[type="email"],
.simpay-checkout-form input[type="tel"],
.simpay-checkout-form select,
.simpay-checkout-form textarea {
  width: 100%;
  border: 1px solid var(--el-border);
  background: var(--el-bg);
  color: var(--el-text);
  border-radius: var(--el-radius);
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.simpay-checkout-form input::placeholder,
.simpay-checkout-form textarea::placeholder {
  color: #a3a3a3;
}

.simpay-checkout-form input:focus,
.simpay-checkout-form select:focus,
.simpay-checkout-form textarea:focus {
  border-color: var(--el-primary);
  box-shadow: 0 0 0 3px var(--el-focus-ring);
}

/* International Tel Input (Wrapper von WP Simple Pay) */
.simpay-checkout-form .iti input[type="tel"] {
  padding-left: 52px; /* Platz für Flagge */
}

/* Field-Spacings wie Elementor Form Widget */
.simpay-checkout-form .simpay-form-control {
  margin-bottom: 18px;
}

/* Stripe Address Element & Payment Element – Container angleichen */
.simpay-checkout-form .StripeElement,
.simpay-checkout-form .simpay-upe-wrap,
.simpay-checkout-form .simpay-address-element {
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  padding: 10px 12px;
  background: var(--el-bg);
}
.simpay-checkout-form .StripeElement:focus-within {
  border-color: var(--el-primary);
  box-shadow: 0 0 0 3px var(--el-focus-ring);
}

/* Plan-Liste wie Elementor-Karten / Checkbox-Gruppe */
.simpay-checkout-form .simpay-multi-plan-radio-group {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: grid;
  gap: 10px;
}
.simpay-checkout-form .simpay-multi-plan-radio-group .simpay-price-selection-label {
  margin: 0;
}
.simpay-checkout-form .simpay-multi-plan-radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--el-border);
  border-radius: var(--el-radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.simpay-checkout-form .simpay-multi-plan-radio-group input[type="checkbox"],
.simpay-checkout-form .simpay-multi-plan-radio-group input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--el-primary);
}
.simpay-checkout-form .simpay-multi-plan-radio-group input:checked + * {
  /* wenn DOM-Struktur anders ist, wirkt der Hover/Fokus ohnehin auf label */
}
.simpay-checkout-form .simpay-multi-plan-radio-group label:hover,
.simpay-checkout-form .simpay-multi-plan-radio-group label:has(input:checked) {
  border-color: var(--el-primary);
  box-shadow: 0 0 0 3px var(--el-focus-ring);
}

/* Betrags-/Summenbereich im Elementor-Stil */
.simpay-checkout-form .simpay-amounts-container {
  border-top: 1px solid var(--el-border);
  padding-top: 10px;
  margin-top: 6px;
}
.simpay-checkout-form .simpay-total-amount-label,
.simpay-checkout-form .simpay-tax-amount-container p,
.simpay-checkout-form .simpay-subtotal-amount-container p {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: .4rem 0;
  font-weight: 600;
}
.simpay-checkout-form .simpay-tax-amount-container p {
  font-weight: 500;
  color: var(--el-muted);
}

/* Checkbox-Gruppen (AGB/Datenschutz etc.) */
.simpay-checkout-form .simpay-checkbox-container .simpay-field-wrap {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.simpay-checkout-form input[type="checkbox"].simpay-checkbox {
  width: 18px; height: 18px;
  margin-top: 3px;
  accent-color: var(--el-primary);
}
.simpay-checkout-form .simpay-checkbox-label label a {
  color: var(--el-primary);
  text-decoration: underline;
}

/* Fehler/Hinweise wie Elementor Notices */
.simpay-checkout-form .simpay-errors {
  margin-top: 8px;
  font-size: .92rem;
  color: #b42318;
}
.simpay-checkout-form .simpay-generic-error {
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: #b42318;
  padding: 10px 12px;
  border-radius: var(--el-radius);
}

/* Button im Elementor-Stil (.elementor-button ähnlich) */
.simpay-checkout-form .simpay-btn,
.simpay-checkout-form .simpay-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  font-weight: 600;
  border: none;
  border-radius: var(--el-radius);
  padding: 14px 22px;
  background: var(--wp--preset--color--vivid-green-cyan);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform .02s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
}
.simpay-checkout-form .simpay-btn:hover,
.simpay-checkout-form .simpay-checkout-btn:hover {
  filter: brightness(0.95);
}
.simpay-checkout-form .simpay-btn:active,
.simpay-checkout-form .simpay-checkout-btn:active {
  transform: translateY(1px);
}
.simpay-checkout-form .simpay-checkout-btn em.simpay-total-amount-value {
  font-style: normal;
  font-weight: 700;
}

/* Badge Testmodus dezent */
.simpay-checkout-form .simpay-test-mode-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff6e5;
  color: #8a5300;
  font-size: .8rem;
  border: 1px solid #ffe3a3;
}

/* Kleinere Layout-Details */
.simpay-checkout-form .simpay-field-wrap { /* gleicht Elementor .elementor-field-group */
  display: block;
}
.simpay-checkout-form .simpay-form-control--card { margin-top: 8px; }
.simpay-checkout-form .simpay-plan-select-container legend { margin-bottom: .3rem; }

/* === WP Simple Pay Formular-Layout – finale, geprüfte Version === */
#simpay-form-2835 {
  --gap: 16px;
  display: grid;
  grid-template-columns: 40% 20% 40%;
  gap: var(--gap);
  grid-auto-rows: auto;
}

/* === Zeile 1: Firma / Anrede / Name === */
#simpay-form-2835 > .simpay-text-container { grid-column: 1; }      /* Firma */
#simpay-form-2835 > .simpay-dropdown-container { grid-column: 2; }  /* Anrede */
#simpay-form-2835 > .simpay-name-container { grid-column: 3; }      /* Name */

/* === Zeile 2: E-Mail / Telefon === */
#simpay-form-2835 > .simpay-email-container {
  grid-column: 1 / span 1; /* linke Hälfte */
}
#simpay-form-2835 > .simpay-telephone-container {
  grid-column: 2 / span 2; /* rechte Hälfte */
}

/* === Alle übrigen Felder über volle Breite === */
#simpay-form-2835 > *:not(.simpay-text-container):not(.simpay-dropdown-container):not(.simpay-name-container):not(.simpay-email-container):not(.simpay-telephone-container) {
  grid-column: 1 / -1;
}

/* Einheitliche Höhe und Optik */
#simpay-form-2835 input[type="text"],
#simpay-form-2835 input[type="email"],
#simpay-form-2835 input[type="tel"],
#simpay-form-2835 select {
  min-height: 46px;
  padding: 12px 14px;
  box-sizing: border-box;
  border-radius: 6px;
}

#simpay-form-2835 input[type="tel"] {
    width: 32rem !important;
    padding-left: 3rem;
}

.iti__flag-container {
    top: 1.3rem !important;
}

#simpay-form-2835 select {
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 12px center;
  background-repeat: no-repeat;
}

/* === Abstand zwischen Label und Dropdown (Anrede) angleichen === */
#simpay-form-2835 .simpay-dropdown-container .simpay-label-wrap {
  margin-bottom: 6px; /* etwas mehr Abstand */
  display: block;
}

#simpay-form-2835 .simpay-dropdown-container select {
  margin-top: 1rem; /* kein zusätzlicher Rand oben */
}

/* Responsiv: unter 900px alles einspaltig */
@media (max-width: 900px) {
  #simpay-form-2835 {
    grid-template-columns: 1fr;
  }
  #simpay-form-2835 > * {
    grid-column: 1 / -1 !important;
  }
}