@font-face { font-family: "Bricolage"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root { --flaeche: #ffffff; --tinte: #17232d; --leise: #576573; --linie: #d6dee5; }
@media (prefers-color-scheme: dark) { :root { --flaeche: #16222c; --tinte: #e4ecf2; --leise: #9aabb9; --linie: #263542; } }
:root.hell { --flaeche: #ffffff; --tinte: #17232d; --leise: #576573; --linie: #d6dee5; }
:root.dunkel { --flaeche: #16222c; --tinte: #e4ecf2; --leise: #9aabb9; --linie: #263542; }
* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; font-family: "Bricolage", system-ui, sans-serif; }
.kaestchen { display: block; max-width: 340px; color: var(--tinte); text-decoration: none; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.kaestchen:focus-visible { outline: 3px solid #e8a32e; outline-offset: -3px; }
.kopf { --oben: #1d4f86; --unten: #7fb0dc; --fern: #4f7f8f; --nah: #2b5444; position: relative; color: #fff; padding: 12px 16px 34px;
  background: linear-gradient(180deg, var(--oben), var(--unten)); display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: end; }
.kopf.daemmerung { --oben: #273a63; --unten: #e39a6a; --fern: #4a4f6b; --nah: #262f3f; }
.kopf.nacht { --oben: #0b1524; --unten: #22385a; --fern: #1c2c40; --nah: #101b28; }
.ort { grid-column: 1 / -1; font-size: 13px; opacity: .9; }
.temp { font-size: 52px; font-weight: 250; line-height: 1; letter-spacing: -.03em; font-variation-settings: "opsz" 96; }
.text { display: flex; flex-direction: column; gap: 3px; padding-bottom: 6px; }
.satz { font-size: 14px; line-height: 1.25; }
.heute { font-size: 12.5px; opacity: .9; font-variant-numeric: tabular-nums; }
.huegel { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 30px; }
.h-fern { fill: var(--fern); } .h-nah { fill: var(--flaeche); }
.werte { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 4px 16px 6px; }
.werte dt { font-size: 12px; color: var(--leise); }
.werte dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.quelle { display: flex; justify-content: space-between; gap: 8px; margin: 0; padding: 6px 16px 10px; font-size: 11px; color: var(--leise); border-top: 1px solid var(--linie); }