/* ============================================================
   Blattkraftwerk — geteiltes Stylesheet
   Gießservice & Pflanzenpflege in Berlin
   Keine Rasterbilder: alle Grafiken sind Inline-SVG-Linienzeichnungen.
   ============================================================ */

:root{
  --paper: #F1EEE2;
  --paper-deep: #E8E3D2;
  --pine: #1B2A1E;
  --pine-soft: #33473A;
  --moss: #3F6C4D;
  --sage: #C7CFB8;
  --ochre: #A9821F;
  --line: #C9C2A6;
  --max: 1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--pine);
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.08;
  margin:0;
  color:var(--pine);
}

a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

:focus-visible{
  outline:2px solid var(--ochre);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-999px; top:0;
  background:var(--pine); color:var(--paper);
  padding:10px 16px; border-radius:3px; z-index:60;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Entwurf-Hinweis ---------- */
.draft-banner{
  background:var(--ochre); color:var(--pine);
  font-size:14px; line-height:1.4; text-align:center;
  padding:9px 20px;
}
.draft-banner strong{ font-weight:600; }
.draft-banner .dot{ margin:0 8px; opacity:.5; }
@media (max-width:560px){ .draft-banner .dot{ display:none; } .draft-banner span.block{ display:block; } }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(241,238,226,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  max-width:var(--max); margin:0 auto;
}
.wordmark{
  font-family:'Fraunces', serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:0.01em;
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
}
.wordmark svg{ width:26px; height:26px; }
nav.links{ display:flex; gap:20px; align-items:center; }
nav.links a{
  text-decoration:none;
  font-size:15px;
  color:var(--pine-soft);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:border-color .15s ease, color .15s ease;
}
nav.links a:hover{ color:var(--pine); border-color:var(--ochre); }
nav.links a.active{ color:var(--pine); border-color:var(--ochre); }
.nav-cta{
  background:var(--moss);
  color:var(--paper);
  text-decoration:none;
  padding:10px 20px;
  border-radius:3px;
  font-size:15px;
  white-space:nowrap;
}
.nav-cta:hover{ background:#345c40; }

/* Mobile-Navigation (reines CSS via versteckter Checkbox) */
.menu-toggle{ display:none; }
.menu-btn{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
  color:var(--pine);
}
.menu-btn svg{ width:26px; height:26px; }

@media (max-width:1120px){
  nav.links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:8px 0;
    display:none;
  }
  nav.links a{
    width:100%; padding:14px 32px; border-bottom:none;
  }
  nav.links a.active{ border-color:transparent; color:var(--moss); }
  nav.links .nav-cta{ margin:10px 32px; width:calc(100% - 64px); text-align:center; }
  .menu-btn{ display:block; }
  .menu-toggle:checked ~ nav.links{ display:flex; }
}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--ochre);
  color:var(--pine);
  text-decoration:none;
  padding:14px 26px;
  border-radius:3px;
  font-size:16px;
  font-weight:500;
  display:inline-block;
  transition:transform .15s ease, background .15s ease;
}
.btn-primary:hover{ background:#946f19; transform:translateY(-1px); }
.btn-ghost{
  text-decoration:none;
  color:var(--pine);
  border-bottom:1px solid var(--pine);
  padding-bottom:2px;
  font-size:16px;
}

/* ---------- Hero ---------- */
.hero{ padding:72px 0 88px; }
.hero .wrap{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.4rem, 4.2vw, 3.6rem);
  max-width:13ch;
}
.hero p.lede{
  margin-top:24px;
  max-width:46ch;
  font-size:19px;
  color:var(--pine-soft);
}
.hero-actions{
  margin-top:34px;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
}
.hero-illustration{ justify-self:center; }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-illustration{ order:-1; width:220px; margin:0 auto; }
  .hero{ padding:44px 0 56px; }
}

/* Kompakter Seitenkopf (Unterseiten) */
.page-head{ padding:64px 0 12px; }
.page-head .kicker{
  color:var(--moss); font-size:15px; margin-bottom:12px; display:block;
}
.page-head h1{ font-size:clamp(2.1rem, 3.4vw, 3rem); max-width:20ch; }
.page-head p{ margin-top:18px; max-width:60ch; font-size:19px; color:var(--pine-soft); }

@media (max-width:900px){ .page-head{ padding:40px 0 8px; } }

/* ---------- Trust strip ---------- */
.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.trust .wrap{
  display:flex; gap:40px; flex-wrap:wrap;
  font-size:14.5px; color:var(--pine-soft);
}
.trust span{ display:flex; align-items:center; gap:8px; }
.trust svg{ width:16px; height:16px; color:var(--moss); flex:none; }

/* ---------- Section shell ---------- */
section{ padding:80px 0; }
.section-head{ max-width:56ch; margin-bottom:44px; }
.section-head .kicker{
  color:var(--moss); font-size:15px; margin-bottom:10px; display:block;
}
.section-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.3rem); }
.section-head p{ margin-top:14px; color:var(--pine-soft); font-size:17px; }

.tone-deep{ background:var(--paper-deep); }

/* ---------- Karten-Grid (Services / Tipps) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card-grid.cols-1{ grid-template-columns:1fr; }
.card{ background:var(--paper); padding:36px; }
.tone-deep .card{ background:var(--paper-deep); }
.card svg.ico{ width:30px; height:30px; color:var(--moss); margin-bottom:20px; }
.card h3{ font-size:20px; margin-bottom:10px; }
.card p{ color:var(--pine-soft); font-size:15.5px; margin:0; }
.card p + p{ margin-top:12px; }

@media (max-width:700px){ .card-grid{ grid-template-columns:1fr; } }

/* ---------- Feature-Split (Text neben SVG) ---------- */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.split.rev .split-media{ order:2; }
.split-media{ justify-self:center; }
.split h2{ font-size:clamp(1.6rem,2.4vw,2.1rem); }
.split p{ color:var(--pine-soft); margin-top:16px; }
.split ul.checks{ list-style:none; margin:22px 0 0; padding:0; }
.split ul.checks li{ position:relative; padding:8px 0 8px 30px; border-bottom:1px solid var(--line); }
.split ul.checks li:last-child{ border-bottom:none; }
.split ul.checks li::before{
  content:""; position:absolute; left:3px; top:13px; width:7px; height:12px;
  border:solid var(--moss); border-width:0 2px 2px 0; transform:rotate(45deg);
}
@media (max-width:820px){
  .split{ grid-template-columns:1fr; gap:32px; }
  .split.rev .split-media{ order:0; }
  .split-media{ width:220px; }
}

