/* ===== Bestellroutine Styles ===== */

.bestellung-wizard, .bestellung-lead, .bestellung-success { max-width: 720px; margin: 0 auto; padding: 1em; }
.bestellung-intro { color: #555; font-size: 0.95em; margin: 0 0 0.8em; line-height: 1.5; }
.bestellung-hinweis { margin: 0 0 1em; padding: 0.6em 0.9em; background: #fdf3f3; border-left: 3px solid #9A0000; border-radius: 0 4px 4px 0; font-size: 0.92em; }
.bestellung-hinweis a { font-weight: 600; }

/* Lead-Form: kompakte Box mit hellem Hintergrund, ueberzeugendes Intro */
.bestellung-lead { background: #fafafa; border: 1px solid #e5e5e5; border-radius: 8px; padding: 2em 1.5em; }
.bestellung-lead h2 { margin: 0 0 0.5em; color: #9A0000; }
.bestellung-lead p.lead-intro { color: #555; margin: 0 0 1.5em; font-size: 1em; line-height: 1.5; }
.bestellung-lead .lead-form { background: transparent; padding: 0; }
.bestellung-lead .trust-signals { background: #fdf3f3; border-left: 3px solid #9A0000; padding: 0.6em 0.9em; margin: 1em 0; font-size: 0.85em; color: #444; border-radius: 0 4px 4px 0; }
.bestellung-lead .trust-signals p { margin: 0; }
.bestellung-lead .lead-gesendet { text-align: center; padding: 1.5em 0; }
.bestellung-lead .lead-gesendet h2 { color: #9A0000; }
.bestellung-lead .lead-gesendet p { color: #444; line-height: 1.6; }

/* Step Indicator */
.step-indicator { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; list-style: none; margin: 0 0 1.5em 0; }
.step-indicator .step { padding: 0.4em 0.8em; background: #eee; border-radius: 4px; font-size: 0.9em; color: #555; flex: 1; text-align: center; }
.step-indicator .step.active { background: #9A0000; color: #fff; font-weight: bold; }
.step-indicator .step.done { background: #fdf3f3; color: #9A0000; font-weight: bold; }

/* Fehler-Anzeige */
.fehler { background: #fee; border: 1px solid #c33; padding: 0.8em; margin-bottom: 1em; border-radius: 4px; }

/* Form Allgemein - nur Text-Inputs auf volle Breite */
.bestellung-form label { display: block; margin: 0.8em 0 0.3em; font-weight: 500; }
.bestellung-form input[type="text"],
.bestellung-form input[type="email"],
.bestellung-form input[type="tel"],
.bestellung-form input[type="number"],
.bestellung-form input[type="password"],
.bestellung-form select,
.bestellung-form textarea {
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #bbb;
  border-radius: 4px;
}

/* Radio + Checkbox: linksbündig, kompakt, professionell */
.bestellung-form input[type="radio"],
.bestellung-form input[type="checkbox"] {
  width: auto;
  margin: 0 0.6em 0 0;
  vertical-align: middle;
  cursor: pointer;
}

/* Inline-Label für Radios und Checkboxen (label.radio-inline / label.checkbox-inline) */
.bestellung-form label.radio-inline,
.bestellung-form label.checkbox-inline {
  display: flex;
  align-items: center;
  margin: 0.5em 0;
  font-weight: normal;
  cursor: pointer;
  text-align: left;
  gap: 0.4em;
}
.bestellung-form label.radio-inline span,
.bestellung-form label.checkbox-inline span { flex: 1; }

/* Checkbox-Row für AGB/Datenschutz mit etwas mehr Abstand */
.checkbox-row { margin: 0.8em 0; }

/* Paket-Optionen aus PHP gerendert — Flexbox-Layout: Radio links, Content rechts */
.bestellung-form label.paket-option {
  display: flex;
  align-items: flex-start;
  gap: 1em;
  padding: 1em;
  margin: 0.8em 0;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  font-weight: normal;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.bestellung-form label.paket-option:hover { border-color: #9A0000; background: #fef5f5; }
.bestellung-form label.paket-option:has(input[type="radio"]:checked) {
  border-color: #9A0000;
  background: #fdf3f3;
  box-shadow: 0 0 0 1px #9A0000;
}
.bestellung-form label.paket-option input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
  margin-top: 0.3em;
}
.paket-content { flex: 1; min-width: 0; }
.paket-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.8em; margin-bottom: 0.3em; }
.paket-header .paket-name { font-size: 1.1em; color: #222; }
.paket-header .paket-preis { color: #9A0000; font-weight: bold; white-space: nowrap; }
.paket-ust-hint { font-size: 0.78em; color: #555; margin-top: -0.1em; margin-bottom: 0.4em; }
.paket-einrichtung { font-size: 0.88em; color: #666; font-style: italic; margin-bottom: 0.6em; }
.paket-einrichtung .ust-inline { font-size: 0.85em; color: #555; font-style: normal; }
.paket-content .beschreibung { font-size: 0.9em; color: #444; }
.paket-content .beschreibung ul { margin: 0.4em 0 0 1.2em; padding: 0; }
.paket-content .beschreibung li { margin: 0.2em 0; }

/* Fieldset */
.bestellung-form fieldset { border: 1px solid #ddd; padding: 0.8em 1em; margin: 1em 0; border-radius: 4px; }
.bestellung-form fieldset legend { padding: 0 0.4em; font-weight: 500; }

/* Captcha-Block */
.bestellung-form fieldset.captcha img { display: block; margin: 0.5em 0; border: 1px solid #ccc; }
.bestellung-form fieldset.captcha input[type="text"] { max-width: 200px; letter-spacing: 0.2em; font-family: monospace; font-size: 1.1em; }

/* Signature-Pad */
fieldset.signature { padding: 1em; border: 1px solid #ddd; border-radius: 4px; margin: 1em 0; }
fieldset.signature legend { font-weight: 500; padding: 0 0.4em; }
.signature-hinweis { font-size: 0.85em; color: #555; margin: 0 0 0.6em; }
.signature-pad-wrap { background: #fff; border: 1px dashed #888; border-radius: 4px; touch-action: none; }
canvas.signature-pad { display: block; width: 100%; height: 160px; cursor: crosshair; }
.signature-clear { margin-top: 0.5em; background: #eee; border: 1px solid #bbb; padding: 0.4em 0.9em; border-radius: 4px; font-size: 0.85em; cursor: pointer; }
.signature-clear:hover { background: #ddd; }

/* Honeypot unsichtbar */
.honeypot { position: absolute; left: -5000px; top: -5000px; }

/* Actions Button-Leiste */
.actions { display: flex; gap: 0.5em; flex-wrap: wrap; margin-top: 1.5em; align-items: center; }
.actions .primary { background: #9A0000; color: #fff; border: none; padding: 0.7em 1.4em; cursor: pointer; border-radius: 4px; font-size: 1em; }
.actions .primary:hover { background: #9A0000; }
.actions .secondary, .actions .back { background: #eee; color: #333; padding: 0.7em 1.4em; text-decoration: none; border-radius: 4px; display: inline-block; }
.actions .secondary:hover, .actions .back:hover { background: #ddd; }

/* Trust Signals */
.trust-signals { margin: 1em 0; font-size: 0.9em; color: #555; }

/* Zusammenfassung (Step 3) */
.zusammenfassung dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3em 1em; margin: 0.5em 0; }
.zusammenfassung dt { font-weight: bold; }
.zusammenfassung dl.zusammenfassung-totals { margin-top: 1em; padding-top: 0.6em; border-top: 1px solid #ddd; }
.zusammenfassung dl.zusammenfassung-totals dt { font-weight: normal; color: #555; }
.zusammenfassung dl.zusammenfassung-totals dt:last-of-type,
.zusammenfassung dl.zusammenfassung-totals dd:last-of-type { font-weight: bold; color: #9A0000; font-size: 1.05em; padding-top: 0.3em; border-top: 1px solid #eee; }
.zusammenfassung .preis-hinweis { font-size: 0.85em; color: #666; margin: 1em 0; font-style: italic; }
.zusammenfassung address { font-style: normal; line-height: 1.5; margin: 0.5em 0 1em; }

/* Firma-Felder bei Privat ausgeblendet */
.firma-felder { display: none; }
.firma-felder.visible { display: block; }

/* Inline Field-Errors aus JS */
.field-error { color: #c33; font-size: 0.85em; margin-top: 0.2em; }

/* sr-only für Accessibility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Mobile */
@media (max-width: 600px) {
  .step-indicator .step { font-size: 0.75em; padding: 0.3em 0.4em; }
  .zusammenfassung dl { grid-template-columns: 1fr; }
  .bestellung-form label.paket-option { grid-template-columns: 24px 1fr; padding: 0.7em; }
}

/* Domain-Status-Anzeige */
.domain-input-group { margin-bottom: 1.2em; }
.domain-status { margin-top: 0.4em; padding: 0.5em 0.7em; border-radius: 4px; font-size: 0.92em; }
.domain-status.checking { background: #f0f0f0; color: #555; }
.domain-status.available { background: #dcfce7; color: #166534; border-left: 3px solid #15803d; }
.domain-status.taken { background: #fee2e2; color: #991b1b; border-left: 3px solid #c33; }
.domain-status.unknown { background: #fef3c7; color: #92400e; border-left: 3px solid #f59e0b; }
.domain-status.error { background: #fee2e2; color: #991b1b; }
.kk-antrag { display: inline-flex; align-items: center; margin-top: 0.5em; gap: 0.4em; cursor: pointer; }
.kk-antrag input[type="checkbox"] { margin: 0; }

/* Bestell-Flow Hilfetexte und Skip-Domain (Phase-1-Quick-Wins) */
.bestellung-step-hint { margin: 0 0 1em; padding: 0.5em 0.9em; background: #f0f5fa; border-left: 3px solid #555; border-radius: 0 4px 4px 0; font-size: 0.88em; color: #444; }
.step-indicator .step .step-meta { font-size: 0.85em; opacity: 0.7; font-weight: normal; }
.bestellung-skip-domain { display: block; padding: 0.8em 1em; margin: 1em 0; background: #fafafa; border: 1px dashed #9A0000; border-radius: 6px; cursor: pointer; }
.bestellung-skip-domain input[type="checkbox"] { margin-right: 0.6em; vertical-align: middle; }