/* Generated by tools/build-web-assets.py from tools/buttons.css. Do not edit. */
/* designprofil components: buttons, segmented control, form fields, cookiebit. Needs 05-web-assets/tokens.css */
/* Yellow is an accent, not a surface. The primary call to action is the one place Yellow fills a button. */
.dp-btn {
  --_bg: var(--dp-yellow); --_fg: var(--dp-black); --_bd: var(--dp-yellow); --_ring: var(--dp-black);
  --_ic-bg: var(--dp-black); --_ic-fg: var(--dp-yellow);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 48px; padding: 0 24px;
  border: 1.5px solid var(--_bd); border-radius: var(--dp-radius-pill);
  background: var(--_bg); color: var(--_fg);
  font: 500 1rem/1 var(--dp-font); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.dp-btn .arr { transition: transform .15s; }
.dp-btn:hover { --_bg: var(--dp-black); --_fg: var(--dp-white); --_bd: var(--dp-black); --_ic-bg: var(--dp-yellow); --_ic-fg: var(--dp-black); }
.dp-btn:hover .arr { transform: translateX(4px); }
.dp-btn:focus-visible { outline: 2px solid var(--_ring); outline-offset: 3px; }
.dp-btn:active { --_bg: var(--dp-graphite); --_bd: var(--dp-graphite); }

/* dark: a Black button for actions that are not the main call to action */
.dp-btn--dark { --_bg: var(--dp-black); --_fg: var(--dp-white); --_bd: var(--dp-black); --_ic-bg: var(--dp-yellow); --_ic-fg: var(--dp-black); }
.dp-btn--dark:hover { --_bg: var(--dp-graphite); --_bd: var(--dp-graphite); }

/* secondary: outline */
.dp-btn--outline { --_bg: transparent; --_fg: var(--dp-black); --_bd: var(--dp-black); --_ic-bg: var(--dp-yellow); --_ic-fg: var(--dp-black); }
.dp-btn--outline:hover { --_bg: var(--dp-black); --_fg: var(--dp-white); --_bd: var(--dp-black); }
.dp-btn--outline:active { --_bg: var(--dp-graphite); --_bd: var(--dp-graphite); }

/* soft: light pill, Yellow circle. Quiet, for secondary links to more */
.dp-btn--soft { --_bg: var(--dp-fog); --_fg: var(--dp-black); --_bd: var(--dp-fog); --_ic-bg: var(--dp-yellow); --_ic-fg: var(--dp-black); }
.dp-btn--soft:hover { --_bg: var(--dp-silver); --_fg: var(--dp-black); --_bd: var(--dp-silver); }
.dp-on-fog .dp-btn--soft { --_bg: var(--dp-white); --_bd: var(--dp-white); }
.dp-on-fog .dp-btn--soft:hover { --_bg: var(--dp-fog); --_bd: var(--dp-fog); }

/* sizes: M is the default (48 px) */
.dp-btn--lg { height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.dp-btn--sm { height: 40px; padding: 0 18px; font-size: .9375rem; }

/* arrow icon: a chevron in a circle at the end of the label. Add .dp-btn--ic and <span class="ic">chevron svg</span> */
.dp-btn--ic { padding: 0 8px 0 24px; gap: 16px; }
.dp-btn--ic.dp-btn--lg { padding: 0 8px 0 28px; }
.dp-btn--ic.dp-btn--sm { padding: 0 6px 0 18px; gap: 12px; }
.dp-btn .ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--_ic-bg); color: var(--_ic-fg); }
.dp-btn--lg .ic { width: 40px; height: 40px; }
.dp-btn--sm .ic { width: 28px; height: 28px; }
.dp-btn .ic svg { transition: transform .15s; }
.dp-btn:hover .ic svg { transform: translateX(2px); }

/* put .dp-on-dark on a Black or Graphite section. The main call to action stays Yellow. */
.dp-on-dark .dp-btn { --_ring: var(--dp-white); }
.dp-on-dark .dp-btn:hover { --_bg: var(--dp-white); --_fg: var(--dp-black); --_bd: var(--dp-white); --_ic-bg: var(--dp-yellow); --_ic-fg: var(--dp-black); }
.dp-on-dark .dp-btn--dark { --_bg: var(--dp-white); --_fg: var(--dp-black); --_bd: var(--dp-white); }
.dp-on-dark .dp-btn--dark:hover { --_bg: var(--dp-fog); --_bd: var(--dp-fog); }
.dp-on-dark .dp-btn--outline { --_bg: transparent; --_fg: var(--dp-white); --_bd: var(--dp-white); }
.dp-on-dark .dp-btn--outline:hover { --_bg: var(--dp-white); --_fg: var(--dp-black); --_bd: var(--dp-white); }
.dp-on-dark .dp-btn--soft { --_bg: var(--dp-graphite); --_fg: var(--dp-white); --_bd: var(--dp-graphite); }
.dp-on-dark .dp-btn--soft:hover { --_bg: var(--dp-graphite); --_fg: var(--dp-white); --_bd: var(--dp-white); }

