/* Energieausweis Assistent – Frontend UI (scoped) */

.eaa-wrap{
  /* Style-Variablen (an Website-Style angelehnt, feinjustierbar) */
  --eaa-primary: #e2b43a;          /* warmes Gelb/Gold */
  --eaa-primary-hover: #cfa12f;
  --eaa-bg: #ffffff;
  --eaa-card-bg: #f2ede3;          /* beige Kachel */
  --eaa-card-bg-2: #ffffff;
  --eaa-text: #1f2937;
  --eaa-muted: #6b7280;
  --eaa-border: #e5e7eb;
  --eaa-shadow: 0 12px 30px rgba(0,0,0,.08);
  --eaa-radius: 12px;
  --eaa-radius-sm: 10px;
  --eaa-focus: 0 0 0 3px rgba(226,180,58,.35);

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--eaa-text);
  line-height: 1.45;
}

.eaa-wrap *{ box-sizing: border-box; }

.eaa-wrap a{ color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

.eaa-card{
  max-width: 980px;
  margin: 26px auto;
  background: var(--eaa-bg);
  border: 1px solid var(--eaa-border);
  border-radius: var(--eaa-radius);
  box-shadow: var(--eaa-shadow);
  overflow: hidden;
}

.eaa-stepper{
  display:flex;
  gap: 10px;
  padding: 18px 18px 14px;
  background: linear-gradient(180deg, var(--eaa-card-bg), rgba(242,237,227,.65));
  border-bottom: 1px solid var(--eaa-border);
}

.eaa-step{
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--eaa-radius-sm);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.75);
  color: var(--eaa-muted);
  font-weight: 600;
  font-size: 14px;
}

.eaa-step.is-active{
  color: var(--eaa-text);
  border-color: rgba(226,180,58,.45);
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(226,180,58,.12);
}

.eaa-form{ padding: 18px; }

.eaa-panel{ display:block; }
.eaa-panel[hidden]{ display:none !important; }

.eaa-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 12px 0;
}

@media (max-width: 720px){
  .eaa-row{ grid-template-columns: 1fr; }
  .eaa-stepper{ flex-direction: column; }
}

.eaa-field{
  background: var(--eaa-card-bg-2);
  border: 1px solid var(--eaa-border);
  border-radius: var(--eaa-radius-sm);
  padding: 12px;
}

.eaa-field label{
  display:block;
  font-weight: 650;
  font-size: 14px;
  margin: 0 0 8px;
}

.eaa-field input,
.eaa-field select,
.eaa-field textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 15px;
  background: #fff;
  color: var(--eaa-text);
  outline: none;
}

.eaa-field input:focus,
.eaa-field select:focus,
.eaa-field textarea:focus{
  border-color: rgba(226,180,58,.65);
  box-shadow: var(--eaa-focus);
}

.eaa-checkbox{ display:flex; gap: 10px; align-items:flex-start; font-weight: 600; }
.eaa-checkbox input{ width:auto; margin-top: 3px; }

.eaa-note{
  margin-top: 8px;
  font-size: 13px;
  color: var(--eaa-muted);
}

.eaa-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 16px;
}

.eaa-btn{
  appearance:none;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 11px 14px;
  font-weight: 750;
  font-size: 14px;
  cursor:pointer;
  background: #fff;
  color: var(--eaa-text);
  transition: transform .06s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.eaa-btn:active{ transform: translateY(1px); }

.eaa-btn--primary{
  background: var(--eaa-primary);
  border-color: rgba(0,0,0,.12);
}
.eaa-btn--primary:hover{ background: var(--eaa-primary-hover); }

.eaa-btn--secondary{
  background: rgba(255,255,255,.9);
}
.eaa-btn--secondary:hover{
  background: rgba(242,237,227,.9);
}

.eaa-btn:focus{ outline:none; box-shadow: var(--eaa-focus); }

.eaa-result{
  padding: 14px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--eaa-radius-sm);
  background: linear-gradient(180deg, rgba(242,237,227,.85), rgba(242,237,227,.55));
  margin: 8px 0 14px;
}

.eaa-result h3{
  margin: 0 0 8px;
  font-size: 18px;
}

.eaa-result ul{ margin: 8px 0 0 18px; }
.eaa-result li{ margin: 5px 0; color: var(--eaa-text); }

.eaa-error,
.eaa-success{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: var(--eaa-radius-sm);
  border: 1px solid rgba(0,0,0,.10);
}

.eaa-error{ background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }
.eaa-success{ background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.25); }

.eaa-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.eaa-hinweis{
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(226,180,58,.10);
  border: 1px solid rgba(226,180,58,.25);
  border-radius: var(--eaa-radius-sm);
  font-size: 0.95rem;
  color: var(--eaa-muted);
  line-height: 1.55;
}


/* EAA: Alles einspaltig, ohne das JS-Show/Hide zu zerstören */

/* Jede Field-Row wird vertikal */
.eaa-wrap .eaa-row{
  display: flex;          /* überschreibt grid, aber ohne !important */
  flex-direction: column;
  gap: 14px;
}

/* Felder immer volle Breite */
.eaa-wrap .eaa-field{
  width: 100%;
  max-width: 100%;
}

/* Inputs full width */
.eaa-wrap .eaa-field input,
.eaa-wrap .eaa-field select,
.eaa-wrap .eaa-field textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Hinweise/Notices immer untereinander + volle Breite */
.eaa-wrap .eaa-note,
.eaa-wrap .eaa-hinweis,
.eaa-wrap .eaa-error,
.eaa-wrap .eaa-success,
.eaa-wrap .eaa-result{
  width: 100%;
}

/* Button-Leiste ebenfalls einspaltig (optional, aber wirkt aufgeräumt) */
.eaa-wrap .eaa-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eaa-wrap .eaa-actions .eaa-btn{
  width: 100%;
}

/* Checkbox + Text nebeneinander ausrichten */
.eaa-wrap .eaa-row input[type="checkbox"]{
  width: auto;
  margin-right: 10px;
  margin-top: 3px;
  flex: 0 0 auto;
}

.eaa-wrap .eaa-row:has(input[type="checkbox"]){
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}