/* OnlyPlantsHub – Modern Green visual refresh */

:root {
  --green: #123f2c;
  --green2: #236344;
  --mint: #e8f1e7;
  --text: #17271d;
  --muted: #718075;
  --line: #e3ebe1;
  --bg: #f4f7f1;
  --shadow: 0 14px 38px rgba(18,63,44,.075);
}

body {
  background: radial-gradient(ellipse at 8% 0%, #e9f1e5 0, transparent 32%), var(--bg);
  color: var(--text);
}

.topbar {
  height: 82px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(216,229,214,.8);
  box-shadow: 0 5px 24px rgba(25,61,39,.035);
}

.brand {
  font-size: 23px;
  letter-spacing: -1.1px;
}

.brand-mark {
  width: 39px;
  height: 39px;
  border-radius: 14px;
  background: linear-gradient(145deg,#1b6744,#0f3e2b);
  box-shadow: 0 7px 18px #174b362c;
}

.brand-hub {
  color: #86a58b;
}

.searchbox {
  border: 1px solid #e6eee3;
  background: #f7faf5;
  border-radius: 999px;
  height: 46px;
}

.searchbox:focus-within {
  border-color: #9fbea1;
  box-shadow: 0 0 0 4px #dcebdc;
}

.icon-button {
  border-radius: 13px;
  background: #f3f7f1;
  color: #46634e;
  transition: .2s;
}

.icon-button:hover,
.icon-button.active {
  background: #e4efe1;
  color: #174b36;
  transform: translateY(-1px);
}

.login-button {
  border: 0;
  background: #174b36;
  color: #fff;
  border-radius: 999px;
  padding: 12px 21px;
  box-shadow: 0 7px 16px #174b3624;
}

.login-button:hover,
.primary-button:hover {
  background: #236344;
  transform: translateY(-1px);
}

.layout {
  gap: 30px;
  padding-top: 34px;
}

.left-sidebar,
.right-sidebar {
  top: 104px;
}

.side-link {
  border-radius: 12px;
  padding: 12px 13px;
  transition: .18s;
}

.side-link:hover,
.side-link.selected {
  background: #e7f0e4;
  color: #174b36;
}

.sidebar-note {
  background: linear-gradient(145deg,#e9f2e5,#dcebd9);
  border: 1px solid #d8e7d4;
  border-radius: 18px;
  padding: 17px;
  color: #244c32;
}

.welcome-banner {
  min-height: 290px;
  border-radius: 26px;
  padding: 34px 36px;
  background: linear-gradient(115deg,#123f2c 0%,#1e5b3d 58%,#6f946b 100%);
  box-shadow: 0 18px 44px rgba(18,63,44,.18);
  overflow: hidden;
}

.welcome-banner:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 88% 16%,#d5e8b52b 0 10%,transparent 10.5%),
    radial-gradient(circle at 78% 90%,#d5e8b51c 0 22%,transparent 22.5%);
  pointer-events: none;
}

.welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 64%;
}

.welcome-copy .eyebrow {
  color: #c6dfc0;
}

.welcome-copy h1 {
  color: #fff;
  font-size: 35px;
  letter-spacing: -1.2px;
}

.welcome-copy h1 em {
  color: #c7e3b7;
}

.welcome-copy p {
  color: #e0ecdf;
  max-width: 440px;
  font-size: 13px;
  line-height: 1.8;
}

.primary-button {
  border: 0;
  border-radius: 999px;
  background: #e4f0d9;
  color: #174b36;
  padding: 13px 20px;
  font-weight: 700;
  box-shadow: 0 8px 20px #0d2c1d24;
  transition: .2s;
}

.primary-button:hover {
  color: #fff;
}

.banner-art {
  filter: drop-shadow(0 14px 20px #0b2c1b35);
}

.section-heading {
  margin: 30px 0 16px;
}

.section-heading h2 {
  font-size: 25px;
  letter-spacing: -.7px;
}

.eyebrow {
  letter-spacing: 1.5px;
  color: #6b9271;
}

.card,
.right-card,
.market-card {
  border: 1px solid #e6ede3;
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.composer {
  padding: 15px;
  border-radius: 18px;
}

.composer-trigger {
  background: #f2f7ef;
  border: 1px solid #e8f0e4;
  border-radius: 999px;
  padding: 14px 17px;
}

.post {
  padding: 19px;
  border-radius: 20px;
}

.post-image {
  border-radius: 15px;
}

.post-actions button {
  padding: 9px 7px;
  border-radius: 9px;
}

.post-actions button:hover {
  background: #f0f6ed;
  color: #174b36;
}

.comment-preview {
  background: #f3f7f0;
  border-radius: 12px;
  padding: 12px;
}

.right-card {
  padding: 18px;
}

.trend-icon {
  border-radius: 12px;
  background: #edf4e9;
}

.right-quote {
  background: linear-gradient(145deg,#e7f1e2,#d8e9d4);
  border-radius: 18px;
}

.discover-card {
  border-radius: 20px;
  box-shadow: 0 12px 30px #173c2720;
}

.discover-forest {
  background: linear-gradient(145deg,#174b36,#6f966b);
}

.discover-garden {
  background: linear-gradient(145deg,#6f8958,#b0b985);
}

.discover-rare {
  background: linear-gradient(145deg,#345d4c,#78977b);
}

.market-intro {
  border: 1px solid #dce9d7;
  border-radius: 18px;
  background: linear-gradient(110deg,#e9f2e4,#f3f7ed);
}

.market-card {
  overflow: hidden;
  transition: .2s;
}

.market-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(18,63,44,.12);
}

.market-photo {
  height: 145px;
}

.market-info {
  padding: 15px;
}

.market-info h3 {
  font-size: 14px;
}

.market-info>div strong {
  font-size: 15px;
}

.modal-card {
  border-radius: 24px;
  box-shadow: 0 28px 90px #0c211b55;
}

.modal-card input,
.modal-card select,
.modal-card textarea {
  border-radius: 12px;
  padding: 13px;
}

.auth-tabs {
  border-radius: 12px;
}

.auth-tab {
  border-radius: 9px;
}

.full-button {
  border-radius: 999px;
}

/* Profil bearbeiten */
#profileModal .modal-card {
  max-height: 90vh;
  overflow-y: auto;
}

#profileSave:disabled {
  opacity: .65;
  cursor: wait;
}

/* Pflanze vorstellen – extra breites Fenster */
#postModal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 25px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
}

#postModal .modal-card {
  display: block !important;
  width: 100% !important;
  max-width: 1400px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Tablet und Smartphone */
@media(max-width:760px) {
  .topbar {
    height: 68px;
    padding: 0 13px;
  }

  .brand {
    font-size: 19px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .layout {
    padding: 16px 12px 90px;
  }

  .welcome-banner {
    min-height: 235px;
    padding: 24px 21px;
    border-radius: 21px;
  }

  .welcome-copy {
    max-width: 78%;
  }

  .welcome-copy h1 {
    font-size: 25px;
  }

  .welcome-copy p {
    font-size: 11px;
    line-height: 1.65;
  }

  .banner-art {
    right: -72px;
    transform: scale(.78);
    transform-origin: bottom right;
  }

  .section-heading {
    margin-top: 25px;
  }

  .section-heading h2 {
    font-size: 22px;
  }

  .post {
    padding: 14px;
    border-radius: 17px;
  }

  .market-grid {
    gap: 10px;
  }

  .market-photo {
    height: 112px;
  }

  .right-sidebar {
    display: none;
  }

  #postModal {
    padding: 10px !important;
  }

  #postModal .modal-card {
    width: 100% !important;
    max-width: none !important;
  }
}

@media(max-width:390px) {
  .welcome-copy {
    max-width: 83%;
  }

  .welcome-copy h1 {
    font-size: 22px;
  }

  .banner-art {
    right: -88px;
    transform: scale(.7);
    transform-origin: bottom right;
  }
}