/* -----------------------------
   Google-Bewertungen (views/partials/bewertungen.ejs)
   Formsprache der Menükarte von Mundo (public/menu.jpg): schwarzer Balken, Zeilen wie Gericht und Preis,
   die rote Trennlinie als Bonleiste, an der die Karten mit schwarzem Kopf wie Bons in der Küche entlangziehen.
   Farben, Radius und Schrift aus den Tokens in styles.css; im Block vier Schriftgrössen (48, 20, 17, 15px).
   Das Band läuft endlos nach links (E1 User 2026-10-14), hält bei Hover, Fokus und über den Schalter an,
   steht still bei prefers-reduced-motion.
------------------------------ */
.bewertungen{
  --abstand: 1.5rem;    /* zwischen den Karten */
  --dauer: 100s;        /* eine Runde, bei 1440 rund 28 px/s */
  --bonleiste: #c20106; /* Trennlinien auf public/menu.jpg, gemessen */
  --klein: .95rem;      /* Stand, Schalter, Kartenkopf, Name, Alter */
  --mittel: 1.0625rem;  /* Balken, Standorte, Zitate */
  --rand: .75rem;       /* linke Kante wie .container, für die stehende Reihe bei Reduced Motion */
  padding-bottom: 2.5rem; /* unter kürzeren Karten bringt das Band eigenen Weissraum mit */
  background: var(--mdg-bg);
}
@media (min-width: 576px){ .bewertungen{ --rand: calc((100% - 540px) / 2 + .75rem); } }
@media (min-width: 768px){ .bewertungen{ --rand: calc((100% - 720px) / 2 + .75rem); } }
@media (min-width: 992px){ .bewertungen{ --rand: calc((100% - 960px) / 2 + .75rem); } }
@media (min-width: 1200px){ .bewertungen{ --rand: calc((100% - 1140px) / 2 + .75rem); } }
@media (min-width: 1400px){ .bewertungen{ --rand: calc((100% - 1320px) / 2 + .75rem); } }

/* Kopf: Titel links, Karte mit den Standorten rechts, Schalter links unten (vor dem Band, auch in der Tab-Folge) */
.bewertungen__kopf{
  display: grid;
  gap: 1.5rem 4rem;
  align-items: start;
  margin-bottom: 2.5rem;
}
@media (min-width: 992px){
  .bewertungen__kopf{ grid-template-columns: 1fr minmax(0, 30rem); grid-template-rows: auto 1fr; }
  .bewertungen__karte{ grid-row: span 2; }
  .bewertungen__schalter{ align-self: end; }
}
.bewertungen__titel{
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3rem); /* wie .app-promo__title */
  font-weight: 900;
  line-height: 1.05;
}