/* ---------- Ablauf / Steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.step{ border-top:2px solid var(--pine); padding-top:18px; }
.step .num{
  font-family:'Fraunces', serif; font-size:15px; color:var(--ochre);
  display:block; margin-bottom:10px;
}
.step h3{ font-size:17px; margin-bottom:8px; }
.step p{ color:var(--pine-soft); font-size:15px; margin:0; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.price-card{
  border:1px solid var(--line); padding:32px; background:var(--paper);
  display:flex; flex-direction:column;
}
.tone-deep .price-card{ background:var(--paper); }
.price-card.featured{ border-color:var(--pine); background:var(--pine); color:var(--paper); }
.price-card.featured h3, .price-card.featured .amount{ color:var(--paper); }
.price-card.featured p, .price-card.featured li{ color:var(--sage); }
.price-card svg.price-ico{ width:34px; height:34px; color:var(--moss); margin-bottom:14px; }
.price-card.featured svg.price-ico{ color:var(--ochre); }
.price-card .badge{
  align-self:flex-start; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ochre); border:1px solid var(--ochre); border-radius:2px; padding:3px 8px; margin-bottom:14px;
}
.price-card.featured .badge{ color:var(--pine); background:var(--ochre); border-color:var(--ochre); }
.price-card h3{ font-size:19px; margin-bottom:6px; }
.price-card .amount{ font-family:'Fraunces', serif; font-size:34px; margin:14px 0 4px; }
.price-card .unit{ font-size:14px; color:var(--pine-soft); }
.price-card.featured .unit{ color:var(--sage); }
.price-card .plan-def{ font-size:13.5px; line-height:1.5; color:var(--pine-soft); margin:16px 0 0; padding-top:16px; border-top:1px solid var(--line); }
.price-card .plan-def strong{ color:var(--pine); font-weight:600; }
.price-card.featured .plan-def{ color:var(--sage); border-color:rgba(255,255,255,.22); }
.price-card.featured .plan-def strong{ color:var(--paper); }
.price-card ul{
  list-style:none; margin:22px 0 28px; padding:0; font-size:15px; color:var(--pine-soft);
  display:flex; flex-direction:column; gap:10px;
}
.price-card li{ padding-left:18px; position:relative; }
.price-card li::before{ content:"·"; position:absolute; left:0; font-size:22px; line-height:0.6; top:6px; }
.price-card a.select{
  margin-top:auto; text-decoration:none; text-align:center; padding:12px;
  border:1px solid var(--pine); font-size:15px;
}
.price-card.featured a.select{ border-color:var(--paper); background:var(--ochre); color:var(--pine); }
.price-card .plan-plus{
  display:flex; align-items:center; gap:8px; margin:14px 0 0;
  font-size:13.5px; font-weight:600; color:var(--pine);
  background:var(--ochre); border-radius:3px; padding:8px 12px;
}
.price-card.featured .plan-plus{ background:var(--ochre); color:var(--pine); }
.price-card .plan-plus svg{ width:16px; height:16px; flex:none; }
@media (max-width:900px){ .pricing-grid{ grid-template-columns:1fr; } }

/* ---------- Extra-Leistung ---------- */
.extra-service{ margin-top:32px; border:1px solid var(--line); background:var(--paper); padding:32px; }
.extra-head{ display:flex; gap:20px; align-items:flex-start; }
.extra-head svg.extra-ico{ width:40px; height:40px; color:var(--moss); flex:none; margin-top:4px; }
.extra-head h3{ font-size:22px; margin:8px 0 8px; }
.extra-head p{ color:var(--pine-soft); font-size:15.5px; margin:0; max-width:60ch; }
.extra-prices{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0 20px; }
.extra-tier{ border:1px solid var(--line); padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.extra-tier .tier-label{ font-weight:600; color:var(--pine); font-size:15.5px; }
.extra-tier .tier-sub{ font-size:13px; color:var(--pine-soft); }
.extra-tier .tier-price{ font-family:'Fraunces', serif; font-size:24px; color:var(--pine); margin-top:6px; }
.extra-foot{ font-size:14px; color:var(--pine-soft); margin:0; }
@media (max-width:700px){ .extra-prices{ grid-template-columns:1fr; } .extra-head{ flex-direction:column; gap:10px; } }

.price-note{ margin-top:28px; font-size:14.5px; color:var(--pine-soft); max-width:60ch; }

/* Vergleichstabelle */
.compare{ width:100%; border-collapse:collapse; margin-top:10px; font-size:15px; }
.compare th, .compare td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); }
.compare th{ font-family:'Fraunces',serif; font-weight:600; }
.compare thead th{ color:var(--moss); font-size:14px; }
.compare td:not(:first-child), .compare th:not(:first-child){ text-align:center; }
.compare .yes{ color:var(--moss); font-weight:600; }
.compare .no{ color:var(--line); }
.table-scroll{ overflow-x:auto; }

/* ---------- Gebiete ---------- */
.areas-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.district-list{ columns:2; gap:24px; list-style:none; margin:0; padding:0; font-size:16px; }
.district-list li{ padding:10px 0; border-bottom:1px solid var(--line); break-inside:avoid; }
@media (max-width:820px){ .areas-inner{ grid-template-columns:1fr; } }

/* ---------- Pflegetipps ---------- */
.tip-groups{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.tip-group{ border-top:2px solid var(--pine); padding-top:20px; }
.tip-group h3{ font-size:19px; margin-bottom:6px; }
.tip-group .hint{ font-size:14px; color:var(--moss); margin:0 0 16px; }
.tip-group ul{ margin:0; padding-left:18px; color:var(--pine-soft); font-size:15px; }
.tip-group li{ margin-bottom:8px; }
@media (max-width:820px){ .tip-groups{ grid-template-columns:1fr; } }

.mistake-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.mistake{ background:var(--paper); padding:32px 36px; }
.tone-deep .mistake{ background:var(--paper-deep); }
.mistake h3{ font-size:18px; margin-bottom:8px; }
.mistake p{ color:var(--pine-soft); font-size:15px; margin:0; }
@media (max-width:700px){ .mistake-list{ grid-template-columns:1fr; } }

/* ---------- Zitate ---------- */
.garden-quote{ margin:0; padding:36px 0 0; border-top:1px solid var(--line); max-width:46ch; }
.garden-quote .text{
  font-family:'Fraunces', serif; font-style:italic; font-size:24px; font-weight:400;
  color:var(--pine); line-height:1.35; margin:0;
}
.garden-quote .who{ margin-top:16px; font-size:14.5px; color:var(--moss); font-style:normal; }

/* ---------- FAQ (reines CSS, <details>) ---------- */
.faq-list{ border-top:1px solid var(--line); max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 0; font-family:'Fraunces',serif;
  font-size:18px; font-weight:600; color:var(--pine);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; width:14px; height:14px; flex:none;
  border-right:2px solid var(--moss); border-bottom:2px solid var(--moss);
  transform:rotate(45deg); transition:transform .2s ease; margin-top:-4px;
}
.faq-item[open] summary::after{ transform:rotate(225deg); margin-top:4px; }
.faq-item .answer{ padding:0 0 24px; color:var(--pine-soft); font-size:16px; max-width:70ch; }
.faq-item .answer p{ margin:0 0 12px; }
.faq-item .answer p:last-child{ margin-bottom:0; }

/* ---------- Über uns / Werte ---------- */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.value{ border-top:2px solid var(--pine); padding-top:18px; }
.value h3{ font-size:18px; margin-bottom:8px; }
.value p{ color:var(--pine-soft); font-size:15px; margin:0; }
@media (max-width:820px){ .values{ grid-template-columns:1fr; } }

.prose{ max-width:68ch; }
.prose p{ color:var(--pine-soft); margin:0 0 18px; }
.prose h2{ font-size:clamp(1.5rem,2.2vw,1.9rem); margin:40px 0 14px; }
.prose h3{ font-size:19px; margin:28px 0 10px; }
.prose ul{ color:var(--pine-soft); padding-left:20px; margin:0 0 18px; }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--moss); }
.prose .muted{ color:var(--moss); font-size:14.5px; }
.prose .placeholder{
  background:var(--paper-deep); border:1px dashed var(--ochre); border-radius:3px;
  padding:2px 8px; font-size:14px; color:var(--pine-soft);
}
.legal-note{
  border-left:3px solid var(--ochre); background:var(--paper-deep);
  padding:16px 20px; margin:0 0 32px; font-size:15px; color:var(--pine-soft); max-width:68ch;
}

/* ---------- CTA-Band ---------- */
.cta-band{ background:var(--pine); color:var(--paper); }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cta-band h2{ color:var(--paper); font-size:clamp(1.5rem,2.4vw,2.1rem); max-width:20ch; }
.cta-band p{ color:var(--sage); margin-top:10px; max-width:44ch; }

