@font-face { font-family: 'IPW Sans'; src: url('../fonts/barlow-latin-300-normal.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'IPW Sans'; src: url('../fonts/barlow-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IPW Sans'; src: url('../fonts/barlow-latin-700-normal.woff2') format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'IPW Sans'; src: url('../fonts/barlow-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --bg: #f4f2ed; --card: #fafaf9; --ink: #17191c; --muted: #6a707a; --line: rgba(0,0,0,.09);
  --accent: #3fb27f; --red: #ed1c24; --rain: #4f8fd0; --night: rgba(30,40,80,.07); --sel: rgba(0,0,0,.05);
  --field: #ebe8e1; --shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 24px rgba(0,0,0,.05);
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: light;
}
:root[data-theme=dark] {
  --bg: #0f1011; --card: #1b1d22; --ink: #eceff3; --muted: #8e97a4; --line: rgba(255,255,255,.09);
  --rain: #7fb2e5; --night: rgba(0,0,0,.28); --sel: rgba(255,255,255,.06); --field: #1b1d22;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.4 var(--sans); min-height: 100dvh;
  padding: 0 max(14px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  transition: background .4s, color .4s;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.muted { color: var(--muted); } .small { font-size: .84rem; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.top, #places, #app, .banner { max-width: 880px; margin-inline: auto; }

/* ---- Kopfzeile ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; align-items: center; padding: calc(10px + env(safe-area-inset-top)) 0 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#searchForm { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--field); border-radius: 14px; padding: 0 12px; height: 44px; border: 1px solid var(--line); }
#searchForm:focus-within { border-color: var(--accent); }
#q { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none; }
#q::-webkit-search-cancel-button { display: none; }
.mag { color: var(--muted); flex: none; } .x { color: var(--muted); font-size: 14px; padding: 6px; }
.ibtn { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--field); border: 1px solid var(--line); flex: none; }
.ibtn[aria-pressed=true] { color: #ffc83a; }
#starBtn:not([hidden]) { display: grid; }
#results { position: absolute; left: 0; right: 0; top: calc(100% - 2px); margin: 0; padding: 6px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: 60vh; overflow: auto; }
#results button { display: block; width: 100%; text-align: left; padding: 11px 10px; border-radius: 10px; }
#results button:hover, #results button:focus-visible { background: var(--sel); }
#results .msg { padding: 12px 10px; color: var(--muted); }

#places { display: flex; gap: 8px; align-items: center; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
#places::-webkit-scrollbar { display: none; }
#places .lbl { font: 600 .7rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); flex: none; }
#places .hint { font-size: .84rem; color: var(--muted); white-space: nowrap; }
.chip { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: .9rem; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---- Hero ---- */
#app { display: grid; gap: 14px; }
.hero { border-radius: 26px; padding: 18px 18px 14px; background: linear-gradient(165deg, var(--t1), var(--t2)); box-shadow: var(--shadow); border: 1px solid var(--line); overflow: hidden; transition: background .6s; }
.hero-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.hero h1 { font-size: 1.5rem; font-weight: 750; line-height: 1.15; }
.hero .sub { color: var(--muted); font-size: .9rem; min-height: 1.2em; }
.hero-actions { display: flex; gap: 6px; }
.hero-actions .ibtn { width: 38px; height: 38px; font-size: 18px; border-radius: 12px; background: color-mix(in srgb, var(--card) 60%, transparent); }
.hero-body { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.wiggle { animation: wig .6s ease; }
@keyframes wig { 20% { transform: rotate(-5deg) } 50% { transform: rotate(4deg) } 80% { transform: rotate(-2deg) } }
.now { flex: 1; min-width: 0; display: grid; gap: 6px; }
.temp { font-size: clamp(3.6rem, 16vw, 5.6rem); font-weight: 300; line-height: .95; }
.cond { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 650; }
.cond .wi { flex: none; }
.meta { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.rainline { margin-top: 12px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--card) 62%, transparent); font-weight: 600; font-size: .95rem; }
.rainline.wet { color: var(--rain); }
.parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.part { display: grid; justify-items: center; gap: 2px; padding: 8px 2px; border-radius: 14px; background: color-mix(in srgb, var(--card) 55%, transparent); font-size: .9rem; }
.pn { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; text-align: center; }
.pr { font-size: .68rem; color: var(--rain); min-height: 1em; }
.srcline { margin-top: 10px; font-size: .68rem; color: var(--muted); line-height: 1.5; }

/* ---- Karten ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 12px 14px; box-shadow: var(--shadow); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 8px; }
.card h2 { font-size: 1.05rem; font-weight: 750; }
.tag { font-size: .68rem; padding: 3px 8px; border-radius: 999px; background: var(--sel); color: var(--muted); }
.card > .small { padding: 4px 6px 0; }
.seg { display: inline-flex; background: var(--sel); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { padding: 6px 11px; border-radius: 9px; font-size: .82rem; font-weight: 650; color: var(--muted); }
.seg button[aria-pressed=true] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.seg.wide { display: flex; } .seg.wide button { flex: 1; padding: 10px; }

.chart { position: relative; width: 100%; }
.chart svg { display: block; max-width: none; touch-action: pan-y; }
.ct { font: 500 10.5px var(--mono); fill: var(--muted); } .ctb { font-weight: 700; fill: var(--ink); }
.gridh { stroke: var(--line); stroke-dasharray: 2 4; } .gridv { stroke: var(--line); }
.night { fill: var(--night); } .rainbar { fill: var(--rain); }
.curline { stroke: var(--ink); stroke-opacity: .5; stroke-dasharray: 3 3; } .curdot { fill: var(--ink); }
.ensband { fill: var(--ink); opacity: .12; } .selcol { fill: var(--sel); } .uncertain { fill: var(--ink); opacity: .035; }
.tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 8px 11px; border-radius: 12px; font-size: .78rem; line-height: 1.4; width: max-content; max-width: 230px; pointer-events: none; z-index: 3; }
.rscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.hit { cursor: pointer; }

.days { list-style: none; margin: 6px 0 0; padding: 0; }
.day { border-top: 1px solid var(--line); }
.day .row { width: 100%; display: grid; grid-template-columns: 92px 30px 1fr auto 86px; gap: 8px; align-items: center; text-align: left; padding: 10px 6px; border-radius: 10px; }
.day .row:hover { background: var(--sel); }
.dn { display: grid; line-height: 1.2; } .dn small { color: var(--muted); font-size: .72rem; }
.dt { font-size: .92rem; min-width: 0; } .dt em { font-style: normal; font-size: .7rem; color: var(--muted); border: 1px dashed var(--muted); border-radius: 6px; padding: 0 5px; margin-left: 4px; }
.dtemp { font-size: .95rem; white-space: nowrap; text-align: right; } .dtemp b { font-weight: 700; margin-right: 4px; }
.dr { font-size: .74rem; color: var(--rain); text-align: right; }
.day.unsure .dt, .day.unsure .dtemp { opacity: .75; }
.detail { padding: 2px 8px 12px 84px; display: grid; gap: 4px; }

/* ---- Radar ---- */
.radar { position: relative; }
.radar .map { height: min(62vh, 440px); min-height: 300px; border-radius: 16px; overflow: hidden; background: var(--field); }
.radar-ui { display: flex; align-items: center; gap: 10px; padding: 10px 4px 2px; }
.radar-ui input { flex: 1; accent-color: var(--accent); }
.rbtn { width: 38px; height: 38px; border-radius: 12px; background: var(--sel); font-size: 14px; }
.rtime { font-size: .8rem; min-width: 110px; text-align: right; }
.legend { display: flex; gap: 8px; align-items: center; font-size: .7rem; color: var(--muted); padding: 4px 4px 0; flex-wrap: wrap; }
.legend i { width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #8fd3ff, #2f8ae6, #1ec26b, #f2e13b, #f08a24, #d6262b, #b0239d); }
.rmsg { padding: 8px 4px; } .attr { padding: 6px 4px 0; }
.maplibregl-ctrl-group { background: var(--card) !important; } .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: var(--mapicon, none); }
:root[data-theme=dark] { --mapicon: invert(1); }

/* ---- Sonstiges ---- */
.btn { background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 14px; font-weight: 700; }
.link { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 28px 10px; }
.empty h2 { font-size: 1.4rem; }
.banner { background: color-mix(in srgb, #ffc83a 22%, var(--card)); border: 1px solid var(--line); padding: 10px 14px; border-radius: 14px; font-size: .88rem; margin-bottom: 4px; }
.foot { text-align: center; padding: 10px 0 0; display: grid; gap: 8px; }
.foot .small a { text-underline-offset: 2px; }
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; z-index: 99; font-size: .9rem; }
#toast[hidden] { display: none; }
dialog { border: 0; padding: 0; border-radius: 24px; width: min(560px, calc(100vw - 20px)); max-height: 86dvh; background: var(--card); color: var(--ink); box-shadow: 0 20px 70px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.sheet-in { padding: 18px 20px 24px; display: grid; gap: 10px; }
.sheet-in header { display: flex; justify-content: space-between; align-items: center; }
.sheet-in h3 { margin-top: 10px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-family: var(--mono); }
.src { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

@media (min-width: 760px) {
  .hero { padding: 22px 26px 18px; } .heroicon { width: 250px; }
  .card { padding: 20px 20px 16px; }
  .day .row { grid-template-columns: 110px 34px 1fr auto 110px; }
  .detail { padding-left: 120px; }
}
@media (max-width: 420px) {
  .day .row { grid-template-columns: 88px 28px 1fr auto; gap: 6px; } .dr { display: none; } .dn b { font-size: .92rem; }
  .detail { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Regen-Warner */
.nc-title { font-size: 1.35rem; letter-spacing: -.01em; }
.nc-title.wet { color: #3f7fb3; } html[data-theme="dark"] .nc-title.wet { color: #7fb2e5; }
.nc-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; height: 96px; margin-top: 14px; align-items: end; }
.nc-col { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.nc-bar { width: 100%; border-radius: 5px 5px 2px 2px; min-height: 3px; background: var(--sel); opacity: .6; margin-bottom: 4px; flex: none; }
.nc-bar[style*="height:0%"] { height: 3px !important; }
.nc-bar.lv1 { background: #8fc1ee; opacity: 1; } .nc-bar.lv2 { background: #3f8ee0; opacity: 1; } .nc-bar.lv3 { background: #1f55c4; opacity: 1; }
.nc-lab { font-size: .64rem; color: var(--muted); height: 12px; white-space: nowrap; text-align: left; }

/* Animierte Wetter-Symbole */
.heroicon { flex: none; width: min(46%, 230px); aspect-ratio: 1; }
.hero-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.empty .hero-svg { width: 170px; height: 170px; margin: 0 auto 6px; }
.spin { transform-origin: 100px 100px; animation: spin 28s linear infinite; }
.pulse { transform-origin: 100px 100px; animation: pulse 4s ease-in-out infinite; }
.drift { animation: drift 7s ease-in-out infinite alternate; } .drift2 { animation: drift 9s ease-in-out infinite alternate-reverse; }
.floaty { animation: floaty 5s ease-in-out infinite alternate; }
.tw { animation: tw 3s ease-in-out infinite; } .t2 { animation-delay: .8s; } .t3 { animation-delay: 1.7s; }
.drop { animation: fall 1.1s linear infinite; animation-delay: var(--d); opacity: 0; }
.flake { animation: snowfall 3.2s linear infinite; animation-delay: var(--d); opacity: 0; }
.bolt { animation: flash 3.6s infinite; }
.fogbar { animation: slide 6s ease-in-out infinite alternate; } .f1 { animation-duration: 7.5s; animation-direction: alternate-reverse; } .f2 { animation-duration: 9s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.04); } }
@keyframes drift { from { transform: translateX(-7px); } to { transform: translateX(7px); } }
@keyframes floaty { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
@keyframes tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes fall { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
@keyframes snowfall { 0% { transform: translate(-3px, -6px); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(4px, 14px); } 100% { transform: translate(-3px, 32px); opacity: 0; } }
@keyframes flash { 0%, 55%, 100% { opacity: 1; } 58% { opacity: .15; } 61% { opacity: 1; } 64% { opacity: .3; } 68% { opacity: 1; } }
@keyframes slide { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) { .spin, .pulse, .drift, .drift2, .floaty, .tw, .bolt, .fogbar { animation: none; } .drop, .flake { animation: none; opacity: 1; } }

/* Wolkenfarben der eigenen Symbole */
:root { --cl-l: #ffffff; --cl-m: #c3cfdf; --cl-d: #8d9bb0; --cl-f: #a9b8cf; --fl: #7ab4ec; --mo: #b9c4e0; }
:root[data-theme=dark] { --cl-l: #f3f7fc; --cl-m: #b9c5d4; --cl-d: #8c99ab; --cl-f: #f3f7fc; --fl: #fff; --mo: #e6ebf7; }
.wi { filter: drop-shadow(0 0 .6px rgba(40,60,90,.55)); } :root[data-theme=dark] .wi { filter: none; }
.hero-svg { filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }

/* Meteocons */
.hero-img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.2)); user-select: none; -webkit-user-drag: none; }
img.wi, .chart image { display: inline-block; vertical-align: middle; filter: drop-shadow(0 0 .8px #4f6a92) drop-shadow(0 1px 1px rgba(50,80,120,.25)); } :root[data-theme=dark] img.wi, :root[data-theme=dark] .chart image { filter: none; }
.empty .hero-img { width: 170px; height: 170px; margin: 0 auto 6px; }


/* ===== IPWatch Corporate Design: Grün #66C00D, Blau #111E3B, Schrift DIN-artig (Barlow als freier Ersatz für FF DINPro) ===== */
:root {
  --sans: 'FF DINPro', 'DINPro', 'IPW Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: var(--sans);
  --bg: #eef1f6; --card: #ffffff; --ink: #111E3B; --muted: #5b6a86; --line: rgba(17,30,59,.11);
  --accent: #66C00D; --rain: #2f6fb8; --sel: rgba(17,30,59,.06); --field: #e4e9f1; --night: rgba(17,30,59,.08);
  --shadow: 0 1px 2px rgba(17,30,59,.06), 0 8px 24px rgba(17,30,59,.07);
  --h: #111E3B;
}
:root[data-theme=dark] {
  --bg: #0b1429; --card: #111E3B; --ink: #f2f5fa; --muted: #9aaac6; --line: rgba(255,255,255,.1);
  --accent: #66C00D; --rain: #8dbcf0; --sel: rgba(255,255,255,.07); --field: #16264a; --night: rgba(0,0,0,.3);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.35);
  --h: #66C00D;
}
body { font-weight: 300; }
b, strong, .card h2, h1, .cond, .chip, .seg button, .btn, .link { font-family: var(--sans); }
.mono { letter-spacing: 0; font-weight: 500; }
.card h2 { font-weight: 500; color: var(--h); font-size: 1.15rem; letter-spacing: .01em; display: flex; align-items: center; gap: 9px; }
.card h2::before { content: ''; flex: none; border-left: 9px solid #66C00D; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.tag { background: var(--sel); }
.nc-title { font-weight: 500; }
.nc-title.wet { color: var(--rain); }
.hero { background: linear-gradient(160deg, #111E3B 0%, #1a2d58 100%) !important; border: 0; color: #fff; --ink: #fff; --muted: #b4c2dc; --card: #1f3363; --line: rgba(255,255,255,.14); --rain: #8dbcf0; }
.hero h1 { color: #66C00D; font-weight: 500; letter-spacing: .01em; }
.hero .temp { color: #fff !important; font-weight: 300; }
.hero .cond { font-weight: 500; }
.hero .rainline { background: rgba(255,255,255,.09); font-weight: 500; }
.hero .part { background: rgba(255,255,255,.07); }
.hero .part b { color: #fff !important; }
.hero .ibtn { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
.chip.on { background: #66C00D; color: #0b1429; border-color: #66C00D; }
.btn { background: #66C00D; color: #0b1429; font-weight: 700; letter-spacing: .02em; }
.seg button[aria-pressed=true] { background: #66C00D; color: #0b1429; box-shadow: none; }
#searchForm:focus-within { border-color: #66C00D; }
.ibtn[aria-pressed=true] { color: #66C00D; }
.rbtn { background: #66C00D; color: #0b1429; }
.radar-ui input { accent-color: #66C00D; }
.link { color: var(--ink); text-decoration-color: #66C00D; text-decoration-thickness: 2px; }
.banner { background: #111E3B; color: #fff; border-left: 4px solid #66C00D; }

/* Tagesseite und Vollbild-Radar */
html.noscroll, html.noscroll body { overflow: hidden; }
.page { position: fixed; inset: 0; z-index: 90; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(14px, env(safe-area-inset-left)); }
.page-in { max-width: 720px; margin: 0 auto; display: grid; gap: 14px; padding-bottom: 20px; }
.page-head { display: flex; gap: 12px; align-items: center; padding: 12px 0 2px; position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); z-index: 2; }
.page-head h1 { font-size: 1.5rem; font-weight: 500; color: var(--h); line-height: 1.1; }
.dsum { display: flex; align-items: center; gap: 14px; } .dcond { font-size: 1.3rem; font-weight: 500; }
.dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.dstats > div { background: var(--sel); border-radius: 12px; padding: 10px; display: grid; gap: 2px; } .dstats b { font-size: 1.05rem; }
.dc { width: 100%; height: auto; display: block; overflow: visible; margin-top: 8px; }
.dc .ax { stroke: var(--line); stroke-width: 1; } .dc .al { font: 500 10px var(--sans); fill: var(--muted); } .dc .tl { font: 700 12px var(--sans); }
.dc .night { fill: var(--night); } .dc .tline { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; } .dc .feels { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; }
.dc .rbar { fill: #5aa2f0; } .dc .wline { fill: none; stroke: #66C00D; stroke-width: 2.4; stroke-linejoin: round; } .dc .gust { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; } .dc .arr { fill: var(--muted); } .dc .arc { fill: none; stroke: #ffc83a; stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
.tw { overflow-x: auto; } .htab { width: 100%; border-collapse: collapse; font-size: .9rem; } .htab th { text-align: left; font-weight: 500; color: var(--muted); font-size: .75rem; padding: 4px 6px; } .htab td { padding: 5px 6px; border-top: 1px solid var(--line); white-space: nowrap; } .htab td .wi { display: block; }
.detail .btn { justify-self: start; margin-top: 6px; padding: 8px 14px; font-size: .9rem; }
/* Vollbild-Radar */
.radar.full { position: fixed; inset: 0; z-index: 95; background: var(--bg); display: flex; flex-direction: column; padding: env(safe-area-inset-top) 12px env(safe-area-inset-bottom); }
.radar.full .map { flex: 1; height: auto; min-height: 0; border-radius: 16px; margin-top: 8px; }
.rfull { position: absolute; z-index: 3; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 18px; box-shadow: var(--shadow); }
.radar.full .rfull { top: calc(18px + env(safe-area-inset-top)); left: 22px; }