/* ==========================================================================
   Villa Restaurant Sömmerda, Bewertungsblock
   --------------------------------------------------------------------------
   Der sichtbare Block mit Schnitt, Sternen, Anzahl und Verweis auf Google.

   ⚠️ EIGENE DATEI, IN base.html AUF JEDER SEITE EINGEBUNDEN.
   Bis zum 03.09.2026 standen diese Regeln in regionsseiten.css. Die laden
   nur 15 Seiten. Auf index, pension, restaurant und speisekarte stand das
   Markup ohne Regel da: ein Flex-Container ohne Regel ist ein Block, also
   standen die fünf Sterne untereinander und der Block war 285 Pixel hoch
   statt 40.

   Wer eine neue Seite anlegt, muss nichts tun. Wer eine der neun
   handgepflegten Seiten anfasst, lässt tools/patch_bewertung.py laufen.

   Der Block wird von generate.py erzeugt, Funktion bewertung_block_html().
   Die Zahlen kommen aus data/bewertungen.yml, der einen Quelle.
   ========================================================================== */

/* ===================================================================
   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;
  }

}
/* ⬆ Diese Klammer schliesst die @media (max-width: 560px) darueber.
   Sie fehlte, bis der Block unten angehaengt wurde. Ohne sie gilt alles
   Folgende nur auf Bildschirmen unter 560 Pixeln, und auf dem Rechner
   passiert scheinbar nichts. Gemessen am 03.09.2026: die Zahl blieb bei
   18 Pixeln statt auf bis zu 80 zu gehen. Wer hier anhaengt, prueft
   vorher die Klammerbilanz. */

/* ==========================================================================
   ERGÄNZUNG 03.09.2026 ABENDS, TEIL 1
   DER DURCHSCHNITT WIEDER GROSS
   --------------------------------------------------------------------------
   Dirks Meldung: „vorher hatten wir einen Durchschnitt der war viel größer
   viel schöner, momentan sieht man ihn fast nicht." Er hat recht, und die
   Ursache ist belegbar.

   Bis zum 03.08.2026 hieß die Zahl im Markup `google-rating__value`. Für
   diesen Namen steht bis heute eine Regel in reveal.css Zeile 556: Größe
   bis 5rem, Gewicht 700, Goldhell, und vier gestaffelte Textschatten, die
   den Prägeeffekt machen. Am 03.08. wurden die Klassen auf
   `bewertung-block__*` umbenannt — die Regeln in reveal.css blieben unter
   den ALTEN Namen stehen und greifen seither nicht mehr. Übrig blieb nur
   `.google-rating` selbst, der Flex-Container.

   reveal.css ist tabu und wird nicht angefasst. Die alten Werte stehen
   deshalb hier unter den neuen Namen. Wer beide Dateien vergleicht, findet
   dieselben Zahlen.
   ========================================================================== */

.bewertung-block {
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  max-width: none;
}

/* Größe, Gewicht, Farbe und die vier Schatten stammen 1:1 aus
   reveal.css .google-rating__value. Der unterste Schatten ist kein
   Schmuck: er hebt die Zahl vom burgundroten Grund ab. */
.bewertung-block__wert {
  font-family: var(--vr-font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  color: var(--vr-gold-hell);
  line-height: 1;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.40),
    0 4px 0 rgba(0, 0, 0, 0.30),
    0 8px 18px rgba(0, 0, 0, 0.50),
    0 24px 40px rgba(0, 0, 0, 0.35);
}

.bewertung-block__sterne {
  gap: 4px;
  color: var(--vr-gold-hell);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40));
}
.bewertung-block__sterne .google-star--empty { color: rgba(255, 255, 255, 0.18); }

