@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#12325a;--blue:#1769e0;--teal:#0f9ea8;--aqua:#65cbd2;--green:#3eac70;--purple:#7a5de8;--orange:#f27f35;--danger:#e44c4c;--muted:#6a7c91;--line:#dfeaf0;--glass:rgba(255,255,255,.93);--shadow:0 18px 55px rgba(20,55,78,.14);--radius:24px;--bar:74px}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Manrope,system-ui,sans-serif;color:#17324f;background:#dff4f7}body{overflow:hidden}.app-shell{position:relative;height:100dvh;min-height:680px}.glass{background:var(--glass);backdrop-filter:blur(18px);box-shadow:var(--shadow);border:1px solid rgba(213,231,239,.85)}
.topbar{position:absolute;left:0;right:0;top:0;height:var(--bar);z-index:1000;display:flex;align-items:center;gap:34px;padding:0 28px;border-radius:0;border-width:0 0 1px}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;color:var(--navy);text-decoration:none;letter-spacing:-.6px}.brand span span{color:var(--teal)}.brand-mark{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:#e4f5f7;color:var(--blue);font-size:23px}.desktop-nav{display:flex;gap:28px;margin:auto}.desktop-nav a{height:var(--bar);display:flex;align-items:center;color:#4f6379;text-decoration:none;font-weight:600;position:relative}.desktop-nav a.active{color:var(--navy)}.desktop-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--blue);border-radius:3px 3px 0 0}.top-actions{display:flex;align-items:center;gap:10px}.search-mini,.icon-button,.login-link,.avatar{border:0;background:#f0f5f8;color:#496076;border-radius:999px;height:40px;padding:0 14px;font:inherit;text-decoration:none;display:flex;align-items:center;justify-content:center}.icon-button{width:40px;padding:0}.avatar{width:40px;background:#dce9ff;color:#205fae;font-weight:800}.login-link{font-weight:700}.map-stage{position:absolute;inset:var(--bar) 0 0;overflow:hidden}.map-canvas{position:absolute;inset:0;z-index:1;background:#bfe7ef}.map-tint{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(223,248,251,.12),rgba(255,255,255,.04));mix-blend-mode:screen}.leaflet-control-container .leaflet-top,.leaflet-control-container .leaflet-bottom{display:none}.leaflet-pane-baseTiles-pane .leaflet-tile{filter:saturate(.58) brightness(1.08) contrast(.88)}.leaflet-pane-proSeamarks-pane .leaflet-tile{filter:none}
.search-wrap{position:absolute;z-index:500;top:20px;left:50%;transform:translateX(-50%);width:min(560px,42vw)}.big-search{height:54px;border-radius:999px;display:flex;align-items:center;gap:11px;padding:0 20px;background:rgba(255,255,255,.95);box-shadow:0 10px 30px rgba(25,66,92,.16);border:1px solid #e0eaef}.big-search input{border:0;outline:0;background:transparent;width:100%;font:inherit;font-size:15px;color:var(--navy)}.weather-chip{position:absolute;z-index:500;right:24px;top:18px;height:52px;border-radius:18px;padding:0 16px;display:flex;align-items:center;gap:10px;font-size:13px}.weather-chip>span:first-child{color:#f4b31f;font-size:20px}.map-tools{position:absolute;right:24px;top:98px;z-index:500;border-radius:22px;padding:8px;display:grid;gap:8px}.map-tools button{width:44px;height:44px;border:0;background:#fff;border-radius:50%;box-shadow:0 5px 13px rgba(20,50,80,.09);font-size:20px;color:#315d7e;cursor:pointer}.bottom-nav{position:absolute;z-index:1000;left:50%;bottom:12px;transform:translateX(-50%);height:62px;border-radius:24px;padding:7px;display:flex;gap:5px}.bottom-nav a{min-width:112px;padding:0 18px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:#52677b;font-size:13px;font-weight:600}.bottom-nav a.active{background:#eef7f8;color:var(--teal);box-shadow:inset 0 0 0 1px #dbecef}.bottom-nav a span{font-size:18px}.filter-row{position:absolute;z-index:550;top:88px;left:50%;transform:translateX(-50%);display:flex;gap:10px}.filter-chip{border:1px solid #e2ecf0;background:rgba(255,255,255,.95);height:46px;padding:0 15px;border-radius:999px;display:flex;align-items:center;gap:8px;font:600 13px Manrope;box-shadow:0 8px 22px rgba(31,67,89,.11);cursor:pointer}.filter-chip:not(.active){opacity:.55;filter:grayscale(.8)}.filter-chip small{min-width:19px;height:19px;border-radius:999px;background:#edf2f5;display:grid;place-items:center}.chip-icon,.add-icon{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:white;font-weight:800}.blue{background:var(--blue)}.teal{background:var(--teal)}.purple{background:var(--purple)}.orange{background:var(--orange)}.green{background:var(--green)}
.onboarding-card{position:absolute;z-index:520;left:22px;top:90px;width:348px;border-radius:26px;padding:24px}.close-x{position:absolute;right:14px;top:12px;border:0;background:transparent;font-size:25px;color:#38526c;cursor:pointer}.eyebrow{text-transform:uppercase;letter-spacing:.11em;color:var(--teal);font-weight:800;font-size:10px;margin:0 0 8px}.onboarding-card h1,.planner-panel h1,.wiki-panel h1,.community-intro h1,.profile-card h1,.login-card h1{font-size:27px;line-height:1.12;letter-spacing:-.7px;color:#16375d;margin:0 0 12px}.onboarding-card>p:not(.eyebrow){color:#60758b;line-height:1.6;font-size:14px}.boat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:22px 0}.boat-grid span{display:grid;gap:6px;text-align:center;font-size:23px}.boat-grid small{font-size:9px;color:#60758b}.primary-button{height:48px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--teal),#138ca1);color:#fff;padding:0 20px;font:700 14px Manrope;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary-button.small{height:38px}.primary-button.inline{margin-top:10px}.tiny-note{text-align:center;font-size:11px;color:#73869a;margin-top:14px;line-height:1.5}
.info-dock{position:absolute;z-index:540;left:22px;right:22px;bottom:88px;height:150px;border-radius:25px;display:grid;grid-template-columns:170px minmax(220px,1.4fr) repeat(4,minmax(150px,1fr)) 46px;align-items:center;padding:14px 18px;gap:16px}.dock-media{height:112px;border-radius:18px;background:linear-gradient(160deg,#8fd4db,#cfeeb9 65%,#a4c8aa);position:relative;overflow:hidden}.dock-media:before{content:"";position:absolute;left:-20%;right:-20%;bottom:18px;height:32px;background:rgba(20,130,170,.55);transform:rotate(-5deg)}.dock-media span{position:absolute;right:10px;bottom:10px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#2466b7;border:4px solid white}.dock-title h2{margin:0 0 5px;color:#16375d;font-size:20px}.dock-title p:not(.eyebrow){margin:0 0 8px;color:#6e8194;font-size:12px}.distance-pill{background:#e5f5f7;color:#178ba0;border-radius:999px;padding:6px 10px;font-size:11px}.dock-stat{padding-left:18px;border-left:1px solid #e4edf1;display:grid;gap:8px;align-content:center}.dock-stat span:first-child{font-size:11px;color:#65798d}.dock-stat strong{font-size:13px;color:#203c59}.dock-stat small{font-size:10px;color:#6f8294}.status-pill{width:max-content;border-radius:999px;padding:7px 10px;background:#e7f7ed;color:#25894d}.status-pill.warning{background:#fff3df;color:#aa6817}.dock-expand{border:0;width:40px;height:40px;border-radius:50%;background:#f0f5f7;color:#52697e;font-size:18px}
.planner-panel{position:absolute;z-index:550;left:24px;top:22px;bottom:92px;width:390px;border-radius:28px;padding:22px;overflow:auto}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;position:relative}.panel-heading h1{margin-bottom:4px}.panel-heading p{margin-top:0;color:#72869a;font-size:12px}.collapse-button{border:0;background:transparent;font-size:18px}.route-field{display:grid;grid-template-columns:20px 1fr;gap:9px;margin:14px 0}.route-field label{font-size:12px;font-weight:700;color:#2f4b67}.route-field input{display:block;width:100%;height:42px;border:1px solid #dce7ed;border-radius:10px;padding:0 12px;font:500 12px Manrope;color:#2d4b66;margin-top:7px;background:#fff}.route-dot{width:9px;height:9px;border-radius:50%;margin-top:4px}.route-dot.start{background:#1fba50}.route-dot.end{background:#e84242}.route-label{display:flex;justify-content:space-between;font-size:12px;font-weight:800;margin:10px 0}.route-label small{font-weight:500;color:#7b8da0}.stop-card{display:grid;grid-template-columns:18px 1fr 20px 20px;gap:8px;align-items:center;border:1px solid #e1e9ed;border-radius:12px;padding:10px;margin:6px 0;font-size:12px}.stop-card div{display:grid}.stop-card small{color:#7c8fa1}.stop-card button{border:0;background:none;font-size:18px;color:#697e91}.text-button{border:0;background:transparent;color:var(--blue);font:600 11px Manrope;padding:9px 0;cursor:pointer}.planner-section{margin:18px 0}.planner-section h3,.profile-head h3,.waterway-card h3{font-size:12px;margin:0 0 9px;color:#2d465f}.segmented{display:flex;gap:7px;flex-wrap:wrap}.segmented button{height:35px;border:1px solid #dfe7ed;background:#fff;color:#53687c;border-radius:11px;padding:0 11px;font:600 10px Manrope}.segmented button.active{border-color:#7da9ff;background:#f2f7ff;color:#1769e0}.route-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#f7fafb;border:1px solid #e5edf1;border-radius:14px;padding:14px}.route-summary div{display:grid;gap:5px}.route-summary small{font-size:9px;color:#7a8da0}.route-summary strong{font-size:13px}.event-profile{margin-top:18px}.profile-head{display:flex;justify-content:space-between}.profile-track{height:78px;position:relative;border-bottom:1px solid #cfdfe7;margin-top:12px;background:linear-gradient(180deg,rgba(225,244,255,.08),rgba(65,143,228,.1));overflow:hidden}.profile-track i{position:absolute;left:0;right:0;bottom:22px;height:2px;background:var(--blue);transform:skewY(2deg)}.profile-track span{position:absolute;bottom:12px;font-size:13px;text-align:center;color:#2a64ae}.profile-track small{display:block;font-size:8px;color:#6e8295}.lock-event{background:#fff;border-radius:10px;padding:4px 6px;bottom:5px!important}.profile-legend{font-size:8px;color:#75889a;margin-top:6px}.planner-actions{display:grid;grid-template-columns:1fr 46px 46px;gap:8px;margin-top:18px}.square-button{border:1px solid #dce7ed;background:#fff;border-radius:14px;font-size:17px}.waterway-card{position:absolute;z-index:530;right:24px;top:290px;width:292px;border-radius:24px;padding:22px}.waterway-card h2{font-size:20px;margin:4px 0}.waterway-card>p{font-size:11px;line-height:1.5;color:#62768a}.waterway-card hr{border:0;border-top:1px solid #e5edf1;margin:18px 0}.water-icon{display:inline-grid;place-items:center;width:35px;height:35px;border-radius:50%;background:var(--blue);color:white}.big-metric,.rule-row{display:flex;gap:12px;align-items:center}.big-metric>span,.rule-row>span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#edf2f6;font-size:22px}.big-metric div{display:grid}.big-metric small,.weather-details small{font-size:9px;color:#75899b}.rule-row p{font-size:10px;line-height:1.5;margin:0}.weather-details{display:grid;grid-template-columns:1fr 1fr;gap:12px}.weather-details div{display:grid;grid-template-columns:auto 1fr;column-gap:5px;align-items:center;font-size:12px}.weather-details small{grid-column:1/3;margin-top:4px}
.wiki-panel{position:absolute;z-index:550;left:24px;top:22px;bottom:92px;width:374px;border-radius:28px;padding:22px;overflow:auto}.wiki-list{display:grid;gap:10px;margin-top:18px}.wiki-card{width:100%;border:1px solid #dfe9ef;background:#fff;border-radius:16px;padding:10px;display:grid;grid-template-columns:72px 1fr 20px;gap:10px;text-align:left;align-items:center;color:#1f3c5b}.wiki-illustration{height:62px;border-radius:12px;background:linear-gradient(145deg,#e3f5fb,#d5ebf1);display:grid;place-items:center;font-size:28px}.wiki-card span:nth-child(2){display:grid;gap:7px}.wiki-card strong{font-size:13px}.wiki-card small{font-size:10px;line-height:1.45;color:#6d8094}.wiki-card b{font-size:21px}.import-box{margin-top:18px;border-radius:16px;padding:15px;background:#eef7ff;border:1px solid #dcecf8}.import-box>strong{font-size:12px;color:#2467b1}.import-box p{font-size:10px;line-height:1.5;color:#5f7892}.import-box>div{display:flex;align-items:center;gap:6px}.import-logo{width:34px;height:34px;border-radius:10px;background:#fff;display:grid;place-items:center;font-size:8px;font-weight:800;color:#456}.community-sheet{position:absolute;z-index:540;left:420px;right:24px;bottom:92px;border-radius:28px;padding:24px;max-height:410px;overflow:auto}.sheet-grabber{width:50px;height:4px;border-radius:999px;background:#ccd8df;margin:-12px auto 12px}.community-head{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:18px}.community-head h2{margin:0;color:#183a5d;font-size:18px}.community-stats{display:flex;gap:16px;font-size:10px;color:#516a80}.outline-button{border:1px solid #cfe0eb;background:white;color:#286aba;border-radius:12px;height:38px;padding:0 14px;font:700 10px Manrope}.community-sheet>h3{font-size:12px;margin:16px 0 4px}.community-sheet>p{font-size:10px;color:#6b8093;margin:0 0 12px}.add-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.add-grid button{min-height:132px;border:1px solid #dfe8ee;background:white;border-radius:15px;padding:12px;text-align:left;display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;color:#1f3d5b}.add-grid strong{font-size:11px}.add-grid small{font-size:9px;line-height:1.45;color:#6d8194}.add-grid b{font-size:9px;color:var(--blue)}.quality-strip{margin-top:12px;border-radius:14px;background:#f4f8fa;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.quality-strip span{font-size:10px;display:grid;grid-template-columns:auto 1fr;column-gap:5px}.quality-strip small{grid-column:2;font-size:8px;color:#6e8194;margin-top:3px}.community-intro{position:absolute;z-index:530;left:24px;top:22px;width:330px;border-radius:25px;padding:22px}.community-intro p:not(.eyebrow){font-size:12px;line-height:1.55;color:#698095}.trust-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}.trust-row span{font-size:9px;border-radius:999px;background:#f0f6f7;padding:6px 9px}.modal-backdrop{position:absolute;inset:0;z-index:2000;background:rgba(12,35,54,.32);display:grid;place-items:center}.modal-backdrop[hidden]{display:none}.poi-modal{position:relative;width:min(440px,calc(100vw - 30px));border-radius:24px;padding:26px}.poi-modal h2{margin:0 0 8px}.poi-modal>p{font-size:11px;color:#6c8194;line-height:1.5}.poi-modal label,.login-card label{display:grid;gap:7px;font-size:11px;font-weight:700;margin:12px 0}.poi-modal input,.poi-modal textarea,.login-card input{border:1px solid #dbe6ec;background:white;border-radius:12px;padding:12px;font:inherit}.coord-preview{background:#f3f8fa;border-radius:10px;padding:10px;font-size:10px;color:#61788d;margin-bottom:12px}.profile-card,.login-card{position:absolute;z-index:540;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 34px));border-radius:28px;padding:30px;text-align:center}.profile-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#e8f3ff;color:#2469bb;font-size:28px;font-weight:800;margin:0 auto 15px}.profile-card>p:not(.eyebrow),.login-card>p:not(.eyebrow){color:#6d8295;font-size:12px}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}.profile-grid div{background:#f4f8fa;border-radius:15px;padding:15px;display:grid;gap:4px}.profile-grid small{font-size:8px;color:#708397}.login-card{text-align:left}.login-card .eyebrow,.login-card h1,.login-card>p{text-align:center}.login-card form{margin-top:20px}.login-card .primary-button{width:100%;margin-top:6px}.form-message{font-size:11px;color:#c34747;margin-top:10px}.toast{position:fixed;z-index:5000;left:50%;bottom:90px;transform:translate(-50%,20px);opacity:0;background:#153b5c;color:white;padding:11px 16px;border-radius:13px;font-size:11px;transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.sl-marker{width:34px;height:34px;border-radius:50% 50% 50% 10%;transform:rotate(-45deg);display:grid;place-items:center;border:3px solid white;box-shadow:0 4px 10px rgba(18,51,85,.25)}.sl-marker>span{transform:rotate(45deg);color:white;font-size:14px}.sl-marker.mooring,.sl-marker.marina{background:#1769e0}.sl-marker.slipway{background:#228b9b}.sl-marker.cove{background:#2aa7a6}.sl-marker.shopping{background:#35a768}.sl-marker.hazard{background:#ef7b34}.sl-marker.fuel{background:#7d62dd}.sl-marker.lock{background:#325da8}.route-label-map{background:#fff;border:0!important;box-shadow:0 6px 18px rgba(33,70,94,.15);border-radius:10px!important;padding:4px 8px!important;font:700 10px Manrope!important;color:#28435f!important}
@media(max-width:1100px){.desktop-nav{display:none}.topbar{gap:15px}.brand{margin-right:auto}.info-dock{grid-template-columns:100px 1fr repeat(2,1fr);height:auto}.dock-stat:nth-of-type(n+4){display:none}.waterway-card{display:none}.community-sheet{left:24px}.search-wrap{width:52vw}.bottom-nav a{min-width:90px}.add-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){:root{--bar:64px}.topbar{padding:0 12px}.brand{font-size:19px}.brand-mark{width:34px;height:34px}.search-mini span,.weather-chip span:nth-of-type(2),.login-link{display:none}.map-stage{inset:var(--bar) 0 0}.search-wrap{top:12px;width:calc(100vw - 108px);left:12px;transform:none}.big-search{height:46px}.weather-chip{right:10px;top:12px;width:78px;height:46px;padding:0 10px}.map-tools{right:10px;top:72px}.filter-row{left:10px;right:10px;top:70px;transform:none;overflow:auto;padding-bottom:5px;justify-content:flex-start}.filter-chip{height:40px;white-space:nowrap}.onboarding-card,.community-intro{left:10px;right:10px;top:122px;width:auto}.info-dock{left:10px;right:10px;bottom:78px;padding:10px;grid-template-columns:78px 1fr;height:112px}.dock-media{height:88px}.dock-stat,.dock-expand{display:none}.bottom-nav{left:8px;right:8px;transform:none;bottom:8px;height:60px;justify-content:space-around}.bottom-nav a{min-width:0;padding:0 10px;display:grid;gap:1px;text-align:center;font-size:9px}.planner-panel,.wiki-panel{left:10px;right:10px;top:70px;bottom:78px;width:auto}.community-sheet{left:10px;right:10px;bottom:78px;max-height:47vh}.community-head{grid-template-columns:1fr auto}.community-stats{display:none}.add-grid{display:flex;overflow:auto}.add-grid button{min-width:145px}.quality-strip{grid-template-columns:1fr}.profile-card,.login-card{top:47%}.top-actions{gap:4px}}

/* ========================================================================== 
   SkipperLeicht v0.1.1 – map header + dynamic marker detail dock
   ========================================================================== */
.topbar{position:fixed}
body[data-view="map"] .map-stage{inset:0}
body:not([data-view="map"]) .map-stage{inset:var(--bar) 0 0}

/* Kartenansicht: Karte läuft unter dem Header, der nach unten transparent ausläuft. */
.map-topbar{
  height:88px;
  align-items:flex-start;
  padding-top:12px;
  border:0;
  box-shadow:none;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 52%,rgba(255,255,255,0) 100%);
  backdrop-filter:none;
  pointer-events:none;
}
.map-topbar>*{pointer-events:auto}
.map-topbar .brand{height:52px;flex:0 0 auto}
.map-header-search{flex:1;display:flex;justify-content:center;min-width:220px;margin:0 18px}
.map-header-search .big-search{width:min(640px,52vw);height:52px}
.map-topbar .top-actions{height:52px;flex:0 0 auto}
body[data-view="map"] .filter-row{top:72px}
body[data-view="map"] .weather-chip{top:74px}
body[data-view="map"] .map-tools{top:138px}
body[data-view="map"] .onboarding-card{top:132px}

/* Normale App-Seiten: feste, deckende Kopfzeile mit Menü. */
.app-topbar{background:rgba(255,255,255,.96)}
.app-topbar .desktop-nav{display:flex}

/* Die alte Demo-Schleusenleiste ist jetzt eine universelle Marker-Detailleiste. */
.marker-detail-dock{
  position:absolute;
  z-index:570;
  left:22px;
  right:22px;
  bottom:88px;
  min-height:132px;
  border-radius:25px;
  display:grid;
  grid-template-columns:88px minmax(260px,1.2fr) minmax(0,2.5fr);
  align-items:center;
  gap:18px;
  padding:16px 54px 16px 16px;
  transform:translateY(16px);
  opacity:0;
  transition:opacity .18s ease,transform .18s ease;
}
.marker-detail-dock[hidden]{display:none}
.marker-detail-dock.visible{opacity:1;transform:translateY(0)}
.marker-detail-close{
  position:absolute;
  right:16px;
  top:14px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f1f6f8;
  color:#3b5871;
  font:500 23px/1 Manrope;
  cursor:pointer;
}
.marker-detail-icon{
  width:78px;
  height:78px;
  border-radius:22px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#e5f4fb,#dceef4);
  color:var(--blue);
  font-size:31px;
  box-shadow:inset 0 0 0 1px rgba(205,225,235,.8);
}
.marker-detail-icon.mooring,.marker-detail-icon.marina,.marker-detail-icon.lock{background:#e9f2ff;color:var(--blue)}
.marker-detail-icon.cove{background:#e5f7f6;color:var(--teal)}
.marker-detail-icon.shopping,.marker-detail-icon.camping{background:#eaf7ee;color:var(--green)}
.marker-detail-icon.hazard{background:#fff0e7;color:var(--orange)}
.marker-detail-icon.fuel{background:#f0ebff;color:var(--purple)}
.marker-detail-title{min-width:0}
.marker-detail-title .eyebrow{margin-bottom:5px}
.marker-detail-title h2{margin:0 0 5px;color:#16375d;font-size:20px;letter-spacing:-.35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marker-detail-title>p:not(.eyebrow){margin:0;color:#6b7f92;font-size:11px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.marker-detail-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.detail-badge{display:inline-flex;align-items:center;min-height:25px;padding:0 9px;border-radius:999px;background:#eef4f7;color:#5f7487;font-size:9px;font-weight:700}
.detail-badge.verified{background:#e7f7ed;color:#25894d}
.marker-detail-stats{display:grid;grid-template-columns:repeat(4,minmax(125px,1fr));align-self:stretch;align-items:center}
.marker-detail-stat{min-width:0;min-height:72px;padding:4px 16px;border-left:1px solid #e4edf1;display:grid;align-content:center;gap:7px}
.marker-detail-stat>span:first-child{font-size:10px;color:#6c8092}
.marker-detail-stat strong{font-size:12px;color:#203c59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marker-detail-stat small{font-size:9px;color:#7b8d9e}
.marker-detail-stat .status-pill{font-size:10px;display:inline-flex;align-items:center}
.status-pill.closed{background:#fdeaea;color:#b43e3e}

@media(max-width:1180px){
  body[data-view="map"] .filter-row{left:410px;right:150px;transform:none;overflow:auto;justify-content:flex-start;padding-bottom:5px}
  .marker-detail-dock{grid-template-columns:76px minmax(220px,1fr) minmax(0,2fr)}
  .marker-detail-icon{width:68px;height:68px}
  .marker-detail-stats{grid-template-columns:repeat(3,minmax(110px,1fr))}
  .marker-detail-stat:nth-child(4){display:none}
}

@media(max-width:900px){
  body:not([data-view="map"]) .app-topbar{height:108px;flex-wrap:wrap;align-content:flex-start;padding-top:8px;gap:8px 14px}
  body:not([data-view="map"]) .app-topbar .brand{height:46px;margin-right:auto}
  body:not([data-view="map"]) .app-topbar .top-actions{height:46px}
  body:not([data-view="map"]) .desktop-nav{order:3;width:100%;height:46px;margin:0;justify-content:center;gap:24px;overflow-x:auto;overflow-y:hidden}
  body:not([data-view="map"]) .desktop-nav a{height:46px;white-space:nowrap;font-size:12px}
  body:not([data-view="map"]) .map-stage{inset:108px 0 0}
  .marker-detail-dock{grid-template-columns:66px 1fr;padding-right:48px}
  .marker-detail-icon{width:60px;height:60px;border-radius:18px;font-size:25px}
  .marker-detail-stats{grid-column:1/-1;grid-template-columns:repeat(3,1fr);border-top:1px solid #e5edf1;padding-top:10px}
  .marker-detail-stat:first-child{border-left:0}
}

@media(max-width:720px){
  body[data-view="map"] .map-stage{inset:0}
  .map-topbar{height:72px;padding:8px 10px 0;gap:8px}
  .map-topbar .brand{height:48px}
  .map-topbar .brand-name{display:none}
  .map-topbar .brand-mark{width:40px;height:40px}
  .map-header-search{margin:0;min-width:0}
  .map-header-search .big-search{width:100%;height:46px;padding:0 14px}
  .map-header-search .big-search input{font-size:12px}
  .map-topbar .top-actions{height:46px}
  .map-topbar .icon-button{display:none}
  body[data-view="map"] .filter-row{left:10px;right:10px;top:64px;transform:none}
  body[data-view="map"] .weather-chip{display:none}
  body[data-view="map"] .map-tools{top:116px}
  body[data-view="map"] .onboarding-card{top:112px}
  .marker-detail-dock{left:10px;right:10px;bottom:78px;min-height:0;border-radius:20px;padding:12px 42px 12px 12px;gap:11px;grid-template-columns:52px 1fr}
  .marker-detail-icon{width:50px;height:50px;border-radius:15px;font-size:21px}
  .marker-detail-title h2{font-size:16px}
  .marker-detail-title>p:not(.eyebrow){font-size:9px;-webkit-line-clamp:1}
  .marker-detail-badges{margin-top:5px}
  .marker-detail-stats{display:flex;overflow-x:auto;gap:0;padding-top:8px}
  .marker-detail-stat{min-width:145px;min-height:58px;padding:2px 11px}
  .marker-detail-stat:nth-child(4){display:grid}
  .marker-detail-close{right:9px;top:9px;width:28px;height:28px;font-size:19px}
  body:not([data-view="map"]) .planner-panel,
  body:not([data-view="map"]) .wiki-panel{top:10px}
  body:not([data-view="map"]) .community-intro{top:10px}
}

/* Auf Inhaltsseiten wird der durch die entfernte Bottom-Navigation frei gewordene Platz genutzt. */
body:not([data-view="map"]) .planner-panel,
body:not([data-view="map"]) .wiki-panel{bottom:24px}
body:not([data-view="map"]) .community-sheet{bottom:24px}
@media(max-width:720px){
  body:not([data-view="map"]) .planner-panel,
  body:not([data-view="map"]) .wiki-panel{bottom:10px}
  body:not([data-view="map"]) .community-sheet{bottom:10px}
}

/* ========================================================================== 
   SkipperLeicht v0.1.2 – Beginner Nautical Map
   ========================================================================== */
.map-tint{
  background:
    linear-gradient(180deg,rgba(230,251,252,.13),rgba(255,255,255,.03)),
    radial-gradient(circle at 62% 44%,rgba(73,199,214,.07),transparent 42%);
  mix-blend-mode:screen;
}
.map-tools button.active{background:#e7f6f8;color:var(--teal);box-shadow:inset 0 0 0 1px #cbe9ed}
.map-layer-panel{
  position:absolute;
  z-index:900;
  right:82px;
  top:138px;
  width:330px;
  border-radius:22px;
  padding:17px;
  max-height:calc(100% - 170px);
  overflow:auto;
}
.map-layer-panel[hidden]{display:none}
.layer-panel-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:9px}
.layer-panel-head h2{margin:0;color:#17395b;font-size:18px;letter-spacing:-.3px}
.layer-panel-head .eyebrow{margin-bottom:3px}
.layer-panel-head button{width:32px;height:32px;border:0;border-radius:50%;background:#eff5f7;color:#466078;font-size:21px;cursor:pointer}
.layer-switch{display:grid;grid-template-columns:40px 1fr;gap:11px;align-items:center;padding:11px 4px;border-top:1px solid #e7eef2;cursor:pointer}
.layer-switch input{position:absolute;opacity:0;pointer-events:none}
.layer-switch>span{width:38px;height:22px;border-radius:999px;background:#d8e3e8;position:relative;transition:.18s ease}
.layer-switch>span:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(19,48,73,.18);transition:.18s ease}
.layer-switch input:checked+span{background:#28a8b3}
.layer-switch input:checked+span:after{transform:translateX(16px)}
.layer-switch div{display:grid;gap:3px;min-width:0}
.layer-switch strong{font-size:11px;color:#2c4964}
.layer-switch small{font-size:9px;color:#7a8d9e;line-height:1.35}
.layer-switch.pro-layer{margin-top:3px;background:#f7f9fb;border-radius:13px;padding-left:9px;padding-right:9px}
.layer-legend{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 8px;padding:10px;border-radius:13px;background:#f4f9fa;color:#60778b;font-size:8px;font-weight:700}
.layer-legend span{display:flex;align-items:center;gap:5px}
.legend-line{width:22px;height:3px;border-radius:999px;background:repeating-linear-gradient(90deg,#13a8bd 0 8px,transparent 8px 13px);box-shadow:0 0 0 2px #fff}
.legend-buoy{width:9px;height:16px;display:inline-block;clip-path:polygon(50% 0,80% 37%,72% 100%,28% 100%,20% 37%)}
.legend-buoy.red{background:#dd554f}.legend-buoy.green{background:#249b68}
.legend-zone{width:18px;height:12px;border:1px dashed #e36b50;background:#ffe0d7;border-radius:3px}
.layer-disclaimer{margin:9px 2px 0;color:#8293a1;font-size:8px;line-height:1.45}
.map-attribution{position:absolute;z-index:420;right:18px;bottom:15px;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.78);color:#74889a;font-size:8px;backdrop-filter:blur(9px)}.map-attribution a{color:inherit;text-decoration:none}.map-attribution a:hover{text-decoration:underline}
body[data-view="map"] .map-attribution{bottom:4px}

/* Simplified fairway and nautical markers. */
.sl-buoy{position:relative;width:26px;height:40px;filter:drop-shadow(0 4px 5px rgba(21,49,67,.22))}
.sl-buoy>span{position:absolute;left:8px;top:7px;width:10px;height:23px;clip-path:polygon(50% 0,86% 29%,73% 100%,27% 100%,14% 29%);border:2px solid #fff}
.sl-buoy>i{position:absolute;left:5px;bottom:3px;width:16px;height:4px;border-radius:50%;background:rgba(18,67,89,.25)}
.sl-buoy.red>span{background:#de524e}.sl-buoy.green>span{background:#239663}
.sl-bridge-marker{width:64px;height:40px;border-radius:13px;background:rgba(255,255,255,.96);border:1px solid #d9e7ed;box-shadow:0 6px 16px rgba(21,59,80,.17);display:grid;grid-template-columns:22px 1fr;align-items:center;padding:0 7px;color:#244f76}
.sl-bridge-marker>span{font-size:18px;color:#1769e0}
.sl-bridge-marker>strong{font-size:9px;white-space:nowrap}
.sl-water-info{width:32px;height:32px;border-radius:50%;background:#1769e0;border:3px solid #fff;color:#fff;display:grid;place-items:center;font:800 13px Manrope;box-shadow:0 4px 12px rgba(22,63,96,.24)}
.sl-regulation-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 5px 13px rgba(28,58,78,.2);font:800 11px Manrope;background:#ee983a;color:#fff}
.sl-regulation-badge.no_wake{background:#7659cf;font-size:17px}
.sl-regulation-badge.restricted{background:#dc5853;font-size:15px}

/* v0.1.3 – vector basemap / nautical focus. */
.leaflet-pane-baseTiles-pane .maplibregl-map,.leaflet-pane-baseTiles-pane .maplibregl-canvas-container,.leaflet-pane-baseTiles-pane canvas{width:100%;height:100%}
.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{display:none!important}
.layer-switch.land-layer{margin-top:3px;background:rgba(244,248,249,.68);border-radius:13px;padding-left:9px;padding-right:9px}
body[data-view="map"] .map-attribution{z-index:430;background:rgba(255,255,255,.7);box-shadow:0 1px 7px rgba(27,61,78,.05)}

/* Dynamic dock colors for nautical feature types. */
.marker-detail-icon.fairway,.marker-detail-icon.waterway-info{background:#e4f7f8;color:#0c98a8}
.marker-detail-icon.bridge{background:#e8f1ff;color:#1769e0}
.marker-detail-icon.buoy-red{background:#fdecea;color:#cf4b46}
.marker-detail-icon.buoy-green{background:#e8f6ee;color:#238c60}
.marker-detail-icon.speed-zone{background:#fff2df;color:#c9741d}
.marker-detail-icon.no-wake{background:#efeaff;color:#6a50c5}
.marker-detail-icon.restricted{background:#fdebea;color:#c94a45}

@media(max-width:1100px){
  .map-layer-panel{right:76px;width:310px}
}
@media(max-width:720px){
  .map-layer-panel{left:10px;right:64px;top:116px;width:auto;max-height:calc(100% - 210px);overflow:auto;border-radius:18px;padding:14px}
  .layer-switch{padding-top:9px;padding-bottom:9px}
  .map-attribution{right:8px;bottom:4px;font-size:7px;max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body:not([data-view="map"]) .map-attribution{bottom:8px}
}

/* ========================================================================== 
   SkipperLeicht v0.1.4 – Waterway hierarchy & fairway guidance
   ========================================================================== */
.legend-line.main{
  width:24px;height:4px;border-radius:999px;
  background:repeating-linear-gradient(90deg,#0aa1b5 0 14px,transparent 14px 20px);
  box-shadow:0 0 0 2px #fff;
}
.legend-line.secondary{
  width:24px;height:3px;border-radius:999px;
  background:repeating-linear-gradient(90deg,#63bcc8 0 5px,transparent 5px 10px);
  box-shadow:0 0 0 1.5px #fff;
}
.legend-arrow{font-style:normal;color:#0a94a8;font-size:12px;line-height:1;transform:translateY(-.5px)}
.sl-fairway-arrow{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.82);border:1px solid rgba(111,191,202,.32);
  box-shadow:0 3px 9px rgba(22,74,91,.10);backdrop-filter:blur(3px);
}
.sl-fairway-arrow span{
  display:block;color:#078fa5;font:800 14px/1 Manrope;
  transform:rotate(var(--sl-bearing));transform-origin:center;
}
.sl-fairway-arrow.secondary{width:22px;height:22px;margin:2px;background:rgba(255,255,255,.68);box-shadow:none}
.sl-fairway-arrow.secondary span{font-size:11px;color:#55aeba;opacity:.78}

/* Water remains the primary visual subject; land infrastructure recedes further. */
body[data-view="map"] .map-tint{
  background:
    linear-gradient(180deg,rgba(232,250,252,.07),rgba(255,255,255,.01)),
    radial-gradient(circle at 58% 46%,rgba(31,172,193,.045),transparent 48%);
}

/* v0.1.6 – staff shortcut */
.admin-link{height:40px;padding:0 12px;border-radius:999px;background:#e6f4f5;color:#187f89;text-decoration:none;display:flex;align-items:center;font-size:10px;font-weight:800;border:1px solid #d4e9eb}


/* ========================================================================== 
   SkipperLeicht v0.1.8 – Nautical filters + marker clustering
   ========================================================================== */
.nautical-filter-row{
  position:absolute;z-index:548;top:120px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;align-items:center;max-width:calc(100% - 470px);
}
.nautical-filter-chip{
  height:38px;padding:0 12px 0 8px;border-radius:999px;border:1px solid rgba(201,224,230,.92);
  background:rgba(247,252,253,.92);backdrop-filter:blur(12px);box-shadow:0 5px 15px rgba(28,72,89,.08);
  display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;color:#436173;
  font:700 10px Manrope;transition:opacity .16s ease,transform .16s ease,background .16s ease;
}
.nautical-filter-chip:not(.active){opacity:.42;filter:saturate(.35)}
.nautical-filter-chip:active{transform:scale(.98)}
.nautical-filter-chip small{min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#eaf2f4;display:grid;place-items:center;color:#6d8390;font-size:8px}
.nautical-chip-icon{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;font:800 12px Manrope}
.nautical-chip-icon.fairway{background:#e2f5f7;color:#078ea2}
.nautical-chip-icon.buoy{background:linear-gradient(90deg,#f9e6e5 0 50%,#e3f2e8 50%);color:#677d87}
.nautical-chip-icon.bridge{background:#e7effb;color:#2664a5}
.nautical-chip-icon.lock{background:#e8effb;color:#325da8}
.nautical-chip-icon.regulation{background:#fff0e2;color:#c66e1b}
body[data-view="map"] .onboarding-card{top:176px}

/* Buoys intentionally recede until the user zooms in. */
.sl-buoy{position:relative;width:18px;height:29px;filter:drop-shadow(0 2px 3px rgba(21,49,67,.12));opacity:.74;transition:opacity .15s ease,transform .15s ease}
.sl-buoy>span{position:absolute;left:6px;top:5px;width:6px;height:17px;clip-path:polygon(50% 0,84% 28%,72% 100%,28% 100%,16% 28%);border:1px solid rgba(255,255,255,.76)}
.sl-buoy>i{position:absolute;left:4px;bottom:2px;width:10px;height:3px;border-radius:50%;background:rgba(18,67,89,.14)}
.sl-buoy.red>span{background:#d85f5b}.sl-buoy.green>span{background:#3a9b70}
.leaflet-marker-icon:hover .sl-buoy{opacity:1;transform:scale(1.08)}

/* Neutral, category-specific clusters. They communicate density without dominating the map. */
.sl-cluster{width:42px;height:42px;border-radius:50%;display:grid;grid-template-columns:auto auto;gap:3px;place-items:center;align-content:center;justify-content:center;background:rgba(255,255,255,.9);border:2px solid rgba(125,174,188,.35);box-shadow:0 4px 12px rgba(28,67,83,.13);backdrop-filter:blur(7px);color:#55717f}
.sl-cluster span{font:800 11px/1 Manrope;opacity:.72}.sl-cluster strong{font:800 10px/1 Manrope}
.sl-cluster.poi{border-color:rgba(40,126,180,.3);color:#397397}
.sl-cluster.locks{border-color:rgba(50,93,168,.3);color:#325da8}
.sl-cluster.buoys{width:36px;height:36px;margin:3px;border-color:rgba(50,150,105,.25);color:#497d69;background:rgba(249,253,251,.88)}
.sl-cluster.buoys span{font-size:12px}.sl-cluster.buoys strong{font-size:9px}
.sl-cluster.infrastructure{border-color:rgba(42,111,166,.27);color:#386d94}
.marker-cluster-small,.marker-cluster-medium,.marker-cluster-large{background:transparent!important}
.marker-cluster-small div,.marker-cluster-medium div,.marker-cluster-large div{background:transparent!important}

@media(max-width:1200px){
  body[data-view="map"] .nautical-filter-row{left:410px;right:150px;transform:none;max-width:none;overflow:auto;padding-bottom:4px;justify-content:flex-start}
}
@media(max-width:720px){
  body[data-view="map"] .poi-filter-row{top:64px}
  body[data-view="map"] .nautical-filter-row{left:10px;right:10px;top:109px;transform:none;max-width:none;overflow:auto;padding-bottom:5px;justify-content:flex-start}
  .nautical-filter-chip{height:36px;padding-right:10px;font-size:9px}
  .nautical-chip-icon{width:23px;height:23px}
  body[data-view="map"] .onboarding-card{top:154px}
}