/*
 * ============================================================
 * Rheinische Post – Gastrobot Widget Stylesheet
 * Migriert auf offizielle Retresco Semantic Tokens
 * (rtr-colors-*, rtr-typography-*, rtr-radius-*)
 *
 * Vorgaenger: rp-gastrobot-widget.css (Stand 2026-03-24), basierte auf
 * selbst erfundenen Variablen (--rp-bg-*, --rtr-primary, --rtr-light-primary
 * etc.) und harten !important-Overrides gegen Retresco-interne Klassen.
 * Diese Werte sind NICHT Teil der von Retresco dokumentierten und zwischen
 * Major-Versionen garantiert stabilen Tokens (siehe
 * 20260505_Retresco_White_Label_Widget_CSS_Variables.pdf).
 *
 * Diese Version setzt ausschliesslich die offiziellen --rtr-colors-*
 * Tokens. Eine Mapping-Tabelle (alt -> neu) liegt separat vor.
 *
 * Typography (--rtr-typography-*) und Radius (--rtr-radius-*):
 * Im Vorgaenger-Stylesheet wurden Schriftgroessen/-schnitte und Radien
 * NICHT ueber Retresco-Tokens gesetzt, sondern als feste px-Werte direkt
 * auf RP-eigenen Klassen (z.B. .reference-carousel-item, .carousel-question)
 * definiert. Diese Klassen sind keine von Retresco dokumentierten
 * Token-Konsumenten – hier gibt es daher nichts zu migrieren, die Werte
 * bleiben unveraendert bestehen. Die Basis-Tokens
 * --rtr-typography-fontfamily-base/-brand sind unten als Platzhalter
 * auskommentiert, falls RP hier zukuenftig eine Schriftart vorgeben will.
 *
 * Einbindung NACH dem Widget-Ladeskript:
 *   <link rel="stylesheet" href="rp-gastrobot-widget.css">
 *
 * Dark Mode:
 *   - Automatisch via prefers-color-scheme: dark
 *   - Manuell: Klasse "dark" auf <rtr-qa-widget> oder Vorfahren
 *   - Light erzwingen: Klasse "light" auf <rtr-qa-widget>
 * ============================================================ */


/* ============================================================
   DESIGN TOKENS – offizielle Retresco Semantic Tokens (Light Mode)
   ============================================================ */

rtr-qa-widget {

  /* RP-Default-Fontstack (aus styles.css), bei Bedarf via CSS-Variable ueberschreibbar */
  font-family: var(--rp-site-font-family, Inter, FontFallback, sans-serif);

  /* --- Background --- */
  --rtr-colors-background-primary:              #ffffff;
  --rtr-colors-background-secondary:            #F5F5F6;

  /* --- Surface --- */
  --rtr-colors-surface-primary:                 #B6165C;
  --rtr-colors-surface-hover:                   #A41453;
  --rtr-colors-surface-bg-light:                #FDEDF4;
  --rtr-colors-surface-bg-light-hover-pressed:  #E4D5DC;
  --rtr-colors-surface-neutral-hover-pressed:   #DCDCDD;
  --rtr-colors-surface-disabled:                #DCDCDD;

  /* --- Text --- */
  --rtr-colors-text-default:                    #040A14;
  --rtr-colors-text-default-dark:               #767676;
  --rtr-colors-text-active:                     #B6165C;
  --rtr-colors-text-hover-pressed:              #A41453;
  --rtr-colors-text-placeholder-hint:           #696C71;
  --rtr-colors-text-info:                       #696C71;
  --rtr-colors-text-disabled:                   #696C71;
  --rtr-colors-text-inverted:                   #ffffff;
  /* --rtr-colors-text-warning bewusst nicht ueberschrieben, Retresco-Default */

  /* --- Icon & Indicator --- */
  --rtr-colors-icon-and-indicator-active:        #B6165C;
  --rtr-colors-icon-and-indicator-hover:         #A41453;
  --rtr-colors-icon-and-indicator-disabled:      #696C71;
  --rtr-colors-icon-and-indicator-neutral:       #040A14;
  --rtr-colors-icon-and-indicator-neutral-light: #DCDCDD;
  --rtr-colors-icon-and-indicator-inverted:      #ffffff;
  --rtr-colors-icon-and-indicator-info:          #040A14;

  /* --- Stroke --- */
  --rtr-colors-stroke-default:                  #696C71;
  --rtr-colors-stroke-active:                   #C85085;
  --rtr-colors-stroke-hover:                    #C85085;
  --rtr-colors-stroke-focus:                    #2360C5;
  --rtr-colors-stroke-disabled:                 #DCDCDD;
  --rtr-colors-stroke-neutral-light:            #DCDCDD;

  /* Typography-Tokens auf RP-Seitenfont mappen */
  --rtr-typography-fontfamily-base:             var(--rp-site-font-family, Inter, FontFallback, sans-serif);
  --rtr-typography-fontfamily-brand:            var(--rp-site-font-family, Inter, FontFallback, sans-serif);

  /* --- Nicht-offizielle, lokale Zusatzvariable (kein Retresco-Token) --- */
  --rp-border-input-focused-width:              2px;
}