.bewertung-block__zahl {
  font-size: 1rem;
  opacity: 0.92;
  color: var(--vr-creme);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bewertung-block__link {
  color: var(--vr-gold-hell);
  border-bottom: 1px solid currentColor;
  padding: 4px 0;
  transition: opacity 200ms;
}
.bewertung-block__link:hover { opacity: 0.7; }

/* Auf hellem Grund kippt die Schrift, sonst steht Creme auf Creme.
   Die Ortsseiten tragen den Block auf Papier, nicht auf Burgund. */
.section-papier .bewertung-block__zahl,
.section-creme  .bewertung-block__zahl {
  color: var(--vr-text-muted);
  text-shadow: none;
}
.section-papier .bewertung-block__wert,
.section-creme  .bewertung-block__wert {
  color: var(--vr-burgund);
  text-shadow:
    0 2px 0 rgba(110, 26, 36, 0.14),
    0 4px 10px rgba(0, 0, 0, 0.10);
}
.section-papier .bewertung-block__sterne,
.section-creme  .bewertung-block__sterne {
  color: var(--vr-gold);
  filter: none;
}


/* ==========================================================================
   ERGÄNZUNG 03.09.2026 ABENDS, TEIL 2
   DER GOOGLE-BEWERTUNGSBLOCK (.dgr)
   --------------------------------------------------------------------------
   Eins zu eins übernommen aus
     /var/www/dirkdittrich-fotografie/wp-content/themes/dirkdittrich/
     inc-google-reviews.php, Block <style id="dgr-css">
   so wie er dort seit dem Vollaudit August 2026 läuft und wie er von dort
   für die Praxis Ragnitz übernommen wurde.

   Die Klassennamen bleiben `dgr-*`, absichtlich. Wer sie umbenennt, muss
   auch das JavaScript umbauen und verliert die Vergleichbarkeit mit der
   Vorlage. Auf der Villa kollidiert `dgr` mit nichts.

   GEÄNDERT WURDE NUR DIE FARBE UND DIE SCHRIFT:
     --gold           → var(--vr-gold-hell)
     --off-white      → var(--vr-creme)
     --text-secondary → halbdurchsichtiges Creme
     Cormorant/Josefin/Jost → var(--vr-font-display) / --vr-font-body
     Der Kartengrund ist Creme auf Burgund statt Weiß auf Schwarz, weil der
     Abschnitt der Villa burgundrot ist und nicht schwarz.

   Die Maße, Abstände, Übergänge, Radien und Breakpoints sind unverändert.
   ========================================================================== */

.dgr {
  max-width: 1400px;
  margin: 3.5rem auto 0;
  padding: 0;
  scroll-margin-top: 120px;
}

/* --------------------------------------------------- Kopf und Durchschnitt */
.dgr-head { text-align: center; margin-bottom: 2rem; }

.dgr-eyebrow {
  font-family: var(--vr-font-body);
  font-size: 15px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--vr-gold-hell);
  margin: 0 0 .9rem;
}

.dgr-title {
  font-family: var(--vr-font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  color: var(--vr-creme);
  margin: 0 0 1.4rem;
  line-height: 1.14;
}

.dgr-agg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}

/* Die Zahl steht GROSS über den Sternen. order:-1 dreht sie im Flexfluss
   nach oben, ohne das Markup zu ändern. Größe und Schatten wie beim
   .bewertung-block__wert oben, damit beide Fassungen gleich wirken. */
.dgr-agg-num {
  order: -1;
  font-family: var(--vr-font-display);
  font-size: clamp(3.8rem, 7.5vw, 6.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--vr-gold-hell);
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.40),
    0 4px 0 rgba(0, 0, 0, 0.30),
    0 8px 18px rgba(0, 0, 0, 0.50),
    0 24px 40px rgba(0, 0, 0, 0.35);
}

.dgr-agg .dgr-stars {
  font-size: 2.15rem;
  gap: 5px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.40));
}

.dgr-agg-count {
  color: rgba(248, 242, 228, 0.82);
  font-family: var(--vr-font-body);
  font-size: 1.15rem;
  line-height: 1.35;
  text-align: center;
  max-width: 40ch;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dgr-stars { display: inline-flex; gap: 2px; }
.dgr-star  { color: rgba(212, 176, 112, .28); font-size: 1.05em; line-height: 1; }
.dgr-star.is-on { color: var(--vr-gold-hell); }

/* ---------------------------------------------- Welcher Betrieb ist gemeint
   Ohne diese Zeile stehen auf der Seite zwei Noten nebeneinander, 4,9 aus
   171 und 5,0 aus 3, und niemand versteht warum. Sie gehören zu zwei
   Betrieben, die Google getrennt führt. Das muss dastehen, nicht erraten
   werden. */
.dgr-betrieb {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  padding: .38rem 1.1rem;
  border: 1px solid rgba(212, 176, 112, .38);
  border-radius: 999px;
  background: rgba(0, 0, 0, .16);
  color: var(--vr-creme);
  font-family: var(--vr-font-body);
  font-size: .95rem;
  letter-spacing: .02em;
}
.dgr-betrieb b { font-weight: 600; color: var(--vr-gold-hell); }

.dgr-hinweis {
  margin: 1.15rem auto 0;
  max-width: 52ch;
  color: rgba(248, 242, 228, .72);
  font-family: var(--vr-font-body);
  font-size: .95rem;
  line-height: 1.5;
  text-align: center;
}
.dgr-hinweis a { color: var(--vr-gold-hell); border-bottom: 1px solid rgba(212, 176, 112, .45); }
.dgr-hinweis a:hover { border-bottom-color: var(--vr-gold-hell); }

/* --------------------------------------------------- Schlagwörter und Suche */
.dgr-search { max-width: 1280px; margin: 2.2rem auto 1rem; text-align: center; }

.dgr-filters {
  display: flex;
  gap: .45rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1.8rem 0 .9rem;
}

.dgr-fchip {
  padding: .5rem 1.05rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(212, 176, 112, .34);
  background: rgba(255, 255, 255, .04);
  color: var(--vr-creme);
  font-family: var(--vr-font-body);
  letter-spacing: .02em;
  font-size: .9rem;
  line-height: 1;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.dgr-fchip:hover { color: var(--vr-gold-hell); border-color: var(--vr-gold-hell); }
.dgr-fchip.is-on {
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-hell));
  color: var(--vr-burgund-tief);
  border-color: transparent;
  font-weight: 600;
}
.dgr-fchip:focus-visible { outline: 2px solid var(--vr-gold-hell); outline-offset: 2px; }

