/* ===================================================================
   REGIONSSEITEN
   Gemeinsame Bausteine fuer erfurt, weimar, jena,
   armenische-kueche-thueringen und gutschein.

   Nur Bausteine, die es noch nicht gibt. Farben, Abstaende und
   Schriften kommen ausschliesslich aus tokens.css, Abschnitte und
   Knoepfe aus layout.css und components.css, die Routenknoepfe aus
   anfahrt.css. Hier steht nichts, was anderswo schon steht.
   =================================================================== */

/* ---------- Antwortblock direkt unter der H1 ----------
   Steht bewusst ganz oben: wer aus Erfurt oder Jena sucht, soll die
   Antwort lesen koennen, ohne zu scrollen. */
.regio-antwort {
  max-width: 62ch;
  margin-inline: auto;
  padding: var(--vr-space-lg) var(--vr-space-xl);
  border-left: 3px solid var(--vr-gold);
  background: rgba(255, 255, 255, 0.45);
  border-radius: 0 var(--vr-radius-md) var(--vr-radius-md) 0;
}

.regio-antwort p {
  margin: 0;
  font-family: var(--vr-font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-primary);
}

/* ---------- Fliesstext in Abschnitten ---------- */
.regio-text {
  max-width: 68ch;
  margin-inline: auto;
}

.regio-text p {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
  margin: 0 0 var(--vr-space-md) 0;
}

.regio-text p:last-child {
  margin-bottom: 0;
}

.section-burgund .regio-text p,
.section-anthrazit .regio-text p {
  color: rgba(248, 242, 228, 0.88);
}

/* ---------- Bilderreihe, je Seite eine andere Auswahl ---------- */
.regio-fotos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--vr-space-md);
}

.regio-fotos .picture-wrap {
  border-radius: var(--vr-radius-lg);
  overflow: hidden;
}

.regio-fotos img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Die Essensseite zeigt mehr Motive, dort duerfen sie kleiner sein. */
.regio-fotos--dicht {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* ---------- Oeffnungszeiten ----------
   Gehoert auf jede dieser Seiten. Wer 50 Kilometer faehrt und vor
   verschlossener Tuer steht, kommt nie wieder. */
.regio-zeiten {
  display: grid;
  gap: var(--vr-space-2xs);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--vr-space-lg) var(--vr-space-xl);
  border: 1px solid rgba(184, 146, 74, 0.35);
  border-radius: var(--vr-radius-md);
  background: rgba(255, 255, 255, 0.4);
}

.regio-zeiten__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--vr-space-md);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  line-height: 1.5;
  padding: var(--vr-space-2xs) 0;
  border-bottom: 1px solid rgba(184, 146, 74, 0.16);
}

.regio-zeiten__row:last-child {
  border-bottom: 0;
}

.regio-zeiten__tag {
  font-family: var(--vr-font-display);
  font-weight: var(--vr-fw-semibold);
  color: var(--vr-text-primary);
  flex: 0 0 auto;
}

.regio-zeiten__wert {
  text-align: right;
  color: var(--vr-text-secondary);
}

.regio-zeiten__zu {
  color: var(--vr-text-muted);
}

.regio-zeiten__note {
  margin: var(--vr-space-md) 0 0;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: 1.6;
  color: var(--vr-text-secondary);
  text-align: center;
}

/* ---------- Route ----------
   Reine Links auf Google und Apple, kein eingebetteter Kartendienst.
   Es laedt nichts nach, bevor jemand geklickt hat. Die Knopfoptik
   kommt aus anfahrt.css, hier steht nur die Anordnung. */
.regio-route {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}

.regio-route__adresse {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  line-height: 1.6;
  color: var(--vr-text-secondary);
  margin: 0 0 var(--vr-space-md);
}

.regio-route__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--vr-space-sm);
}

/* Mindestens 44 Pixel Trefferflaeche, auch wenn anfahrt.css den Knopf
   auf einer schmalen Seite kleiner rechnet. */
.regio-route .anfahrt-brand {
  min-height: 44px;
}

/* ---------- Fragen ----------
   Optik wie die Fragen auf der Pensionsseite, damit die Seite sich
   nicht fremd anfuehlt. Der Text kommt aus derselben Quelle wie das
   Schema, siehe tools/generate.py. */
.regio-faq {
  display: grid;
  gap: var(--vr-space-sm);
  max-width: 62ch;
  margin-inline: auto;
}

.regio-faq__item {
  border: 1px solid rgba(184, 146, 74, 0.3);
  border-radius: var(--vr-radius-md);
  background: rgba(255, 255, 255, 0.4);
  overflow: hidden;
}

.regio-faq__q {
  cursor: pointer;
  list-style: none;
  padding: var(--vr-space-md) var(--vr-space-lg);
  padding-right: 2.8rem;
  font-family: var(--vr-font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--vr-anthrazit);
  position: relative;
}

.regio-faq__q::-webkit-details-marker {
  display: none;
}

.regio-faq__q::after {
  content: "+";
  position: absolute;
  right: var(--vr-space-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--vr-gold);
  font-size: 1.4rem;
  line-height: 1;
}

.regio-faq__item[open] .regio-faq__q::after {
  content: "\2013";
}

.regio-faq__q:focus-visible {
  outline: 2px solid var(--vr-gold);
  outline-offset: -2px;
}