/* Defensiver Re-Override gegen dynamische App-Defaults
   (Klassen wie .rtr-widget-root.<uuid> / .rtr-dialog.<uuid>).
   War im Vorgaenger-CSS noetig, um Retresco-interne Defaults zu schlagen;
   hier 1:1 mit den offiziellen Tokens fortgefuehrt. Kandidat, um bei
   Gelegenheit gegen ein echtes Widget-Update getestet und ggf. entfernt
   zu werden, falls Retresco die direkte Ueberschreibung inzwischen ohne
   !important-Hack zulaesst. */
rtr-qa-widget .rtr-widget-root[class],
rtr-qa-widget .rtr-dialog[class] {
  --rtr-colors-surface-primary:                 #B6165C !important;
  --rtr-colors-surface-hover:                   #A41453 !important;
  --rtr-colors-surface-bg-light:                #FDEDF4 !important;
  --rtr-colors-surface-bg-light-hover-pressed:  #E4D5DC !important;
  --rtr-colors-icon-and-indicator-active:        #B6165C !important;
  --rtr-colors-icon-and-indicator-hover:         #A41453 !important;
  --rtr-colors-icon-and-indicator-disabled:      #696C71 !important;
  --rtr-colors-stroke-neutral-light:            #DCDCDD !important;
  --rtr-colors-stroke-disabled:                 #DCDCDD !important;
  --rtr-colors-icon-and-indicator-neutral:       #040A14 !important;
}


/* ============================================================
   DARK MODE – automatisch via prefers-color-scheme
   ============================================================ */

@media (prefers-color-scheme: dark) {
  rtr-qa-widget {
    --rtr-colors-background-primary:              #2A2E36;
    --rtr-colors-background-secondary:            #343943;

    --rtr-colors-surface-bg-light:                #975170;
    --rtr-colors-surface-bg-light-hover-pressed:  #6A394F;
    --rtr-colors-surface-neutral-hover-pressed:   #555A63;
    --rtr-colors-surface-disabled:                #555A63;

    --rtr-colors-text-default:                    #ffffff;
    --rtr-colors-text-default-dark:               #C0C1C4;
    --rtr-colors-text-active:                     #FF62A7;
    --rtr-colors-text-hover-pressed:              #FF62A7;
    --rtr-colors-text-placeholder-hint:           #C0C1C4;
    --rtr-colors-text-info:                       #C0C1C4;
    --rtr-colors-text-disabled:                   #C0C1C4;

    --rtr-colors-icon-and-indicator-neutral:       #ffffff;
    --rtr-colors-icon-and-indicator-neutral-light: #555A63;

    --rtr-colors-stroke-default:                  #C0C1C4;
    --rtr-colors-stroke-neutral-light:            #454B56;
    --rtr-colors-stroke-disabled:                 #555A63;
  }

  rtr-qa-widget .rtr-widget-root[class],
  rtr-qa-widget .rtr-dialog[class] {
    --rtr-colors-surface-primary:                 #B6165C !important;
    --rtr-colors-surface-hover:                   #A41453 !important;
    --rtr-colors-surface-bg-light:                #975170 !important;
    --rtr-colors-surface-bg-light-hover-pressed:  #6A394F !important;
    --rtr-colors-icon-and-indicator-active:        #B6165C !important;
    --rtr-colors-icon-and-indicator-hover:         #A41453 !important;
    --rtr-colors-icon-and-indicator-disabled:      #C0C1C4 !important;
    --rtr-colors-stroke-neutral-light:            #454B56 !important;
    --rtr-colors-stroke-disabled:                 #555A63 !important;
    --rtr-colors-icon-and-indicator-neutral:       #ffffff !important;
  }
}

/* DARK – manuell erzwingbar */
.dark rtr-qa-widget,
rtr-qa-widget.dark {
  --rtr-colors-background-primary:              #2A2E36;
  --rtr-colors-background-secondary:            #343943;

  --rtr-colors-surface-bg-light:                #975170;
  --rtr-colors-surface-bg-light-hover-pressed:  #6A394F;
  --rtr-colors-surface-neutral-hover-pressed:   #555A63;
  --rtr-colors-surface-disabled:                #555A63;

  --rtr-colors-text-default:                    #ffffff;
  --rtr-colors-text-default-dark:               #C0C1C4;
  --rtr-colors-text-active:                     #FF62A7;
  --rtr-colors-text-hover-pressed:              #FF62A7;
  --rtr-colors-text-placeholder-hint:           #C0C1C4;
  --rtr-colors-text-info:                       #C0C1C4;
  --rtr-colors-text-disabled:                   #C0C1C4;

  --rtr-colors-icon-and-indicator-neutral:       #ffffff;
  --rtr-colors-icon-and-indicator-neutral-light: #555A63;

  --rtr-colors-stroke-default:                  #C0C1C4;
  --rtr-colors-stroke-neutral-light:            #454B56;
  --rtr-colors-stroke-disabled:                 #555A63;
}