.dgr-count {
  color: rgba(248, 242, 228, .78);
  font-family: var(--vr-font-body);
  font-size: .9rem;
  margin: .4rem 0 0;
}
.dgr-count-n {
  display: inline-block;
  color: var(--vr-gold-hell);
  font-weight: 600;
  transform-origin: center;
}
.dgr-count-n.is-pulse { animation: dgr-count-pulse .8s ease-in-out; }
@keyframes dgr-count-pulse {
  0%{transform:scale(1)} 20%{transform:scale(3)} 40%{transform:scale(1)}
  60%{transform:scale(3)} 80%{transform:scale(1)} 100%{transform:scale(1)}
}

.dgr-searchwrap { max-width: 280px; margin: 1.1rem auto 0; }

/* 16px Schriftgröße ist Pflicht, sonst zoomt iOS beim Antippen in das Feld
   hinein und der Besucher landet in einer verschobenen Seite. */
.dgr .dgr-search-input {
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  padding: .82rem 1.5rem;
  min-height: 44px;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(212, 176, 112, .34);
  border-radius: 999px;
  color: var(--vr-creme);
  -webkit-text-fill-color: var(--vr-creme);
  caret-color: var(--vr-gold-hell);
  font-family: var(--vr-font-body);
  font-size: 16px;
  outline: none;
  box-shadow: none;
  transition: border-color .3s, background .3s;
}
.dgr .dgr-search-input::placeholder { color: rgba(248, 242, 228, .55); opacity: 1; }
.dgr .dgr-search-input:focus { border-color: var(--vr-gold-hell); background: rgba(0, 0, 0, .38); }
.dgr .dgr-search-input:-webkit-autofill,
.dgr .dgr-search-input:autofill {
  filter: none;
  color: var(--vr-creme) !important;
  -webkit-text-fill-color: var(--vr-creme) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.28) inset !important;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.28) inset !important;
  caret-color: var(--vr-gold-hell);
}
.dgr .dgr-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ------------------------------------------------------------ Kartenleiste */
.dgr-carousel { position: relative; max-width: 1400px; margin: 1.6rem auto 0; padding: 0 3.2rem; }

.dgr-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 176, 112, .4) transparent;
}
.dgr-viewport::-webkit-scrollbar { height: 6px; }
.dgr-viewport::-webkit-scrollbar-track { background: transparent; }
.dgr-viewport::-webkit-scrollbar-thumb { background: rgba(212, 176, 112, .4); border-radius: 3px; }

.dgr-track { display: flex; gap: 1.5rem; width: max-content; padding: .4rem 0 1rem; }

.dgr-nav {
  position: absolute;
  top: calc(50% - .5rem);
  transform: translateY(-50%);
  z-index: 5;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid rgba(212, 176, 112, .5);
  background: rgba(74, 14, 24, .9);
  color: var(--vr-gold-hell);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s;
}
.dgr-nav:hover, .dgr-nav:focus-visible {
  background: var(--vr-gold-hell);
  color: var(--vr-burgund-tief);
  outline: none;
}
.dgr-prev { left: 0; }
.dgr-next { right: 0; }

.dgr-noresult {
  text-align: center;
  color: rgba(248, 242, 228, .72);
  font-family: var(--vr-font-body);
  font-style: italic;
  padding: 2rem 0;
  width: 100%;
}

.dgr-card {
  flex: 0 0 384px;
  height: 270px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  padding: 1.7rem;
  margin: 0;
  background: rgba(248, 242, 228, .05);
  border: 1px solid rgba(212, 176, 112, .22);
  border-radius: 16px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color .35s, transform .35s, background .35s;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.dgr-card:hover, .dgr-card:focus-visible {
  border-color: var(--vr-gold-hell);
  transform: translateY(-4px);
  background: rgba(248, 242, 228, .09);
  outline: none;
}

.dgr-card-top { display: flex; align-items: center; gap: .8rem; }

.dgr-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background-position: center;
  background-size: cover;
}
.dgr-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-hell));
  color: var(--vr-burgund-tief);
  font-weight: 600;
  font-family: var(--vr-font-display);
  font-size: 1.15rem;
}