/* disabled and loading */
.dp-btn:disabled, .dp-btn[aria-disabled="true"] { --_bg: var(--dp-silver); --_fg: var(--dp-muted); --_bd: var(--dp-silver); --_ic-bg: var(--dp-muted); --_ic-fg: var(--dp-silver); pointer-events: none; }
.dp-on-dark .dp-btn:disabled { --_bg: var(--dp-graphite); --_fg: var(--dp-silver); --_bd: var(--dp-graphite); --_ic-bg: var(--dp-silver); --_ic-fg: var(--dp-graphite); }
.dp-btn[aria-busy="true"] { pointer-events: none; }
.dp-btn[aria-busy="true"]::before { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dp-spin .7s linear infinite; }
@keyframes dp-spin { to { transform: rotate(360deg); } }

/* tertiary: text link with arrow */
.dp-link { display: inline-flex; align-items: center; gap: .5em; font: 500 1rem/1.2 var(--dp-font); color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em; }
.dp-link .arr { transition: transform .15s; }
.dp-link:hover .arr { transform: translateX(4px); }
.dp-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }

/* segmented control: pick one of several options (filters, tabs).
   Use role="tablist" + aria-selected for tabs, aria-pressed for filters. */
.dp-seg {
  --_track: var(--dp-fog); --_fg: var(--dp-black); --_ring: var(--dp-black);
  --_on-bg: var(--dp-white); --_on-fg: var(--dp-black); --_on-bd: var(--dp-black);
  display: inline-flex; gap: 2px; padding: 4px; max-width: 100%;
  border-radius: var(--dp-radius-pill); background: var(--_track);
  overflow-x: auto; scrollbar-width: none;
}
.dp-seg::-webkit-scrollbar { display: none; }
.dp-seg > button {
  flex: none; height: 40px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--dp-radius-pill);
  background: transparent; color: var(--_fg);
  font: 500 .9375rem/1 var(--dp-font); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.dp-seg > button:hover { background: color-mix(in srgb, var(--_fg) 8%, transparent); }
.dp-seg > button[aria-selected="true"], .dp-seg > button[aria-pressed="true"] { background: var(--_on-bg); color: var(--_on-fg); border-color: var(--_on-bd); }
.dp-seg > button:focus-visible { outline: 2px solid var(--_ring); outline-offset: 2px; }

/* stronger variant: selected is a black pill */
.dp-seg--solid { --_on-bg: var(--dp-black); --_on-fg: var(--dp-white); }
/* on Black or Graphite */
.dp-on-dark .dp-seg { --_track: var(--dp-graphite); --_fg: var(--dp-white); --_ring: var(--dp-white); --_on-bg: var(--dp-white); --_on-fg: var(--dp-black); --_on-bd: var(--dp-white); }

/* form fields. <div class="dp-field" data-state="error|ok"><label>..</label><input><span class="dp-field__hint">..</span></div> */
.dp-field { display: grid; gap: 6px; }
.dp-field label { font: 500 .9375rem/1.3 var(--dp-font); }
.dp-field input, .dp-field textarea, .dp-field select { height: 48px; padding: 0 14px; border: 1.5px solid var(--dp-silver); border-radius: var(--dp-radius-md); background: var(--dp-white); color: var(--dp-black); font: 400 1rem/1.4 var(--dp-font); }
.dp-field textarea { height: auto; min-height: 120px; padding: 12px 14px; }
.dp-field ::placeholder { color: var(--dp-muted); }
.dp-field input:focus-visible, .dp-field textarea:focus-visible, .dp-field select:focus-visible { outline: 2px solid var(--dp-black); outline-offset: 2px; border-color: var(--dp-black); }
.dp-field__hint { display: flex; gap: 6px; font: 400 .875rem/1.4 var(--dp-font); color: var(--dp-muted); }
.dp-field[data-state="error"] :is(input, textarea, select) { border-color: var(--dp-error); }
.dp-field[data-state="error"] .dp-field__hint { color: var(--dp-error); font-weight: 500; }
.dp-field[data-state="ok"] :is(input, textarea, select) { border-color: var(--dp-black); }
.dp-field[data-state="ok"] .dp-field__hint { color: var(--dp-black); font-weight: 500; }

/* cookiebit: a small card, not a full-width banner. Accept and decline are equal size. */
.dp-cookiebit { position: fixed; left: 16px; bottom: 16px; z-index: 50; width: min(340px, calc(100% - 32px)); display: grid; gap: 10px; padding: 16px; background: var(--dp-white); color: var(--dp-black); border: 1px solid var(--dp-black); border-radius: var(--dp-radius-md); font: 400 .875rem/1.45 var(--dp-font); }
.dp-cookiebit h2 { margin: 0; font: 500 1rem/1.3 var(--dp-font); }
.dp-cookiebit p { margin: 0; color: var(--dp-graphite); }
.dp-cookiebit__actions { display: flex; gap: 8px; }
.dp-cookiebit__actions .dp-btn { flex: 1; padding: 0 10px; }
.dp-cookiepill { position: fixed; left: 16px; bottom: 16px; z-index: 50; height: 36px; padding: 0 16px; border: 1px solid var(--dp-black); border-radius: var(--dp-radius-pill); background: var(--dp-white); color: var(--dp-black); font: 500 .875rem/1 var(--dp-font); cursor: pointer; }
@media (max-width: 640px) { .dp-cookiebit { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--dp-radius-md) var(--dp-radius-md) 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .dp-btn, .dp-btn .ic svg, .dp-link .arr, .dp-seg > button { transition: none; }
  .dp-btn[aria-busy="true"]::before { animation-duration: 2s; }
}