/* ---------- Kontakt ---------- */
.contact{ background:var(--pine); color:var(--paper); }
.contact .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.contact h2{ color:var(--paper); font-size:clamp(1.7rem,2.6vw,2.3rem); }
.contact p{ color:var(--sage); margin-top:14px; }
.contact-details{ margin-top:32px; display:flex; flex-direction:column; gap:14px; font-size:16px; }
.contact-details a{ text-decoration:none; color:var(--paper); border-bottom:1px solid var(--sage); }
.contact .small{ font-size:13.5px; color:#8FA08D; margin-top:24px; max-width:40ch; }

form{ display:flex; flex-direction:column; gap:16px; }
.field label{ display:block; font-size:14px; color:var(--sage); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:1px solid var(--sage); color:var(--paper);
  padding:12px 14px; font-family:'Work Sans', sans-serif; font-size:15px; border-radius:2px;
}
.field select option{ color:var(--pine); }
.field input::placeholder, .field textarea::placeholder{ color:#7C8C7B; }
.field textarea{ resize:vertical; min-height:96px; }
.field .consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--sage); }
.field .consent input{ width:auto; margin-top:3px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
form button{
  margin-top:6px; background:var(--ochre); color:var(--pine); border:none;
  padding:14px 22px; font-size:16px; font-weight:500; cursor:pointer; border-radius:2px; align-self:flex-start;
}
form button:hover{ background:#c79724; }
.form-status{ font-size:14.5px; color:var(--sage); min-height:1.2em; }
@media (max-width:820px){ .contact .wrap{ grid-template-columns:1fr; } .row2{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
footer{ background:var(--pine); color:var(--sage); padding:56px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-grid .brand .wordmark{ color:var(--paper); margin-bottom:12px; }
.footer-grid .brand p{ font-size:14px; color:var(--sage); max-width:34ch; margin:0; }
.footer-grid .brand .social{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; text-decoration:none; color:var(--sage); font-size:14.5px; }
.footer-grid .brand .social:hover{ color:var(--paper); }
.footer-grid .brand .social svg{ width:20px; height:20px; flex:none; }
.footer-col h4{ font-family:'Work Sans',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:#8FA08D; font-weight:600; margin:0 0 14px; }
.footer-col a{ display:block; text-decoration:none; color:var(--sage); font-size:14.5px; padding:5px 0; }
.footer-col a:hover{ color:var(--paper); }
.footer-bottom{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--pine-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#8FA08D;
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* ---------- Fotos ---------- */
.photo{ display:block; width:100%; height:100%; object-fit:cover; border-radius:4px; }
figure{ margin:0; }
figure.framed{
  border:1px solid var(--line); background:var(--paper); padding:10px; border-radius:6px;
}
figure figcaption{ margin-top:10px; font-size:13.5px; color:var(--moss); padding:0 4px 4px; }

.hero-photo{ width:100%; aspect-ratio:4/5; overflow:hidden; border-radius:6px;
  border:1px solid var(--line); box-shadow:0 18px 40px -28px rgba(27,42,30,.6); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:900px){ .hero-photo{ aspect-ratio:3/2; max-width:520px; margin:0 auto; } }

/* Volle Breite Bildband */
.media-band{ padding:0; }
.media-band .strip{ height:min(52vh,460px); overflow:hidden; position:relative; }
.media-band .strip img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-band .strip .cap{
  position:absolute; left:0; bottom:0; right:0;
  background:linear-gradient(to top, rgba(27,42,30,.82), rgba(27,42,30,0));
  color:var(--paper); padding:40px 32px 22px; font-family:'Fraunces',serif; font-size:clamp(1.2rem,2.2vw,1.7rem);
}
.media-band .strip .cap .wrap{ padding:0; }

/* Foto-Galerie */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery figure{ aspect-ratio:3/4; overflow:hidden; border-radius:6px; border:1px solid var(--line); }
.gallery figure img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery{ grid-template-columns:1fr; } }

/* Split mit Foto */
.split-photo{ aspect-ratio:4/5; width:100%; overflow:hidden; border-radius:6px; border:1px solid var(--line); }
.split-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .split-photo{ aspect-ratio:3/2; } }

/* ---------- Utilities ---------- */
.center{ text-align:center; }
.mt-l{ margin-top:40px; }
.divider{ border:none; border-top:1px solid var(--line); margin:0; }

/* ---------- Feinschliff / Micro-Interaktionen ---------- */
.card{ transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px -18px rgba(31,45,33,.5); }
.card svg.ico{ transition:transform .18s ease; }
.card:hover svg.ico{ transform:scale(1.08); }

.price-card{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.price-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(31,45,33,.55); }
.price-card:not(.featured):hover{ border-color:var(--moss); }
.price-card a.select{ transition:background .15s ease, color .15s ease, border-color .15s ease; }
.price-card:not(.featured) a.select:hover{ background:var(--pine); color:var(--paper); }
.price-card.featured a.select:hover{ background:#946f19; }

.extra-tier{ transition:transform .18s ease, border-color .18s ease; }
.extra-tier:hover{ transform:translateY(-2px); border-color:var(--moss); }

.step{ transition:transform .18s ease; }
.step:hover{ transform:translateY(-2px); }

.gallery figure img, .split-photo img, .hero-photo img{ transition:transform .5s ease; }
.gallery figure:hover img, .split-photo:hover img{ transform:scale(1.05); }

.footer-col a{ transition:color .15s ease, padding-left .15s ease; }
.footer-col a:hover{ padding-left:4px; }

.btn-ghost{ transition:border-color .15s ease, color .15s ease, background .15s ease; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .card:hover, .price-card:hover, .extra-tier:hover, .step:hover{ transform:none; }
  .gallery figure:hover img, .split-photo:hover img{ transform:none; }
}

/* ---------- Lightbox / Foto in Originalgröße ---------- */
img.zoomable{ cursor:zoom-in; }
body.lb-open{ overflow:hidden; }
.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,22,16,.93); padding:24px; overflow:auto; cursor:zoom-out;
  animation:lb-fade .2s ease;
}
@keyframes lb-fade{ from{ opacity:0; } to{ opacity:1; } }
.lightbox img{
  display:block; margin:auto; max-width:95vw; max-height:95vh;
  width:auto; height:auto; border-radius:4px; cursor:zoom-in;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
}
.lightbox.orig{ align-items:flex-start; justify-content:flex-start; }
.lightbox.orig img{ max-width:none; max-height:none; margin:0; cursor:zoom-out; }
.lightbox .lb-close{
  position:fixed; top:14px; right:18px; z-index:1001;
  width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.12); color:#F1EEE2; font-size:26px; line-height:1;
  cursor:pointer; transition:background .15s ease;
}
.lightbox .lb-close:hover{ background:rgba(255,255,255,.25); }
.lightbox .lb-hint{
  position:fixed; bottom:16px; left:0; right:0; text-align:center;
  color:#D9D6CB; font-size:13px; letter-spacing:.02em; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ .lightbox{ animation:none; } }

/* ============ Manti – Gottesanbeterin-Chatbot ============ */
.manti-wrap{ position:fixed; right:18px; bottom:18px; z-index:900;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px; font-family:'Work Sans',sans-serif; }
.manti-btn{ position:relative; width:96px; height:120px; border:none; background:none; cursor:pointer;
  padding:0; filter:drop-shadow(0 8px 16px rgba(27,42,30,.28)); transition:transform .2s ease; }
.manti-btn:hover{ transform:translateY(-3px) scale(1.03); }
.manti-svg{ width:100%; height:100%; display:block; }
.manti-btn .m-head{ transform-box:fill-box; transform-origin:60px 60px; transition:transform .18s ease; }
.manti-btn .m-body{ transform-box:fill-box; transform-origin:60px 100px; animation:manti-sway 4.5s ease-in-out infinite; }
@keyframes manti-sway{ 0%,100%{ transform:rotate(-1.6deg);} 50%{ transform:rotate(1.6deg);} }
.manti-badge{ position:absolute; top:6px; right:8px; width:22px; height:22px; border-radius:50%;
  background:var(--ochre); color:var(--pine); font-weight:700; font-size:13px; line-height:22px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25); }
.manti-wrap.open .manti-badge{ display:none; }

/* Begrüßungsblase */
.manti-greet{ max-width:230px; background:var(--pine); color:#eef2e6; font-size:13.5px; line-height:1.45;
  padding:12px 30px 12px 14px; border-radius:14px 14px 4px 14px; position:relative; cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(27,42,30,.6); opacity:0; transform:translateY(8px) scale(.96);
  pointer-events:none; transition:opacity .25s ease, transform .25s ease; }
.manti-greet.show{ opacity:1; transform:none; pointer-events:auto; }
.manti-greet b{ color:#fff; }
.manti-greet-x{ position:absolute; top:6px; right:8px; background:none; border:none; color:#b9c6ad;
  font-size:17px; line-height:1; cursor:pointer; }

/* Chat-Panel */
.manti-panel[hidden]{ display:none !important; }
.manti-panel{ width:400px; max-width:calc(100vw - 32px); height:min(600px,80vh);
  background:var(--paper); border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 24px 60px -18px rgba(27,42,30,.55); border:1px solid var(--line); }
.manti-top{ display:flex; align-items:center; gap:10px; background:var(--pine); color:#fff; padding:12px 14px; }
.manti-avatar{ width:34px; height:42px; flex:none; }
.manti-avatar .manti-svg{ width:100%; height:100%; }
.manti-avatar .m-body{ animation:none; }
.manti-id{ min-width:0; }
.manti-name{ display:block; font-weight:600; font-size:15px; font-family:'Fraunces',serif; }
.manti-role{ display:block; font-size:11.5px; color:var(--sage); }
.manti-actions{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.manti-actions a, .manti-actions button{ background:none; border:none; color:#cdd6c2; cursor:pointer;
  width:30px; height:30px; border-radius:6px; font-size:17px; line-height:1; text-decoration:none;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease; }
.manti-actions a:hover, .manti-actions button:hover{ background:rgba(255,255,255,.12); color:#fff; }
.manti-close{ font-size:22px !important; }

.manti-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:11px; background:var(--paper); }
.m-bubble{ max-width:84%; font-size:15px; line-height:1.5; padding:11px 14px; border-radius:14px; }
.m-bubble a{ color:var(--moss); font-weight:600; }
.m-bot{ align-self:flex-start; background:var(--paper-deep); color:var(--pine); border-bottom-left-radius:4px; }
.m-user{ align-self:flex-end; background:var(--moss); color:#fff; border-bottom-right-radius:4px; }
.m-user a{ color:#fff; text-decoration:underline; }

.manti-chips{ display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; background:var(--paper); }
.m-chip{ font-family:'Work Sans',sans-serif; font-size:13px; line-height:1.3; color:var(--pine);
  background:var(--paper); border:1px solid var(--moss); border-radius:16px; padding:6px 11px; cursor:pointer;
  transition:background .15s ease, color .15s ease; }
.m-chip:hover{ background:var(--moss); color:#fff; }
.m-chip.m-more{ border-style:dashed; color:var(--moss); }

.manti-input{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); background:var(--paper); }
.manti-input input{ flex:1; border:1px solid var(--line); border-radius:20px; padding:11px 15px; font-size:15px;
  font-family:'Work Sans',sans-serif; color:var(--pine); background:#fff; }
.manti-input input:focus{ outline:none; border-color:var(--moss); }
.manti-input button{ flex:none; width:38px; height:38px; border-radius:50%; border:none; background:var(--ochre);
  color:var(--pine); font-size:18px; font-weight:700; cursor:pointer; transition:background .15s ease; }
.manti-input button:hover{ background:#946f19; }

@media (max-width:520px){
  .manti-wrap{ right:12px; bottom:12px; }
  .manti-btn{ width:78px; height:98px; }
}
@media (prefers-reduced-motion: reduce){
  .manti-btn .m-body{ animation:none; }
}

/* ============ Pflanze des Tages ============ */
.daily-plant{ padding:0; }
.daily-plant .wrap{ padding-top:64px; padding-bottom:64px; }
.dp-card{ display:grid; grid-template-columns:200px 1fr; gap:0; border:1px solid var(--line);
  background:var(--paper); overflow:hidden; min-height:220px; }
.dp-media{ background:var(--pine); color:var(--sage); position:relative; display:flex;
  align-items:center; justify-content:center; }
.dp-media .dp-leaf{ width:88px; color:var(--moss); }
.dp-media .dp-leaf svg{ width:100%; height:100%; }
.dp-media .dp-season{ position:absolute; top:14px; left:14px; font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:2px; padding:3px 8px; }
.dp-body{ padding:26px 30px; }
.dp-body .kicker{ color:var(--moss); font-size:14px; display:block; margin-bottom:8px; }
.dp-date{ color:var(--pine-soft); }
.dp-body h2{ font-size:clamp(1.5rem,2.4vw,2rem); }
.dp-bot{ font-style:italic; color:var(--pine-soft); margin:2px 0 12px; font-size:16px; }
.dp-reason{ margin:0 0 14px; color:var(--pine-soft); max-width:60ch; }
.dp-tip{ background:var(--paper-deep); border-left:3px solid var(--moss); padding:11px 14px; font-size:15px;
  color:var(--pine); margin-bottom:12px; }
.dp-tip-lbl{ display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--moss); font-weight:600; margin-bottom:3px; }
.dp-weather{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--pine);
  background:#eef3ea; border:1px solid #d5e0d3; border-radius:4px; padding:10px 13px; }
.dp-weather svg{ width:22px; height:22px; color:var(--ochre); flex:none; }
.dp-weather-loading{ color:var(--pine-soft); opacity:.8; }
.dp-note{ font-size:12.5px; color:var(--pine-soft); margin:12px 0 0; }
@media (max-width:640px){
  .dp-card{ grid-template-columns:1fr; }
  .dp-media{ min-height:120px; }
  .dp-media .dp-leaf{ width:60px; }
}

/* ============ Pflanzenplaner ============ */
.planner-sec .section-head{ margin-bottom:28px; }
.pl-form{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 32px; margin-bottom:14px; }
.pl-group{ }
.pl-glabel{ display:block; font-weight:600; font-size:15px; color:var(--pine); margin-bottom:9px; }
.pl-ghint{ display:block; font-weight:400; font-size:13px; color:var(--pine-soft); margin-top:1px; }
.pl-opts{ display:flex; flex-wrap:wrap; gap:8px; }
.pl-opt{ font-family:'Work Sans',sans-serif; font-size:14px; color:var(--pine); background:var(--paper);
  border:1px solid var(--line); border-radius:22px; padding:8px 15px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.pl-opt:hover{ border-color:var(--moss); }
.pl-opt.on{ background:var(--moss); color:#fff; border-color:var(--moss); }
.pl-pet{ display:inline-flex; align-items:center; gap:9px; font-size:14.5px; color:var(--pine-soft);
  margin-top:2px; cursor:pointer; }
.pl-pet input{ width:17px; height:17px; accent-color:var(--moss); }

.pl-results{ border-top:1px solid var(--line); margin-top:22px; padding-top:20px; }
.pl-resulthead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.pl-count{ font-family:'Fraunces',serif; font-size:20px; color:var(--pine); }
.pl-reset{ font-family:'Work Sans',sans-serif; font-size:14px; color:var(--moss); background:none;
  border:1px solid var(--moss); border-radius:20px; padding:6px 14px; cursor:pointer; }
.pl-reset:hover{ background:var(--moss); color:#fff; }
.pl-empty{ color:var(--pine-soft); }
.pl-more{ color:var(--pine-soft); font-size:14px; margin-top:14px; }

.pl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pl-card{ border:1px solid var(--line); background:var(--paper); padding:16px 17px;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pl-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(27,42,30,.5); }
.pl-perfect{ border-color:var(--moss); box-shadow:inset 0 0 0 1px var(--moss); }
.pl-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pl-card h4{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; color:var(--pine); margin:0; }
.pl-bot{ font-style:italic; color:var(--pine-soft); font-size:13px; margin:1px 0 8px; }
.pl-note{ font-size:13.5px; color:var(--pine-soft); margin:0 0 12px; line-height:1.42; flex:1; }
.pl-dots{ display:inline-flex; gap:3px; flex:none; }
.pl-dot{ width:7px; height:7px; border-radius:50%; border:1px solid var(--moss); }
.pl-dot.on{ background:var(--moss); }
.pl-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pl-tag{ font-size:11.5px; color:var(--pine-soft); background:var(--paper-deep); border-radius:3px; padding:3px 7px; }
.pl-tag.pl-toxic{ background:#fdeceb; color:var(--red,#B10E06); }
.pl-tag.pl-safe{ background:#eef3ea; color:var(--moss); }

@media (max-width:820px){ .pl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pl-form{ grid-template-columns:1fr; } .pl-grid{ grid-template-columns:1fr; } }

/* ---- Manti: lebendiges Verhalten (putzen / Geige / winken) ---- */
.manti-btn .m-arms{ transform-box:fill-box; transform-origin:60px 76px; }
.manti-btn .m-violin{ opacity:0; transition:opacity .2s ease; }
.manti-svg.act-violin .m-violin{ opacity:1; }

.manti-svg.act-groom .m-arms{ animation:m-groom .5s ease-in-out 4; }
@keyframes m-groom{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-7px) rotate(-9deg); } }

.manti-svg.act-violin .m-arms{ animation:m-fiddle .34s ease-in-out 10; }
@keyframes m-fiddle{ 0%,100%{ transform:translate(0,0) rotate(0); } 50%{ transform:translate(3px,2px) rotate(5deg); } }
.manti-svg.act-violin .m-bow{ transform-box:fill-box; transform-origin:center; animation:m-bow .34s ease-in-out 10; }
@keyframes m-bow{ 0%,100%{ transform:translate(-3px,-2px); } 50%{ transform:translate(4px,3px); } }
.manti-svg.act-violin .m-body{ animation:manti-sway 1.4s ease-in-out infinite; }

.manti-btn .m-armR{ transform-box:fill-box; transform-origin:63px 74px; }
.manti-svg.act-wave .m-armR{ animation:m-wave .4s ease-in-out 4; }
@keyframes m-wave{ 0%,100%{ transform:rotate(0); } 50%{ transform:rotate(-24deg); } }

@media (prefers-reduced-motion: reduce){
  .manti-svg.act-groom .m-arms, .manti-svg.act-violin .m-arms,
  .manti-svg.act-violin .m-bow, .manti-svg.act-wave .m-armR{ animation:none; }
  .manti-svg.act-violin .m-violin{ opacity:0; }
}

/* ---- Pflanzenfinder: Haushalt-Filter & Ergebnisgruppen ---- */
.pl-household{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line); }
.pl-toggles{ display:flex; flex-wrap:wrap; gap:9px; margin-top:4px; }
.pl-toggle{ font-family:'Work Sans',sans-serif; font-size:14px; color:var(--pine); background:var(--paper);
  border:1px solid var(--line); border-radius:22px; padding:8px 15px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease; }
.pl-toggle:hover{ border-color:var(--moss); }
.pl-toggle.on{ background:var(--pine); color:#fff; border-color:var(--pine); }
.pl-petnote{ font-size:12.5px; color:var(--pine-soft); margin:10px 0 0; }

.pl-groupblock{ margin-bottom:26px; }
.pl-grouphd{ display:flex; align-items:center; gap:9px; font-family:'Work Sans',sans-serif;
  font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--pine);
  margin-bottom:13px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.pl-gdot{ width:9px; height:9px; border-radius:50%; background:var(--line); flex:none; }
.pl-good .pl-gdot{ background:var(--moss); }
.pl-ok .pl-gdot{ background:var(--ochre); }
.pl-gcount{ margin-left:auto; background:var(--paper-deep); color:var(--pine-soft); border-radius:20px;
  padding:2px 10px; font-size:12px; letter-spacing:normal; text-transform:none; }
.pl-good .pl-grouphd{ color:var(--moss); }

.pl-hint{ color:var(--pine-soft); font-size:14px; margin:0 0 14px; }
.pl-pets{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pl-tag.pl-bloom{ background:#f6ecef; color:#9c3a5e; }
.pl-tag.pl-air{ background:#eef3ea; color:var(--moss); }
.pl-tag.pl-allerg{ background:#fdf2e6; color:#9a6b12; }

/* ---- Manti: 1-Klick-Termin ---- */
.manti-termin{ display:block; margin:0 12px 8px; text-align:center; text-decoration:none;
  background:var(--ochre); color:var(--pine); font-family:'Work Sans',sans-serif; font-weight:600;
  font-size:14px; padding:11px 14px; border-radius:8px; transition:background .15s ease; }
.manti-termin:hover{ background:#946f19; }

/* ---- Schnelltermin-Karte (Kontaktseite) ---- */
.quick-termin{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--pine); color:#eef2e6; padding:22px 26px; border-radius:6px; margin-bottom:34px; }
.quick-termin .qt-text{ flex:1; min-width:220px; }
.quick-termin h3{ color:#fff; font-size:20px; margin:0 0 4px; }
.quick-termin p{ margin:0; color:var(--sage); font-size:15px; }
.quick-termin .qt-btn{ background:var(--ochre); color:var(--pine); text-decoration:none; font-weight:600;
  padding:14px 24px; border-radius:4px; font-size:16px; white-space:nowrap; transition:background .15s ease; }
.quick-termin .qt-btn:hover{ background:#c79a26; }

/* ---- Pflanzenfinder-Teaser (Startseite) ---- */
.planner-teaser{ display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  background:var(--paper-deep); border:1px solid var(--line); padding:34px 36px; border-radius:6px; }
.planner-teaser h2{ font-size:clamp(1.6rem,2.4vw,2.1rem); margin:6px 0 0; }
.planner-teaser p{ color:var(--pine-soft); margin-top:12px; max-width:62ch; }
.planner-teaser .btn-primary{ white-space:nowrap; }

/* ---- Manti: laufen & hinsetzen ---- */
.manti-wrap{ transition-property:left; transition-timing-function:linear; }
.manti-wrap.walking .manti-badge{ display:none; }
.manti-wrap.walking .m-body{ animation:m-walkbob .32s ease-in-out infinite; }
@keyframes m-walkbob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-3px) rotate(2deg); } }
.manti-wrap.walking .m-legs{ transform-box:fill-box; transform-origin:60px 118px; animation:m-step .3s ease-in-out infinite; }
@keyframes m-step{ 0%,100%{ transform:skewX(-7deg); } 50%{ transform:skewX(7deg); } }
.manti-wrap .manti-svg{ transition:transform .25s ease; }
.manti-wrap.walking.dir-left .manti-svg{ transform:rotate(5deg); }
.manti-wrap.walking.dir-right .manti-svg{ transform:rotate(-5deg); }
@media (prefers-reduced-motion: reduce){
  .manti-wrap{ transition:none; }
  .manti-wrap.walking .m-body, .manti-wrap.walking .m-legs{ animation:none; }
}

/* ---- Pflanzenfinder: einfachere Bedienung ---- */
.pl-group{ position:relative; padding-left:32px; }
.pl-step{ position:absolute; left:0; top:1px; width:23px; height:23px; border-radius:50%;
  background:var(--moss); color:#fff; font-size:13px; font-weight:600;
  display:flex; align-items:center; justify-content:center; }
.pl-more-btn{ margin-top:20px; background:none; border:1px dashed var(--moss); color:var(--moss);
  border-radius:22px; padding:10px 18px; font-family:'Work Sans',sans-serif; font-size:14.5px; cursor:pointer;
  transition:background .15s ease; }
.pl-more-btn:hover{ background:var(--paper-deep); }
.pl-more-panel{ margin-top:16px; padding-top:18px; border-top:1px dashed var(--line); }
.pl-form-more{ grid-template-columns:1fr !important; margin-bottom:16px; }

/* ============ Wohnungsplaner ============ */
.wp-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:16px; }
.wp-btn{ font-family:'Work Sans',sans-serif; font-size:14.5px; color:#fff; background:var(--moss);
  border:none; border-radius:22px; padding:9px 16px; cursor:pointer; transition:background .15s ease; }
.wp-btn:hover{ background:#345c40; }
.wp-clear{ background:none; color:var(--pine-soft); border:1px solid var(--line); }
.wp-clear:hover{ background:var(--paper-deep); }
.wp-tog{ font-family:'Work Sans',sans-serif; font-size:14px; color:var(--pine); background:var(--paper);
  border:1px solid var(--line); border-radius:22px; padding:8px 14px; cursor:pointer; }
.wp-tog.on{ background:var(--pine); color:#fff; border-color:var(--pine); }
.wp-sep{ width:1px; height:22px; background:var(--line); }

.wp-stage-wrap{ overflow:auto; }
.wp-stage{ position:relative; height:460px; min-width:520px; background:var(--paper);
  border:1px solid var(--line); border-radius:6px;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:24px 24px; background-position:-1px -1px; touch-action:none; }
.wp-stage.placing{ cursor:crosshair; }
.wp-empty{ position:absolute; inset:24px; margin:auto; max-width:420px; height:max-content;
  color:var(--pine-soft); font-size:14.5px; text-align:center; }
.wp-compass{ position:absolute; top:10px; right:10px; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line); background:rgba(241,238,226,.85); font-size:10px; color:var(--pine-soft); z-index:5; }
.wp-compass span{ position:absolute; left:50%; transform:translateX(-50%); }
.wp-compass span:nth-child(1){ top:3px; color:var(--red,#B10E06); font-weight:700; }
.wp-compass span:nth-child(2){ top:50%; right:5px; left:auto; transform:translateY(-50%); }
.wp-compass span:nth-child(3){ bottom:3px; top:auto; }
.wp-compass span:nth-child(4){ top:50%; left:5px; transform:translateY(-50%); }
.wp-compass i{ position:absolute; left:50%; top:50%; width:2px; height:18px; background:var(--red,#B10E06);
  transform:translate(-50%,-100%); border-radius:2px; }

.wp-room{ position:absolute; border:2px solid var(--moss); border-radius:4px; cursor:move;
  box-shadow:0 2px 8px -4px rgba(27,42,30,.3); }
.wp-room.dragging{ opacity:.9; }
.wp-roomname{ position:absolute; left:8px; top:6px; font-size:13px; font-weight:600; color:var(--pine);
  cursor:text; background:rgba(255,255,255,.5); padding:1px 6px; border-radius:3px; }
.wp-del{ position:absolute; top:4px; right:4px; width:20px; height:20px; border:none; border-radius:50%;
  background:rgba(27,42,30,.12); color:var(--pine); font-size:15px; line-height:1; cursor:pointer; }
.wp-del:hover{ background:var(--red,#B10E06); color:#fff; }
.wp-resize{ position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 50%, var(--moss) 50%); border-bottom-right-radius:4px; }

.wp-win{ position:absolute; z-index:4; }
.wp-winbadge{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; cursor:grab;
  background:var(--ochre); color:var(--pine); font-weight:700; font-size:14px; border-radius:6px;
  box-shadow:0 3px 8px -3px rgba(27,42,30,.5); border:2px solid #fff; }
.wp-win.sel .wp-winbadge{ outline:2px solid var(--pine); }
.wp-winmenu{ position:absolute; top:38px; left:50%; transform:translateX(-50%); width:190px;
  background:var(--pine); color:#eef2e6; padding:10px; border-radius:8px; display:none; z-index:6;
  box-shadow:0 12px 28px -12px rgba(0,0,0,.5); }
.wp-win.sel .wp-winmenu{ display:block; }
.wp-winlbl{ display:block; font-size:12px; color:var(--sage); margin-bottom:7px; }
.wp-orients{ display:flex; gap:6px; margin-bottom:9px; }
.wp-or{ flex:1; background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.25);
  border-radius:5px; padding:7px 0; font-weight:600; cursor:pointer; }
.wp-or.on{ background:var(--ochre); color:var(--pine); border-color:var(--ochre); }
.wp-windel{ width:100%; background:none; border:1px solid rgba(255,255,255,.3); color:#e8b7b3;
  border-radius:5px; padding:6px; font-size:12.5px; cursor:pointer; }

.wp-results{ margin-top:22px; }
.wp-rhint{ color:var(--pine-soft); font-size:14px; }
.wp-rcard{ border:1px solid var(--line); border-radius:6px; padding:14px 16px; margin-bottom:12px; background:var(--paper); }
.wp-rhead{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.wp-rbadge{ width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--ochre); color:var(--pine); font-weight:700; border-radius:6px; }
.wp-rhead strong{ display:block; font-family:'Fraunces',serif; font-size:16px; color:var(--pine); }
.wp-rlight{ font-size:13px; color:var(--pine-soft); }
.wp-plants{ display:flex; flex-wrap:wrap; gap:8px; }
.wp-plant{ background:var(--paper-deep); border-radius:20px; padding:6px 13px; font-size:13.5px; color:var(--pine);
  display:flex; align-items:center; gap:6px; }
.wp-plight{ font-size:11px; color:var(--pine-soft); }
.wp-more a{ color:var(--moss); font-weight:600; font-size:14px; text-decoration:none; }

/* ---- Pflanzenfinder: Reiter (Tabs) ---- */
.pf-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.pf-tab{ font-family:'Work Sans',sans-serif; font-size:15.5px; color:var(--pine-soft); background:none;
  border:none; border-bottom:3px solid transparent; padding:12px 18px; cursor:pointer; margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease; }
.pf-tab:hover{ color:var(--pine); }
.pf-tab.active{ color:var(--pine); border-bottom-color:var(--moss); font-weight:600; }
.pf-intro{ color:var(--pine-soft); max-width:66ch; margin:0 0 20px; }

/* ---- Manti klettert (Leiter + kleines Regal) ---- */
.manti-climbset{ position:absolute; right:0; bottom:0; width:96px; height:150px; opacity:0;
  z-index:-1; pointer-events:none; transition:opacity .3s ease; }
.manti-climbset svg{ width:100%; height:100%; display:block; }
.manti-wrap.climbing .manti-climbset{ opacity:1; }
.manti-wrap.climbing .manti-btn{ animation:m-climb 4.7s ease-in-out; }
@keyframes m-climb{ 0%{ transform:translateY(0); } 22%{ transform:translateY(-56px); } 74%{ transform:translateY(-56px); } 100%{ transform:translateY(0); } }
.manti-wrap.climbing .m-legs{ transform-box:fill-box; transform-origin:60px 118px; animation:m-step .28s ease-in-out infinite; }

/* ---- Verstreute Deko-Regale mit Pflänzchen ---- */
/* Regale sitzen exakt im Seitenrand neben der Inhaltsspalte (max 1120px)
   und ragen nie in den Text: linke/rechte Kante an die Spalte gekoppelt. */
.bk-deco{ position:fixed; width:64px; height:72px; z-index:5; opacity:.92; pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(27,42,30,.15)); }
.bk-deco svg{ width:100%; height:100%; display:block; }
.bk-deco.d1{ left:calc((100vw - var(--max)) / 2 - 74px); top:150px; }
.bk-deco.d2{ left:calc((100vw - var(--max)) / 2 - 74px); bottom:120px; }
.bk-deco.d3{ right:calc((100vw - var(--max)) / 2 - 74px); top:300px; }
/* Erst zeigen, wenn der Seitenrand breit genug ist (kein Überlappen). */
@media (max-width:1300px){ .bk-deco{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .manti-wrap.climbing .manti-btn, .manti-wrap.climbing .m-legs{ animation:none; }
}

/* ============ Leistungen: vereinfachte, bildliche Karten ============ */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.svc{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:26px 22px;
  text-align:center; display:flex; flex-direction:column; align-items:center;
  transition:transform .18s ease, box-shadow .18s ease; }
.svc:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(27,42,30,.5); }
.svc-ico{ width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px; flex:none; }
.svc-ico svg{ width:34px; height:34px; color:#fff; }
.svc h3{ font-size:19px; margin-bottom:8px; }
.svc-lead{ color:var(--pine-soft); font-size:14.5px; line-height:1.45; margin:0 0 16px; }
.svc-facts{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:auto; }
.svc-facts span{ font-size:12px; font-weight:500; background:var(--paper-deep); color:var(--pine);
  border-radius:20px; padding:5px 12px; }
.svc-facts .svc-price{ background:var(--ochre); color:var(--pine); }
/* je Leistung eine eigene Farbe */
.svc-a .svc-ico{ background:#6f9a5c; }
.svc-b .svc-ico{ background:#3F6C4D; }
.svc-c .svc-ico{ background:#3a7488; }
.svc-d .svc-ico{ background:#b07d1e; }
@media (max-width:900px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---- Wohnungsplaner: Pflanzen in den Raum ---- */
.wp-btn-plant.on{ background:#345c40; }
.wp-search{ margin-bottom:14px; }
.wp-search input{ width:100%; max-width:420px; border:1px solid var(--line); border-radius:22px;
  padding:10px 16px; font-family:'Work Sans',sans-serif; font-size:14.5px; color:var(--pine); background:#fff; }
.wp-search input:focus{ outline:none; border-color:var(--moss); }
.wp-searchlist{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; max-height:150px; overflow:auto; }
.wp-sres{ font-family:'Work Sans',sans-serif; font-size:13.5px; color:var(--pine); background:var(--paper-deep);
  border:1px solid var(--line); border-radius:18px; padding:6px 12px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.wp-sres:hover{ background:var(--moss); color:#fff; }
.wp-sbot{ font-size:11px; color:var(--pine-soft); font-style:italic; }
.wp-sres:hover .wp-sbot{ color:var(--sage); }

.wp-plant{ border:1px solid var(--line); cursor:pointer; transition:background .15s ease, border-color .15s ease; }
.wp-plant:hover{ background:var(--moss); color:#fff; border-color:var(--moss); }
.wp-plant:hover .wp-plight{ color:var(--sage); }
.wp-padd{ color:var(--moss); font-weight:700; }
.wp-plant:hover .wp-padd{ color:#fff; }

.wp-plantobj{ position:absolute; z-index:3; display:flex; align-items:center; gap:5px; cursor:grab;
  background:rgba(255,255,255,.92); border:1px solid var(--moss); border-radius:20px; padding:3px 8px 3px 5px;
  box-shadow:0 3px 8px -4px rgba(27,42,30,.4); }
.wp-plantobj.dragging{ opacity:.9; }
.wp-pot{ font-size:16px; }
.wp-pname{ font-size:12.5px; font-weight:500; color:var(--pine); white-space:nowrap; }
.wp-pdel{ border:none; background:none; color:var(--pine-soft); font-size:15px; line-height:1; cursor:pointer; padding:0 2px; }
.wp-pdel:hover{ color:var(--red,#B10E06); }

/* ---- Wohnungsplaner: PC-Hinweis ---- */
.wp-hint{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--pine);
  background:#fbf3e2; border:1px solid #e7d4a8; border-radius:6px; padding:9px 13px; margin:0 0 16px; }
@media (max-width:700px){ .wp-hint{ background:#f9eccf; font-weight:500; } }

/* ---- Manti: dramatisches Geigenspiel ---- */
.manti-svg.act-violin-drama .m-arms{ animation:m-fiddle 1.4s ease-in-out infinite; }
.manti-svg.act-violin-drama .m-bow{ transform-box:fill-box; transform-origin:center; animation:m-bow 1.4s ease-in-out infinite; }
.manti-svg.act-violin-drama .m-body{ animation:m-drama 2.8s ease-in-out infinite; }
@keyframes m-drama{ 0%,100%{ transform:rotate(-8deg) translateY(0); } 50%{ transform:rotate(8deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce){
  .manti-svg.act-violin-drama .m-arms, .manti-svg.act-violin-drama .m-bow, .manti-svg.act-violin-drama .m-body{ animation:none; }
}

/* ---- Manti-Chat: stabil auf dem Smartphone ---- */
@media (max-width:560px){
  .manti-panel{ position:fixed; left:8px; right:8px; bottom:8px; width:auto; max-width:none;
    height:min(72vh,540px); height:min(72dvh,540px); z-index:1002; }
  .manti-wrap.open .manti-btn{ opacity:0; pointer-events:none; }
  .manti-greet{ display:none !important; }
  .manti-log{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
}

/* ---- Leistungs-Karten verlinken auf die Preise ---- */
.svc{ position:relative; cursor:pointer; }
.svc-cover{ position:absolute; inset:0; z-index:1; border-radius:12px; }
.svc-cover:focus-visible{ outline:2px solid var(--ochre); outline-offset:2px; }
[id^="preis-"]{ scroll-margin-top:96px; }

/* ---- Manti: natürliches Geigenspiel (ruhiges, dauerhaftes Streichen ~50 s) ---- */
.manti-svg.act-violin .m-arms{ animation:m-fiddle .9s ease-in-out infinite; }
.manti-svg.act-violin .m-bow{ transform-box:fill-box; transform-origin:center; animation:m-bow .9s ease-in-out infinite; }
.manti-svg.act-violin .m-body{ animation:m-natural 1.8s ease-in-out infinite; }
@keyframes m-natural{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
@media (prefers-reduced-motion: reduce){
  .manti-svg.act-violin .m-arms, .manti-svg.act-violin .m-bow, .manti-svg.act-violin .m-body{ animation:none; }
  .manti-svg.act-violin .m-violin{ opacity:0; }
}

/* ---- Großer Chat-Reiter (chat.html) ---- */
.manti-host{ display:flex; justify-content:center; }
.manti-chatpage .manti-wrap{ position:static; margin:0; inset:auto; }
.manti-chatpage .manti-btn,
.manti-chatpage .manti-greet,
.manti-chatpage .manti-expand,
.manti-chatpage .manti-close{ display:none !important; }
.manti-chatpage .manti-panel{ position:static !important; width:min(820px,96vw); max-width:none;
  height:min(70vh,680px); margin:0 auto; }
.chat-hint{ text-align:center; color:var(--pine-soft); font-size:14px; max-width:70ch; margin:16px auto 0; }

/* ---- Wohnungsplaner: größere Fenster, Möbel, Speichern-Buttons ---- */
.wp-winbadge{ width:44px; height:44px; font-size:17px; border-radius:8px; }
.wp-winmenu{ top:50px; width:210px; }
.wp-btn.wp-ghost{ background:none; color:var(--pine); border:1px solid var(--line); }
.wp-btn.wp-ghost:hover{ background:var(--paper-deep); }

.wp-furn{ position:absolute; z-index:2; box-sizing:border-box; }
.wp-furn.dragging{ opacity:.9; }
.wp-flabel{ position:absolute; left:6px; top:3px; font-size:11.5px; font-weight:600; color:var(--pine);
  background:rgba(255,255,255,.55); padding:0 5px; border-radius:3px; pointer-events:none; white-space:nowrap; }
.wp-fdel{ position:absolute; top:2px; right:2px; width:18px; height:18px; border:none; border-radius:50%;
  background:rgba(27,42,30,.12); color:var(--pine); font-size:13px; line-height:1; cursor:pointer; z-index:2; }
.wp-fdel:hover{ background:var(--red,#B10E06); color:#fff; }
.wp-fresize{ position:absolute; right:0; bottom:0; width:14px; height:14px; cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 50%, #9a7b4a 50%); }
.wp-furn.f-shelf{ background:#c9a978; border:1px solid #9a7b4a; border-radius:2px;
  box-shadow:0 4px 6px -3px rgba(27,42,30,.4); cursor:grab;
  background-image:linear-gradient(#b8975f 0 0); background-size:100% 4px; background-position:0 100%; background-repeat:no-repeat; }
.wp-furn.f-sill{ background:#e7e2d4; border:1px solid #c9c2a6; border-bottom:3px solid #b9b193; border-radius:2px; cursor:grab; }
.wp-furn.f-cupboard{ background:#b98a55; border:1px solid #86633a; border-radius:3px; cursor:grab;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.06), 0 4px 8px -4px rgba(27,42,30,.4); }
.wp-furn.f-cupboard::before{ content:""; position:absolute; left:50%; top:14px; bottom:8px; width:1px; background:#86633a; }
.wp-furn.f-cupboard::after{ content:""; position:absolute; left:calc(50% - 8px); top:46%; width:5px; height:5px; border-radius:50%; background:#f2e4cf; box-shadow:12px 0 0 #f2e4cf; }

/* Pflanzen-Token immer anklickbar (über dem Fenster-Menü) */
.wp-plantobj{ z-index:7; }

/* ================= Über uns – visuelle Story ================= */
.intro-lead{ font-family:'Fraunces',serif; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.45; color:var(--pine); margin:0; }
.intro-sub{ color:var(--pine-soft); margin-top:18px; font-size:16px; }
.intro-facts{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.intro-facts li{ font-size:13.5px; color:var(--pine-soft); border:1px solid var(--line); border-radius:999px; padding:6px 14px; display:inline-flex; align-items:center; gap:7px; }
.intro-facts li svg{ width:15px; height:15px; color:var(--moss); }

/* Zeitstrahl / Weg */
.journey{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); }
.journey li{ position:relative; padding:0 16px; text-align:center; }
.journey li::before{ content:""; position:absolute; top:33px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0; }
.journey li:first-child::before{ display:none; }
.j-ico{ position:relative; z-index:1; width:68px; height:68px; margin:0 auto 18px; border-radius:50%; background:var(--paper-deep); border:2px solid var(--moss); display:grid; place-items:center; }
.j-ico svg{ width:32px; height:32px; color:var(--moss); }
.j-when{ display:block; font-family:'Fraunces',serif; font-size:14px; color:var(--ochre); margin-bottom:6px; }
.journey h3{ font-size:16.5px; margin-bottom:7px; }
.journey p{ color:var(--pine-soft); font-size:14px; margin:0; }
@media (max-width:760px){
  .journey{ grid-template-columns:1fr; gap:26px; }
  .journey li{ padding:0 0 0 86px; text-align:left; min-height:68px; display:flex; flex-direction:column; justify-content:center; }
  .journey li::before{ top:-26px; left:33px; width:2px; height:26px; }
  .j-ico{ position:absolute; left:0; top:0; margin:0; }
}

/* Name-Gleichung */
.namebox{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; text-align:center; }
.namebox .term{ display:flex; flex-direction:column; align-items:center; gap:10px; max-width:150px; }
.namebox .term svg{ width:38px; height:38px; color:var(--moss); }
.namebox .term b{ font-family:'Fraunces',serif; font-weight:500; font-size:19px; }
.namebox .term small{ color:var(--pine-soft); font-size:13px; line-height:1.35; }
.namebox .op{ font-family:'Fraunces',serif; font-size:30px; color:var(--ochre); }
.namebox .term.result svg{ color:var(--ochre); width:44px; height:44px; }
.namebox .term.result b{ font-size:22px; }

/* Werte-Icons */
.value .v-ico{ width:30px; height:30px; color:var(--moss); margin-bottom:12px; display:block; }

/* Zitat-Band – Menschlichkeit */
.story-quote{ background:var(--pine); color:var(--paper); }
.story-quote .wrap{ max-width:840px; margin:0 auto; text-align:center; }
.story-quote .qmark{ display:block; font-family:'Fraunces',serif; font-size:3.4rem; line-height:.4; color:var(--ochre); margin-bottom:18px; }
.story-quote blockquote{ margin:0; font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.35rem,3vw,1.95rem); line-height:1.4; }
.story-quote cite{ display:block; margin-top:22px; font-style:normal; font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--sage); }

/* ================= Termin-Kalender (Orientierung) ================= */
.cal-card{ border:1px solid var(--line); border-radius:8px; background:var(--paper); padding:24px 26px; }
.cal-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
.cal-head h3{ font-size:19px; margin:0; }
.cal-head .cal-sub{ color:var(--pine-soft); font-size:14px; }
.cal-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:20px; }
.cal-month h4{ font-family:'Fraunces',serif; font-weight:500; font-size:17px; margin:0 0 12px; text-align:center; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow{ font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--moss); text-align:center; padding-bottom:6px; }
.cal-day{ position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--pine); border:1px solid transparent; border-radius:50%; background:none;
  font-family:inherit; cursor:pointer; transition:background .15s ease, color .15s ease; padding:0; }
.cal-day.empty{ cursor:default; }
.cal-day.is-weekend{ color:var(--moss); }
.cal-day.is-past{ color:#B7B29B; cursor:default; }
.cal-day.is-selectable:hover{ background:var(--sage); }
.cal-day.is-today{ border-color:var(--ochre); border-width:2px; font-weight:600; color:var(--pine); }
.cal-day.is-sel{ background:var(--moss); color:var(--paper); border-color:var(--moss); }
.cal-day.is-sel.is-today{ border-color:var(--ochre); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:18px; margin-top:22px; font-size:13px; color:var(--pine-soft); }
.cal-legend span{ display:inline-flex; align-items:center; gap:8px; }
.cal-dot{ width:16px; height:16px; border-radius:50%; display:inline-block; }
.cal-dot.today{ border:2px solid var(--ochre); }
.cal-dot.sel{ background:var(--moss); }
.cal-dot.free{ border:1px solid var(--line); }
.cal-pick{ margin-top:18px; font-size:15px; color:var(--pine); }
.cal-pick b{ font-family:'Fraunces',serif; font-weight:600; }
@media (max-width:640px){ .cal-wrap{ grid-template-columns:1fr; gap:26px; } .cal-card{ padding:20px 16px; } }
.cal-nav{ display:inline-flex; align-items:center; gap:6px; }
.cal-nav button{ width:36px; height:36px; border:1px solid var(--line); background:var(--paper); border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--pine); transition:background .15s ease, border-color .15s ease; }
.cal-nav button:hover:not(:disabled){ background:var(--sage); border-color:var(--moss); }
.cal-nav button:disabled{ opacity:.35; cursor:default; }
.cal-nav button svg{ width:18px; height:18px; }
.cal-today-btn{ font-size:13px; color:var(--moss); background:none; border:none; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0 4px; }