/*
 * Der Ratgeber - eigenes schlankes Stylesheet, geladen zusaetzlich zu stil.css.
 *
 * Uebertragen aus dem Bestand (assets/css/ratgeber.css), Struktur und
 * Layout-Entscheidungen unveraendert - sie waren gut durchdacht. Ersetzt sind
 * nur die Werte: die Marke, ihre Schriften, ihre Farben.
 *
 * Eine Entscheidung bewusst zurueckgenommen: Der Bestand nutzte fuer den
 * Ratgeber eine dritte Schrift (Georgia als Serife), um redaktionelle Inhalte
 * von den Verkaufsseiten abzusetzen. Diese Seite hat mit Fraunces bereits eine
 * eigenstaendige Titelschrift - eine weitere Serife daneben waere genau die
 * Unruhe, die an anderer Stelle dieser Seite ausdruecklich vermieden wurde.
 *
 * Eigener Rahmen um den Text: Eine Lesestrecke braucht andere Breiten als eine
 * Angebotsseite, deshalb keine Wiederverwendung von .sachseite - die Klassen
 * hier bauen ihre eigene Spalte.
 */

.rg {
  --rg-mass: 44rem;              /* Lesebreite, rund 70 Zeichen */
  --rg-weit: 72rem;              /* Breite fuer Raster und Kopfbereiche */
  --rg-luft: clamp(2rem, 5vw, 4rem);
  color: var(--tinte);
  font-family: var(--schrift-text);
}

.rg p a,
.rg li a,
.rg .rg-krumen a,
.rg .rg-text a:not(.rg-knopf) { color: var(--bronze-tief); }
.rg p a:hover,
.rg li a:hover,
.rg .rg-krumen a:hover { color: var(--bronze); }

