.coati-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 120000;
  transform: translateY(-160%);
  border: 3px solid #ffffff;
  border-radius: 999px;
  padding: 10px 18px;
  color: #ffffff;
  background: var(--coati-accent, #3f2618);
  font-weight: 800;
  text-decoration: none;
}

.coati-skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--coati-secondary, #6f8f36);
  outline-offset: 2px;
}

.coati-accessibility-button {
  position: fixed;
  left: max(82px, calc(env(safe-area-inset-left) + 82px));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 99990;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 50%;
  padding: 0;
  color: var(--coati-ink, #24170f);
  background: rgba(255, 255, 255, .48);
  box-shadow: 0 12px 34px rgba(36, 23, 15, .18), inset 0 1px 0 rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  cursor: pointer;
  font: 900 1rem/1 var(--coati-font-sans, "Trebuchet MS", "Segoe UI", Arial, sans-serif);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.coati-privacy-button,
.coati-accessibility-button,
body.coati-login-page .coati-privacy-button,
body.coati-login-page .coati-accessibility-button {
  border: 2px solid color-mix(in srgb, var(--coati-accent, #3f2618) 34%, white);
  color: var(--coati-ink, #24170f);
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 12px 34px rgba(36, 23, 15, .18), inset 0 1px 0 rgba(255, 255, 255, .72);
  -webkit-text-fill-color: currentColor;
}

body.coati-login-page .coati-privacy-button,
body.coati-login-page .coati-accessibility-button,
body.coati-login-page .coati-privacy-button:hover,
body.coati-login-page .coati-privacy-button:focus-visible,
body.coati-login-page .coati-accessibility-button:hover,
body.coati-login-page .coati-accessibility-button:focus-visible {
  color: var(--coati-ink, #24170f) !important;
  -webkit-text-fill-color: var(--coati-ink, #24170f) !important;
}

.coati-privacy-button:hover,
.coati-privacy-button:focus-visible,
.coati-accessibility-button:hover,
.coati-accessibility-button:focus-visible,
body.coati-login-page .coati-privacy-button:hover,
body.coati-login-page .coati-privacy-button:focus-visible,
body.coati-login-page .coati-accessibility-button:hover,
body.coati-login-page .coati-accessibility-button:focus-visible {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, .82);
  color: var(--coati-ink, #24170f);
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 15px 38px rgba(36, 23, 15, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-text-fill-color: currentColor;
}

.coati-privacy-button:focus-visible,
.coati-accessibility-button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.coati-accessibility {
  position: fixed;
  inset: 0;
  z-index: 110000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
  font-family: var(--coati-font-sans, "Trebuchet MS", "Segoe UI", Arial, sans-serif);
}

.coati-accessibility[hidden] { display: none !important; }

body.coati-accessibility-open { overflow: hidden; }

.coati-accessibility__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 23, 15, .58);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.coati-accessibility__dialog {
  position: relative;
  width: min(520px, 100%);
  max-height: min(760px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--coati-accent, #3f2618) 36%, white);
  border-radius: 22px;
  padding: clamp(18px, 4vw, 28px);
  color: var(--coati-ink, #24170f);
  background: #fffdf9;
  box-shadow: 0 24px 70px rgba(36, 23, 15, .3);
  text-align: left;
}

.coati-accessibility__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.coati-accessibility__head h2,
.coati-accessibility__head p {
  margin: 0;
  text-align: left;
  text-shadow: none;
}

.coati-accessibility__head h2 {
  color: var(--coati-accent, #3f2618);
  font-size: clamp(1.8rem, 4vw, 2.25rem);
  line-height: 1.12;
}

.coati-accessibility__head p {
  margin-top: 9px;
  color: var(--coati-muted, #6c6258);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.45;
}

.coati-accessibility__close {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background: var(--coati-accent, #3f2618);
  cursor: pointer;
  font: 800 1.8rem/1 var(--coati-font-sans, "Trebuchet MS", "Segoe UI", Arial, sans-serif);
}

.coati-accessibility__options {
  display: grid;
  gap: 12px;
  margin: 24px 0 18px;
}

.coati-accessibility__options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  border: 2px solid color-mix(in srgb, var(--coati-accent, #3f2618) 28%, white);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--coati-ink, #24170f);
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.coati-accessibility__options button[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--coati-accent, #3f2618) 28%, white);
  color: var(--coati-ink, #24170f);
  background: #ffffff;
}

.coati-accessibility__state {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--coati-switch-width, 54px);
  min-width: var(--coati-switch-width, 54px);
  height: var(--coati-switch-height, 32px);
  border: 2px solid var(--coati-switch-border, color-mix(in srgb, var(--coati-muted, #6c6258) 28%, #ffffff));
  border-radius: 999px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  background: var(--coati-switch-off, color-mix(in srgb, #ffffff 82%, var(--coati-muted, #6c6258)));
  box-shadow: inset 0 1px 3px rgba(63, 38, 24, .12);
  font-size: 0;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.coati-accessibility__state::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--coati-switch-inset, 3px);
  box-sizing: border-box;
  width: var(--coati-switch-knob, 22px);
  height: var(--coati-switch-knob, 22px);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 3px 8px rgba(63, 38, 24, .18);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}

.coati-accessibility__options button[aria-checked="true"] .coati-accessibility__state {
  border-color: color-mix(in srgb, var(--coati-secondary, #6f8f36) 72%, #ffffff);
  background: var(--coati-switch-on, linear-gradient(135deg, color-mix(in srgb, var(--coati-secondary, #6f8f36) 86%, #ffffff), color-mix(in srgb, var(--coati-primary, #c78332) 62%, var(--coati-secondary, #6f8f36))));
  box-shadow: inset 0 1px 3px rgba(63, 38, 24, .08), 0 8px 18px rgba(63, 38, 24, .12);
}

.coati-accessibility__options button[aria-checked="true"] .coati-accessibility__state::before {
  transform: translate(var(--coati-switch-travel, 22px), -50%);
}

.coati-accessibility__reset {
  min-height: 46px;
  border: 2px solid var(--coati-accent, #3f2618);
  border-radius: 999px;
  padding: 8px 18px;
  color: var(--coati-accent, #3f2618);
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.coati-accessibility__note {
  margin: 18px 0 0;
  color: var(--coati-muted, #6c6258);
  font-size: .9rem;
  line-height: 1.45;
  text-shadow: none;
}

.coati-accessibility button:focus-visible {
  outline: 3px solid var(--coati-secondary, #6f8f36);
  outline-offset: 3px;
}

/* Login- und App-Seite verwenden bewusst dieselbe Anzeigehilfen-Komponente.
   Diese Regeln halten allgemeinere Login-Button- und Textstile aus dem Dialog heraus. */
body.coati-login-page .coati-accessibility__dialog {
  color: var(--coati-ink, #24170f);
  background: #fffdf9;
  text-align: left;
}

body.coati-login-page .coati-accessibility__head h2 {
  color: var(--coati-accent, #3f2618);
  text-shadow: none;
}

body.coati-login-page .coati-accessibility__head p,
body.coati-login-page .coati-accessibility__note {
  color: var(--coati-muted, #6c6258);
  text-shadow: none;
}

body.coati-login-page .coati-accessibility__close {
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  border: 0;
  padding: 0;
  color: #ffffff;
  background: var(--coati-accent, #3f2618);
  box-shadow: none;
}

body.coati-login-page .coati-accessibility__options button,
body.coati-login-page .coati-accessibility__options button:hover,
body.coati-login-page .coati-accessibility__options button:focus-visible,
body.coati-login-page .coati-accessibility__options button[aria-checked="true"] {
  width: 100%;
  min-height: 54px;
  border: 2px solid color-mix(in srgb, var(--coati-accent, #3f2618) 28%, white);
  border-radius: 14px;
  padding: 10px 14px;
  color: var(--coati-ink, #24170f);
  background: #ffffff;
  box-shadow: none;
  -webkit-text-fill-color: var(--coati-ink, #24170f);
}

body.coati-login-page .coati-accessibility__options button > span:first-child,
body.coati-login-page .coati-accessibility__options button:hover > span:first-child,
body.coati-login-page .coati-accessibility__options button:focus-visible > span:first-child,
body.coati-login-page .coati-accessibility__options button[aria-checked="true"] > span:first-child {
  color: var(--coati-ink, #24170f) !important;
  -webkit-text-fill-color: var(--coati-ink, #24170f) !important;
}

body.coati-login-page .coati-accessibility__reset,
body.coati-login-page .coati-accessibility__reset:hover,
body.coati-login-page .coati-accessibility__reset:focus-visible {
  min-height: 46px;
  border: 2px solid var(--coati-accent, #3f2618);
  padding: 8px 18px;
  color: var(--coati-accent, #3f2618);
  background: #ffffff;
  box-shadow: none;
}

body.coati-login-page .coati-privacy-button__icon {
  background-color: #000000 !important;
}

html.coati-a11y-large-text { font-size: 125%; }

/* Component-specific sizes must not shrink dense content back down. */
html.coati-a11y-large-text body {
  font-size: 1rem;
}

html.coati-a11y-large-text :where(table, .table-wrap table, .coati-table-wrap table) {
  font-size: 1rem !important;
}

html.coati-a11y-large-text :where(table, .table-wrap table, .coati-table-wrap table) :where(th, td) {
  font-size: 1rem !important;
  line-height: 1.45;
}

html.coati-a11y-large-text :where(table, .table-wrap table, .coati-table-wrap table) :where(th, td) :where(a, strong, small, span, label) {
  font-size: inherit !important;
  line-height: inherit;
}

html.coati-a11y-high-contrast {
  --coati-bg-a: #ffffff !important;
  --coati-bg-b: #f3eadc !important;
  --coati-ink: #000000 !important;
  --coati-muted: #000000 !important;
  --coati-primary: #8a4b00 !important;
  --coati-secondary: #365d12 !important;
  --coati-accent: #2b160a !important;
  --coati-border: #000000 !important;
  --coati-field-border: #000000 !important;
  --text: #000000 !important;
  --muted: #000000 !important;
  --color-muted: #000000 !important;
  --line: #000000 !important;
  --surface: #ffffff !important;
  --surface-soft: #e9e9e9 !important;
  --coati-switch-border: #000000 !important;
  --coati-switch-off: #ffffff !important;
  --coati-switch-on: linear-gradient(135deg, #365d12, #8a4b00) !important;
}

html.coati-a11y-high-contrast body,
html.coati-a11y-high-contrast body.coati-login-page {
  color: #000000 !important;
  background: #ffffff !important;
}

html.coati-a11y-high-contrast :where(.panel, .login-card, .main-content, .sidebar, .topbar, .coati-modal__dialog, .coati-consent__dialog, .coati-accessibility__dialog) {
  border-color: #000000 !important;
  color: #000000 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast :where(th, th *) {
  color: #000000 !important;
}

html.coati-a11y-high-contrast :where(
  .meta,
  small,
  .content-heading p,
  .coati-dashboard-widget__intro,
  .coati-dashboard-widget__meal-metrics span,
  .coati-profile__copy span,
  .coati-user-child-card span,
  .coati-accessibility__head p,
  .coati-accessibility__note
) {
  color: #000000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html.coati-a11y-high-contrast body.coati-login-page :where(
  .login-brand h1,
  .login-brand .login-claim,
  .coati-public-legal-brand h1,
  .coati-public-legal-brand .login-claim
) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
}

html.coati-a11y-high-contrast body.coati-login-page .coati-accessibility__options button > span:first-child,
html.coati-a11y-high-contrast body.coati-login-page .coati-consent :where(h2, h3, p, strong, dt, dd) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html.coati-a11y-high-contrast :where(
  .coati-list-card,
  .coati-user-child-card,
  .empty-state,
  .result-card
) {
  border-color: #595959 !important;
  background: #ededed !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast :where(
  input:disabled,
  select:disabled,
  textarea:disabled
) {
  color: #000000 !important;
  background: #e3e3e3 !important;
  opacity: 1 !important;
}

html.coati-a11y-high-contrast .table-wrap table tbody tr:nth-child(even) td,
html.coati-a11y-high-contrast .coati-table tbody tr:nth-child(even) td {
  color: #000000 !important;
  background: #ededed !important;
}

html.coati-a11y-high-contrast .table-wrap table tbody tr:nth-child(odd) td,
html.coati-a11y-high-contrast .coati-table tbody tr:nth-child(odd) td {
  color: #000000 !important;
  background: #ffffff !important;
}

html.coati-a11y-high-contrast :where(
  .ghost-button,
  .secondary-button,
  .coati-table-tools button,
  .coati-icon-button,
  .coati-config-button,
  .coati-accessibility__reset,
  .coati-accessibility__options button,
  .coati-privacy-button,
  .coati-accessibility-button
) {
  border-color: #000000 !important;
}

html.coati-a11y-high-contrast .coati-accessibility__dialog {
  border-width: 2px !important;
}

html.coati-a11y-high-contrast .coati-accessibility__options button {
  border: 2px solid #000000 !important;
  color: #000000 !important;
  background: #ffffff !important;
}

html.coati-a11y-high-contrast .coati-accessibility__state {
  border: 2px solid #000000 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast .coati-accessibility__state::before {
  border: 0;
  background: #000000 !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast :where(
  .admin-form input[type="checkbox"],
  .coati-column-config__visible input[type="checkbox"]
) {
  border-color: #000000 !important;
  background: var(--coati-switch-off) !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast :where(
  .admin-form input[type="checkbox"],
  .coati-column-config__visible input[type="checkbox"]
)::before,
html.coati-a11y-high-contrast .coati-consent__switch span::after {
  background: #000000 !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast :where(
  .admin-form input[type="checkbox"],
  .coati-column-config__visible input[type="checkbox"]
):checked {
  background: var(--coati-switch-on) !important;
}

html.coati-a11y-high-contrast :where(
  .admin-form input[type="checkbox"],
  .coati-column-config__visible input[type="checkbox"]
):checked::before,
html.coati-a11y-high-contrast .coati-consent__switch input:checked + span::after {
  background: #ffffff !important;
}

html.coati-a11y-high-contrast .coati-consent__switch span {
  border-color: #000000 !important;
  background: var(--coati-switch-off) !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast .coati-consent__switch input:checked + span {
  background: var(--coati-switch-on) !important;
}

html.coati-a11y-high-contrast .coati-accessibility__options button[aria-checked="true"] .coati-accessibility__state {
  background: var(--coati-switch-on) !important;
}

html.coati-a11y-high-contrast .coati-accessibility__options button[aria-checked="true"] .coati-accessibility__state::before {
  background: #ffffff !important;
}

html.coati-a11y-high-contrast .coati-footer {
  color: #000000 !important;
  text-shadow: none !important;
}

html.coati-a11y-high-contrast .coati-footer > p,
html.coati-a11y-high-contrast .coati-footer > p :where(a, span),
html.coati-a11y-high-contrast .coati-footer-legal-links,
html.coati-a11y-high-contrast .coati-footer-version {
  color: #000000 !important;
  text-shadow: none !important;
}

html.coati-a11y-high-contrast .coati-footer-brand img {
  filter: brightness(0) !important;
}

html.coati-a11y-high-contrast .table-wrap > table > tbody:first-child > tr:first-child > :first-child,
html.coati-a11y-high-contrast .coati-table-wrap > table > tbody:first-child > tr:first-child > :first-child {
  border-top-left-radius: 15px;
}

html.coati-a11y-high-contrast .table-wrap > table > tbody:first-child > tr:first-child > :last-child,
html.coati-a11y-high-contrast .coati-table-wrap > table > tbody:first-child > tr:first-child > :last-child {
  border-top-right-radius: 15px;
}

html.coati-a11y-high-contrast .table-wrap > table > tbody:last-child > tr:last-child > :first-child,
html.coati-a11y-high-contrast .coati-table-wrap > table > tbody:last-child > tr:last-child > :first-child {
  border-bottom-left-radius: 15px;
}

html.coati-a11y-high-contrast .table-wrap > table > tbody:last-child > tr:last-child > :last-child,
html.coati-a11y-high-contrast .coati-table-wrap > table > tbody:last-child > tr:last-child > :last-child {
  border-bottom-right-radius: 15px;
}

html.coati-a11y-high-contrast :where(a, button):focus-visible {
  outline-color: #000000 !important;
  outline-width: 4px !important;
}

@media (max-width: 720px) {
  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody tr,
  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody tr:nth-child(even),
  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody tr:nth-child(odd) {
    background: #ffffff !important;
  }

  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody tr td,
  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody tr:nth-child(even) td,
  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody tr:nth-child(odd) td {
    color: #000000 !important;
    background: transparent !important;
  }

  html.coati-a11y-high-contrast table[data-table-key="allergens"] tbody td:nth-child(1) code {
    border-color: #000000 !important;
    color: #000000 !important;
    background: #ffffff !important;
  }
}

html.coati-a11y-grayscale { filter: grayscale(1); }

/* Kombination aus Kontrast und Schwarz-Weiß: bewusst harter Zweifarbmodus.
   Schwarz-Weiß allein bleibt dagegen eine reine Graustufendarstellung. */
html.coati-a11y-high-contrast.coati-a11y-grayscale {
  --coati-bg-a: #ffffff !important;
  --coati-bg-b: #ffffff !important;
  --coati-primary: #000000 !important;
  --coati-secondary: #000000 !important;
  --coati-accent: #000000 !important;
  --coati-booked: #000000 !important;
  --brand: #000000 !important;
  --brand-strong: #000000 !important;
  --success: #000000 !important;
  --info: #000000 !important;
  --warning: #000000 !important;
  --danger: #000000 !important;
  --coati-switch-on: #000000 !important;
  filter: grayscale(1) contrast(1.16);
}

html.coati-a11y-high-contrast.coati-a11y-grayscale :where(
  .coati-dashboard-widget__header,
  .coati-settings-widget__handle,
  .nav-button.is-active,
  .role-button.is-active,
  .nav-group-title--button.is-active,
  .nav-group-title--button:hover,
  .nav-group-title--button:focus-visible,
  .action-button,
  .status-pill,
  .badge,
  th
) {
  border-color: #000000 !important;
  color: #ffffff !important;
  background: #000000 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html.coati-a11y-high-contrast.coati-a11y-grayscale :where(
  .coati-dashboard-widget__header *,
  .coati-settings-widget__handle *,
  .nav-button.is-active *,
  .role-button.is-active *,
  .nav-group-title--button.is-active *,
  .status-pill *,
  .badge *,
  th *
) {
  color: #ffffff !important;
}

html.coati-a11y-high-contrast.coati-a11y-grayscale :where(
  .panel,
  .coati-list-card,
  .coati-user-child-card,
  .empty-state,
  .result-card,
  td
) {
  border-color: #000000 !important;
  color: #000000 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .coati-accessibility-button {
    left: max(70px, calc(env(safe-area-inset-left) + 70px));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coati-skip-link,
  .coati-accessibility-button { transition: none !important; }
}