:root{
  --ms-brand:#1e7f56; --ms-brand2:#2aa570;
  --ms-ink:#1f2a2e; --ms-muted:#5b6b72;
  --ms-bg:#f7faf9; --ms-line:#e7ece9; --ms-chip:#e8f5ef;

  --ms-header-grad: linear-gradient(150deg,
  color-mix(in oklab, var(--ms-brand) 10%, #ffffff) 0%,
  color-mix(in oklab, var(--ms-brand) 6%,  #ffffff) 42%,
  #ffffff 100%);
  --ms-header-grad-hover: linear-gradient(150deg,
  color-mix(in oklab, var(--ms-brand) 16%, #ffffff) 0%,
  color-mix(in oklab, var(--ms-brand) 10%, #ffffff) 46%,
  #ffffff 100%);
  --ms-header-grad-active: linear-gradient(150deg,
  color-mix(in oklab, var(--ms-brand) 18%, #ffffff) 0%,
  color-mix(in oklab, var(--ms-brand) 12%, #ffffff) 50%,
  #ffffff 100%);
  --ms-stroke:#e6ddd0;
}

@media (prefers-color-scheme: dark){
  :root{
    --ms-bg:#0f1416; --ms-ink:#e6eef0; --ms-muted:#9fb1b9;
    --ms-line:#223036; --ms-chip:#0f241a; --ms-stroke:#1a2a30;
    --ms-header-grad: linear-gradient(150deg,
    color-mix(in oklab, var(--ms-brand) 6%, #0f1416) 0%,
    color-mix(in oklab, var(--ms-brand) 4%, #0f1416) 42%,
    #0f1416 100%);
    --ms-header-grad-hover: linear-gradient(150deg,
    color-mix(in oklab, var(--ms-brand) 9%, #0f1416) 0%,
    color-mix(in oklab, var(--ms-brand) 6%, #0f1416) 46%,
    #0f1416 100%);
    --ms-header-grad-active: linear-gradient(150deg,
    color-mix(in oklab, var(--ms-brand) 11%, #0f1416) 0%,
    color-mix(in oklab, var(--ms-brand) 7%, #0f1416) 50%,
    #0f1416 100%);
  }
  .ms-accordion{ background:#11181b; border-color:#1a2a2f; }
}

/* Wrapper */
.ms-accordion{
  border:1px solid var(--ms-stroke);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.ms-acc-item + .ms-acc-item{ border-top:1px solid var(--ms-stroke); }

/* TITELZEILE */
.ms-accordion .ms-acc-btn{
  position:relative;
  width:100%;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  border:0 !important;
  box-shadow:none !important;
  background-image:none !important;
  background: var(--ms-header-grad) !important;

  -webkit-appearance:none; appearance:none;
  text-align:left;
  box-sizing:border-box;
}
.ms-accordion .ms-acc-item + .ms-acc-item .ms-acc-btn{ border-top:1px solid var(--ms-stroke); }
.ms-accordion .ms-acc-btn:hover{ background: var(--ms-header-grad-hover) !important; }
.ms-accordion .ms-acc-btn[aria-expanded="true"]{ background: var(--ms-header-grad-active) !important; }
.ms-accordion .ms-acc-btn:focus-visible{
  outline:2px solid color-mix(in oklab, var(--ms-brand) 60%, #0000);
  outline-offset:2px;
}

/* linke Akzentleiste bei offen */
.ms-accordion .ms-acc-btn::before{
  content:"";
  position:absolute; inset:6px auto 6px 6px; width:4px; border-radius:8px;
  background:var(--ms-brand); opacity:0; transform:scaleY(0.6);
  transition:opacity .2s ease, transform .2s ease;
}
.ms-accordion .ms-acc-btn[aria-expanded="true"]::before{ opacity:1; transform:scaleY(1); }

/* Titel + Chevron */
.ms-acc-title{
  font:600 1.02rem/1.28 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ms-ink);
  text-align:left;
  flex:1 1 auto;
  min-width:0;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.ms-acc-indicator{
  flex:0 0 34px;
  width:34px; height:34px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--ms-stroke); background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.ms-acc-indicator i{
  transition:transform .2s ease;
  font-size:1.05rem;
  color:color-mix(in oklab, var(--ms-muted) 85%, #000);
}
.ms-acc-btn:hover .ms-acc-indicator{
  background:color-mix(in oklab, var(--ms-brand) 10%, #fff);
  border-color:color-mix(in oklab, var(--ms-brand) 28%, var(--ms-stroke));
}
.ms-acc-btn[aria-expanded="true"] .ms-acc-indicator i{ transform:rotate(180deg); color:var(--ms-brand); }

/* PANEL (Slide-Animation) */
.ms-acc-panel{
  height:0; overflow:hidden; visibility:hidden; opacity:0; transform:translateY(-6px);
  padding:0 16px;
  border-top:0 !important;
  box-sizing:border-box;
  transition: height .36s cubic-bezier(.2,.7,.2,1), opacity .28s ease, transform .36s cubic-bezier(.2,.7,.2,1);
  max-width:100%;
}
.ms-acc-panel-inner{ padding-bottom:16px; }
.ms-acc-panel.is-open{ visibility:visible; opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .ms-acc-panel{ transition:none !important; } }

/* ---------------------------------------------------- */
/* GRID: Info links, Logo rechts, Adresse darunter      */
/* ---------------------------------------------------- */

.ms-acc-grid{
  display:grid;
  gap:16px 18px;
  align-items:start;
  min-width:0;
  /* Standard: ohne Logo – 1 Spalte, Adresse darunter */
  grid-template-columns: 1fr;
  grid-template-areas:
    "info"
    "addr";
}

/* Mit Logo: rechts neben Info, Adresse über 2 Spalten */
.ms-acc-grid.has-logo{
  grid-template-columns: 1fr 110px; /* rechts ~96px Bild + Puffer */
  grid-template-areas:
    "info logo"
    "addr addr";
}

/* Grid-Areas */
.ms-acc-info{ grid-area: info; min-width:0; }
.ms-acc-logo{ grid-area: logo; justify-self:end; align-self:start; margin-top:6px; }
.ms-addrbox{ grid-area: addr; }

/* Logo-Optik */
.ms-acc-logo a{ display:block; }
.ms-acc-logo img{
  width:96px; height:96px; border-radius:16px; object-fit:cover; display:block;
  border:1px solid var(--ms-stroke); box-shadow:0 1px 0 rgba(0,0,0,.06);
}

/* Meta/Badges */
.ms-acc-meta{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; margin-top:.2rem;
}
.ms-badge{
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.82rem; font-weight:600; color:var(--ms-brand);
  background:var(--ms-chip); padding:.2rem .5rem; border-radius:999px;
  border:1px solid color-mix(in oklab, var(--ms-brand) 25%, transparent);
}
/* Inhaber-Badge */
.ms-owner{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.84rem; font-weight:700; color:var(--ms-ink);
  background:color-mix(in oklab, var(--ms-brand) 7%, #fff);
  padding:.22rem .55rem; border-radius:10px;
  border:1px solid color-mix(in oklab, var(--ms-brand) 18%, #ffffff);
}

/* Kontakte */
.ms-muted{ color:var(--ms-muted); }
.ms-acc-contacts{
  display:flex; gap:14px; flex-wrap:wrap; margin:.6rem 0 .2rem;
}
.ms-row{ display:inline-flex; align-items:center; gap:.45rem; }
.ms-row a{
  color:inherit; text-decoration:none; border-bottom:1px dotted color-mix(in oklab, var(--ms-ink) 30%, transparent);
  overflow-wrap:anywhere; word-break:break-word;
}
.ms-row a:hover{ color:var(--ms-brand); border-color:var(--ms-brand); }

/* Telefonnummer & E-Mail möglichst nicht trennen */
.ms-row.ms-phone a,
.ms-row.ms-mail a{ white-space:nowrap; }

/* Adresse */
.ms-addrbox{
  margin-top:.6rem; padding:.7rem .9rem; background:color-mix(in oklab, var(--ms-brand) 5%, #fff);
  border:1px dashed var(--ms-stroke); border-radius:12px;
}
.ms-addrhead{ display:flex; align-items:center; gap:.45rem; font-weight:600; color:var(--ms-ink); margin-bottom:.3rem; }
.ms-addrbody{ color:var(--ms-ink); line-height:1.45; }
.ms-addrbody .address{ margin:0; }

/* Map */
.ms-map{ margin-top:.65rem; border-radius:12px; overflow:hidden; border:1px solid var(--ms-stroke); background:#fff; }
.ms-map-canvas{ width:100%; height:230px; }
@media (max-width:560px){ .ms-map-canvas{ height:200px; } }
.ms-map-fallback{ padding:.6rem .8rem; color:var(--ms-ink); }
.ms-map-fallback a{ color:var(--ms-brand); text-decoration:underline; }

/* ---------------------------------------------------- */
/* MOBIL                                                */
/* ---------------------------------------------------- */
@media (max-width:640px){
  .ms-acc-btn{ padding:14px 12px; }
  .ms-acc-grid.has-logo{
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "logo"
      "addr";
  }
  .ms-acc-logo{ justify-self:start; margin-top:2px; }
  .ms-acc-logo img{ width:80px; height:80px; }
}

/* Hilfen */
.ms-acc-panel.no-anim { transition: none !important; }
.leaflet-container{ font:inherit; }

/* --- Mobile gutter fix for accordion header --- */
@media (max-width:640px){
  .ms-acc-btn{
    padding-inline-start: 14px;
    padding-inline-end: 22px;
  }
  .ms-acc-indicator{ margin-inline-start: 6px; }
}
@media (max-width:640px){
  .ms-acc-indicator{ flex-basis: 32px; width:32px; height:32px; }
}

/* --- Align info row bottom with logo (desktop/tablet) --- */
@media (min-width: 641px){
  .ms-acc-grid.has-logo{ align-items: end; }
  .ms-acc-info{ align-self: end; }
  .ms-acc-logo{ align-self: end; }
  .ms-acc-contacts{ margin-bottom: .15rem; }
}

/* Mobil wieder normal von oben starten (Stack-Layout) */
@media (max-width: 640px){
  .ms-acc-grid.has-logo{ align-items: start; }
  .ms-acc-info, .ms-acc-logo{ align-self: start; }
}

/* Abstand unter der Titelzeile, wenn KEIN Logo vorhanden ist */
.ms-acc-grid:not(.has-logo){ padding-top: 10px; }
@media (max-width:640px){
  .ms-acc-grid:not(.has-logo){ padding-top: 6px; }
}
.ms-acc-grid:not(.has-logo) .ms-acc-meta{ margin-top: .35rem; }

/* --- Fallback, falls has-logo gesetzt, aber kein <img> im Logo-Block --- */
.ms-acc-grid.has-logo:not(:has(.ms-acc-logo img)){
  grid-template-columns: 1fr;
  grid-template-areas:
    "info"
    "addr";
  align-items: start;
}
.ms-acc-grid.has-logo:not(:has(.ms-acc-logo img)) .ms-acc-logo{ display:none; }
.ms-acc-grid.has-logo:not(:has(.ms-acc-logo img)) .ms-acc-info{ padding-top: 10px; }