.dark rtr-qa-widget .rtr-widget-root[class],
.dark rtr-qa-widget .rtr-dialog[class],
rtr-qa-widget.dark .rtr-widget-root[class],
rtr-qa-widget.dark .rtr-dialog[class] {
  --rtr-colors-surface-primary:                 #B6165C !important;
  --rtr-colors-surface-hover:                   #A41453 !important;
  --rtr-colors-surface-bg-light:                #975170 !important;
  --rtr-colors-surface-bg-light-hover-pressed:  #6A394F !important;
  --rtr-colors-icon-and-indicator-active:        #B6165C !important;
  --rtr-colors-icon-and-indicator-hover:         #A41453 !important;
  --rtr-colors-icon-and-indicator-disabled:      #C0C1C4 !important;
  --rtr-colors-stroke-neutral-light:            #454B56 !important;
  --rtr-colors-stroke-disabled:                 #555A63 !important;
  --rtr-colors-icon-and-indicator-neutral:       #ffffff !important;
}

/* LIGHT – manuell erzwingbar */
.light rtr-qa-widget,
rtr-qa-widget.light {
  --rtr-colors-background-primary:              #ffffff;
  --rtr-colors-background-secondary:            #F5F5F6;
  --rtr-colors-surface-bg-light:                #FDEDF4;
  --rtr-colors-surface-bg-light-hover-pressed:  #E4D5DC;
  --rtr-colors-surface-neutral-hover-pressed:   #DCDCDD;
  --rtr-colors-surface-disabled:                #DCDCDD;
  --rtr-colors-text-default:                    #040A14;
  --rtr-colors-text-default-dark:               #767676;
  --rtr-colors-text-active:                     #B6165C;
  --rtr-colors-text-hover-pressed:              #A41453;
  --rtr-colors-text-placeholder-hint:           #696C71;
  --rtr-colors-text-info:                       #696C71;
  --rtr-colors-text-disabled:                   #696C71;
  --rtr-colors-icon-and-indicator-neutral:       #040A14;
  --rtr-colors-icon-and-indicator-neutral-light: #DCDCDD;
  --rtr-colors-stroke-default:                  #696C71;
  --rtr-colors-stroke-neutral-light:            #DCDCDD;
  --rtr-colors-stroke-disabled:                 #DCDCDD;
}

.light rtr-qa-widget .rtr-widget-root[class],
.light rtr-qa-widget .rtr-dialog[class],
rtr-qa-widget.light .rtr-widget-root[class],
rtr-qa-widget.light .rtr-dialog[class] {
  --rtr-colors-surface-primary:                 #B6165C !important;
  --rtr-colors-surface-hover:                   #A41453 !important;
  --rtr-colors-surface-bg-light:                #FDEDF4 !important;
  --rtr-colors-surface-bg-light-hover-pressed:  #E4D5DC !important;
  --rtr-colors-icon-and-indicator-active:        #B6165C !important;
  --rtr-colors-icon-and-indicator-hover:         #A41453 !important;
  --rtr-colors-icon-and-indicator-disabled:      #696C71 !important;
  --rtr-colors-stroke-neutral-light:            #DCDCDD !important;
  --rtr-colors-stroke-disabled:                 #DCDCDD !important;
  --rtr-colors-icon-and-indicator-neutral:       #040A14 !important;
}


/* ============================================================
   KOMPONENTEN-STYLES
   (Struktur unveraendert zum Vorgaenger, nur var()-Referenzen auf die
   offiziellen Tokens umgestellt. Feste px-Werte fuer Groesse/Radius/
   Abstand unangetastet, da nicht Teil des Token-Systems.)
   ============================================================ */


/* --- 1. Widget-Container --- */

rtr-qa-widget {
  background: var(--rtr-colors-background-primary);
  display: block;
  width: 100% !important;
  max-width: none !important;
}

rtr-qa-widget .rtr-widget-root {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--rtr-colors-background-primary) !important;
  border: 1px solid var(--rtr-colors-stroke-neutral-light) !important;
  border-radius: 0;
  padding: 16px;
  box-sizing: border-box;
}

rtr-qa-widget .rtr-widget-root p {
  color: var(--rtr-colors-text-default) !important;
  margin: 0;
  padding: 0;
}

rtr-qa-widget .rtr-widget-root p.powered-by,
rtr-qa-widget .rtr-widget-root .powered-by {
  color: var(--rtr-colors-text-active) !important;
}

rtr-qa-widget .rtr-widget-root .sources-label {
  color: var(--rtr-colors-text-default-dark) !important;
}

rtr-qa-widget .rtr-widget-root p.sources-header .sources-label {
  color: var(--rtr-colors-text-default-dark) !important;
}


