/*
 * Anbieterverzeichnis, Stufe 0.
 *
 * Farben und Masse folgen `frn-module.css`: Ink `#141B28`, Rahmen `#C7D0DB`,
 * Trennlinie `#E3E7EC`, Akzent ueber `--gcid-primary-color` mit Rueckfall.
 *
 * Wo Weiss auf Farbe steht, ist der Akzent zu 65 Prozent mit dem Ink-Ton
 * gemischt. Der reine Akzent `#029dff` ergibt mit Weiss 2,89 zu 1 und verfehlt
 * WCAG AA. Nicht aufhellen ohne neu zu messen.
 */

/* --------------------------------------------------------- Zustandsband */

.frn-anbieter__zustand {
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.05rem;
  border-radius: 10px;
  font-size: 0.95em;
  line-height: 1.5;
}

/*
 * Nicht uebernommen: sachlich, nicht alarmierend. Der Betrieb hat nichts falsch
 * gemacht, er weiss nur nichts von dem Eintrag. Deshalb ein neutrales Grau und
 * kein Warnton.
 */
.frn-anbieter__zustand--offen {
  background: #F2F4F7;
  border-inline-start: 4px solid #8A94A6;
  color: #141B28;
}

.frn-anbieter__zustand--gepflegt {
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 8%, #fff);
  border-inline-start: 4px solid color-mix(in srgb, var(--gcid-primary-color, #1470CC) 65%, #141B28);
}

/* ------------------------------------------------------ Stammdaten, Kontakt */

.frn-anbieter__stamm,
.frn-anbieter__kontakt {
  margin: 1.6rem 0;
  padding: 0;
  border: 1px solid #C7D0DB;
  border-radius: 10px;
  overflow: hidden;
}

.frn-anbieter__kontaktkopf {
  padding: 0.7rem 1.05rem;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 65%, #141B28);
}

.frn-anbieter__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  padding: 0.72rem 1.05rem;
  border-block-end: 1px solid #E3E7EC;
}

.frn-anbieter__zeile:last-child {
  border-block-end: 0;
}

.frn-anbieter__zeile dt {
  flex: 0 0 11rem;
  font-weight: 700;
  margin: 0;
}

.frn-anbieter__zeile dd {
  flex: 1 1 14rem;
  margin: 0;
}

/* ------------------------------------------------------------- Geprueft */

.frn-anbieter__geprueft {
  margin: 1.6rem 0;
  padding: 0.85rem 1.05rem;
  border-radius: 10px;
  background: #F2F7F2;
  border-inline-start: 4px solid #2E7D4F;
}

/* --------------------------------------------------- Uebernahme, Widerspruch */

.frn-anbieter__uebernahme,
.frn-anbieter__widerspruch {
  margin: 2rem 0;
  padding: 1.15rem 1.25rem 0.4rem;
  border: 1px solid #C7D0DB;
  border-radius: 10px;
  background: #FAFBFC;
}

.frn-anbieter__uebernahme h2,
.frn-anbieter__widerspruch h2 {
  margin: 0 0 0.5rem;
  font-size: 1.12em;
}

/*
 * Der Widerspruchskasten ist bewusst so gross und so weit oben wie der
 * Uebernahmekasten. Die Anwaltsauskunft verlangt einen „gut sichtbaren" Weg;
 * eine kleingedruckte Zeile im Fussbereich waere das nicht.
 */

/* ------------------------------------------------------------- Formular */

.frn-formular {
  margin: 0.8rem 0 0;
}

.frn-formular__feld {
  margin: 0 0 0.85rem;
}

.frn-formular__feld label {
  display: block;
  margin-block-end: 0.25rem;
  font-weight: 700;
  font-size: 0.93em;
}

.frn-formular__feld input,
.frn-formular__feld select,
.frn-formular__feld textarea {
  width: 100%;
  max-width: 34rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #C7D0DB;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.frn-formular__knopf {
  padding: 0.62rem 1.3rem;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 65%, #141B28);
  cursor: pointer;
}

.frn-formular__knopf:hover,
.frn-formular__knopf:focus-visible {
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 50%, #141B28);
}

/* Der Honigtopf. Fuer Menschen unsichtbar, fuer Roboter ein normales Feld. */
.frn-formular__topf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.frn-formular__quittung {
  margin: 0 0 1.4rem;
  padding: 0.85rem 1.05rem;
  border-radius: 10px;
}

.frn-formular__quittung--ok {
  background: #F2F7F2;
  border-inline-start: 4px solid #2E7D4F;
}

.frn-formular__quittung--fehler {
  background: #FBF3F2;
  border-inline-start: 4px solid #B3261E;
}

/* ---------------------------------------------------------- Anbieterliste */

.frn-anbieterliste {
  margin: 1.8rem 0;
}

.frn-anbieterliste__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #C7D0DB;
  border-radius: 10px;
  overflow: hidden;
}

/*
 * Kein Aufzaehlungspunkt. Dieselbe Spezifitaetsfalle wie beim Staedteraster:
 * die Fliesstext-Listenregel des Themes gewinnt sonst gegen `list-style: none`
 * am Container.
 */
.frn-anbieterliste__liste li {
  list-style: none;
}

.frn-anbieterliste__liste li::before {
  content: none;
}

.frn-anbieterliste__eintrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
  padding: 0.78rem 1.05rem;
  border-block-end: 1px solid #E3E7EC;
}

.frn-anbieterliste__eintrag:last-child {
  border-block-end: 0;
}

.frn-anbieterliste__eintrag--hervor {
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 6%, #fff);
}

.frn-anbieterliste__name {
  font-weight: 700;
}

/*
 * Die Kennzeichnung der bezahlten Platzierung. Muss erkennbar sein, ohne wie
 * eine Auszeichnung zu wirken: „hervorgehoben" ist eine Tatsache ueber die
 * Platzierung, kein Urteil ueber den Betrieb. Deshalb ruhige Flaeche statt
 * Signalfarbe.
 */
.frn-anbieterliste__marke {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: color-mix(in srgb, var(--gcid-primary-color, #1470CC) 65%, #141B28);
}

.frn-anbieterliste__offen {
  font-size: 0.85em;
  color: #5A6577;
}

.frn-anbieterliste__ranking {
  margin: 0.7rem 0 0;
  font-size: 0.87em;
  line-height: 1.5;
  color: #5A6577;
}

@media (max-width: 640px) {
  .frn-anbieter__zeile dt {
    flex: 1 1 100%;
  }
}