/* Fiore Gartenplaner — CI: DM Serif Display / DM Sans, Forest/Sage/Cream/Terracotta */
:root {
  --forest: #1a3a2a; --forest-light: #24503a; --sage: #7a8c6c; --sage-light: #a3b18a;
  --cream: #f6f1ea; --cream-dark: #ede5d8; --warm-white: #faf8f5;
  --terracotta: #c17f59; --terracotta-light: #d4956f; --charcoal: #2c2c2c;
  --text: #3a3a3a; --text-light: #6b6b6b;
  --serif: 'DM Serif Display', Georgia, serif; --sans: 'DM Sans', -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--sans); font-size: 15px; color: var(--text); background: var(--warm-white); overflow: hidden; }

/* ── Topbar ── */
.topbar { height: 60px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.07); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; }
.topbar__logo { font-family: var(--serif); font-size: 1.25rem; color: var(--forest); text-decoration: none; display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topbar__logo span { font-style: italic; color: var(--terracotta); }
.topbar__name { font-family: var(--sans); font-size: .95rem; font-weight: 600; border: 1.5px solid transparent; border-radius: 10px; padding: .45rem .75rem; background: var(--cream); color: var(--charcoal); width: 200px; }
.topbar__name:focus { outline: none; border-color: var(--forest); background: #fff; }
.topbar__actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

/* ── Buttons ── */
.btn { font-family: var(--sans); font-size: .9rem; font-weight: 600; padding: .55rem 1.1rem; border-radius: 50px; border: none; cursor: pointer; transition: all .25s; white-space: nowrap; }
.btn--primary { background: var(--forest); color: var(--cream); }
.btn--primary:hover { background: var(--forest-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(26,58,42,.25); }
.btn--ghost { background: transparent; border: 1.5px solid var(--cream-dark); color: var(--text); }
.btn--ghost:hover { border-color: var(--forest); color: var(--forest); }
.btn--danger { background: transparent; border: 1.5px solid #e3c9c0; color: #b91c1c; }
.btn--danger:hover { background: #fef2f2; border-color: #b91c1c; }
.btn--full { width: 100%; margin-top: .5rem; }
.btn.placing { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }

/* ── Layout ── */
.layout { display: flex; height: calc(100% - 60px); }
.sidebar { width: 290px; min-width: 290px; background: #fff; border-right: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--cream-dark); }
.tab { flex: 1; font-family: var(--sans); font-size: .88rem; font-weight: 600; padding: .8rem 0; background: none; border: none; border-bottom: 2.5px solid transparent; color: var(--text-light); cursor: pointer; }
.tab.on { color: var(--forest); border-bottom-color: var(--forest); }
.panel { display: none; padding: 1.1rem; overflow-y: auto; flex: 1; }
.panel.on { display: block; }
.panel h3 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; color: var(--forest); margin-bottom: .5rem; }
.hint { font-size: .85rem; color: var(--text-light); line-height: 1.55; margin-bottom: 1rem; }
.hint--small { font-size: .78rem; margin-top: .6rem; }
.divider { text-align: center; color: var(--text-light); font-size: .8rem; margin: 1rem 0 .25rem; }

.quickrect label { display: flex; align-items: center; gap: .5rem; font-size: .88rem; font-weight: 600; margin-bottom: .5rem; }
.quickrect input { width: 70px; padding: .4rem .5rem; border: 1.5px solid var(--cream-dark); border-radius: 8px; font-family: var(--sans); font-size: .9rem; }
.quickrect input:focus { outline: none; border-color: var(--forest); }

.statbox { display: flex; gap: .5rem; margin: 1.25rem 0; }
.statbox > div { flex: 1; background: var(--cream); border-radius: 12px; padding: .7rem .4rem; text-align: center; }
.statbox span { font-family: var(--serif); font-size: 1.15rem; color: var(--forest); display: block; }
.statbox label { font-size: .7rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; }

/* Palette — kompakt */
.palette { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.pal-item { display: flex; align-items: center; gap: .5rem; background: var(--cream); border: 1.5px solid transparent; border-radius: 10px; padding: .4rem .55rem; text-align: left; cursor: pointer; transition: all .2s; font-family: var(--sans); }
.pal-item:hover { border-color: var(--forest); }
.pal-item.placing { border-color: var(--terracotta); background: #fdf3ec; }
.pal-item .sw { width: 18px; height: 18px; min-width: 18px; border-radius: 5px; }
.pal-item .sw--round { border-radius: 50%; }
.pal-item .lbl { font-size: .76rem; font-weight: 600; color: var(--charcoal); line-height: 1.15; }
.pal-item .dim { font-size: .65rem; color: var(--text-light); }

/* Werkzeugleiste */
.toolbar { position: absolute; left: 1.1rem; top: 1.1rem; background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(26,58,42,.12); display: flex; flex-direction: column; gap: .25rem; padding: .3rem; }
.tool { width: 40px; height: 40px; border: none; border-radius: 10px; background: transparent; color: var(--text-light); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; }
.tool svg { width: 20px; height: 20px; }
.tool:hover { background: var(--cream); color: var(--forest); }
.tool.on { background: var(--forest); color: var(--cream); }
.tool.on[data-tool="delete"] { background: #b91c1c; }

/* Adresssuche */
.addr input[type="text"] { width: 100%; padding: .55rem .8rem; border: 1.5px solid var(--cream-dark); border-radius: 10px; font-family: var(--sans); font-size: .85rem; margin-bottom: .4rem; }
.addr input[type="text"]:focus { outline: none; border-color: var(--forest); }
.addr__key { margin-top: .5rem; font-size: .8rem; }
.addr__key summary { cursor: pointer; color: var(--text-light); font-weight: 600; }
.addr__key input { margin-top: .4rem; }

#leafletMap { height: 56vh; min-height: 320px; border-radius: 14px; }
#leafletMap::after { content: ''; position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 2px rgba(0,0,0,.35); pointer-events: none; z-index: 800; }
#leafletMap { position: relative; }

/* Luftbild-Navigation */
.bgnav { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .5rem; }
.bgnav__row { display: flex; gap: .3rem; }
.bgnav__b { width: 38px; height: 32px; border: 1.5px solid var(--cream-dark); border-radius: 9px; background: #fff; cursor: pointer; font-size: .8rem; color: var(--forest); font-weight: 700; transition: all .15s; }
.bgnav__b:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.bgnav__b--wide { width: 78px; font-size: .78rem; }
.bgnav__b:disabled { opacity: .4; cursor: wait; }

/* Luftbild-Controls */
.bgctl { margin-top: .5rem; }
.bgctl__row { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; margin: .6rem 0; }
.bgctl__row input[type="range"] { flex: 1; accent-color: var(--forest); }
#svg.tool-pan { cursor: grab; }
#svg.tool-pan:active { cursor: grabbing; }
#svg.tool-delete .el-shape, #svg.tool-delete .pl-hit { cursor: pointer; }
#svg.calibrating { cursor: crosshair; }

/* Pflanzenliste */
#elPolyType { width: 100%; padding: .55rem 2.4rem .55rem .8rem; border: 1.5px solid var(--cream-dark); border-radius: 50px; font-family: var(--sans); font-size: .88rem; font-weight: 500; color: var(--charcoal); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8c6c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .9rem center; -webkit-appearance: none; appearance: none; cursor: pointer; margin-bottom: .5rem; }
#elPolyType:focus { outline: none; border-color: var(--forest); }

#plantSearch, #plantCat { width: 100%; padding: .55rem .8rem; border: 1.5px solid var(--cream-dark); border-radius: 50px; font-family: var(--sans); font-size: .88rem; font-weight: 500; color: var(--charcoal); margin-bottom: .5rem; background: #fff; }
#plantSearch:focus, #plantCat:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(26,58,42,.07); }
#plantCat {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8c6c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
#plantCat:hover { border-color: var(--sage); }
.plantlist { display: flex; flex-direction: column; gap: .3rem; }
.plant-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; transition: background .15s; }
.plant-item:hover { background: var(--cream); }
.plant-item.placing { border-color: var(--terracotta); background: #fdf3ec; }
.plant-item .dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.12); }
.plant-item .nm { font-size: .85rem; font-weight: 600; color: var(--charcoal); line-height: 1.2; }
.plant-item .bt { font-size: .72rem; font-style: italic; color: var(--text-light); }
.plant-item .warn { margin-left: auto; font-size: .65rem; font-weight: 700; color: #b91c1c; background: #fef2f2; border-radius: 50px; padding: .1rem .45rem; }

/* ── Stage ── */
.stage { flex: 1; position: relative; overflow: hidden; background: var(--warm-white); }
#svg { width: 100%; height: 100%; display: block; cursor: default; outline: none; }
#svg.drawing, #svg.drawing * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z' fill='%23f6f1ea' stroke='%23ffffff' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z' fill='%23c17f59' stroke='%231a3a2a' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 2 22, crosshair !important; }
#svg.placing { cursor: copy; }
#gridRect { width: 100%; height: 100%; }

.season { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); background: #fff; border-radius: 50px; box-shadow: 0 8px 30px rgba(26,58,42,.12); padding: .6rem 1.25rem; display: flex; align-items: center; gap: .9rem; }
.season #seasonLabel { font-family: var(--serif); font-size: 1rem; color: var(--forest); min-width: 74px; }
.season input { width: 220px; accent-color: var(--terracotta); }
.season__hint { font-size: .72rem; color: var(--text-light); }

.zoomctl { position: absolute; right: 1.1rem; bottom: 1.1rem; background: #fff; border-radius: 50px; box-shadow: 0 8px 30px rgba(26,58,42,.12); display: flex; align-items: center; gap: .25rem; padding: .25rem; }
.zoomctl button { width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--cream); font-size: 1.1rem; cursor: pointer; color: var(--forest); font-weight: 700; }
.zoomctl button:hover { background: var(--forest); color: var(--cream); }
.zoomctl span { font-size: .78rem; color: var(--text-light); min-width: 48px; text-align: center; }

.toast { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--forest); color: var(--cream); padding: .7rem 1.4rem; border-radius: 50px; font-size: .9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all .3s; box-shadow: 0 8px 30px rgba(26,58,42,.3); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Properties ── */
.props { width: 250px; min-width: 250px; background: #fff; border-left: 1px solid rgba(0,0,0,.07); padding: 1.1rem; overflow-y: auto; }
.props h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--forest); margin-bottom: .75rem; }
.props label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .6rem; color: var(--text); }
.props input { width: 100%; padding: .45rem .6rem; border: 1.5px solid var(--cream-dark); border-radius: 8px; font-family: var(--sans); font-size: .88rem; margin-top: .25rem; }
.props input:focus { outline: none; border-color: var(--forest); }
.props .meta { font-size: .82rem; color: var(--text-light); line-height: 1.6; margin-bottom: .75rem; }
.props .bloom { display: inline-block; font-size: .75rem; background: var(--cream); border-radius: 50px; padding: .15rem .6rem; margin: 0 .3rem .3rem 0; }

/* ── Dropdown ── */
.dropdown { position: relative; }
.dropdown__menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border-radius: 14px; box-shadow: 0 16px 50px rgba(0,0,0,.15); min-width: 220px; padding: .4rem; display: none; z-index: 50; }
.dropdown__menu.open { display: block; }
.dropdown__menu button { display: flex; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; background: none; border: none; font-family: var(--sans); font-size: .88rem; padding: .55rem .7rem; border-radius: 8px; cursor: pointer; color: var(--charcoal); }
.dropdown__menu button:hover { background: var(--cream); }
.dropdown__menu .del { color: #b91c1c; font-weight: 700; }
.dropdown__menu .empty { padding: .6rem .7rem; color: var(--text-light); font-size: .85rem; }

/* ── Modals ── */
.modal { position: fixed; inset: 0; background: rgba(26,58,42,.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__box { background: var(--warm-white); border-radius: 20px; padding: 1.75rem; max-width: 460px; width: 100%; box-shadow: 0 25px 80px rgba(0,0,0,.3); max-height: 90vh; overflow-y: auto; }
.modal__box h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--forest); margin-bottom: .5rem; }
.modal__box p { font-size: .9rem; color: var(--text-light); line-height: 1.6; margin-bottom: 1rem; }
.modal__box label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .8rem; }
.modal__box input, .modal__box textarea { width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--cream-dark); border-radius: 10px; font-family: var(--sans); font-size: .9rem; margin-top: .3rem; background: #fff; }
.modal__box input:focus, .modal__box textarea:focus { outline: none; border-color: var(--forest); }
.modal__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }
.modal__box--wide { max-width: 560px; }
.modal__box--xl { max-width: 920px; }
.viz__head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.viz__head h3 { margin: 0; }
.viz__tabs { display: flex; gap: .25rem; background: var(--cream); border-radius: 50px; padding: .25rem; }
.viz__tab { font-family: var(--sans); font-size: .85rem; font-weight: 600; border: none; background: transparent; padding: .45rem 1rem; border-radius: 50px; cursor: pointer; color: var(--text-light); }
.viz__tab.on { background: var(--forest); color: var(--cream); }
.fpdb-close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--cream); font-size: 1.2rem; cursor: pointer; color: var(--charcoal); }
.viz__panel { display: none; }
.viz__panel.on { display: block; }
.viz__preview { background: var(--cream); border-radius: 14px; min-height: 380px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viz__preview svg, .viz__preview img { max-width: 100%; max-height: 64vh; display: block; border-radius: 10px; }
.viz__loading { text-align: center; color: var(--text-light); font-size: .9rem; padding: 2rem; line-height: 1.6; }
.viz__hint { font-size: .76rem; color: var(--text-light); margin-right: auto; max-width: 40%; line-height: 1.45; }
.viz__persp { -webkit-appearance: none; appearance: none; cursor: pointer; font-family: var(--sans); font-size: .85rem; font-weight: 600; color: var(--charcoal); border: 1.5px solid var(--cream-dark); border-radius: 50px; padding: .5rem 2.2rem .5rem 1rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8c6c' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .8rem center; }
.viz__persp:focus { outline: none; border-color: var(--forest); }

/* KI-Lade-Animation */
.viz__gen { text-align: center; padding: 2.5rem 2rem; width: 100%; max-width: 420px; }
.viz__gen-leaf { font-size: 2.2rem; display: inline-block; animation: vizSway 1.6s ease-in-out infinite; }
@keyframes vizSway { 0%,100% { transform: rotate(-12deg) scale(1); } 50% { transform: rotate(12deg) scale(1.12); } }
.viz__gen-msg { font-family: var(--serif); font-size: 1.15rem; color: var(--forest); margin: .8rem 0 1.2rem; min-height: 1.5em; transition: opacity .3s; }
.viz__bar { height: 10px; background: var(--cream-dark); border-radius: 50px; overflow: hidden; }
.viz__bar-fill { height: 100%; width: 0%; border-radius: 50px; background: linear-gradient(90deg, var(--sage), var(--forest), var(--terracotta)); background-size: 200% 100%; animation: vizShimmer 1.8s linear infinite; transition: width .6s ease; }
@keyframes vizShimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
.viz__gen-pct { font-size: .78rem; color: var(--text-light); margin-top: .5rem; }
.plist { max-height: 50vh; overflow-y: auto; border: 1.5px solid var(--cream-dark); border-radius: 14px; padding: .5rem; background: #fff; }
.plist__row { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-bottom: 1px solid var(--cream); }
.plist__row:last-child { border-bottom: none; }
.plist__count { font-family: var(--serif); font-size: 1.05rem; color: var(--terracotta); min-width: 2.4rem; text-align: right; }
.plist__dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex-shrink: 0; }
.plist__nm { font-weight: 600; color: var(--charcoal); font-size: .92rem; line-height: 1.2; }
.plist__bt { font-style: italic; font-size: .76rem; color: var(--text-light); }
.plist__info { margin-left: auto; font-size: .74rem; color: var(--text-light); text-align: right; white-space: nowrap; }
.plist__warn { color: #b91c1c; font-weight: 700; }
.plist__empty { padding: 1.5rem; text-align: center; color: var(--text-light); font-size: .9rem; }
.summary { background: var(--cream); border-radius: 12px; padding: .9rem 1rem; font-family: var(--sans); font-size: .78rem; line-height: 1.6; white-space: pre-wrap; max-height: 180px; overflow-y: auto; margin-bottom: 1rem; color: var(--text); }

/* SVG-Inhalte */
.b-poly { fill: #9bb586; fill-opacity: .35; stroke: var(--forest); stroke-width: 2; }
.b-vertex { fill: #fff; stroke: var(--forest); stroke-width: 2; cursor: grab; }
.b-edge-label, .el-label { font-family: 'DM Sans', sans-serif; fill: var(--forest); font-weight: 600; paint-order: stroke; stroke: var(--warm-white); stroke-width: .22em; stroke-linejoin: round; }
.el-shape { cursor: grab; }
.el-shape.selected { stroke: var(--terracotta) !important; stroke-width: 2.5 !important; stroke-dasharray: 6 4; }
.el-handle { fill: var(--terracotta); stroke: #fff; stroke-width: 1.5; cursor: nwse-resize; }
.pl-circle { cursor: grab; stroke: rgba(0,0,0,.15); stroke-width: 1; }
.pl-circle.selected { stroke: var(--terracotta); stroke-width: 2.5; }

@media (max-width: 900px) {
  .props { display: none; }
  .topbar__name { width: 120px; }
}