/* Kundenmeinungen -- Figma "ATZ 2026 - Zukunft", Screens rev_m_reviews /
   rev_d_reviews.

   Markup:    web/templates/web/reviews.html
              web/templates/web/partials/_rev_stars.html
   Verhalten: web/static/web/js/reviews.js

   Mobile first: die Basis-Regeln beschreiben das 402px-Layout (eine Spalte,
   Formular ueber der Liste), die Media-Query (>=992px) stellt daraus das
   Desktop-Layout mit rechter Seitenleiste her.

   Klassenpraefix `rev-`, damit sich nichts mit `atz-` (base.css), `dir-`
   (Firmenverzeichnis), `lic-` (Lizenzen), `tur-`/`tup-` (TU-Registrierung,
   Firmenprofil) oder `ow-` (Auftragsformular) ueberschneidet. */

:root {
  --rev-shaded: #F5F5F5;
  --rev-border: #E7E7E7;
  --rev-track: #E3E3E3;
  --rev-red-tint: #FCEAED;
  --rev-green-tint: #E8F5EC;
  --rev-green-dark: #1F6B37;
  --rev-star: #E8A33D;
  --rev-star-off: #D8D8D8;
  --rev-radius: 12px;
}

.rev-page {
  background-color: #fff;
  color: var(--atz-dark);
  font-size: 15px;
}

.rev-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.rev-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- Knoepfe */

.rev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.rev-btn--primary {
  background-color: var(--atz-red);
  border-color: var(--atz-red);
  color: #fff;
}

.rev-btn--primary:hover,
.rev-btn--primary:focus {
  background-color: #9d071f;
  border-color: #9d071f;
  color: #fff;
}

.rev-btn--ghost {
  background-color: #fff;
  border-color: var(--rev-border);
  color: var(--atz-dark);
}

.rev-btn--ghost:hover,
.rev-btn--ghost:focus {
  border-color: var(--atz-dark);
  color: var(--atz-dark);
}

.rev-btn--block {
  display: flex;
  width: 100%;
}

/* ------------------------------------------- Kopfbereich und Durchschnitt */

.rev-hero {
  padding: 24px 0 20px;
}

.rev-hero__title {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.rev-hero__lead {
  margin: 0 0 18px;
  color: var(--atz-gray);
  line-height: 1.55;
}

.rev-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--rev-border);
  border-radius: var(--rev-radius);
  background-color: #fff;
}

.rev-score {
  flex: 0 0 auto;
  text-align: center;
}

.rev-score__value {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.1;
}

.rev-score__count {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--atz-gray);
}

.rev-bars {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rev-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.rev-bar__label {
  font-size: 12px;
  color: var(--atz-gray);
  white-space: nowrap;
}

.rev-bar__star {
  color: var(--rev-star);
}

.rev-bar__track {
  height: 6px;
  border-radius: 3px;
  background-color: var(--rev-track);
  overflow: hidden;
}

.rev-bar__fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background-color: var(--atz-red);
}

.rev-bar__count {
  min-width: 22px;
  font-size: 12px;
  color: var(--atz-gray);
  text-align: right;
}

/* ------------------------------------------------- Rumpf und Spaltenraster */

.rev-body {
  padding: 20px 0 32px;
  background-color: var(--rev-shaded);
}

.rev-layout {
  display: grid;
  gap: 16px;
}

/* ------------------------------------------------------ Bewertungsformular */

.rev-form-card {
  padding: 20px;
  border: 1px solid var(--rev-border);
  border-radius: var(--rev-radius);
  background-color: #fff;
}

.rev-form-card__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
}

.rev-form-card__lead {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--atz-gray);
  line-height: 1.5;
}

.rev-form-card__note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--atz-gray);
  line-height: 1.45;
  text-align: center;
}

.rev-alert {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: var(--rev-green-tint);
  font-size: 13px;
  color: var(--rev-green-dark);
}

.rev-alert--error {
  background-color: var(--rev-red-tint);
  color: var(--atz-red);
}

.rev-field {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.rev-field__label {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.rev-field__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--atz-gray);
}

.rev-field__error {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--atz-red);
}

.rev-input {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rev-border);
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--atz-dark);
}

.rev-input:focus {
  outline: none;
  border-color: var(--atz-dark);
}

.rev-textarea {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 11px 12px;
  border: 1px solid var(--rev-border);
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 15px;
  color: var(--atz-dark);
  resize: vertical;
}

.rev-textarea:focus {
  outline: none;
  border-color: var(--atz-dark);
}

/* Sterne-Auswahl. Die Radio-Knoepfe stehen im Quelltext von 5 nach 1 und
   werden hier zurueckgedreht -- dadurch faerbt `:checked ~ ...` beim vierten
   Stern auch die drei links davon, ganz ohne JavaScript. */