.rg-innen { max-width: var(--rg-mass); margin: 0 auto; padding: 0 1.25rem; }
.rg-weit { max-width: var(--rg-weit); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Kopfbereich einer Seite ---------- */

/*
 * Die Kopfleiste dieser Seite ist fest positioniert und deutlich schlanker als
 * im Bestand - kein Riegel von 100 Bildpunkten, sondern eine schmale Leiste.
 * Entsprechend weniger Abstand nach oben.
 */
.rg-kopf {
  padding: clamp(6.5rem, 10vw, 8.5rem) 0 2.5rem;
  background: var(--sand);
}
.rg-kopf h1 {
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0.6rem 0 0.9rem;
  text-wrap: balance;
}
.rg-kopf p { font-size: 1.05rem; margin: 0; max-width: 46rem; color: var(--tinte-leise); }

/* ---------- Aufmacher der Uebersicht ---------- */

.rg-aufmacher { padding: clamp(6.5rem, 10vw, 8.5rem) 0 clamp(2rem, 4vw, 3.5rem); }
.rg-aufmacher-raster {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.rg-augenbraue {
  font-family: var(--schrift-marke);
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bronze-tief); margin: 0 0 1rem; font-weight: 500;
}
.rg-aufmacher h1 {
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: clamp(2.3rem, 5.5vw, 3.8rem); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0 0 1.2rem; text-wrap: balance;
}
.rg-vorspann { font-size: 1.08rem; line-height: 1.65; margin: 0 0 1.8rem; max-width: 34rem; color: var(--tinte-leise); }
.rg-aufmacher-knoepfe { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.rg-knopf-dunkel { background: var(--nacht); }
.rg-knopf-dunkel:hover { background: #34363b; color: var(--papier); }
.rg-knopf-rand {
  background: transparent; color: var(--tinte);
  border: 1px solid var(--sand-tief);
}
.rg-knopf-rand:hover { background: transparent; border-color: var(--bronze); color: var(--bronze-tief); }

.rg-aufmacher-bild {
  position: relative; display: block; border-radius: 0.9rem; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--sand-tief); text-decoration: none;
}
.rg-aufmacher-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-aufmacher-karte {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  background: rgba(250, 246, 240, 0.94); border-radius: 0.6rem; padding: 1rem 1.25rem;
  backdrop-filter: blur(6px);
}
.rg-aufmacher-karte .rg-augenbraue { margin: 0 0 0.4rem; font-size: 0.65rem; }
.rg-aufmacher-titel {
  font-family: var(--schrift-titel); font-weight: 400; font-size: 1.1rem;
  line-height: 1.32; margin: 0; color: var(--tinte);
}
.rg-aufmacher-quelle { font-size: 0.82rem; color: var(--bronze-tief); margin: 0.35rem 0 0; }

/* ---------- Leiste mit Clustern und Suche ---------- */

.rg-leiste {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  justify-content: space-between; padding: 1.5rem 0 0;
  border-top: 1px solid var(--sand-tief);
}
.rg-marken { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rg-leiste .rg-suche { padding: 0; flex: 1 1 16rem; max-width: 26rem; }

.rg-abschnitt {
  font-family: var(--schrift-titel); font-weight: 400;
  font-size: 1.6rem; margin: 2.5rem 0 0;
}

/* ---------- Brotkrumen ---------- */

.rg-krumen { font-size: 0.82rem; margin-bottom: 1rem; color: var(--tinte-leise); }
.rg-krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.rg-krumen li:not(:last-child)::after { content: '\203A'; margin-left: 0.4rem; opacity: 0.5; }

/* ---------- Kennzeichnung und Angaben ---------- */

.rg-marke {
  display: inline-block; background: var(--sand); color: var(--bronze-tief);
  font-family: var(--schrift-marke);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  padding: 0.4rem 1rem; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent;
}
.rg-marke:hover { border-color: var(--bronze); color: var(--bronze-tief); }

.rg-angaben {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem;
  font-size: 0.85rem; color: var(--tinte-leise); margin-top: 1rem;
}

/* ---------- Artikeltext ---------- */

.rg .rg-text {
  max-width: var(--rg-mass);
  margin: 0 auto;
  padding: var(--rg-luft) 1.25rem;
  font-size: 1.05rem;
  line-height: 1.75;
}
.rg .rg-text > * { max-width: none; margin-left: 0; margin-right: 0; }

.rg .rg-text p { margin: 0 0 1.4rem; }
.rg .rg-text h2, .rg .rg-text h3 {
  font-family: var(--schrift-titel); font-weight: 400;
  line-height: 1.22; letter-spacing: -0.01em;
  margin: 2.6rem 0 0.9rem; scroll-margin-top: 7rem; text-wrap: balance;
  color: var(--tinte);
}
.rg .rg-text h2 { font-size: 1.6rem; }
.rg .rg-text h3 { font-size: 1.25rem; }

.rg .rg-text ul, .rg .rg-text ol {
  margin: 0 0 1.4rem; padding-left: 1.4rem; list-style-position: outside;
}
.rg .rg-text li { margin: 0 0 0.6rem; padding-left: 0.2rem; }
.rg .rg-text strong { font-weight: 600; }

/* ---------- Pflanzensilhouetten auf der weissen Flaeche ----------
 *
 * Unveraendert aus dem Bestand: dieselbe Bildsprache wie in den
 * Studioaufnahmen, jetzt in der Bronze dieser Seite statt der alten Marke.
 */
.rg .rg-text { position: relative; }

.rg .rg-text::before,
.rg .rg-text::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  background-color: var(--bronze);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.rg .rg-text::after {
  inset: 4% 0 6%;
  opacity: 0.06;
  -webkit-mask-image:
    url('/assets/images/palmwedel.svg'),
    url('/assets/images/zweig-klein.svg'),
    url('/assets/images/graeser-rechts.svg');
  mask-image:
    url('/assets/images/palmwedel.svg'),
    url('/assets/images/zweig-klein.svg'),
    url('/assets/images/graeser-rechts.svg');
  -webkit-mask-size: 26rem auto, 9rem auto, 12rem auto;
  mask-size: 26rem auto, 9rem auto, 12rem auto;
  -webkit-mask-position: right 8% top 18%, left 14% top 52%, right 22% top 80%;
  mask-position: right 8% top 18%, left 14% top 52%, right 22% top 80%;
}

@media (min-width: 72rem) {
  .rg .rg-text::before {
    inset: 0 calc(-1 * min(14rem, (100vw - var(--rg-mass)) / 2 - 1rem))
           0 calc(-1 * min(15rem, (100vw - var(--rg-mass)) / 2 - 1rem));
    opacity: 0.16;
    -webkit-mask-image:
      url('/assets/images/graeser-links.svg'),
      url('/assets/images/zweig.svg'),
      url('/assets/images/graeser-schmal.svg'),
      url('/assets/images/palmwedel.svg');
    mask-image:
      url('/assets/images/graeser-links.svg'),
      url('/assets/images/zweig.svg'),
      url('/assets/images/graeser-schmal.svg'),
      url('/assets/images/palmwedel.svg');
    -webkit-mask-size: 13rem auto, 7.5rem auto, 9rem auto, 14rem auto;
    mask-size: 13rem auto, 7.5rem auto, 9rem auto, 14rem auto;
    -webkit-mask-position:
      left 0 top 12%, right 1rem top 33%, left 1.5rem top 58%, right 0 top 82%;
    mask-position:
      left 0 top 12%, right 1rem top 33%, left 1.5rem top 58%, right 0 top 82%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rg .rg-text::before,
  .rg .rg-text::after { display: none; }
}

/* ---------- Titelbild eines Beitrags ---------- */

.rg .rg-text .rg-titelbild { margin: 0 0 1.6rem; }
.rg .rg-text .rg-titelbild img { width: 100%; height: auto; display: block; border-radius: 0.4rem; }
.rg .rg-text .rg-titelbild figcaption { font-size: 0.85rem; color: var(--tinte-leise); margin-top: 0.5rem; }

@media (min-width: 64rem) {
  .rg .rg-text .rg-titelbild {
    float: right;
    width: 22rem;
    margin-right: calc(-1 * max(0px, min(14rem, (100vw - var(--rg-mass)) / 2 - 2rem)));
    margin-top: -8.5rem;
    margin-bottom: 1.4rem;
    margin-left: 2.2rem;
    shape-margin: 1rem;
  }
  .rg-kopf .rg-angaben { max-width: 46rem; }
}

/* ---------- Bilder im Beitrag ---------- */

.rg .rg-text .rg-bild-mittig {
  width: min(var(--bild-breite, 164%), calc(100vw - 3rem));
  margin-left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 52rem) {
  .rg .rg-text .rg-bild-links,
  .rg .rg-text .rg-bild-rechts { margin-top: 0.4rem; margin-bottom: 1.2rem; }
  .rg .rg-text .rg-bild-links { float: left; }
  .rg .rg-text .rg-bild-rechts { float: right; }
  .rg .rg-text .rg-bild-links,
  .rg .rg-text .rg-bild-rechts { width: min(var(--bild-breite, 50%), 60%); }
  .rg .rg-text .rg-bild-links {
    margin-right: 2rem;
    margin-left: calc(-1 * max(0px, min(9rem, (100vw - var(--rg-mass)) / 2 - 2rem)));
  }
  .rg .rg-text .rg-bild-rechts {
    margin-left: 2rem;
    margin-right: calc(-1 * max(0px, min(9rem, (100vw - var(--rg-mass)) / 2 - 2rem)));
  }
  .rg .rg-text .rg-cta,
  .rg .rg-text .rg-autorin,
  .rg .rg-text .rg-faq,
  .rg .rg-text .rg-hinweis { clear: both; }
}

.rg .rg-text .rg-bild-links figcaption,
.rg .rg-text .rg-bild-rechts figcaption { text-align: left; }

/* ---------- Bausteine ---------- */

.rg-bild { margin: 2.5rem auto; max-width: var(--rg-weit); }
.rg-bild img { width: 100%; height: auto; border-radius: 0.4rem; display: block; }
.rg-bild figcaption { font-size: 0.85rem; color: var(--tinte-leise); margin-top: 0.6rem; text-align: center; }

.rg-ki-hinweis {
  display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.5rem;
  border: 1px solid var(--sand-tief); border-radius: 999px;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-leise); white-space: nowrap;
}

.rg .rg-text .rg-zitat, .rg-zitat {
  margin: 2.2rem 0; padding: 0.4rem 0 0.4rem 1.5rem;
  border-left: 2px solid var(--bronze);
}
.rg-zitat blockquote { margin: 0; }
.rg-zitat p { font-family: var(--schrift-titel); font-size: 1.25rem; line-height: 1.55; font-style: italic; margin: 0 0 0.5rem; }
.rg-zitat figcaption { font-size: 0.85rem; color: var(--tinte-leise); }

.rg .rg-text .rg-faq, .rg-faq { margin: 2.8rem 0; }
.rg-faq h2 { margin-top: 0; }
.rg-faq details { border-bottom: 1px solid var(--sand-tief); padding: 0.9rem 0; }
.rg-faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem;
}
.rg-faq summary::-webkit-details-marker { display: none; }
.rg-faq summary::after { content: '+'; color: var(--bronze); font-size: 1.3rem; line-height: 1; }
.rg-faq details[open] summary::after { content: '\2212'; }
.rg-faq details > div { padding-top: 0.7rem; color: var(--tinte-leise); }

.rg .rg-text .rg-cta, .rg-cta {
  margin: 2.8rem 0; padding: 1.5rem;
  background: var(--sand); border-radius: 0.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.rg-cta p { margin: 0; font-weight: 600; }

.rg-knopf {
  display: inline-block; background: var(--bronze); color: var(--papier);
  padding: 0.65rem 1.4rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: 0.92rem; white-space: nowrap;
}
.rg-knopf:hover { background: var(--bronze-tief); color: var(--papier); }

/* ---------- Autorenkasten ---------- */

.rg .rg-text .rg-autorin, .rg-autorin {
  margin: 3rem 0; padding: 1.5rem; border: 1px solid var(--sand-tief);
  border-radius: 0.6rem; display: flex; gap: 1.25rem; align-items: flex-start;
}
.rg-autorin img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.rg-autorin h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.1rem; margin: 0 0 0.3rem; }
.rg-autorin p { margin: 0; font-size: 0.9rem; }
.rg-autorin .rg-qualifikation { color: var(--bronze-tief); font-weight: 600; font-size: 0.82rem; }

/* ---------- Kartenraster ---------- */

.rg-raster {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  padding: var(--rg-luft) 0;
}
.rg-karte {
  display: flex; flex-direction: column;
  background: var(--papier); border: 1px solid var(--sand-tief);
  border-radius: 0.9rem; overflow: hidden; height: 100%;
  transition: box-shadow 0.3s, transform 0.3s;
}
.rg-karte:hover { box-shadow: 0 12px 32px -18px rgba(24, 22, 20, 0.35); transform: translateY(-2px); }
.rg-karte > *:not(.rg-karte-bild):not(.rg-karte-kopf) { margin-left: 1.35rem; margin-right: 1.35rem; }
.rg-karte > *:not(.rg-karte-bild):not(.rg-karte-kopf):first-child { margin-top: 1.35rem; }
.rg-karte-fuss { margin-top: auto; padding: 1.1rem 0 1.35rem; }
.rg-karte-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-tief); display: block; }

