/* FUN Angebotssuche — eigenständiges Styling (läuft im iframe, kein Theme-CSS). */

:root {
  --farbe-primaer: #e8491d;      /* FUN-Orange/Rot — bei Bedarf ans CI anpassen */
  --farbe-primaer-dunkel: #c73a12;
  --farbe-text: #222;
  --farbe-text-leicht: #666;
  --farbe-rand: #ddd;
  --farbe-hintergrund: #fff;
  --farbe-karte: #fafafa;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px 16px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

.suche { max-width: 920px; margin: 0 auto; }

/* --- KI-Freitext (ab M3) --- */
.ki-box { margin-bottom: 16px; }
.ki-label { display: block; font-weight: 600; margin-bottom: 6px; }
.ki-row { display: flex; gap: 8px; }
.ki-row textarea {
  flex: 1; resize: vertical; padding: 10px 12px;
  border: 2px solid var(--farbe-primaer); border-radius: var(--radius);
  font: inherit;
}

.ki-hinweis {
  margin-top: 8px; font-size: 14px; color: var(--farbe-text-leicht);
  background: #fff8f5; border: 1px solid #f3d5c8; border-radius: 6px; padding: 8px 12px;
}

/* --- Formular --- */
.formular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px 12px;
  align-items: end;
  padding: 14px;
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
}
.feld label { display: block; font-size: 13px; color: var(--farbe-text-leicht); margin-bottom: 4px; }
.feld input, .feld select {
  width: 100%; padding: 8px 10px; font: inherit;
  border: 1px solid var(--farbe-rand); border-radius: 6px; background: #fff;
}
.feld-check { align-self: center; grid-column: span 2; }
.feld-check input[type="checkbox"] { width: auto; margin: 0; }
.feld-check label { font-size: 14px; color: var(--farbe-text); display: flex; gap: 6px; align-items: center; margin: 0; white-space: nowrap; }

.btn {
  padding: 10px 18px; font: inherit; font-weight: 600;
  border: 0; border-radius: 6px; cursor: pointer;
}
.btn-primary { background: var(--farbe-primaer); color: #fff; }
.btn-primary:hover { background: var(--farbe-primaer-dunkel); }
.btn[disabled] { opacity: .6; cursor: wait; }

/* --- Status / Ergebnisse --- */
.status { margin: 14px 0; color: var(--farbe-text-leicht); }
.status.fehler { color: #b00020; }

.ergebnisse { margin-top: 14px; display: grid; gap: 10px; }

.karte {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 12px 14px;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  background: var(--farbe-karte);
}
.karte-titel { font-weight: 700; font-size: 16px; }
.karte-sub { color: var(--farbe-text-leicht); font-size: 14px; }
.karte-details { font-size: 14px; margin-top: 2px; }
.karte-preis { text-align: right; align-self: center; }
.karte-preis .ab { font-size: 12px; color: var(--farbe-text-leicht); }
.karte-preis .betrag { font-size: 22px; font-weight: 800; color: var(--farbe-primaer); white-space: nowrap; }
.karte-preis .gesamt { font-size: 12px; color: var(--farbe-text-leicht); white-space: nowrap; }

.badge {
  display: inline-block; font-size: 12px; font-weight: 600;
  padding: 1px 8px; border-radius: 99px; margin-left: 6px; vertical-align: middle;
}
.badge-anfrage { background: #fff3e0; color: #b26a00; }
.badge-anderes-ziel { background: #e3f2fd; color: #1565c0; }

@media (max-width: 560px) {
  .karte { grid-template-columns: 1fr; }
  .karte-preis { text-align: left; }
}