.weather-date-field {
    position: relative; display: inline-flex; align-items: center; flex: 0 0 auto;
    width: 140px; max-width: 100%; height: 34px; vertical-align: middle;
    border: 1px solid var(--border, #b9cbdc); border-radius: 10px;
    background: var(--chip, #f6f9fc); color: var(--text, #243648);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.weather-date-field[hidden] { display: none !important; }
.weather-date-field:focus-within { border-color: #3684c4; outline: 2px solid #3684c433; outline-offset: 1px; }
.weather-date-field:has([aria-invalid="true"]) { border-color: #d43838; }
.weather-date-field .weather-date-text {
    flex: 1; min-width: 0; width: 106px; height: 100%; margin: 0; padding: 0 10px;
    border: 0; border-radius: inherit; background: transparent; color: inherit;
    font-family: inherit; font-size: 12px; font-variant-numeric: tabular-nums;
    box-shadow: none; outline: none; cursor: text;
}
.weather-date-field .weather-date-text::placeholder { color: var(--muted, #65768a); opacity: 1; }
.weather-date-field .weather-date-calendar {
    display: inline-flex; justify-content: center; align-items: center; flex: 0 0 32px;
    width: 32px; height: 100%; padding: 0; margin: 0; border: 0;
    border-left: 1px solid var(--border, #b9cbdc); border-radius: 0 9px 9px 0;
    background: transparent; color: inherit; box-shadow: none; cursor: pointer;
}
.weather-date-field .weather-date-calendar:hover { background: #3684c41a; }
.weather-date-field .weather-date-calendar:focus-visible { outline: 2px solid #3684c4; outline-offset: -3px; }
.weather-date-calendar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.weather-date-field > input.weather-date-native {
    position: absolute !important; bottom: 0; right: 0; width: 1px !important; min-width: 0 !important;
    height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
    opacity: 0; pointer-events: none;
}
.weather-date-field > input.weather-date-native-fallback { width: 100% !important; height: 100% !important; opacity: 1; pointer-events: auto; z-index: 3; }
.weather-date-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.weather-date-error {
    position: absolute; z-index: 10; top: calc(100% + 4px); left: 0;
    width: 230px; max-width: calc(100vw - 32px); padding: 7px 9px;
    border: 1px solid #d43838; border-radius: 6px; background: #fff4f4; color: #9e2020;
    font: 12px/1.4 Arial, sans-serif; white-space: normal; box-shadow: 0 3px 10px #0002;
}
.weather-date-error[hidden] { display: none; }
body.dark-mode .weather-date-field { background: var(--chip, #1e293b); border-color: var(--border, #60758f); color: var(--text, #f1f5f9); color-scheme: dark; }
body.dark-mode .weather-date-field:focus-within { border-color: #79bfff; outline-color: #79bfff55; }
body.dark-mode .weather-date-field .weather-date-calendar { border-left-color: var(--border, #60758f); }
body.dark-mode .weather-date-calendar:hover { background: #79bfff22; }
body.dark-mode .weather-date-error { background: #401f29; color: #ffd9df; border-color: #fb7185; }
.weather-date-field:has(:disabled) { opacity: .6; }
@media (max-width: 700px) {
    header > .controls > .weather-date-field,
    header .controls #vergleich-primary-range-inline > .weather-date-field,
    header .controls #vergleich-input-wrapper > .weather-date-field { grid-column: 2; width: 100%; }
}