/* Google-Bewertungen über dem Footer (Chase Bar 24.10.2026, Aufbau wie Chase Steakhouse und Chase Apartments). Karten aus SauriaCore [sauria_reviews style="premium" layout="grid"] in der dunklen Bar-CI, live gemessen: Fläche #070b0c wie die Seite, Karten #181e1e wie die Öffnungszeiten-Zeile des Footers, Text #f5f5f7, Titel Noto Serif 32 px mit 1.5 px Laufweite wie die Abschnittstitel, Text IBM Plex Sans. Akzente: Theme-Rot #9d294c für Linie, Kartenkante und Knopf-Hover (als Schrift auf Dunkel nur 2,7:1, deshalb nie für Text), Rosé #d06786 für Eyebrow und Links (5,6:1, Farbe der h3-Unterzeilen), Gold #c29d41 für die Sterne (h4-Farbe des Themes). Laufband per CSS mit Pause-Knopf (WCAG 2.2.2), ds-bewertungen.js klont die Karten und setzt --ds-rev-dur (28 px/s). Halt bei Mauszeiger, Tastaturfokus und Knopf, ruhende Reihe bei reduzierter Bewegung. */ .ds-bewertungen { padding: 88px 40px 80px; background: #070b0c; color: #f5f5f7; font-family: "IBM Plex Sans", sans-serif; } .ds-bewertungen__inner { max-width: 1320px; margin: 0 auto; } .ds-bewertungen__eyebrow { margin: 0 0 12px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: #d06786; } .ds-bewertungen__titel { margin: 0; text-align: center; font-family: "Noto Serif", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.25; letter-spacing: 1.5px; text-transform: none; color: #f5f5f7; } .ds-bewertungen__titel::after { content: ""; display: block; width: 120px; height: 2px; margin: 24px auto 44px; background: #9d294c; } /* Eigenen Abschnitts-Rahmen des Premium-Designs neutralisieren, Kopf und Abstände kommen von .ds-bewertungen */ .ds-bewertungen .sauria-reviews-section { padding: 0; margin: 0; background: none; } .ds-bewertungen .sauria-reviews-section__container { max-width: none; margin: 0; padding: 0; } .ds-bewertungen .sauria-reviews-section__header { display: none; } /* SauriaCore-Tokens auf die CI */ .ds-bewertungen .sauria-reviews-section--premium, .ds-bewertungen .sauria-reviews--premium { --sr-accent: #c29d41; --sr-primary: #d06786; --sr-title: #f5f5f7; --sr-text: rgba(245, 245, 247, .86); --sr-muted: rgba(245, 245, 247, .66); --sr-line: rgba(245, 245, 247, .12); --sr-card-bg: #181e1e; --sr-section-bg: transparent; --sr-radius: 0; } .ds-bewertungen .sauria-reviews--premium.sauria-reviews--grid { gap: 24px; align-items: stretch; margin: 0; } .ds-bewertungen .sauria-reviews--premium .sauria-review-card { background: #181e1e; border: 1px solid rgba(245, 245, 247, .08); border-top: 3px solid #9d294c; border-radius: 0; box-shadow: none; padding: 28px 26px 26px; font-family: "IBM Plex Sans", sans-serif; color: rgba(245, 245, 247, .86); } .ds-bewertungen .sauria-reviews--premium .sauria-review-card:hover { transform: none; box-shadow: none; } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__name { font-family: "IBM Plex Sans", sans-serif; font-weight: 600; font-size: 16px; color: #f5f5f7; } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__date { color: rgba(245, 245, 247, .66); } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__text { font-size: 15px; line-height: 1.7; color: rgba(245, 245, 247, .86); } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__avatar, .ds-bewertungen .sauria-reviews--premium .sauria-review-card__avatar-placeholder { background: #9d294c; color: #f5f5f7; } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__readmore, .ds-bewertungen .sauria-reviews--premium .sauria-review-card__expand { color: #d06786 !important; } /* Absätze, gekürzt ein Zeilenfluss (Fallen-Tabelle Wissensnotiz sauriatheme-und-sauriacore, Henneberger 28.09.2026) */ .ds-bewertungen .sauria-reviews--premium .sauria-review-card__text p:not(:last-child) { margin-bottom: 1.7em; margin-bottom: 1lh; } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__text--clamp p { display: inline; margin: 0; } .ds-bewertungen .sauria-reviews--premium .sauria-review-card__text--clamp p + p::before { content: "\A\A"; white-space: pre; } /* Laufband: über 1024 px drei Karten, bis 480 px zwei, darunter eine */ /* relative: absolut positionierte Kinder (screen-reader-text der Karten) sonst nicht abgeschnitten (Befund Chase Apartments 20.10.2026) */ .ds-bewertungen__band { container-type: inline-size; overflow: hidden; position: relative; } .ds-bewertungen__band:not(.is-ready) { overflow-x: auto; } .ds-bewertungen__band .sauria-reviews--premium.sauria-reviews--grid { display: flex; width: max-content; } .ds-bewertungen__band .sauria-reviews--premium .sauria-review-card { flex: 0 0 calc((100cqi - 48px) / 3); width: auto; min-width: 0; } @media (max-width: 1024px) { .ds-bewertungen__band .sauria-reviews--premium .sauria-review-card { flex-basis: calc((100cqi - 24px) / 2); } } @media (max-width: 480px) { .ds-bewertungen__band .sauria-reviews--premium .sauria-review-card { flex-basis: 100cqi; } } .ds-bewertungen__band.is-ready .sauria-reviews { animation: ds-bewertungen-band var(--ds-rev-dur, 90s) linear infinite; } .ds-bewertungen__band:hover .sauria-reviews, .ds-bewertungen__band:focus-within .sauria-reviews, .ds-bewertungen__band.is-paused .sauria-reviews { animation-play-state: paused; } @keyframes ds-bewertungen-band { to { transform: translateX(calc(-50% - 12px)); } } .ds-bewertungen__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-top: 22px; } .ds-bewertungen__hinweis { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(245, 245, 247, .66); } .ds-bewertungen__schalter { padding: 7px 16px; border: 1px solid rgba(245, 245, 247, .6); border-radius: 0; background: transparent; color: #f5f5f7; cursor: pointer; font-family: "IBM Plex Sans", sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; } .ds-bewertungen__schalter:hover, .ds-bewertungen__schalter:focus-visible { background: #f5f5f7; border-color: #f5f5f7; color: #070b0c; } .ds-bewertungen__schalter[aria-pressed="true"]::before { content: "▶ "; } .ds-bewertungen__schalter[aria-pressed="false"]::before { content: "❚❚ "; } .ds-bewertungen__schalter[hidden] { display: none; } .ds-bewertungen__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin: 40px 0 0; font-size: 16px; line-height: 1.4; } .ds-bewertungen__links a { color: #d06786; text-decoration: underline; text-underline-offset: 3px; } .ds-bewertungen__links a:hover, .ds-bewertungen__links a:focus-visible { color: #f5f5f7; } /* Knopf wie „Mehr zu Cocktails“ der Seite: transparent, 1 px heller Rahmen, eckig, 12/24 px */ .ds-bewertungen__links .ds-bewertungen__knopf { display: inline-block; padding: 12px 24px; border: 1px solid #f5f5f7; background: transparent; color: #f5f5f7; text-decoration: none; font-weight: 400; font-size: 16px; line-height: 18px; } .ds-bewertungen__links .ds-bewertungen__knopf:hover, .ds-bewertungen__links .ds-bewertungen__knopf:focus-visible { background: #9d294c; border-color: #9d294c; color: #f5f5f7; } @media (max-width: 768px) { .ds-bewertungen { padding: 56px 16px 52px; } .ds-bewertungen__titel { font-size: 26px; } .ds-bewertungen__titel::after { margin: 20px auto 32px; } .ds-bewertungen__meta { justify-content: center; text-align: center; } } /* Reduzierte Bewegung: ruhende Reihe zum seitlichen Wischen */ @media (prefers-reduced-motion: reduce) { .ds-bewertungen__band, .ds-bewertungen__band.is-ready { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; } .ds-bewertungen__band.is-ready .sauria-reviews { animation: none; } .ds-bewertungen__band .sauria-reviews--premium .sauria-review-card { scroll-snap-align: start; } .ds-bewertungen .sauria-reviews .ds-bewertungen__klon, .ds-bewertungen .ds-bewertungen__schalter { display: none; } }