/* =====================================================
   accessible-datepicker.css
   Barrierefreier DateTime-Picker
   Voraussetzung: Font Awesome 5 Free
   ===================================================== */

:root {
	/* Hauptfarben */
	--dp-primary:         #1d4ed8;
	--dp-primary-hover:   #1e40af;
	--dp-primary-light:   #eff6ff;
	--dp-primary-text:    #ffffff;
	--dp-accent:          #d97706;   /* Heute-Markierung */

	/* Oberflächen */
	--dp-bg:              #ffffff;
	--dp-surface:         #f8fafc;
	--dp-border:          #e2e8f0;
	--dp-border-focus:    #93c5fd;

	/* Text */
	--dp-text:            #0f172a;
	--dp-text-muted:      #64748b;
	--dp-text-disabled:   #9eb2ca;
	/* WCAG AA: #5d6b7a auf #ffffff → 4.94:1 (Folgemonate, lesbar aber erkennbar gedämpft) */
	--dp-text-other:      #5d6b7a;

	/* Interaktion */
	--dp-hover:           #f1f5f9;
	--dp-range-bg:        #dbeafe;
	--dp-range-text:      #1e40af;
	--dp-weekend-color:   #dc2626;

	/* Ausgewählt */
	--dp-sel-bg:          #1d4ed8;
	--dp-sel-text:        #ffffff;

	/* Deaktiviert */
	--dp-disabled-bg:     #f8fafc;
	--dp-disabled-text:   #cbd5e1;

	/* Modal-Hintergrund */
	--dp-overlay-opacity: 0.5;
	--dp-overlay-color:   rgba(15, 23, 42, var(--dp-overlay-opacity));

	/* Form & Schatten */
	--dp-radius:          14px;
	--dp-radius-sm:       10px;
	--dp-radius-xs:       6px;
	--dp-shadow:          0 20px 60px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.06);
	--dp-shadow-sm:       0 4px 12px rgba(0,0,0,.08);

	/* Typografie */
	--dp-font:            'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
	--dp-font-size:       14px;
	--dp-font-size-sm:    12px;

	/* Größen */
	--dp-day-size:        36px;
	--dp-width:           316px;

	/* Animation */
	--dp-duration:        220ms;
	--dp-ease:            cubic-bezier(.4,0,.2,1);

	/* Z-Index */
	--dp-z:               9999;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
	:root {
		--dp-primary:       #3b82f6;
		--dp-primary-hover: #60a5fa;
		--dp-primary-light: #172554;
		--dp-bg:            #1e293b;
		--dp-surface:       #0f172a;
		--dp-border:        #334155;
		--dp-border-focus:  #3b82f6;
		--dp-text:          #f1f5f9;
		--dp-text-muted:    #94a3b8;
		/* WCAG AA: #94a3b8 auf #1e293b → 5.71:1 (Folgemonate im Dark Mode) */
		--dp-text-other:    #94a3b8;
		/* WCAG AA: #f87171 auf #1e293b → 4.82:1 (Wochenende; #dc2626 wäre nur 2.77:1) */
		--dp-weekend-color: #f87171;
		--dp-hover:         #334155;
		--dp-range-bg:      #1e3a5f;
		--dp-range-text:    #93c5fd;
		--dp-shadow:        0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
	}
}