/* --- 2. CDK Overlay --- */

.cdk-overlay-container:has(.rtr-dialog),
.cdk-overlay-container:has([class*="rtr-dialog"]) {
  z-index: 2147483647 !important;
}


/* --- 3. Status-Header --- */

rtr-qa-widget app-status-header .text-container .text-wrapper {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rtr-colors-text-default);
}

rtr-qa-widget app-status-header .text-wrapper.lighter {
  font-weight: 700;
  color: var(--rtr-colors-text-default);
}

rtr-qa-widget app-status-header p.powered-by,
rtr-qa-widget app-status-header .powered-by {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rtr-colors-text-active);
  margin: 0;
}

rtr-qa-widget app-status-header p.powered-by a.retresco-link,
rtr-qa-widget app-status-header .powered-by a {
  color: var(--rtr-colors-text-active) !important;
  text-decoration: underline !important;
}

rtr-qa-widget app-status-header p.powered-by a.retresco-link:hover,
rtr-qa-widget app-status-header .powered-by a:hover {
  color: var(--rtr-colors-text-hover-pressed) !important;
}

rtr-qa-widget app-status-header .info-icon path,
rtr-qa-widget app-status-header .info-icon svg path {
  fill: var(--rtr-colors-icon-and-indicator-info) !important;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] {
    color: var(--rtr-colors-text-default) !important;
  }

  rtr-qa-widget app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] path,
  rtr-qa-widget app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] svg path {
    fill: var(--rtr-colors-text-default) !important;
  }
}

.dark rtr-qa-widget app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577],
rtr-qa-widget.dark app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] {
  color: var(--rtr-colors-text-default) !important;
}

.dark rtr-qa-widget app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] path,
.dark rtr-qa-widget app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] svg path,
rtr-qa-widget.dark app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] path,
rtr-qa-widget.dark app-status-header p.text-container[_ngcontent-ng-c737584577] .info-icon[_ngcontent-ng-c737584577] svg path {
  fill: var(--rtr-colors-text-default) !important;
}


/* --- 4. User-Frage --- */

rtr-qa-widget app-user-question .full-width {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

rtr-qa-widget app-user-question .user-question {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rtr-colors-text-default);
  flex: 1;
}

rtr-qa-widget app-user-question .mat-icon path,
rtr-qa-widget app-user-question .mat-icon svg path {
  fill: var(--rtr-colors-icon-and-indicator-neutral) !important;
}


/* --- 5. KI-Antwort --- */

/* Antworttext: bewusst auf die reale Retresco-Struktur .markdown-text begrenzt. */
rtr-qa-widget .rtr-widget-root app-answer app-text .markdown-text,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--rtr-typography-fontfamily-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rtr-colors-text-default) !important;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Absatzabstände: kein zusätzlicher Abstand vor dem ersten Absatz. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > p,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h1,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h2,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h3,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h4,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h5,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h6,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > ul,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > ol {
  color: var(--rtr-colors-text-default) !important;
  margin-top: 0;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text > p {
  margin-bottom: 16px !important;
  padding: 0;
  line-height: 1.5 !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text > p:last-child {
  margin-bottom: 0 !important;
}

/* Listen, falls die Antwort statt <p>-Absätzen Listen ausgibt. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text ul,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text ol {
  margin: 0 0 16px !important;
  padding-left: 24px !important;
  color: var(--rtr-colors-text-default) !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ul {
  list-style-type: disc;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text ol {
  list-style-type: decimal;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text li {
  margin: 0 0 6px !important;
  padding: 0;
  color: var(--rtr-colors-text-default) !important;
  line-height: 1.5 !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text li:last-child {
  margin-bottom: 0 !important;
}

/* Überschriften der einzelnen Restaurant-Empfehlungen. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h1,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h2,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h3,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h4,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h5,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text h6 {
  color: var(--rtr-colors-text-default) !important;
  font-family: var(--rtr-typography-fontfamily-base);
  font-weight: 700;
  line-height: 1.25;
  margin: 28px 0 8px !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text h3 {
  font-size: 18px;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h1:first-child,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h2:first-child,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h3:first-child,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text > h4:first-child {
  margin-top: 0 !important;
}

/* Hervorhebungen: gleiche Grundschrift, nur halbfett statt vergrößert. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text strong,
rtr-qa-widget .rtr-widget-root app-answer .markdown-text b {
  color: var(--rtr-colors-text-default) !important;
  font-weight: 700;
  font-size: inherit;
}

/* Links in der Antwort: RP-Magenta, sichtbar und mit Tastaturfokus. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text a {
  color: var(--rtr-colors-text-active) !important;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text a:hover {
  color: var(--rtr-colors-text-hover-pressed) !important;
}

rtr-qa-widget .rtr-widget-root app-answer .markdown-text a:focus-visible {
  outline: 2px solid var(--rtr-colors-stroke-focus);
  outline-offset: 2px;
}

/* Horizontale Trennlinie zwischen den Empfehlungen. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text hr {
  height: 1px;
  margin: 24px 0 !important;
  border: 0;
  background: var(--rtr-colors-stroke-neutral-light);
}

/* Adress-, Öffnungszeiten- und Telefonzeilen bleiben kompakt lesbar. */
rtr-qa-widget .rtr-widget-root app-answer .markdown-text p br {
  line-height: 1.5;
}

/* Mobile: kleinere Überschriften und weniger Außenabstand. */
@media (max-width: 600px) {
  rtr-qa-widget .rtr-widget-root app-answer .markdown-text {
    font-size: 16px;
  }

  rtr-qa-widget .rtr-widget-root app-answer .markdown-text h3 {
    font-size: 17px;
    margin-top: 24px !important;
  }

  rtr-qa-widget .rtr-widget-root app-answer .markdown-text hr {
    margin: 20px 0 !important;
  }
}


/* --- 6. Quellen-Header --- */

rtr-qa-widget app-sources p.sources-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

rtr-qa-widget app-sources .sources-label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rtr-colors-text-default-dark);
}

