/* Seitengestaltung: betreuerbeziehung */
.page { max-width: 1100px; }

.page__header-icon { color: var(--farbe-marke); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.25rem;
}

.card[hidden] { display: none; }

.card__title {
  font-size: var(--schrift-text);
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--blue-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bz-formular {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 520px;
}

.field-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.875rem;
  margin-bottom: 0.875rem;
  align-items: flex-start;
}

.field-group {
  display: block;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}

.field-group--voll { max-width: 100%; }
.field-group--breit { max-width: 480px; }

.field-group label {
  display: block;
  font-size: var(--schrift-text);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.field-group select,
.field-group input[type="text"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: var(--schrift-text);
  font-family: inherit;
  border: 2px solid var(--border-input);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  color: var(--text);
  box-sizing: border-box;
}

.field-group select:focus,
.field-group input[type="text"]:focus {
  border-color: var(--blue-mid);
}

.field-group input.field-readonly {
  background: var(--farbe-neutral-bg);
  color: var(--farbe-neutral-text);
  cursor: default;
}

.btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.meldung { margin-top: 0.75rem; }
.meldung[hidden] { display: none; }
#auth-notice { margin: 0 0 1.5rem; }

.panel {
  background: var(--blue-light);
  border: 1px solid var(--farbe-info-rand);
  border-left: 4px solid var(--blue-dark);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}

.panel[hidden] { display: none; }

.panel__title {
  font-size: var(--schrift-text);
  font-weight: 700;
  color: var(--blue-dark);
  margin-bottom: 0.25rem;
}

.panel__sub {
  font-size: var(--schrift-text);
  color: var(--muted);
  margin-bottom: 1rem;
}

.bz-suche {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.25rem;
}

.bz-suche .feld__eingabe { flex: 1; }
.bz-aktualisieren { flex-shrink: 0; white-space: nowrap; }

#bz-huelle { margin-top: 0.875rem; }
#bz-huelle[hidden] { display: none; }
#bz-zustand .zustand { margin-top: 0.875rem; }

.bz-nr,
.bz-klein {
  font-size: var(--schrift-klein);
}
.bz-nr { color: var(--muted); }
.bz-klein { min-width: 0; }
.bz-name { font-weight: 600; }

.ziel-hint {
  font-size: var(--schrift-text);
  color: var(--muted);
  margin-top: 0.25rem;
}
.ziel-hint--ok { color: var(--farbe-ok); }
.ziel-hint--fehler { color: var(--farbe-fehler); }

#inp-ziel { font-size: var(--schrift-text); min-height: 2.75rem; }

.vorschlag-liste {
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  background: var(--farbe-flaeche);
  margin-top: 0.25rem;
  max-height: 16rem;
  overflow-y: auto;
  box-shadow: var(--schatten-schwebend);
}
.vorschlag-liste[hidden] { display: none; }
.vorschlag-liste button {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: var(--schrift-text);
  text-align: left;
  color: var(--text);
  background: var(--farbe-flaeche);
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.vorschlag-liste button:last-child { border-bottom: 0; }
.vorschlag-liste button:hover,
.vorschlag-liste button:focus { background: var(--blue-light); }
.vorschlag-leer { padding: 0.6rem 0.75rem; font-size: var(--schrift-text); color: var(--muted); }

.richtung-wahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.richtung-wahl legend {
  font-size: var(--schrift-text);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
  padding: 0;
}
.richtung-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 400;
  font-size: var(--schrift-text);
  color: var(--text);
  background: var(--farbe-flaeche);
  border: 1px solid var(--border);
  border-radius: var(--radius-feld);
  cursor: pointer;
}
.richtung-option input { width: 1.25rem; height: 1.25rem; margin: 0; flex-shrink: 0; }
.richtung-option--aktiv { border-color: var(--blue-dark); background: var(--blue-light); font-weight: 600; }

.bz-datenschutz {
  font-size: var(--schrift-klein);
  color: var(--muted);
  margin-top: -0.75rem;
}

@media (max-width: 600px) {
  .field-group { min-width: 100%; }
  .bz-suche { flex-direction: column; align-items: stretch; }
}