/* ═══════════════════════════════════════════════════════════════════
 * glass.css – färbt die bestehenden Unterseiten ins Gemeinde-Blau-Glas
 * (Wetter, Bevölkerung, Wahlen, News, Verzeichnis, Rechner).
 *
 * Ersetzt alpin.css. Muss als LETZTE Stildatei geladen werden, nach
 * shell.css. Die Seiten-CSS (wetter.css, bevoelkerung.css …) bleiben
 * unverändert – sie arbeiten mit den Variablen aus base.css, und die
 * werden hier auf helle Werte umgestellt.
 * ═════════════════════════════════════════════════════════════════*/

:root {
  --bg:        transparent;
  --ink:       #1f3347;
  --glass:     rgba(255, 255, 255, .58);
  --glass2:    rgba(255, 255, 255, .55);
  --glass-hi:  rgba(255, 255, 255, .85);
  --border:    rgba(67, 112, 148, .16);
  --border-h:  rgba(67, 112, 148, .42);
  --blur:      blur(18px) saturate(160%);
  --text:      #1f3347;
  --text-2:    #4a6580;
  --text-3:    #6b8197;

  --teal-1:    #437094;
  --teal-2:    #2d5a78;
  --teal-3:    #5a8bb3;
  --teal-4:    #2d5a78;
  --accent:    #437094;
  --accent-blue:  #2f7fbf;
  --accent-warm:  #e07a2e;
  --accent-rose:  #d6457a;
  --accent-amber: #d99412;

  --maxw:      1600px;
  --radius:    18px;
  --radius-sm: 12px;
  --radius-lg: 22px;
  --shadow:    var(--schatten);
  --shadow-teal: none;

  --w-bg-1: rgba(255, 255, 255, .7);
  --w-bg-2: rgba(191, 223, 245, .4);
  --w-accent: rgba(90, 139, 179, .18);
}

.bg-canvas, .bg-wappen { display: none !important; }
a { color: var(--g-blau); }

/* ── Innenrahmen der Seiten: Abstand regelt jetzt .main ── */
.main .wx-wrap, .main .bv-wrap, .main .nw-wrap, .main .vz-wrap {
  margin: 0; padding: 0 !important; max-width: none; position: relative; z-index: 1;
}
.main .nw-wrap { max-width: 1180px; }
.main .eb-wrap, .main .kr-wrap { margin-left: 0; margin-right: 0; padding: 0 !important; max-width: none; }
.main .rt-tabs { margin-top: 0; padding-top: 0; }

/* ── Glasflächen ── */
.widget, .nw-tools {
  background: var(--g-bg) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-bottom-color: rgba(255, 255, 255, .45) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--schatten), var(--kante) !important;
  color: var(--g-text);
}
.widget::before, .widget::after { display: none !important; }

/* Kleine Flächen innerhalb der Widgets */
.eco-tile, .w-stat, .fc-day, .wx-stat, .wx-sensor, .det-tile, .bv-kpi, .eb-param, .kr-q-card {
  background: rgba(255, 255, 255, .55) !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: 0 2px 6px -2px rgba(31, 58, 92, .12), inset 0 1px 0 #fff;
}

/* Überschriften */
.wx-head h1, .nw-head h1, .vz-head h1, .eb-head h1, .bv-hero h1 {
  color: var(--g-blau-tief); font-weight: 750; letter-spacing: -.02em;
}
.wx-head h1 .lucide, .nw-head h1 .lucide, .vz-head h1 .lucide { color: var(--g-blau); }
.wx-head .sub, .nw-head .sub, .vz-head .sub, .eb-sub { color: var(--g-muted); }
.wx-sec-h { color: var(--g-muted); font-weight: 700; margin-top: 10px; }
.wx-sec-h .lucide { color: var(--g-blau); }
.eb-h { color: var(--g-blau-tief); }
.eb-h .lucide { color: var(--g-blau); }

/* Hero-Kacheln (Wetter, Bevölkerung, Wahlen) wie auf der Startseite */
.wx-hero, .bv-hero {
  background: linear-gradient(135deg, rgba(45, 90, 120, .95), rgba(67, 112, 148, .92) 55%, rgba(90, 139, 179, .88)) !important;
  border-color: rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}
