:host { position: fixed; bottom: var(--fds-spacing-200); left: 50%; transform: translateX(-50%); z-index: var(--fds-z-index-1000, 1000); container-type: inline-size; display: block; pointer-events: none; width: calc(100% - var(--fds-spacing-500)); max-width: 760px; }
.cookie-notice {
  position: relative; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(var(--fds-spacing-100)); color: var(--fds-on-surface); padding: var(--fds-spacing-200); display: flex; align-items: center; justify-content: flex-start; gap: var(--fds-spacing-250); line-height: 1.4; border-radius: var(--fds-border-radius-container-default); box-shadow: var(--fds-elevation-on-alternate-surface-02); pointer-events: auto;
  & .cookie-notice__text {
  flex: 1 1 auto; min-width: 0px; max-width: none; text-align: left; word-break: break-word;
  & a { color: var(--fds-on-surface); }
}
  & .cookie-notice__button { background-color: var(--fds-btn-default); color: var(--fds-on-btn-default); padding: var(--fds-spacing-100); border: none; border-radius: var(--fds-border-radius-btn-default); cursor: pointer; white-space: nowrap; font: var(--fds-paragraphs-regular-bold); min-width: 140px; outline: none; box-shadow: none; flex: 0 0 auto; }
  & .cookie-notice__close { position: absolute; top: var(--fds-spacing-100); right: var(--fds-spacing-100); background: none; border: none; color: inherit; cursor: pointer; line-height: 1; padding: var(--fds-spacing-050); display: flex; align-items: center; justify-content: center; }
}
@container (max-width: 560px) {
  :host { width: calc(100% - var(--fds-spacing-100)); min-width: auto; max-width: none; }
  .cookie-notice { flex-direction: column; text-align: center; gap: var(--fds-spacing-200); padding: var(--fds-spacing-200); }
}