.dgr-meta { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.dgr-author {
  color: var(--vr-creme);
  font-weight: 500;
  font-family: var(--vr-font-body);
  font-size: 1.08rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dgr-sub { display: flex; align-items: center; gap: .5rem; }
.dgr-time { color: rgba(248, 242, 228, .68); font-size: .82rem; }
.dgr-g { margin-left: auto; line-height: 0; display: inline-flex; }
.dgr-gsvg { width: 22px; height: 22px; display: block; }

.dgr-text {
  color: rgba(248, 242, 228, .94);
  font-family: var(--vr-font-body);
  font-size: 1.05rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------- Aufforderung */
.dgr-cta {
  text-align: center;
  margin: 2.4rem 0 0;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.dgr-cta-text {
  color: var(--vr-creme);
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-family: var(--vr-font-display);
  font-style: italic;
  margin: 0;
  line-height: 1.45;
}
.dgr-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 1rem 2.6rem;
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-hell));
  color: var(--vr-burgund-tief);
  font-family: var(--vr-font-body);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .9rem;
  border-radius: 999px;
  transition: filter .3s, box-shadow .3s;
}
.dgr-cta-btn:hover { filter: brightness(1.07); box-shadow: 0 6px 22px rgba(212, 176, 112, .3); }
.dgr-cta-all {
  display: inline-block;
  padding: 2px 0;
  color: rgba(248, 242, 228, .8);
  border-bottom: 1px solid rgba(212, 176, 112, .35);
  font-family: var(--vr-font-body);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .78rem;
  transition: color .3s, border-color .3s;
}
.dgr-cta-all:hover { color: var(--vr-gold-hell); border-color: var(--vr-gold-hell); }

/* ------------------------------------------------------------------ Overlay */
.dgr-pop[hidden] { display: none; }
.dgr-pop { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.dgr-pop-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 20, 16, .82);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
}
.dgr-pop.is-click .dgr-pop-backdrop { opacity: 1; pointer-events: auto; }
.dgr-pop-box {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  min-width: 440px;
  max-width: min(560px, 92vw);
  max-height: 84vh;
  overflow: auto;
  background: var(--vr-burgund-tief);
  border: 1px solid rgba(212, 176, 112, .32);
  border-radius: 20px;
  padding: 2.1rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
  animation: dgr-pop .3s cubic-bezier(.22, .61, .36, 1);
}
@keyframes dgr-pop     { from{opacity:0;scale:.66} to{opacity:1;scale:1} }
@keyframes dgr-pop-out { from{opacity:1;scale:1} to{opacity:0;scale:.66} }
.dgr-pop.is-closing .dgr-pop-box { animation: dgr-pop-out .19s ease-in forwards; }
.dgr-pop-x {
  position: absolute; top: .7rem; right: .9rem;
  width: 44px; height: 44px;
  background: none; border: none;
  color: rgba(248, 242, 228, .78);
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  transition: color .3s;
}
.dgr-pop-x:hover, .dgr-pop-x:focus-visible { color: var(--vr-gold-hell); outline: none; }
.dgr-pop:not(.is-click) .dgr-pop-x { display: none; }

.dgr-modal-top { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.3rem; }
.dgr-m-headmeta { display: flex; flex-direction: column; gap: .2rem; }
.dgr-m-author {
  color: var(--vr-creme); font-weight: 500;
  font-family: var(--vr-font-body); font-size: 1.32rem;
}
.dgr-m-sub { display: flex; align-items: center; gap: .5rem; }
.dgr-m-date { color: rgba(248, 242, 228, .7); font-size: .92rem; }
.dgr-m-text {
  color: rgba(248, 242, 228, .95);
  font-family: var(--vr-font-body);
  font-size: 1.38rem; line-height: 1.45;
  white-space: pre-line;
}
.dgr-m-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.dgr-m-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  font-family: var(--vr-font-body);
  letter-spacing: .1em; text-transform: uppercase; font-size: .78rem;
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-hell));
  color: var(--vr-burgund-tief);
  transition: filter .3s;
}
.dgr-m-link:hover { filter: brightness(1.07); }
.dgr-m-link--ghost { background: none; border: 1px solid rgba(212, 176, 112, .45); color: var(--vr-gold-hell); }
.dgr-m-link--ghost:hover { background: rgba(212, 176, 112, .12); }

/* ---------------------------------------------------------------- Handy
   Breakpoint 600 wie in der Vorlage. Die drei Villa-Breakpoints 490/768/1040
   gelten für das Seitenraster, nicht für diesen fremdstämmigen Block: hier
   entscheidet die Kartenbreite, wann umgebrochen wird, und die liegt bei
   384 Pixeln plus Rand. */
