:root { --bg:#111110; --card:#1b1a17; --card2:#232220; --line:#2e2c27; --ink:#f1ece2; --muted:#9a927f; --gold:#c9a86a; --gold-dim:#8f7646; --green:#7fae6b; --red:#d07a5f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* App-Gerüst: nicht die Seite scrollt, sondern nur der Inhalt (main). Dadurch sitzt die untere Leiste auf dem iPhone
   immer exakt gleich – position:fixed springt dort je nach Seite und Scrollzustand. */
html, body { height:100%; overflow:hidden; }
html { background:#000; }
body { margin:0; background:#000; font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); }
.phone { max-width:480px; margin:0 auto; height:100vh; height:100dvh; background:var(--bg); position:relative; display:flex; flex-direction:column; }
header { flex:0 0 auto; }
main { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.serif { font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif; }
header { padding:calc(12px + env(safe-area-inset-top)) 18px 6px; }
.eyebrow { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); min-height:14px; }
h1 { margin:2px 0 0; font-size:30px; font-weight:600; }
.sub { color:var(--muted); font-size:14px; margin-top:4px; }
main { padding:6px 18px 28px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; margin:12px 0; display:block; color:inherit; text-decoration:none; }
.k { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.flash { border-radius:12px; padding:10px 14px; margin:10px 0; font-size:14px; background:#22301f; color:#cfe6c4; border:1px solid #3f5a37; }
.flash.warn { background:#3a2520; color:#f0cdbf; border-color:#5a3a30; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 14px; min-height:84px; display:flex; flex-direction:column; justify-content:space-between; color:inherit; text-decoration:none; }
.tile .ic { font-size:20px; color:var(--gold); font-weight:700; }
.tile .t { font-size:14px; font-weight:600; } .tile .d { font-size:12px; color:var(--muted); }
.tile.gold { background:linear-gradient(160deg,#2a2419,#1b1a17); border-color:var(--gold-dim); }
.tile.dim { opacity:.45; }
.row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.row:last-child { border-bottom:0; } .row.top { border-top:1px solid var(--line); border-bottom:0; margin-top:8px; }
.row .t { font-weight:600; font-size:15px; } .row .d { color:var(--muted); font-size:12.5px; margin-top:2px; }
.gold { color:var(--gold); }
.meta { font-size:12.5px; color:var(--muted); line-height:1.5; }
.pill { font-size:11px; padding:3px 9px; border-radius:999px; border:1px solid var(--gold-dim); color:var(--gold); white-space:nowrap; background:transparent; font-family:inherit; }
.pill.ok { border-color:#3f5a37; color:var(--green); } .pill.warn { border-color:#5a3a30; color:var(--red); }
.btnpill { cursor:pointer; }
.wx { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-top:4px; }
.wx .big { font-size:34px; font-weight:700; line-height:1; }
.wx .wind { text-align:center; } .wx .arrow { font-size:30px; display:inline-block; color:var(--gold); }
.btn { display:block; width:100%; border:0; border-radius:12px; padding:14px; font-size:16px; font-weight:600; background:var(--gold); color:#1a1711; margin-top:12px; cursor:pointer; text-align:center; text-decoration:none; font-family:inherit; }
.btn.ghost { background:transparent; color:var(--gold); border:1px solid var(--gold-dim); }
.btn.sm { padding:9px; font-size:14px; margin-top:8px; }
.btn.danger { color:var(--red); border-color:#5a3a30; }
.seg { display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--card); }
.seg span { flex:1; text-align:center; padding:8px 4px; font-size:13px; color:var(--muted); cursor:pointer; }
.seg span.on { background:var(--gold); color:#1a1711; font-weight:600; }
label { display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; letter-spacing:.06em; text-transform:uppercase; }
input, select { width:100%; padding:12px; border:1px solid var(--line); border-radius:10px; font-size:16px; background:var(--card2); color:var(--ink); font-family:inherit; }
input[type=date] { -webkit-appearance:none; min-height:46px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid3 { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:8px; }
.seg2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.trenn { border-top:1px dashed var(--line); margin:14px 0 2px; }
.chk.big { justify-content:flex-start; padding:12px; font-size:15px; }
.chips a.chip { font-size:12.5px; padding:6px 11px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--muted); text-decoration:none; }
.chips a.chip.on { background:var(--gold); color:#1a1711; border-color:var(--gold); font-weight:600; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:10px 0; }
.card.ask { border-color:var(--gold-dim); background:linear-gradient(160deg,#2a2419,#1b1a17); }
.row.top0 { padding-top:0; }
.quote { text-align:right; } .quote b { font-size:22px; display:block; } .quote small { color:var(--muted); font-size:11px; }
a.pill { text-decoration:none; }
.windbox { background:rgba(17,17,16,.88); border:1px solid var(--gold-dim); border-radius:12px; padding:6px 10px; color:var(--ink); font-size:13px; display:flex; gap:8px; align-items:center; backdrop-filter:blur(4px); }
.windbox .pfeil { font-size:24px; color:var(--gold); display:inline-block; } .windbox small { color:var(--muted); }
.modusbox { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.modusbox button { background:rgba(17,17,16,.88); color:var(--gold); border:1px solid var(--gold-dim); border-radius:999px; padding:6px 12px; font-size:12.5px; font-family:inherit; cursor:pointer; min-width:74px; }
.modusbox button.on { background:var(--gold); color:#1a1711; font-weight:600; }
.modusbox span { font-size:11px; color:var(--ink); background:rgba(17,17,16,.75); padding:3px 8px; border-radius:999px; }
.modusbox span:empty { display:none; }
.leaflet-top.leaflet-right .modusbox { margin-top:10px; margin-right:10px; }
.stunden { display:flex; gap:6px; overflow-x:auto; padding:8px 0 10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.st { flex:0 0 56px; scroll-snap-align:start; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px 2px; font-size:12px; color:var(--muted); cursor:pointer; }
.st.on { border-color:var(--gold); background:linear-gradient(160deg,#2a2419,#1b1a17); color:var(--ink); }
.st .z { font-weight:600; color:var(--ink); } .st .pf { font-size:18px; color:var(--gold); display:inline-block; line-height:1.2; margin:2px 0; }
.st .a { font-weight:600; } .st .v { font-size:11px; } .st .r { font-size:11px; margin-top:3px; } .st .r.nass { color:#7fb0d6; font-weight:700; } .st .t { font-size:11px; margin-top:2px; }
.regenstrip { margin-top:10px; }
.sum { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }
.sum:last-child { border-bottom:0; } .sum b { font-size:20px; } .sum small { color:var(--muted); font-size:12.5px; display:block; }
.big { font-size:34px; font-weight:800; }
.num { font-weight:700; white-space:nowrap; }
.total { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding-top:10px; }
.total.ok b { color:var(--green); } .total.warn b { color:var(--red); }
.netzleiste { background:#2a2419; border:1px solid var(--gold-dim); border-radius:12px; padding:9px 12px; margin:8px 0 10px; font-size:13px; color:var(--ink); }
.wahl { display:flex; align-items:center; margin:0; padding:0 4px 0 0; }
.wahl input { width:22px; height:22px; accent-color:var(--gold); }
.teil { border-top:1px dashed var(--line); padding-top:4px; margin-top:6px; } .teil:first-child { border-top:0; margin-top:0; }
.revierwahl { float:right; margin:-2px 0 0 10px; }
.revierwahl select { width:auto; padding:5px 26px 5px 10px; font-size:12.5px; border-radius:999px; border:1px solid var(--gold-dim); color:var(--gold); background:var(--card); -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%); background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.linkbox { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:13px; word-break:break-all; color:var(--gold); }
.windcanvas { position:absolute; left:0; top:0; pointer-events:none; z-index:450; }
.winddim { position:absolute; inset:0; pointer-events:none; z-index:440; background:rgba(12,28,34,0.45); }
.windfarbe { position:absolute; left:0; top:0; pointer-events:none; z-index:441; }
.leaflet-tile-pane .wolken { mix-blend-mode:screen; }
details.mehr24 { margin-top:10px; } details.mehr24 summary { cursor:pointer; list-style:none; } details.mehr24 summary::before { content:"▸ "; color:var(--gold); } details.mehr24[open] summary::before { content:"▾ "; }
.balken .b.on .f { outline:2px solid var(--gold); } .balken .b.on span { color:var(--gold); font-weight:700; }
.balken { display:flex; gap:2px; align-items:flex-end; height:70px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:6px 6px 16px; position:relative; }
.balken .b { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.balken .f { background:#7fb0d6; border-radius:3px 3px 0 0; min-height:0; }
.balken .b.vorbei .f { background:#4a5f70; }
.balken .b span { position:absolute; bottom:-14px; left:0; font-size:9px; color:var(--muted); white-space:nowrap; }
.balken .b i { position:absolute; top:-2px; left:0; right:0; text-align:center; font-size:8px; font-style:normal; color:var(--ink); }
.suche { display:flex; gap:8px; align-items:stretch; } .suche input { flex:1; } .suche .btn { width:auto; margin:0; padding:0 16px; }
.row.treffer { cursor:pointer; font-size:14px; }
.galerie { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.kachel { display:block; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--card); text-decoration:none; color:inherit; }
.kachel img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.kachel .bu { font-size:11px; color:var(--muted); padding:5px 8px; }
input[type=file] { padding:10px; font-size:14px; }
.popimg { width:100%; max-width:220px; border-radius:8px; display:block; margin:6px 0; }
.leaflet-popup-content a.pill { display:inline-block; margin-top:4px; }
.winde { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.chk { display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:9px 4px; border:1px solid var(--line); border-radius:10px; background:var(--card2); font-size:14px; color:var(--ink); text-transform:none; letter-spacing:0; }
.chk input { width:auto; }
.chk:has(input:checked) { background:var(--gold); color:#1a1711; border-color:var(--gold); font-weight:600; }
.hint { font-size:12.5px; color:var(--muted); margin-top:8px; }
#map { height:58vh; min-height:340px; border-radius:16px; border:1px solid var(--line); overflow:hidden; background:#0b0b0a; }
.leaflet-container { background:#0b0b0a; font-family:inherit; }
.mk { width:30px; height:30px; border-radius:50%; background:rgba(17,17,16,.85); border:2px solid var(--gold); color:var(--gold); font-size:14px; line-height:26px; text-align:center; font-weight:700; box-shadow:0 2px 8px rgba(0,0,0,.6); }
.mk.k { border-style:dashed; } .mk.on { background:var(--gold); color:#1a1711; }
.leaflet-popup-content-wrapper { background:var(--card); color:var(--ink); border-radius:12px; border:1px solid var(--line); }
.leaflet-popup-tip { background:var(--card); } .leaflet-popup-content { margin:10px 14px; font-size:13px; }
.leaflet-popup-content a { color:var(--gold); }
.legend { display:flex; gap:14px; font-size:12px; color:var(--muted); margin-top:8px; flex-wrap:wrap; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:50%; border:2px solid var(--gold); vertical-align:-2px; margin-right:4px; }
.legend i.k { border-style:dashed; } .legend i.g { background:var(--gold); }
details.dd summary { list-style:none; cursor:pointer; } details.dd summary::-webkit-details-marker { display:none; }
details.dd { position:relative; }
.dd-in { position:absolute; right:0; top:28px; z-index:10; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:10px; width:230px; }
.dd-in .btn { margin-top:6px; }
nav { flex:0 0 auto; width:100%; background:rgba(17,17,16,.98); border-top:1px solid var(--line); display:flex; z-index:800; padding-bottom:env(safe-area-inset-bottom); }
nav a { flex:1; text-align:center; padding:10px 0; font-size:10.5px; color:var(--muted); text-decoration:none; letter-spacing:.04em; touch-action:manipulation; -webkit-tap-highlight-color:rgba(201,168,106,.25); }
nav a .ic { font-size:19px; display:block; margin-bottom:2px; }
nav a.on { color:var(--gold); font-weight:600; }