rtr-qa-widget app-sources .pin-icon path,
rtr-qa-widget app-sources .pin-icon svg path {
  fill: var(--rtr-colors-text-default-dark) !important;
}


/* --- 7. Quellen-Teaser-Karten --- */

rtr-qa-widget app-sources a.reference-carousel-item,
rtr-qa-widget app-sources .reference-carousel-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background-color: var(--rtr-colors-surface-bg-light);
  border-radius: 12px;
  padding: 16px 16px 16px 8px;
  text-decoration: none;
  transition: background-color 0.15s ease;
  width: 100%;
}

rtr-qa-widget app-sources a.reference-carousel-item:hover,
rtr-qa-widget app-sources .reference-carousel-item:hover {
  background-color: var(--rtr-colors-surface-bg-light-hover-pressed);
}

/* Supertitle: Light Mode = Primaerfarbe, Dark Mode = #ffffff (Figma-Spec) */
rtr-qa-widget app-sources .reference-carousel-item .supertitle {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--rtr-colors-text-active);
  margin: 0 0 4px;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-sources .reference-carousel-item .supertitle {
    color: #ffffff !important;
  }
}

.dark rtr-qa-widget app-sources .reference-carousel-item .supertitle,
rtr-qa-widget.dark app-sources .reference-carousel-item .supertitle {
  color: #ffffff !important;
}

/* Title: Light Mode = #040A14, Dark Mode = #ffffff (Figma-Spec) */
rtr-qa-widget app-sources .reference-carousel-item .title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--rtr-colors-text-default);
  margin: 0;
}

rtr-qa-widget app-sources .reference-carousel-item .source-image,
rtr-qa-widget app-sources .source-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

rtr-qa-widget app-sources .reference-text-container {
  flex: 1;
  min-width: 0;
}


/* --- 8. Intro-Fragen & Follow-Up-Fragen --- */

rtr-qa-widget app-intro-questions .carousel-question,
rtr-qa-widget app-follow-ups-questions .carousel-question {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 8px;
  gap: 8px;
  background-color: var(--rtr-colors-background-secondary) !important;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--rtr-colors-text-default) !important;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background-color 0.15s ease;
}

rtr-qa-widget app-intro-questions .carousel-question:hover,
rtr-qa-widget app-follow-ups-questions .carousel-question:hover {
  background-color: var(--rtr-colors-surface-neutral-hover-pressed) !important;
}

/* Send-Icon in Fragekarten – !important gegen inline fill="#004FCC" */
/* Light: Primaerfarbe, Dark: #ffffff (Icon ist auf dunklem BG) */
rtr-qa-widget app-intro-questions .question-send-icon path,
rtr-qa-widget app-intro-questions .question-send-icon svg path,
rtr-qa-widget app-follow-ups-questions .question-send-icon path,
rtr-qa-widget app-follow-ups-questions .question-send-icon svg path {
  fill: var(--rtr-colors-icon-and-indicator-active) !important;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-intro-questions .question-send-icon path,
  rtr-qa-widget app-intro-questions .question-send-icon svg path,
  rtr-qa-widget app-follow-ups-questions .question-send-icon path,
  rtr-qa-widget app-follow-ups-questions .question-send-icon svg path {
    fill: #ffffff !important;
  }
}

.dark rtr-qa-widget app-intro-questions .question-send-icon path,
.dark rtr-qa-widget app-intro-questions .question-send-icon svg path,
.dark rtr-qa-widget app-follow-ups-questions .question-send-icon path,
.dark rtr-qa-widget app-follow-ups-questions .question-send-icon svg path,
rtr-qa-widget.dark app-intro-questions .question-send-icon path,
rtr-qa-widget.dark app-intro-questions .question-send-icon svg path,
rtr-qa-widget.dark app-follow-ups-questions .question-send-icon path,
rtr-qa-widget.dark app-follow-ups-questions .question-send-icon svg path {
  fill: #ffffff !important;
}