.regio-faq__a {
  margin: 0;
  padding: 0 var(--vr-space-lg) var(--vr-space-md);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  line-height: 1.6;
  color: var(--vr-text-secondary);
}

/* ---------- Gutschein Hinweis auf den Ortsseiten ---------- */
.regio-gutschein {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--vr-space-xl);
  border: 1px solid rgba(184, 146, 74, 0.4);
  border-radius: var(--vr-radius-lg);
  background: linear-gradient(135deg, rgba(184, 146, 74, 0.1), rgba(184, 146, 74, 0.02));
}

.regio-gutschein p {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  line-height: var(--vr-leading-relaxed);
  color: var(--vr-text-secondary);
  margin: 0 0 var(--vr-space-lg);
}

.section-burgund .regio-gutschein p,
.section-anthrazit .regio-gutschein p {
  color: rgba(248, 242, 228, 0.88);
}

/* ---------- Weiterfuehrende Seiten ----------
   Ankertexte je Seite verschieden formuliert. Gleiche Texte auf fuenf
   Seiten liest Google als Schablone. */
.regio-weiter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--vr-space-md);
  max-width: 62rem;
  margin-inline: auto;
}

.regio-weiter__karte {
  display: flex;
  flex-direction: column;
  gap: var(--vr-space-2xs);
  padding: var(--vr-space-lg);
  border: 1px solid rgba(184, 146, 74, 0.28);
  border-radius: var(--vr-radius-md);
  background: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.regio-weiter__karte:hover,
.regio-weiter__karte:focus-visible {
  border-color: var(--vr-gold);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(26, 20, 16, 0.12);
}

.regio-weiter__titel {
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-md);
  font-weight: var(--vr-fw-semibold);
  color: var(--vr-burgund);
}

.regio-weiter__text {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  line-height: 1.6;
  color: var(--vr-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .regio-weiter__karte {
    transition: none;
  }
  .regio-weiter__karte:hover,
  .regio-weiter__karte:focus-visible {
    transform: none;
  }
}

@media (max-width: 560px) {
  .regio-antwort {
    padding: var(--vr-space-md) var(--vr-space-lg);
  }
  .regio-zeiten {
    padding: var(--vr-space-md) var(--vr-space-lg);
  }
  .regio-zeiten__row {
    flex-direction: column;
    gap: 0;
  }
  .regio-zeiten__wert {
    text-align: left;
  }
}

/* ===================================================================
   BEWERTUNGSBLOCK (03.08.2026)

   Steht auf jeder Seite, die aggregateRating auszeichnet. Google
   verlangt, dass ausgezeichnete Bewertungen fuer den Besucher auch
   sichtbar sind. Zahlen und Sterne kommen aus data/bewertungen.yml,
   erzeugt in tools/generate.py.
   =================================================================== */

.bewertung-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--vr-space-2xs) var(--vr-space-md);
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--vr-space-md) var(--vr-space-lg);
  border: 1px solid rgba(184, 146, 74, 0.35);
  border-radius: var(--vr-radius-md);
  background: rgba(255, 255, 255, 0.45);
}

.bewertung-block__wert {
  font-family: var(--vr-font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: var(--vr-fw-semibold);
  line-height: 1;
  color: var(--vr-burgund);
  font-variant-numeric: tabular-nums;
}

.bewertung-block__sterne {
  display: inline-flex;
  gap: 2px;
  color: var(--vr-gold);
  line-height: 0;
}

.bewertung-block__sterne .google-star--full,
.bewertung-block__sterne .google-star--half {
  fill: currentColor;
}

.bewertung-block__sterne .google-star--empty {
  fill: rgba(184, 146, 74, 0.25);
}

.bewertung-block__zahl {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  color: var(--vr-text-secondary);
  font-variant-numeric: tabular-nums;
}

.bewertung-block__link {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-burgund);
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 26, 36, 0.3);
  padding-bottom: 0.1em;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.bewertung-block__link:hover,
.bewertung-block__link:focus-visible {
  color: var(--vr-burgund-tief);
  border-bottom-color: var(--vr-burgund);
}

/* Auf dunklen Abschnitten mitlesen koennen */
.section-burgund .bewertung-block,
.section-anthrazit .bewertung-block,
.section-tief .bewertung-block {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(217, 185, 119, 0.35);
}

.section-burgund .bewertung-block__wert,
.section-anthrazit .bewertung-block__wert,
.section-tief .bewertung-block__wert {
  color: var(--vr-gold-hell);
}

.section-burgund .bewertung-block__zahl,
.section-anthrazit .bewertung-block__zahl,
.section-tief .bewertung-block__zahl {
  color: rgba(248, 242, 228, 0.85);
}

.section-burgund .bewertung-block__link,
.section-anthrazit .bewertung-block__link,
.section-tief .bewertung-block__link {
  color: var(--vr-gold-hell);
  border-bottom-color: rgba(217, 185, 119, 0.4);
}

@media (max-width: 560px) {
  .bewertung-block {
    flex-direction: column;
    gap: var(--vr-space-2xs);
    text-align: center;
  }
  /* Genug Trefferflaeche fuer den Daumen */
  .bewertung-block__link {
    padding: 0.6rem 0;
  }
}