/* Umzugskostenrechner – eigene Styles (ergänzend zu Tailwind per CDN) */

/* Formular-Basics */
.eingabe {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #fff;
}
.eingabe:focus {
  outline: 2px solid #0284c7;
  outline-offset: 1px;
}

/* Buttons */
.btn-primaer,
.btn-sekundaer,
.btn-klein {
  border-radius: 0.375rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-primaer {
  background: #0369a1;
  color: #fff;
  padding: 0.6rem 1.4rem;
}
.btn-primaer:hover { background: #075985; }
.btn-primaer:disabled { background: #94a3b8; cursor: not-allowed; }
.btn-sekundaer {
  background: #fff;
  color: #0369a1;
  border: 1px solid #0369a1;
  padding: 0.5rem 1rem;
}
.btn-sekundaer:hover { background: #f0f9ff; }
.btn-sekundaer:disabled { color: #94a3b8; border-color: #cbd5e1; cursor: not-allowed; }
.btn-klein {
  background: #e0f2fe;
  color: #075985;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
}
.btn-klein:hover { background: #bae6fd; }

/* Schritt-Anzeige (klickbar: Sprung auf bereits erreichte Schritte) */
.schritt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.5rem;
  background: #e2e8f0;
  color: #475569;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.schritt:disabled { cursor: default; opacity: 0.7; }
.schritt:not(:disabled):hover { background: #cbd5e1; }
.schritt.schritt-aktiv:not(:disabled):hover { background: #bae6fd; }
.schritt.schritt-fertig:not(:disabled):hover { background: #bbf7d0; }
.schritt:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.schritt-text { display: flex; flex-direction: column; min-width: 0; }
.schritt-titel { line-height: 1.2; }
.schritt-zusammenfassung {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schritt-zusammenfassung:empty { display: none; }
.schritt-nummer {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #94a3b8;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.schritt.schritt-aktiv {
  background: #e0f2fe;
  color: #075985;
  font-weight: 600;
}
.schritt.schritt-aktiv .schritt-nummer { background: #0369a1; }
.schritt.schritt-fertig { background: #dcfce7; color: #166534; }
.schritt.schritt-fertig .schritt-nummer { background: #16a34a; }

/* Block „Ihre Wohnung": Zimmerzahl je Typ */
.zimmer-zaehler {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
}
.zimmer-zaehler-name { font-size: 0.9rem; }

/* Inventar: Zimmer als einspaltiges Akkordeon.
   Bewusst kein mehrspaltiges Grid: dort koppeln sich die Zeilenhöhen, und ein
   aufgeklapptes Zimmer zerrt das danebenliegende auseinander. */
.raum-gruppe {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}
.raum-gruppe > summary {
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  font-weight: 600;
  list-style-position: inside;
}
.raum-gruppe > summary:hover { background: #f8fafc; }
.raum-gruppe[data-treffer="0"] > summary { color: #94a3b8; }
.raum-items { border-top: 1px solid #e2e8f0; }

.zimmer-kopf {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}
.zimmer-meta { font-weight: 400; font-size: 0.8rem; color: #64748b; }

/* Selten gebrauchte Positionen eines Zimmers – erreichbar, aber nicht im Weg. */
.weitere-gruppe > summary {
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  color: #0369a1;
  border-top: 1px solid #f1f5f9;
}
.weitere-gruppe > summary:hover { background: #f8fafc; }

/* Manueller Modus: selbst erfasste Stücke */
.flag-frei { background: #ede9fe; color: #5b21b6; }
.item-zeile.item-frei { background: #faf5ff; }
.stepper-loeschen {
  margin-left: 0.35rem;
  border-color: #cbd5e1;
  color: #64748b;
}
.stepper-loeschen:hover { background: #fee2e2; border-color: #ef4444; color: #b91c1c; }

.frei-bereich {
  padding: 0.5rem 0.9rem;
  border-top: 1px solid #f1f5f9;
}
.frei-formular {
  margin-top: 0.6rem;
  padding: 0.75rem;
  border: 1px dashed #c4b5fd;
  border-radius: 0.5rem;
  background: #faf5ff;
}
.frei-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.frei-zeile:last-child { margin-bottom: 0; }
.frei-feld { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.85rem; }
.frei-feld:first-child { flex: 1; min-width: 12rem; }
.frei-feld .eingabe { margin-top: 0; }
.frei-label { font-size: 0.85rem; color: #475569; }
.frei-volumen { font-weight: 600; font-variant-numeric: tabular-nums; }
.frei-presets { display: flex; gap: 0.35rem; }
.frei-merkmale { gap: 1rem; font-size: 0.85rem; }
.frei-merkmale label { display: inline-flex; align-items: center; gap: 0.35rem; }
.frei-fehler { color: #b91c1c; font-size: 0.85rem; }
.frei-fehler:empty { display: none; }

.zimmer-aktionen {
  padding: 0.5rem 0.9rem;
  border-top: 1px solid #f1f5f9;
  background: #f8fafc;
}

.item-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-top: 1px solid #f1f5f9;
}
.item-zeile:first-child { border-top: none; }
.item-zeile.item-gewaehlt { background: #f0f9ff; }
/* Vorbelegt, aber noch nicht bestätigt: sichtbar anders als eine geprüfte
   Angabe, damit man erkennt, was noch Vermutung ist. */
.item-zeile.item-vorschlag {
  background: repeating-linear-gradient(
    45deg, #fffbeb, #fffbeb 8px, #fef9f0 8px, #fef9f0 16px);
}
.item-zeile.item-vorschlag .menge-anzeige { color: #92400e; font-style: italic; }
.flag-vorschlag { display: none; background: #fef3c7; color: #92400e; }
.item-zeile.item-vorschlag .flag-vorschlag { display: inline-block; }
.item-name { font-size: 0.9rem; }
.item-meta { color: #64748b; font-size: 0.78rem; }

.stepper { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
.stepper-btn {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.375rem;
  border: 1px solid #0284c7;
  color: #0369a1;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.stepper-btn:hover { background: #e0f2fe; }
.stepper-btn:focus-visible { outline: 2px solid #0284c7; outline-offset: 1px; }
.stepper-btn:disabled { border-color: #cbd5e1; color: #cbd5e1; cursor: not-allowed; }
.menge-anzeige {
  min-width: 2.2rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Flag-Badges an Positionen */
.flag {
  display: inline-block;
  font-size: 0.68rem;
  border-radius: 9999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.flag-empfindlich { background: #fef9c3; color: #854d0e; }
.flag-schwer { background: #fee2e2; color: #991b1b; }
.flag-montage { background: #e0e7ff; color: #3730a3; }
.flag-dicht { background: #dcfce7; color: #166534; }

/* Anfragen-Übersicht: Kundenlink freigeben oder sperren */
.link-schalter {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.1rem 0.6rem;
  border: 1px solid transparent;
  cursor: pointer;
}
.link-an { background: #dcfce7; color: #166534; border-color: #86efac; }
.link-an:hover { background: #bbf7d0; }
.link-aus { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.link-aus:hover { background: #fecaca; }

/* Parameter-Seite: geänderte Werte sichtbar machen */
.param-geaendert {
  border-color: #0369a1;
  background: #f0f9ff;
  font-weight: 600;
}
.param-zeile-geaendert > td:first-child::after {
  content: " geändert";
  font-size: 0.7rem;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 9999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}
.param-fehler {
  color: #b91c1c;
  font-size: 0.78rem;
  max-width: 16rem;
  margin-top: 0.2rem;
}
.param-fehler:empty { display: none; }

/* Stücklisten-Editor */
.sl-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid #f1f5f9;
}
.sl-zeile:first-child { border-top: none; }
.sl-zeile.sl-neu { background: #faf5ff; }
.sl-links { min-width: 14rem; flex: 1; }
.sl-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sl-rechts .eingabe { margin-top: 0; }
.sl-einheit { font-size: 0.8rem; color: #64748b; margin-right: 0.5rem; }
.sl-merkmale { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; }
.sl-merkmale label { display: inline-flex; align-items: center; gap: 0.25rem; }
.sl-zeile .param-fehler { flex-basis: 100%; max-width: none; }
.flag-geaendert { background: #e0f2fe; color: #075985; }

/* Status-Badges (Parameter) */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  border-radius: 9999px;
  padding: 0.1rem 0.6rem;
  font-weight: 600;
}
.badge-gruen { background: #dcfce7; color: #166534; }
.badge-gelb { background: #fef9c3; color: #854d0e; }
.quelle { cursor: help; color: #0369a1; }

/* Vergleichsmodus */
.treffer { color: #166534; font-weight: 700; }
.fehlschlag { color: #991b1b; font-weight: 700; }
.klein { font-size: 0.8rem; color: #64748b; }

/* Warnungen im Ergebnis */
.warnung {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  color: #854d0e;
}

/* Navigation oben */
.nav-link {
  padding: 0.35rem 0.8rem;
  border-radius: 0.375rem;
  color: #e0f2fe;
}
.nav-link:hover { background: #075985; }
.nav-aktiv { background: #075985; font-weight: 600; }

/* Screen-reader-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}