.rg-karte-kopf { position: relative; }
.rg-karte-kopf .rg-marke {
  position: absolute; left: 1.1rem; bottom: 1.1rem; max-width: calc(100% - 2.2rem);
  box-shadow: 0 2px 12px -4px rgba(24, 22, 20, 0.45);
}
.rg-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rg-karte h2, .rg-karte h3 {
  font-family: var(--schrift-titel); font-weight: 400; font-size: 1.22rem; line-height: 1.28;
  letter-spacing: -0.01em; margin: 0.9rem 0 0; text-wrap: balance;
}
.rg-karte h2 a, .rg-karte h3 a { text-decoration: none; color: var(--tinte); }
.rg-karte h2 a:hover, .rg-karte h3 a:hover { color: var(--bronze-tief); }
.rg-karte p { margin: 0.6rem 0 0; font-size: 0.93rem; line-height: 1.6; color: var(--tinte-leise); }

.rg-karte-fuss {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-size: 0.85rem; color: var(--bronze-tief); border-top: 1px solid var(--sand-tief);
  padding-top: 0.9rem;
}

.rg-hervorgehoben {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
  align-items: center; padding: var(--rg-luft) 0;
}
.rg-hervorgehoben .rg-karte-bild { aspect-ratio: 4 / 3; }
.rg-hervorgehoben h2 { font-size: clamp(1.4rem, 3vw, 2rem); }