/* Screen-reader-only hint für Barrierefreiheit */
.dp-sr-hint {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}


  /* ────────── Fehlermeldung bei clearInvalid ────────── */
  .dp-error-msg {
    display: block;
    margin-top: 4px;
    padding: 5px 10px;
    border-radius: var(--dp-radius-xs);
    background: color-mix(in srgb, var(--dp-error, #ef4444) 12%, transparent);
    color: var(--dp-error, #ef4444);
    font-family: var(--dp-font);
    font-size: var(--dp-font-size-sm);
    font-weight: 500;
    animation: dp-fadein var(--dp-duration) var(--dp-ease);
  }
  @keyframes dp-fadein {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ────────── Overlay ────────── */
  .dp-overlay {
    position: fixed;
    inset: 0;
    background: var(--dp-overlay-color);
    z-index: calc(var(--dp-z) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dp-duration) var(--dp-ease);
  }
  .dp-overlay.dp-visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* ────────── Dialog ────────── */
  .dp-dialog {
    position: fixed;
    z-index: var(--dp-z);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.95);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dp-duration) var(--dp-ease),
                transform var(--dp-duration) var(--dp-ease);
    font-family: var(--dp-font);
    font-size: var(--dp-font-size);
    color: var(--dp-text);
  }
  /* Globale Focus-Regeln (z.B. body *:focus { z-index: 5 }) dürfen den
     Dialog-z-index nicht überschreiben – höhere Spezifität + !important */
  .dp-dialog:focus,
  .dp-dialog:focus-visible,
  .dp-panel:focus,
  .dp-panel:focus-visible {
    z-index: var(--dp-z) !important;
  }
  .dp-dialog.dp-open {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  /* Mobile: Bottom Sheet */
  @media (max-width: 480px) {
    .dp-dialog {
      top: auto;
      left: 0;
      right: 0;
      bottom: 0;
      transform: translateY(20px) scale(.98);
      width: 100%;
    }
    .dp-dialog.dp-open {
      transform: translateY(0) scale(1);
    }
  }

  /* ────────── Inline-Modus (kein Modal, direkt am Input) ────────── */
  .dp-inline-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
  }
  .dp-dialog.dp-inline {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    transform: translateY(-6px) scale(.98);
    z-index: var(--dp-z);
  }
  .dp-dialog.dp-inline.dp-open {
    transform: translateY(0) scale(1);
  }
  @media (max-width: 480px) {
    .dp-dialog.dp-inline {
      top: calc(100% + 4px);
      left: 0;
      right: auto;
      bottom: auto;
      width: auto;
      transform: translateY(-6px) scale(.98);
    }
    .dp-dialog.dp-inline.dp-open {
      transform: translateY(0) scale(1);
    }
  }

  /* ────────── calendarOnly-Modus (immer sichtbarer Kalender im Content) ────── */
  .dp-calendar-only-wrap {
    display: block;
    width: fit-content;   /* passt sich der Panel-Breite an */
  }
  /* Dialog: statisch positioniert, immer sichtbar, keine Transitions */
  .dp-dialog.dp-calendar-only {
    position: relative !important;
    top: auto !important; left: auto !important;
    bottom: auto !important; right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block;
  }
  /* Mobile: kein Bottom-Sheet, breite wie das Panel */
  @media (max-width: 480px) {
    .dp-calendar-only-wrap { width: 100%; }
    .dp-dialog.dp-calendar-only { width: auto !important; }
    .dp-calendar-only-wrap .dp-panel {
      width: 100%;
      border-radius: var(--dp-radius);
    }
  }

  .dp-panel {
    background: var(--dp-bg);
    border-radius: var(--dp-radius);
    box-shadow: var(--dp-shadow);
    width: var(--dp-width);
    overflow: hidden;
    outline: none;
    max-height: 96vh;
    overflow-y: auto;
  }

  @media (max-width: 480px) {
    .dp-panel {
      width: 100%;
      border-radius: var(--dp-radius) var(--dp-radius) 0 0;
      max-height: 90vh;
    }
  }

  /* Range: breiteres Panel auf Desktop */
  .dp-dialog[data-mode="daterange"] .dp-panel {
    width: min(calc(var(--dp-width) * 2 + 1px), 96vw);
  }
  .dp-dialog[data-mode="daterange"] .dp-calendars {
    display: flex;
    border-bottom: 1px solid var(--dp-border);
  }
  .dp-dialog[data-mode="daterange"] .dp-calendar-month {
    flex: 1;
    min-width: 0;
  }
  .dp-dialog[data-mode="daterange"] .dp-calendar-month + .dp-calendar-month {
    border-left: 1px solid var(--dp-border);
  }
  @media (max-width: 480px) {
    .dp-dialog[data-mode="daterange"] .dp-panel {
      width: 100%;
    }
    .dp-dialog[data-mode="daterange"] .dp-calendars {
      flex-direction: column;
    }
    .dp-dialog[data-mode="daterange"] .dp-calendar-month + .dp-calendar-month {
      border-left: none;
      border-top: 1px solid var(--dp-border);
    }
  }

  /* ────────── Header / Navigation ────────── */
  .dp-nav {
    display: flex;
    align-items: center;
    padding: 14px 12px 10px;
    gap: 4px;
  }
  .dp-nav-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  .dp-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--dp-radius-xs);
    cursor: pointer;
    color: var(--dp-text-muted);
    transition: background var(--dp-duration), color var(--dp-duration);
    flex-shrink: 0;
  }
  .dp-nav-btn:hover:not(:disabled) {
    background: var(--dp-hover);
    color: var(--dp-text);
  }
  .dp-nav-btn:focus-visible {
    outline: 2px solid var(--dp-primary);
    outline-offset: 1px;
  }
  .dp-nav-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
  }
  .dp-nav-btn svg { width: 16px; height: 16px; pointer-events: none; }

  .dp-btn-month,
  .dp-btn-year {
    border: none;
    background: transparent;
    font-family: var(--dp-font);
    font-size: var(--dp-font-size);
    font-weight: 700;
    color: var(--dp-text);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--dp-radius-xs);
    transition: background var(--dp-duration), color var(--dp-duration);
    line-height: 1.4;
  }
  .dp-btn-month:hover, .dp-btn-year:hover {
    background: var(--dp-hover);
    color: var(--dp-primary);
  }
  .dp-btn-month:focus-visible, .dp-btn-year:focus-visible {
    outline: 2px solid var(--dp-primary);
    outline-offset: 1px;
  }

  /* Range-Nav: Trenner zwischen den beiden Monat/Jahr-Paaren */
  .dp-nav-range-sep {
    display: inline-block;
    width: 6px;
    height: 1px;
    background: var(--dp-text);
    margin: 0 6px;
    vertical-align: middle;
    flex-shrink: 0;
  }
  /* Im Range-Modus die Nav-Mitte etwas kompakter damit 4 Buttons passen */
  .dp-nav-range .dp-nav-center {
    gap: 1px;
  }
  .dp-nav-range .dp-btn-month,
  .dp-nav-range .dp-btn-year {
    padding: 4px 5px;
    font-size: calc(var(--dp-font-size) - 1px);
  }

  /* ────────── Kalender ────────── */
  .dp-calendar-month { padding: 0 10px 10px; }

  .dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 2px;
  }
  .dp-weekdays.dp-has-weeknum { grid-template-columns: 28px repeat(7, 1fr); }

  .dp-weekday {
    text-align: center;
    font-size: var(--dp-font-size-sm);
    font-weight: 700;
    color: var(--dp-text-muted);
    padding: 4px 0;
    user-select: none;
  }
  .dp-weeknum-header {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--dp-text-disabled);
    padding: 4px 0;
  }

  .dp-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }
  .dp-week.dp-has-weeknum { grid-template-columns: 28px repeat(7, 1fr); }

  .dp-weeknum {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--dp-text-disabled);
    font-weight: 500;
    user-select: none;
    cursor: default;
  }

  .dp-day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    max-height: var(--dp-day-size);
    padding: 0;
    border: none;
    border-radius: var(--dp-radius-xs);
    background: transparent;
    font-family: var(--dp-font);
    font-size: var(--dp-font-size);
    color: var(--dp-text);
    cursor: pointer;
    transition: background var(--dp-duration), color var(--dp-duration), border-radius var(--dp-duration);
    outline: none;
    z-index: 1;
  }
  .dp-day:hover:not(:disabled):not(.dp-in-range) {
    background: var(--dp-hover);
  }
  /* Hover über selektierten / Range-Tag: etwas dunklere Primärfarbe,
     damit die weiße Schrift (color: !important) gut lesbar bleibt */
  .dp-day.dp-selected:hover:not(:disabled),
  .dp-day.dp-range-start:hover:not(:disabled),
  .dp-day.dp-range-end:hover:not(:disabled) {
    background: var(--dp-primary-hover) !important;
  }
  /* Fokus-Outline: z-index:2 damit es über Nachbarzellen liegt,
     outline statt box-shadow weil outline nicht durch overflow:hidden abgeschnitten wird */
  .dp-day:focus-visible {
    outline: 2px solid var(--dp-primary);
    outline-offset: 1px;
    z-index: 2;
  }
  .dp-day.dp-other-month { color: var(--dp-text-other); }
  .dp-day.dp-weekend { color: var(--dp-weekend-color); }
  .dp-day.dp-other-month.dp-weekend { color: color-mix(in srgb, var(--dp-weekend-color) 50%, var(--dp-text-other)); }

  .dp-day.dp-today {
    font-weight: 700;
    color: var(--dp-accent);
  }
  .dp-day.dp-today::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dp-accent);
  }

  .dp-day.dp-selected,
  .dp-day.dp-range-start,
  .dp-day.dp-range-end {
    background: var(--dp-sel-bg);
    color: var(--dp-sel-text) !important;
    font-weight: 700;
    border-radius: var(--dp-radius-xs);
  }
  .dp-day.dp-selected.dp-today::after,
  .dp-day.dp-range-start.dp-today::after,
  .dp-day.dp-range-end.dp-today::after { background: rgba(255,255,255,.7); }

  /* Range-Hintergrund: Streifen zwischen Start und Ende */
  .dp-day.dp-in-range {
    background: var(--dp-range-bg);
    color: var(--dp-range-text);
    border-radius: 0;
  }
  .dp-day.dp-range-start { border-radius: var(--dp-radius-xs) 0 0 var(--dp-radius-xs); }
  .dp-day.dp-range-end   { border-radius: 0 var(--dp-radius-xs) var(--dp-radius-xs) 0; }
  .dp-day.dp-range-start.dp-range-end { border-radius: var(--dp-radius-xs); }

  /* Range-Streifen an Wochenanfang/-ende: abgerundete Außenkante */
  .dp-week > .dp-day.dp-in-range:first-child,
  .dp-week > .dp-day.dp-range-end:first-child {
    border-radius: var(--dp-radius-xs) 0 0 var(--dp-radius-xs);
  }
  .dp-week > .dp-day.dp-in-range:last-child,
  .dp-week > .dp-day.dp-range-start:last-child {
    border-radius: 0 var(--dp-radius-xs) var(--dp-radius-xs) 0;
  }
  .dp-week.dp-has-weeknum > .dp-day.dp-in-range:nth-child(2),
  .dp-week.dp-has-weeknum > .dp-day.dp-range-end:nth-child(2) {
    border-radius: var(--dp-radius-xs) 0 0 var(--dp-radius-xs);
  }

  .dp-day:disabled,
  .dp-day.dp-disabled {
    background: var(--dp-disabled-bg) !important;
    color: var(--dp-disabled-text) !important;
    cursor: not-allowed;
    font-weight: 400;
  }
  .dp-day:disabled::after { display: none; }

  /* ────────── Monatsauswahl ────────── */
  .dp-picker-view {
    padding: 10px;
    animation: dpFadeIn var(--dp-duration) var(--dp-ease);
  }
  @keyframes dpFadeIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }

  .dp-month-grid,
  .dp-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
  }
  .dp-year-grid { grid-template-columns: repeat(4, 1fr); }

  .dp-month-item,
  .dp-year-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 8px;
    border: none;
    border-radius: var(--dp-radius-xs);
    background: transparent;
    font-family: var(--dp-font);
    font-size: var(--dp-font-size);
    color: var(--dp-text);
    cursor: pointer;
    transition: background var(--dp-duration), color var(--dp-duration);
    outline: none;
  }
  .dp-month-item:hover, .dp-year-item:hover { background: var(--dp-hover); }

  /* Deaktivierte Monat-/Jahr-Einträge: kein Pointer, kein Hover, kein Stacking-Bug */
  .dp-month-item:disabled,
  .dp-year-item:disabled {
    color: var(--dp-text-disabled);
    background: transparent !important;
    cursor: not-allowed;
    pointer-events: none;
    opacity: .45;
  }

  .dp-month-item:focus-visible, .dp-year-item:focus-visible {
    outline: 2px solid var(--dp-primary);
    outline-offset: 1px;
  }

  .dp-btn-month.dp-nav-label-inactive,
  .dp-btn-year.dp-nav-label-inactive {
    cursor: default;
    pointer-events: none;
    color: var(--dp-text);
    background: transparent;
    font-weight: 600;
    opacity: 1;          /* Browser-Standard-Opacity für disabled überschreiben */
  }
  .dp-btn-month.dp-nav-label-inactive:hover,
  .dp-btn-year.dp-nav-label-inactive:hover {
    background: transparent;
  }
  .dp-month-item.dp-sel, .dp-year-item.dp-sel {
    background: var(--dp-sel-bg);
    color: var(--dp-sel-text);
    font-weight: 700;
  }
  .dp-month-item.dp-cur, .dp-year-item.dp-cur {
    color: var(--dp-accent);
    font-weight: 700;
  }
  .dp-month-item.dp-sel.dp-cur, .dp-year-item.dp-sel.dp-cur { color: var(--dp-sel-text); }

  /* Jahr-Bereichsnavigation */
  .dp-year-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 10px;
  }
  .dp-year-range-label {
    font-weight: 700;
    color: var(--dp-text-muted);
    font-size: var(--dp-font-size-sm);
  }

  /* ────────── Zeitauswahl ────────── */
  .dp-time-picker {
    padding: 12px 14px 10px;
    border-top: 1px solid var(--dp-border);
  }
  .dp-time-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .dp-time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }
  .dp-time-sep {
    font-size: 22px;
    font-weight: 700;
    color: var(--dp-text-muted);
    line-height: 1;
    padding-bottom: 2px;
    user-select: none;
  }
  .dp-time-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: var(--dp-radius-xs);
    color: var(--dp-text-muted);
    cursor: pointer;
    transition: background var(--dp-duration), color var(--dp-duration);
    padding: 0;
  }
  .dp-time-btn:hover { background: var(--dp-hover); color: var(--dp-primary); }
  .dp-time-btn:focus-visible { outline: 2px solid var(--dp-primary); outline-offset: 1px; }
  .dp-time-btn svg { width: 14px; height: 14px; pointer-events: none; }
  .dp-time-input {
    width: 52px;
    height: 40px;
    text-align: center;
    font-family: var(--dp-font);
    font-size: 22px;
    font-weight: 500;
    color: var(--dp-text);
    background: var(--dp-surface);
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius-xs);
    outline: none;
    transition: border-color var(--dp-duration);
    -moz-appearance: textfield;
  }
  .dp-time-input::-webkit-outer-spin-button,
  .dp-time-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .dp-time-input:focus { border-color: var(--dp-primary); box-shadow: 0 0 0 3px var(--dp-primary-light); }

  .dp-ampm-btn {
    height: 40px;
    padding: 0 10px;
    border: 1.5px solid var(--dp-border);
    background: var(--dp-surface);
    border-radius: var(--dp-radius-xs);
    font-family: var(--dp-font);
    font-size: var(--dp-font-size);
    font-weight: 700;
    color: var(--dp-text);
    cursor: pointer;
    transition: all var(--dp-duration);
    margin-left: 4px;
  }
  .dp-ampm-btn:hover { background: var(--dp-hover); }
  .dp-ampm-btn:focus-visible { outline: 2px solid var(--dp-primary); outline-offset: 1px; }

  /* ────────── Range-Inputs ────────── */
  .dp-range-inputs {
    display: flex;
    gap: 8px;
    padding: 10px 14px 6px;
    border-bottom: 1px solid var(--dp-border);
  }
  .dp-range-input-wrap {
    flex: 1;
    position: relative;
  }
  .dp-range-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dp-text-muted);
    margin-bottom: 3px;
  }
  .dp-range-value {
    font-size: var(--dp-font-size);
    color: var(--dp-text);
    background: var(--dp-surface);
    border: 1.5px solid var(--dp-border);
    border-radius: var(--dp-radius-xs);
    padding: 6px 10px;
    width: 100%;
    height: 36px;
    font-family: var(--dp-font);
    cursor: default;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
  }
  .dp-range-value.dp-active {
    border-color: var(--dp-primary);
    box-shadow: 0 0 0 3px var(--dp-primary-light);
  }

  /* ────────── Footer ────────── */
  .dp-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 12px;
    border-top: 1px solid var(--dp-border);
  }
  .dp-footer-spacer { flex: 1; }

  .dp-btn-footer {
    padding: 6px 14px;
    border-radius: var(--dp-radius-xs);
    border: 1.5px solid var(--dp-border);
    background: transparent;
    font-family: var(--dp-font);
    font-size: var(--dp-font-size-sm);
    font-weight: 700;
    color: var(--dp-text-muted);
    cursor: pointer;
    transition: all var(--dp-duration);
    line-height: 1.4;
  }
  .dp-btn-footer:hover { background: var(--dp-hover); color: var(--dp-text); }
  .dp-btn-footer:focus-visible { outline: 2px solid var(--dp-primary); outline-offset: 1px; }

  .dp-btn-today {
    border-color: var(--dp-primary-light);
    color: var(--dp-primary);
    background: var(--dp-primary-light);
  }
  .dp-btn-today:hover { background: var(--dp-primary); color: var(--dp-primary-text); border-color: var(--dp-primary); }

  .dp-btn-confirm,
  .dp-btn-close {
    border-color: var(--dp-primary);
    color: var(--dp-primary-text);
    background: var(--dp-primary);
  }
  .dp-btn-confirm:hover,
  .dp-btn-close:hover { background: var(--dp-primary-hover); border-color: var(--dp-primary-hover); color: var(--dp-primary-text); }



  /* ────────── Focus Ring (systemweit) ────────── */