@media (max-width: 600px) {
  .dgr { margin: 2.5rem auto 0; }
  .dgr-carousel { padding: 0 2.4rem; }
  .dgr-card { flex-basis: 290px; height: 290px; }
  .dgr-pop-box { min-width: 0; max-width: 86vw; max-height: 82vh; padding: 1.5rem 1.4rem; }
  .dgr-m-text { font-size: 1.24rem; line-height: 1.45; }
  .dgr-nav { width: 40px; height: 40px; }
  .dgr-agg .dgr-stars { font-size: 1.5rem; gap: 4px; }
  .dgr-agg-num { font-size: 2.6rem; }
  .dgr-agg-count { font-size: 1rem; }
  .dgr-filters { gap: .5rem; margin: 1.3rem 0 .7rem; }
  .dgr-fchip { padding: .5rem 1.15rem; font-size: .92rem; }
  .dgr .dgr-search-input { padding: .58rem 1.1rem; }
  .dgr-fchip--sec { display: none; }
  .dgr-betrieb { font-size: .88rem; padding: .34rem .9rem; }
}

/* Wer Bewegung abbestellt hat, bekommt keine. Der Selbstlauf der Leiste
   fragt dasselbe im JavaScript ab. */
@media (prefers-reduced-motion: reduce) {
  .dgr-card { transition: none; }
  .dgr-card:hover { transform: none; }
  .dgr-pop-box { animation: none; }
  .dgr-count-n.is-pulse { animation: none; }
}

/* ==========================================================================
   NACHTRAG 03.09.2026, ZWEI KLEINE STÜCKE
   ========================================================================== */

/* Wenige Karten: nichts läuft, nichts scrollt, alles steht mittig.
   Die Pfeile wären hier nur Attrappen und verwirren, deshalb weg.
   Siehe MIN_SPIELRAUM in bewertung.js, dort steht der ganze Grund. */
.dgr-carousel--wenig { padding-inline: 0; }
.dgr-carousel--wenig .dgr-nav { display: none; }
.dgr-carousel--wenig .dgr-viewport { overflow-x: visible; }
.dgr-carousel--wenig .dgr-track {
  width: auto;
  flex-wrap: wrap;
  justify-content: center;
}

/* Neueste / Älteste. Steht am Ende der Schlagwortreihe, durch einen
   senkrechten Strich abgesetzt, damit klar ist: das ist keine Filterung
   nach Thema, sondern die Reihenfolge. */
.dgr-sortgruppe {
  display: inline-flex;
  gap: .45rem;
  margin-left: .55rem;
  padding-left: .9rem;
  border-left: 1px solid rgba(212, 176, 112, .3);
}
.dgr-sort.is-on {
  background: rgba(212, 176, 112, .22);
  color: var(--vr-gold-hell);
  border-color: rgba(212, 176, 112, .5);
  font-weight: 600;
}
@media (max-width: 600px) {
  .dgr-sortgruppe { margin-left: 0; padding-left: 0; border-left: 0; margin-top: .35rem; }
}

/* Drei Karten in einer Reihe. Bei fester Breite von 384 Pixeln brauchen
   drei Karten 1200 Pixel, der Inhaltsbereich ist aber 1184 breit: die
   dritte rutschte in die zweite Zeile und der Block sah aus wie ein
   unfertiges Raster. Bei wenigen Karten teilen sie sich deshalb den Platz,
   statt eine feste Breite zu behalten. Die Höhe bleibt, sonst stehen
   unterschiedlich lange Texte auf unterschiedlich hohen Karten. */
.dgr-carousel--wenig .dgr-card {
  flex: 1 1 300px;
  max-width: 384px;
}
@media (max-width: 900px) {
  .dgr-carousel--wenig .dgr-card { flex-basis: 100%; max-width: 460px; }
}


/* ==========================================================================
   HELLE FASSUNG DES BEWERTUNGSBLOCKS
   Angelegt am 04.09.2026 auf Dirks Ansage.

   DER BEFUND: Auf elf Seiten standen zwei burgunderfarbene Abschnitte
   direkt hintereinander. Auf den zehn Ortsseiten sogar zweimal derselbe
   Bewertungsblock, einmal fuer das Restaurant und einmal fuer die Pension.
   Dirks Worte: "ich moechte keine doppelten roten Sektionen so
   hintereinander haben."

   DIE LOESUNG: Der Block kann jetzt beides. Steht er in einer hellen
   Sektion, faerbt er sich hell ein. tools/bewertungen_einbau.py waehlt die
   Sektionsfarbe danach, was davor steht, und setzt nie zweimal dieselbe
   hintereinander. Damit gibt es Abwechslung, ohne dass jemand von Hand
   nachhelfen muss.

   Die dunkle Fassung darueber bleibt unveraendert. Diese Regeln greifen
   ausschliesslich innerhalb von .section-creme, .section-papier und
   .section-tief und sind damit additiv: wer sie loescht, hat wieder den
   Stand von vorher.
   ========================================================================== */