.rev-rate {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.rev-rate__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.rev-rate__option {
  font-size: 28px;
  line-height: 1;
  color: var(--rev-star-off);
  cursor: pointer;
}

.rev-rate__input:checked ~ .rev-rate__option {
  color: var(--rev-star);
}

.rev-rate__input:focus-visible + .rev-rate__option {
  outline: 2px solid var(--atz-dark);
  outline-offset: 2px;
}

.rev-rate:hover .rev-rate__option {
  color: var(--rev-star-off);
}

.rev-rate__option:hover,
.rev-rate__option:hover ~ .rev-rate__option {
  color: var(--rev-star);
}

.rev-rate__caption {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--atz-gray);
}

.rev-rate__caption:empty {
  display: none;
}

/* ------------------------------------------------ Reiter und Sortierung */

.rev-main {
  min-width: 0;
}

.rev-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.rev-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rev-tab {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--rev-border);
  border-radius: 999px;
  background-color: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--atz-dark);
  text-decoration: none;
}

a.rev-tab:hover,
a.rev-tab:focus {
  border-color: var(--atz-dark);
  color: var(--atz-dark);
}

.rev-tab--active {
  background-color: var(--atz-dark);
  border-color: var(--atz-dark);
  color: #fff;
}

/* Der Entwurf zeigt die Sortierung erst auf dem Desktop. */
.rev-sort {
  display: none;
  align-items: center;
  gap: 8px;
}

.rev-sort__select {
  padding: 8px 12px;
  border: 1px solid var(--rev-border);
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 13px;
  color: var(--atz-dark);
}

.rev-sort__submit {
  padding: 8px 14px;
  font-size: 13px;
}

/* Erst wenn das Skript laeuft, darf der Knopf verschwinden -- sonst laesst
   sich die Sortierung ohne JavaScript nicht abschicken. */
.rev-sort--js .rev-sort__submit {
  display: none;
}

/* ----------------------------------------------------- Bewertungskarten */

.rev-list {
  display: grid;
  gap: 12px;
}

.rev-card {
  padding: 16px;
  border: 1px solid var(--rev-border);
  border-radius: var(--rev-radius);
  background-color: #fff;
}

.rev-card__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.rev-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--rev-shaded);
  font-size: 14px;
  font-weight: 700;
  color: var(--atz-gray);
}

.rev-card__ident {
  flex: 1 1 auto;
  min-width: 0;
}

.rev-card__name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.rev-card__date {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--atz-gray);
}

.rev-card__text {
  margin: 12px 0 0;
  line-height: 1.55;
}

.rev-stars {
  flex: 0 0 auto;
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--rev-star);
  white-space: nowrap;
}

.rev-stars__off {
  color: var(--rev-star-off);
}

.rev-answer {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-left: 3px solid var(--atz-red);
  border-radius: 8px;
  background-color: var(--rev-red-tint);
}

.rev-answer__title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--atz-red);
}

.rev-answer__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--atz-dark);
}

.rev-empty {
  margin: 0;
  padding: 24px 16px;
  border: 1px dashed var(--rev-border);
  border-radius: var(--rev-radius);
  background-color: #fff;
  color: var(--atz-gray);
  text-align: center;
}

/* -------------------------------------------------------- Seitenblaetterung */

.rev-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 0 0;
}

.rev-pagination__info {
  display: none;
  font-size: 13px;
  color: var(--atz-gray);
}

.rev-pagination__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rev-pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--rev-border);
  border-radius: 8px;
  background-color: #fff;
  font-size: 14px;
  color: var(--atz-dark);
  text-decoration: none;
}

.rev-pager--current {
  background-color: var(--atz-red);
  border-color: var(--atz-red);
  color: #fff;
  font-weight: 700;
}

.rev-pager--gap {
  border-color: transparent;
  background: transparent;
  color: var(--atz-gray);
}

/* ------------------------------------------ Hinweis auf das Firmenprofil */

.rev-promo {
  padding: 20px;
  border: 1px solid var(--rev-border);
  border-radius: var(--rev-radius);
  background-color: var(--rev-red-tint);
}

.rev-promo__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
}

.rev-promo__text {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--atz-gray);
  line-height: 1.5;
}

/* --------------------------------------------------------------- Tablet */

@media (min-width: 768px) {
  .rev-hero__title {
    font-size: 32px;
  }

  .rev-summary {
    gap: 32px;
    padding: 22px 26px;
  }

  .rev-score__value {
    font-size: 42px;
  }
}

/* -------------------------------------------------------------- Desktop */

@media (min-width: 992px) {
  .rev-hero {
    padding: 40px 0 28px;
  }

  .rev-hero__lead {
    max-width: 960px;
    margin-bottom: 24px;
    font-size: 16px;
  }

  .rev-body {
    padding: 28px 0 48px;
  }

  /* Das Formular sitzt rechts, die Liste links -- die DOM-Reihenfolge
     (Formular, Liste, Hinweis) bleibt die der schmalen Ansicht. */
  .rev-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 24px;
    align-items: start;
  }

  .rev-form-card {
    grid-column: 2;
    grid-row: 1;
  }

  .rev-main {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .rev-promo {
    grid-column: 2;
    grid-row: 2;
  }

  .rev-sort {
    display: flex;
  }

  .rev-pagination {
    justify-content: space-between;
  }

  .rev-pagination__info {
    display: block;
  }
}