.bewertungen__karte{ max-width: 30rem; }
.bewertungen__summe{
  margin: 0 0 .5rem;
  padding: .7rem 1.1rem;
  background: var(--mdg-text);
  color: #fff;
  border-radius: 14px; /* wie .btn-mdg */
  font-size: var(--mittel);
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}
.bewertungen__orte{ list-style: none; margin: 0; padding: 0; }
.bewertungen__ort{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .6rem;
  padding: .4rem 1.1rem;
  color: var(--mdg-text);
  text-decoration: none;
  font-size: var(--mittel);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bewertungen__ortname{
  justify-self: start;
  text-decoration: underline 2px var(--mdg-red);
  text-underline-offset: .3em;
  transition: color 160ms ease-out;
}
/* Anzahl klein und ohne Umbruch, die Note gross: passt so auch bei 320 in eine Zeile */
.bewertungen__zahlen{ white-space: nowrap; text-align: right; font-size: var(--klein); font-weight: 700; color: var(--mdg-muted); }
.bewertungen__note{ margin-right: .4rem; font-size: var(--mittel); font-weight: 800; color: var(--mdg-text); }
.bewertungen__note i{ margin-left: .3em; font-size: .8em; color: var(--mdg-red); }
.bewertungen__ort:focus-visible{ outline: 3px solid var(--mdg-red); outline-offset: 2px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine){
  .bewertungen__ort:hover{ color: var(--mdg-text); }
  .bewertungen__ort:hover .bewertungen__ortname{ color: var(--mdg-red); }
}
.bewertungen__stand{
  margin: .4rem 0 0;
  padding-inline: 1.1rem;
  font-size: var(--klein);
  font-weight: 700;
  color: var(--mdg-muted);
}

/* Band: zwei gleiche Listen hintereinander, die Spur wandert um genau eine Liste (-50 %).
   Kein Innenabstand links, sonst springt am Schleifenpunkt ein leerer Streifen. Laufend höchstens
   160rem breit: eine Liste misst rund 177rem, so bleibt auch auf sehr breiten Fenstern rechts keine Lücke.
   Die Bonleiste ist Hintergrund des Bands: sie steht still (auch beim Scrollen der stehenden Reihe)
   und liegt im oberen Innenabstand, die Karten hängen direkt darunter. */
.bewertungen__band{
  padding-block: 4px;
  background: linear-gradient(var(--bonleiste), var(--bonleiste)) 0 1px / 100% 3px no-repeat;
  overflow: hidden;
  overflow: clip;
}
.bewertungen__band:focus-visible{ outline: 3px solid var(--mdg-red); outline-offset: 2px; }
.bewertungen__spur{ display: flex; width: max-content; }
.bewertungen__liste{
  display: flex;
  align-items: flex-start; /* jede Karte so hoch wie ihr Text, wie Bons an der Leiste */
  gap: var(--abstand);
  margin: 0;
  padding: 0 var(--abstand) 0 0; /* Abstand nach der letzten Karte, sonst springt die Schleife */
  list-style: none;
}

/* Karte: oben gerade an der Leiste, unten mit dem Radius der Site */
.bewertung{ --breite: 21.25rem; flex: 0 0 var(--breite); }
.bewertung--kurz{ --breite: 16.25rem; }
.bewertung__figur{
  margin: 0;
  background: #fff;
  border: 3px solid var(--mdg-text);
  border-radius: 0 0 var(--mdg-radius) var(--mdg-radius);
  overflow: hidden;
}
.bewertung__kopf{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 1rem .55rem;
  background: var(--mdg-text);
  color: #fff;
  font-size: var(--klein);
  font-weight: 800;
}
.bewertung__sterne{ display: flex; gap: 2px; font-size: .8rem; color: rgba(255,255,255,0.3); }
.bewertung__sterne .an{ color: var(--mdg-red); }
.bewertung__text{
  margin: 0;
  padding: 1rem 1.15rem 0;
  color: var(--mdg-text);
  font-size: var(--mittel);
  font-weight: 600;
  line-height: 1.5;
}
.bewertung__text p{ position: relative; margin: 0; white-space: pre-line; } /* Zeilenumbrüche wie auf Google */
.bewertung__text p::before{ content: "«"; position: absolute; right: 100%; color: var(--mdg-red); } /* hängt in den Rand */
.bewertung__text p::after{ content: "»"; color: var(--mdg-red); }
.bewertung--kurz .bewertung__text{ font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.bewertung__fuss{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  padding: .9rem 1.15rem 1.1rem;
  font-size: var(--klein);
}
.bewertung__name{ font-weight: 800; }
.bewertung__alter{ font-weight: 600; color: var(--mdg-muted); }

/* Schalter (WCAG 2.2.2): kleiner Textschalter in der Grösse der Stand-Zeile */
.bewertungen__schalter{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 1.5rem; /* Tap-Ziel mindestens 24px */
  padding: .15rem .1rem;
  font: inherit;
  font-size: var(--klein);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mdg-text);
  background: none;
  border: 0;
  border-radius: 4px;
  text-decoration: underline 1px transparent;
  text-underline-offset: .25em;
  transition: color 160ms ease-out, text-decoration-color 160ms ease-out, transform 120ms ease-out;
}
.bewertungen__schalter[hidden],
.bewertungen__schalter-aus,
.bewertungen.is-angehalten .bewertungen__schalter-an{ display: none; }
.bewertungen.is-angehalten .bewertungen__schalter-aus{ display: inline; }
.bewertungen__schalter:active{ transform: scale(.97); }
.bewertungen__schalter:focus-visible{ outline: 3px solid var(--mdg-red); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine){
  .bewertungen__schalter:hover{ color: var(--mdg-red); text-decoration-color: currentColor; }
}

/* Bewegung nur, wer sie nicht abgewählt hat */
@keyframes bewertungen-lauf{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference){
  .bewertungen__band{ max-width: 160rem; margin-inline: auto; }
  .bewertungen__spur{ animation: bewertungen-lauf var(--dauer) linear infinite; }
  .bewertungen.is-angehalten .bewertungen__spur,
  .bewertungen__band:focus .bewertungen__spur{ animation-play-state: paused; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine){
  .bewertungen__band:hover .bewertungen__spur{ animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce){
  .bewertungen__band{ overflow-x: auto; padding-inline: var(--rand); }
  .bewertungen__liste[aria-hidden="true"],
  .bewertungen__schalter{ display: none; }
}

/* Handy: schmalere Karten, langsamer (eine Liste rund 2240px, also rund 16 px/s) */
@media (max-width: 767.98px){
  .bewertungen{ --abstand: 1rem; --dauer: 140s; }
  .bewertung{ --breite: 16.875rem; }
  .bewertung--kurz{ --breite: 13.75rem; }
}