.section-creme .dgr-eyebrow,
.section-papier .dgr-eyebrow,
.section-tief .dgr-eyebrow {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-title,
.section-papier .dgr-title,
.section-tief .dgr-title {
  color: var(--vr-anthrazit);
}

.section-creme .dgr-agg-num,
.section-papier .dgr-agg-num,
.section-tief .dgr-agg-num {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-agg-count,
.section-papier .dgr-agg-count,
.section-tief .dgr-agg-count {
  color: rgba(26, 20, 16, 0.78);
}

.section-creme .dgr-star,
.section-papier .dgr-star,
.section-tief .dgr-star {
  color: rgba(128, 96, 34, 0.42);
}

.section-creme .dgr-star.is-on,
.section-papier .dgr-star.is-on,
.section-tief .dgr-star.is-on {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-betrieb,
.section-papier .dgr-betrieb,
.section-tief .dgr-betrieb {
  border: 1px solid rgba(128, 96, 34, 0.57);
  background: rgba(255, 255, 255, 0.62);
  color: var(--vr-anthrazit);
}

.section-creme .dgr-betrieb b,
.section-papier .dgr-betrieb b,
.section-tief .dgr-betrieb b {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-hinweis,
.section-papier .dgr-hinweis,
.section-tief .dgr-hinweis {
  color: rgba(26, 20, 16, 0.68);
}

.section-creme .dgr-hinweis a,
.section-papier .dgr-hinweis a,
.section-tief .dgr-hinweis a {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-hinweis a:hover,
.section-papier .dgr-hinweis a:hover,
.section-tief .dgr-hinweis a:hover {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-fchip,
.section-papier .dgr-fchip,
.section-tief .dgr-fchip {
  border: 1px solid rgba(128, 96, 34, 0.51);
  background: rgba(255, 255, 255, 0.70);
  color: var(--vr-anthrazit);
}

.section-creme .dgr-fchip:hover,
.section-papier .dgr-fchip:hover,
.section-tief .dgr-fchip:hover {
  color: var(--vr-gold-tief);
  border-color: var(--vr-gold-tief);
}

.section-creme .dgr-fchip.is-on,
.section-papier .dgr-fchip.is-on,
.section-tief .dgr-fchip.is-on {
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-tief));
  color: var(--vr-creme);
}

.section-creme .dgr-count,
.section-papier .dgr-count,
.section-tief .dgr-count {
  color: rgba(26, 20, 16, 0.74);
}

.section-creme .dgr-count-n,
.section-papier .dgr-count-n,
.section-tief .dgr-count-n {
  color: var(--vr-gold-tief);
}

.section-creme .dgr .dgr-search-input,
.section-papier .dgr .dgr-search-input,
.section-tief .dgr .dgr-search-input {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(128, 96, 34, 0.51);
  color: var(--vr-anthrazit);
  color: var(--vr-anthrazit);
  color: var(--vr-gold-tief);
}

.section-creme .dgr .dgr-search-input::placeholder,
.section-papier .dgr .dgr-search-input::placeholder,
.section-tief .dgr .dgr-search-input::placeholder {
  color: rgba(26, 20, 16, 0.52);
}

.section-creme .dgr .dgr-search-input:focus,
.section-papier .dgr .dgr-search-input:focus,
.section-tief .dgr .dgr-search-input:focus {
  border-color: var(--vr-gold-tief);
  background: rgba(255, 255, 255, 0.62);
}

.section-creme .dgr .dgr-search-input:-webkit-autofill,
.section-papier .dgr .dgr-search-input:-webkit-autofill,
.section-tief .dgr .dgr-search-input:-webkit-autofill,
.section-creme .dgr .dgr-search-input:autofill,
.section-papier .dgr .dgr-search-input:autofill,
.section-tief .dgr .dgr-search-input:autofill {
  color: var(--vr-anthrazit) !important;
  color: var(--vr-anthrazit) !important;
  color: var(--vr-gold-tief);
}

.section-creme .dgr-viewport,
.section-papier .dgr-viewport,
.section-tief .dgr-viewport {
  color: rgba(128, 96, 34, 0.60) transparent;
}

.section-creme .dgr-viewport::-webkit-scrollbar-thumb,
.section-papier .dgr-viewport::-webkit-scrollbar-thumb,
.section-tief .dgr-viewport::-webkit-scrollbar-thumb {
  background: rgba(128, 96, 34, 0.60);
}

.section-creme .dgr-nav,
.section-papier .dgr-nav,
.section-tief .dgr-nav {
  border: 2px solid rgba(128, 96, 34, 0.75);
  color: var(--vr-gold-tief);
}

.section-creme .dgr-nav:hover,
.section-papier .dgr-nav:hover,
.section-tief .dgr-nav:hover,
.section-creme .dgr-nav:focus-visible,
.section-papier .dgr-nav:focus-visible,
.section-tief .dgr-nav:focus-visible {
  background: var(--vr-gold-tief);
  color: var(--vr-creme);
}

.section-creme .dgr-noresult,
.section-papier .dgr-noresult,
.section-tief .dgr-noresult {
  color: rgba(26, 20, 16, 0.68);
}

.section-creme .dgr-card,
.section-papier .dgr-card,
.section-tief .dgr-card {
  background: rgba(26, 20, 16, 0.05);
  border: 1px solid rgba(128, 96, 34, 0.33);
}

.section-creme .dgr-card:hover,
.section-papier .dgr-card:hover,
.section-tief .dgr-card:hover,
.section-creme .dgr-card:focus-visible,
.section-papier .dgr-card:focus-visible,
.section-tief .dgr-card:focus-visible {
  border-color: var(--vr-gold-tief);
  background: rgba(26, 20, 16, 0.09);
}

.section-creme .dgr-avatar--ph,
.section-papier .dgr-avatar--ph,
.section-tief .dgr-avatar--ph {
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-tief));
  color: var(--vr-creme);
}

.section-creme .dgr-author,
.section-papier .dgr-author,
.section-tief .dgr-author {
  color: var(--vr-anthrazit);
}

.section-creme .dgr-time,
.section-papier .dgr-time,
.section-tief .dgr-time {
  color: rgba(26, 20, 16, 0.65);
}

.section-creme .dgr-text,
.section-papier .dgr-text,
.section-tief .dgr-text {
  color: rgba(26, 20, 16, 0.89);
}

.section-creme .dgr-cta-text,
.section-papier .dgr-cta-text,
.section-tief .dgr-cta-text {
  color: var(--vr-anthrazit);
}

.section-creme .dgr-cta-btn,
.section-papier .dgr-cta-btn,
.section-tief .dgr-cta-btn {
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-tief));
  color: var(--vr-creme);
}

