:root{
  --bg:#eef3ef;--surface:#ffffff;--surface2:#dfe9e2;--ink:#10251f;
  --muted:#60716a;--accent:#1f6b4f;--accent2:#d8a642;--danger:#a83832;
  --shadow:0 12px 30px rgba(16,37,31,.10);--radius:20px
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);padding-bottom:90px}
button,input,select,textarea{font:inherit}
button{border:0;border-radius:14px;padding:.85rem 1rem;background:var(--accent);color:white;font-weight:750;cursor:pointer}
button:active{transform:translateY(1px)}
button.ghost,.file-button{background:var(--surface2);color:var(--ink)}
button.danger{background:var(--danger)}
.hidden{display:none!important}
.app-header{position:sticky;top:0;z-index:500;display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 18px 14px;background:rgba(238,243,239,.92);backdrop-filter:blur(18px);border-bottom:1px solid rgba(16,37,31,.08)}
h1,h2,h3,p{margin-top:0}
h1{font-size:1.35rem;margin-bottom:0}
h2{font-size:1.35rem;margin-bottom:.3rem}
h3{margin-bottom:.5rem}
.eyebrow{text-transform:uppercase;letter-spacing:.11em;font-size:.68rem;font-weight:850;color:var(--accent);margin-bottom:.25rem}
main{max-width:820px;margin:0 auto;padding:16px}
.view{display:none}.view.active{display:block}
.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px;border-radius:28px;background:linear-gradient(145deg,#0f2820,#1f6b4f);color:white;box-shadow:var(--shadow);margin-bottom:16px}
.hero .eyebrow{color:#c7e8d7}.hero p:last-child{color:#d9eee2;margin-bottom:0}
.battery-ring{width:92px;height:92px;flex:0 0 92px;border-radius:50%;border:8px solid rgba(255,255,255,.18);display:grid;place-content:center;text-align:center;box-shadow:inset 0 0 0 3px var(--accent2)}
.battery-ring strong{font-size:1.45rem}.battery-ring span{font-size:.68rem;color:#d9eee2}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.stats-grid article{background:var(--surface);padding:14px 10px;border-radius:18px;box-shadow:var(--shadow);text-align:center}
.stats-grid strong{font-size:1.25rem;display:block}.stats-grid span{font-size:.72rem;color:var(--muted)}
.card{background:var(--surface);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quick-actions button:nth-child(even){background:var(--surface2);color:var(--ink)}
#map{height:61vh;min-height:420px;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;background:#cddbd1}
.hint,.empty{color:var(--muted);font-size:.86rem}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid label,.filters label{font-size:.82rem;font-weight:760;color:var(--muted);display:flex;flex-direction:column;gap:6px}
input,select,textarea{display:block;width:100%;min-width:0;max-width:100%;border:1px solid #cad7ce;border-radius:12px;background:#f9fbf9;color:var(--ink);padding:.78rem .82rem;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,107,79,.12)}
textarea{resize:vertical}
.full{grid-column:1/-1}
fieldset{border:1px solid #cad7ce;border-radius:14px;padding:10px 12px}
legend{color:var(--muted);font-size:.82rem;font-weight:760}
.check{display:inline-flex!important;flex-direction:row!important;align-items:center;margin-right:12px;color:var(--ink)!important}
.check input{width:auto}
.form-actions{display:flex;gap:10px;flex-wrap:wrap}
.file-button{display:inline-flex;align-items:center;border-radius:14px;padding:.85rem 1rem;font-weight:750;cursor:pointer}
.file-button input{display:none}
.stack{display:grid;gap:12px}
.item-card{background:var(--surface);border-radius:18px;padding:15px;box-shadow:var(--shadow)}
.item-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.item-card h3{font-size:1.05rem;margin-bottom:.2rem}
.item-card p{color:var(--muted);font-size:.86rem;margin-bottom:.55rem}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:.55rem 0}
.badge{font-size:.72rem;font-weight:800;background:var(--surface2);padding:.32rem .55rem;border-radius:999px}
.item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.item-actions button{padding:.55rem .72rem;font-size:.78rem}
.item-actions .delete{background:#f3dddd;color:var(--danger)}
.catch-photo{width:86px;height:86px;object-fit:cover;border-radius:14px;background:var(--surface2)}
.filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:.82rem;color:var(--muted)}
.meta-grid strong{color:var(--ink)}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:700;display:grid;grid-template-columns:repeat(6,1fr);padding:8px 7px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-top:1px solid rgba(16,37,31,.1)}
.bottom-nav button{background:transparent;color:var(--muted);padding:5px 2px;font-size:.64rem;border-radius:12px}
.bottom-nav button span{display:block;font-size:1.25rem;line-height:1.1}
.bottom-nav button.active{color:var(--accent);background:var(--surface2)}
.toast{position:fixed;left:50%;bottom:100px;z-index:1000;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:white;padding:.75rem 1rem;border-radius:999px;box-shadow:var(--shadow);transition:.25s;pointer-events:none;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.danger-zone{border:1px solid #ecc4c2}
@media(max-width:620px){
  main{padding:12px}.form-grid,.filters{grid-template-columns:1fr}.full{grid-column:auto}
  .stats-grid{grid-template-columns:repeat(2,1fr)}.hero{align-items:flex-start}
  .battery-ring{width:78px;height:78px;flex-basis:78px;border-width:6px}
  .bottom-nav button{font-size:.58rem}.bottom-nav button span{font-size:1.05rem}
  #map{height:58vh;min-height:360px}
}
.map-fallback{height:100%;min-height:360px;display:grid;place-content:center;text-align:center;padding:28px;background:var(--surface);color:var(--ink)}
.map-fallback p{max-width:420px;color:var(--muted)}


/* V4: iPad-/Safari-Korrekturen */
.form-grid > *,
.filters > *,
.form-grid label,
.filters label,
fieldset {
  min-width: 0;
  max-width: 100%;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"] {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
}
.map-status {
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:450;
  max-width:calc(100% - 24px);
  padding:.48rem .68rem;
  border-radius:999px;
  background:rgba(16,37,31,.86);
  color:#fff;
  font-size:.72rem;
  font-weight:750;
  box-shadow:var(--shadow);
  pointer-events:none;
}
#map { position:relative; }

@media (max-width:1024px) {
  .form-grid,
  .filters {
    grid-template-columns:minmax(0,1fr);
  }
  .full {
    grid-column:auto;
  }
}


/* V5 – zwingend einspaltige Formulare auf allen Bildschirmgrössen */
.form-grid,
.filters {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
}

.form-grid > *,
.filters > *,
.form-grid label,
.filters label,
.form-grid fieldset,
.form-grid .full {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
}

input,
select,
textarea,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="number"] {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  inline-size: 100% !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
  min-height: 58px;
}

.offline-map-note {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin-top: .7rem;
  padding: .72rem .8rem;
  border-radius: 14px;
  background: #fff4d8;
  color: #66531d;
  font-size: .82rem;
  line-height: 1.35;
}

.offline-map-note strong {
  color: #4e4018;
}

.leaflet-popup-content a {
  display: inline-block;
  margin-top: .55rem;
  padding: .48rem .65rem;
  border-radius: 10px;
  background: #1f6b4f;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
}


/* V6 – robuste Datum-/Zeitfelder für iPad Safari */
.picker-shell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 58px;
  overflow: hidden;
  border: 1px solid #cad7ce;
  border-radius: 12px;
  background: #f9fbf9;
}

.picker-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,107,79,.12);
}

.picker-display {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: .78rem 2.8rem .78rem .82rem;
  color: var(--ink);
  background: transparent;
  font-size: 1rem;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.picker-display.is-placeholder {
  color: #9ba59f;
  font-weight: 600;
}

.picker-shell::after {
  content: "▾";
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-52%);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 900;
  pointer-events: none;
}

.native-picker-overlay,
input.native-picker-overlay,
input[type="date"].native-picker-overlay,
input[type="time"].native-picker-overlay,
input[type="datetime-local"].native-picker-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  opacity: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
}

@media (hover:hover) and (pointer:fine) {
  .picker-shell:hover {
    border-color: #9fb9aa;
  }
}


/* V7 – unterscheidbare Kartenmarker */
.custom-leaflet-icon {
  background: transparent !important;
  border: 0 !important;
}

.marker-pin {
  width: 40px;
  height: 40px;
  border: 3px solid #ffffff;
  border-radius: 50% 50% 50% 7px;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 7px 15px rgba(16,37,31,.28);
}

.marker-pin span {
  display: block;
  transform: rotate(45deg);
  font-size: 18px;
  line-height: 1;
}

.marker-fishing {
  background: #176aa6;
}

.marker-launch {
  background: #d48228;
}

.marker-own {
  background: #1f6b4f;
}

.map-legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .72rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
}

.legend-dot {
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(16,37,31,.22);
}

.legend-dot.fishing { background: #176aa6; }
.legend-dot.launch { background: #d48228; }
.legend-dot.own { background: #1f6b4f; }