:root{
  --bg:#0b1d12;
  --fg:#0f2618;
  --ink:#111;
  --muted:#5b6a61;
  --card:#ffffff;
  --brand:#2d7a46;
  --brand-ink:#0f3a22;
  --accent:#8fd19e;
  --border:#e3eee7;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:#f6f8f6;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:rgba(45,122,70,.18)}
.visually-hidden{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* HERO */
.hero{
  background-image:
    radial-gradient(60% 100% at 10% 10%, rgba(166,240,186,.15), transparent 40%),
    radial-gradient(80% 120% at 100% 0%, rgba(143,209,158,.10), transparent 42%),
    linear-gradient(145deg, var(--bg), #0d5a32);
  color:#fff; padding:64px 20px;
}
.hero-content{max-width:1100px;margin:0 auto}
.logo{height:52px;display:block;margin-bottom:12px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.15))}
.hero h1{font-size:clamp(26px,4vw,44px);margin:0 0 8px}
.hero .brand{color:#a6f0ba}
.hero p{opacity:.9;margin:0 0 20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* BUTTONS */
.btn{
  background:var(--brand); color:#fff; border:none; border-radius:12px;
  padding:12px 16px; cursor:pointer; font-weight:600; text-decoration:none; display:inline-block;
  min-height:44px;
}
.btn.ghost{background:transparent;border:2px solid #fff}
.btn.small{padding:8px 12px;border-radius:10px;min-height:36px}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost:hover{background:#fff;color:#1c3c29}

/* LAYOUT */
.layout{
  max-width:1100px; margin:-30px auto 40px;
  display:grid; grid-template-columns:320px 1fr; gap:20px; padding:0 20px
}
.panel{
  background:var(--card); border-radius:16px; padding:16px;
  box-shadow:0 10px 25px rgba(16,24,40,.08)
}
.panel h2{margin:8px 0 12px}
.card{background:#f7faf8;border:1px solid var(--border);border-radius:14px;padding:12px;margin:12px 0}
.card.muted{background:#fbfdfc}
.muted{color:var(--muted)}
.small{font-size:12px}

/* QUICK ACTIONS */
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick-actions button{
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;
  cursor:pointer;text-align:left;display:flex;align-items:center;gap:8px;min-height:48px
}
.quick-actions button::before{content:"🌲";}
.quick-actions button:hover{border-color:#cfe5d6;box-shadow:0 5px 16px rgba(22,55,33,.06)}

/* CHAT */
.chat{
  background:var(--card); border-radius:16px; padding:16px;
  box-shadow:0 10px 25px rgba(16,24,40,.08);
  display:flex; flex-direction:column; min-height:560px;
}
.chat-window{
  flex:1; overflow:auto; padding-bottom:12px;
  -webkit-overflow-scrolling:touch; scroll-behavior:smooth; overscroll-behavior:contain;
}
.message{display:flex;gap:10px;margin:10px 0;align-items:flex-start}
.avatar{width:36px;height:36px;border-radius:50%;flex:0 0 36px;background:var(--accent)}
.bubble{background:#f3f7f4;border:1px solid var(--border);padding:12px 14px;border-radius:14px;max-width:80%}
.user .bubble{background:#e9f5ed;border-color:#cfe5d6;margin-left:auto}
.assistant .avatar{background:var(--brand)}

/* COMPOSER (sticky) */
.composer{
  display:flex; gap:10px; margin-top:8px; align-items:center;
  position:sticky; bottom:0; z-index:2; background:var(--card);
  padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
}
.composer input{
  flex:1; padding:12px 14px; border:1px solid #dfeae2; border-radius:12px; min-height:44px; caret-color:#2d7a46
}
.composer select{
  border:1px solid #dfeae2; border-radius:12px; padding:10px; background:#fff; min-height:44px
}
.composer .btn{padding:12px 16px;border-radius:12px}

/* CHIPS */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{padding:8px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;cursor:pointer;min-height:36px;display:inline-flex;align-items:center}
.chip:hover{border-color:#cfe5d6}

/* FOOTER */
.footer{
  max-width:1100px;margin:0 auto 40px;display:flex;justify-content:space-between;color:#6b7a71;font-size:12px;padding:0 20px
}

/* WIDGET (Bubble + Iframe only – sicher für Fremdseiten) */
.tm-bubble{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom));
  background:var(--brand); color:#fff; border:none; border-radius:30px; padding:12px 14px;
  font-weight:700; box-shadow:0 10px 25px rgba(16,24,40,.2); cursor:pointer; z-index:9999; min-height:44px
}
.tm-iframe{
  position:fixed; right:20px; bottom:calc(70px + env(safe-area-inset-bottom));
  width:min(380px, 96vw); height:min(72dvh, 600px);
  border:1px solid var(--border); border-radius:16px; background:#fff;
  box-shadow:0 10px 35px rgba(16,24,40,.25); z-index:9999; display:none
}

/* BREAKPOINTS */
@media (max-width: 960px){
  .layout{grid-template-columns:1fr}
  .footer{flex-direction:column;gap:6px}
}
@media (max-width: 560px){
  .quick-actions{grid-template-columns:1fr}
  .hero{padding:44px 16px}
  .layout{margin:-18px auto 24px;padding:0 16px}
  .chat{min-height:0}
  /* Widget im Vollbild auf Phones */
  .tm-iframe{
    right:0; left:0; bottom:0; top:0;
    width:100vw; height:100dvh; border-radius:0; border:none;
  }
}

/* MOTION PREFERENCES */
@media (prefers-reduced-motion: reduce){
  .chat-window{scroll-behavior:auto}
}