.section-creme .dgr-cta-all,
.section-papier .dgr-cta-all,
.section-tief .dgr-cta-all {
  color: rgba(26, 20, 16, 0.76);
}

.section-creme .dgr-cta-all:hover,
.section-papier .dgr-cta-all:hover,
.section-tief .dgr-cta-all:hover {
  color: var(--vr-gold-tief);
  border-color: var(--vr-gold-tief);
}

.section-creme .dgr-pop-box,
.section-papier .dgr-pop-box,
.section-tief .dgr-pop-box {
  background: var(--vr-creme);
  border: 1px solid rgba(128, 96, 34, 0.48);
}

.section-creme .dgr-pop-x,
.section-papier .dgr-pop-x,
.section-tief .dgr-pop-x {
  color: rgba(26, 20, 16, 0.74);
}

.section-creme .dgr-pop-x:hover,
.section-papier .dgr-pop-x:hover,
.section-tief .dgr-pop-x:hover,
.section-creme .dgr-pop-x:focus-visible,
.section-papier .dgr-pop-x:focus-visible,
.section-tief .dgr-pop-x:focus-visible {
  color: var(--vr-gold-tief);
}

.section-creme .dgr-m-author,
.section-papier .dgr-m-author,
.section-tief .dgr-m-author {
  color: var(--vr-anthrazit);
}

.section-creme .dgr-m-date,
.section-papier .dgr-m-date,
.section-tief .dgr-m-date {
  color: rgba(26, 20, 16, 0.66);
}

.section-creme .dgr-m-text,
.section-papier .dgr-m-text,
.section-tief .dgr-m-text {
  color: rgba(26, 20, 16, 0.90);
}

.section-creme .dgr-m-link,
.section-papier .dgr-m-link,
.section-tief .dgr-m-link {
  background: linear-gradient(135deg, var(--vr-gold-tief), var(--vr-gold-tief));
  color: var(--vr-creme);
}

.section-creme .dgr-m-link--ghost,
.section-papier .dgr-m-link--ghost,
.section-tief .dgr-m-link--ghost {
  border: 1px solid rgba(128, 96, 34, 0.68);
  color: var(--vr-gold-tief);
}

.section-creme .dgr-m-link--ghost:hover,
.section-papier .dgr-m-link--ghost:hover,
.section-tief .dgr-m-link--ghost:hover {
  background: rgba(128, 96, 34, 0.18);
}

.section-creme .dgr-sort.is-on,
.section-papier .dgr-sort.is-on,
.section-tief .dgr-sort.is-on {
  background: rgba(128, 96, 34, 0.33);
  color: var(--vr-gold-tief);
  border-color: rgba(128, 96, 34, 0.75);
}


