.dropbutton {
  display:inline-block;
  line-height:1.5rem;
  height:2.2rem;
  overflow:hidden;
  position:relative;
  width:auto;
  border-width:1px;
  border-style:solid;
  border-radius: 2px;
}
.dropbutton:hover, .dropbutton:focus-within {
  height:auto;
  overflow:visible;
  position:absolute;
  z-index:10;
}
.dropbutton li {
  display:block;
}
/* erst ab dem 2. Listeneintrag ist Dropdown-Pfeil nötig: */
/* mit Background in farben.css */

.dropbutton li:nth-of-type(2)::after,
.dropbutton li:nth-child(2)::after {
  display:block;
  width:1.5rem;
  line-height:1.8rem;
  content:''; /* Hintergrund in farben.css */
  content:'▼';
  font-size:80%;
  position:absolute;
  top:0;
  right:0;
  height:1rem;
  display:block;
}
.dropbutton li:nth-of-type(2)::after {
  display:block;
  width:1.5rem;
  line-height:1.8rem;
  content:'▼';
  font-size:80%;
  position:absolute;
  top:0;
  right:0;
}
/*  mit Background in farben.css
.dropbutton:hover li:nth-of-type(2)::after,
.dropbutton:focus-within li:nth-child(2)::after {
  visibility:hidden;
  display:none;
  position:absolute;top:0;left:-9999rem;
  height:1px;
  width:1px;
}
*/
.dropbutton li a, .dropdown li a:hover, .dropdown li a:focus {
  padding:0.3rem 2rem 0.3rem 1rem;
  display:block;
  width:auto;
  max-width:16rem; /* "Entitätsbeschriftung / Titel" sonst overflow */
  overflow-wrap:break-word;
  /* zu langen Text verhindern (ist unsichtbar) */
  /*
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

.dropbutton li:hover, 
.dropbutton li a:focus{
  background:white;
}

.dropbutton li input[id^="edit-displays-"] {
  max-width:none;
}
/* in /admin/structure/views/view/... sonst Probleme */
/*
.dropbutton input, .dropbutton input:hover, .dropbutton input:hover, .dropbutton input:focus, .dropbutton input:active { 
  background:none;
  box-shadow:none;
  text-shadow:inherit; 
  padding:0;
  border:0;
  width:auto;
  text-transform:none;
  text-align:left;
  letter-spacing:inherit;
  font-size:inherit;
  animation:none;
  margin:0;
  float:none;
  clear:both;
}
*/


/* den von JavaScript injizierten Code (den Button) ausblenden, zerreißt das Styling: */

/* dabei wird auch Rest ausgeblendet + Menü fehlt ganz - ggf. doch lieber CSS-Link in <noscript> rein */ 

html.js .dropbutton-toggle {
  visibility:hidden !important;
  display:none !important;
  background: none !important;
  border:0 !important;
  position:absolute;top:0;left:-9999rem;
  height:1px !important;
  width:1px !important;
}

/* nötig? */
/*
.js .views-edit-view .dropbutton-wrapper {
  width: auto;
}
*/