/* ---------- Blaetterung ---------- */

.rg-blaettern {
  display: flex; justify-content: center; align-items: center; gap: 0.5rem;
  padding: 2rem 0 var(--rg-luft);
}
.rg-blaettern a, .rg-blaettern span {
  padding: 0.45rem 0.85rem; border-radius: 0.4rem; text-decoration: none;
  border: 1px solid var(--sand-tief); font-size: 0.9rem; color: var(--tinte);
}
.rg-blaettern .ist-aktuell { background: var(--bronze); border-color: var(--bronze); color: var(--papier); }

/* ---------- Suche ---------- */

.rg-suche { padding: 1.5rem 0 0; }
.rg-suche input {
  width: 100%; padding: 0.7rem 1rem; font: inherit;
  border: 1px solid var(--sand-tief); border-radius: 999px;
  background: var(--papier); color: var(--tinte);
}
.rg-suche input:focus-visible { outline: 2px solid var(--bronze); outline-offset: -1px; }

/* ---------- Verwandte Beitraege ---------- */

.rg-verwandt { background: var(--sand); padding: var(--rg-luft) 0; margin-top: 3rem; }
.rg-verwandt h2 { font-family: var(--schrift-titel); font-weight: 400; font-size: 1.5rem; margin: 0 0 1.5rem; }

/* ---------- Leerer Zustand ---------- */

