/* Presentation only: existing station metrics, ordering and interactions are retained. */
:is(#view-stationwidgets, .station-widget-drag-preview) {
  --sw-surface: #fff;
  --sw-soft: #f5f8fb;
  --sw-line: #e1e8ef;
  --sw-text: #20364c;
  --sw-secondary: #5b7186;
}
body.dark-mode :is(#view-stationwidgets, .station-widget-drag-preview) {
  --sw-surface: #192638;
  --sw-soft: #142031;
  --sw-line: #344458;
  --sw-text: #edf4fc;
  --sw-secondary: #afc1d4;
}
:is(#view-stationwidgets, .station-widget-drag-preview) > .panel { background: transparent; border: 0; box-shadow: none; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widgets-toolbar { margin: .25rem 0 1.25rem; padding: 0 .2rem; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widgets-toolbar .panel-title { font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -.035em; color: var(--sw-text); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widgets-intro { margin: .4rem 0 0; max-width: 54ch; color: var(--sw-secondary); font-size: .83rem; line-height: 1.6; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widgets-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 265px), 1fr)); gap: 1rem; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card {
  min-width: 0; padding: 1.15rem; border: 1px solid var(--sw-line); border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sw-tint, #5397cb) 7%, var(--sw-surface)), var(--sw-surface) 55%);
  color: var(--sw-text); gap: 1rem; grid-template-rows: auto 1fr; align-content: start;
  box-shadow: 0 4px 16px #172e4610; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card::before { display: none; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card::after { inset: 0 1.15rem auto; width: auto; height: 3px; border-radius: 0 0 4px 4px; background: var(--sw-tint, #5397cb); opacity: .85; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-head { gap: .65rem; min-height: 3.5rem; align-items: center; padding-bottom: .8rem; border-bottom: 1px solid var(--sw-line); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-title { display: block; overflow: visible; font-size: .96rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; color: var(--sw-text); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-metrics { display: grid; gap: .85rem; align-content: start; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-current { align-items: center; gap: .65rem; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-temp { font-size: clamp(1.85rem, 2.1vw, 2.5rem); font-weight: 600; line-height: 1.2; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--sw-text); text-shadow: none; overflow-wrap: anywhere; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-humidity { gap: .3rem; padding: .6rem .65rem; border-radius: 10px; background: color-mix(in srgb, #249e98 8%, var(--sw-surface)); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-humidity .k { font-size: .6rem; line-height: 1.3; text-transform: none; letter-spacing: 0; color: var(--sw-secondary); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-humidity .v { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sw-text); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-range { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: 0; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-range > span { padding: .35rem .55rem; border-radius: 7px; font-size: .7rem; line-height: 1.3; font-variant-numeric: tabular-nums; background: var(--sw-soft); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-grid2 { gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-pill { gap: .4rem; padding: .7rem .75rem; border: 1px solid var(--sw-line); border-radius: 10px; background: var(--sw-soft); box-shadow: none; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-pill .k { font-size: .65rem; line-height: 1.45; text-transform: none; letter-spacing: .01em; color: var(--sw-secondary); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-pill .v { font-size: .88rem; font-weight: 600; line-height: 1.45; color: var(--sw-text); white-space: normal; overflow: visible; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-pill-rain { background: color-mix(in srgb, #258ad2 6%, var(--sw-surface)); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-pill-wind { grid-column: 1 / -1; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-row { padding: 1rem .25rem; min-height: 100px; grid-template-columns: minmax(0, 1fr); align-content: center; gap: .5rem; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-row .val { text-align: left; overflow-wrap: anywhere; color: var(--sw-text); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-delete { width: 32px; height: 32px; font-size: 1.2rem; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card.manage { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card.sw-drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-add-card { min-height: 210px; flex-direction: column; gap: .8rem; align-self: stretch; border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--sw-line)); background: color-mix(in srgb, var(--accent) 3%, var(--sw-surface)); color: var(--accent); font-size: 2.6rem; box-shadow: none; }
:is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-add-card::after { content: 'Ort hinzufügen'; position: static; width: auto; height: auto; background: none; opacity: 1; font-size: .88rem; font-weight: 500; color: var(--sw-secondary); }
:is(#view-stationwidgets, .station-widget-drag-preview) :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card:not(.dragging):hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 40%, var(--sw-line)); box-shadow: 0 10px 24px #172e461a; }
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-add-card:hover { background: color-mix(in srgb, var(--accent) 8%, var(--sw-surface)); }
}
@media (hover: none) { :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card:not(.dragging):hover { transform: none; } }
@media (max-width: 600px) {
  :is(#view-stationwidgets, .station-widget-drag-preview) > .panel { padding: .35rem !important; }
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widgets-grid { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card { padding: 1rem; }
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-head { min-height: 0; }
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-add-card { min-height: 125px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card { transition: none; }
  :is(#view-stationwidgets, .station-widget-drag-preview) .station-widget-card:not(.dragging):hover { transform: none; }
}