.wx-hero *, .bv-hero * { color: #fff; }
.wx-hero h1, .bv-hero h1, .wx-hero h1 .lucide, .bv-hero h1 .lucide,
.bv-hero .n, .wx-hero-temp { color: #fff !important; }
.wx-hero .eyebrow, .bv-hero .eyebrow, .bv-hero .meta, .bv-hero .u,
.wx-hero-desc, .wx-hero-src { color: rgba(255, 255, 255, .82) !important; }
.wx-hero .wx-stat, .wx-hero .wx-chip {
  background: rgba(255, 255, 255, .14) !important;
  border: 1px solid rgba(255, 255, 255, .25) !important; box-shadow: none;
}
.wx-hero .wx-stat .l, .wx-hero small { color: rgba(255, 255, 255, .75) !important; }
.wx-hero .lucide { color: #fff !important; }

/* Zahlen */
.bv-kpi .kv, .eb-amount { color: var(--g-blau-tief); font-variant-numeric: tabular-nums; }
.bv-kpi .kl, .bv-kpi .ks { color: var(--g-muted); }

/* Knöpfe */
.bv-btn, .btn-primary, .kr-btn-print {
  background: linear-gradient(135deg, var(--g-blau), var(--g-blau2)) !important;
  color: #fff !important; border: 1px solid rgba(255, 255, 255, .25) !important;
  box-shadow: 0 4px 14px rgba(67, 112, 148, .3); border-radius: 10px !important;
}
.bv-btn.ghost {
  background: rgba(255, 255, 255, .7) !important; color: var(--g-blau-tief) !important;
  border: 1px solid rgba(67, 112, 148, .22) !important; box-shadow: none;
}
.bv-btn .lucide, .kr-btn-print .lucide { color: inherit !important; }

/* Hinweisboxen */
.bv-note, .vz-note, .nw-foot, .eb-note, .eb-hint {
  background: rgba(255, 255, 255, .5) !important;
  border: 1px solid rgba(67, 112, 148, .14) !important;
  border-left: 3px solid var(--g-blau2) !important;
  border-radius: 12px !important; color: var(--g-text2) !important;
}
.eb-hint { border-left-width: 1px !important; }

/* Formulare */
input, select, textarea, .eb-input, .vz-search, .nw-search {
  background-color: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(67, 112, 148, .22) !important;
  color: var(--g-text) !important; font-family: inherit;
}
input:focus, select:focus, textarea:focus, .eb-input:focus, .vz-search:focus, .nw-search:focus {
  background-color: #fff !important; border-color: var(--g-blau2) !important;
  box-shadow: 0 0 0 3px rgba(67, 112, 148, .16); outline: none;
}
.vz-search, .nw-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23437094' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 14px center !important; background-size: 15px !important;
}
::placeholder { color: var(--g-muted) !important; opacity: .8; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--g-blau); }
select option { color: #1f3347; background: #fff; }

/* Auswahl-Optionen und Tabs im Rechner */
.eb-opt { background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(67, 112, 148, .16) !important; color: var(--g-text) !important; }
.eb-opt.sel { background: linear-gradient(135deg, rgba(67,112,148,.16), rgba(90,139,179,.07)) !important; border-color: rgba(67, 112, 148, .4) !important; }
.eb-tag, .eb-badge, .kr-badge {
  background: rgba(67, 112, 148, .1) !important; color: var(--g-blau-tief) !important;
  border: 1px solid rgba(67, 112, 148, .2) !important;
}
.rt-tab { color: var(--g-text2) !important; background: rgba(255, 255, 255, .6) !important; border: 1px solid rgba(67, 112, 148, .16) !important; }
.rt-tab.active {
  color: var(--g-blau-tief) !important;
  background: linear-gradient(135deg, rgba(67,112,148,.18), rgba(90,139,179,.08)) !important;
  border-color: rgba(67, 112, 148, .35) !important;
}
.rt-tab-neu { background: var(--g-blau) !important; color: #fff !important; }

/* Tabellen */
table { color: var(--g-text); }
.kr-table th, .kr-table td, .kr-tarifbox td { border-color: var(--g-linie) !important; color: var(--g-text) !important; }
.kr-table th { background: rgba(240, 245, 250, .85) !important; color: var(--g-text2) !important; }
.kr-tarifbox { background: rgba(255, 255, 255, .5) !important; border: 1px solid var(--g-linie) !important; }
.kr-footer, .text-muted { color: var(--g-muted) !important; }

/* Chips und Filter (News, Verzeichnis) */
.nw-chip, .vz-cat {
  background: rgba(255, 255, 255, .65) !important; color: var(--g-text2) !important;
  border: 1px solid rgba(67, 112, 148, .18) !important;
}
.nw-chip:hover, .vz-cat:hover { background: #fff !important; color: var(--g-blau-tief) !important; }
.nw-chip.active, .vz-cat.active {
  background: linear-gradient(135deg, var(--g-blau), var(--g-blau2)) !important;
  border-color: transparent !important; color: #fff !important;
}
.nw-chips-src { border-top-color: var(--g-linie) !important; }
.nw-chip-src::before { background: hsl(var(--q) var(--qs) 42%); box-shadow: none; }
.nw-chip-src.active {
  background: hsl(var(--q) var(--qs) 92%) !important; border-color: hsl(var(--q) var(--qs) 38%) !important;
  color: hsl(var(--q) var(--qs) 24%) !important;
}

/* News-Beiträge: Glas, Quellfarbe als Strich links */
.nw-item {
  background: var(--g-bg) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid rgba(255, 255, 255, .85) !important;
  border-left: 3px solid hsl(var(--q) var(--qs) 42%) !important;
  border-radius: 14px !important;
  box-shadow: var(--schatten), var(--kante) !important; color: var(--g-text) !important;
}
.nw-item:hover {
  background: linear-gradient(90deg, hsl(var(--q) var(--qs) 50% / .08), transparent 60%), rgba(255,255,255,.8) !important;
  box-shadow: var(--schatten-h), var(--kante) !important;
}
.nw-item h2 { color: var(--g-text); }
.nw-item:hover h2 { color: hsl(var(--q) var(--qs) 26%); }
.nw-item p { color: var(--g-text2); }
.nw-src {
  color: hsl(var(--q) var(--qs) 26%) !important; background: hsl(var(--q) var(--qs) 92%) !important;
  border-color: hsl(var(--q) var(--qs) 40% / .35) !important;
}
.nw-topic, .nw-time, .nw-empty { color: var(--g-muted) !important; }

/* Verzeichnis */
.vz-edit { background: rgba(255,255,255,.7) !important; color: var(--g-blau-tief) !important; border-color: rgba(67,112,148,.22) !important; }
.vz-item { background: rgba(255, 255, 255, .55) !important; border: 1px solid rgba(255, 255, 255, .8) !important; }
.vz-item:hover { background: rgba(255, 255, 255, .85) !important; border-color: rgba(67, 112, 148, .2) !important; }
.vz-item.sel { background: linear-gradient(135deg, rgba(67,112,148,.16), rgba(90,139,179,.07)) !important; border-color: rgba(67, 112, 148, .4) !important; }
.vz-item .t a { color: var(--g-text); }
.vz-item:hover .t a { color: var(--g-blau-tief); }
.vz-item .m, .vz-count { color: var(--g-muted) !important; }
.vz-item .acts a { background: rgba(67, 112, 148, .08) !important; color: var(--g-blau-tief) !important; border-color: rgba(67, 112, 148, .18) !important; }
.vz-map { border: 1px solid rgba(255, 255, 255, .85) !important; border-radius: var(--g-radius) !important; box-shadow: var(--schatten); top: 20px !important; }
.vz-legend { background: rgba(255, 255, 255, .92) !important; color: var(--g-text2) !important; border: 1px solid rgba(67,112,148,.18) !important; box-shadow: 0 4px 14px rgba(31,58,92,.18) !important; }
.vz-legend .d { border-color: #fff !important; box-shadow: 0 0 0 1.5px rgba(31,58,92,.3) !important; }
.marker-cluster { background: rgba(45, 90, 120, .9) !important; border-color: #fff !important; box-shadow: 0 2px 8px rgba(31,58,92,.4) !important; }

/* Leaflet hell (Verzeichnis, Radar) */
.leaflet-container { background: #e7eff8 !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: rgba(255,255,255,.97) !important; color: var(--g-text) !important; border: 1px solid rgba(67,112,148,.18) !important; }
.leaflet-popup-content a { color: var(--g-blau) !important; }
.leaflet-popup-close-button { color: var(--g-muted) !important; }
.leaflet-control-layers { background: rgba(255,255,255,.95) !important; border: 1px solid rgba(67,112,148,.18) !important; box-shadow: 0 4px 14px rgba(31,58,92,.18) !important; }
.leaflet-control-layers-toggle { filter: none !important; }
.leaflet-control-layers-expanded { color: var(--g-text) !important; }
.leaflet-control-zoom a { background: rgba(255,255,255,.95) !important; color: var(--g-blau-tief) !important; border-color: rgba(67,112,148,.18) !important; }
.leaflet-control-zoom a:hover { background: #fff !important; }
.leaflet-control-attribution { background: rgba(255,255,255,.75) !important; color: var(--g-muted) !important; }
.leaflet-control-attribution a { color: var(--g-blau) !important; }

/* Ranglisten, Balken, Status */
.bv-rank { color: var(--g-text); }
.eco-dot { background: #34c172; }
.wx-foot { color: var(--g-muted); }
.sk { background: linear-gradient(90deg, rgba(67,112,148,.07), rgba(67,112,148,.16), rgba(67,112,148,.07)) !important; background-size: 200% 100% !important; }

/* Handy */
@media (max-width: 860px) {
  .main .wx-wrap, .main .bv-wrap, .main .eb-wrap, .main .kr-wrap { padding: 0 !important; }
}

/* Wetterseite */
.hour-card { background: rgba(255,255,255,.55) !important; border: 1px solid rgba(255,255,255,.85) !important; color: var(--g-text) !important; }
.hour-card .ht, .hour-card .hpop, .hour-card .hwind { color: var(--g-muted) !important; }
.hour-card .lucide, .fc-day .fc-icon, .det-tile .di .lucide, .wx-sensor > .lucide { color: var(--g-blau) !important; }
.temp-range-labels .hi { color: var(--g-text); } .temp-range-labels .lo, .fc-day .dn { color: var(--g-muted); }
.fc-day .dr { color: #2f7fbf; }
.radar-map, .windy-card { border-radius: 14px !important; overflow: hidden; border: 1px solid rgba(255,255,255,.85) !important; }
.radar-legend { background: rgba(255,255,255,.85) !important; color: var(--g-text2) !important; border: 1px solid rgba(67,112,148,.18) !important; }
.windy-btn { background: rgba(255,255,255,.65) !important; color: var(--g-text2) !important; border: 1px solid rgba(67,112,148,.18) !important; }
.windy-btn.active { background: linear-gradient(135deg, var(--g-blau), var(--g-blau2)) !important; color: #fff !important; border-color: transparent !important; }
.windy-btn .lucide { color: inherit !important; }
.windy-ph { background: rgba(255,255,255,.6) !important; color: var(--g-text2) !important; }
.windy-zust { max-width: 440px; margin: auto; padding: 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.windy-zust > .lucide { width: 34px; height: 34px; color: var(--g-blau); }
.windy-zust p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--g-text2); }
.windy-zust-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.windy-zust-btns label { font-size: .8rem; color: var(--g-muted); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.windy-zust .bv-btn { padding: 9px 18px; cursor: pointer; font-weight: 650; }
.uv-bar { box-shadow: 0 0 0 1px rgba(67,112,148,.15); }

/* Druck (Gebührenrechner) */
@media print {
  .widget { background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important; backdrop-filter: none !important; }
}