/* ==========================================================================
   UMBAU-04092026. Gemessene Korrekturen, Dirk 04.09.2026.
   ========================================================================== */

/* Die Zahl der Treffer stand linksbuendig unter den Schlagwoertern.
   Sie gehoert mittig unter den Block, wie alles andere im Kopf auch. */
.dgr-count {
  text-align: center;
}

/* Auf hellem Grund lag ein schwarzer Schlagschatten hinter der Note.
   Auf Burgund traegt er die Zahl, auf Creme sieht er schmutzig aus. */
.section-creme .dgr-agg-num,
.section-papier .dgr-agg-num,
.section-tief .dgr-agg-num {
  text-shadow: none;
}

.section-creme .dgr-agg .dgr-stars,
.section-papier .dgr-agg .dgr-stars,
.section-tief .dgr-agg .dgr-stars {
  filter: none;
}

.section-creme .dgr-agg-count,
.section-papier .dgr-agg-count,
.section-tief .dgr-agg-count {
  text-shadow: none;
}

/* Der Abschnitt begann 115 Pixel unter seiner Oberkante. Das ist auf einer
   Flaeche, die ohnehin schon farbig absetzt, zu viel Anlauf. */
#stimmen.section {
  padding-top: 4.5rem;
}


/* ==========================================================================
   WEICH-04092026. Lesbarkeit im hellen Bewertungsblock, Dirk 04.09.2026.
   Alle drei Faelle gemessen auf /restaurant, Abschnitt section-creme.
   ========================================================================== */

/* FALL 1: Der aktive Schlagwortknopf war unsichtbar.
   Er trug Cremeschrift auf durchsichtigem Grund, gemessener Kontrast 1,0.
   Auf Burgund stimmt das, auf Creme verschwindet die Schrift. Jetzt
   bekommt er dort einen dunklen Grund, wie auf der dunklen Fassung auch. */
.section-creme .dgr-fchip.is-on,
.section-papier .dgr-fchip.is-on,
.section-tief .dgr-fchip.is-on {
  background: var(--vr-gold-tief);
  border-color: var(--vr-gold-tief);
  color: var(--vr-creme);
}

.section-creme .dgr-fchip.is-on:hover,
.section-papier .dgr-fchip.is-on:hover,
.section-tief .dgr-fchip.is-on:hover {
  background: var(--vr-anthrazit);
  border-color: var(--vr-anthrazit);
  color: var(--vr-creme);
}

/* Ein nicht aktiver Knopf wird beim Ueberfahren dunkel und traegt dann
   helle Schrift. Vorher wechselte nur die Schriftfarbe auf Gold, das
   war auf Creme kaum zu lesen. */
.section-creme .dgr-fchip:not(.is-on):hover,
.section-papier .dgr-fchip:not(.is-on):hover,
.section-tief .dgr-fchip:not(.is-on):hover {
  background: var(--vr-gold-tief);
  border-color: var(--vr-gold-tief);
  color: var(--vr-creme);
}

/* FALL 2: Die beiden Pfeile am Karussell standen dunkelrot
   (rgba(74,14,24,.9)) mitten im hellen Abschnitt und trugen goldene
   Zeichen darauf, Kontrast 2,07. Jetzt hell mit dunklem Zeichen. */
.section-creme .dgr-nav,
.section-papier .dgr-nav,
.section-tief .dgr-nav {
  background: var(--vr-creme);
  border-color: var(--vr-gold-tief);
  color: var(--vr-gold-tief);
  box-shadow: 0 2px 10px rgba(26, 20, 16, 0.12);
}

.section-creme .dgr-nav:hover,
.section-papier .dgr-nav:hover,
.section-tief .dgr-nav:hover,
.section-creme .dgr-nav:focus-visible,
.section-papier .dgr-nav:focus-visible,
.section-tief .dgr-nav:focus-visible {
  background: var(--vr-gold-tief);
  border-color: var(--vr-gold-tief);
  color: var(--vr-creme);
}

/* FALL 3: "Alle Bewertungen ansehen" trug eine Unterstreichung UND eine
   Rahmenlinie darunter. Zwei Striche uebereinander sehen aus wie ein
   Fehler. Es bleibt einer, und der gehoert zum Text. */
.dgr-cta-all {
  text-decoration: none;
}

.dgr-cta-all:hover,
.dgr-cta-all:focus-visible {
  text-decoration: none;
  border-bottom-color: currentColor;
}

/* Beim Ueberfahren einer Bewertungskarte hob sich vorher nur der Grund
   minimal ab. Ein leichtes Anheben zeigt deutlicher, dass sie anklickbar
   ist, und passt zu den uebrigen Karten der Seite. */
.dgr-card:hover,
.dgr-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(26, 20, 16, 0.14);
}

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