/* Fragetext – !important gegen .rtr-widget-root p color */
rtr-qa-widget app-intro-questions .question-item-text,
rtr-qa-widget app-follow-ups-questions .question-item-text,
rtr-qa-widget .rtr-widget-root app-intro-questions .question-item-text,
rtr-qa-widget .rtr-widget-root app-follow-ups-questions .question-item-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--rtr-colors-text-default) !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 9. Carousel Dots & Chevrons --- */

rtr-qa-widget .carousel-dot .dot {
  background-color: var(--rtr-colors-icon-and-indicator-neutral-light);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

rtr-qa-widget .carousel-dot.current .dot {
  background-color: var(--rtr-colors-icon-and-indicator-active);
}

rtr-qa-widget .carousel-dot:hover .dot {
  background-color: var(--rtr-colors-icon-and-indicator-hover);
}

rtr-qa-widget .carousel-track-button .widget-icon-button {
  border-color: var(--rtr-colors-icon-and-indicator-active) !important;
  transition: border-color 0.15s ease;
}

rtr-qa-widget .carousel-track-button .widget-icon-button:hover {
  border-color: var(--rtr-colors-icon-and-indicator-hover) !important;
}

rtr-qa-widget .carousel-track-button .rtr-icon svg path,
rtr-qa-widget .carousel-track-button .rtr-icon path {
  fill: var(--rtr-colors-icon-and-indicator-active) !important;
}

rtr-qa-widget .carousel-track-button .widget-icon-button:hover .rtr-icon svg path,
rtr-qa-widget .carousel-track-button .widget-icon-button:hover .rtr-icon path {
  fill: var(--rtr-colors-icon-and-indicator-hover) !important;
}

rtr-qa-widget .carousel-track-button.disabled .widget-icon-button {
  border-color: var(--rtr-colors-icon-and-indicator-neutral-light) !important;
}

rtr-qa-widget .carousel-track-button.disabled .rtr-icon svg path,
rtr-qa-widget .carousel-track-button.disabled .rtr-icon path {
  fill: var(--rtr-colors-icon-and-indicator-neutral-light) !important;
}


/* --- 10. Eingabefeld --- */

rtr-qa-widget app-chat-input .form-label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rtr-colors-text-default);
}

rtr-qa-widget app-chat-input .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading,
rtr-qa-widget app-chat-input .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch,
rtr-qa-widget app-chat-input .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--rtr-colors-stroke-default);
  border-width: 1px;
}

rtr-qa-widget app-chat-input .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__leading,
rtr-qa-widget app-chat-input .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__notch,
rtr-qa-widget app-chat-input .mdc-text-field--outlined.mdc-text-field--focused .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--rtr-colors-stroke-active);
  border-width: var(--rp-border-input-focused-width, 2px);
}

rtr-qa-widget app-chat-input .mdc-text-field--outlined {
  background-color: var(--rtr-colors-background-primary);
  border-radius: 8px;
}

rtr-qa-widget app-chat-input textarea.chat-input::placeholder {
  color: var(--rtr-colors-text-placeholder-hint);
  font-size: 16px;
  font-weight: 400;
}

/* Dark Mode – Eingabetext bleibt gut lesbar, auch im fokussierten State.
   Angular Material setzt .mdc-text-field--focused eigene Textfarbe. */
rtr-qa-widget app-chat-input textarea.chat-input {
  color: var(--rtr-colors-text-default) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 18px !important;
  height: inherit !important;
  max-height: 128px !important;
  caret-color: var(--rtr-colors-text-default) !important;
}

rtr-qa-widget app-chat-input .mdc-text-field--focused textarea.chat-input,
rtr-qa-widget app-chat-input .mdc-text-field--focused .mdc-text-field__input {
  color: var(--rtr-colors-text-default) !important;
  caret-color: var(--rtr-colors-text-default) !important;
}


/* --- 11. Send-Button --- */

rtr-qa-widget app-chat-input .send-icon.disabled .widget-icon-button {
  border-color: var(--rtr-colors-icon-and-indicator-disabled) !important;
}

rtr-qa-widget app-chat-input .send-icon.disabled .widget-icon-button svg path,
rtr-qa-widget app-chat-input .send-icon.disabled .widget-icon-button path {
  fill: var(--rtr-colors-icon-and-indicator-disabled) !important;
}

rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button {
  border-color: var(--rtr-colors-icon-and-indicator-active) !important;
  background-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Dark Mode – Send-Button Active-State: gefuellter Button, Icon invertiert. */
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button path {
  fill: var(--rtr-colors-icon-and-indicator-active) !important;
}

rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:active {
  background-color: var(--rtr-colors-surface-primary) !important;
  border-color: var(--rtr-colors-surface-primary) !important;
}

rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover svg path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:active svg path,
rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:active path {
  fill: var(--rtr-colors-icon-and-indicator-inverted) !important;
}

@media (prefers-color-scheme: dark) {
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button {
    background-color: var(--rtr-colors-surface-primary) !important;
  }
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button path {
    fill: var(--rtr-colors-icon-and-indicator-inverted) !important;
  }
  rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover {
    background-color: var(--rtr-colors-surface-hover) !important;
    border-color: var(--rtr-colors-surface-hover) !important;
  }
}

.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button {
  background-color: var(--rtr-colors-surface-primary) !important;
}

.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button path,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button svg path,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button path {
  fill: var(--rtr-colors-icon-and-indicator-inverted) !important;
}

.dark rtr-qa-widget app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover,
rtr-qa-widget.dark app-chat-input .send-icon:not(.disabled) .widget-icon-button:hover {
  background-color: var(--rtr-colors-surface-hover) !important;
  border-color: var(--rtr-colors-surface-hover) !important;
}


/* --- 12. "Neuer Chat"-Button --- */

rtr-qa-widget .rtr-button.tertiary,
rtr-qa-widget rtr-button .rtr-button {
  color: var(--rtr-colors-text-active);
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  border: none;
}

rtr-qa-widget .rtr-button.tertiary .rtr-button-text,
rtr-qa-widget rtr-button .rtr-button-text {
  color: var(--rtr-colors-text-active);
}

rtr-qa-widget .rtr-button.tertiary .rtr-button-icon path,
rtr-qa-widget rtr-button .rtr-button-icon path,
rtr-qa-widget .rtr-button.tertiary .rtr-button-icon svg path,
rtr-qa-widget rtr-button .rtr-button-icon svg path {
  fill: var(--rtr-colors-icon-and-indicator-active) !important;
}

rtr-qa-widget .rtr-button.tertiary:hover .rtr-button-text,
rtr-qa-widget rtr-button .rtr-button:hover .rtr-button-text {
  color: var(--rtr-colors-text-hover-pressed);
}

rtr-qa-widget .rtr-button.tertiary:hover .rtr-button-icon path,
rtr-qa-widget rtr-button .rtr-button:hover .rtr-button-icon path,
rtr-qa-widget .rtr-button.tertiary:hover .rtr-button-icon svg path,
rtr-qa-widget rtr-button .rtr-button:hover .rtr-button-icon svg path {
  fill: var(--rtr-colors-icon-and-indicator-hover) !important;
}


/* --- 13. AI-Disclaimer --- */

rtr-qa-widget [class*="disclaimer"] {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--rtr-colors-text-info);
}