/*
 * padding-block, nicht padding.
 *
 * Der Leerzustand haengt am selben Element wie .rg-weit
 * (<div class="rg-weit rg-leer">). Mit der Kurzform setzte diese Regel den
 * seitlichen Abstand auf 0 - gleiche Spezifitaet, spaetere Regel gewinnt -,
 * und die Karten stiessen auf dem Telefon randlos an den Bildschirm, waehrend
 * jede andere Zeile 20 Bildpunkte Abstand hielt (BUGS.md F-051). Dieselbe
 * Falle wie F-042, nur eine Ebene weiter: nicht eine Regel gegen die andere,
 * sondern eine Kurzform, die mehr zuruecksetzt, als sie sagt.
 */
.rg-leer { padding-block: var(--rg-luft); color: var(--tinte-leise); }

/*
 * Der Leerzustand der Uebersicht.
 *
 * Er war ein grauer Satz in der Mitte - eine Sackgasse auf einer Seite, die im
 * Kopf jeder anderen Seite verlinkt ist. Jetzt traegt er drei Wege dorthin, wo
 * die Antworten schon stehen. Dieselbe Kartenform wie anderswo im Auftritt,
 * damit er nicht wie ein Fehler aussieht, sondern wie ein Angebot.
 */
.rg-leer-text {
  margin: 1.2rem 0 0;
  max-width: 34rem;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.65;
  color: var(--tinte-leise);
}

.rg-leer-marke {
  margin: 0 0 1rem;
  font-family: var(--schrift-marke);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-tief);
}

.rg-leer-wege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.rg-leer-weg {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  background: var(--papier);
  border: 1px solid var(--sand-tief);
  border-radius: 0.7rem;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.rg-leer-weg:hover,
.rg-leer-weg:focus-visible { border-color: var(--bronze); transform: translateY(-2px); }

.rg-leer-weg-titel {
  font-family: var(--schrift-titel);
  font-size: 1.12rem;
  color: var(--tinte);
}

.rg-leer-weg-text { font-size: 0.92rem; line-height: 1.5; color: var(--tinte-leise); }

@media (prefers-reduced-motion: reduce) {
  .rg-leer-weg:hover { transform: none; }
}

/* ---------- Schmale Fenster ---------- */

@media screen and (max-width: 860px) {
  .rg-aufmacher-raster { grid-template-columns: 1fr; }
  .rg-aufmacher-bild { aspect-ratio: 3 / 2; }
}

@media screen and (max-width: 700px) {
  .rg-hervorgehoben { grid-template-columns: 1fr; gap: 1.25rem; }
  .rg-leiste { flex-direction: column; align-items: stretch; }
  .rg-autorin { flex-direction: column; gap: 0.9rem; }
  .rg-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Druck ---------- */

@media print {
  .rg-cta, .rg-verwandt, .rg-suche, .rg-blaettern { display: none; }
  .rg-text { font-size: 11pt; }
}

/* ---------------------------------------------------------------- Bewertung */

/* Der Kasten steht nach dem Text und vor den verwandten Beitraegen: an der Stelle,
   an der jemand fertig gelesen hat und sich noch nicht entschieden hat, wohin. */
.rg-bewertung {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--rg-rand, #e5ded4);
  border-radius: 10px;
  background: var(--rg-flaeche, #fbf9f6);
}
.rg-bewertung-frage {
  margin: 0 0 .9rem;
  font-weight: 600;
  font-size: 1rem;
}
.rg-bewertung-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }

.rg-bewertung button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  font: inherit; font-size: .92rem;
  color: inherit;
  background: #fff;
  border: 1px solid var(--rg-rand, #e5ded4);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rg-bewertung button:hover { border-color: var(--rg-bronze, #9a6b3f); }
.rg-bewertung button:focus-visible {
  outline: 2px solid var(--rg-bronze, #9a6b3f); outline-offset: 2px;
}

/* Die gewaehlte Seite wird gefuellt, nicht nur umrandet - eine Umrandung allein
   ist auf einem hellen Grund kaum vom Schwebezustand zu unterscheiden. */
.rg-bewertung button[aria-pressed="true"] {
  background: var(--rg-bronze, #9a6b3f);
  border-color: var(--rg-bronze, #9a6b3f);
  color: #fff;
}

.rg-bewertung-dank {
  margin: .9rem 0 0;
  font-size: .9rem;
  color: var(--rg-leise, #6f6961);
}

@media (prefers-reduced-motion: reduce) {
  .rg-bewertung button { transition: none; }
}