/* --- 14. Info-Overlay --- */

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-container,
.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-surface,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog-surface"],
.cdk-overlay-container:has(.rtr-dialog) .dialog-wrapper,
.cdk-overlay-container:has(.rtr-dialog) .scrollable-content,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-container,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-surface,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog-surface"],
.cdk-overlay-container:has([class*="rtr-dialog"]) .dialog-wrapper,
.cdk-overlay-container:has([class*="rtr-dialog"]) .scrollable-content {
  background: var(--rtr-colors-background-primary, #ffffff) !important;
  border-radius: 8px;
  overflow-y: auto !important;
  max-height: 90vh !important;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content {
  overflow-y: auto !important;
  max-height: 60vh !important;
}

.cdk-overlay-container:has(.rtr-dialog) .cdk-overlay-backdrop,
.cdk-overlay-container:has([class*="rtr-dialog"]) .cdk-overlay-backdrop {
  background: rgba(4, 10, 20, 0.48) !important;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-title,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h2,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-title,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--rtr-colors-text-default, #040A14);
  margin-bottom: 16px;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] p,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] p {
  font-size: 16px;
  font-weight: 400;
  color: var(--rtr-colors-text-default, #040A14);
  line-height: 1.25;
}

.cdk-overlay-container:has(.rtr-dialog) .description,
.cdk-overlay-container:has(.rtr-dialog) .description a,
.cdk-overlay-container:has(.rtr-dialog) .description small,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description a,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description small {
  color: var(--rtr-colors-text-default, #040A14) !important;
}

.cdk-overlay-container:has(.rtr-dialog) .description a,
.cdk-overlay-container:has([class*="rtr-dialog"]) .description a {
  text-decoration: underline;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-actions button,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] button[class*="primary"],
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-actions button,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] button[class*="primary"] {
  background-color: var(--rtr-colors-surface-primary) !important;
  color: var(--rtr-colors-icon-and-indicator-inverted, #ffffff) !important;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-actions button:hover,
.cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] button[class*="primary"]:hover,
.cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-actions button:hover,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] button[class*="primary"]:hover {
  background-color: var(--rtr-colors-surface-hover) !important;
}

@media (prefers-color-scheme: dark) {
  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-container,
  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-surface,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog-surface"],
  .cdk-overlay-container:has(.rtr-dialog) .dialog-wrapper,
  .cdk-overlay-container:has(.rtr-dialog) .scrollable-content,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-container,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-surface,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog-surface"],
  .cdk-overlay-container:has([class*="rtr-dialog"]) .dialog-wrapper,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .scrollable-content {
    background: var(--rtr-colors-background-primary, #373B42) !important;
  }

  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-title,
  .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h1,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h2,
  .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] p,
  .cdk-overlay-container:has(.rtr-dialog) .description,
  .cdk-overlay-container:has(.rtr-dialog) .description a,
  .cdk-overlay-container:has(.rtr-dialog) .description small,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-title,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h1,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h2,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] p,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .description,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .description a,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .description small {
    color: var(--rtr-colors-text-default, #ffffff) !important;
  }

  .cdk-overlay-container:has(.rtr-dialog) .cdk-overlay-backdrop,
  .cdk-overlay-container:has([class*="rtr-dialog"]) .cdk-overlay-backdrop {
    background: rgba(0, 0, 0, 0.62) !important;
  }
}

.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-container,
.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-surface,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog-surface"],
.dark .cdk-overlay-container:has(.rtr-dialog) .dialog-wrapper,
.dark .cdk-overlay-container:has(.rtr-dialog) .scrollable-content,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-container,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-surface,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog-surface"],
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .dialog-wrapper,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .scrollable-content {
  background: var(--rtr-colors-background-primary, #373B42) !important;
}

.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-title,
.dark .cdk-overlay-container:has(.rtr-dialog) .mat-mdc-dialog-content,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h1,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] h2,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="dialog"] p,
.dark .cdk-overlay-container:has(.rtr-dialog) .description,
.dark .cdk-overlay-container:has(.rtr-dialog) .description a,
.dark .cdk-overlay-container:has(.rtr-dialog) .description small,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-title,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .mat-mdc-dialog-content,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h1,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] h2,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="dialog"] p,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .description,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .description a,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) .description small {
  color: var(--rtr-colors-text-default, #ffffff) !important;
}

rtr-qa-widget [class*="close"] svg path,
rtr-qa-widget [class*="close"] path,
.cdk-overlay-container:has(.rtr-dialog) [class*="close"] svg path,
.cdk-overlay-container:has(.rtr-dialog) [class*="close"] path,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] svg path,
.cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] path {
  fill: var(--rtr-colors-icon-and-indicator-neutral, #040A14) !important;
}

@media (prefers-color-scheme: dark) {
  .cdk-overlay-container:has(.rtr-dialog) [class*="close"] svg path,
  .cdk-overlay-container:has(.rtr-dialog) [class*="close"] path,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] svg path,
  .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] path {
    fill: var(--rtr-colors-icon-and-indicator-neutral, #ffffff) !important;
  }
}

.dark .cdk-overlay-container:has(.rtr-dialog) [class*="close"] svg path,
.dark .cdk-overlay-container:has(.rtr-dialog) [class*="close"] path,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] svg path,
.dark .cdk-overlay-container:has([class*="rtr-dialog"]) [class*="close"] path {
  fill: var(--rtr-colors-icon-and-indicator-neutral, #ffffff) !important;
}


/* --- 15. Feedback-Buttons --- */

rtr-qa-widget [class*="thumb"] button svg path,
rtr-qa-widget [class*="thumb"] button path,
rtr-qa-widget [class*="feedback"] button svg path,
rtr-qa-widget [class*="feedback"] button path {
  fill: var(--rtr-colors-icon-and-indicator-active) !important;
}

rtr-qa-widget [class*="thumb"] button:hover svg path,
rtr-qa-widget [class*="thumb"] button:hover path,
rtr-qa-widget [class*="feedback"] button:hover svg path,
rtr-qa-widget [class*="feedback"] button:hover path {
  fill: var(--rtr-colors-icon-and-indicator-hover) !important;
}


/* --- 16. Scrollbar ---
   Hinweis: Der Scrollbar-Thumb ist reines Host-CSS auf normalen Browser-
   Pseudo-Elementen (::-webkit-scrollbar-*), kein Retresco-Token-Override.
   Die offizielle Token-Mapping-Doku ordnet den Scrollbar-Track dem eher
   dezenten Token "surface/bg-light-hover-pressed" zu; RP nutzt hier
   bewusst die kraeftige Markenfarbe (surface/primary) als Gestaltungs-
   entscheidung – unabhaengig vom Token-Umbau, daher hier keine Aenderung
   in der Optik. */

rtr-qa-widget ::-webkit-scrollbar {
  width: 4px;
}

rtr-qa-widget ::-webkit-scrollbar-thumb {
  background-color: var(--rtr-colors-surface-primary);
  border-radius: 4px;
}

rtr-qa-widget ::-webkit-scrollbar-track {
  background: transparent;
}


/* --- 17. Fokus-Ring --- */

rtr-qa-widget *:focus-visible {
  outline: 2px solid var(--rtr-colors-stroke-focus);
  outline-offset: 2px;
}